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

package/build/Radio/styles.js

@@ -11,133 +11,132 @@ var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var radio = _colors["default"].radio;
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var contentHeight = 48;
+var radioWidth = 52;
+var radioSize = 20;
+var radioInnerSize = 10;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"]['size-2'],
-    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     cursor: 'pointer',
     outline: '0',
+    '&:focus-visible $radio': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
+    },
+    '&:hover $radio $radioOuter': {
+      boxShadow: "inset 0 0 0 1px ".concat(radio.unselected.border.hover)
+    },
+    '&:active $radio $radioOuter': {
+      boxShadow: "inset 0 0 0 2px ".concat(radio.unselected.border.hover)
+    },
     '&$active': {
-      '&:focus $radio:before': {
-        borderColor: radio['selected']['border']['default'],
-        boxShadow: _shadows["default"]['focus-bright-blue']
-      },
       '&:hover': {
-        '& $radio:before': {
-          borderColor: radio['selected']['border']['hover']
+        '& $radio $radioOuter': {
+          boxShadow: "inset 0 0 0 2px ".concat(radio.selected.border.hover)
         },
-        '& $radio:after': {
-          background: radio['selected']['bg']['hover']
+        '& $radio $radioInner': {
+          background: radio.selected.bg.hover
         }
       },
       '&:active': {
-        '& $radio:before': {
-          borderColor: radio['selected']['border']['hover'],
-          borderWidth: '3px'
+        '& $radio $radioOuter': {
+          boxShadow: "inset 0 0 0 3px ".concat(radio.selected.border.hover, " !important")
         },
-        '& $radio:after': {
-          background: radio['selected']['bg']['hover']
+        '& $radio $radioInner': {
+          background: radio.selected.bg.hover
         }
       }
-    },
-    '&:not($active)': {
-      '&:hover $radio:before': {
-        borderColor: radio['unselected']['border']['hover'],
-        boxShadow: 'initial'
-      },
-      '&:active $radio:before': {
-        borderColor: radio['unselected']['border']['hover'],
-        borderWidth: '2px',
-        boxShadow: 'initial'
-      },
-      '&:focus $radio:before': {
-        borderColor: radio['unselected']['border']['default'],
-        boxShadow: _shadows["default"]['focus-bright-blue']
-      }
     }
   },
-  radio: {
-    width: _spacing["default"]['size-5'],
-    height: _spacing["default"]['size-5'],
-    position: 'relative',
+  radioWrap: {
+    width: radioWidth,
+    height: contentHeight,
     display: 'flex',
     alignItems: 'center',
-    '&:before': {
-      content: '""',
-      boxSizing: 'border-box',
-      width: 20,
-      height: 20,
-      borderRadius: '50%',
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(radio['unselected']['border']['default']),
-      background: radio['bg']['default'],
-      transition: '0.3s all'
-    },
-    '&:after': {
-      content: '""',
-      boxSizing: 'border-box',
-      width: 10,
-      height: 10,
-      borderRadius: '50%',
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      transition: '0.3s all',
-      background: radio['bg']['default']
-    }
+    justifyContent: 'center',
+    flexShrink: 0
+  },
+  radio: {
+    width: radioSize,
+    height: radioSize,
+    borderRadius: _borderRadius["default"]['br-full'],
+    transition: transition,
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  radioOuter: {
+    width: radioSize,
+    height: radioSize,
+    borderRadius: _borderRadius["default"]['br-full'],
+    boxShadow: "inset 0 0 0 1px ".concat(radio.unselected.border["default"]),
+    background: radio.bg["default"],
+    transition: transition,
+    gridRowStart: 1,
+    gridColumnStart: 1
+  },
+  radioInner: {
+    width: radioInnerSize,
+    height: radioInnerSize,
+    margin: 5,
+    borderRadius: _borderRadius["default"]['br-full'],
+    background: radio.bg["default"],
+    transition: transition,
+    gridRowStart: 1,
+    gridColumnStart: 1
   },
   active: {
     '& $radio': {
-      '&:before': {
-        borderWidth: 2,
-        borderColor: radio['selected']['border']['default']
+      '& $radioOuter': {
+        boxShadow: "inset 0 0 0 2px ".concat(radio.selected.border["default"])
       },
-      '&:after': {
-        background: radio['selected']['bg']['default']
+      '& $radioInner': {
+        background: radio.selected.bg["default"]
       }
     }
   },
   disabled: {
     pointerEvents: 'none',
-    '& :not($radio)': {
-      opacity: 0.4
+    '& $radio $radioOuter': {
+      background: radio.bg.disabled
     },
-    '&$active': {
-      '& $radio:before': {
-        borderColor: radio['selected']['border']['disabled']
-      },
-      '& $radio:after': {
-        background: radio['selected']['bg']['disabled']
-      }
+    '& $radio $radioInner': {
+      background: radio.bg.disabled
     },
-    '&:not($active)': {
-      '& $radio:before': {
-        background: radio['bg']['disabled']
+    '&$active': {
+      '& $radio $radioOuter': {
+        boxShadow: "inset 0 0 0 2px ".concat(radio.selected.border.disabled)
       },
-      '& $radio:after': {
-        background: radio['bg']['disabled']
+      '& $radio $radioInner': {
+        background: radio.selected.bg.disabled
       }
     }
   },
+  labelWrap: {
+    minHeight: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: _spacing["default"]['size-1'],
+    paddingBottom: _spacing["default"]['size-1'],
+    overflow: 'hidden',
+    flex: 1
+  },
   label: {
-    marginLeft: _spacing["default"]['size-2'],
+    marginLeft: _spacing["default"]['size-3'],
+    pointerEvents: 'none',
     cursor: 'pointer',
-    "float": 'left',
-    flex: '1'
+    flex: 1
   },
   right: {
     marginLeft: _spacing["default"]['size-2'],
-    "float": 'right',
     pointerEvents: 'none'
   },
   overflow: {

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,160 @@ 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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return 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 _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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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; }
 
-/** 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);
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-    _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);
+};
+var _themeColors = {
+  blue: {
+    icon: {
+      "default": _colors["default"].icon.brand["default"],
+      disabled: _colors["default"].icon.brand.disabled
+    },
+    text: {
+      "default": {
+        primary: true
+      },
+      disabled: {
+        indigoSecondary: true
       }
     }
-  }, {
-    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);
-    }
-  }, {
-    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: {
+      "default": _colors["default"].icon["default"].bold,
+      disabled: _colors["default"].icon["default"].disabled
+    },
+    text: {
+      "default": {
+        highEmphasis: true
+      },
+      disabled: {
+        disabled: 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,
+      disabled = _ref.disabled,
+      testId = _ref.testId,
+      id = _ref.id;
+
+  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"]), disabled ? themeColors.text.disabled : themeColors.text["default"]);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (prevExpanded !== expanded) {
+      setExpanded(expanded);
+    }
+  }, [prevExpanded, expanded]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: divider ? classes.divider : ''
+  }, /*#__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,
+    id: id
+  }), /*#__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: [!disabled ? themeColors.icon["default"] : themeColors.icon.disabled],
+    className: classes.leftIcon
+  }) : '', customTitle || /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, getTextProps(), {
+    strong: strong,
+    tag: "label",
+    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: [!disabled ? themeColors.icon["default"] : themeColors.icon.disabled],
+    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 +199,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 +221,25 @@ 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,
+
+  /** 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,
+
+  /** Id of the component */
+  id: _propTypes["default"].string
 };
 var _default = SlideDown;
 exports["default"] = _default;