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

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [3.0.0-beta.45](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.44...v3.0.0-beta.45) (2024-08-15)
+
+
+### Bug Fixes
+
+* Resolve conflicts ([c52608d](https://github.com/occmundial/occ-atomic/commit/c52608d63b00072280a8731515276bd477ca41fd))
+
+
+### Features
+
+* Add disabled state ([717d1cc](https://github.com/occmundial/occ-atomic/commit/717d1cc4c9a2fd3becb2d03b7663729778c59ec2))
+
+# [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/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/SlideDown/SlideDown.js

@@ -65,15 +65,31 @@ var textSizes = {
 };
 var _themeColors = {
   blue: {
-    icon: _colors["default"].icon.brand["default"],
+    icon: {
+      "default": _colors["default"].icon.brand["default"],
+      disabled: _colors["default"].icon.brand.disabled
+    },
     text: {
-      primary: true
+      "default": {
+        primary: true
+      },
+      disabled: {
+        indigoSecondary: true
+      }
     }
   },
   "default": {
-    icon: _colors["default"].icon["default"].bold,
+    icon: {
+      "default": _colors["default"].icon["default"].bold,
+      disabled: _colors["default"].icon["default"].disabled
+    },
     text: {
-      highEmphasis: true
+      "default": {
+        highEmphasis: true
+      },
+      disabled: {
+        disabled: true
+      }
     }
   }
 };
@@ -94,6 +110,7 @@ function SlideDown(_ref) {
       icon = _ref.icon,
       divider = _ref.divider,
       noPadding = _ref.noPadding,
+      disabled = _ref.disabled,
       testId = _ref.testId;
 
   var _useState = (0, _react.useState)(!!expanded),
@@ -111,7 +128,7 @@ function SlideDown(_ref) {
   };
 
   var getTextProps = function getTextProps() {
-    return _objectSpread(_objectSpread({}, textSizes[textSize] || textSizes["default"]), themeColors.text);
+    return _objectSpread(_objectSpread({}, textSizes[textSize] || textSizes["default"]), disabled ? themeColors.text.disabled : themeColors.text["default"]);
   };
 
   (0, _react.useEffect)(function () {
@@ -121,12 +138,14 @@ function SlideDown(_ref) {
   }, [prevExpanded, expanded]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.wrapper).concat(divider ? " ".concat(classes.divider) : '')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.button, " ").concat(textSize === 'lg' ? classes.largePadding : classes.normalPadding).concat(!noPadding ? " ".concat(classes.buttonPadding) : ''),
-    role: "button",
-    onClick: toggleContent,
+  }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "".concat(classes.button, " ").concat(textSize === 'lg' ? classes.largePadding : classes.normalPadding).concat(!noPadding ? " ".concat(classes.buttonPadding) : '').concat(disabled ? " ".concat(classes.disabled) : ''),
+    role: "button"
+  }, !disabled && {
+    onClick: toggleContent
+  }, {
     "data-testid": testId
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     justifyContent: !noJustified ? 'between' : null,
     alignItems: "center",
@@ -139,18 +158,18 @@ function SlideDown(_ref) {
     iconName: icon,
     width: 16,
     height: 16,
-    colors: [themeColors.icon],
+    colors: [!disabled ? themeColors.icon["default"] : themeColors.icon.disabled],
     className: classes.leftIcon
   }) : '', customTitle || /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, getTextProps(), {
     strong: strong,
     tag: "label",
-    className: classes.text
+    className: "".concat(classes.text).concat(disabled ? " ".concat(classes.disabled) : '')
   }), title), tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
     theme: "info",
     className: classes.tag
   }, tag)), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     iconName: "arrowDown",
-    colors: [themeColors.icon],
+    colors: [!disabled ? themeColors.icon["default"] : themeColors.icon.disabled],
     className: "".concat(classes.icon).concat(_expanded ? " ".concat(classes.rotateIcon) : ''),
     width: 16,
     height: 16,
@@ -211,6 +230,9 @@ SlideDown.propTypes = {
   /** The container has by default a side padding. Use this property if you need to remove it. */
   noPadding: _propTypes["default"].bool,
 
+  /** It disables the component and shows it with the proper theme. */
+  disabled: _propTypes["default"].bool,
+
   /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
   testId: _propTypes["default"].string
 };

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

@@ -22,6 +22,9 @@ Object {
     "opacity": 0,
     "transition": "grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
+  "disabled": Object {
+    "cursor": "not-allowed",
+  },
   "divider": Object {
     "boxShadow": "inset 0 -1px 0px 0px #EDEDF1",
   },

package/build/SlideDown/styles.js

@@ -72,6 +72,9 @@ var _default = {
   },
   flexContainer: {
     gap: _spacing["default"]['size-4']
+  },
+  disabled: {
+    cursor: 'not-allowed'
   }
 };
 exports["default"] = _default;

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/package.json

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