@comicrelief/component-library 7.24.0 → 7.24.2

package/dist/components/Organisms/Footer/Nav/Nav.style.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,18 +8,20 @@ exports.SubNavMenu = exports.SubNavLink = exports.SubNavItem = exports.NavMenu =
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
-var NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
+const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Navstyle__NavLinkClass",
   componentId: "sc-uzf5hs-0"
-})(["border:0;height:46px;width:100%;background-color:", ";&:hover,&:focus{border-bottom:none;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["border:0;height:46px;width:100%;background-color:", ";&:hover,&:focus{border-bottom:none;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('deep_violet_dark');
 });
 
 /**
  * Navigation menu
  */
-var Nav = exports.Nav = _styledComponents.default.nav.withConfig({
+const Nav = exports.Nav = _styledComponents.default.nav.withConfig({
   displayName: "Navstyle__Nav",
   componentId: "sc-uzf5hs-1"
 })(["display:block;width:100%;text-align:left;> h2{", ";}"], _hideVisually.default);
@@ -27,47 +29,63 @@ var Nav = exports.Nav = _styledComponents.default.nav.withConfig({
 /**
  * Sub Navigation Menu (second level)
  */
-var SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig({
+const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__SubNavMenu",
   componentId: "sc-uzf5hs-2"
-})(["display:flex;transition:max-height 0.5s ease;max-height:", ";overflow:hidden;padding:0;position:relative;list-style:none outside;flex-direction:column;> li a{display:", ";font-size:15px;font-weight:500;cursor:pointer;&:after{content:none;}}@media ", "{max-height:none;height:auto;", ";> li a{display:inline;line-height:24px;}}"], function (_ref2) {
-  var isSubMenuOpen = _ref2.isSubMenuOpen;
+})(["display:flex;transition:max-height 0.5s ease;max-height:", ";overflow:hidden;padding:0;position:relative;list-style:none outside;flex-direction:column;> li a{display:", ";font-size:15px;font-weight:500;cursor:pointer;&:after{content:none;}}@media ", "{max-height:none;height:auto;", ";> li a{display:inline;line-height:24px;}}"], _ref2 => {
+  let {
+    isSubMenuOpen
+  } = _ref2;
   return isSubMenuOpen ? '400px' : '0px';
-}, function (_ref3) {
-  var isSubMenuOpen = _ref3.isSubMenuOpen;
+}, _ref3 => {
+  let {
+    isSubMenuOpen
+  } = _ref3;
   return isSubMenuOpen ? 'inline' : 'none';
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('small');
-}, function (_ref5) {
-  var column = _ref5.column;
+}, _ref5 => {
+  let {
+    column
+  } = _ref5;
   return column === true ? 'flex-direction: row; flex-wrap: wrap;' : null;
 });
 
 /**
  * Sub Menu list items
  */
-var SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
+const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__SubNavItem",
   componentId: "sc-uzf5hs-3"
-})(["height:40px;width:100%;background-color:inherit;padding:8px 0;@media ", "{height:auto;margin-top:12px;padding:0;", ";a{background-color:inherit;height:auto;&:after{content:none !important;}&:hover,&:focus{border-bottom:2px solid #fff;span{border-bottom:0;padding-bottom:2px;}}}}@media ", "{", ";}"], function (_ref6) {
-  var theme = _ref6.theme;
+})(["height:40px;width:100%;background-color:inherit;padding:8px 0;@media ", "{height:auto;margin-top:12px;padding:0;", ";a{background-color:inherit;height:auto;&:after{content:none !important;}&:hover,&:focus{border-bottom:2px solid #fff;span{border-bottom:0;padding-bottom:2px;}}}}@media ", "{", ";}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.breakpoint('small');
-}, function (_ref7) {
-  var column = _ref7.column;
+}, _ref7 => {
+  let {
+    column
+  } = _ref7;
   return column === true ? 'flex: 0 0 100%;' : null;
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.breakpoint('medium');
-}, function (_ref9) {
-  var column = _ref9.column;
+}, _ref9 => {
+  let {
+    column
+  } = _ref9;
   return column === true ? 'flex: 0 0 100%;' : null;
 });
 
 /**
  * Sub menu link item
  */
-var SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
+const SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__SubNavLink",
   componentId: "sc-uzf5hs-4"
 })(["padding:14px 21px;height:auto;position:relative;"]);
@@ -75,18 +93,20 @@ var SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClas
 /**
  * Navigation Menu (first level)
  */
-var NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
+const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__NavMenu",
   componentId: "sc-uzf5hs-5"
-})(["background-color:inherit;list-style:none outside;padding:0;margin:0;@media ", "{display:flex;flex-wrap:wrap;justify-content:start;}"], function (_ref10) {
-  var theme = _ref10.theme;
+})(["background-color:inherit;list-style:none outside;padding:0;margin:0;@media ", "{display:flex;flex-wrap:wrap;justify-content:start;}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.breakpoint('small');
 });
 
 /**
  * Menu item link
  */
