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

package/build/Drawer/Drawer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Drawer;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Drawer(_ref) {
+  var classes = _ref.classes,
+      header = _ref.header,
+      children = _ref.children,
+      testId = _ref.testId,
+      show = _ref.show,
+      _onAnimationEnd = _ref.onAnimationEnd;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.container, " ").concat(show ? classes.show : classes.hide),
+    onAnimationEnd: function onAnimationEnd(e) {
+      if (_onAnimationEnd) _onAnimationEnd(e);
+    },
+    "data-testid": testId
+  }, header, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.content
+  }, children));
+}
+
+;
+Drawer.propTypes = {
+  classes: _propTypes["default"].object,
+  header: _propTypes["default"].node,
+  children: _propTypes["default"].node,
+  testId: _propTypes["default"].string,
+  show: _propTypes["default"].bool,
+  onAnimationEnd: _propTypes["default"].func
+};

package/build/{Header/Nav/Nav.js → Drawer/index.js}

@@ -11,12 +11,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Icon = _interopRequireDefault(require("../../Icon"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+var _styles = _interopRequireDefault(require("./styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 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); } }
@@ -37,59 +43,68 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var Nav = /*#__PURE__*/function (_React$Component) {
-  _inherits(Nav, _React$Component);
+var Drawer = (0, _reactJss["default"])(_styles["default"])(_Drawer["default"]);
+
+var DrawerPortal = /*#__PURE__*/function (_React$Component) {
+  _inherits(DrawerPortal, _React$Component);
+
+  var _super = _createSuper(DrawerPortal);
 
-  var _super = _createSuper(Nav);
+  function DrawerPortal(props) {
+    var _this;
 
-  function Nav() {
-    _classCallCheck(this, Nav);
+    _classCallCheck(this, DrawerPortal);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.state = {
+      mount: false
+    };
+    _this.onAnimationEnd = _this.onAnimationEnd.bind(_assertThisInitialized(_this));
+    return _this;
   }
 
-  _createClass(Nav, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn('DEPRECATED: The Nav component will be removed soon. Please look for another solution.');
+  _createClass(DrawerPortal, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      if (props.show && !this.props.show) {
+        this.setState({
+          mount: true
+        });
       }
     }
+  }, {
+    key: "onAnimationEnd",
+    value: function onAnimationEnd() {
+      this.setState({
+        mount: false
+      });
+    }
   }, {
     key: "render",
     value: function render() {
+      var mount = this.state.mount;
       var _this$props = this.props,
-          classes = _this$props.classes,
-          active = _this$props.active,
-          navigate = _this$props.navigate,
-          buttons = _this$props.buttons;
-      return /*#__PURE__*/_react["default"].createElement("ul", {
-        className: classes.menu
-      }, buttons.map(function (button) {
-        return /*#__PURE__*/_react["default"].createElement("li", {
-          key: button.id,
-          onClick: navigate,
-          className: "".concat(classes.listItem, " ").concat(active == button.id ? classes.activeItem : ''),
-          id: button.id
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-          iconName: button.icon,
-          colors: active == button.id ? [_colors["default"].white] : [_colors["default"].darkBlue],
-          className: classes.icon
-        }), /*#__PURE__*/_react["default"].createElement("a", {
-          className: classes.listAnchor
-        }, button.label));
+          container = _this$props.container,
+          show = _this$props.show;
+
+      var DrawerComponent = /*#__PURE__*/_react["default"].createElement(Drawer, _extends({}, this.props, {
+        onAnimationEnd: !show && mount ? this.onAnimationEnd : null
       }));
+
+      if (container) {
+        return mount ? /*#__PURE__*/_reactDom["default"].createPortal(DrawerComponent, container) : null;
+      } else {
+        return mount ? DrawerComponent : null;
+      }
     }
   }]);
 
-  return Nav;
+  return DrawerPortal;
 }(_react["default"].Component);
 
-Nav.propTypes = {
-  classes: _propTypes["default"].object,
-  active: _propTypes["default"].string,
-  navigate: _propTypes["default"].func,
-  buttons: _propTypes["default"].array
+DrawerPortal.propTypes = {
+  show: _propTypes["default"].bool,
+  container: _propTypes["default"].object
 };
-var _default = Nav;
+var _default = DrawerPortal;
 exports["default"] = _default;

package/build/Drawer/index.test.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+var _styles = _interopRequireDefault(require("./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 reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe('Drawer', function () {
+  it('should render', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      classes: classes,
+      show: true
+    }, "Test"));
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.text()).toContain('Test');
+  });
+  it('should apply the correct classes based on the show prop', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      classes: classes,
+      show: true
+    }, "Test"));
+    expect(wrapper.find('.show').exists()).toBe(true);
+    expect(wrapper.find('.hide').exists()).toBe(false);
+    wrapper.setProps({
+      show: false
+    });
+    expect(wrapper.find('.show').exists()).toBe(false);
+    expect(wrapper.find('.hide').exists()).toBe(true);
+  });
+  it('should call onAnimationEnd when animation ends', function () {
+    var onAnimationEndMock = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+      classes: classes,
+      show: true,
+      onAnimationEnd: onAnimationEndMock
+    }, "Test"));
+    wrapper.find('div.container').simulate('animationEnd');
+    expect(onAnimationEndMock).toHaveBeenCalled();
+  });
+});

