@occmundial/occ-atomic 3.0.0-beta.43 → 3.0.0-beta.44

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.0.0-beta.44](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.43...v3.0.0-beta.44) (2024-08-09)
+
+
+### Features
+
+* Placeholder styles and documentation revamp ([1b66e82](https://github.com/occmundial/occ-atomic/commit/1b66e82cab64d8a23bd7dd336c9bb4666242846c))
+
 # [3.0.0-beta.43](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.42...v3.0.0-beta.43) (2024-08-08)
 
 

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

@@ -2,14 +2,14 @@
 
 exports[`FAB matches the snapshot 1`] = `
 <button
-  className="Button-btn-0-1-22 Button-btn-0-1-1 Button-tertiary-0-1-27 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"
+  className="Button-btn-0-1-1 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-18 Button-round-0-1-20"
   disabled={false}
 >
   <span
-    className="Button-cont-0-1-23 Button-cont-0-1-2"
+    className="Button-cont-0-1-2"
   >
     <span
-      className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"
+      className="Icon-oldIcon-0-1-24 Icon-oldIcon-0-1-26 Button-icon-0-1-16"
     />
     
   </span>

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/__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/Text/Text.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.oldToNewClassMapper = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -77,6 +77,7 @@ var oldToNewClassMapper = {
   bottomLarge: 'bottom8',
   bottomXLarge: 'bottom9'
 };
+exports.oldToNewClassMapper = oldToNewClassMapper;
 
 var getActiveKey = function getActiveKey(array) {
   var _iterator = _createForOfIteratorHelper(array),

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

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-acenter-0-1-42 Flexbox-scenter-0-1-54\\" style=\\"flex: 1;\\"><svg class=\\"Icon-icon-0-1-60 Icon-icon-0-1-57 undefined__check-circle Toast-icon-0-1-21\\" width=\\"24\\" height=\\"24\\" fill=\\"#38d373\\" style=\\"transition: 0.3s all;\\"><use xlink:href=\\"undefined#undefined__check-circle\\"></use></svg><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37 Flexbox-scenter-0-1-54 Toast-content-0-1-20\\" style=\\"flex: 1;\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-col-0-1-29\\"><p class=\\"Toast-title-0-1-18 Toast-textSuccess-0-1-10\\">Title</p></div></div></div></div></div></div>"`;
+exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-acenter-0-1-42 Flexbox-scenter-0-1-54\\" style=\\"flex: 1;\\"><svg class=\\"Icon-icon-0-1-57 Icon-icon-0-1-60 undefined__check-circle Toast-icon-0-1-21\\" width=\\"24\\" height=\\"24\\" fill=\\"#38d373\\" style=\\"transition: 0.3s all;\\"><use xlink:href=\\"undefined#undefined__check-circle\\"></use></svg><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37 Flexbox-scenter-0-1-54 Toast-content-0-1-20\\" style=\\"flex: 1;\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-col-0-1-29\\"><p class=\\"Toast-title-0-1-18 Toast-textSuccess-0-1-10\\">Title</p></div></div></div></div></div></div>"`;
 
 exports[`Toaster matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.43",
+  "version": "3.0.0-beta.44",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",