-var NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
+const NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__NavLink",
   componentId: "sc-uzf5hs-6"
 })([""]);
@@ -94,28 +114,42 @@ var NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).wit
 /**
  * Menu list items
  */
-var NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
+const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__NavItem",
   componentId: "sc-uzf5hs-7"
-})(["position:relative;font-weight:700;margin:0;margin-bottom:1rem;@media ", "{flex:0 0 30%;margin:0;}@media ", "{flex:0 0 calc(25% - 1rem);margin-right:1rem;margin-bottom:1rem;> span{padding:0;}}a{width:auto;padding:0;height:auto;position:relative;background-color:inherit;font-size:19px;line-height:40px;font-weight:800;@media ", "{font-size:20px;line-height:40px;}&:after{content:'\\2303';position:absolute;font-family:Arial;margin-left:4px;overflow:hidden;line-height:19px;font-size:23px;color:", ";font-weight:100;transition:transform 0.2s ease;transform:", ";top:", ";right:-25px;}@media ", "{cursor:default;display:inline;&:after{content:none;}}}"], function (_ref11) {
-  var theme = _ref11.theme;
+})(["position:relative;font-weight:700;margin:0;margin-bottom:1rem;@media ", "{flex:0 0 30%;margin:0;}@media ", "{flex:0 0 calc(25% - 1rem);margin-right:1rem;margin-bottom:1rem;> span{padding:0;}}a{width:auto;padding:0;height:auto;position:relative;background-color:inherit;font-size:19px;line-height:40px;font-weight:800;@media ", "{font-size:20px;line-height:40px;}&:after{content:'\\2303';position:absolute;font-family:Arial;margin-left:4px;overflow:hidden;line-height:19px;font-size:23px;color:", ";font-weight:100;transition:transform 0.2s ease;transform:", ";top:", ";right:-25px;}@media ", "{cursor:default;display:inline;&:after{content:none;}}}"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.breakpoint('small');
-}, function (_ref12) {
-  var theme = _ref12.theme;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.breakpoint('medium');
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.breakpoint('small');
-}, function (_ref14) {
-  var theme = _ref14.theme;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
   return theme.color('white');
-}, function (_ref15) {
-  var isSubMenuOpen = _ref15.isSubMenuOpen;
+}, _ref15 => {
+  let {
+    isSubMenuOpen
+  } = _ref15;
   return isSubMenuOpen ? 'rotate(0deg)' : 'rotate(180deg)';
-}, function (_ref16) {
-  var isSubMenuOpen = _ref16.isSubMenuOpen;
+}, _ref16 => {
+  let {
+    isSubMenuOpen
+  } = _ref16;
   return isSubMenuOpen ? '6px' : '0';
-}, function (_ref17) {
-  var theme = _ref17.theme;
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
   return theme.breakpoint('small');
 });

