@occmundial/occ-atomic 2.0.0-beta.0 → 2.0.0-beta.2

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

@@ -34,7 +34,7 @@ var Col = function Col(_ref) {
       id = _ref.id,
       className = _ref.className,
       style = _ref.style;
-  return _react["default"].createElement("div", {
+  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

package/build/Grid/Col/Col.test.js

@@ -21,7 +21,7 @@ var reduceClasses = function reduceClasses(prev, curr) {
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Col", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Col["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Col["default"], {
       xs: {
         col: 12
       },
@@ -30,7 +30,7 @@ describe("Col", function () {
     expect(wrapper).toMatchSnapshot();
   });
   it('matches the classes', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Col["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Col["default"], {
       xxs: {
         col: 6,
         offset: 3,
@@ -44,7 +44,7 @@ describe("Col", function () {
 });
 describe("ColJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       xs: {
         col: 12
       }