@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.11

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

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Flexbox matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Flexbox styles matches the snapshot 1`] = `
+Object {
+  "abase": Object {
+    "alignItems": "baseline",
+  },
+  "acenter": Object {
+    "alignItems": "center",
+  },
+  "aend": Object {
+    "alignItems": "flex-end",
+  },
+  "astart": Object {
+    "alignItems": "flex-start",
+  },
+  "astretch": Object {
+    "alignItems": "stretch",
+  },
+  "caround": Object {
+    "alignContent": "space-around",
+  },
+  "cbetween": Object {
+    "alignContent": "space-between",
+  },
+  "ccenter": Object {
+    "alignContent": "center",
+  },
+  "cend": Object {
+    "alignContent": "flex-end",
+  },
+  "col": Object {
+    "flexDirection": "column",
+  },
+  "colR": Object {
+    "flexDirection": "column-reverse",
+  },
+  "cstart": Object {
+    "alignContent": "flex-start",
+  },
+  "cstretch": Object {
+    "alignContent": "stretch",
+  },
+  "flex": Object {
+    "display": "flex",
+  },
+  "iFlex": Object {
+    "display": "inline-flex",
+  },
+  "jaround": Object {
+    "justifyContent": "space-around",
+  },
+  "jbetween": Object {
+    "justifyContent": "space-between",
+  },
+  "jcenter": Object {
+    "justifyContent": "center",
+  },
+  "jend": Object {
+    "justifyContent": "flex-end",
+  },
+  "jevenly": Object {
+    "justifyContent": "space-evenly",
+  },
+  "jstart": Object {
+    "justifyContent": "flex-start",
+  },
+  "noWrap": Object {
+    "flexWrap": "nowrap",
+  },
+  "row": Object {
+    "flexDirection": "row",
+  },
+  "rowR": Object {
+    "flexDirection": "row-reverse",
+  },
+  "sauto": Object {
+    "alignSelf": "auto",
+  },
+  "sbase": Object {
+    "alignSelf": "baseline",
+  },
+  "scenter": Object {
+    "alignSelf": "center",
+  },
+  "send": Object {
+    "alignSelf": "flex-end",
+  },
+  "sstart": Object {
+    "alignSelf": "flex-start",
+  },
+  "sstretch": Object {
+    "alignSelf": "stretch",
+  },
+  "wrap": Object {
+    "flexWrap": "wrap",
+  },
+  "wrapR": Object {
+    "flexWrap": "wrap-reverse",
+  },
+}
+`;
+
+exports[`FlexboxJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Flexbox/index.js

@@ -5,9 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
 var _Flexbox = _interopRequireDefault(require("./Flexbox"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _Flexbox["default"];
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var StyledFlexbox = (0, _reactJss["default"])(_styles["default"])(_Flexbox["default"]); // eslint-disable-next-line
+
+var _Flexbox$propTypes = _Flexbox["default"].propTypes,
+    classes = _Flexbox$propTypes.classes,
+    propTypes = _objectWithoutProperties(_Flexbox$propTypes, ["classes"]);
+
+StyledFlexbox.propTypes = _objectSpread(_objectSpread({}, propTypes), StyledFlexbox.propTypes);
+var _default = StyledFlexbox;
 exports["default"] = _default;

package/build/Flexbox/styles.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
-var _reactJss = require("react-jss");
-
-var _default = (0, _reactJss.createUseStyles)({
+var _default = {
   flex: {
     display: 'flex'
   },
@@ -104,6 +101,5 @@ var _default = (0, _reactJss.createUseStyles)({
   sstretch: {
     alignSelf: 'stretch'
   }
-});
-
+};
 exports["default"] = _default;

package/build/Footer/Footer.js

@@ -30,8 +30,8 @@ var itemTypes = {
   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.
+/** 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) {
@@ -40,73 +40,79 @@ var Footer = function Footer(_ref) {
       winWidth = _ref.winWidth,
       bottomLinks = _ref.bottomLinks,
       copyText = _ref.copyText,
-      aux = _ref.aux;
+      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;
+      iconRight = aux.iconRight,
+      auxClassName = aux.className;
   var isMobile = winWidth < _grid["default"].sm;
-  return _react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: columns.length > 0 ? classes.footer : classes.footerWithoutColumns
-  }, _react["default"].createElement(_Grid["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
     fluid: winWidth < _grid["default"].xl
-  }, _react["default"].createElement(_Grid["default"].Row, null, _react["default"].createElement(_Flexbox["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"].Row, null, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     direction: isMobile ? 'col' : 'row',
     className: classes.column
   }, columns.map(function (column, index) {
-    return _react["default"].createElement(_Flexbox["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
       key: index,
-      flex: "1"
+      flex: "1",
+      className: !isMobile ? classes.list : ''
     }, column.map(function (list) {
-      return _react["default"].createElement(_List["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_List["default"], {
         list: list,
         isMobile: isMobile,
-        key: list.key
+        key: list.key,
+        listClassName: listClassName
       });
     }));
-  })), _react["default"].createElement("div", {
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.footerBottom
-  }, _react["default"].createElement(_Flexbox["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     alignItems: "start",
     className: classes.bottomWrap,
     direction: isMobile ? 'col' : 'row'
-  }, _react["default"].createElement(_Flexbox["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     flex: "1"
-  }, _react["default"].createElement(_Text["default"], {
+  }, 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 _react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: isMobile ? classes.mobileListElement : classes.listElement,
       key: item.key
-    }, _react["default"].createElement(_Text["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
       tag: "label",
       small: true,
-      mid: true
-    }, _react["default"].createElement("a", {
+      mid: true,
+      testId: item.testId
+    }, /*#__PURE__*/_react["default"].createElement("a", {
       className: classes.link,
       href: item.href,
       target: item.target,
       rel: item.rel,
       onClick: item.onClick
     }, item.text)));
-  })), copyText && _react["default"].createElement(_Text["default"], {
+  })), copyText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     small: true,
     mid: true
