@occmundial/occ-atomic 2.0.0 → 3.0.0-beta.2

package/build/Droplist/styles.js

@@ -5,70 +5,100 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var gutter = _spacing["default"].gutter,
-    tiny = _spacing["default"].tiny,
-    small = _spacing["default"].small,
-    base = _spacing["default"].base,
-    xTiny = _spacing["default"].xTiny;
-var primLighter = _colors["default"].primLighter,
-    grey50 = _colors["default"].grey50,
-    grey200 = _colors["default"].grey200,
-    bgWhite = _colors["default"].bgWhite,
-    textLink = _colors["default"].textLink;
 var _default = {
   block: {
-    background: bgWhite,
-    border: "1px solid ".concat(grey200),
-    borderRadius: xTiny,
-    overflow: 'hidden'
+    background: _colors["default"]['text-field'].bg["default"],
+    border: "1px solid ".concat(_colors["default"]['text-field'].border["default"]),
+    borderRadius: _borderRadius["default"]['br-xs'],
+    overflow: 'hidden',
+    padding: _spacing["default"]['size-2'],
+    boxShadow: _shadows["default"]['elevation-elevation-4']
+  },
+  text: {
+    margin: 0
   },
   group: {
-    padding: [small, small, xTiny]
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4'], 0],
+    display: 'inline-block'
+  },
+  groupText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label'])
   },
   item: {
     display: 'flex',
     justifyContent: 'space-between',
-    padding: [tiny, small],
+    alignItems: 'center',
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
     transition: '0.1s all',
+    borderRadius: _borderRadius["default"]['br-xs'],
     position: 'relative',
     '&:hover': {
-      background: grey50
+      background: _colors["default"].dropdown.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].dropdown.bg.active,
+      '& > $rightText': {
+        color: _colors["default"].text.corp.primary
+      }
     }
   },
   itemPointer: {
     cursor: 'pointer'
   },
+  disabled: {
+    pointerEvents: 'none'
+  },
   right: {
-    "float": 'right',
-    transition: '0.1s all',
-    marginLeft: small
+    marginLeft: _spacing["default"]['size-4']
+  },
+  rightText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label']),
+    color: _colors["default"].text.corp.secondary
   },
   onFocus: {
-    background: primLighter,
+    background: _colors["default"].dropdown.bg.active,
     '&:hover': {
-      background: primLighter
+      background: _colors["default"].dropdown.bg.active
     }
   },
   icon: {
-    marginRight: tiny,
-    position: 'absolute',
-    top: gutter
+    marginRight: _spacing["default"]['size-2']
   },
-  iconText: {
+  mainText: {
     display: 'inline-block',
-    marginLeft: base
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-placeholder']),
+    color: _colors["default"].text.corp.primary
+  },
+  corpDisabled: {
+    color: _colors["default"].text.corp.disabled
   },
   extraText: {
-    marginLeft: tiny
+    marginLeft: _spacing["default"]['size-1'],
+    display: 'inline-block',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['heading-tag']),
+    color: _colors["default"].text.indigo.primary
+  },
+  highlighted: {
+    background: _colors["default"].bg.action.secondary["default"],
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-placeholder'])
   },
-  extraTextColor: {
-    color: textLink
+  itemContainer: {
+    display: 'flex',
+    alignItems: 'center'
   }
 };
 exports["default"] = _default;

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

