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

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/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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.60",
+  "version": "3.0.0-beta.61",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",

package/build/NavIcon/NavIcon.js

@@ -1,112 +0,0 @@
-"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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-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 _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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var NavIcon = /*#__PURE__*/function (_React$Component) {
-  _inherits(NavIcon, _React$Component);
-
-  var _super = _createSuper(NavIcon);
-
-  function NavIcon() {
-    _classCallCheck(this, NavIcon);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(NavIcon, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          selected = _this$props.selected,
-          label = _this$props.label,
-          onClick = _this$props.onClick,
-          direction = _this$props.direction,
-          className = _this$props.className,
-          testId = _this$props.testId,
-          id = _this$props.id,
-          iconName = _this$props.iconName,
-          white = _this$props.white;
-      var iconColor = white ? _colors["default"].bgWhite : _colors["default"].grey600;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.cont).concat(selected ? " ".concat(classes.selected) : '').concat(className ? " ".concat(className) : ''),
-        onClick: onClick,
-        "data-testid": testId,
-        id: id
-      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        display: "flex",
-        direction: direction,
-        justifyContent: "center",
-        alignItems: "center",
-        className: classes.flex
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: iconName,
-        colors: [iconColor]
-      }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        micro: true
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.text
-      }, label))));
-    }
-  }]);
-
-  return NavIcon;
-}(_react["default"].Component);
-
-NavIcon.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  selected: _propTypes["default"].bool,
-  iconName: _propTypes["default"].string.isRequired,
-  label: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  width: _propTypes["default"].number,
-  showBar: _propTypes["default"].bool,
-  direction: _propTypes["default"].oneOf(['col', 'row']),
-  className: _propTypes["default"].string,
-
-  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
-  testId: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  white: _propTypes["default"].bool
-};
-var _default = NavIcon;
-exports["default"] = _default;

package/build/NavIcon/styles.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-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"].xLarge,
-    cursor: 'pointer',
-    position: 'relative',
-    '&:hover $svg': {
-      fill: function fill(props) {
-        return props.white ? _colors["default"].bgWhite : _colors["default"].grey900;
-      },
-      opacity: function opacity(props) {
-        return props.white ? 0.6 : null;
-      }
-    },
-    '&:hover $text': {
-      color: function color(props) {
-        return props.white ? _colors["default"].white : _colors["default"].ink;
-      },
-      opacity: function opacity(props) {
-        return props.white ? 0.6 : null;
-      }
-    },
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      width: '100%',
-      height: 3,
-      bottom: 0,
-      left: 0,
-      background: 'transparent',
-      transition: '0.3s all'
-    }
-  },
-  flex: {
-    height: _spacing["default"].xLarge
-  },
-  selected: {
-    '& $svg, &:hover $svg': {
-      fill: function fill(props) {
-        return props.white ? _colors["default"].bgWhite : _colors["default"].prim;
-      }
-    },
-    '& $text, &:hover $text': {
-      color: function color(props) {
-        return props.white ? _colors["default"].white : _colors["default"].prim;
-      }
-    },
-    '&:after': {
-      background: function background(props) {
-        return props.showBar ? props.white ? _colors["default"].sec : _colors["default"].prim : null;
-      }
-    }
-  },
-  text: {
-    color: function color(props) {
-      return props.white ? _colors["default"].white : _colors["default"].inkLight;
-    },
-    marginLeft: function marginLeft(props) {
-      return props.direction !== 'col' ? _spacing["default"].xTiny : null;
-    },
-    textTransform: 'uppercase',
-    transition: '0.3s all'
-  }
-};
-exports["default"] = _default;