@nice-digital/global-nav 5.0.940 → 7.0.930

package/lib/Header/Nav/Dropdown/Dropdown.js

@@ -1,88 +1,73 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Dropdown = Dropdown;
-exports["default"] = void 0;
-
-var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
-
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-
-var _hooks = require("@mantine/hooks");
-
+var _useFocusTrap = require("@mantine/hooks/esm/use-focus-trap/use-focus-trap");
 var _HeaderContext = require("../../context/HeaderContext");
-
 var _DropdownModule = _interopRequireDefault(require("./Dropdown.module.scss"));
-
 var _ResetModule = _interopRequireDefault(require("./Reset.module.scss"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _services = _interopRequireDefault(require("../../../services.json"));
-
 var _Remove = _interopRequireDefault(require("@nice-digital/icons/lib/Remove"));
-
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
-
+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; }
 /* eslint-disable react/prop-types */
-function Dropdown(_ref) {
-  var _this2 = this;
 
+function Dropdown(_ref) {
   var text = _ref.text,
-      className = _ref.className,
-      nextNavSlug = _ref.nextNavSlug,
-      closeDropdown = _ref.closeDropdown,
-      id = _ref.id,
-      currentService = _ref.currentService,
-      DropdownComponent = _ref.component;
-
+    className = _ref.className,
+    nextNavSlug = _ref.nextNavSlug,
+    closeDropdown = _ref.closeDropdown,
+    id = _ref.id,
+    currentService = _ref.currentService,
+    DropdownComponent = _ref.component;
   var _useContext = (0, _react.useContext)(_HeaderContext.HeaderContext),
-      idOfOpenDropdown = _useContext.idOfOpenDropdown;
-
-  var focusTrapRef = (0, _hooks.useFocusTrap)(idOfOpenDropdown !== null);
-
+    idOfOpenDropdown = _useContext.idOfOpenDropdown;
+  var focusTrapRef = (0, _useFocusTrap.useFocusTrap)(idOfOpenDropdown !== null);
   function handleSkipLink(e) {
-    var _this = this;
-
     e.preventDefault();
     var element = document.getElementById(e.target.hash.substr(1));
     requestAnimationFrame(function () {
-      (0, _newArrowCheck2["default"])(this, _this);
       element && element.focus();
-    }.bind(this));
+    });
     closeDropdown();
   }
-
-  var _services$external$fi = _services["default"].external.find(function (service) {
-    (0, _newArrowCheck2["default"])(this, _this2);
-    return service.id == id;
-  }.bind(this)),
-      host = _services$external$fi.host;
-
-  var rootUrl = id === currentService ? "" : "https://" + host;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])([className, _ResetModule["default"].wrapper]),
-    id: "dropdown-" + id,
-    "data-tracking": text + " dropdown",
-    ref: focusTrapRef
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropdownModule["default"].container
-  }, nextNavSlug && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("a", {
-    href: nextNavSlug == "content-start" ? "#" + nextNavSlug : "#navlink-" + nextNavSlug,
-    className: _DropdownModule["default"].skiplink,
-    onClick: handleSkipLink
-  }, "Skip ", text, " submenu")), /*#__PURE__*/_react["default"].createElement(DropdownComponent, {
-    rootUrl: rootUrl
-  }), /*#__PURE__*/_react["default"].createElement("button", {
-    onClick: closeDropdown,
-    className: _DropdownModule["default"].exit,
-    "data-tracking": "Close menu"
-  }, "Close menu ", /*#__PURE__*/_react["default"].createElement(_Remove["default"], null))));
+  var _services$external$fi = _services.default.external.find(function (service) {
+      return service.id == id;
+    }),
+    host = _services$external$fi.host;
+  var rootUrl = id === currentService ? "" : "https://".concat(host);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)([className, _ResetModule.default.wrapper]),
+    id: "dropdown-".concat(id),
+    "data-tracking": "".concat(text, " dropdown"),
+    ref: focusTrapRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _DropdownModule.default.container,
+      children: [nextNavSlug && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+          href: nextNavSlug == "content-start" ? "#".concat(nextNavSlug) : "#navlink-".concat(nextNavSlug),
+          className: _DropdownModule.default.skiplink,
+          onClick: handleSkipLink,
+          children: ["Skip ", text, " submenu"]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownComponent, {
+        rootUrl: rootUrl
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        onClick: closeDropdown,
+        className: _DropdownModule.default.exit,
+        "data-tracking": "Close menu",
+        children: ["Close menu ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Remove.default, {})]
+      })]
+    })
+  });
 }
-
 var _default = Dropdown;
-exports["default"] = _default;
+exports.default = _default;

package/lib/Header/Nav/Dropdown/Dropdown.module.scss

@@ -10,7 +10,7 @@
 @use '@nice-digital/nds-core/scss/utils';
 
 .skiplink {
-  @extend .link;
+  @extend %link;
 }
 
 .skiplink:focus:not(:focus-visible) {

package/lib/Header/Nav/Dropdown/index.js

@@ -1,10 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-
-exports["default"] = _Dropdown["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown.default;
+  }
+});
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));

