@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.61

package/build/NavButton/styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  cont: {
+    width: function width(props) {
+      return props.width ? props.width : null;
+    },
+    display: 'inline-block',
+    height: _spacing["default"]['size-9'],
+    cursor: 'pointer',
+    position: 'relative',
+    '& $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].text.white.secondary : _colors["default"].text.corp.secondary;
+      }
+    },
+    '&:hover $svg, &:focus $svg, &:active $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].text.white.primary : _colors["default"].text.corp.primary;
+      }
+    },
+    '&:hover $text, &:focus $text, &:active $text': {
+      color: function color(props) {
+        return props.white ? _colors["default"].text.white.primary : _colors["default"].text.corp.primary;
+      }
+    },
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      width: '100%',
+      height: 3,
+      bottom: 0,
+      left: 0,
+      background: 'transparent',
+      transition: '0.3s all'
+    }
+  },
+  flex: {
+    height: _spacing["default"]['size-9']
+  },
+  selected: {
+    '& $svg, &:hover $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].text.white.primary : _colors["default"].text.corp.primary;
+      }
+    },
+    '& $text, &:hover $text': {
+      color: function color(props) {
+        return props.white ? _colors["default"].text.white.primary : _colors["default"].text.corp.primary;
+      }
+    },
+    '&:after': {
+      background: function background(props) {
+        return props.showBar ? _colors["default"].border.accent : null;
+      }
+    }
+  },
+  text: {
+    color: function color(props) {
+      return props.white ? _colors["default"].text.white.secondary : _colors["default"].text.corp.secondary;
+    },
+    marginLeft: function marginLeft(props) {
+      return props.direction !== 'col' ? _spacing["default"]['size-2'] : null;
+    },
+    transition: '0.3s all'
+  }
+};
+exports["default"] = _default;

package/build/NavItem/styles.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -32,11 +32,11 @@ var _default = {
   notification: {
     display: 'inline-block',
     borderRadius: '50%',
-    width: _spacing["default"].tiny,
-    height: _spacing["default"].tiny,
+    width: _spacing["default"]['size-2'],
+    height: _spacing["default"]['size-2'],
     backgroundColor: _colors["default"].error,
     marginBottom: 1,
-    marginLeft: _spacing["default"].xTiny
+    marginLeft: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

package/build/NavTab/NavTab.js

@@ -17,7 +17,9 @@ var _Flexbox = _interopRequireDefault(require("../Flexbox"));
 
 var _NavItem = _interopRequireDefault(require("../NavItem"));
 
-var _NavIcon = _interopRequireDefault(require("../NavIcon"));
+var _NavButton = _interopRequireDefault(require("../NavButton"));
+
+var _NavAvatarButton = _interopRequireDefault(require("../NavAvatarButton"));
 
 var _NavTop = _interopRequireDefault(require("../NavTop"));
 
@@ -112,7 +114,7 @@ var NavTab = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderItem",
     value: function renderItem(item) {
-      if (item.type == 'link') return this.renderLink(item);else if (item.type == 'dropdownLink') return this.renderDropdownLink(item);else if (item.type == 'button') return this.renderButton(item);else if (item.type == 'icon') return this.renderIcon(item);else if (item.type == 'logo') return this.renderLogo(item);else if (item.type == 'custom') return this.renderCustom(item);
+      if (item.type == 'link') return this.renderLink(item);else if (item.type == 'dropdownLink') return this.renderDropdownLink(item);else if (item.type == 'button') return this.renderButton(item);else if (item.type == 'navButton') return this.renderIcon(item);else if (item.type == 'logo') return this.renderLogo(item);else if (item.type == 'custom') return this.renderCustom(item);
     }
   }, {
     key: "renderLink",
@@ -148,21 +150,25 @@ var NavTab = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderButton",
     value: function renderButton(item) {
-      var classes = this.props.classes;
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          blue = _this$props4.blue;
       return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+        theme: blue ? "ghostWhite" : "ghostGrey",
+        size: item.iconLeft || item.iconRight ? 'lg' : 'md',
         className: classes.button
       }, item), item.text);
     }
   }, {
     key: "renderIcon",
     value: function renderIcon(item) {
-      var _this$props4 = this.props,
-          classes = _this$props4.classes,
-          blue = _this$props4.blue;
+      var _this$props5 = this.props,
+          classes = _this$props5.classes,
+          blue = _this$props5.blue;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.iconWrap,
         key: item.key
-      }, /*#__PURE__*/_react["default"].createElement(_NavIcon["default"], _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_NavButton["default"], _extends({
         className: classes.icon,
         white: blue
       }, item)));
