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

package/build/Header/Menu/Menu.test.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Menu = _interopRequireDefault(require("./Menu"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+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, {});
+var buttons = [{
+  id: 'item1',
+  href: '#',
+  label: 'Item 1'
+}, {
+  id: 'item2',
+  href: '#',
+  label: 'Item 2'
+}, {
+  id: 'item3',
+  href: '#',
+  label: 'Item 3'
+}, "separator", {
+  id: 'item4',
+  href: '#',
+  label: 'Item 4',
+  type: 'signOut'
+}];
+describe("Menu", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+      classes: classes,
+      buttons: buttons
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('renders the label', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+      classes: classes,
+      label: "Menu",
+      buttons: buttons
+    }));
+    expect(wrapper.find('.label').text()).toBe('Menu');
+  });
+  it('toggles the menu', function () {
+    var propagation = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+      classes: classes,
+      buttons: buttons
+    }));
+    expect(wrapper.find('.dropdownMenu').hasClass('dropdownMenuOpen')).toBe(false);
+    wrapper.find('.btnMenu').simulate('click', {
+      stopPropagation: propagation
+    });
+    expect(wrapper.find('.dropdownMenu').hasClass('dropdownMenuOpen')).toBe(true);
+  });
+  it('renders all the items', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+      classes: classes,
+      buttons: buttons
+    }));
+    expect(wrapper.find('li').length).toBe(5);
+  });
+  it('renders a separator', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+      classes: classes,
+      buttons: buttons
+    }));
+    expect(wrapper.find('li').at(3).hasClass('separator')).toBe(true);
+  });
+  it('renders a button to sign out', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+      classes: classes,
+      buttons: buttons
+    }));
+    expect(wrapper.find('li').at(4).find('a').hasClass('signOut')).toBe(true);
+  });
+});
+describe("MenuJSS", function () {
+  it('matches the snapshot', function () {
+    var buttons = [{
+      id: 'item1',
+      href: 'http://occ.com.mx',
+      label: 'Item 1'
+    }];
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      buttons: buttons
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Menu styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

package/build/Header/Menu/__snapshots__/Menu.test.js.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Menu matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Menu styles matches the snapshot 1`] = `
+Object {
+  "@media (max-width: 767px)": Object {
+    "dropdownMenu": Object {
+      "width": "200px",
+    },
+  },
+  "btnContainer": Object {
+    "display": "inline-block",
+    "position": "relative",
+    "verticalAlign": "middle",
+  },
+  "btnMenu": Object {
+    "&:hover": Object {
+      "background": "#ffffff",
+      "color": "#1476fb",
+    },
+    "&:hover $menuIcon": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjMTQ3NmZiIiBjeD0iNy45IiBjeT0iMi45IiByPSIxLjUiLz4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjMTQ3NmZiIiBjeD0iNy45IiBjeT0iMTIuOSIgcj0iMS41Ii8+CiAgICAgICAgICAgIDxjaXJjbGUgZmlsbD0iIzE0NzZmYiIgY3g9IjcuOSIgY3k9IjcuOSIgcj0iMS41Ii8+CiAgICAgICAgICAgIDwvc3ZnPg==)",
+    },
+    "background": "none",
+    "border": "none",
+    "borderRadius": "3px",
+    "color": "#ffffff",
+    "cursor": "pointer",
+    "marginLeft": "10px",
+    "outline": "none !important",
+    "padding": "5px 10px 2px 10px",
+    "transition": "0.3s all",
+  },
+  "btnMenuOpen": Object {
+    "& $menuIcon": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjMTQ3NmZiIiBjeD0iNy45IiBjeT0iMi45IiByPSIxLjUiLz4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjMTQ3NmZiIiBjeD0iNy45IiBjeT0iMTIuOSIgcj0iMS41Ii8+CiAgICAgICAgICAgIDxjaXJjbGUgZmlsbD0iIzE0NzZmYiIgY3g9IjcuOSIgY3k9IjcuOSIgcj0iMS41Ii8+CiAgICAgICAgICAgIDwvc3ZnPg==)",
+    },
+    "background": "#ffffff",
+    "color": "#1476fb",
+  },
+  "dropdownMenu": Object {
+    "backgroundClip": "padding-box",
+    "backgroundColor": "#ffffff",
+    "border": "1px solid rgba(0,0,0,.15)",
+    "boxShadow": "0 6px 12px rgba(0,0,0,.175)",
+    "display": "none",
+    "float": "left",
+    "fontSize": "14px",
+    "listStyle": "none",
+    "margin": "13px 0 0 -187px",
+    "minWidth": "160px",
+    "padding": "5px 0",
+    "position": "absolute",
+    "right": "0",
+    "textAlign": "left",
+    "top": "100%",
+    "zIndex": "1000",
+  },
+  "dropdownMenuOpen": Object {
+    "display": "block",
+  },
+  "label": Object {
+    "display": "inline-block",
+    "margin": "0",
+    "maxWidth": "65px",
+    "overflow": "hidden",
+    "paddingRight": "5px",
+    "textOverflow": "ellipsis",
+    "whiteSpace": "nowrap",
+  },
+  "listAnchor": Object {
+    "&:hover, &:focus": Object {
+      "color": "#1476fb",
+      "textDecoration": "none",
+    },
+    "clear": "both",
+    "color": "#000",
+    "cursor": "pointer",
+    "display": "block",
+    "fontWeight": "400",
+    "lineHeight": "1.42857143",
+    "margin": "5px 0 5px 0",
+    "padding": "0 10px",
+    "textDecoration": "none",
+    "whiteSpace": "nowrap",
+  },
+  "menu": Object {
+    "cursor": "pointer !important",
+    "display": "inline-block",
+    "marginTop": "5px",
+  },
+  "menuIcon": Object {
+    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBjeD0iNy45IiBjeT0iMi45IiByPSIxLjUiLz4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBjeD0iNy45IiBjeT0iMTIuOSIgcj0iMS41Ii8+CiAgICAgICAgICAgIDxjaXJjbGUgZmlsbD0iI0ZGRkZGRiIgY3g9IjcuOSIgY3k9IjcuOSIgcj0iMS41Ii8+CiAgICAgICAgICAgIDwvc3ZnPg==)",
+    "backgroundPosition": "center center",
+    "backgroundRepeat": "no-repeat",
+    "display": "inline-block",
+    "height": "16px",
+    "transition": "0.3s all",
+    "width": "16px",
+  },
+  "separator": Object {
+    "background": "#ebebeb",
+    "height": "1px",
+  },
+  "signOut": Object {
+    "color": "#ff456a !important",
+    "margin": "10px 0 5px 0",
+  },
+}
+`;
+
+exports[`MenuJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Header/Menu/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Menu = _interopRequireDefault(require("./Menu"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_Menu["default"]);
+
+exports["default"] = _default;

package/build/Header/Menu/styles.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+
+var _grid = _interopRequireDefault(require("../../subatomic/grid"));
+
+var _icons = _interopRequireDefault(require("../../subatomic/icons"));
+
+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 _default = _defineProperty({
+  menu: {
+    marginTop: '5px',
+    display: 'inline-block',
+    cursor: 'pointer !important'
+  },
+  btnContainer: {
+    position: 'relative',
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  },
+  btnMenu: {
+    cursor: 'pointer',
+    background: 'none',
+    border: 'none',
+    padding: '5px 10px 2px 10px',
+    marginLeft: '10px',
+    color: _colors["default"].white,
+    transition: '0.3s all',
+    outline: 'none !important',
+    borderRadius: '3px',
+    '&:hover': {
+      color: _colors["default"].blue,
+      background: _colors["default"].white
+    },
+    '&:hover $menuIcon': {
+      background: _icons["default"].base(_icons["default"].menu.icon(["#1476fb"]))
+    }
+  },
+  btnMenuOpen: {
+    color: _colors["default"].blue,
+    background: _colors["default"].white,
+    '& $menuIcon': {
+      background: _icons["default"].base(_icons["default"].menu.icon(["#1476fb"]))
+    }
+  },
+  label: {
+    paddingRight: '5px',
+    margin: '0',
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '65px',
+    whiteSpace: 'nowrap'
+  },
+  menuIcon: {
+    width: _icons["default"].menu.width,
+    height: _icons["default"].menu.height,
+    display: _icons["default"].menu.display,
+    transition: '0.3s all',
+    background: _icons["default"].base(_icons["default"].menu.icon(["#FFFFFF"])),
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center center'
+  },
+  dropdownMenu: {
+    position: 'absolute',
+    top: '100%',
+    zIndex: '1000',
+    display: 'none',
+    "float": 'left',
+    minWidth: '160px',
+    padding: '5px 0',
+    fontSize: '14px',
+    textAlign: 'left',
+    listStyle: 'none',
+    backgroundColor: _colors["default"].white,
+    backgroundClip: 'padding-box',
+    border: '1px solid rgba(0,0,0,.15)',
+    boxShadow: '0 6px 12px rgba(0,0,0,.175)',
+    margin: '13px 0 0 -187px',
+    right: '0'
+  },
+  dropdownMenuOpen: {
+    display: 'block'
+  },
+  listAnchor: {
+    textDecoration: 'none',
+    display: 'block',
+    padding: '0 10px',
+    margin: '5px 0 5px 0',
+    clear: 'both',
+    fontWeight: '400',
+    lineHeight: '1.42857143',
+    whiteSpace: 'nowrap',
+    color: '#000',
+    cursor: 'pointer',
+    '&:hover, &:focus': {
+      textDecoration: 'none',
+      color: _colors["default"].blue
+    }
+  },
+  signOut: {
+    color: "".concat(_colors["default"].pink, " !important"),
+    margin: '10px 0 5px 0'
+  },
+  separator: {
+    height: '1px',
+    background: '#ebebeb'
+  }
+}, "@media (max-width: ".concat(_grid["default"].sm - 1, "px)"), {
+  dropdownMenu: {
+    width: '200px'
+  }
+});
+
+exports["default"] = _default;

package/build/Header/Nav/Nav.js

@@ -0,0 +1,95 @@
+"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 _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 Nav = /*#__PURE__*/function (_React$Component) {
+  _inherits(Nav, _React$Component);
+
+  var _super = _createSuper(Nav);
+
+  function Nav() {
+    _classCallCheck(this, Nav);
+
+    return _super.apply(this, arguments);
+  }
+
+  _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.');
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      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));
+      }));
+    }
+  }]);
+
+  return Nav;
+}(_react["default"].Component);
+
+Nav.propTypes = {
+  classes: _propTypes["default"].object,
+  active: _propTypes["default"].string,
+  navigate: _propTypes["default"].func,
+  buttons: _propTypes["default"].array
+};
+var _default = Nav;
+exports["default"] = _default;

