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

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/__snapshots__/Footer.test.js.snap

@@ -13,8 +13,6 @@ Object {
   },
   "column": Object {
     "paddingBottom": 16,
-    "paddingLeft": 12,
-    "paddingRight": 12,
   },
   "footer": Object {
     "@media (min-width: 992px)": Object {
@@ -31,10 +29,6 @@ Object {
       32,
     ],
   },
-  "footerBottom": Object {
-    "paddingLeft": 12,
-    "paddingRight": 12,
-  },
   "footerWithoutColumns": Object {
     "@media (min-width: 992px)": Object {
       "padding": Array [

package/build/Footer/styles.js

@@ -5,78 +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: {
-    paddingLeft: _spacing["default"].gutter,
-    paddingRight: _spacing["default"].gutter,
-    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']
   },
-  footerBottom: {
-    paddingLeft: _spacing["default"].gutter,
-    paddingRight: _spacing["default"].gutter
+  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/build/Grid/Col/__snapshots__/Col.test.js.snap

@@ -795,10 +795,24 @@ Object {
     },
   },
   "col": Object {
+    "@media (min-width: 576px)": Object {
+      "padding": Array [
+        0,
+        "8px",
+      ],
+    },
+    "@media (min-width: 768px)": Object {
+      "padding": Array [
+        0,
+        "12px",
+      ],
+    },
     "boxSizing": "border-box",
     "minHeight": "1px",
-    "paddingLeft": 12,
-    "paddingRight": 12,
+    "padding": Array [
+      0,
+      6,
+    ],
     "position": "relative",
   },
   "offset-xxs1": Object {