@govuk-react/checkbox - npm Package Compare versions

Comparing version 0.10.5 to 0.10.6

dist/declarations/src/index.d.ts

@@ -7,2 +7,3 @@ /**
 import * as React from 'react';
+import type { ComponentSizeVariant } from '@govuk-react/lib';
 /**
@@ -25,3 +26,7 @@ * Let users select one or more options by using the checkboxes component.
     className?: string;
+    /**
+     * Size of checkbox
+     */
+    sizeVariant?: `${ComponentSizeVariant.MEDIUM}` | `${ComponentSizeVariant.SMALL}`;
 }
 export default Checkbox;

dist/govuk-react-checkbox.cjs.d.ts

 export * from "./declarations/src/index";
 export { default } from "./declarations/src/index";
+//# sourceMappingURL=govuk-react-checkbox.cjs.d.ts.map

dist/govuk-react-checkbox.cjs.dev.js

@@ -37,6 +37,5 @@ 'use strict';
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -48,47 +47,11 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var _excluded = ["children", "className", "hint"];
-var checkboxSize = constants.SPACING_POINTS[7];
-var labelPaddingLeftRight = constants.SPACING_POINTS[3];
-var StyledCheckbox = styled__default["default"]('label').withConfig({
+const checkboxSize = constants.SPACING_POINTS[7];
+const checkboxSizeSmall = constants.SPACING_POINTS[5];
+const labelPaddingLeftRight = constants.SPACING_POINTS[3];
+const StyledCheckbox = styled__default["default"]('label').withConfig({
   displayName: "src__StyledCheckbox",
@@ -102,8 +65,35 @@ componentId: "sc-1hkoucn-0"
   minHeight: checkboxSize,
-  padding: "0 0 0 ".concat(checkboxSize, "px"),
+  padding: `0 0 0 ${checkboxSize}px`,
   clear: 'left'
+}, _ref => {
+  let {
+    sizeVariant
+  } = _ref;
+  return sizeVariant === 'SMALL' && {
+    paddingRight: 22,
+    span: {
+      padding: '12px 15px 13px 0',
+      fontSize: constants.FONT_SIZE.SIZE_16,
+      [constants.MEDIA_QUERIES.LARGESCREEN]: {
+        fontSize: constants.FONT_SIZE.SIZE_19,
+        padding: `10px 15px 10px 1px`
+      },
+      ':before': {
+        width: checkboxSizeSmall,
+        height: checkboxSizeSmall,
+        top: 8
+      },
+      ':after': {
+        top: 15,
+        left: 6,
+        width: 11,
+        height: 4.5,
+        borderWidth: '0 0 3px 3px'
+      }
+    }
+  };
 }, lib.spacing.withWhiteSpace({
   marginBottom: 2
 }));
-var StyledInput = styled__default["default"]('input').withConfig({
+const StyledInput = styled__default["default"]('input').withConfig({
   displayName: "src__StyledInput",
@@ -123,8 +113,10 @@ componentId: "sc-1hkoucn-1"
   ':focus + span:before': {
-    outline: "".concat(constants.FOCUS_WIDTH, " solid transparent"),
+    outline: `${constants.FOCUS_WIDTH} solid transparent`,
     outlineOffset: constants.FOCUS_WIDTH,
-    boxShadow: "0 0 0 ".concat(constants.FOCUS_WIDTH, " ").concat(govukColours.FOCUS_COLOUR)
+    boxShadow: `0 0 0 ${constants.FOCUS_WIDTH} ${govukColours.FOCUS_COLOUR}`
   }
-}, function (_ref) {
-  var disabled = _ref.disabled;
+}, _ref2 => {
+  let {
+    disabled
+  } = _ref2;
   return {
@@ -138,3 +130,3 @@ cursor: disabled ? 'default' : 'pointer',
 });
-var StyledLabel = styled__default["default"]('span').withConfig({
+const StyledLabel = styled__default["default"]('span').withConfig({
   displayName: "src__StyledLabel",
@@ -145,3 +137,3 @@ componentId: "sc-1hkoucn-2"
   cursor: 'pointer',
-  padding: "8px ".concat(labelPaddingLeftRight, "px ").concat(constants.SPACING_POINTS[1], "px"),
+  padding: `8px ${labelPaddingLeftRight}px ${constants.SPACING_POINTS[1]}px`,
   MsTouchAction: 'manipulation',
@@ -157,3 +149,3 @@ touchAction: 'manipulation',
     height: checkboxSize,
-    border: "".concat(constants.BORDER_WIDTH_FORM_ELEMENT, " solid black"),
+    border: `${constants.BORDER_WIDTH_FORM_ELEMENT} solid black`,
     background: 'transparent'
@@ -170,3 +162,3 @@ },
     border: 'solid',
-    borderWidth: "0 0 ".concat(constants.BORDER_WIDTH, " ").concat(constants.BORDER_WIDTH),
+    borderWidth: `0 0 ${constants.BORDER_WIDTH} ${constants.BORDER_WIDTH}`,
     borderTopColor: 'transparent',
@@ -177,3 +169,3 @@ background: 'transparent',
 });
-var StyledCheckboxHint = styled__default["default"](HintText__default["default"]).withConfig({
+const StyledCheckboxHint = styled__default["default"](HintText__default["default"]).withConfig({
   displayName: "src__StyledCheckboxHint",
@@ -186,2 +178,3 @@ componentId: "sc-1hkoucn-3"
 });
+
 /**
@@ -193,11 +186,13 @@ * Let users select one or more options by using the checkboxes component.
  */
-
-var Checkbox = /*#__PURE__*/React__namespace.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-      className = _ref2.className,
-      hint = _ref2.hint,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+const Checkbox = /*#__PURE__*/React__namespace.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    className,
+    hint,
+    sizeVariant,
+    ...props
+  } = _ref3;
   return /*#__PURE__*/React__namespace.createElement(StyledCheckbox, {
-    className: className
+    className: className,
+    sizeVariant: sizeVariant
   }, /*#__PURE__*/React__namespace.createElement(StyledInput, _extends({
@@ -212,5 +207,6 @@ type: "checkbox"
   hint: undefined,
-  className: undefined
+  className: undefined,
+  sizeVariant: 'MEDIUM'
 };
 
 exports["default"] = Checkbox;

dist/govuk-react-checkbox.cjs.prod.js

@@ -37,6 +37,5 @@ 'use strict';
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -48,47 +47,11 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var _excluded = ["children", "className", "hint"];
-var checkboxSize = constants.SPACING_POINTS[7];
-var labelPaddingLeftRight = constants.SPACING_POINTS[3];
-var StyledCheckbox = styled__default["default"]('label').withConfig({
+const checkboxSize = constants.SPACING_POINTS[7];
+const checkboxSizeSmall = constants.SPACING_POINTS[5];
+const labelPaddingLeftRight = constants.SPACING_POINTS[3];
+const StyledCheckbox = styled__default["default"]('label').withConfig({
   displayName: "src__StyledCheckbox",
@@ -102,8 +65,35 @@ componentId: "sc-1hkoucn-0"
   minHeight: checkboxSize,
-  padding: "0 0 0 ".concat(checkboxSize, "px"),
+  padding: `0 0 0 ${checkboxSize}px`,
   clear: 'left'
+}, _ref => {
+  let {
+    sizeVariant
+  } = _ref;
+  return sizeVariant === 'SMALL' && {
+    paddingRight: 22,
+    span: {
+      padding: '12px 15px 13px 0',
+      fontSize: constants.FONT_SIZE.SIZE_16,
+      [constants.MEDIA_QUERIES.LARGESCREEN]: {
+        fontSize: constants.FONT_SIZE.SIZE_19,
+        padding: `10px 15px 10px 1px`
+      },
+      ':before': {
+        width: checkboxSizeSmall,
+        height: checkboxSizeSmall,
+        top: 8
+      },
+      ':after': {
+        top: 15,
+        left: 6,
+        width: 11,
+        height: 4.5,
+        borderWidth: '0 0 3px 3px'
+      }
+    }
+  };
 }, lib.spacing.withWhiteSpace({
   marginBottom: 2
 }));
-var StyledInput = styled__default["default"]('input').withConfig({
+const StyledInput = styled__default["default"]('input').withConfig({
   displayName: "src__StyledInput",
@@ -123,8 +113,10 @@ componentId: "sc-1hkoucn-1"
   ':focus + span:before': {
-    outline: "".concat(constants.FOCUS_WIDTH, " solid transparent"),
+    outline: `${constants.FOCUS_WIDTH} solid transparent`,
     outlineOffset: constants.FOCUS_WIDTH,
-    boxShadow: "0 0 0 ".concat(constants.FOCUS_WIDTH, " ").concat(govukColours.FOCUS_COLOUR)
+    boxShadow: `0 0 0 ${constants.FOCUS_WIDTH} ${govukColours.FOCUS_COLOUR}`
   }
-}, function (_ref) {
-  var disabled = _ref.disabled;
+}, _ref2 => {
+  let {
+    disabled
+  } = _ref2;
   return {
@@ -138,3 +130,3 @@ cursor: disabled ? 'default' : 'pointer',
 });
-var StyledLabel = styled__default["default"]('span').withConfig({
+const StyledLabel = styled__default["default"]('span').withConfig({
   displayName: "src__StyledLabel",
@@ -145,3 +137,3 @@ componentId: "sc-1hkoucn-2"
   cursor: 'pointer',
-  padding: "8px ".concat(labelPaddingLeftRight, "px ").concat(constants.SPACING_POINTS[1], "px"),
+  padding: `8px ${labelPaddingLeftRight}px ${constants.SPACING_POINTS[1]}px`,
   MsTouchAction: 'manipulation',
@@ -157,3 +149,3 @@ touchAction: 'manipulation',
     height: checkboxSize,
-    border: "".concat(constants.BORDER_WIDTH_FORM_ELEMENT, " solid black"),
+    border: `${constants.BORDER_WIDTH_FORM_ELEMENT} solid black`,
     background: 'transparent'
@@ -170,3 +162,3 @@ },
     border: 'solid',
-    borderWidth: "0 0 ".concat(constants.BORDER_WIDTH, " ").concat(constants.BORDER_WIDTH),
+    borderWidth: `0 0 ${constants.BORDER_WIDTH} ${constants.BORDER_WIDTH}`,
     borderTopColor: 'transparent',
@@ -177,3 +169,3 @@ background: 'transparent',
 });
-var StyledCheckboxHint = styled__default["default"](HintText__default["default"]).withConfig({
+const StyledCheckboxHint = styled__default["default"](HintText__default["default"]).withConfig({
   displayName: "src__StyledCheckboxHint",
@@ -186,2 +178,3 @@ componentId: "sc-1hkoucn-3"
 });
+
 /**
@@ -193,11 +186,13 @@ * Let users select one or more options by using the checkboxes component.
  */
-
-var Checkbox = /*#__PURE__*/React__namespace.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-      className = _ref2.className,
-      hint = _ref2.hint,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+const Checkbox = /*#__PURE__*/React__namespace.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    className,
+    hint,
+    sizeVariant,
+    ...props
+  } = _ref3;
   return /*#__PURE__*/React__namespace.createElement(StyledCheckbox, {
-    className: className
+    className: className,
+    sizeVariant: sizeVariant
   }, /*#__PURE__*/React__namespace.createElement(StyledInput, _extends({
@@ -212,5 +207,6 @@ type: "checkbox"
   hint: undefined,
-  className: undefined
+  className: undefined,
+  sizeVariant: 'MEDIUM'
 };
 
 exports["default"] = Checkbox;

dist/govuk-react-checkbox.esm.js

@@ -5,10 +5,9 @@ import * as React from 'react';
 import { FOCUS_COLOUR } from 'govuk-colours';
-import { SPACING_POINTS, FOCUS_WIDTH, BORDER_WIDTH_FORM_ELEMENT, BORDER_WIDTH } from '@govuk-react/constants';
+import { SPACING_POINTS, FONT_SIZE, MEDIA_QUERIES, FOCUS_WIDTH, BORDER_WIDTH_FORM_ELEMENT, BORDER_WIDTH } from '@govuk-react/constants';
 import { typography, spacing } from '@govuk-react/lib';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -20,47 +19,11 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var _excluded = ["children", "className", "hint"];
-var checkboxSize = SPACING_POINTS[7];
-var labelPaddingLeftRight = SPACING_POINTS[3];
-var StyledCheckbox = styled('label').withConfig({
+const checkboxSize = SPACING_POINTS[7];
+const checkboxSizeSmall = SPACING_POINTS[5];
+const labelPaddingLeftRight = SPACING_POINTS[3];
+const StyledCheckbox = styled('label').withConfig({
   displayName: "src__StyledCheckbox",
@@ -74,8 +37,35 @@ componentId: "sc-1hkoucn-0"
   minHeight: checkboxSize,
-  padding: "0 0 0 ".concat(checkboxSize, "px"),
+  padding: `0 0 0 ${checkboxSize}px`,
   clear: 'left'
+}, _ref => {
+  let {
+    sizeVariant
+  } = _ref;
+  return sizeVariant === 'SMALL' && {
+    paddingRight: 22,
+    span: {
+      padding: '12px 15px 13px 0',
+      fontSize: FONT_SIZE.SIZE_16,
+      [MEDIA_QUERIES.LARGESCREEN]: {
+        fontSize: FONT_SIZE.SIZE_19,
+        padding: `10px 15px 10px 1px`
+      },
+      ':before': {
+        width: checkboxSizeSmall,
+        height: checkboxSizeSmall,
+        top: 8
+      },
+      ':after': {
+        top: 15,
+        left: 6,
+        width: 11,
+        height: 4.5,
+        borderWidth: '0 0 3px 3px'
+      }
+    }
+  };
 }, spacing.withWhiteSpace({
   marginBottom: 2
 }));
-var StyledInput = styled('input').withConfig({
+const StyledInput = styled('input').withConfig({
   displayName: "src__StyledInput",
@@ -95,8 +85,10 @@ componentId: "sc-1hkoucn-1"
   ':focus + span:before': {
-    outline: "".concat(FOCUS_WIDTH, " solid transparent"),
+    outline: `${FOCUS_WIDTH} solid transparent`,
     outlineOffset: FOCUS_WIDTH,
-    boxShadow: "0 0 0 ".concat(FOCUS_WIDTH, " ").concat(FOCUS_COLOUR)
+    boxShadow: `0 0 0 ${FOCUS_WIDTH} ${FOCUS_COLOUR}`
   }
-}, function (_ref) {
-  var disabled = _ref.disabled;
+}, _ref2 => {
+  let {
+    disabled
+  } = _ref2;
   return {
@@ -110,3 +102,3 @@ cursor: disabled ? 'default' : 'pointer',
 });
-var StyledLabel = styled('span').withConfig({
+const StyledLabel = styled('span').withConfig({
   displayName: "src__StyledLabel",
@@ -117,3 +109,3 @@ componentId: "sc-1hkoucn-2"
   cursor: 'pointer',
-  padding: "8px ".concat(labelPaddingLeftRight, "px ").concat(SPACING_POINTS[1], "px"),
+  padding: `8px ${labelPaddingLeftRight}px ${SPACING_POINTS[1]}px`,
   MsTouchAction: 'manipulation',
@@ -129,3 +121,3 @@ touchAction: 'manipulation',
     height: checkboxSize,
-    border: "".concat(BORDER_WIDTH_FORM_ELEMENT, " solid black"),
+    border: `${BORDER_WIDTH_FORM_ELEMENT} solid black`,
     background: 'transparent'
@@ -142,3 +134,3 @@ },
     border: 'solid',
-    borderWidth: "0 0 ".concat(BORDER_WIDTH, " ").concat(BORDER_WIDTH),
+    borderWidth: `0 0 ${BORDER_WIDTH} ${BORDER_WIDTH}`,
     borderTopColor: 'transparent',
@@ -149,3 +141,3 @@ background: 'transparent',
 });
-var StyledCheckboxHint = styled(HintText).withConfig({
+const StyledCheckboxHint = styled(HintText).withConfig({
   displayName: "src__StyledCheckboxHint",
@@ -158,2 +150,3 @@ componentId: "sc-1hkoucn-3"
 });
+
 /**
@@ -165,11 +158,13 @@ * Let users select one or more options by using the checkboxes component.
  */
-
-var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-      className = _ref2.className,
-      hint = _ref2.hint,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    className,
+    hint,
+    sizeVariant,
+    ...props
+  } = _ref3;
   return /*#__PURE__*/React.createElement(StyledCheckbox, {
-    className: className
+    className: className,
+    sizeVariant: sizeVariant
   }, /*#__PURE__*/React.createElement(StyledInput, _extends({
@@ -184,5 +179,6 @@ type: "checkbox"
   hint: undefined,
-  className: undefined
+  className: undefined,
+  sizeVariant: 'MEDIUM'
 };
 
 export { Checkbox as default };

package.json

 {
   "name": "@govuk-react/checkbox",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "dependencies": {
-    "@govuk-react/constants": "^0.10.5",
-    "@govuk-react/hint-text": "^0.10.5",
-    "@govuk-react/lib": "^0.10.5",
+    "@govuk-react/constants": "^0.10.6",
+    "@govuk-react/hint-text": "^0.10.6",
+    "@govuk-react/lib": "^0.10.6",
     "govuk-colours": "^1.1.0"
@@ -9,0 +9,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

46575

increased by1%

Number of package files

12

increased by9.09%

Lines of code

807

increased by9.5%

Dependency changes

• Updated@govuk-react/constants@^0.10.6

• Updated@govuk-react/hint-text@^0.10.6

• Updated@govuk-react/lib@^0.10.6