@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 @@ });

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

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