-  }, copyText)), aux && _react["default"].createElement(_Button["default"], {
-    href: href,
-    target: target,
-    icon: icon,
-    iconRight: iconRight,
-    size: "md",
-    theme: "ghostPink",
-    className: isMobile ? classes.buttonMobile : ''
-  }, text))))));
+  }, copyText)), bottomItem)))));
 };
 
 var columnPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -152,7 +158,13 @@ Footer.propTypes = {
     href: _propTypes["default"].string,
     target: _propTypes["default"].string,
     iconRight: _propTypes["default"].string
-  })
+  }),
+
+  /** 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
 };
 Footer.defaultProps = {
   bottomLinks: [],

package/build/Footer/Footer.test.js

@@ -21,7 +21,7 @@ var reduceClasses = function reduceClasses(prev, curr) {
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Footer", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Footer["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
       classes: classes
     }));
     expect(wrapper).toMatchSnapshot();
@@ -29,7 +29,7 @@ describe("Footer", function () {
 });
 describe("FooterJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/build/Footer/List/List.js

@@ -1,5 +1,7 @@
 "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
 });
@@ -19,9 +21,9 @@ var _colors = _interopRequireDefault(require("../../subatomic/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+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 _typeof(obj) { 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); }
+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"); } }
 
@@ -29,15 +31,19 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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; }
 
@@ -47,14 +53,12 @@ var itemTypes = {
   custom: 'custom'
 };
 
-var List =
-/*#__PURE__*/
-function (_Component) {
+var List = /*#__PURE__*/function (_Component) {
   _inherits(List, _Component);
 
-  function List() {
-    var _getPrototypeOf2;
+  var _super = _createSuper(List);
 
+  function List() {
     var _this;
 
     _classCallCheck(this, List);
@@ -63,7 +67,7 @@ function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(List)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       toggle: false
@@ -77,11 +81,11 @@ function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderLink", function (item) {
       var classes = _this.props.classes;
-      return _react["default"].createElement(_Text["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         key: item.key,
         small: true,
         bottomTiny: true
-      }, _react["default"].createElement("a", {
+      }, /*#__PURE__*/_react["default"].createElement("a", {
         href: item.href,
         target: item.target,
         rel: item.rel,
@@ -92,20 +96,21 @@ function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderIcon", function (item) {
       var classes = _this.props.classes;
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.key,
         className: classes.iconWrapper,
         title: item.title
-      }, _react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: item.iconName,
         className: classes.icon,
         onClick: item.onClick,
-        colors: [_colors["default"].grey600]
+        colors: [_colors["default"].grey600],
+        ariaLabel: item.title
       }));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderCustom", function (item) {
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.key
       }, item.custom);
     });
@@ -128,21 +133,22 @@ function (_Component) {
           title = _this$props$list.title,
           items = _this$props$list.items,
           isMobile = _this$props.isMobile,
-          classes = _this$props.classes;
+          classes = _this$props.classes,
+          listClassName = _this$props.listClassName;
       var toggle = this.state.toggle;
       var isCollapsible = collapse || isMobile;
-      return _react["default"].createElement("div", null, _react["default"].createElement("div", {
+      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 : '')
-      }, _react["default"].createElement(_Text["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "span"
-      }, title), isCollapsible && _react["default"].createElement(_Icon["default"], {
+      }, 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)
-      })), _react["default"].createElement("div", {
-        className: "".concat(classes.list, " ").concat(toggle || !isCollapsible ? classes.toggle : '')
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(classes.list, " ").concat(toggle || !isCollapsible ? classes.toggle : '', " ").concat(listClassName)
       }, items.map(function (item) {
         return _this2.renderItem(item);
       })));