package/build/Drawer/styles.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  '@global': {
+    body: {
+      overflow: 'hidden'
+    }
+  },
+  '@keyframes expand': {
+    from: {
+      height: 0
+    },
+    to: {
+      height: '100%'
+    }
+  },
+  '@keyframes collapse': {
+    from: {
+      height: '100%'
+    },
+    to: {
+      height: 0
+    }
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    zIndex: 1000,
+    backgroundColor: _colors["default"].bg.surface["default"],
+    overflow: 'hidden',
+    boxShadow: _shadows["default"]['elevation-elevation-3']
+  },
+  show: {
+    animation: 'expand 0.4s cubic-bezier(.4,0,.2,1)'
+  },
+  hide: {
+    animation: 'collapse 0.4s cubic-bezier(.4,0,.2,1)'
+  },
+  content: {
+    padding: _spacing["default"]['size-3']
+  }
+};
+exports["default"] = _default;

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

@@ -36,7 +36,7 @@ Object {
     "font": "400 14px/1.5 'OccText', sans-serif",
   },
   "highlighted": Object {
-    "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "background": "rgba(8, 60, 174, 0.05)",
     "font": "400 16px/1.5 'OccText', sans-serif",
   },
   "icon": Object {
@@ -47,10 +47,10 @@ Object {
       "& > $rightText": Object {
         "color": "#080D39",
       },
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "background": "rgba(8, 60, 174, 0.1)",
     },
     "&:hover": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.05)",
+      "background": "rgba(8, 60, 174, 0.05)",
     },
     "alignItems": "center",
     "borderRadius": "4px",
@@ -77,9 +77,9 @@ Object {
   },
   "onFocus": Object {
     "&:hover": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "background": "rgba(8, 60, 174, 0.1)",
     },
