@occmundial/occ-atomic 3.0.0-beta.4 → 3.0.0-beta.41

package/build/Button/__snapshots__/Button.test.js.snap

@@ -48,28 +48,28 @@ Object {
     "pointerEvents": "none",
   },
   "ghostGrey": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#5A5D7B",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#5A5D7B",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "#D3D4DC",
+      },
       "background": "transparent",
       "color": "#878A9F",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "hsl(234 75.4% 12.7% / 0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    },
     "&:hover": Object {
       "background": "hsl(234 75.4% 12.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
-    },
     "background": "transparent",
     "color": "#5A5D7B",
   },
@@ -77,13 +77,7 @@ Object {
     "& $loadIcon": Object {
       "fill": "#f13465",
     },
-    "& span span": Object {
-      "background": [Function],
-    },
     "&$disabled": Object {
-      "& span span": Object {
-        "background": [Function],
-      },
       "background": "transparent !important",
       "border": "none !important",
       "color": "#fa90ac !important",
@@ -107,25 +101,25 @@ Object {
     ],
   },
   "ghostWhite": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "#fff",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "transparent",
       "color": "rgba(255,255,255,0.7)",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
   },
@@ -136,6 +130,7 @@ Object {
   },
   "iconOnly": Object {
     "& span span, & svg": Object {
+      "marginLeft": 0,
       "marginRight": 0,
     },
     "padding": Array [
@@ -145,10 +140,8 @@ Object {
   },
   "iconRight": Object {
     "display": "inline-block",
-    "height": 16,
     "marginLeft": "8px",
     "transition": "0.3s all",
-    "width": 16,
   },
   "lg": Object {
     "&$iconOnly": Object {
@@ -199,29 +192,29 @@ Object {
     ],
   },
   "primary": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "#fff",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "#F6809E",
       "color": "rgba(255,255,255,0.7)",
       "cursor": "not-allowed",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "#821C36",
     },
     "&:focus": Object {
       "outline": "2px solid rgba(255,255,255,0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
+    },
     "&:hover": Object {
       "background": "#A32444",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
-    },
     "background": "#D32E58",
     "color": "#fff",
     "outline": "2px solid rgba(255,255,255,0.2)",
@@ -231,45 +224,45 @@ Object {
     "borderRadius": "50%",
   },
   "secondary": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#083CAE",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#083CAE",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "#8DA5DA",
+      },
       "background": "hsl(221 91.2% 35.7% / 0.1)",
       "color": "#486EC3",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "hsl(221 91.2% 35.7% / 0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "hsl(221 91.2% 35.7% / 0.05)",
     "color": "#083CAE",
   },
   "tertiary": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#083CAE",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#083CAE",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "#8DA5DA",
+      },
       "background": "transparent",
       "color": "#486EC3",
-      "outline": "2px solid #8DA5DA",
-    },
-    "&$disabled span span": Object {
-      "background": [Function],
+      "outlineColor": "#8DA5DA",
     },
     "&:active": Object {
       "background": "hsl(221 91.2% 35.7% / 0.1)",
@@ -277,27 +270,28 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #083CAE",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "transparent",
     "color": "#083CAE",
     "outline": "2px solid #083CAE",
     "outlineOffset": "-2px",
   },
   "tertiaryWhite": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "#fff",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "transparent",
       "color": "rgba(255,255,255,0.7)",
-    },
-    "&$disabled span span": Object {
-      "background": [Function],
+      "outlineColor": "rgba(255,255,255,0.2)",
     },
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
@@ -305,12 +299,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #fff",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
     "outline": "2px solid #fff",

package/build/Button/styles.js

@@ -27,7 +27,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var sec = _colors["default"].sec,
     secDark = _colors["default"].secDark,
-    grey500 = _colors["default"].grey500,
     secLight = _colors["default"].secLight;
 var sm = _fonts2["default"]['button-small'];
 var md = _fonts2["default"]['button-medium'];