package/lib/Header/Nav/Nav.js

@@ -1,46 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
-
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames3 = _interopRequireDefault(require("classnames"));
-
 var _HeaderContext = require("../../Header/context/HeaderContext");
-
 var _NavLinks = _interopRequireDefault(require("./NavLinks"));
-
 var _NavModule = _interopRequireDefault(require("./Nav.module.scss"));
-
 var _services = _interopRequireDefault(require("./../../services.json"));
-
 var _tracker = require("../../tracker");
-
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
-
-function Nav(props) {
-  var _this = this,
-      _classnames,
-      _classnames2;
-
-  var accountsLinks = props.accountsLinks;
-
+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; }
+function Nav(_ref) {
+  var accountsLinks = _ref.accountsLinks,
+    service = _ref.service,
+    _ref$additionalSubMen = _ref.additionalSubMenuItems,
+    additionalSubMenuItems = _ref$additionalSubMen === void 0 ? [] : _ref$additionalSubMen,
+    isExpanded = _ref.isExpanded,
+    skipLinkId = _ref.skipLinkId,
+    onNavigating = _ref.onNavigating;
   var _useContext = (0, _react.useContext)(_HeaderContext.HeaderContext),
-      clickOutsideRef = _useContext.clickOutsideRef;
-
+    clickOutsideRef = _useContext.clickOutsideRef;
   function handleAccountNavItemClick(e) {
     var href = e.currentTarget.getAttribute("href");
     var eventLabel;
-
     if (href.indexOf("editprofile") > -1) {
       eventLabel = "Edit profile";
     } else if (href.indexOf("signout") > -1) {
@@ -48,118 +38,110 @@ function Nav(props) {
     } else if (href.indexOf("signin") > -1) {
       eventLabel = "Sign in";
     }
-
     if (eventLabel) {
       e.preventDefault();
       (0, _tracker.trackEvent)(_tracker.defaultEventCategory, _tracker.headerClickEventAction, eventLabel, null, href, function () {
-        window.location.href = href;
+        window.location.assign(href);
       });
     }
-  } // Links from NICE Accounts is an object so flatten to a loop for easier traversal
-
+  }
 
+  // Links from NICE Accounts is an object so flatten to a loop for easier traversal
   var accountsLinksArray = accountsLinks && Object.keys(accountsLinks).map(function (text) {
-    (0, _newArrowCheck2["default"])(this, _this);
     return {
       text: text,
       href: accountsLinks[text]
     };
-  }.bind(this)); // Would need to polyfill Array.prototype.find to rewrite these loops, whilst we support IE
-  // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find for support
+  });
 
+  // Would need to polyfill Array.prototype.find to rewrite these loops, whilst we support IE
+  // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find for support
   var activeService = null;
   var internalService = false;