-    "background": "hsl(221 91.2% 35.7% / 0.1)",
+    "background": "rgba(8, 60, 174, 0.1)",
   },
   "right": Object {
     "marginLeft": "16px",

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

@@ -2,11 +2,11 @@
 
 exports[`FAB matches the snapshot 1`] = `
 <button
-  className="Button-btn-0-1-28 Button-btn-0-1-1 Button-tertiary-0-1-23 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
+  className="Button-btn-0-1-22 Button-btn-0-1-1 Button-tertiary-0-1-27 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
   disabled={false}
 >
   <span
-    className="Button-cont-0-1-29 Button-cont-0-1-2"
+    className="Button-cont-0-1-23 Button-cont-0-1-2"
   >
     <span
       className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"

package/build/Footer/Footer.js

@@ -1,118 +1,97 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Grid = _interopRequireDefault(require("../Grid"));
-
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
+var _Grid = _interopRequireDefault(require("./../Grid"));
 
 var _List = _interopRequireDefault(require("./List"));
 
-var _Text = _interopRequireDefault(require("../Text"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _Button = _interopRequireDefault(require("../Button"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var itemTypes = {
   link: 'link',
   icon: 'icon',
   custom: 'custom'
 };
-/** Customisable footer component. This component can receive an array of columns. Those columns can contain an array of lists, and those lists can contain a title and and array of items. The items are objects that must define a type (one of 'link,', 'icon' or 'cursom').
-	It can also receive a copy string, to show the copyright data, and an array of links to show above it.
-*/
 
 var Footer = function Footer(_ref) {
-  var classes = _ref.classes,
-      columns = _ref.columns,
-      winWidth = _ref.winWidth,
-      bottomLinks = _ref.bottomLinks,
+  var _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
+      _ref$bottomLinks = _ref.bottomLinks,
+      bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
       copyText = _ref.copyText,
       aux = _ref.aux,
-      bottomItem = _ref.bottomItem,
-      listClassName = _ref.listClassName;
-  var text = aux.text,
-      icon = aux.icon,
-      href = aux.href,
-      target = aux.target,
-      iconRight = aux.iconRight,
-      auxClassName = aux.className;
-  var isMobile = winWidth < _grid["default"].sm;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: columns.length > 0 ? classes.footer : classes.footerWithoutColumns
+      listClassName = _ref.listClassName,
+      isFluid = _ref.isFluid,
+      topElement = _ref.topElement,
+      bottomLinksClassName = _ref.bottomLinksClassName,
+      sectionDivider = _ref.sectionDivider,
+      classes = _ref.classes,
+      footerDivider = _ref.footerDivider,
+      containerDivider = _ref.containerDivider,
+      transparent = _ref.transparent;
+  return /*#__PURE__*/_react["default"].createElement("footer", {
+    className: "".concat(transparent ? classes.footerTransparent : classes.footer).concat(footerDivider ? " ".concat(classes.borderTop) : '')
   }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    fluid: winWidth < _grid["default"].xl
-  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"].Row, null, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    direction: isMobile ? 'col' : 'row',
+    fluid: isFluid,
+    className: "".concat(classes.footerContainer).concat(containerDivider ? " ".concat(classes.borderTop) : '')
+  }, /*#__PURE__*/(0, _react.isValidElement)(topElement) ? topElement : '', columns.length ? /*#__PURE__*/_react["default"].createElement("section", {
     className: classes.column
   }, columns.map(function (column, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-      key: index,
-      flex: "1",
-      className: !isMobile ? classes.list : ''
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index
     }, column.map(function (list) {
       return /*#__PURE__*/_react["default"].createElement(_List["default"], {
-        list: list,
-        isMobile: isMobile,
         key: list.key,
+        list: list,
         listClassName: listClassName
       });
     }));
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.footerBottom
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    alignItems: "start",
-    className: classes.bottomWrap,
-    direction: isMobile ? 'col' : 'row'
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1"
-  }, aux && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    href: href,
-    target: target,
-    icon: icon,
-    iconRight: iconRight,
-    size: "md",
-    theme: "ghostPink",
-    className: "".concat(isMobile ? classes.buttonMobile : '', " ").concat(auxClassName)
-  }, text), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    small: true,
-    mid: true,
-    bottomTiny: true,
-    tag: "div"
-  }, bottomLinks.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: isMobile ? classes.mobileListElement : classes.listElement,
+  })) : '', sectionDivider ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.divider
+  }) : '', /*#__PURE__*/_react["default"].createElement("section", {
+    className: classes.bottomSection
+  }, aux ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.auxContainer
+  }, aux.badges ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.badgesContainer
+  }, aux.badges) : '', aux.socialMedia ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.socialMediaContainer
+  }, aux.socialMedia) : '', aux.extraContent) : '', /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.bottomContainer
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.bottomLinksContainer, " ").concat(bottomLinksClassName)
+  }, bottomLinks.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: item.key
-    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-      tag: "label",
-      small: true,
-      mid: true,
-      testId: item.testId
+    }, index === 0 || index === bottomLinks.length ? '' : /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.linkDivider
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.listElement
     }, /*#__PURE__*/_react["default"].createElement("a", {
       className: classes.link,
       href: item.href,
       target: item.target,
       rel: item.rel,
-      onClick: item.onClick
+      onClick: item.onClick,
+      tabIndex: 0
     }, item.text)));
-  })), copyText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    small: true,
-    mid: true
-  }, copyText)), bottomItem)))));
+  })), copyText && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.copyright
+  }, copyText)))));
 };
 
 var columnPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -145,32 +124,47 @@ Footer.propTypes = {
   /** Array of links to render at the bottom. */
   bottomLinks: _propTypes["default"].array,
 
-  /** Custom component to render on the bottom left. */
-  customBottom: _propTypes["default"].node,
-
   /** String or component to show as the copyright label. */
   copyText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
 
   /** Object to implement an auxiliar button on the bottom right. */
   aux: _propTypes["default"].shape({
-    text: _propTypes["default"].string,
-    icon: _propTypes["default"].string,
-    href: _propTypes["default"].string,
-    target: _propTypes["default"].string,
-    iconRight: _propTypes["default"].string
+    badges: _propTypes["default"].node,
+    socialMedia: _propTypes["default"].node,
+    extraContent: _propTypes["default"].node
   }),
 
   /** Custom component to render on the bottom right, at the end of the footer */
   bottomItem: _propTypes["default"].node,
 
   /** Footer list className.  */
-  listClassName: _propTypes["default"].string
+  listClassName: _propTypes["default"].string,
+  isFluid: _propTypes["default"].bool,
+
+  /** Custom component to render at the top of the footer, commonly used for brand logo */
+  topElement: _propTypes["default"].node,
+
+  /** Custom classname for bottomLinks container. */
+  bottomLinksClassName: _propTypes["default"].string,
+
+  /** Flag to display an horizontal line between sections */
+  sectionDivider: _propTypes["default"].bool,
+
+  /** Flag to display a border top in footer element */
+  footerDivider: _propTypes["default"].bool,
+
+  /** Flag to display a border top in footer container child */
+  containerDivider: _propTypes["default"].bool,
+
+  /** Flag to set transparent background color to footer element */
+  transparent: _propTypes["default"].bool
 };
 Footer.defaultProps = {
   bottomLinks: [],
-  columns: []
+  columns: [],
+  footerDivider: false,
+  containerDivider: false,
+  transparent: false
 };
-
-var _default = (0, _WindowSize["default"])(Footer);
-
+var _default = Footer;
 exports["default"] = _default;