@@ -3,6 +3,7 @@
 exports[`FAB matches the snapshot 1`] = `
 <button
   className="Button-btn-0-1-28 Button-btn-0-1-1 Button-tertiary-0-1-23 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
+  disabled={false}
 >
   <span
     className="Button-cont-0-1-29 Button-cont-0-1-2"

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

@@ -19,7 +19,7 @@ Object {
     "&$active": Object {
       "&:active": Object {
         "& $radio:after": Object {
-          "background": "#0047A5",
+          "background": "#083CAE",
         },
         "& $radio:before": Object {
           "borderColor": "#0047A5",
@@ -29,11 +29,11 @@ Object {
       },
       "&:focus $radio:before": Object {
         "borderColor": "#0059CD",
-        "boxShadow": undefined,
+        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
       },
       "&:hover": Object {
         "& $radio:after": Object {
-          "background": "#0047A5",
+          "background": "#083CAE",
         },
         "& $radio:before": Object {
           "borderColor": "#0047A5",
@@ -49,7 +49,7 @@ Object {
       },
       "&:focus $radio:before": Object {
         "borderColor": "#D3D4DC",
-        "boxShadow": undefined,
+        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
       },
       "&:hover $radio:before": Object {
         "borderColor": "#6C6F89",

package/build/Radio/styles.js

@@ -9,6 +9,8 @@ var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var radio = _colors["default"].radio;
@@ -24,7 +26,7 @@ var _default = {
     '&$active': {
       '&:focus $radio:before': {
         borderColor: radio['selected']['border']['default'],
-        boxShadow: _colors["default"]['focus-bright-blue']
+        boxShadow: _shadows["default"]['focus-bright-blue']
       },
       '&:hover': {
         '& $radio:before': {
@@ -49,7 +51,7 @@ var _default = {
     '&:not($active)': {
       '&:focus $radio:before': {
         borderColor: radio['unselected']['border']['default'],
-        boxShadow: _colors["default"]['focus-bright-blue']
+        boxShadow: _shadows["default"]['focus-bright-blue']
       },
       '&:hover $radio:before': {
         borderColor: radio['unselected']['border']['hover'],

package/build/SlideToggle/SlideToggle.js

@@ -95,6 +95,7 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
           testId = _this$props2.testId;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id,
+        tabIndex: -1,
         className: "".concat(classes.cont).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         style: style
       }, /*#__PURE__*/_react["default"].createElement("div", _extends({

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

@@ -6,38 +6,57 @@ exports[`SlideToggle styles matches the snapshot 1`] = `
 Object {
   "checked": Object {
     "& $icon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwODNjYWUiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwMDZFRkYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
     },
     "& $slider": Object {
       "left": 16,
     },
-    "background": "#083cae",
+    "background": "#0059CD",
   },
   "cont": Object {
+    "&:focus $switch$checked": Object {
+      "background": "#0059CD",
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:focus $switch:not($checked)": Object {
+      "background": "#E9EEF8",
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
+    "&:hover $switch$checked, &:active $switch$checked": Object {
+      "background": "#083CAE",
+    },
+    "&:hover $switch:not($checked), &:active $switch:not($checked)": Object {
+      "background": "#CAD5EE",
+    },
     "alignItems": "start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": 0,
-    "paddingBottom": 8,
-    "paddingTop": 8,
+    "paddingBottom": "8px",
+    "paddingTop": "8px",
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "& $icon": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNEM0Q0REMiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
+    },
+    "& $switch": Object {
+      "background": "#EDEDF1",
+    },
     "pointerEvents": "none",
   },
   "icon": Object {
-    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNhYWFhYWEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
+    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
     "display": "block",
     "height": "100%",
     "transition": "0.3s all",
     "width": "100%",
   },
   "label": Object {
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "slider": Object {
-    "background": "#ffffff",
+    "background": "#fff",
     "borderRadius": "50%",
     "cursor": "pointer",
     "height": 20,
@@ -48,10 +67,10 @@ Object {
     "width": 20,
   },
   "switch": Object {
-    "background": "#dddddd",
+    "background": "#E9EEF8",
     "borderRadius": 34,
     "display": "inline-block",
-    "height": 24,
+    "height": "24px",
     "position": "relative",
     "transition": "0.3s all",
     "width": 38,

package/build/SlideToggle/styles.js

@@ -5,40 +5,58 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var toggle = _colors["default"]["switch"],
+    icon = _colors["default"].icon;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
+    paddingTop: _spacing["default"]['size-2'],
+    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'start',
     cursor: 'pointer',
-    outline: 0
+    outline: 0,
+    '&:hover $switch$checked, &:active $switch$checked': {
+      background: toggle['selected']['bg']['hover']
+    },
+    '&:focus $switch$checked': {
+      boxShadow: _shadows["default"]['focus-bright-blue'],
+      background: toggle['selected']['bg']['default']
+    },
+    '&:hover $switch:not($checked), &:active $switch:not($checked)': {
+      background: toggle['unselected']['bg']['hover']
+    },
+    '&:focus $switch:not($checked)': {
+      background: toggle['unselected']['bg']['default'],
+      boxShadow: _shadows["default"]['focus-indigo']
+    }
   },
   "switch": {
     position: 'relative',
     display: 'inline-block',
     width: 38,
-    height: _spacing["default"].base,
-    background: _colors["default"].grey200,
+    height: _spacing["default"]['size-5'],
+    background: toggle['unselected']['bg']['default'],
     borderRadius: 34,
     transition: '0.3s all'
   },
   checked: {
-    background: _colors["default"].prim,
+    background: toggle['selected']['bg']['default'],
     '& $slider': {
       left: 16
     },
     '& $icon': {
-      background: _icons["default"].base(_icons["default"].check.icon([_colors["default"].prim]))
+      background: _icons["default"].base(_icons["default"].check.icon([icon.brand.bold]))
     }
   },
   slider: {
@@ -49,22 +67,27 @@ var _default = {
     width: 20,
     height: 20,
     borderRadius: '50%',
-    background: _colors["default"].bgWhite,
+    background: toggle['bg']['default'],
     transition: '0.3s all'
   },
   icon: {
     width: '100%',
     height: '100%',
     display: 'block',
-    background: _icons["default"].base(_icons["default"].cross.icon([_colors["default"].grey400])),
+    background: _icons["default"].base(_icons["default"].cross.icon([icon.brand.disabled])),
     transition: '0.3s all'
   },
   disabled: {
-    opacity: 0.4,
+    '& $switch': {
+      background: toggle['bg']['disabled']
+    },
+    '& $icon': {
+      background: _icons["default"].base(_icons["default"].cross.icon([icon["default"].disabled]))
+    },
     pointerEvents: 'none'
   },
   label: {
-    marginLeft: _spacing["default"].tiny
+    marginLeft: _spacing["default"]['size-2']
   }
 };
 exports["default"] = _default;

package/build/Text/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.parseFontValue = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
@@ -46,6 +46,7 @@ var parseFontValue = function parseFontValue(font) {
   return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
 };
 
+exports.parseFontValue = parseFontValue;
 var _default = {
   text: {
     letterSpacing: 0,