@occmundial/occ-atomic 3.0.0-beta.5 → 3.0.0-beta.50

package/build/Pager/styles.js

@@ -5,55 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pager: {
-    listStyle: 'none',
-    paddingLeft: '0',
-    display: 'flex',
-    alignItems: 'center',
-    fontFamily: _fonts["default"].body,
-    color: _colors["default"].grey7,
-    fontSize: '14px'
-  },
-  btn: {
-    fontFamily: _fonts["default"].body,
-    border: "1px solid ".concat(_colors["default"].grey1),
-    borderRadius: '5px',
-    padding: '3px 13px',
-    transition: '0.3s all',
-    cursor: 'pointer',
-    outline: '0',
-    '& span': {
-      marginBottom: '-2px'
-    },
-    '&:hover': {
-      background: '#ECECEE',
-      borderColor: '#ECECEE'
-    }
-  },
-  prev: {
-    display: 'flex',
+    display: 'inline-flex',
     alignItems: 'center'
   },
-  listItemPrevious: {
-    marginRight: '15px'
+  prev: {
+    marginRight: _spacing["default"]['size-2']
   },
   next: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  listItemNext: {
-    marginLeft: '15px'
-  },
-  disabled: {
-    pointerEvents: 'none',
-    opacity: '0.4'
+    marginLeft: _spacing["default"]['size-2']
   }
 };
 exports["default"] = _default;

package/build/Pill/Choice/Choice.js

@@ -83,15 +83,17 @@ var Choice = function Choice(props) {
   }), leftIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     iconName: leftIcon,
     colors: [conditionedStyles.iconColor],
-    width: 18,
-    height: 18
+    className: classes.leftIcon,
+    width: 16,
+    height: 16
   }), children && /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(classes.text, " ").concat(classes[conditionedStyles.text])
   }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     iconName: rightIcon,
     colors: [conditionedStyles.iconColor],
-    width: 18,
-    height: 18
+    className: classes.rightIcon,
+    width: 16,
+    height: 16
   }));
 };
 

package/build/Pill/Choice/styles.js

