@paprika/radio - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19-next.0

CHANGELOG.md

 # Changelog
 
+## 1.0.19-next.0
+
+### Patch Changes
+
+- 12384e9: Update radio size/colour
+
 ## 1.0.18
@@ -4,0 +10,0 @@

lib/Radio.styles.js

@@ -5,8 +5,16 @@ "use strict";
 
-var _WeakMap = require("@babel/runtime-corejs2/core-js/weak-map");
+var _Object$keys = require("@babel/runtime-corejs2/core-js/object/keys");
 
-var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs2/core-js/object/get-own-property-symbols");
 
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptor");
 
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs2/core-js/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
+
+var _WeakMap = require("@babel/runtime-corejs2/core-js/weak-map");
+
 var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
@@ -38,2 +46,6 @@
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var getLabelLeftPadding = function getLabelLeftPadding(radioSize, hasLabel) {
@@ -45,3 +57,2 @@ return hasLabel ? "".concat((0, _helpers.toInt)(radioSize) + (0, _helpers.toInt)(_tokens["default"].space), "px") : radioSize;
 var mediumRadioSize = _tokens["default"].radio.sizeMd;
-var largeRadioSize = _tokens["default"].radio.sizeLg;
 
@@ -54,3 +65,20 @@ var getHalfSizeCss = function getHalfSizeCss(sizeCss) {
 var mediumRadioHalfSize = getHalfSizeCss(mediumRadioSize);
-var largeRadioHalfSize = getHalfSizeCss(largeRadioSize);
+var generalRadioStyle = {
+  radioStyles: {
+    height: mediumRadioSize,
+    width: mediumRadioSize,
+    borderRadius: mediumRadioHalfSize
+  },
+  radioIconBackgroundStyles: {
+    borderRadius: "6px",
+    height: "10px",
+    top: "5px",
+    width: "10px"
+  },
+  radioIconStyles: {
+    fontSize: "".concat((0, _helpers.fontSizeValue)(-2), "px"),
+    height: mediumRadioSize,
+    left: mediumRadioHalfSize
+  }
+};
 var styles = (_styles = {}, (0, _defineProperty2["default"])(_styles, _types["default"].size.SMALL, {
@@ -82,22 +110,6 @@ baseFontSize: {
   }
-}), (0, _defineProperty2["default"])(_styles, _types["default"].size.MEDIUM, {
+}), (0, _defineProperty2["default"])(_styles, _types["default"].size.MEDIUM, _objectSpread(_objectSpread({}, generalRadioStyle), {}, {
   baseFontSize: {
-    fontSize: "".concat((0, _helpers.fontSizeValue)(), "px")
+    fontSize: "".concat((0, _helpers.fontSizeValue)(-1), "px")
   },
-  radioStyles: {
-    height: mediumRadioSize,
-    width: mediumRadioSize,
-    borderRadius: mediumRadioHalfSize
-  },
-  radioIconBackgroundStyles: {
-    borderRadius: "6px",
-    height: "10px",
-    top: "5px",
-    width: "10px"
-  },
-  radioIconStyles: {
-    fontSize: "".concat((0, _helpers.fontSizeValue)(-2), "px"),
-    height: mediumRadioSize,
-    left: mediumRadioHalfSize
-  },
   labelStyles: function labelStyles(hasLabel) {
@@ -109,29 +121,13 @@ return {
   }
-}), (0, _defineProperty2["default"])(_styles, _types["default"].size.LARGE, {
+})), (0, _defineProperty2["default"])(_styles, _types["default"].size.LARGE, _objectSpread(_objectSpread({}, generalRadioStyle), {}, {
   baseFontSize: {
     fontSize: "".concat((0, _helpers.fontSizeValue)(), "px")
   },
-  radioStyles: {
-    height: largeRadioSize,
-    width: largeRadioSize,
-    borderRadius: largeRadioHalfSize
-  },
-  radioIconBackgroundStyles: {
-    borderRadius: "6px",
-    height: "12px",
-    top: "6px",
-    width: "12px"
-  },
-  radioIconStyles: {
-    fontSize: "".concat((0, _helpers.fontSizeValue)(), "px"),
-    height: largeRadioSize,
-    left: largeRadioHalfSize
-  },
   labelStyles: function labelStyles(hasLabel) {
     return {
-      minHeight: largeRadioSize,
-      padding: "3px 0 0 ".concat(getLabelLeftPadding(largeRadioSize, hasLabel))
+      minHeight: mediumRadioSize,
+      padding: "0 0 0 ".concat(getLabelLeftPadding(mediumRadioSize, hasLabel))
     };
   }
-}), _styles);
+})), _styles);
 
