@occmundial/occ-atomic 3.0.0-beta.40 → 3.0.0-beta.42

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [3.0.0-beta.42](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.41...v3.0.0-beta.42) (2024-08-08)
+
+
+### Bug Fixes
+
+* Change div divider for box shadow ([a2f1f8d](https://github.com/occmundial/occ-atomic/commit/a2f1f8d1af7b122b7546c6b405c93344a1aa9391))
+
+# [3.0.0-beta.41](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.40...v3.0.0-beta.41) (2024-08-07)
+
+
+### Bug Fixes
+
+* Add no padding prop to slide down navigation menu ([bda81dc](https://github.com/occmundial/occ-atomic/commit/bda81dc102efb4c2bba25a83638baeb00cad2f60))
+* Remove component data file ([6e58558](https://github.com/occmundial/occ-atomic/commit/6e58558cba4627e3e6ee3aea7ac2d55f21ffd5c0))
+
+
+### Features
+
+* Add custom title prop ([fd14212](https://github.com/occmundial/occ-atomic/commit/fd142127a26207e28c3ab57fa32486066fb03f75))
+* Update slidedown with new design tokens ([930da58](https://github.com/occmundial/occ-atomic/commit/930da58f04c7b87b5687784dc67fcb7eb2e200e7))
+
 # [3.0.0-beta.40](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.39...v3.0.0-beta.40) (2024-08-05)
 
 

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,10 +19,16 @@ var _Tag = _interopRequireDefault(require("../Tag"));
 
 var _Flexbox = _interopRequireDefault(require("../Flexbox"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _usePrevious = _interopRequireDefault(require("../Provider/usePrevious"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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; }
+
 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); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -31,189 +37,139 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-/** Component to create an accordion section. The content will be hidden by default, and shown after click. */
-var SlideDown = /*#__PURE__*/function (_React$Component) {
-  _inherits(SlideDown, _React$Component);
-
-  var _super = _createSuper(SlideDown);
-
-  function SlideDown(props) {
-    var _this;
-
-    _classCallCheck(this, SlideDown);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      expanded: _this.props.expanded,
-      toggled: _this.props.expanded
-    };
-    _this.toggleContent = _this.toggleContent.bind(_assertThisInitialized(_this));
-    return _this;
+var textSizes = {
+  sm: {
+    small: true
+  },
+  md: {
+    standard: true
+  },
+  lg: {
+    extraLarge: true
+  },
+  "default": {
+    standard: true
   }
-
-  _createClass(SlideDown, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var expanded = this.props.expanded;
-
-      if (prevProps.expanded !== expanded) {
-        this.toggleContent(expanded);
-      }
-    }
-  }, {
-    key: "toggleContent",
-    value: function toggleContent(value) {
-      var _this2 = this;
-
-      var onToggle = this.props.onToggle;
-      this.setState(_defineProperty({}, value ? 'expanded' : 'toggled', value));
-      if (onToggle) onToggle(value);
-      setTimeout(function () {
-        _this2.setState(_defineProperty({}, value ? 'toggled' : 'expanded', value));
-      }, value ? 0 : 300);
+};
+var _themeColors = {
+  blue: {
+    icon: _colors["default"].icon.brand["default"],
+    text: {
+      primary: true
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$state = this.state,
-          expanded = _this$state.expanded,
-          toggled = _this$state.toggled;
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          title = _this$props.title,
-          children = _this$props.children,
-          tag = _this$props.tag,
-          textSize = _this$props.textSize,
-          strong = _this$props.strong,
-          theme = _this$props.theme,
-          noJustified = _this$props.noJustified;
-
-      var getTextSize = function getTextSize() {
-        switch (textSize) {
-          case 'md':
-            return {
-              standard: true
-            };
-
-          case 'lg':
-            return {
-              large: true
-            };
-
-          case 'sm':
-            return {
-              small: true
-            };
-
-          default:
-            return {
-              standard: true
-            };
-        }
-      };
-
-      var getTextTheme = function getTextTheme() {
-        switch (theme) {
-          case 'blue':
-            return {
-              link: true
-            };
-
-          case 'default':
-          default:
-            return null;
-        }
-      };
-
-      var getIconColor = function getIconColor() {
-        switch (theme) {
-          case 'blue':
-            return _colors["default"].textLink;
-
-          case 'default':
-          default:
-            return _colors["default"].grey900;
-        }
-      };
-
-      var getTextProps = function getTextProps() {
-        return _objectSpread(_objectSpread({}, getTextSize()), getTextTheme());
-      };
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.wrapper
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.button,
-        onClick: function onClick() {
-          return _this3.toggleContent(!expanded);
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        display: "flex",
-        justifyContent: !noJustified ? 'between' : null,
-        alignItems: "start"
-      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        display: "flex",
-        alignItems: "center"
-      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        display: "flex",
-        alignItems: "start",
-        wrap: "wrap"
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, getTextProps(), {
-        strong: strong,
-        tag: "label",
-        className: classes.text
-      }), title), tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
-        theme: "info",
-        className: classes.tag
-      }, tag)))), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        flex: "0 0 auto"
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "arrowDown",
-        colors: [getIconColor()],
-        className: classes.icon,
-        width: 18,
-        height: 18,
-        style: {
-          transform: toggled ? 'rotate(180deg)' : ''
-        },
-        testId: "slidedown__arrow-down"
-      })))), expanded && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.content, " ").concat(toggled ? classes.show : classes.hide)
-      }, children));
+  },
+  "default": {
+    icon: _colors["default"].icon["default"].bold,
+    text: {
+      highEmphasis: true
     }
-  }]);
+  }
+};
+/** Component to create an accordion section. The content will be hidden by default, and shown after click. */
 
