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

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/MenuListProvider.js

@@ -0,0 +1,38 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MenuListProvider;
+exports.useMenuListContext = exports.MenuListContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var MenuListContext = /*#__PURE__*/(0, _react.createContext)({
+  dense: false
+});
+exports.MenuListContext = MenuListContext;
+
+var useMenuListContext = function useMenuListContext() {
+  return (0, _react.useContext)(MenuListContext);
+}; // eslint-disable-next-line react/prop-types
+
+
+exports.useMenuListContext = useMenuListContext;
+
+function MenuListProvider(_ref) {
+  var children = _ref.children,
+      _ref$dense = _ref.dense,
+      dense = _ref$dense === void 0 ? false : _ref$dense;
+  return /*#__PURE__*/_react["default"].createElement(MenuListContext.Provider, {
+    value: {
+      dense: dense
+    }
+  }, children);
+}

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;
 };
 

package/build/Radio/Radio.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Tag = _interopRequireDefault(require("../Tag"));
+
 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); }
@@ -52,6 +54,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       selected: props.selected
     };
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -75,6 +78,20 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(option.value);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e, option) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        this.onChange(option);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -87,6 +104,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           id = _this$props.id,
           textOverflow = _this$props.textOverflow,
           className = _this$props.className,
+          alignLeft = _this$props.alignLeft,
           style = _this$props.style;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id
@@ -94,7 +112,11 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("div", _extends({
           id: option.trk,
           key: option.value,
-          tabIndex: -1,
+          tabIndex: option.disabled ? -1 : 0,
+          onKeyDown: _this2.handleKeyDown,
+          onKeyUp: function onKeyUp(e) {
+            return _this2.handleKeyUp(e, option);
+          },
           "data-testid": option.testId
         }, option.testId && {
           'data-value': selected == option.value ? 1 : 0
@@ -105,16 +127,26 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           },
           style: style
         }), /*#__PURE__*/_react["default"].createElement("div", {
-          className: classes.radio,
-          id: option.trk
-        }), option.label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+          className: classes.radioWrap
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radio
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radioOuter
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radioInner
+        }))), !!(option.label || option.right || option.tag) && /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.labelWrap
+        }, option.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) : '')
         }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
           corpSecondary: true,
           className: classes.right
-        }, option.right));
+        }, option.right), option.tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          theme: "link",
+          className: classes.tag
+        }, option.tag)));
       }));
     }
   }]);
@@ -139,6 +171,7 @@ Radio.propTypes = {
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     label: _propTypes["default"].string,
     right: _propTypes["default"].string,
+    tag: _propTypes["default"].string,
     trk: _propTypes["default"].string,
 
     /** The testId property adds the data attribute data-testid to
@@ -146,6 +179,9 @@ Radio.propTypes = {
     testId: _propTypes["default"].string
   })),
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,