@@ -102,22 +101,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.primary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-pink']
     },
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
+    },
     '&$disabled': {
       background: _colors2["default"].button.primary.bg.disabled,
       color: _colors2["default"].text.white.secondary,
-      cursor: 'not-allowed'
-    },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      cursor: 'not-allowed',
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -130,21 +125,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.secondary.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.brand["default"]
+    },
     '&$disabled': {
       background: _colors2["default"].button.secondary.bg.disabled,
-      color: _colors2["default"].text.indigo.secondary
-    },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
-      }
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
+      color: _colors2["default"].text.indigo.secondary,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.brand.disabled
       }
     },
     '& $loadIcon': {
@@ -165,22 +156,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.tertiary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.brand["default"]
     },
     '&$disabled': {
       background: 'transparent',
       color: _colors2["default"].text.indigo.secondary,
-      outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.disabled)
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
+      outlineColor: _colors2["default"].button.tertiary.border.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.brand.disabled
       }
     },
     '& $loadIcon': {
@@ -201,21 +188,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.inverse["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.white.secondary
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      color: _colors2["default"].text.white.secondary,
+      outlineColor: _colors2["default"].button.tertiary.border.inverse.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -233,20 +217,10 @@ var _default = {
         }
       }
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [sec]);
-      }
-    },
     '&$disabled': {
       background: "transparent !important",
       color: "".concat(secLight, " !important"),
-      border: "none !important",
-      '& span span': {
-        background: function background(props) {
-          return renderIcon(props, [grey500]);
-        }
-      }
+      border: "none !important"
     },
     '& $loadIcon': {
       fill: sec
@@ -261,21 +235,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-corp']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon["default"]["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon["default"]["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.corp.disabled
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon["default"].disabled]);
+      color: _colors2["default"].text.corp.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon["default"].disabled
       }
     },
     '& $loadIcon': {
@@ -291,21 +261,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.inverse.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.white.secondary
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      color: _colors2["default"].text.white.secondary,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -346,8 +312,6 @@ var _default = {
     transition: '0.3s all'
   },
   iconRight: {
-    width: 16,
-    height: 16,
     marginLeft: _spacing["default"]['size-2'],
     display: 'inline-block',
     transition: '0.3s all'
@@ -355,7 +319,8 @@ var _default = {
   iconOnly: {
     padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']],
     '& span span, & svg': {
-      marginRight: 0
+      marginRight: 0,
+      marginLeft: 0
     }
   },
   loadIcon: {

package/build/Checkbox/Checkbox.js

@@ -13,6 +13,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -53,6 +57,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
       undetermined: props.undetermined
     };
     _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -81,6 +86,20 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(value, id);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        this.toggle();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -96,11 +115,16 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           id = _this$props2.id,
           className = _this$props2.className,
           style = _this$props2.style,
+          alignLeft = _this$props2.alignLeft,
           trk = _this$props2.trk,
           testId = _this$props2.testId;
       var iconClass = undetermined ? " ".concat(classes.undetermined) : value ? " ".concat(classes.active) : '';
+      var iconColor = disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.inverse["default"];
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: id,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
         className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         onClick: this.toggle,
         style: style,
@@ -108,16 +132,34 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
       }, testId && {
         'data-value': value ? 1 : 0
       }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.checkWrap
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.check,
         id: trk
-      }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.box
+      }), undetermined && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "minus",
+        width: 16,
+        height: 16,
+        colors: [iconColor],
+        className: classes.icon
+      }), !undetermined && value && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "check",
+        width: 16,
+        height: 16,
+        colors: [iconColor],
+        className: classes.icon
+      }))), !!(label || right) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.labelWrap
+      }, label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
-        className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
+        className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
       }, label), right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
         mid: true,
         className: classes.right
-      }, right));
+      }, right)));
     }
   }]);
 
@@ -148,6 +190,9 @@ Checkbox.propTypes = {
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Id for catching selected element for tracking. */
   trk: _propTypes["default"].string,
   id: _propTypes["default"].string,