@@ -155,7 +161,8 @@ function (_Component) {
 List.propTypes = {
   classes: _propTypes["default"].object,
   list: _propTypes["default"].object,
-  isMobile: _propTypes["default"].bool
+  isMobile: _propTypes["default"].bool,
+  listClassName: _propTypes["default"].string
 };
 var _default = List;
 exports["default"] = _default;

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

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Footer styles matches the snapshot 1`] = `
+Object {
+  "bottomWrap": Object {
+    "borderTop": "1px solid #dddddd",
+    "paddingTop": 24,
+  },
+  "buttonMobile": Object {
+    "marginTop": 16,
+  },
+  "column": Object {
+    "paddingBottom": 16,
+    "paddingLeft": 12,
+    "paddingRight": 12,
+  },
+  "footer": Object {
+    "@media (min-width: 992px)": Object {
+      "padding": Array [
+        32,
+        0,
+        32,
+      ],
+    },
+    "backgroundColor": "#f5f5f8",
+    "padding": Array [
+      24,
+      0,
+      32,
+    ],
+  },
+  "footerBottom": Object {
+    "paddingLeft": 12,
+    "paddingRight": 12,
+  },
+  "footerWithoutColumns": Object {
+    "@media (min-width: 992px)": Object {
+      "padding": Array [
+        0,
+        0,
+        32,
+      ],
+    },
+    "backgroundColor": "#f5f5f8",
+    "padding": Array [
+      0,
+      0,
+      32,
+    ],
+  },
+  "link": Object {
+    "&:hover, &:focus, &:active": Object {
+      "color": "#777777",
+    },
+    "color": "#777777",
+    "cursor": "pointer",
+    "textDecoration": "none",
+  },
+  "list": Object {
+    "&:not(:first-child)": Object {
+      "marginLeft": 16,
+    },
+  },
+  "listElement": Object {
+    "&:first-child": Object {
+      "paddingLeft": 0,
+    },
+    "&: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,
+  },
+}
+`;
+
+exports[`FooterJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Footer/styles.js

@@ -33,6 +33,11 @@ var _default = {
     paddingRight: _spacing["default"].gutter,
     paddingBottom: _spacing["default"].small
   },
+  list: {
+    '&:not(:first-child)': {
+      marginLeft: _spacing["default"].small
+    }
+  },
   link: {
     color: _colors["default"].grey600,
     textDecoration: 'none',

package/build/Grid/Col/Col.js

@@ -5,29 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+var getClasses = function getClasses(size, data, classes) {
+  var string = '';
+  if (data.col) string += ' ' + classes["".concat(size).concat(data.col)];
+  if (data.offset) string += ' ' + classes["offset-".concat(size).concat(data.offset)];
+  if (data.push) string += ' ' + classes["push-".concat(size).concat(data.push)];
+  if (data.pull) string += ' ' + classes["pull-".concat(size).concat(data.pull)];
+  return string;
+};
+/** The Container component can receive different specifications for any of the breakpoint sizes. It needs to receive an object for the required size, and this object can specify a value for col (Col), offset, push and pull. */
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
-/** The Container component can receive different specifications for any of the breakpoint sizes. It needs to receive an object for the required size, and this object can specify a value for col (Col), offset, push and pull. */
 var Col = function Col(_ref) {
-  var children = _ref.children,
+  var classes = _ref.classes,
+      children = _ref.children,
       xxs = _ref.xxs,
       xs = _ref.xs,
       sm = _ref.sm,
@@ -37,19 +34,15 @@ var Col = function Col(_ref) {
       id = _ref.id,
       className = _ref.className,
       style = _ref.style;
-  var classes = (0, _styles["default"])();
-  var getClasses = (0, _react.useCallback)(function (size, data) {
-    var classNames = [data.col && classes["".concat(size).concat(data.col)], data.offset && classes["offset-".concat(size).concat(data.offset)], data.push && classes["push-".concat(size).concat(data.push)], data.pull && classes["pull-".concat(size).concat(data.pull)]].filter(Boolean);
-    return _classnames["default"].apply(void 0, _toConsumableArray(classNames));
-  }, [classes]);
-  return _react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classes.col, xxs && getClasses('xxs', xxs), xs && getClasses('xs', xs), sm && getClasses('sm', sm), md && getClasses('md', md), lg && getClasses('lg', lg), xl && getClasses('xl', xl), className),
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.col).concat(xxs ? getClasses('xxs', xxs, classes) : '').concat(xs ? getClasses('xs', xs, classes) : '').concat(sm ? getClasses('sm', sm, classes) : '').concat(md ? getClasses('md', md, classes) : '').concat(lg ? getClasses('lg', lg, classes) : '').concat(xl ? getClasses('xl', xl, classes) : '').concat(className ? " ".concat(className) : ''),
     id: id,
     style: style
   }, children);
 };
 
 Col.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
   children: _propTypes["default"].node,
 
   /** Specifications for a base window size (from 0px). */