@occmundial/occ-atomic 3.0.0-beta.7 → 3.0.0-beta.70

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

@@ -4,48 +4,15 @@ exports[`Pager matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`Pager styles matches the snapshot 1`] = `
 Object {
-  "btn": Object {
-    "& span": Object {
-      "marginBottom": "-2px",
-    },
-    "&:hover": Object {
-      "background": "#ECECEE",
-      "borderColor": "#ECECEE",
-    },
-    "border": "1px solid #bfbfbf",
-    "borderRadius": "5px",
-    "cursor": "pointer",
-    "fontFamily": "'OccText', sans-serif",
-    "outline": "0",
-    "padding": "3px 13px",
-    "transition": "0.3s all",
-  },
-  "disabled": Object {
-    "opacity": "0.4",
-    "pointerEvents": "none",
-  },
-  "listItemNext": Object {
-    "marginLeft": "15px",
-  },
-  "listItemPrevious": Object {
-    "marginRight": "15px",
-  },
   "next": Object {
-    "alignItems": "center",
-    "display": "flex",
+    "marginLeft": "8px",
   },
   "pager": Object {
     "alignItems": "center",
-    "color": "#727272",
-    "display": "flex",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": "14px",
-    "listStyle": "none",
-    "paddingLeft": "0",
+    "display": "inline-flex",
   },
   "prev": Object {
-    "alignItems": "center",
-    "display": "flex",
+    "marginRight": "8px",
   },
 }
 `;

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,