@occmundial/occ-atomic 3.0.0-beta.49 → 3.0.0-beta.50

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.0.0-beta.50](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.49...v3.0.0-beta.50) (2024-09-03)
+
+
+### Features
+
+* Update footer design and use design tokens ([2e83d4f](https://github.com/occmundial/occ-atomic/commit/2e83d4f7f135570a6c4a375c28bedab578f1a8f4))
+
 # [3.0.0-beta.49](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.48...v3.0.0-beta.49) (2024-08-27)
 
 

package/build/Footer/Footer.js

@@ -1,105 +1,84 @@
 "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"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Grid = _interopRequireDefault(require("../Grid"));
-
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
+var _Grid = _interopRequireDefault(require("./../Grid"));
 
 var _List = _interopRequireDefault(require("./List"));
 
-var _Text = _interopRequireDefault(require("../Text"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _Button = _interopRequireDefault(require("../Button"));
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 itemTypes = {
   link: 'link',
   icon: 'icon',
   custom: 'custom'
 };
-/** Customisable footer component. This component can receive an array of columns. Those columns can contain an array of lists, and those lists can contain a title and and array of items. The items are objects that must define a type (one of 'link,', 'icon' or 'cursom').
-  It can also receive a copy string, to show the copyright data, and an array of links to show above it.
-*/
 
 var Footer = function Footer(_ref) {
-  var classes = _ref.classes,
-      columns = _ref.columns,
-      winWidth = _ref.winWidth,
-      bottomLinks = _ref.bottomLinks,
+  var _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
+      _ref$bottomLinks = _ref.bottomLinks,
+      bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
       copyText = _ref.copyText,
       aux = _ref.aux,
-      bottomItem = _ref.bottomItem,
-      listClassName = _ref.listClassName;
-  var text = aux.text,
-      icon = aux.icon,
-      href = aux.href,
-      target = aux.target,
-      iconRight = aux.iconRight,
-      auxClassName = aux.className;
-  var isMobile = winWidth < _grid["default"].sm;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: columns.length > 0 ? classes.footer : classes.footerWithoutColumns
+      listClassName = _ref.listClassName,
+      isFluid = _ref.isFluid,
+      topElement = _ref.topElement,
+      bottomLinksClassName = _ref.bottomLinksClassName,
+      sectionDivider = _ref.sectionDivider,
+      classes = _ref.classes;
+  return /*#__PURE__*/_react["default"].createElement("footer", {
+    className: classes.footer
   }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    fluid: winWidth < _grid["default"].xl
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    direction: isMobile ? 'col' : 'row',
+    fluid: isFluid,
+    className: classes.footerContainer
+  }, /*#__PURE__*/(0, _react.isValidElement)(topElement) ? topElement : '', columns.length ? /*#__PURE__*/_react["default"].createElement("section", {
     className: classes.column
   }, columns.map(function (column, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       key: index,
-      flex: "1",
-      className: !isMobile ? classes.list : ''
+      className: classes.listContainer
     }, column.map(function (list) {
       return /*#__PURE__*/_react["default"].createElement(_List["default"], {
-        list: list,
-        isMobile: isMobile,
         key: list.key,
+        list: list,
         listClassName: listClassName
       });
     }));
-  })), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    alignItems: "start",
-    className: classes.bottomWrap,
-    direction: isMobile ? 'col' : 'row'
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1"
-  }, aux && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    href: href,
-    target: target,
-    icon: icon,
-    iconRight: iconRight,
-    size: "md",
-    theme: "ghostPink",
-    className: "".concat(isMobile ? classes.buttonMobile : '', " ").concat(auxClassName)
-  }, text), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    small: true,
-    mid: true,
-    bottomTiny: true,
-    tag: "div"
-  }, bottomLinks.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: isMobile ? classes.mobileListElement : classes.listElement,
+  })) : '', sectionDivider ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.divider
+  }) : '', /*#__PURE__*/_react["default"].createElement("section", {
+    className: classes.bottomSection
+  }, aux ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.auxContainer
+  }, aux.badges ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.badgesContainer
+  }, aux.badges) : '', aux.socialMedia ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.socialMediaContainer
+  }, aux.socialMedia) : '', aux.extraContent) : '', /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.bottomContainer
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.bottomLinksContainer, " ").concat(bottomLinksClassName)
+  }, bottomLinks.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: item.key
-    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-      tag: "label",
-      small: true,
-      mid: true,
-      testId: item.testId
+    }, index === 0 || index === bottomLinks.length ? '' : /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.linkDivider
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.listElement
     }, /*#__PURE__*/_react["default"].createElement("a", {
       className: classes.link,
       href: item.href,
@@ -107,10 +86,9 @@ var Footer = function Footer(_ref) {
       rel: item.rel,
       onClick: item.onClick
     }, item.text)));