@@ -144,3 +140,3 @@ var Radio = _styledComponents["default"].div.withConfig({
       hasLabel = _ref.hasLabel;
-  return (0, _styledComponents.css)(["", ";", ";", ";line-height:", ";position:relative;& + [data-pka-anchor=\"radio\"]{margin-top:", ";}input[type=\"radio\"]{", ";& + label{cursor:pointer;display:inline-block;margin:0;", ";position:relative;}& + label::before,& + label > .radio-icon{position:absolute;top:0;}& + label::before{", ";", ";background:", ";border:2px solid ", ";content:\"\";left:0;}& + label:hover::before{border:2px solid ", ";}& + label > .radio-icon{", ";", ";color:", ";opacity:0;pointer-events:none;transform:translateX(-50%);transition:opacity 0.15s ease-out;}& + label > .radio-solid-background{", ";background-color:", ";}&:checked{& + label.deselectable:hover:before{background:", ";}& + label::before{border:2px solid ", ";}}&:checked + label > [data-pka-anchor=\"radio.icon.check\"]{opacity:1;}&:disabled{& + label,& ~ .radio-icon{cursor:not-allowed;opacity:0.5;transition:none;}&:checked{& + label:hover::before{border:2px solid ", ";}& + label.deselectable:hover:before{background-color:inherit;}}& + label:hover::before{border:2px solid ", ";}}&:focus + label::before{border-color:", ";box-shadow:", ";}}"], _includes.boxSizingStyles, styles[size].baseFontSize, (0, _helpers.z)(0), hasLabel ? (0, _helpers.lineHeightValue)(-1) : "0", _tokens["default"].space, _includes.visuallyHidden, styles[size].labelStyles(hasLabel), styles[size].radioStyles, (0, _helpers.z)(1), _tokens["default"].color.white, _tokens["default"].border.color, _tokens["default"].color.black, styles[size].radioIconStyles, (0, _helpers.z)(2), _tokens["default"].color.black, styles[size].radioIconBackgroundStyles, _tokens["default"].color.black, _tokens["default"].color.blackLighten60, _tokens["default"].color.black, _tokens["default"].color.black, _tokens["default"].color.blackLighten60, _tokens["default"].highlight.active.noBorder.borderColor, _tokens["default"].highlight.active.noBorder.boxShadow);
+  return (0, _styledComponents.css)(["", ";", ";", ";line-height:", ";position:relative;& + [data-pka-anchor=\"radio\"]{margin-top:", ";}input[type=\"radio\"]{", ";& + label{cursor:pointer;display:inline-block;margin:0;", ";position:relative;}& + label::before,& + label > .radio-icon{position:absolute;top:0;}& + label::before{", ";", ";background:", ";border:2px solid ", ";content:\"\";left:0;}& + label:hover::before{border:2px solid ", ";}& + label > .radio-icon{", ";", ";color:", ";opacity:0;pointer-events:none;transform:translateX(-50%);transition:opacity 0.15s ease-out;}& + label > .radio-solid-background{", ";background-color:", ";}&:checked{& + label.deselectable:hover:before{background:", ";}& + label::before{border:2px solid ", ";}}&:checked + label > [data-pka-anchor=\"radio.icon.check\"]{opacity:1;}&:disabled{& + label,& ~ .radio-icon{cursor:not-allowed;opacity:0.5;transition:none;}& + label:before{border:2px solid ", ";}&:checked{& + label:hover::before{border:2px solid ", ";}& + label.deselectable:hover:before{background-color:inherit;}}& + label:hover::before{border:2px solid ", ";}}&:focus + label::before{border-color:", ";box-shadow:", ";}}"], _includes.boxSizingStyles, styles[size].baseFontSize, (0, _helpers.z)(0), hasLabel ? (0, _helpers.lineHeightValue)(-1) : "0", _tokens["default"].space, _includes.visuallyHidden, styles[size].labelStyles(hasLabel), styles[size].radioStyles, (0, _helpers.z)(1), _tokens["default"].color.white, _tokens["default"].color.blackLighten40, _tokens["default"].color.black, styles[size].radioIconStyles, (0, _helpers.z)(2), _tokens["default"].color.black, styles[size].radioIconBackgroundStyles, _tokens["default"].color.black, _tokens["default"].color.blackLighten60, _tokens["default"].color.black, _tokens["default"].color.blackLighten60, _tokens["default"].color.black, _tokens["default"].color.blackLighten60, _tokens["default"].highlight.active.noBorder.borderColor, _tokens["default"].highlight.active.noBorder.boxShadow);
 });