package/build/Header/Nav/Nav.test.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Nav = _interopRequireDefault(require("./Nav"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+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, {});
+var buttons = [{
+  id: 'item1',
+  icon: 'dashboard',
+  label: 'Item 1'
+}, {
+  id: 'item2',
+  icon: 'publications',
+  label: 'Item 2'
+}, {
+  id: 'item3',
+  icon: 'talent',
+  label: 'Item 3'
+}];
+describe("Nav", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Nav["default"], {
+      classes: classes,
+      buttons: buttons
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('renders all the buttons', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Nav["default"], {
+      classes: classes,
+      buttons: buttons
+    }));
+    expect(wrapper.find('li').length).toBe(3);
+  });
+  it('calls the onClick function', function () {
+    var onClick = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Nav["default"], {
+      classes: classes,
+      navigate: onClick,
+      buttons: buttons
+    }));
+    wrapper.find('li').at(1).simulate('click');
+    expect(onClick.mock.calls.length).toBe(1);
+  });
+  it('sets an active button', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Nav["default"], {
+      classes: classes,
+      active: "item1",
+      buttons: buttons
+    }));
+    expect(wrapper.find('li').at(0).hasClass('activeItem')).toBe(true);
+  });
+});
+describe("NavJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      buttons: buttons
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Nav styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

package/build/Header/Nav/__snapshots__/Nav.test.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Nav matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Nav styles matches the snapshot 1`] = `
+Object {
+  "@media (max-width: 767px)": Object {
+    "activeItem": Object {
+      "& $icon": Object {
+        "marginBottom": "14px",
+      },
+      "& $listAnchor": Object {
+        "display": "none",
+      },
+      "&:after": Object {
+        "background": "#06f7fa",
+        "borderRadius": "50%",
+        "bottom": "0",
+        "content": "\\"\\"",
+        "display": "block",
+        "height": "4px",
+        "left": "50%",
+        "marginBottom": "8px",
+        "position": "absolute",
+        "transform": "translateX(-50%)",
+        "width": "4px",
+      },
+    },
+    "icon": Object {},
+    "listAnchor": Object {},
+    "listItem": Object {
+      "&:last-child": Object {
+        "marginRight": "0",
+      },
+      "margin": "0 25px 0 0",
+    },
+    "menu": Object {
+      "clear": "both",
+      "margin": "0",
+      "textAlign": "center",
+    },
+  },
+  "@media (min-width: 768px)": Object {
+    "listItem": Object {
+      "float": "left",
+    },
+    "menu": Object {
+      "float": "left",
+    },
+  },
+  "activeItem": Object {
+    "& $icon, &:hover $icon": Object {
+      "filter": "brightness(1)",
+    },
+    "& $listAnchor, &:hover $listAnchor": Object {
+      "color": "#ffffff",
+    },
+  },
+  "icon": Object {
+    "backgroundPosition": "center center",
+    "backgroundRepeat": "no-repeat",
+  },
+  "listAnchor": Object {
+    "color": "#104791",
+    "display": "block",
+    "lineHeight": "20px",
+    "marginBottom": "2px",
+    "marginTop": "-4px",
+    "padding": "0",
+    "position": "relative",
+    "textAlign": "center",
+    "textDecoration": "none !important",
+    "transition": "0.3s all",
+  },
+  "listItem": Object {
+    "&:hover $icon": Object {
+      "filter": "brightness(0.8)",
+    },
+    "&:hover $listAnchor": Object {
+      "color": "#224099",
+    },
+    "cursor": "pointer",
+    "display": "inline-block",
+    "fontSize": "12px",
+    "margin": "7px 30px 0 0",
+    "padding": "5px 0 0 0",
+    "position": "relative",
+    "textAlign": "center",
+    "width": "auto",
+  },
+  "menu": Object {
+    "background": "#1476fb",
+    "listStyle": "none",
+    "margin": "0 10px",
+    "paddingLeft": "0",
+    "textAlign": "center",
+  },
+}
+`;
+
+exports[`NavJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Header/Nav/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Nav = _interopRequireDefault(require("./Nav"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_Nav["default"]);
+
+exports["default"] = _default;