-  })), copyText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    small: true,
-    mid: true
-  }, copyText)), bottomItem)));
+  })), copyText && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.copyright
+  }, copyText)))));
 };
 
 var columnPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -143,32 +121,35 @@ Footer.propTypes = {
   /** Array of links to render at the bottom. */
   bottomLinks: _propTypes["default"].array,
 
-  /** Custom component to render on the bottom left. */
-  customBottom: _propTypes["default"].node,
-
   /** String or component to show as the copyright label. */
   copyText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
 
   /** Object to implement an auxiliar button on the bottom right. */
   aux: _propTypes["default"].shape({
-    text: _propTypes["default"].string,
-    icon: _propTypes["default"].string,
-    href: _propTypes["default"].string,
-    target: _propTypes["default"].string,
-    iconRight: _propTypes["default"].string
+    badges: _propTypes["default"].node,
+    socialMedia: _propTypes["default"].node,
+    extraContent: _propTypes["default"].node
   }),
 
   /** Custom component to render on the bottom right, at the end of the footer */
   bottomItem: _propTypes["default"].node,
 
   /** Footer list className.  */
-  listClassName: _propTypes["default"].string
+  listClassName: _propTypes["default"].string,
+  isFluid: _propTypes["default"]["boolean"],
+
+  /** Custom component to render at the top of the footer, commonly used for brand logo */
+  topElement: _propTypes["default"].node,
+
+  /** Custom classname for bottomLinks container. */
+  bottomLinksClassName: _propTypes["default"].string,
+
+  /** Flag to display an horizontal line between sections */
+  sectionDivider: _propTypes["default"]["boolean"]
 };
 Footer.defaultProps = {
   bottomLinks: [],
   columns: []
 };
-
-var _default = (0, _WindowSize["default"])(Footer);
-
+var _default = Footer;
 exports["default"] = _default;

package/build/Footer/List/List.js