@@ -147,0 +143,0 @@

package.json

 {
   "name": "@paprika/radio",
-  "version": "1.0.18",
+  "version": "1.0.19-next.0",
   "description": "Radio component displays a radio input and label text beside it. When clicked it selects the input and deselects any other radio input in its group",
@@ -5,0 +5,0 @@ "author": "@paprika",

README.md

@@ -25,15 +25,15 @@ <!-- start: Autogenerated - do not modify -->
 
-| Prop             | Type                                                                       | required | default                 | Description                                                |
-| ---------------- | -------------------------------------------------------------------------- | -------- | ----------------------- | ---------------------------------------------------------- |
-| a11yText         | string                                                                     | false    | null                    | Used for aria-label on the radio input                     |
-| canDeselect      | bool                                                                       | false    | false                   | Describe if the radio started as selected or not           |
-| children         | node                                                                       | false    | null                    | Used for label contents                                    |
-| isChecked        | bool                                                                       | false    | false                   |                                                            |
-| isDisabled       | bool                                                                       | false    | false                   | Describe if the radio is disabled or not                   |
-| defaultIsChecked | bool                                                                       | false    | false                   | Describe if the radio started as checked or not            |
-| name             | string                                                                     | false    | ""                      | Name provided for accessibility                            |
-| onClick          | custom                                                                     | false    | () => {}                | onClick provided by parent Group component                 |
-| size             | [ Radio.types.size.SMALL, Radio.types.size.MEDIUM, Radio.types.size.LARGE] | false    | Radio.types.size.MEDIUM | Size provided by parent Group component                    |
-| tabIndex         | [number,string]                                                            | false    | 0                       | Value for tabindex attribute to override the default of 0. |
-| value            | string                                                                     | false    | ""                      | Value applied to the input if needed.                      |
+| Prop             | Type                                                                       | required | default                 | Description                                                                                                                                    |
+| ---------------- | -------------------------------------------------------------------------- | -------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| a11yText         | string                                                                     | false    | null                    | Used for aria-label on the radio input                                                                                                         |
+| canDeselect      | bool                                                                       | false    | false                   | Describe if the radio started as selected or not                                                                                               |
+| children         | node                                                                       | false    | null                    | Used for label contents                                                                                                                        |
+| isChecked        | bool                                                                       | false    | false                   |                                                                                                                                                |
+| isDisabled       | bool                                                                       | false    | false                   | Describe if the radio is disabled or not                                                                                                       |
+| defaultIsChecked | bool                                                                       | false    | false                   | Describe if the radio started as checked or not                                                                                                |
+| name             | string                                                                     | false    | ""                      | Name provided for accessibility                                                                                                                |
+| onClick          | custom                                                                     | false    | () => {}                | onClick provided by parent Group component                                                                                                     |
+| size             | [ Radio.types.size.SMALL, Radio.types.size.MEDIUM, Radio.types.size.LARGE] | false    | Radio.types.size.MEDIUM | Size of the labels provided by parent Group component. Size SMALL is depreciated in the design guideline therefore, please use MEDIUM instead. |
+| tabIndex         | [number,string]                                                            | false    | 0                       | Value for tabindex attribute to override the default of 0.                                                                                     |
+| value            | string                                                                     | false    | ""                      | Value applied to the input if needed.                                                                                                          |
 
@@ -40,0 +40,0 @@ ### Radio.Group

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60945

increased by2.51%

Worsened metrics

Lines of code

481

decreased by-1.64%

Number of low quality alerts

2

increased by100%

No dependency changes