@occmundial/occ-atomic 3.0.0-beta.60 → 3.0.0-beta.62

package/build/NavTab/NavTab.js

@@ -17,7 +17,7 @@ var _Flexbox = _interopRequireDefault(require("../Flexbox"));
 
 var _NavItem = _interopRequireDefault(require("../NavItem"));
 
-var _NavIcon = _interopRequireDefault(require("../NavIcon"));
+var _NavButton = _interopRequireDefault(require("../NavButton"));
 
 var _NavTop = _interopRequireDefault(require("../NavTop"));
 
@@ -112,7 +112,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 +148,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.icon || 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 +197,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 +224,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 +268,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 +282,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/Provider/MenuListProvider.js

@@ -0,0 +1,38 @@
+"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"] = MenuListProvider;
+exports.useMenuListContext = exports.MenuListContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 _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 MenuListContext = /*#__PURE__*/(0, _react.createContext)({
+  dense: false
+});
+exports.MenuListContext = MenuListContext;
+
+var useMenuListContext = function useMenuListContext() {
+  return (0, _react.useContext)(MenuListContext);
+}; // eslint-disable-next-line react/prop-types
+
+
+exports.useMenuListContext = useMenuListContext;
+
+function MenuListProvider(_ref) {
+  var children = _ref.children,
+      _ref$dense = _ref.dense,
+      dense = _ref$dense === void 0 ? false : _ref$dense;
+  return /*#__PURE__*/_react["default"].createElement(MenuListContext.Provider, {
+    value: {
+      dense: dense
+    }
+  }, children);
+}

package/build/index.js

@@ -88,6 +88,16 @@ var _Tab = _interopRequireDefault(require("./Tabs/Tab"));
 
 var _TabContent = _interopRequireDefault(require("./Tabs/TabContent"));
 
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+
+var _MenuUser = _interopRequireDefault(require("./MenuUser"));
+
+var _MenuList = _interopRequireDefault(require("./MenuList"));
+
+var _MenuDivider = _interopRequireDefault(require("./MenuDivider"));
+
+var _NavAvatarButton = _interopRequireDefault(require("./NavAvatarButton"));
+
 var _NavTab = _interopRequireDefault(require("./NavTab"));
 
 var _NavItem = _interopRequireDefault(require("./NavItem"));
@@ -126,6 +136,8 @@ var _Provider = _interopRequireDefault(require("./Provider"));
 
 var tokens = _interopRequireWildcard(require("./tokens"));
 
+var _module$exports;
+
 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 _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; }
@@ -134,7 +146,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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; }
 
-module.exports = _defineProperty({
+module.exports = (_module$exports = {
   Container: _Container["default"],
   Row: _Row["default"],
   Column: _Column["default"],
@@ -198,4 +210,4 @@ module.exports = _defineProperty({
   TabsProviderUncontrolled: _context.TabsProviderUncontrolled,
   Tab: _Tab["default"],
   TabContent: _TabContent["default"]
-}, "Menu", _Menu["default"]);
+}, _defineProperty(_module$exports, "Menu", _Menu["default"]), _defineProperty(_module$exports, "MenuItem", _MenuItem["default"]), _defineProperty(_module$exports, "MenuUser", _MenuUser["default"]), _defineProperty(_module$exports, "MenuList", _MenuList["default"]), _defineProperty(_module$exports, "MenuDivider", _MenuDivider["default"]), _defineProperty(_module$exports, "NavAvatarButton", _NavAvatarButton["default"]), _module$exports);