@govuk-react/input - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

es/index.js

@@ -1,3 +0,1 @@
-var _styled;
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -10,6 +8,7 @@
 import styled from 'react-emotion';
-import { BLACK, YELLOW, ERROR_COLOUR } from 'govuk-colours';
+import { BLACK, ERROR_COLOUR } from 'govuk-colours';
 import { withWhiteSpace } from '@govuk-react/hoc';
-import { FONT_SIZE, LINE_HEIGHT, MEDIA_QUERIES, NTA_LIGHT } from '@govuk-react/constants';
-var StyledInput =
+import { BORDER_WIDTH_FORM_ELEMENT, BORDER_WIDTH_FORM_ELEMENT_ERROR, FOCUSABLE, SPACING_POINTS } from '@govuk-react/constants';
+import { typography } from '@govuk-react/lib';
+export var StyledInput =
 /*#__PURE__*/
@@ -19,23 +18,26 @@ styled('input', {
   label: "StyledInput"
-})((_styled = {
+})(typography.font({
+  size: 19
+}), FOCUSABLE, {
   boxSizing: 'border-box',
-  fontFamily: NTA_LIGHT,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  fontWeight: 400,
-  textTransform: 'none',
-  fontSize: FONT_SIZE.SIZE_16,
-  lineHeight: LINE_HEIGHT.SIZE_16
-}, _styled[MEDIA_QUERIES.LARGESCREEN] = {
-  fontSize: FONT_SIZE.SIZE_19,
-  lineHeight: LINE_HEIGHT.SIZE_19,
-  width: '50%'
-}, _styled.width = '100%', _styled.padding = '5px 4px 4px', _styled.border = "2px solid " + BLACK, _styled[':focus'] = {
-  outline: "3px solid " + YELLOW,
-  outlineOffset: 0
-}, _styled), function (_ref) {
+  width: '100%',
+  height: '40px',
+  marginTop: 0,
+  padding: SPACING_POINTS[1],
+  // TODO replace BLACK here with INPUT_BORDER_COLOUR when supported in govuk-colours
+  border: BORDER_WIDTH_FORM_ELEMENT + " solid " + BLACK,
+  borderRadius: 0,
+  appearance: 'none',
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    margin: 0,
+    WebkitAppearance: 'none'
+  },
+  '&[type="number"]': {
+    MozAppearance: 'textfield'
+  }
+}, function (_ref) {
   var error = _ref.error,
       errorColor = _ref.errorColor;
   return {
-    border: error ? "4px solid " + (errorColor || ERROR_COLOUR) : undefined
+    border: error ? BORDER_WIDTH_FORM_ELEMENT_ERROR + " solid " + (errorColor || ERROR_COLOUR) : undefined
   };
@@ -42,0 +44,0 @@ });

