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

package/build/Pill/Choice/styles.js

@@ -5,55 +5,99 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _styles = require("../../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
     height: 32,
-    padding: "0 ".concat(_spacing["default"].gutter, "px"),
-    marginBottom: _spacing["default"].tiny,
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-2']],
+    marginBottom: _spacing["default"]['size-2'],
     position: 'relative',
     zIndex: 0,
-    outline: 0,
+    border: 0,
     transition: '0.3s all',
     cursor: 'pointer',
-    borderRadius: _spacing["default"].small,
+    borderRadius: _borderRadius["default"]['br-md'],
     maxWidth: '100%',
+    outline: 0,
     display: 'inline-flex',
     alignItems: 'center',
     minWidth: 'auto',
     '&:not(:last-child)': {
-      marginRight: _spacing["default"].tiny
-    },
+      marginRight: _spacing["default"]['size-2']
+    }
+  },
+  enabled: {
+    background: _colors["default"].pill.unselected.bg["default"],
     '&:hover': {
-      background: _colors["default"].grey50
+      background: _colors["default"].pill.unselected.bg.hover
+    },
+    '&:active': {
+      background: _colors["default"].pill.unselected.bg.active
+    },
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
     }
   },
+  disabled: {
+    background: _colors["default"].pill.unselected.bg.disabled,
+    pointerEvents: 'none'
+  },
   selected: {
-    background: "".concat(_colors["default"].primLighter, " !important"),
+    background: _colors["default"].pill.selected.bg["default"],
     zIndex: 1,
-    borderColor: _colors["default"].prim,
-    color: _colors["default"].prim
+    color: _colors["default"].text.white.primary,
+    '&:hover': {
+      background: _colors["default"].pill.selected.bg.hover
+    },
+    '&:active': {
+      background: _colors["default"].pill.selected.bg.active
+    },
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
+    }
   },
-  disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+  selectedDisabled: {
+    background: _colors["default"].pill.selected.bg.disabled,
     pointerEvents: 'none'
   },
   text: {
     flex: 1,
     overflow: 'hidden',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    marginLeft: _spacing["default"].xTiny,
-    marginRight: _spacing["default"].xTiny
+    padding: [0, _spacing["default"]['size-1']]
+  },
+  textSelectedDisabled: {
+    color: _colors["default"].text.white.secondary
+  },
+  textSelected: {
+    color: _colors["default"].text.white.primary
+  },
+  textDisabled: {
+    color: _colors["default"].text.indigo.secondary
+  },
+  textEnabled: {
+    color: _colors["default"].text.indigo.primary
+  },
+  leftIcon: {
+    marginRight: _spacing["default"]['size-1']
+  },
+  rightIcon: {
+    marginLeft: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

package/build/Pill/Group/Group.js

@@ -17,7 +17,8 @@ var Group = function Group(_ref) {
       selected = _ref.selected,
       onSelect = _ref.onSelect,
       idPrefix = _ref.idPrefix,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      disabled = _ref.disabled;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.pillGroup
   }, items.map(function (item, index) {
@@ -25,7 +26,8 @@ var Group = function Group(_ref) {
       key: item.id,
       id: idPrefix ? "".concat(idPrefix).concat(item.id) : null,
       "data-testid": testId ? "".concat(testId).concat(index) : null,
-      className: "".concat(classes.pill).concat(selected == item.id ? " ".concat(classes.selected) : item.disabled ? " ".concat(classes.disabled) : ''),
+      disabled: disabled || item.disabled,
+      className: "".concat(classes.pill).concat(selected == item.id ? " ".concat(classes.selected) : disabled || item.disabled ? " ".concat(classes.disabled) : ''),
       onClick: selected != item.id ? function () {
         onSelect(item.id, index);
       } : null
@@ -38,6 +40,7 @@ Group.propTypes = {
   items: _propTypes["default"].array,
   onSelect: _propTypes["default"].func,
   selected: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  disabled: _propTypes["default"].bool,
   idPrefix: _propTypes["default"].string,
   testId: _propTypes["default"].string
 };

package/build/Pill/Group/styles.js

@@ -5,62 +5,62 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../../subatomic/fonts"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+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 _default = {
   pillGroup: {
-    display: 'flex'
+    display: 'flex',
+    background: _colors["default"].pill.unselected.bg["default"],
+    borderRadius: _borderRadius["default"]['br-full'],
+    marginBottom: _spacing["default"]['size-2']
   },
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    color: _colors["default"].ink,
-    fontFamily: _fonts["default"].body,
-    fontSize: 15,
-    fontWeight: 400,
-    lineHeight: "".concat(_spacing["default"].base, "px"),
-    height: _spacing["default"].medium,
-    padding: [0, _spacing["default"].small],
+    color: _colors["default"].text.indigo.primary,
+    background: 'none',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    height: _spacing["default"]['size-6'],
+    padding: [0, _spacing["default"]['size-4']],
+    outline: 0,
+    borderRadius: _borderRadius["default"]['br-md'],
     position: 'relative',
     zIndex: 1,
-    outline: 0,
+    border: 0,
     flex: 1,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     transition: '0.3s all',
     cursor: 'pointer',
-    '&:first-child': {
-      borderTopLeftRadius: _spacing["default"].small,
-      borderBottomLeftRadius: _spacing["default"].small
-    },
-    '&:last-child': {
-      borderTopRightRadius: _spacing["default"].small,
-      borderBottomRightRadius: _spacing["default"].small
+    '&:hover': {
+      background: _colors["default"].pill.unselected.bg.hover
     },
-    '&:not(:first-child)': {
-      marginLeft: -1
+    '&:active': {
+      background: _colors["default"].pill.unselected.bg.active
     },
-    '&:hover': {
-      background: _colors["default"].grey50
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: 'none'
     }
   },
   selected: {
-    background: "".concat(_colors["default"].primLighter, " !important"),
+    background: "".concat(_colors["default"].pill.selected.bg["default"], " !important"),
     zIndex: 2,
-    borderColor: _colors["default"].prim,
-    color: _colors["default"].prim
+    color: _colors["default"].text.white.primary
   },
   disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+    color: _colors["default"].text.indigo.secondary,
     zIndex: 0,
     pointerEvents: 'none'
   }

package/build/Pill/Pill.js

@@ -144,16 +144,17 @@ var Pill = /*#__PURE__*/function (_Component) {
       var errorStatus = error && (touched || allowError);
       if (disabled) realStatus = 'disabled';else if (errorStatus) realStatus = 'error';
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.container).concat(realStatus == 'disabled' ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
+        className: "".concat(classes.container).concat(className ? " ".concat(className) : ''),
         id: id,
         style: style
       }, (label || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.top
       }, label && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.left)
+        className: classes.label
       }, label)), group ? /*#__PURE__*/_react["default"].createElement(_Group["default"], {
         items: group,
         onSelect: this.handleGroupOnSelect,
+        disabled: disabled,
         selected: selected,
         idPrefix: idPrefix,
         testId: testId
@@ -186,7 +187,7 @@ var Pill = /*#__PURE__*/function (_Component) {
       })) : null, (assistiveText || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
       }, assistiveText && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.assistiveText)
