@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.60

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

@@ -2,32 +2,4 @@
 
 exports[`Banner matches the snapshot 1`] = `ShallowWrapper {}`;
 
-exports[`Banner styles matches the snapshot 1`] = `
-Object {
-  "container": Object {
-    "backgroundColor": "#222222",
-    "padding": 16,
-  },
-  "icon": Object {
-    "cursor": "pointer",
-  },
-  "iconFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "padding": 0,
-    },
-    "paddingLeft": 16,
-    "paddingTop": 16,
-  },
-  "textBanner": Object {
-    "display": "inline-block",
-  },
-  "textFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "textAlign": "center",
-    },
-    "textAlign": "start",
-  },
-}
-`;
-
 exports[`BannerJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Banner/index.js

@@ -5,14 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss["default"])(_styles["default"])(_Banner["default"]);
-
+var _default = _Banner["default"];
 exports["default"] = _default;

package/build/Button/Button.js

@@ -89,7 +89,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
       if (block) classNames += " ".concat(classes.block);
       if (className) classNames += " ".concat(className);
 
-      if (!children && icon) {
+      if (!children && (icon || iconRight)) {
         classNames += " ".concat(classes.iconOnly);
         if (round) classNames += " ".concat(classes.round);
       }

package/build/Button/Button.test.js

@@ -134,15 +134,4 @@ describe("Button styles", function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });
-  it('returns the right icons', function () {
-    var props = {
-      icon: 'testing'
-    };
-    expect(_styles["default"].primary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
-    expect(_styles["default"].secondary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
-    expect(_styles["default"].tertiary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
-    expect(_styles["default"].ghostPink['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMTM0NjU=)');
-    expect(_styles["default"].ghostGrey['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICM1QTVEN0I=)');
-    expect(_styles["default"].ghostWhite['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
-  });
 });

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 [
@@ -197,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)",
@@ -229,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)",
@@ -275,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)",
@@ -303,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
       }
     }
   },
@@ -353,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,