es/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../src/index.js"],"names":["React","PropTypes","styled","BLACK","YELLOW","ERROR_COLOUR","withWhiteSpace","FONT_SIZE","LINE_HEIGHT","MEDIA_QUERIES","NTA_LIGHT","StyledInput","boxSizing","fontFamily","WebkitFontSmoothing","MozOsxFontSmoothing","fontWeight","textTransform","fontSize","SIZE_16","lineHeight","LARGESCREEN","SIZE_19","width","padding","border","outline","outlineOffset","error","errorColor","undefined","Input","type","props","defaultProps","marginBottom"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,MAAP,MAAmB,eAAnB;AAEA,SAASC,KAAT,EAAgBC,MAAhB,EAAwBC,YAAxB,QAA4C,eAA5C;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SACEC,SADF,EAEEC,WAFF,EAGEC,aAHF,EAIEC,SAJF,QAKO,wBALP;AAOA,IAAMC,WAAW;AAAA;AAAGT,MAAH,CAAU,OAAV;AAAA;AAAA;AAAA;AAEbU,EAAAA,SAAS,EAAE,YAFE;AAGbC,EAAAA,UAAU,EAAEH,SAHC;AAIbI,EAAAA,mBAAmB,EAAE,aAJR;AAKbC,EAAAA,mBAAmB,EAAE,WALR;AAMbC,EAAAA,UAAU,EAAE,GANC;AAObC,EAAAA,aAAa,EAAE,MAPF;AAQbC,EAAAA,QAAQ,EAAEX,SAAS,CAACY,OARP;AASbC,EAAAA,UAAU,EAAEZ,WAAW,CAACW;AATX,WAUZV,aAAa,CAACY,WAVF,IAUgB;AAC3BH,EAAAA,QAAQ,EAAEX,SAAS,CAACe,OADO;AAE3BF,EAAAA,UAAU,EAAEZ,WAAW,CAACc,OAFG;AAG3BC,EAAAA,KAAK,EAAE;AAHoB,CAVhB,UAebA,KAfa,GAeN,MAfM,UAgBbC,OAhBa,GAgBJ,aAhBI,UAiBbC,MAjBa,kBAiBQtB,KAjBR,UAkBb,QAlBa,IAkBH;AACRuB,EAAAA,OAAO,iBAAetB,MADd;AAERuB,EAAAA,aAAa,EAAE;AAFP,CAlBG,YAuBf;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,UAAV,QAAUA,UAAV;AAAA,SAA4B;AAC1BJ,IAAAA,MAAM,EAAEG,KAAK,mBAAgBC,UAAU,IAAIxB,YAA9B,IAA+CyB;AADlC,GAA5B;AAAA,CAvBe,CAAjB;AA4BA;;;;;;;;;;;;;;;;AAeA,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,IAAH,SAAGA,IAAH;AAAA,MAAYC,KAAZ;;AAAA,SAAwB,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAED;AAAnB,KAA6BC,KAA7B,EAAxB;AAAA,CAAd;;AAEAF,KAAK,CAACG,YAAN,GAAqB;AACnBF,EAAAA,IAAI,EAAE;AADa,CAArB;AAWA,eAAe1B,cAAc,CAAC;AAAE6B,EAAAA,YAAY,EAAE;AAAhB,CAAD,CAAd,CAAoCJ,KAApC,CAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'react-emotion';\n\nimport { BLACK, YELLOW, ERROR_COLOUR } from 'govuk-colours';\nimport { withWhiteSpace } from '@govuk-react/hoc';\nimport {\n  FONT_SIZE,\n  LINE_HEIGHT,\n  MEDIA_QUERIES,\n  NTA_LIGHT,\n} from '@govuk-react/constants';\n\nconst StyledInput = styled('input')(\n  {\n    boxSizing: 'border-box',\n    fontFamily: NTA_LIGHT,\n    WebkitFontSmoothing: 'antialiased',\n    MozOsxFontSmoothing: 'grayscale',\n    fontWeight: 400,\n    textTransform: 'none',\n    fontSize: FONT_SIZE.SIZE_16,\n    lineHeight: LINE_HEIGHT.SIZE_16,\n    [MEDIA_QUERIES.LARGESCREEN]: {\n      fontSize: FONT_SIZE.SIZE_19,\n      lineHeight: LINE_HEIGHT.SIZE_19,\n      width: '50%',\n    },\n    width: '100%',\n    padding: '5px 4px 4px',\n    border: `2px solid ${BLACK}`,\n    ':focus': {\n      outline: `3px solid ${YELLOW}`,\n      outlineOffset: 0,\n    },\n  },\n  ({ error, errorColor }) => ({\n    border: error ? `4px solid ${errorColor || ERROR_COLOUR}` : undefined,\n  }),\n);\n\n/**\n *\n * ### Usage\n *\n * Simple\n * ```jsx\n * <Input />\n * ```\n *\n * ### References:\n * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/\n *\n * ### TODO:\n * - Remove `errorColor` and provide examples on how to extend the component\n */\nconst Input = ({ type, ...props }) => <StyledInput type={type} {...props} />;\n\nInput.defaultProps = {\n  type: 'text',\n};\n\nInput.propTypes = {\n  /**\n   * HTML `<Input />` type\n   */\n  type: PropTypes.string,\n};\n\nexport default withWhiteSpace({ marginBottom: 0 })(Input);\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["React","PropTypes","styled","BLACK","ERROR_COLOUR","withWhiteSpace","BORDER_WIDTH_FORM_ELEMENT","BORDER_WIDTH_FORM_ELEMENT_ERROR","FOCUSABLE","SPACING_POINTS","typography","StyledInput","font","size","boxSizing","width","height","marginTop","padding","border","borderRadius","appearance","margin","WebkitAppearance","MozAppearance","error","errorColor","undefined","Input","type","props","defaultProps","marginBottom"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,MAAP,MAAmB,eAAnB;AAEA,SAASC,KAAT,EAAgBC,YAAhB,QAAoC,eAApC;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SACEC,yBADF,EAEEC,+BAFF,EAGEC,SAHF,EAIEC,cAJF,QAKO,wBALP;AAMA,SAASC,UAAT,QAA2B,kBAA3B;AAEA,OAAO,IAAMC,WAAW;AAAA;AAAGT,MAAH,CAAU,OAAV;AAAA;AAAA;AAAA,GACtBQ,UAAU,CAACE,IAAX,CAAgB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAhB,CADsB,EAEtBL,SAFsB,EAGtB;AACEM,EAAAA,SAAS,EAAE,YADb;AAEEC,EAAAA,KAAK,EAAE,MAFT;AAGEC,EAAAA,MAAM,EAAE,MAHV;AAIEC,EAAAA,SAAS,EAAE,CAJb;AAMEC,EAAAA,OAAO,EAAET,cAAc,CAAC,CAAD,CANzB;AAOE;AACAU,EAAAA,MAAM,EAAKb,yBAAL,eAAwCH,KARhD;AASEiB,EAAAA,YAAY,EAAE,CAThB;AAWEC,EAAAA,UAAU,EAAE,MAXd;AAaE,gEAA8D;AAC5DC,IAAAA,MAAM,EAAE,CADoD;AAE5DC,IAAAA,gBAAgB,EAAE;AAF0C,GAbhE;AAkBE,sBAAoB;AAClBC,IAAAA,aAAa,EAAE;AADG;AAlBtB,CAHsB,EAyBtB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,UAAV,QAAUA,UAAV;AAAA,SAA4B;AAC1BP,IAAAA,MAAM,EAAEM,KAAK,GAAMlB,+BAAN,gBAA+CmB,UAAU,IAAItB,YAA7D,IAA8EuB;AADjE,GAA5B;AAAA,CAzBsB,CAAjB;AA8BP;;;;;;;;;;;;;;;;AAeA,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,IAAH,SAAGA,IAAH;AAAA,MAAYC,KAAZ;;AAAA,SAAwB,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAED;AAAnB,KAA6BC,KAA7B,EAAxB;AAAA,CAAd;;AAEAF,KAAK,CAACG,YAAN,GAAqB;AACnBF,EAAAA,IAAI,EAAE;AADa,CAArB;AAWA,eAAexB,cAAc,CAAC;AAAE2B,EAAAA,YAAY,EAAE;AAAhB,CAAD,CAAd,CAAoCJ,KAApC,CAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'react-emotion';\n\nimport { BLACK, ERROR_COLOUR } from 'govuk-colours';\nimport { withWhiteSpace } from '@govuk-react/hoc';\nimport {\n  BORDER_WIDTH_FORM_ELEMENT,\n  BORDER_WIDTH_FORM_ELEMENT_ERROR,\n  FOCUSABLE,\n  SPACING_POINTS,\n} from '@govuk-react/constants';\nimport { typography } from '@govuk-react/lib';\n\nexport const StyledInput = styled('input')(\n  typography.font({ size: 19 }),\n  FOCUSABLE,\n  {\n    boxSizing: 'border-box',\n    width: '100%',\n    height: '40px',\n    marginTop: 0,\n\n    padding: SPACING_POINTS[1],\n    // TODO replace BLACK here with INPUT_BORDER_COLOUR when supported in govuk-colours\n    border: `${BORDER_WIDTH_FORM_ELEMENT} solid ${BLACK}`,\n    borderRadius: 0,\n\n    appearance: 'none',\n\n    '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n      margin: 0,\n      WebkitAppearance: 'none',\n    },\n\n    '&[type=\"number\"]': {\n      MozAppearance: 'textfield',\n    },\n  },\n  ({ error, errorColor }) => ({\n    border: error ? `${BORDER_WIDTH_FORM_ELEMENT_ERROR} solid ${errorColor || ERROR_COLOUR}` : undefined,\n  }),\n);\n\n/**\n *\n * ### Usage\n *\n * Simple\n * ```jsx\n * <Input />\n * ```\n *\n * ### References:\n * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/\n *\n * ### TODO:\n * - Remove `errorColor` and provide examples on how to extend the component\n */\nconst Input = ({ type, ...props }) => <StyledInput type={type} {...props} />;\n\nInput.defaultProps = {\n  type: 'text',\n};\n\nInput.propTypes = {\n  /**\n   * HTML `<Input />` type\n   */\n  type: PropTypes.string,\n};\n\nexport default withWhiteSpace({ marginBottom: 0 })(Input);\n"],"file":"index.js"}