-  var servicesToDisplay = _services["default"].external; //default to displaying external services.
-
-  for (var i = 0; i < _services["default"].internal.length; i++) {
-    var internalRootLink = _services["default"].internal[i];
-
-    if (props.service && internalRootLink.id === props.service) {
+  var servicesToDisplay = _services.default.external; //default to displaying external services.
+  for (var i = 0; i < _services.default.internal.length; i++) {
+    var internalRootLink = _services.default.internal[i];
+    if (service && internalRootLink.id === service) {
       internalService = true;
       activeService = internalRootLink;
       servicesToDisplay = [internalRootLink]; //unlike external, internal services don't display other internal services.
-
       break;
     }
   }
-
   if (!internalService) {
-    for (var _i = 0; _i < _services["default"].external.length; _i++) {
-      var externalService = _services["default"].external[_i];
-
-      if (props.service && externalService.id === props.service) {
+    for (var _i = 0; _i < _services.default.external.length; _i++) {
+      var externalService = _services.default.external[_i];
+      if (service && externalService.id === service) {
         activeService = externalService;
         break;
       }
     }
   }
-
   var additionalSubMenuLinks = [];
-
-  for (var _i2 = 0; _i2 < props.additionalSubMenuItems.length; _i2++) {
-    var additionalSubMenuItem = props.additionalSubMenuItems[_i2];
-
-    if (typeof additionalSubMenuItem !== "undefined" && additionalSubMenuItem.service === props.service && Array.isArray(additionalSubMenuItem.links)) {
+  for (var _i2 = 0; _i2 < additionalSubMenuItems.length; _i2++) {
+    var additionalSubMenuItem = additionalSubMenuItems[_i2];
+    if (typeof additionalSubMenuItem !== "undefined" && additionalSubMenuItem.service === service && Array.isArray(additionalSubMenuItem.links)) {
       additionalSubMenuLinks = additionalSubMenuItem.links.map(function (link) {
-        (0, _newArrowCheck2["default"])(this, _this);
         return {
           text: link.text,
           href: link.url
         };
-      }.bind(this));
+      });
     }
   }
-
   var subLinks = activeService && activeService.links && activeService.links.concat(additionalSubMenuLinks);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     id: "header-menu",
-    className: (0, _classnames3["default"])(_NavModule["default"].wrapper, (_classnames = {}, _classnames[_NavModule["default"].wrapperExpanded] = props.isExpanded, _classnames), (_classnames2 = {}, _classnames2[_NavModule["default"].wrapperWithSubLinks] = subLinks, _classnames2)),
-    ref: clickOutsideRef
-  }, /*#__PURE__*/_react["default"].createElement("nav", {
-    className: _NavModule["default"].nav,
-    "aria-label": "primary navigation",
-    "data-tracking": "Primary navigation"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _NavModule["default"].menuWrapper
-  }, /*#__PURE__*/_react["default"].createElement(_NavLinks["default"], {
-    skipLinkId: props.skipLinkId,
-    servicesToDisplay: servicesToDisplay,
-    currentService: props.service,
-    subLinks: subLinks,
-    onNavigating: props.onNavigating
-  }))), accountsLinksArray && /*#__PURE__*/_react["default"].createElement("nav", {
-    "aria-label": "My account",
-    className: (0, _classnames3["default"])(_NavModule["default"].nav, _NavModule["default"].myAccount)
-  }, accountsLinksArray.length > 1 && /*#__PURE__*/_react["default"].createElement("h2", {
-    className: _NavModule["default"].myAccountHeading
-  }, "My account"), /*#__PURE__*/_react["default"].createElement("div", {
-    className: _NavModule["default"].menuWrapper
-  }, /*#__PURE__*/_react["default"].createElement("ul", {
-    className: _NavModule["default"].menuList
-  }, accountsLinksArray.map(function (_ref) {
-    (0, _newArrowCheck2["default"])(this, _this);
-    var href = _ref.href,
-        text = _ref.text;
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      key: href
-    }, /*#__PURE__*/_react["default"].createElement("a", {
-      href: href,
-      className: _NavModule["default"].link,
-      onClick: handleAccountNavItemClick
-    }, text));
-  }.bind(this))))));
+    className: (0, _classnames3.default)(_NavModule.default.wrapper, (0, _defineProperty2.default)({}, _NavModule.default.wrapperExpanded, isExpanded), (0, _defineProperty2.default)({}, _NavModule.default.wrapperWithSubLinks, subLinks)),
+    ref: clickOutsideRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+      className: _NavModule.default.nav,
+      "aria-label": "primary navigation",
+      "data-tracking": "Primary navigation",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _NavModule.default.menuWrapper,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavLinks.default, {
+          skipLinkId: skipLinkId,
+          servicesToDisplay: servicesToDisplay,
+          currentService: service,
+          subLinks: subLinks,
+          onNavigating: onNavigating
+        })
+      })
+    }), accountsLinksArray && /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+      "aria-label": "My account",
+      className: (0, _classnames3.default)(_NavModule.default.nav, _NavModule.default.myAccount),
+      children: [accountsLinksArray.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: _NavModule.default.myAccountHeading,
+        children: "My account"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _NavModule.default.menuWrapper,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+          className: _NavModule.default.menuList,
+          children: accountsLinksArray.map(function (_ref2) {
+            var href = _ref2.href,
+              text = _ref2.text;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: href,
+                className: _NavModule.default.link,
+                onClick: handleAccountNavItemClick,
+                children: text
+              })
+            }, href);
+          })
+        })
+      })]
+    })]
+  });
 }
-
 var _default = Nav;
-exports["default"] = _default;
+exports.default = _default;
 Nav.propTypes = {
-  skipLinkId: _propTypes["default"].string,
-  service: _propTypes["default"].string,
-  isExpanded: _propTypes["default"].bool,
-  accountsLinks: _propTypes["default"].object,
-  onNavigating: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
-  additionalSubMenuItems: _propTypes["default"].arrayOf(_propTypes["default"].object)
-};
-Nav.defaultProps = {
-  additionalSubMenuItems: []
+  skipLinkId: _propTypes.default.string,
+  service: _propTypes.default.string,
+  isExpanded: _propTypes.default.bool,
+  accountsLinks: _propTypes.default.object,
+  onNavigating: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  additionalSubMenuItems: _propTypes.default.arrayOf(_propTypes.default.object)
 };

package/lib/Header/Nav/Nav.module.scss

@@ -48,7 +48,6 @@
 .menuWrapper {
   background: $nav-background;
   color: $nav-text;
-  // padding: utils.rem(spacing.$x-small 0);
 }
 
 @include media-queries.mq($from: md) {
@@ -70,15 +69,14 @@
   @include media-queries.mq($from: md) {
     @include layout.container;
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     justify-content: space-between;
   }
 }
 
 a.link,
 .linkStyling {
-  //qualified this with 'a' and 'button' to add specificity to avoid overrides from application css (NW-1253)
+  // qualified this with 'a' and 'button' to add specificity to avoid overrides from application css (NW-1253)
   align-items: center;
   background: none;
   border: utils.rem(spacing.$x-small) solid $nav-link-border;