+        className: "".concat(classes.assistiveText, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.validAssistiveText)
       }, realStatus == 'error' ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "warningSolid",
         width: 14,

package/build/Pill/Stack/Stack.js

@@ -9,13 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
-
-var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -39,15 +35,14 @@ var Stack = function Stack(_ref) {
       testId = _ref.testId;
   return /*#__PURE__*/_react["default"].createElement("button", {
     className: "".concat(classes.pill).concat(disabled ? " ".concat(classes.disabled) : ''),
+    disabled: disabled,
     onClick: function onClick() {
       handleOnClick(id, _onClick);
     },
     id: idPrefix ? "".concat(idPrefix).concat(id) : null,
     "data-testid": testId ? "".concat(testId).concat(id) : null
-  }, children && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    className: classes.text,
-    tag: "span",
-    disabled: disabled
+  }, children && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(classes.text).concat(disabled ? " ".concat(classes.textDisabled) : '')
   }, children), onClose && /*#__PURE__*/_react["default"].createElement("span", {
     className: classes.closeCont,
     onClick: function onClick(e) {
@@ -56,9 +51,9 @@ var Stack = function Stack(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     className: classes.close,
     iconName: "cross",
-    colors: [_colors["default"].grey300],
-    width: _iconSizes["default"].small,
-    height: _iconSizes["default"].small
+    colors: [disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.brand["default"]],
+    width: 16,
+    height: 16
   })));
 };
 

package/build/Pill/Stack/styles.js

