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

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

@@ -4,85 +4,135 @@ exports[`Footer matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`Footer styles matches the snapshot 1`] = `
 Object {
-  "bottomWrap": Object {
-    "borderTop": "1px solid #dddddd",
-    "paddingTop": 24,
+  "auxContainer": Object {
+    "@media (min-width: 992px)": Object {
+      "flexDirection": "row",
+      "gap": "64px",
+    },
+    "alignItems": "center",
+    "display": "flex",
+    "flexDirection": "column",
+    "gap": "24px",
+    "justifyContent": "center",
   },
-  "buttonMobile": Object {
-    "marginTop": 16,
+  "badgesContainer": Object {
+    "@media (min-width: 576px)": Object {
+      "flexDirection": "row",
+    },
+    "display": "flex",
+    "flexDirection": "column",
+    "gap": "16px",
   },
-  "column": Object {
-    "paddingBottom": 16,
-    "paddingLeft": 12,
-    "paddingRight": 12,
+  "borderTop": Object {
+    "borderTop": "1px solid #EDEDF1",
   },
-  "footer": Object {
+  "bottomContainer": Object {
+    "@media (min-width: 768px)": Object {
+      "rowGap": "24px",
+    },
+    "display": "flex",
+    "flexDirection": "column",
+    "rowGap": "16px",
+  },
+  "bottomLinksContainer": Object {
+    "@media (min-width: 768px)": Object {
+      "alignItems": "stretch",
+      "flexDirection": "row",
+    },
+    "columnGap": "24px",
+    "display": "flex",
+    "flexDirection": "column",
+    "justifyContent": "center",
+    "rowGap": "16px",
+  },
+  "bottomSection": Object {
+    "display": "flex",
+    "flexDirection": "column",
+    "rowGap": "40px",
+  },
+  "column": Object {
+    "@media (min-width: 576px)": Object {
+      "columnGap": "16px",
+      "gridTemplateColumns": "repeat(2, minmax(0, 1fr))",
+      "rowGap": "40px",
+    },
     "@media (min-width: 992px)": Object {
-      "padding": Array [
-        32,
-        0,
-        32,
-      ],
+      "columnGap": "24px",
+      "gridTemplateColumns": "repeat(4, minmax(0, 1fr))",
+      "rowGap": 0,
     },
-    "backgroundColor": "#f5f5f8",
-    "padding": Array [
-      24,
-      0,
-      32,
-    ],
+    "display": "grid",
   },
-  "footerBottom": Object {
-    "paddingLeft": 12,
-    "paddingRight": 12,
+  "copyright": Object {
+    "& > p": Object {
+      "margin": 0,
+    },
+    "color": "#5A5D7B",
+    "font": "300 14px/1.5 'OccText', sans-serif",
   },
-  "footerWithoutColumns": Object {
+  "divider": Object {
+    "borderTop": "1px solid #EDEDF1",
+  },
+  "footer": Object {
+    "backgroundColor": "#fff",
+  },
+  "footerContainer": Object {
+    "@media (min-width: 576px)": Object {
+      "rowGap": "40px",
+    },
     "@media (min-width: 992px)": Object {
-      "padding": Array [
-        0,
-        0,
-        32,
-      ],
+      "rowGap": "48px",
     },
-    "backgroundColor": "#f5f5f8",
-    "padding": Array [
-      0,
-      0,
-      32,
-    ],
+    "display": "flex",
+    "flexDirection": "column",
+    "paddingBottom": "40px",
+    "paddingTop": "40px",
+    "rowGap": "24px",
+  },
+  "footerTransparent": Object {
+    "backgroundColor": "transparent",
   },
   "link": Object {
-    "&:hover, &:focus, &:active": Object {
-      "color": "#777777",
+    "&:focus-visible": Object {
+      "borderRadius": "4px",
+      "boxShadow": "0 0 0 8px rgba(8, 13, 57, 0.1)",
+      "color": "#080D39",
+      "outline": 0,
+    },
+    "&:hover": Object {
+      "color": "#080D39",
     },
-    "color": "#777777",
+    "color": "#5A5D7B",
     "cursor": "pointer",
+    "font": "300 14px/1.5 'OccText', sans-serif",
     "textDecoration": "none",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
-  "list": Object {
-    "&:not(:first-child)": Object {
-      "marginLeft": 16,
+  "linkDivider": Object {
+    "@media (min-width: 768px)": Object {
+      "display": "block",
     },
+    "alignSelf": "stretch",
+    "backgroundColor": "#6C6F89",
+    "display": "none",
+    "margin": Array [
+      "2px",
+      0,
+    ],
+    "width": 1,
   },
   "listElement": Object {
-    "&:first-child": Object {
-      "paddingLeft": 0,
+    "@media (min-width: 768px)": Object {
+      "display": "inline-block",
+      "position": "relative",
     },
-    "&:not(:last-child)": Object {
-      "&::after": Object {
-        "content": "\\"|\\"",
-        "position": "absolute",
-        "right": -2,
-      },
-    },
-    "display": "inline-block",
-    "paddingLeft": 16,
-    "paddingRight": 16,
-    "position": "relative",
-  },
-  "mobileListElement": Object {
     "display": "block",
-    "paddingBottom": 8,
-    "paddingLeft": 0,
+    "textAlign": "center",
+  },
+  "socialMediaContainer": Object {
+    "columnGap": "4px",
+    "direction": "row",
+    "display": "flex",
   },
 }
 `;