@@ -11,13 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,27 +23,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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 _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 _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 _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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var itemTypes = {
   link: 'link',
@@ -53,110 +41,87 @@ var itemTypes = {
   custom: 'custom'
 };
 
-var List = /*#__PURE__*/function (_Component) {
-  _inherits(List, _Component);
-
-  var _super = _createSuper(List);
-
-  function List() {
-    var _this;
-
-    _classCallCheck(this, List);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      toggle: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "toggleList", function () {
-      return _this.setState({
-        toggle: !_this.state.toggle
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderLink", function (item) {
-      var classes = _this.props.classes;
-      return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        key: item.key,
-        small: true,
-        bottomTiny: true
-      }, /*#__PURE__*/_react["default"].createElement("a", {
-        href: item.href,
-        target: item.target,
-        rel: item.rel,
-        className: classes.link,
-        title: item.title
-      }, item.text));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderIcon", function (item) {
-      var classes = _this.props.classes;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: item.key,
-        className: classes.iconWrapper,
-        title: item.title
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: item.iconName,
-        className: classes.icon,
-        onClick: item.onClick,
-        colors: [_colors["default"].grey600],
-        ariaLabel: item.title
-      }));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderCustom", function (item) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: item.key
-      }, item.custom);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderItem", function (item) {
-      if (item.type === itemTypes.link) return _this.renderLink(item);else if (item.type === itemTypes.icon) return _this.renderIcon(item);else if (item.type === itemTypes.custom) return _this.renderCustom(item);
-    });
-
-    return _this;
-  }
-
-  _createClass(List, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          _this$props$list = _this$props.list,
-          collapse = _this$props$list.collapse,
-          title = _this$props$list.title,
-          items = _this$props$list.items,
-          isMobile = _this$props.isMobile,
-          classes = _this$props.classes,
-          listClassName = _this$props.listClassName;
-      var toggle = this.state.toggle;
-      var isCollapsible = collapse || isMobile;
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        onClick: isCollapsible ? this.toggleList : null,
-        className: "".concat(classes.title, " ").concat(isCollapsible ? classes.collapsible : '')
-      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        tag: "span"
-      }, title), isCollapsible && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "forward",
-        width: _spacing["default"].small,
-        height: _spacing["default"].small,
-        className: "".concat(classes.arrow, " ").concat(toggle ? classes.arrowUp : classes.arrowDown)
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.list, " ").concat(toggle || !isCollapsible ? classes.toggle : '', " ").concat(listClassName)
-      }, items.map(function (item) {
-        return _this2.renderItem(item);
-      })));
-    }
-  }]);
-
-  return List;
-}(_react.Component);
+var List = function List(_ref) {
+  var _ref$list = _ref.list,
+      title = _ref$list.title,
+      items = _ref$list.items,
+      listClassName = _ref.listClassName,
+      classes = _ref.classes;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      toggle = _useState2[0],
+      setToggle = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      overflowVisible = _useState4[0],
+      setOverflowVisible = _useState4[1];
+
+  var toggleList = (0, _react.useCallback)(function () {
+    return setToggle(!toggle);
+  }, [toggle]);
+  (0, _react.useEffect)(function () {
+    var timeout = setTimeout(function () {
+      return setOverflowVisible(toggle);
+    }, toggle ? 200 : 0);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [toggle]);
+  var renderLink = (0, _react.useCallback)(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      key: item.key,
+      href: item.href,
+      target: item.target,
+      rel: item.rel,
+      className: classes.link,
+      title: item.title,
+      "data-testid": item.testId
+    }, item.text);
+  }, [classes]);
+  var renderIcon = (0, _react.useCallback)(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.key,
+      className: classes.iconWrapper,
+      title: item.title
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      iconName: item.iconName,
+      onClick: item.onClick,
+      color: _colors["default"].grey600,
+      testId: item.testId
+    }));
+  }, [classes]);
+  var renderCustom = (0, _react.useCallback)(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.key
+    }, item.custom);
+  }, []);
+  var renderItem = (0, _react.useCallback)(function (item) {
+    if (item.type === itemTypes.link) return renderLink(item);else if (item.type === itemTypes.icon) return renderIcon(item);else if (item.type === itemTypes.custom) return renderCustom(item);
+  }, [renderLink, renderIcon, renderCustom]);
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: toggleList,
+    className: "".concat(classes.title, " ").concat(classes.collapsible),
+    "data-testid": "footer-list__title-".concat(title)
+  }, /*#__PURE__*/_react["default"].createElement("h5", {
+    className: classes.titleColor
+  }, title), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: "chevron-down",
+    size: _spacing["default"].small,
+    className: "".concat(classes.arrow).concat(toggle ? " ".concat(classes.arrowUp) : '')
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.titleDesktop
+  }, /*#__PURE__*/_react["default"].createElement("h5", {
+    className: classes.titleColor
+  }, title)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.list).concat(toggle ? " ".concat(classes.toggle) : '').concat(listClassName ? " ".concat(listClassName) : '')
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.content).concat(toggle ? " ".concat(classes.showContent) : '').concat(overflowVisible ? " ".concat(classes.overflowVisible) : '')
+  }, items.map(function (item) {
+    return renderItem(item);
+  }))));
+};
 
 List.propTypes = {
   classes: _propTypes["default"].object,

package/build/Footer/List/styles.js

@@ -5,55 +5,109 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _grid = _interopRequireDefault(require("../../subatomic/grid"));
+
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _styles = require("../../Text/styles");
 
 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 = {
-  list: {
-    transition: '0.3s all',
-    pointerEvents: 'none',
-    overflow: 'hidden',
-    height: 0,
-    transform: "translateY(".concat(-_spacing["default"].small, "px)"),
+  list: _defineProperty({
+    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
-  },
+  }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    opacity: 1,
+    gridTemplateRows: '1fr'
+  }),
   toggle: {
-    height: 'auto',
-    transform: 'translateY(0)',
     opacity: 1,
-    pointerEvents: 'all'
+    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'
   },
-  collapsible: {
-    cursor: 'pointer'
-  },
-  arrow: {
-    marginLeft: _spacing["default"].tiny,
-    marginBottom: -_spacing["default"].xTiny
+  content: _defineProperty({
+    overflow: 'hidden',
+    transform: 'translateY(-10px)',
+    transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: _spacing["default"]['size-4']
+  }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    transform: 'translateY(0px)',
+    overflow: 'visible'
+  }),
+  showContent: _defineProperty({}, "@media (max-width: ".concat(_grid["default"].xs - 1, "px)"), {
+    transform: 'translateY(0px)',
+    transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s',
+    marginBottom: _spacing["default"]['size-3']
+  }),
+  overflowVisible: {
+    overflow: 'visible'
   },
+  collapsible: _defineProperty({
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'space-between'
+  }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    cursor: 'default'
+  }),
+  arrow: _defineProperty({
+    display: 'inline-block'
+  }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    display: 'none'
+  }),
   arrowUp: {
-    transform: 'rotate(-90deg)'
-  },
-  arrowDown: {
-    transform: 'rotate(90deg)'
+    transform: 'rotate(-180deg)'
   },
   link: {
-    color: _colors["default"].grey600,
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    color: _colors["default"].text.corp.secondary,
     textDecoration: 'none',
-    '&:hover, &:focus, &:active': {
-      color: _colors["default"].grey600
+    transition: 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
+    '&:hover': {
+      color: _colors["default"].text.corp.primary
+    },
+    '&:focus-visible': {
+      color: _colors["default"].text.corp.primary,
+      boxShadow: _shadows["default"]['focus-corp'],
+      borderRadius: _borderRadius["default"]['br-xs'],
+      outline: 0
     }
   },
-  icon: {},
   iconWrapper: {
-    marginBottom: _spacing["default"].tiny,
-    marginRight: _spacing["default"].tiny,
+    marginBottom: _spacing["default"]['size-2'],
+    marginRight: _spacing["default"]['size-2'],
     display: 'inline-block'
   },
-  title: {
-    marginBottom: _spacing["default"].tiny
-  }
+  title: _defineProperty({
+    padding: [_spacing["default"]['size-4'], 0]
+  }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    display: 'none',
+    padding: 0,
+    marginBottom: _spacing["default"]['size-5']
+  }),
+  titleColor: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['heading-h5']),
+    margin: 0
+  },
+  titleDesktop: _defineProperty({
+    display: 'none'
+  }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    marginBottom: _spacing["default"]['size-5'],
+    display: 'block'
+  })
 };
 exports["default"] = _default;