@@ -5,63 +5,73 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _styles = require("../../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    maxWidth: '100%',
     height: 32,
-    padding: "0 ".concat(_spacing["default"].gutter, "px"),
-    marginBottom: _spacing["default"].tiny,
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-2']],
+    marginBottom: _spacing["default"]['size-2'],
     position: 'relative',
     zIndex: 0,
+    border: 0,
+    transition: '0.3s all',
+    cursor: 'pointer',
+    borderRadius: _borderRadius["default"]['br-md'],
+    maxWidth: '100%',
     outline: 0,
-    flex: 1,
     display: 'inline-flex',
     alignItems: 'center',
-    transition: '0.3s all',
-    cursor: 'pointer',
-    borderRadius: _spacing["default"].small,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    minWidth: 'auto',
     '&:not(:last-child)': {
-      marginRight: _spacing["default"].tiny
-    },
-    '&:not(:first-child)': {
-      marginLeft: -1
+      marginRight: _spacing["default"]['size-2']
     },
+    background: _colors["default"].pill.unselected.bg["default"],
     '&:hover': {
-      background: _colors["default"].grey50
+      background: _colors["default"].pill.unselected.bg.hover
+    },
+    '&:active': {
+      background: _colors["default"].pill.unselected.bg.active
+    },
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
     }
   },
   disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+    background: _colors["default"].pill.unselected.bg.disabled,
     pointerEvents: 'none'
   },
-  closeCont: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: -_spacing["default"].xTiny,
-    marginLeft: -_spacing["default"].xTiny
-  },
   text: {
+    flex: 1,
     overflow: 'hidden',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    color: _colors["default"].text.indigo.primary,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    marginLeft: _spacing["default"].xTiny,
-    marginRight: _spacing["default"].xTiny
+    padding: [0, _spacing["default"]['size-1']]
+  },
+  textDisabled: {
+    color: _colors["default"].text.indigo.secondary
+  },
+  closeCont: {
+    width: _spacing["default"]['size-5'],
+    height: _spacing["default"]['size-5'],
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

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

@@ -9,52 +9,42 @@ exports[`Pill matches the stack snapshot 1`] = `ShallowWrapper {}`;
 exports[`Pill styles matches the snapshot 1`] = `
 Object {
   "assistiveText": Object {
-    "color": "#aaaaaa",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+    "transition": "0.3s all",
   },
   "bottom": Object {
-    "height": 20,
-    "marginTop": 4,
+    "height": 21,
   },
   "choiceGroup": Object {
     "display": "flex",
     "flexWrap": "wrap",
   },
   "container": Object {
-    "marginBottom": 8,
+    "display": "flex",
+    "flexDirection": "column",
+    "marginBottom": "8px",
     "position": "relative",
   },
-  "disabled": Object {
-    "& $label": Object {
-      "color": "#dddddd",
-    },
-  },
   "errorAssistiveText": Object {
-    "color": "#db3737",
+    "color": "#8b1313",
   },
   "errorIcon": Object {
     "marginBottom": -2,
   },
   "label": Object {
-    "& a": Object {
-      "color": "#1476fb",
-      "outline": "none",
-      "textDecoration": "none",
-    },
-    "color": "#222222",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": 14,
-    "lineHeight": 1.5,
+    "color": "#080D39",
+    "font": "400 14px/1.5 'OccText', sans-serif",
     "transition": "0.3s all",
   },
   "left": Object {
     "float": "left",
   },
   "top": Object {
-    "&:after": Object {
-      "clear": "both",
-      "content": "\\"\\"",
-    },
-    "height": 24,
+    "height": 21,
+    "marginBottom": "8px",
+  },
+  "validAssistiveText": Object {
+    "color": "#5A5D7B",
   },
 }
 `;

package/build/Pill/styles.js

@@ -5,53 +5,48 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// import colors from '../subatomic/colors';
 var _default = {
   container: {
     position: 'relative',
-    marginBottom: 8
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: _spacing["default"]['size-2']
   },
   top: {
-    height: 24,
-    '&:after': {
-      content: '""',
-      clear: 'both'
-    }
+    height: 21,
+    marginBottom: _spacing["default"]['size-2']
   },
   label: {
-    fontFamily: _fonts["default"].body,
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: _colors["default"].ink,
-    transition: '0.3s all',
-    '& a': {
-      color: _colors["default"].blue,
-      textDecoration: 'none',
-      outline: 'none'
-    }
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label']),
+    color: _colors["default"].text.corp.primary,
+    transition: '0.3s all'
   },
   left: {
     "float": 'left'
   },
-  disabled: {
-    '& $label': {
-      color: _colors["default"].inkLightest
-    }
-  },
   bottom: {
-    height: 20,
-    marginTop: 4
+    height: 21
   },
   assistiveText: {
-    color: _colors["default"].inkLighter
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-assistive-text']),
+    transition: '0.3s all'
+  },
+  validAssistiveText: {
+    color: _colors["default"].text.corp.secondary
   },
   errorAssistiveText: {
-    color: _colors["default"].errorText
+    color: _colors["default"].text.error
   },
   errorIcon: {
     marginBottom: -2