-  return SlideDown;
-}(_react["default"].Component);
+function SlideDown(_ref) {
+  var expanded = _ref.expanded,
+      classes = _ref.classes,
+      title = _ref.title,
+      customTitle = _ref.customTitle,
+      children = _ref.children,
+      tag = _ref.tag,
+      textSize = _ref.textSize,
+      strong = _ref.strong,
+      theme = _ref.theme,
+      noJustified = _ref.noJustified,
+      onToggle = _ref.onToggle,
+      icon = _ref.icon,
+      divider = _ref.divider,
+      noPadding = _ref.noPadding,
+      testId = _ref.testId;
+
+  var _useState = (0, _react.useState)(!!expanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      _expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var prevExpanded = (0, _usePrevious["default"])(!!expanded);
+  var themeColors = _themeColors[theme] || _themeColors['default'];
+
+  var toggleContent = function toggleContent(e) {
+    e.stopPropagation();
+    setExpanded(!_expanded);
+    if (onToggle) onToggle(!_expanded);
+  };
+
+  var getTextProps = function getTextProps() {
+    return _objectSpread(_objectSpread({}, textSizes[textSize] || textSizes["default"]), themeColors.text);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (prevExpanded !== expanded) {
+      setExpanded(expanded);
+    }
+  }, [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,
+    "data-testid": testId
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    justifyContent: !noJustified ? 'between' : null,
+    alignItems: "center",
+    className: classes.flexContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    alignItems: "center",
+    wrap: "wrap"
+  }, icon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: icon,
+    width: 16,
+    height: 16,
+    colors: [themeColors.icon],
+    className: classes.leftIcon
+  }) : '', customTitle || /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, getTextProps(), {
+    strong: strong,
+    tag: "label",
+    className: classes.text
+  }), 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],
+    className: "".concat(classes.icon).concat(_expanded ? " ".concat(classes.rotateIcon) : ''),
+    width: 16,
+    height: 16,
+    testId: "slidedown__arrow-down"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.contentWrapper).concat(_expanded ? " ".concat(classes.showContentWrapper) : '')
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.content).concat(_expanded ? " ".concat(classes.showContent) : '')
+  }, children)));
+}
 
 SlideDown.defaultProps = {
   expanded: false,
   textSize: 'md',
   strong: false,
   theme: 'default',
-  noJustified: false
+  noJustified: false,
+  icon: '',
+  noPadding: false
 };
 SlideDown.propTypes = {
   classes: _propTypes["default"].object,
@@ -222,6 +178,9 @@ SlideDown.propTypes = {
   /** Title of the tab. */
   title: _propTypes["default"].string,
 
+  /** If the title needs to be customized. It will be rendered instead of the title. */
+  customTitle: _propTypes["default"].node,
+
   /** Set this as true to show the content by default. If the external prop is the same of the internal state the component dont toggle */
   expanded: _propTypes["default"].bool,
 
@@ -241,7 +200,19 @@ SlideDown.propTypes = {
   theme: _propTypes["default"].oneOf(['default', 'blue']),
 
   /** The Title container has an alignment by default. Use this property if you need to remove it. */
-  noJustified: _propTypes["default"].bool
+  noJustified: _propTypes["default"].bool,
+
+  /** Shows a divider at the bottom*/
+  divider: _propTypes["default"].bool,
+
+  /** Use the name of any of the icons available in the library. */
+  icon: _propTypes["default"].string,
+
+  /** The container has by default a side padding. Use this property if you need to remove it. */
+  noPadding: _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
 };
 var _default = SlideDown;
 exports["default"] = _default;

package/build/SlideDown/SlideDown.test.js

@@ -14,7 +14,7 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -44,23 +44,16 @@ describe('SlideDown', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
       expanded: true,
       classes: classes,
-      title: "Title"
+      title: "Title",
+      testId: "slidedown-test"
     }));