@@ -193,19 +199,20 @@ var NavTab = /*#__PURE__*/function (_React$Component) {
       var _this$state = this.state,
           show = _this$state.show,
           currentScroll = _this$state.currentScroll;
-      var _this$props5 = this.props,
-          classes = _this$props5.classes,
-          blue = _this$props5.blue,
-          left = _this$props5.left,
-          right = _this$props5.right,
-          center = _this$props5.center,
-          flexCenter = _this$props5.flexCenter,
-          top = _this$props5.top,
-          fixed = _this$props5.fixed,
-          bottom = _this$props5.bottom,
-          className = _this$props5.className,
-          winWidth = _this$props5.winWidth,
-          zIndex = _this$props5.zIndex;
+      var _this$props6 = this.props,
+          classes = _this$props6.classes,
+          blue = _this$props6.blue,
+          left = _this$props6.left,
+          right = _this$props6.right,
+          center = _this$props6.center,
+          flexCenter = _this$props6.flexCenter,
+          top = _this$props6.top,
+          fixed = _this$props6.fixed,
+          bottom = _this$props6.bottom,
+          className = _this$props6.className,
+          winWidth = _this$props6.winWidth,
+          zIndex = _this$props6.zIndex,
+          isResponsive = _this$props6.isResponsive;
       var isFluid = winWidth < _grid["default"].xl;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.container).concat(fixed ? " ".concat(classes.fixed, " ").concat(show ? classes.show : classes.hide).concat(currentScroll > 0 ? " ".concat(classes.isScrolled) : '').concat(bottom ? " ".concat(classes.bottom) : '') : '').concat(className ? " ".concat(className) : ''),
@@ -219,7 +226,7 @@ var NavTab = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.nav, " ").concat(blue ? classes.blue : classes.white)
       }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        className: classes.grid,
+        className: classes.grid + (isResponsive ? " ".concat(classes.gridFluid) : ''),
         fluid: isFluid
       }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