package/build/Footer/styles.js

@@ -5,72 +5,144 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _styles = require("../Text/styles");
+
+var _footerContainer, _column, _listContainer;
+
 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 = {
-  footer: _defineProperty({
-    backgroundColor: _colors["default"].bgGrey,
-    padding: [_spacing["default"].base, 0, _spacing["default"].medium]
-  }, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
-    padding: [_spacing["default"].medium, 0, _spacing["default"].medium]
-  }),
-  footerWithoutColumns: _defineProperty({
-    backgroundColor: _colors["default"].bgGrey,
-    padding: [0, 0, _spacing["default"].medium]
-  }, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
-    padding: [0, 0, _spacing["default"].medium]
-  }),
-  column: {
-    paddingBottom: _spacing["default"].small
-  },
-  list: {
-    '&:not(:first-child)': {
-      marginLeft: _spacing["default"].small
-    }
+  footer: {
+    backgroundColor: _colors["default"].bg.surface["default"],
+    borderTop: "1px solid ".concat(_colors["default"].border["default"].subtle),
+    padding: [_spacing["default"]['size-7'], 0]
   },
+  footerContainer: (_footerContainer = {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: _spacing["default"]['size-5']
+  }, _defineProperty(_footerContainer, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    rowGap: _spacing["default"]['size-7']
+  }), _defineProperty(_footerContainer, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    rowGap: _spacing["default"]['size-8']
+  }), _footerContainer),
+  column: (_column = {
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap'
+  }, _defineProperty(_column, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    flexDirection: 'row',
+    columnGap: _spacing["default"]['size-4'],
+    rowGap: _spacing["default"]['size-7']
+  }), _defineProperty(_column, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    columnGap: _spacing["default"]['size-5'],
+    rowGap: 0
+  }), _column),
   link: {
-    color: _colors["default"].grey600,
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    color: _colors["default"].text.corp.secondary,
     textDecoration: 'none',
-    cursor: 'pointer',
-    '&:hover, &:focus, &:active': {
-      color: _colors["default"].grey600
-    }
-  },
-  listElement: {
-    paddingLeft: _spacing["default"].small,
-    paddingRight: _spacing["default"].small,
-    position: 'relative',
-    display: 'inline-block',
-    '&:first-child': {
-      paddingLeft: 0
+    transition: 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
+    '&:hover': {
+      color: _colors["default"].text.corp.primary
     },
-    '&:not(:last-child)': {
-      '&::after': {
-        content: '"|"',
-        position: 'absolute',
-        right: -2
-      }
+    '&:focus-visible': {
+      color: _colors["default"].text.corp.primary,
+      boxShadow: _shadows["default"]['focus-corp'],
+      borderRadius: _borderRadius["default"]['br-xs'],
+      outline: 0
     }
   },
-  mobileListElement: {
-    paddingLeft: 0,
+  listElement: _defineProperty({
     display: 'block',
-    paddingBottom: _spacing["default"].tiny
+    textAlign: 'center'
+  }, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    position: 'relative',
+    display: 'inline-block'
+  }),
+  listContainer: (_listContainer = {
+    flexBasis: '100%'
+  }, _defineProperty(_listContainer, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    flexBasis: "calc(50% - ".concat(_spacing["default"]['size-4'], ")")
+  }), _defineProperty(_listContainer, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    flexBasis: "calc(25% - ".concat(_spacing["default"]['size-5'], ")")
+  }), _listContainer),
+  bottomSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: _spacing["default"]['size-7']
+  },
+  bottomLinksContainer: _defineProperty({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    columnGap: _spacing["default"]['size-5'],
+    rowGap: _spacing["default"]['size-4']
+  }, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  }),
+  linkDivider: _defineProperty({
+    width: 1,
+    margin: [_spacing["default"]['size-0'], 0],
+    backgroundColor: _colors["default"].border["default"].bold,
+    alignSelf: 'stretch',
+    display: 'none'
+  }, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    display: 'block'
+  }),
+  copyright: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    color: _colors["default"].text.corp.secondary,
+    '& > p': {
+      margin: 0
+    }
   },
-  bottomWrap: {
-    paddingTop: _spacing["default"].base,
-    borderTop: "1px solid ".concat(_colors["default"].grey200)
+  bottomContainer: _defineProperty({
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: _spacing["default"]['size-4']
+  }, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    rowGap: _spacing["default"]['size-5']
+  }),
+  divider: {
+    borderTop: "1px solid ".concat(_colors["default"].border["default"].subtle)
   },
-  buttonMobile: {
-    marginTop: _spacing["default"].small
+  auxContainer: _defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    gap: _spacing["default"]['size-5']
+  }, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    flexDirection: 'row',
+    gap: _spacing["default"]['size-9']
+  }),
+  badgesContainer: _defineProperty({
+    display: 'flex',
+    gap: _spacing["default"]['size-4'],
+    flexDirection: 'column'
+  }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    flexDirection: 'row'
+  }),
+  socialMediaContainer: {
+    display: 'flex',
+    direction: 'row',
+    columnGap: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

package/package.json

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