-    expect(wrapper.find({
-      'data-testid': 'slidedown__arrow-down'
-    }).prop('style')).toEqual({
-      transform: 'rotate(180deg)',
-      transition: '0.3s all'
-    });
-    wrapper.setState({
-      toggled: false
-    });
-    expect(wrapper.find({
-      'data-testid': 'slidedown__arrow-down'
-    }).prop('style')).toEqual({
-      transform: '',
-      transition: '0.3s all'
+    expect(wrapper.find('Icon .rotateIcon').length).toBe(1);
+    wrapper.find({
+      "data-testid": 'slidedown-test'
+    }).simulate('click', {
+      stopPropagation: function stopPropagation() {}
     });
+    expect(wrapper.find('Icon .rotateIcon').length).toBe(0);
   });
   it('shows a Tag on the title', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
@@ -75,31 +68,17 @@ describe('SlideDown', function () {
   it('renders the child content', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
       classes: classes,
-      title: "Title"
-    }, "Children content"));
-    expect(wrapper.find('.content').length).toBe(0);
-    wrapper.setState({
-      expanded: true
-    });
-    expect(wrapper.find('.content').length).toBe(1);
-    expect(wrapper.find('.content').text()).toEqual('Children content');
-  });
-  it('correct render when prop expanded change', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
-      classes: classes,
-      title: "Title"
+      title: "Title",
+      testId: "slidedown-test"
     }, "Children content"));
-    expect(wrapper.find('.content').length).toBe(0);
-    wrapper.setProps({
-      expanded: true
-    });
-    expect(wrapper.find('.content').length).toBe(1);
-    wrapper.setProps({
-      expanded: false
+    expect(wrapper.find('.showContent').length).toBe(0);
+    wrapper.find({
+      "data-testid": 'slidedown-test'
+    }).simulate('click', {
+      stopPropagation: function stopPropagation() {}
     });
-    setTimeout(function () {
-      expect(wrapper.find('.content').length).toBe(0);
-    }, 400);
+    expect(wrapper.find('.showContent').length).toBe(1);
+    expect(wrapper.find('.showContent').text()).toEqual('Children content');
   });
   it('Text have the right properties', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
@@ -107,20 +86,46 @@ describe('SlideDown', function () {
       textSize: 'lg',
       title: "Title"
     }, "Children content"));