lib/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.StyledInput = void 0;
 
@@ -18,3 +18,3 @@ var _react = _interopRequireDefault(require("react"));
 
-var _styled;
+var _lib = require("@govuk-react/lib");
 
@@ -32,23 +32,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   label: "StyledInput"
-})((_styled = {
+})(_lib.typography.font({
+  size: 19
+}), _constants.FOCUSABLE, {
   boxSizing: 'border-box',
-  fontFamily: _constants.NTA_LIGHT,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  fontWeight: 400,
-  textTransform: 'none',
-  fontSize: _constants.FONT_SIZE.SIZE_16,
-  lineHeight: _constants.LINE_HEIGHT.SIZE_16
-}, _styled[_constants.MEDIA_QUERIES.LARGESCREEN] = {
-  fontSize: _constants.FONT_SIZE.SIZE_19,
-  lineHeight: _constants.LINE_HEIGHT.SIZE_19,
-  width: '50%'
-}, _styled.width = '100%', _styled.padding = '5px 4px 4px', _styled.border = "2px solid " + _govukColours.BLACK, _styled[':focus'] = {
-  outline: "3px solid " + _govukColours.YELLOW,
-  outlineOffset: 0
-}, _styled), function (_ref) {
+  width: '100%',
+  height: '40px',
+  marginTop: 0,
+  padding: _constants.SPACING_POINTS[1],
+  // TODO replace BLACK here with INPUT_BORDER_COLOUR when supported in govuk-colours
+  border: _constants.BORDER_WIDTH_FORM_ELEMENT + " solid " + _govukColours.BLACK,
+  borderRadius: 0,
+  appearance: 'none',
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    margin: 0,
+    WebkitAppearance: 'none'
+  },
+  '&[type="number"]': {
+    MozAppearance: 'textfield'
+  }
+}, function (_ref) {
   var error = _ref.error,
       errorColor = _ref.errorColor;
   return {
-    border: error ? "4px solid " + (errorColor || _govukColours.ERROR_COLOUR) : undefined
+    border: error ? _constants.BORDER_WIDTH_FORM_ELEMENT_ERROR + " solid " + (errorColor || _govukColours.ERROR_COLOUR) : undefined
   };
@@ -72,2 +75,4 @@ });
 