@@ -44,12 +44,11 @@ var _default = {
     '&:hover': {
       background: _colors["default"].pill.unselected.bg.hover
     },
-    '&:active, &:focus': {
+    '&:active': {
       background: _colors["default"].pill.unselected.bg.active
     },
-    '&:not(:active):focus-visible': {
-      boxShadow: _shadows["default"]['focus-indigo'],
-      background: _colors["default"].pill.unselected.bg["default"]
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
     }
   },
   disabled: {
@@ -57,16 +56,16 @@ var _default = {
     pointerEvents: 'none'
   },
   selected: {
-    background: "".concat(_colors["default"].pill.selected.bg["default"], " !important"),
+    background: _colors["default"].pill.selected.bg["default"],
     zIndex: 1,
     color: _colors["default"].text.white.primary,
     '&:hover': {
       background: _colors["default"].pill.selected.bg.hover
     },
-    '&:active, &:focus': {
+    '&:active': {
       background: _colors["default"].pill.selected.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     }
   },
@@ -80,9 +79,7 @@ var _default = {
     font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    padding: [0, _spacing["default"]['size-1']],
-    marginLeft: _spacing["default"]['size-1'],
-    marginRight: _spacing["default"]['size-1']
+    padding: [0, _spacing["default"]['size-1']]
   },
   textSelectedDisabled: {
     color: _colors["default"].text.white.secondary
@@ -95,6 +92,12 @@ var _default = {
   },
   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/styles.js

@@ -43,15 +43,15 @@ var _default = {
     whiteSpace: 'nowrap',
     transition: '0.3s all',
     cursor: 'pointer',
-    '&:not(:active):focus-visible': {
-      boxShadow: _shadows["default"]['focus-indigo'],
-      background: 'none'
-    },
     '&:hover': {
       background: _colors["default"].pill.unselected.bg.hover
     },
-    '&:active, &:focus': {
+    '&:active': {
       background: _colors["default"].pill.unselected.bg.active
+    },
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: 'none'
     }
   },
   selected: {

package/build/Pill/Stack/Stack.js

@@ -52,8 +52,8 @@ var Stack = function Stack(_ref) {
     className: classes.close,
     iconName: "cross",
     colors: [disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.brand["default"]],
-    width: 18,
-    height: 18
+    width: 16,
+    height: 16
   })));
 };
 

package/build/Pill/Stack/styles.js

@@ -42,12 +42,11 @@ var _default = {
     '&:hover': {
       background: _colors["default"].pill.unselected.bg.hover
     },
-    '&:active, &:focus': {
+    '&:active': {
       background: _colors["default"].pill.unselected.bg.active
     },
-    '&:not(:active):focus-visible': {
-      boxShadow: _shadows["default"]['focus-indigo'],
-      background: _colors["default"].pill.unselected.bg["default"]
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
     }
   },
   disabled: {
@@ -61,8 +60,7 @@ var _default = {
     color: _colors["default"].text.indigo.primary,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    padding: [0, _spacing["default"]['size-1']],
-    marginRight: _spacing["default"]['size-1']
+    padding: [0, _spacing["default"]['size-1']]
   },
   textDisabled: {
     color: _colors["default"].text.indigo.secondary
@@ -73,8 +71,7 @@ var _default = {
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: -_spacing["default"]['size-1'],
-    marginLeft: -_spacing["default"]['size-1']
+    marginLeft: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

package/build/Placeholder/Placeholder.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
+var _Text = require("../Text/Text");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -19,26 +19,43 @@ var Placeholder = function Placeholder(_ref) {
       textSize = _ref.textSize,
       round = _ref.round,
       top = _ref.top,
-      bottom = _ref.bottom;
-  return /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    alignItems: "center",
-    className: "".concat(textSize ? classes[textSize] : '').concat(top ? " ".concat(classes["top".concat(top)]) : '').concat(bottom ? " ".concat(classes["bottom".concat(bottom)]) : '')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.placeholder).concat(round ? " ".concat(classes.round) : '')
-  }));
+      bottom = _ref.bottom,
+      className = _ref.className,
+      style = _ref.style,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'light' : _ref$theme;
+  var textSizeClass = textSize ? classes[_Text.oldToNewClassMapper[textSize] || textSize] : '';
+  var marginTopClass = top ? " ".concat(classes["top".concat(top)]) : '';
+  var marginBottomClass = bottom ? " ".concat(classes["bottom".concat(bottom)]) : '';
+  var roundClass = round ? " ".concat(classes.round) : '';
+  var classNameClass = className ? className : '';
+  var containerBaseClasses = "".concat(classes.placeholder, " ").concat(classes[theme]);
+  var containerClasses = "".concat(roundClass, " ").concat(textSizeClass, " ").concat(marginTopClass, " ").concat(marginBottomClass, " ").concat(classNameClass).replace(/\s{2,}/, ' ');
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(containerBaseClasses, " ").concat(containerClasses),
+    style: style
+  });
 };
 
 Placeholder.propTypes = {
   classes: _propTypes["default"].object.isRequired,
 
+  /** Adds placeholder container classes.  */
+  className: _propTypes["default"].string,
+
+  /** Adds placeholder container syles.  */
+  style: _propTypes["default"].object,
+
+  /** Theme of the placeholder, whether light or dark.  */
+  theme: _propTypes["default"].oneOf(['light', 'dark']),
+
   /** Simulates a row of text. It has the same size and line-height as the Text component. */
-  textSize: _propTypes["default"].oneOf(['hero', 'headline', 'heading', 'subheading', 'large', 'standard', 'small', 'micro']),
+  textSize: _propTypes["default"].oneOf(['display', 'h1', 'h2', 'h3', 'h4', 'h5', 'tag', 'bodyXLarge', 'bodyLargeStrong', 'bodyLarge', 'bodyRegularStrong', 'bodyRegular', 'bodySmallStrong', 'bodySmall', 'bodyXSmall', 'hero', 'headline', 'heading', 'subheading', 'large', 'standard', 'small', 'micro']),
 
-  /** Spacing in the top of the placeholder. */
+  /** Spacing in the top of the placeholder. (deprecated) */
   top: _propTypes["default"].oneOf(['xTiny', 'tiny', 'small', 'base', 'medium', 'large', 'xLarge']),
 
-  /** Spacing in the bottom of the placeholder. */
+  /** Spacing in the bottom of the placeholder. (deprecated) */
   bottom: _propTypes["default"].oneOf(['xTiny', 'tiny', 'small', 'base', 'medium', 'large', 'xLarge']),
 
   /** Width of the placeholder. You can use numbers or a string with a percentage. */

package/build/Placeholder/Placeholder.test.js

@@ -30,19 +30,19 @@ describe('Placeholder', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Placeholder["default"], {
       classes: classes
     }));
-    expect(wrapper.prop('className')).toBe('');
+    expect(wrapper.prop('className')).toBe('placeholder light  ');
     wrapper.setProps({
       textSize: 'headline'
     });
-    expect(wrapper.prop('className')).toBe('headline');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 ');
     wrapper.setProps({
       top: 'tiny'
     });