@@ -263,7 +270,7 @@ var NavTab = /*#__PURE__*/function (_React$Component) {
 
 var positionPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].shape({
   key: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  type: _propTypes["default"].oneOf(['button', 'link', 'dropdownLink', 'icon', 'custom', 'logo']),
+  type: _propTypes["default"].oneOf(['button', 'link', 'dropdownLink', 'navButton', 'custom', 'logo']),
   text: _propTypes["default"].string,
   onClick: _propTypes["default"].func,
   selected: _propTypes["default"].bool,
@@ -277,36 +284,44 @@ var positionPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].shap
 NavTab.propTypes = {
   classes: _propTypes["default"].object.isRequired,
 
-  /** Array of items to display in the left position. */
+  /** Defines the components on the left side of the navigation bar. */
   left: positionPropTypes,
 
-  /** Array of items to display in the right position. */
+  /** Defines the components on the right side of the navigation bar. */
   right: positionPropTypes,
 
-  /** Array of items to display in the center position. */
+  /** Defines the components on the center of the navigation bar. */
   center: positionPropTypes,
 
-  /** Array of items to display in a flexible center position. */
+  /** Defines the components of the navigation bar. */
   flexCenter: positionPropTypes,
 
-  /** Array of items to display in the top position. */
+  /** [Deprecated] Defines the Nav Top links. */
   top: positionPropTypes,
 
-  /** Defines the theme of the Navtab as blue. */
+  /** Sets blue theme. */
   blue: _propTypes["default"].bool,
 
-  /** Defines if the NavTab will be fixed to the top. */
+  /** Sets the NavTab to a fixed position at the top. */
   fixed: _propTypes["default"].bool,
 
-  /** The NavTab will dissapear when scrolling down, and appear when scrolling up. */
+  /** Hides the nav on scroll. */
   hideOnScroll: _propTypes["default"].bool,
 
   /** Fixes the NavTab to the bottom of the screen (you have to also set fixed as true). */
   bottom: _propTypes["default"].bool,
 
-  /** Implement a custom zIndex value (default is 999). */
+  /** Specifies the nav z-index (defaults to 999). */
   zIndex: _propTypes["default"].number,
-  className: _propTypes["default"].string
+
+  /** Adds classes to nav container. */
+  className: _propTypes["default"].string,
+
+  /** [Deprecated] Adds a simple responsive padding. */
+  isFluid: _propTypes["default"].bool,
+
+  /** Adds a responsive padding. */
+  isResponsive: _propTypes["default"].bool
 };
 
 var _default = (0, _WindowSize["default"])(NavTab);

package/build/NavTab/styles.js

@@ -7,14 +7,21 @@ exports["default"] = void 0;
 
 var _hexRgba = _interopRequireDefault(require("hex-rgba"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _shadows = _interopRequireDefault(require("../subatomic/shadows"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _shadows = _interopRequireDefault(require("../subatomic/shadows"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _gridResponsive;
 
 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 nav = _colors["default"].nav;
 var _default = {
   container: {
     width: '100%',
@@ -35,7 +42,7 @@ var _default = {
     marginTop: 0
   },
   hide: {
-    marginTop: -_spacing["default"].xLarge,
+    marginTop: -_spacing["default"]['size-9'],
     '& $nav': {
       boxShadow: 'none !important'
     }
@@ -45,14 +52,14 @@ var _default = {
       boxShadow: _shadows["default"].lvl3
     },
     '& $blue': {
-      background: (0, _hexRgba["default"])(_colors["default"].primDark, 95)
+      background: (0, _hexRgba["default"])(nav.bg.inverse, 95)
     },
     '& $white': {
-      background: (0, _hexRgba["default"])(_colors["default"].bgWhite, 95)
+      background: (0, _hexRgba["default"])(nav.bg["default"], 95)
     }
   },
   nav: {
-    height: _spacing["default"].xLarge,
+    height: _spacing["default"]['size-9'],
     transition: '0.3s all',
     boxShadow: _shadows["default"].lvl1
   },
@@ -61,57 +68,82 @@ var _default = {
     height: '100%',
     position: 'relative'
   },
+  gridResponsive: (_gridResponsive = {}, _defineProperty(_gridResponsive, "@media screen and (min-width:".concat(_grid["default"].xxs, "px)"), {
+    padding: '0 12'
+  }), _defineProperty(_gridResponsive, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: '0 16'
+  }), _defineProperty(_gridResponsive, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    padding: '0 24'
+  }), _defineProperty(_gridResponsive, "@media screen and (min-width:".concat(_grid["default"].md, "px)"), {
+    padding: '0 40'
+  }), _defineProperty(_gridResponsive, "@media screen and (min-width:".concat(_grid["default"].lg, "px)"), {
+    margin: '0 auto',
+    maxWidth: _grid["default"].lg - 60
+  }), _defineProperty(_gridResponsive, "@media screen and (min-width:".concat(_grid["default"].xl, "px)"), {
+    margin: '0 auto',
+    maxWidth: _grid["default"].xl - 60
+  }), _gridResponsive),
   tab: {
     height: '100%'
   },
   blue: {
-    background: _colors["default"].primDark
+    background: nav.bg.inverse
   },
   white: {
-    background: _colors["default"].bgWhite
+    background: nav.bg["default"]
   },
   left: {
-    '& $button, & $iconWrap': {
-      marginRight: _spacing["default"].base
+    '& $button': {
+      marginRight: _spacing["default"]['size-5']
+    },
+    '& $iconWrap': {
+      marginRight: _spacing["default"]['size-2']
     },
     '& $button:first-child, & $iconWrap:first-child': {
       marginLeft: 0
     },
     '& $navItem': {
-      marginRight: _spacing["default"].small
+      marginRight: _spacing["default"]['size-4']
     },
     '& $navItem:first-child': {
       marginLeft: 0
     },
-    '& $logo': {
-      marginRight: _spacing["default"].medium
-    }
+    '& $logo': _defineProperty({}, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+      marginRight: _spacing["default"]['size-7']
+    })
   },
   right: {
-    '& $button, & $iconWrap': {
-      marginLeft: _spacing["default"].base
+    '& $button': {
+      marginLeft: _spacing["default"]['size-1']
+    },
+    '& $iconWrap': {
+      marginLeft: _spacing["default"]['size-2']
     },
     '& $button:first-child, & $iconWrap:first-child': {
       marginRight: 0
     },
     '& $navItem': {
-      marginLeft: _spacing["default"].small
+      marginLeft: _spacing["default"]['size-4']
     },
     '& $navItem:first-child': {
       marginRight: 0
     },
-    '& $logo': {
-      marginLeft: _spacing["default"].medium
-    }
+    '& $logo': _defineProperty({}, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+      marginRight: _spacing["default"]['size-7']
+    })
   },
   center: {
     position: 'absolute',
     left: '50%',
     top: '50%',
     transform: 'translate(-50%, -50%)',
-    '& $button, & $iconWrap, & $logo': {
-      marginLeft: _spacing["default"].gutter,
-      marginRight: _spacing["default"].gutter
+    '& $button, & $logo': {
+      marginLeft: _spacing["default"]['size-1'],
+      marginRight: _spacing["default"]['size-1']
+    },
+    '& $iconWrap': {
+      marginLeft: _spacing["default"]['size-2'],
+      marginRight: _spacing["default"]['size-2']
     },
     '& $button:first-child, & $iconWrap:first-child': {
       marginLeft: 0
@@ -120,8 +152,8 @@ var _default = {
       marginRight: 0
     },
     '& $navItem': {
-      marginLeft: _spacing["default"].tiny,
-      marginRight: _spacing["default"].tiny
+      marginLeft: _spacing["default"]['size-2'],
+      marginRight: _spacing["default"]['size-2']
     },
     '& $navItem:first-child': {
       marginRight: 0
@@ -130,11 +162,14 @@ var _default = {
   button: {},
   navItem: {},
   iconWrap: {
-    display: 'inline-block'
+    display: 'inline-block',
+    '& > div': {
+      padding: '0 8px'
+    }
   },
   icon: {},
   arrow: {
-    marginBottom: -3,
+    marginBottom: -_spacing["default"]['size-1'],
     transition: '0.3s all'
   },
   arrowUp: {

package/build/NavTop/styles.js

@@ -7,13 +7,13 @@ exports["default"] = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   top: {
-    height: _spacing["default"].medium
+    height: _spacing["default"]['size-6']
   },
   blue: {
     background: _colors["default"].prim
@@ -26,8 +26,8 @@ var _default = {
   },
   navItem: {
     position: 'relative',
-    marginRight: _spacing["default"].small,
-    marginLeft: _spacing["default"].small,
+    marginRight: _spacing["default"]['size-4'],
+    marginLeft: _spacing["default"]['size-4'],
     '&:first-child': {
       marginLeft: 0
     },
@@ -38,10 +38,10 @@ var _default = {
       content: '""',
       display: 'block',
       width: 1,
-      height: _spacing["default"].small,
+      height: _spacing["default"]['size-4'],
       background: _colors["default"].grey400,
       position: 'absolute',
-      right: -_spacing["default"].small,
+      right: -_spacing["default"]['size-4'],
       top: '50%',
       transform: 'translateY(-50%)'
     },

package/build/OrderBy/OrderBy.js

@@ -150,7 +150,8 @@ var OrderBy = /*#__PURE__*/function (_React$Component) {
           key: option.value,
           onClick: function onClick() {
             _this2.onChange(option.value);
-          }
+          },
+          id: option.id || ''
         }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           className: option.value === selected ? classes.link : '',
           value: option.value

package/build/Pager/Page/Page.js

@@ -15,11 +15,15 @@ var Page = function Page(_ref) {
   var classes = _ref.classes,
       onClick = _ref.onClick,
       selected = _ref.selected,
-      page = _ref.page;
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    className: "".concat(classes.li).concat(selected ? " ".concat(classes.active) : ''),
-    tabIndex: "0",
-    onClick: onClick
+      page = _ref.page,
+      disabled = _ref.disabled,
+      id = _ref.id;
+  return /*#__PURE__*/_react["default"].createElement("button", {
+    className: "".concat(classes.page).concat(selected ? " ".concat(classes.active) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(!onClick ? " ".concat(classes["static"]) : ''),
+    disabled: disabled,
+    tabIndex: onClick ? 0 : -1,
+    onClick: onClick,
+    id: id ? "".concat(id).concat(page) : undefined
   }, page);
 };
 
@@ -27,7 +31,8 @@ Page.propTypes = {
   classes: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   selected: _propTypes["default"].bool,
-  page: _propTypes["default"].number
+  page: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  disabled: _propTypes["default"].bool
 };
 var _default = Page;
 exports["default"] = _default;

package/build/Pager/Page/Page.test.js

@@ -22,31 +22,35 @@ var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Page", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
     expect(wrapper).toMatchSnapshot();
   });
-  it('renders the li', function () {
+  it('renders the page element', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
-    expect(wrapper.find('.li').length).toBe(1);
+    expect(wrapper.find('.page').length).toBe(1);
   });
-  it('shows the li as active', function () {
+  it('shows the page element as active', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
-    expect(wrapper.find('.li').hasClass('active')).toBe(false);
+    expect(wrapper.find('.page').hasClass('active')).toBe(false);
     wrapper.setProps({
       selected: true
     });
-    expect(wrapper.find('.li').hasClass('active')).toBe(true);
+    expect(wrapper.find('.page').hasClass('active')).toBe(true);
   });
   it('calls the onClick function', function () {
     var onClick = jest.fn();
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
       onClick: onClick,
-      classes: classes
+      classes: classes,
+      page: 1
     }));
     wrapper.simulate('click');
     expect(onClick.mock.calls.length).toBe(1);

package/build/Pager/Page/__snapshots__/Page.test.js.snap

@@ -5,22 +5,46 @@ exports[`Page matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Page styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "background": "#1476fb !important",
-    "color": "#ffffff",
+    "background": "#0059CD !important",
+    "color": "#fff !important",
+    "zIndex": 1,
   },
-  "li": Object {
+  "disabled": Object {
+    "background": "transparent",
+    "color": "#878A9F",
+    "pointerEvents": "none",
+  },
+  "page": Object {
+    "&:active": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.1)",
+    },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    },
     "&:hover": Object {
-      "background": "#ECECEE",
+      "background": "hsl(234 75.4% 12.7% / 0.05)",
     },
-    "borderRadius": "13px",
+    "alignItems": "center",
+    "background": "transparent",
+    "border": "none",
+    "borderRadius": "4px",
+    "color": "#5A5D7B",
     "cursor": "pointer",
-    "display": "inline-block",
-    "marginLeft": "4px",
-    "marginRight": "4px",
-    "outline": "0",
-    "padding": "2px 11px",
+    "display": "flex",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+    "gap": "8px",
+    "justifyContent": "center",
+    "minWidth": 45,
+    "outline": "none",
+    "padding": Array [
+      "12px",
+      "8px",
+    ],
     "transition": "0.3s all",
   },
+  "static": Object {
+    "pointerEvents": "none",
+  },
 }
 `;