+exports.StyledInput = StyledInput;
+
 var Input = function Input(_ref2) {
@@ -91,3 +96,2 @@ var type = _ref2.type,
 exports.default = _default;
-module.exports = exports.default;
 //# sourceMappingURL=index.js.map

lib/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../src/index.js"],"names":["StyledInput","styled","boxSizing","fontFamily","NTA_LIGHT","WebkitFontSmoothing","MozOsxFontSmoothing","fontWeight","textTransform","fontSize","FONT_SIZE","SIZE_16","lineHeight","LINE_HEIGHT","MEDIA_QUERIES","LARGESCREEN","SIZE_19","width","padding","border","BLACK","outline","YELLOW","outlineOffset","error","errorColor","ERROR_COLOUR","undefined","Input","type","props","defaultProps","marginBottom"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAOA,IAAMA,WAAW;AAAA;AAAA,IAAGC,qBAAH,EAAU,OAAV;AAAA;AAAA;AAAA;AAEbC,EAAAA,SAAS,EAAE,YAFE;AAGbC,EAAAA,UAAU,EAAEC,oBAHC;AAIbC,EAAAA,mBAAmB,EAAE,aAJR;AAKbC,EAAAA,mBAAmB,EAAE,WALR;AAMbC,EAAAA,UAAU,EAAE,GANC;AAObC,EAAAA,aAAa,EAAE,MAPF;AAQbC,EAAAA,QAAQ,EAAEC,qBAAUC,OARP;AASbC,EAAAA,UAAU,EAAEC,uBAAYF;AATX,WAUZG,yBAAcC,WAVF,IAUgB;AAC3BN,EAAAA,QAAQ,EAAEC,qBAAUM,OADO;AAE3BJ,EAAAA,UAAU,EAAEC,uBAAYG,OAFG;AAG3BC,EAAAA,KAAK,EAAE;AAHoB,CAVhB,UAebA,KAfa,GAeN,MAfM,UAgBbC,OAhBa,GAgBJ,aAhBI,UAiBbC,MAjBa,kBAiBQC,mBAjBR,UAkBb,QAlBa,IAkBH;AACRC,EAAAA,OAAO,iBAAeC,oBADd;AAERC,EAAAA,aAAa,EAAE;AAFP,CAlBG,YAuBf;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,UAAV,QAAUA,UAAV;AAAA,SAA4B;AAC1BN,IAAAA,MAAM,EAAEK,KAAK,mBAAgBC,UAAU,IAAIC,0BAA9B,IAA+CC;AADlC,GAA5B;AAAA,CAvBe,CAAjB;AA4BA;;;;;;;;;;;;;;;;AAeA,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,IAAH,SAAGA,IAAH;AAAA,MAAYC,KAAZ;;AAAA,SAAwB,6BAAC,WAAD;AAAa,IAAA,IAAI,EAAED;AAAnB,KAA6BC,KAA7B,EAAxB;AAAA,CAAd;;AAEAF,KAAK,CAACG,YAAN,GAAqB;AACnBF,EAAAA,IAAI,EAAE;AADa,CAArB;;eAWe,yBAAe;AAAEG,EAAAA,YAAY,EAAE;AAAhB,CAAf,EAAoCJ,KAApC,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'react-emotion';\n\nimport { BLACK, YELLOW, ERROR_COLOUR } from 'govuk-colours';\nimport { withWhiteSpace } from '@govuk-react/hoc';\nimport {\n  FONT_SIZE,\n  LINE_HEIGHT,\n  MEDIA_QUERIES,\n  NTA_LIGHT,\n} from '@govuk-react/constants';\n\nconst StyledInput = styled('input')(\n  {\n    boxSizing: 'border-box',\n    fontFamily: NTA_LIGHT,\n    WebkitFontSmoothing: 'antialiased',\n    MozOsxFontSmoothing: 'grayscale',\n    fontWeight: 400,\n    textTransform: 'none',\n    fontSize: FONT_SIZE.SIZE_16,\n    lineHeight: LINE_HEIGHT.SIZE_16,\n    [MEDIA_QUERIES.LARGESCREEN]: {\n      fontSize: FONT_SIZE.SIZE_19,\n      lineHeight: LINE_HEIGHT.SIZE_19,\n      width: '50%',\n    },\n    width: '100%',\n    padding: '5px 4px 4px',\n    border: `2px solid ${BLACK}`,\n    ':focus': {\n      outline: `3px solid ${YELLOW}`,\n      outlineOffset: 0,\n    },\n  },\n  ({ error, errorColor }) => ({\n    border: error ? `4px solid ${errorColor || ERROR_COLOUR}` : undefined,\n  }),\n);\n\n/**\n *\n * ### Usage\n *\n * Simple\n * ```jsx\n * <Input />\n * ```\n *\n * ### References:\n * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/\n *\n * ### TODO:\n * - Remove `errorColor` and provide examples on how to extend the component\n */\nconst Input = ({ type, ...props }) => <StyledInput type={type} {...props} />;\n\nInput.defaultProps = {\n  type: 'text',\n};\n\nInput.propTypes = {\n  /**\n   * HTML `<Input />` type\n   */\n  type: PropTypes.string,\n};\n\nexport default withWhiteSpace({ marginBottom: 0 })(Input);\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["StyledInput","styled","typography","font","size","FOCUSABLE","boxSizing","width","height","marginTop","padding","SPACING_POINTS","border","BORDER_WIDTH_FORM_ELEMENT","BLACK","borderRadius","appearance","margin","WebkitAppearance","MozAppearance","error","errorColor","BORDER_WIDTH_FORM_ELEMENT_ERROR","ERROR_COLOUR","undefined","Input","type","props","defaultProps","marginBottom"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAMA;;;;;;;;AAEO,IAAMA,WAAW;AAAA;AAAA,IAAGC,qBAAH,EAAU,OAAV;AAAA;AAAA;AAAA,GACtBC,gBAAWC,IAAX,CAAgB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAhB,CADsB,EAEtBC,oBAFsB,EAGtB;AACEC,EAAAA,SAAS,EAAE,YADb;AAEEC,EAAAA,KAAK,EAAE,MAFT;AAGEC,EAAAA,MAAM,EAAE,MAHV;AAIEC,EAAAA,SAAS,EAAE,CAJb;AAMEC,EAAAA,OAAO,EAAEC,0BAAe,CAAf,CANX;AAOE;AACAC,EAAAA,MAAM,EAAKC,oCAAL,eAAwCC,mBARhD;AASEC,EAAAA,YAAY,EAAE,CAThB;AAWEC,EAAAA,UAAU,EAAE,MAXd;AAaE,gEAA8D;AAC5DC,IAAAA,MAAM,EAAE,CADoD;AAE5DC,IAAAA,gBAAgB,EAAE;AAF0C,GAbhE;AAkBE,sBAAoB;AAClBC,IAAAA,aAAa,EAAE;AADG;AAlBtB,CAHsB,EAyBtB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,UAAV,QAAUA,UAAV;AAAA,SAA4B;AAC1BT,IAAAA,MAAM,EAAEQ,KAAK,GAAME,0CAAN,gBAA+CD,UAAU,IAAIE,0BAA7D,IAA8EC;AADjE,GAA5B;AAAA,CAzBsB,CAAjB;AA8BP;;;;;;;;;;;;;;;;;;AAeA,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,IAAH,SAAGA,IAAH;AAAA,MAAYC,KAAZ;;AAAA,SAAwB,6BAAC,WAAD;AAAa,IAAA,IAAI,EAAED;AAAnB,KAA6BC,KAA7B,EAAxB;AAAA,CAAd;;AAEAF,KAAK,CAACG,YAAN,GAAqB;AACnBF,EAAAA,IAAI,EAAE;AADa,CAArB;;eAWe,yBAAe;AAAEG,EAAAA,YAAY,EAAE;AAAhB,CAAf,EAAoCJ,KAApC,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'react-emotion';\n\nimport { BLACK, ERROR_COLOUR } from 'govuk-colours';\nimport { withWhiteSpace } from '@govuk-react/hoc';\nimport {\n  BORDER_WIDTH_FORM_ELEMENT,\n  BORDER_WIDTH_FORM_ELEMENT_ERROR,\n  FOCUSABLE,\n  SPACING_POINTS,\n} from '@govuk-react/constants';\nimport { typography } from '@govuk-react/lib';\n\nexport const StyledInput = styled('input')(\n  typography.font({ size: 19 }),\n  FOCUSABLE,\n  {\n    boxSizing: 'border-box',\n    width: '100%',\n    height: '40px',\n    marginTop: 0,\n\n    padding: SPACING_POINTS[1],\n    // TODO replace BLACK here with INPUT_BORDER_COLOUR when supported in govuk-colours\n    border: `${BORDER_WIDTH_FORM_ELEMENT} solid ${BLACK}`,\n    borderRadius: 0,\n\n    appearance: 'none',\n\n    '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n      margin: 0,\n      WebkitAppearance: 'none',\n    },\n\n    '&[type=\"number\"]': {\n      MozAppearance: 'textfield',\n    },\n  },\n  ({ error, errorColor }) => ({\n    border: error ? `${BORDER_WIDTH_FORM_ELEMENT_ERROR} solid ${errorColor || ERROR_COLOUR}` : undefined,\n  }),\n);\n\n/**\n *\n * ### Usage\n *\n * Simple\n * ```jsx\n * <Input />\n * ```\n *\n * ### References:\n * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/\n *\n * ### TODO:\n * - Remove `errorColor` and provide examples on how to extend the component\n */\nconst Input = ({ type, ...props }) => <StyledInput type={type} {...props} />;\n\nInput.defaultProps = {\n  type: 'text',\n};\n\nInput.propTypes = {\n  /**\n   * HTML `<Input />` type\n   */\n  type: PropTypes.string,\n};\n\nexport default withWhiteSpace({ marginBottom: 0 })(Input);\n"],"file":"index.js"}