-    expect(wrapper.prop('className')).toBe('headline toptiny');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 toptiny  ');
     wrapper.setProps({
       bottom: 'small'
     });
-    expect(wrapper.prop('className')).toBe('headline toptiny bottomsmall');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 toptiny  bottomsmall ');
   });
 });
 describe("PlaceholderJSS", function () {

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

@@ -12,6 +12,38 @@ Object {
       "transform": "translate3d(100%, 0, 0)",
     },
   },
+  "bodyLarge": Object {
+    "height": 18,
+    "margin": "4.5px 0",
+  },
+  "bodyLargeStrong": Object {
+    "height": 18,
+    "margin": "4.5px 0",
+  },
+  "bodyRegular": Object {
+    "height": 16,
+    "margin": "4px 0",
+  },
+  "bodyRegularStrong": Object {
+    "height": 16,
+    "margin": "4px 0",
+  },
+  "bodySmall": Object {
+    "height": 14,
+    "margin": "3.5px 0",
+  },
+  "bodySmallStrong": Object {
+    "height": 14,
+    "margin": "3.5px 0",
+  },
+  "bodyXLarge": Object {
+    "height": 20,
+    "margin": "5px 0",
+  },
+  "bodyXSmall": Object {
+    "height": 12,
+    "margin": "3px 0",
+  },
   "bottombase": Object {
     "marginBottom": 24,
   },
@@ -33,40 +65,67 @@ Object {
   "bottomxTiny": Object {
     "marginBottom": 4,
   },
-  "heading": Object {
-    "& $placeholder": Object {
-      "height": 22,
+  "dark": Object {
+    "&:after": Object {
+      "background": "linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1) , rgba(255,255,255,0) )",
     },
-    "height": 32,
+    "background": "rgba(255,255,255,0.1)",
+    "overflow": "hidden",
   },
-  "headline": Object {
-    "& $placeholder": Object {
-      "height": 36,
+  "display": Object {
+    "@media screen and (min-width:768px)": Object {
+      "height": 72,
+      "margin": "3.6px 0",
     },
     "height": 48,
+    "margin": "2.4px 0",
+  },
+  "h1": Object {
+    "@media screen and (min-width:768px)": Object {
+      "height": 48,
+      "margin": "2.4px 0",
+    },
+    "height": 32,
+    "margin": "1.6px 0",
   },
-  "hero": Object {
-    "& $placeholder": Object {
-      "height": 57,
+  "h2": Object {
+    "@media screen and (min-width:768px)": Object {
+      "height": 40,
+      "margin": "2px 0",
     },
-    "height": 72,
+    "height": 28,
+    "margin": "1.4px 0",
   },
-  "large": Object {
-    "& $placeholder": Object {
-      "height": 17,
+  "h3": Object {
+    "@media screen and (min-width:768px)": Object {
+      "height": 30.8,
+      "margin": "1.4px 0",
     },
     "height": 24,
+    "margin": "1.2px 0",
   },
-  "micro": Object {
-    "& $placeholder": Object {
-      "height": 11,
+  "h4": Object {
+    "@media screen and (min-width:768px)": Object {
+      "height": 24,
+      "padding": "1.2px 0",
     },
-    "height": 16,
+    "height": 20,
+    "margin": "1px 0",
+  },
+  "h5": Object {
+    "height": 18,
+    "margin": "0.9px 0",
+  },
+  "light": Object {
+    "&:after": Object {
+      "background": "linear-gradient(90deg, rgba(0,0,0,0.0) , rgba(0,0,0,0.05) , rgba(0,0,0,0.0) )",
+    },
+    "background": "rgba(0,0,0,0.05)",
+    "overflow": "hidden",
   },
   "placeholder": Object {
     "&:after": Object {
       "animation": "progress 2s ease-in-out infinite",
-      "background": "linear-gradient(90deg, rgba(204, 204, 204, 0), rgba(204, 204, 204, 0.7), rgba(204, 204, 204, 0))",
       "content": "\\"\\"",
       "height": "100%",
       "left": 0,
@@ -74,10 +133,8 @@ Object {
       "top": 0,
       "width": "100%",
     },
-    "background": "#f2f2f2",
     "borderRadius": 4,
     "height": [Function],
-    "mixBlendMode": "multiply",
     "overflow": "hidden",
     "position": "relative",
     "width": [Function],
@@ -85,23 +142,9 @@ Object {
   "round": Object {
     "borderRadius": "50%",
   },
-  "small": Object {
-    "& $placeholder": Object {
-      "height": 13,
-    },
-    "height": 16,
-  },
-  "standard": Object {
-    "& $placeholder": Object {
-      "height": 15,
-    },
-    "height": 24,
-  },
-  "subheading": Object {
-    "& $placeholder": Object {
-      "height": 17,
-    },
-    "height": 24,
+  "tag": Object {
+    "height": 10,
+    "margin": "2.5px 0",
   },
   "topbase": Object {
     "marginTop": 24,

package/build/Placeholder/styles.js

@@ -7,8 +7,14 @@ exports["default"] = void 0;
 
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var _default = {
   '@keyframes progress': {
     '0%': {
@@ -20,16 +26,14 @@ var _default = {
   },
   placeholder: {
     width: function width(props) {
-      return props.width ? props.width : '100%';
+      return props.width ? props.width : null;
     },
     height: function height(props) {
-      return props.height ? props.height : 14;
+      return props.height ? props.height : !props.textSize ? 14 : null;
     },
     borderRadius: _spacing["default"].xTiny,
     position: 'relative',
     overflow: 'hidden',
-    background: '#f2f2f2',
-    mixBlendMode: 'multiply',
     '&:after': {
       content: '""',
       position: 'absolute',
@@ -37,60 +41,100 @@ var _default = {
       left: 0,
       width: '100%',
       height: '100%',
-      background: "linear-gradient(90deg, rgba(204, 204, 204, 0), rgba(204, 204, 204, 0.7), rgba(204, 204, 204, 0))",
       animation: 'progress 2s ease-in-out infinite'
     }
   },
+  light: {
+    background: _colors["default"].skeleton.bg["default"]["default"],
+    overflow: 'hidden',
+    '&:after': {
+      background: _colors["default"].skeleton.bg["default"].gradient
+    }
+  },
+  dark: {
+    background: _colors["default"].skeleton.bg.inverse["default"],
+    overflow: 'hidden',
+    '&:after': {
+      background: _colors["default"].skeleton.bg.inverse.gradient
+    }
+  },
   round: {
     borderRadius: '50%'
   },
-  hero: {
+  display: _defineProperty({
+    height: 48,
+    margin: '2.4px 0'
+  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
     height: 72,
-    '& $placeholder': {
-      height: 57
-    }
-  },
-  headline: {
+    margin: '3.6px 0'
+  }),
+  h1: _defineProperty({
+    height: 32,
+    margin: '1.6px 0'
+  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
     height: 48,
-    '& $placeholder': {
-      height: 36
-    }
+    margin: '2.4px 0'
+  }),
+  h2: _defineProperty({
+    height: 28,
+    margin: '1.4px 0'
+  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    height: 40,
+    margin: '2px 0'
+  }),
+  h3: _defineProperty({
+    height: 24,
+    margin: '1.2px 0'
+  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    height: 30.8,
+    margin: '1.4px 0'
+  }),
+  h4: _defineProperty({
+    height: 20,
+    margin: '1px 0'
+  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    height: 24,
+    padding: '1.2px 0'
+  }),
+  h5: {
+    height: 18,
+    margin: '0.9px 0'
   },
-  heading: {
-    height: 32,
-    '& $placeholder': {
-      height: 22
-    }
+  tag: {
+    height: 10,
+    margin: '2.5px 0'
   },
-  subheading: {
-    height: 24,
-    '& $placeholder': {
-      height: 17
-    }
+  bodyXLarge: {
+    height: 20,
+    margin: '5px 0'
   },
-  large: {
-    height: 24,
-    '& $placeholder': {
-      height: 17
-    }
+  bodyLargeStrong: {
+    height: 18,
+    margin: '4.5px 0'
   },
-  standard: {
-    height: 24,
-    '& $placeholder': {
-      height: 15
-    }
+  bodyLarge: {
+    height: 18,
+    margin: '4.5px 0'
   },
-  small: {
+  bodyRegularStrong: {
     height: 16,
-    '& $placeholder': {
-      height: 13
-    }
+    margin: '4px 0'
   },
-  micro: {
+  bodyRegular: {
     height: 16,
-    '& $placeholder': {
-      height: 11
-    }
+    margin: '4px 0'
+  },
+  bodySmallStrong: {
+    height: 14,
+    margin: '3.5px 0'
+  },
+  bodySmall: {
+    height: 14,
+    margin: '3.5px 0'
+  },
+  bodyXSmall: {
+    height: 12,
+    margin: '3px 0'
   },
   topxTiny: {
     marginTop: _spacing["default"].xTiny

package/build/Provider/usePrevious.js

@@ -11,7 +11,7 @@ var usePrevious = function usePrevious(value) {
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     ref.current = value;
-  }, []);
+  });
   return ref.current;
 };