package/dist/components/Organisms/Header/Burger/BurgerMenu.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _BurgerMenu = require("./BurgerMenu.style");
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-var BurgerMenu = function BurgerMenu(_ref) {
-  var toggle = _ref.toggle,
-    isExpandable = _ref.isExpandable;
+const BurgerMenu = _ref => {
+  let {
+    toggle,
+    isExpandable
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_BurgerMenu.BurgerWrapper, {
     href: "#",
     role: "button",

package/dist/components/Organisms/Header/Burger/BurgerMenu.style.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +13,7 @@ var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"))
 /**
  * Burger hidden text
  */
-var BurgerHiddenText = exports.BurgerHiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
+const BurgerHiddenText = exports.BurgerHiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "BurgerMenustyle__BurgerHiddenText",
   componentId: "sc-dtfwej-0"
 })(["", ";"], _hideVisually.default);
@@ -22,40 +22,56 @@ var BurgerHiddenText = exports.BurgerHiddenText = (0, _styledComponents.default)
  * Burger menu bar
  */
 
-var BurgerBar = exports.BurgerBar = _styledComponents.default.span.withConfig({
+const BurgerBar = exports.BurgerBar = _styledComponents.default.span.withConfig({
   displayName: "BurgerMenustyle__BurgerBar",
   componentId: "sc-dtfwej-1"
-})(["background-color:", ";margin:0 auto;"], function (_ref) {
-  var theme = _ref.theme;
+})(["background-color:", ";margin:0 auto;"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('deep_violet_dark');
 });
 
 /**
  * Burger wrapper
  */
-var BurgerWrapper = exports.BurgerWrapper = (0, _styledComponents.default)(_Link.default).withConfig({
+const BurgerWrapper = exports.BurgerWrapper = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "BurgerMenustyle__BurgerWrapper",
   componentId: "sc-dtfwej-2"
-})(["", ";order:50;display:flex;align-items:center;position:relative;text-indent:-9999px;background-color:transparent;height:100%;width:45px;left:5px;cursor:pointer;transition:all 0.2s;:hover{border:none;font-weight:inherit;}", "{position:relative;&,::before,::after{width:25px;height:3px;display:inline-block;}", ";::before,::after{content:'';position:absolute;left:0;background-color:currentColor;transition:all 0.2s;}::before{top:-0.5rem;", ";}::after{top:0.5rem;", ";}}:hover ", "{&,::before,::after{background-color:", ";}::before{", ";}::after{", ";}}@media ", "{display:none;}"], (0, _zIndex.default)('medium'), BurgerBar, function (_ref2) {
-  var isExpandable = _ref2.isExpandable;
+})(["", ";order:50;display:flex;align-items:center;position:relative;text-indent:-9999px;background-color:transparent;height:100%;width:45px;left:5px;cursor:pointer;transition:all 0.2s;:hover{border:none;font-weight:inherit;}", "{position:relative;&,::before,::after{width:25px;height:3px;display:inline-block;}", ";::before,::after{content:'';position:absolute;left:0;background-color:currentColor;transition:all 0.2s;}::before{top:-0.5rem;", ";}::after{top:0.5rem;", ";}}:hover ", "{&,::before,::after{background-color:", ";}::before{", ";}::after{", ";}}@media ", "{display:none;}"], (0, _zIndex.default)('medium'), BurgerBar, _ref2 => {
+  let {
+    isExpandable
+  } = _ref2;
   return isExpandable && ' background-color: transparent';
-}, function (_ref3) {
-  var isExpandable = _ref3.isExpandable;
+}, _ref3 => {
+  let {
+    isExpandable
+  } = _ref3;
   return isExpandable && ' transform:rotate(135deg); top: 0;';
-}, function (_ref4) {
-  var isExpandable = _ref4.isExpandable;
+}, _ref4 => {
+  let {
+    isExpandable
+  } = _ref4;
   return isExpandable && ' transform:rotate(-135deg); top: 0;';
-}, BurgerBar, function (_ref5) {
-  var theme = _ref5.theme,
-    isExpandable = _ref5.isExpandable;
+}, BurgerBar, _ref5 => {
+  let {
+    theme,
+    isExpandable
+  } = _ref5;
   return !isExpandable && theme.color('grey');
-}, function (_ref6) {
-  var isExpandable = _ref6.isExpandable;
+}, _ref6 => {
+  let {
+    isExpandable
+  } = _ref6;
   return !isExpandable && 'top: -0.6rem;';
-}, function (_ref7) {
-  var isExpandable = _ref7.isExpandable;
+}, _ref7 => {
+  let {
+    isExpandable
+  } = _ref7;
   return !isExpandable && 'top: 0.6rem;';
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.breakpoint('nav');
 });

package/dist/components/Organisms/Header/Header.js

@@ -1,21 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _Logos = _interopRequireDefault(require("../../Molecules/Logos/Logos"));
 var _Nav = _interopRequireDefault(require("./Nav/Nav"));
 var _Header = require("./Header.style");
-var _excluded = ["navItems", "metaIcons", "campaign"];
-var Header = function Header(_ref) {
-  var navItems = _ref.navItems,
-    metaIcons = _ref.metaIcons,
-    campaign = _ref.campaign,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Header = _ref => {
+  let {
+    navItems,
+    metaIcons,
+    campaign,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Header.HeaderWrapper, Object.assign({
     navItems: true
   }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {

package/dist/components/Organisms/Header/Header.style.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,38 +9,46 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _size = require("../../../theme/shared/size");
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.attrs(function () {
-  return {
-    role: 'banner'
-  };
-}).withConfig({
+const HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.header.attrs(() => ({
+  role: 'banner'
+})).withConfig({
   displayName: "Headerstyle__HeaderWrapper",
   componentId: "sc-11ghppe-0"
-})(["position:relative;background-color:", ";padding:0;height:75px;@media ", "{height:auto;}"], function (_ref) {
-  var theme = _ref.theme;
+})(["position:relative;background-color:", ";padding:0;height:75px;@media ", "{height:auto;}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.color('white');
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.breakpoint('nav');
 });
-var InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
+const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__InnerWrapper",
   componentId: "sc-11ghppe-1"
-})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _size.container.large, function (_ref3) {
-  var theme = _ref3.theme;
+})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _size.container.large, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.breakpoint('nav');
 });
-var Brand = exports.Brand = _styledComponents.default.div.withConfig({
+const Brand = exports.Brand = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__Brand",
   componentId: "sc-11ghppe-2"
 })(["", ";margin-right:auto;display:flex;align-items:center;a{border:0;color:transparent;margin-right:", ";img{width:100%;object-fit:contain;}:hover{border:0;}}"], (0, _zIndex.default)('high'), (0, _spacing.default)('md'));
-var MetaIcons = exports.MetaIcons = _styledComponents.default.div.withConfig({
+const MetaIcons = exports.MetaIcons = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__MetaIcons",
   componentId: "sc-11ghppe-3"
-})(["width:auto;display:flex;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-left:0.5rem;img{padding:5px;height:inherit;width:inherit;}}}@media ", "{position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}"], function (_ref4) {
-  var theme = _ref4.theme;
+})(["width:auto;display:flex;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-left:0.5rem;img{padding:5px;height:inherit;width:inherit;}}}@media ", "{position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}"], _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.breakpoint('nav');
-}, function (_ref5) {
-  var theme = _ref5.theme;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.color('white');
 });

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 var _BurgerMenu = _interopRequireDefault(require("../Burger/BurgerMenu"));
@@ -16,53 +15,45 @@ var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
 var _chevronDown = _interopRequireDefault(require("./chevron-down.svg"));
 var _Nav = require("./Nav.style");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }
-var MainNav = function MainNav(_ref) {
-  var navItems = _ref.navItems;
-  var menuGroups = navItems.menuGroups;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isExpandable = _useState2[0],
-    setIsExpandable = _useState2[1];
-  var _useState3 = (0, _react.useState)({}),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isSubMenuOpen = _useState4[0],
-    setIsSubMenuOpen = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isKeyPressed = _useState6[0],
-    setIsKeyPressed = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    isMobile = _useState8[0],
-    setIsMobile = _useState8[1];
-  var toggleBurgerMenu = function toggleBurgerMenu(event) {
+const MainNav = _ref => {
+  let {
+    navItems
+  } = _ref;
+  const {
+    menuGroups
+  } = navItems;
+  const [isExpandable, setIsExpandable] = (0, _react.useState)(false);
+  const [isSubMenuOpen, setIsSubMenuOpen] = (0, _react.useState)({});
+  const [isKeyPressed, setIsKeyPressed] = (0, _react.useState)({});
+  const [isMobile, setIsMobile] = (0, _react.useState)(false);
+  const toggleBurgerMenu = event => {
     event.preventDefault();
     setIsExpandable(!isExpandable);
   };
-  var toggleSubMenu = function toggleSubMenu(e, item) {
+  const toggleSubMenu = (e, item) => {
     e.preventDefault();
-    setIsSubMenuOpen((0, _defineProperty2.default)({}, item, !isSubMenuOpen[item]));
+    setIsSubMenuOpen({
+      [item]: !isSubMenuOpen[item]
+    });
   };
 
   // Handle tab key on menu nav
-  var keyPressed = function keyPressed(item) {
-    return function () {
-      window.onkeyup = function (e) {
-        if (e.target.querySelector('span') && e.target.querySelector('span').innerText === item) {
-          setIsKeyPressed((0, _defineProperty2.default)({}, item, !isKeyPressed[item]));
-        } else if (!e.target.querySelector('span')) {
-          setIsKeyPressed({});
-        }
-      };
+  const keyPressed = item => () => {
+    window.onkeyup = e => {
+      if (e.target.querySelector('span') && e.target.querySelector('span').innerText === item) {
+        setIsKeyPressed({
+          [item]: !isKeyPressed[item]
+        });
+      } else if (!e.target.querySelector('span')) {
+        setIsKeyPressed({});
+      }
     };
   };
-  (0, _react.useEffect)(function () {
-    var width = window.innerWidth;
+  (0, _react.useEffect)(() => {
+    const width = window.innerWidth;
     setIsMobile(width < _breakpoint.sizes.nav);
     window.addEventListener('onkeyup', setIsKeyPressed);
-    return function () {
+    return () => {
       window.removeEventListener('onkeyup', setIsKeyPressed);
     };
   }, []);
@@ -75,15 +66,15 @@ var MainNav = function MainNav(_ref) {
     tag: "h2"
   }, "Main navigation"), /*#__PURE__*/_react.default.createElement(_Nav.NavMenu, {
     role: "menubar"
-  }, menuGroups.map(function (group, index) {
+  }, menuGroups.map((group, index) => {
     /* Grab the first links properties to use for our parent/button */
-    var thisFirstChild = group.links[0];
+    const thisFirstChild = group.links[0];
 
     /* Determine which field represents our url path */
-    var thisUrl = (0, _navHelper.default)(thisFirstChild);
-    var relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener';
-    var hasSubMenu = group.links && group.links.length > 1;
-    var hasPopUp = hasSubMenu ? 'true' : null;
+    let thisUrl = (0, _navHelper.default)(thisFirstChild);
+    const relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener';
+    const hasSubMenu = group.links && group.links.length > 1;
+    const hasPopUp = hasSubMenu ? 'true' : null;
     thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
     return /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
       role: "none",
@@ -96,9 +87,7 @@ var MainNav = function MainNav(_ref) {
       rel: relNoopener,
       "aria-expanded": !!isSubMenuOpen[group.id],
       "aria-haspopup": hasPopUp,
-      onClick: hasPopUp ? function (e) {
-        return toggleSubMenu(e, group.id);
-      } : null,
+      onClick: hasPopUp ? e => toggleSubMenu(e, group.id) : null,
       onKeyUp: keyPressed(group.title),
       role: "button"
     }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_Nav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
@@ -117,8 +106,8 @@ var MainNav = function MainNav(_ref) {
       role: "list",
       isKeyPressed: !!isKeyPressed[group.title],
       isSubMenuOpen: !!isSubMenuOpen[group.id]
-    }, group.links.map(function (child, childIndex) {
-      var thisSubUrl = (0, _navHelper.default)(child);
+    }, group.links.map((child, childIndex) => {
+      let thisSubUrl = (0, _navHelper.default)(child);
       thisSubUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisSubUrl);
 
       /* Wrap our first child item with special tags */