package.json

 {
   "name": "@govuk-react/input",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "dependencies": {
-    "@govuk-react/constants": "^0.4.0",
-    "@govuk-react/hoc": "^0.4.0",
+    "@govuk-react/constants": "^0.5.0",
+    "@govuk-react/hoc": "^0.5.0",
+    "@govuk-react/lib": "^0.5.0",
     "govuk-colours": "^1.0.3"
@@ -8,0 +9,0 @@ },

src/index.js

@@ -5,36 +5,39 @@ import React from 'react';
 
-import { BLACK, YELLOW, ERROR_COLOUR } from 'govuk-colours';
+import { BLACK, ERROR_COLOUR } from 'govuk-colours';
 import { withWhiteSpace } from '@govuk-react/hoc';
 import {
-  FONT_SIZE,
-  LINE_HEIGHT,
-  MEDIA_QUERIES,
-  NTA_LIGHT,
+  BORDER_WIDTH_FORM_ELEMENT,
+  BORDER_WIDTH_FORM_ELEMENT_ERROR,
+  FOCUSABLE,
+  SPACING_POINTS,
 } from '@govuk-react/constants';
+import { typography } from '@govuk-react/lib';
 
-const StyledInput = styled('input')(
+export const StyledInput = styled('input')(
+  typography.font({ size: 19 }),
+  FOCUSABLE,
   {
     boxSizing: 'border-box',
-    fontFamily: NTA_LIGHT,
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    fontWeight: 400,
-    textTransform: 'none',
-    fontSize: FONT_SIZE.SIZE_16,
-    lineHeight: LINE_HEIGHT.SIZE_16,
-    [MEDIA_QUERIES.LARGESCREEN]: {
-      fontSize: FONT_SIZE.SIZE_19,
-      lineHeight: LINE_HEIGHT.SIZE_19,
-      width: '50%',
-    },
     width: '100%',
-    padding: '5px 4px 4px',
-    border: `2px solid ${BLACK}`,
-    ':focus': {
-      outline: `3px solid ${YELLOW}`,
-      outlineOffset: 0,
+    height: '40px',
+    marginTop: 0,
+
+    padding: SPACING_POINTS[1],
+    // TODO replace BLACK here with INPUT_BORDER_COLOUR when supported in govuk-colours
+    border: `${BORDER_WIDTH_FORM_ELEMENT} solid ${BLACK}`,
+    borderRadius: 0,
+
+    appearance: 'none',
+
+    '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+      margin: 0,
+      WebkitAppearance: 'none',
     },
+
+    '&[type="number"]': {
+      MozAppearance: 'textfield',
+    },
   },
   ({ error, errorColor }) => ({
-    border: error ? `4px solid ${errorColor || ERROR_COLOUR}` : undefined,
+    border: error ? `${BORDER_WIDTH_FORM_ELEMENT_ERROR} solid ${errorColor || ERROR_COLOUR}` : undefined,
   }),
@@ -41,0 +44,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

29553

4.97%

Lines of code

319

1.59%

Worsened metrics

Dependency count

7

16.67%

Dependency changes

• + Added

  @govuk-react/lib@^0.5.0

• + Added

  @govuk-react/constants@0.5.1
  (transitive)

• + Added

  @govuk-react/hoc@0.5.1
  (transitive)

• + Added

  @govuk-react/icons@0.5.1
  (transitive)

• + Added

  @govuk-react/lib@0.5.1
  (transitive)

• - Removed

  @govuk-react/constants@0.4.0
  (transitive)

• - Removed

  @govuk-react/hoc@0.4.0
  (transitive)

• - Removed

  @govuk-react/icons@0.4.0
  (transitive)

• Updated

  @govuk-react/constants@^0.5.0

• Updated

  @govuk-react/hoc@^0.5.0