-    expect(wrapper.find(_Text["default"]).props().large).toEqual(true);
+    expect(wrapper.find(_Text["default"]).props().extraLarge).toEqual(true);
   });
   it('Text and Icon has theme color', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
       classes: classes,
       title: "Title"
     }, "Children content"));
-    expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].grey900]);
-    expect(wrapper.find(_Text["default"]).props().link).toBeFalsy();
+    expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].icon["default"].bold]);
+    expect(wrapper.find(_Text["default"]).props().primary).toBeFalsy();
     wrapper.setProps({
       theme: 'blue'
     });
-    expect(wrapper.find(_Text["default"]).props().link).toEqual(true);
-    expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].textLink]);
+    expect(wrapper.find(_Text["default"]).props().primary).toEqual(true);
+    expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].icon.brand["default"]]);
+  });
+  it('render a custom title', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
+      customTitle: /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": "custom-title",
+        style: {
+          display: 'flex',
+          gap: '24px',
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("p", {
+        style: {
+          margin: 0
+        }
+      }, "Custom ", /*#__PURE__*/_react["default"].createElement("b", null, "SlideDown"), " Title"), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "search",
+        width: 16,
+        height: 16
+      })),
+      title: "This title should not render",
+      classes: classes
+    }, "Children content"));
+    expect(wrapper.find({
+      "data-testid": 'custom-title'
+    }).exists()).toEqual(true);
+    expect(wrapper.find('label').exists()).toEqual(false);
   });
 });
 describe('SlideDownJSS', function () {

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

@@ -7,34 +7,64 @@ Object {
   "button": Object {
     "cursor": "pointer",
   },
+  "buttonPadding": Object {
+    "paddingLeft": "16px",
+    "paddingRight": "16px",
+  },
   "content": Object {
-    "transition": "0.3s all ease-out",
+    "overflow": "hidden",
+    "transform": "translateY(-10px)",
+    "transition": "transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
-  "hide": Object {
-    "marginBottom": 16,
-    "marginTop": -16,
+  "contentWrapper": Object {
+    "display": "grid",
+    "gridTemplateRows": "0fr",
     "opacity": 0,
-    "pointerEvents": "none",
+    "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",
+  },
+  "divider": Object {
+    "boxShadow": "inset 0 -1px 0px 0px #EDEDF1",
+  },
+  "flexContainer": Object {
+    "gap": "16px",
   },
   "icon": Object {
-    "marginLeft": 8,
-    "marginTop": 4,
+    "transition": "rotate cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+  },
+  "largePadding": Object {
+    "paddingBottom": "16px",
+    "paddingTop": "16px",
+  },
+  "leftIcon": Object {
+    "marginRight": "8px",
+  },
+  "normalPadding": Object {
+    "paddingBottom": "12px",
+    "paddingTop": "12px",
+  },
+  "rotateIcon": Object {
+    "transform": "rotate(-180deg)",
+  },
+  "showContent": Object {
+    "marginBottom": "12px",
+    "transform": "translateY(0px)",
+    "transition": "transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s",
   },
-  "show": Object {
-    "marginBottom": 0,
-    "marginTop": 0,
+  "showContentWrapper": Object {
+    "gridTemplateRows": "1fr",
     "opacity": 1,
+    "transition": "grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s",
   },
   "tag": Object {
-    "marginLeft": 8,
-    "marginTop": 4,
+    "marginLeft": "8px",
+    "marginTop": "4px",
     "pointerEvents": "none",
   },
   "text": Object {
     "cursor": "pointer",
   },
   "wrapper": Object {
-    "marginBottom": 16,
+    "marginBottom": "16px",
   },
 }
 `;

package/build/SlideDown/styles.js

@@ -5,42 +5,74 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   wrapper: {
-    marginBottom: _spacing["default"].small
+    marginBottom: _spacing["default"]['size-4']
   },
   button: {
     cursor: 'pointer'
   },
+  normalPadding: {
+    paddingTop: _spacing["default"]['size-3'],
+    paddingBottom: _spacing["default"]['size-3']
+  },
+  largePadding: {
+    paddingTop: _spacing["default"]['size-4'],
+    paddingBottom: _spacing["default"]['size-4']
+  },
+  buttonPadding: {
+    paddingLeft: _spacing["default"]['size-4'],
+    paddingRight: _spacing["default"]['size-4']
+  },
   text: {
     cursor: 'pointer'
   },
+  tag: {
+    marginTop: _spacing["default"]['size-1'],
+    marginLeft: _spacing["default"]['size-2'],
+    pointerEvents: 'none'
+  },
+  icon: {
+    transition: 'rotate cubic-bezier(0.25,0.46,0.45,0.94) 0.2s'
+  },
+  leftIcon: {
+    marginRight: _spacing["default"]['size-2']
+  },
+  rotateIcon: {
+    transform: 'rotate(-180deg)'
+  },
   content: {
-    transition: '0.3s all ease-out'
+    overflow: 'hidden',
+    transform: 'translateY(-10px)',
+    transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s'
   },
-  hide: {
-    opacity: 0,
-    marginTop: -_spacing["default"].small,
-    marginBottom: _spacing["default"].small,
-    pointerEvents: 'none'
+  showContent: {
+    transform: 'translateY(0px)',
+    transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s',
+    marginBottom: _spacing["default"]['size-3']
   },
-  show: {
+  contentWrapper: {
+    display: 'grid',
+    gridTemplateRows: '0fr',
+    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',
+    opacity: 0
+  },
+  showContentWrapper: {
     opacity: 1,
-    marginTop: 0,
-    marginBottom: 0
+    gridTemplateRows: '1fr',
+    transition: 'grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s'
   },
-  tag: {
-    marginTop: _spacing["default"].xTiny,
-    marginLeft: _spacing["default"].tiny,
-    pointerEvents: 'none'
+  divider: {
+    boxShadow: "inset 0 -1px 0px 0px ".concat(_colors["default"].border["default"].subtle)
   },
-  icon: {
-    marginTop: _spacing["default"].xTiny,
-    marginLeft: _spacing["default"].tiny
+  flexContainer: {
+    gap: _spacing["default"]['size-4']
   }
 };
 exports["default"] = _default;

package/build/tokens/colors.json

@@ -85,6 +85,7 @@
   },
   "alpha": {
     "white": {
+      "0": "rgba(255,255,255,0)",
       "5": "rgba(255,255,255,0.05)",
       "10": "rgba(255,255,255,0.1)",
       "20": "rgba(255,255,255,0.2)",
@@ -137,6 +138,7 @@
       "100": "hsl(234 75.4% 12.7%)"
     },
     "black": {
+      "0": "rgba(0,0,0,0.0)",
       "5": "rgba(0,0,0,0.05)",
       "10": "rgba(0,0,0,0.1)",
       "20": "rgba(0,0,0,0.2)",
@@ -481,6 +483,18 @@
       }
     }
   },
+  "skeleton": {
+    "bg": {
+      "default": {
+        "gradient": "linear-gradient(90deg, rgba(0,0,0,0.0) , rgba(0,0,0,0.05) , rgba(0,0,0,0.0) )",
+        "default": "rgba(0,0,0,0.05)"
+      },
+      "inverse": {
+        "default": "rgba(255,255,255,0.1)",
+        "gradient": "linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1) , rgba(255,255,255,0) )"
+      }
+    }
+  },
   "bg": {
     "action": {
       "primary": {

package/package.json

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