@nice-digital/global-nav 5.0.940 → 7.0.930

package/lib/Header/Header.js

@@ -1,220 +1,394 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = exports.Header = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
-
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OldHeader = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _LogoFull = _interopRequireDefault(require("@nice-digital/icons/lib/LogoFull"));
-
 var _tracker = require("./../tracker");
-
 var _OldIEMessage = _interopRequireDefault(require("./OldIEMessage"));
-
 var _Nav = _interopRequireDefault(require("./Nav"));
-
 var _Search = _interopRequireDefault(require("./Search"));
-
 var _Account = _interopRequireDefault(require("./Account"));
-
 var _SkipLink = _interopRequireDefault(require("./SkipLink"));
-
 var _utils = require("../utils");
-
 var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
-
 var _HeaderContext = require("./context/HeaderContext");
-
+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; }
-
-var Header = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(Header, _Component);
-
-  function Header(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-    _this.state = {
-      isExpanded: false,
-      isLoggedIn: false,
-      accountsData: null,
-      scrimIsActive: false
-    };
-    _this.handleMobileMenuBtnClick = _this.handleMobileMenuBtnClick.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleLoginStatusChecked = _this.handleLoginStatusChecked.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleLogoClick = _this.handleLogoClick.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
-  }
-
-  var _proto = Header.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    if (!document.getElementById(this.props.skipLinkId)) {
+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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Header = function Header(_ref) {
+  var _ref$skipLinkId = _ref.skipLinkId,
+    skipLinkId = _ref$skipLinkId === void 0 ? "content-start" : _ref$skipLinkId,
+    _ref$renderSearchOnly = _ref.renderSearchOnly,
+    renderSearchOnly = _ref$renderSearchOnly === void 0 ? false : _ref$renderSearchOnly,
+    onNavigating = _ref.onNavigating,
+    _ref$search = _ref.search,
+    search = _ref$search === void 0 ? {} : _ref$search,
+    enabled = _ref.enabled,
+    onRendered = _ref.onRendered,
+    auth = _ref.auth,
+    service = _ref.service,
+    _ref$additionalSubMen = _ref.additionalSubMenuItems,
+    additionalSubMenuItems = _ref$additionalSubMen === void 0 ? [] : _ref$additionalSubMen,
+    onDropdownOpen = _ref.onDropdownOpen,
+    onDropdownClose = _ref.onDropdownClose;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isLoggedIn = _useState4[0],
+    setIsLoggedIn = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    accountsData = _useState6[0],
+    setAccountsData = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (!document.getElementById(skipLinkId)) {
       var firstH1OnPage = document.getElementsByTagName("h1")[0];
-      firstH1OnPage ? firstH1OnPage.setAttribute("id", this.props.skipLinkId) : console.warn("Global nav \"skip to link\" can't find a H1 tag or an element with the ID of \"" + this.props.skipLinkId + "\"");
+      if (firstH1OnPage) {
+        firstH1OnPage.setAttribute("id", skipLinkId);
+      }
     }
-  };
-
-  _proto.handleMobileMenuBtnClick = function handleMobileMenuBtnClick() {
-    var _this2 = this;
-
+  }, [skipLinkId]);
+  var handleMobileMenuBtnClick = function handleMobileMenuBtnClick() {
     (0, _tracker.trackEvent)(_tracker.defaultEventCategory, _tracker.headerClickEventAction, "Menu");
-    this.setState(function (prevState) {
-      (0, _newArrowCheck2["default"])(this, _this2);
-      return {
-        isExpanded: !prevState.isExpanded
-      };
-    }.bind(this));
+    setIsExpanded(function (prevState) {
+      return !prevState;
+    });
   };
-
-  _proto.handleLogoClick = function handleLogoClick(e) {
+  var handleLogoClick = function handleLogoClick(e) {
     e.preventDefault();
     var href = e.currentTarget.getAttribute("href");
     (0, _tracker.trackEvent)(_tracker.defaultEventCategory, _tracker.headerClickEventAction, "Logo", null, href, function () {
-      window.location.href = href;
+      window.location.assign(href);
     });
   };
-
-  _proto.handleLoginStatusChecked = function handleLoginStatusChecked(accountsData) {
+  var handleLoginStatusChecked = function handleLoginStatusChecked(accountsData) {
     if (accountsData.display_name) {
-      this.setState({
-        isLoggedIn: true,
-        accountsData: accountsData
-      });
+      setIsLoggedIn(true);
+      setAccountsData(accountsData);
     } else {
-      this.setState({
-        isLoggedIn: false,
-        accountsData: accountsData
-      });
+      setIsLoggedIn(false);
+      setAccountsData(accountsData);
     }
   };
-
-  _proto.dropdownToggleHandler = function dropdownToggleHandler(idOfOpenDropdown) {
+  var dropdownToggleHandler = function dropdownToggleHandler(idOfOpenDropdown) {
     // If we've got an onDropdownOpen or onDropdownClose prop call the onDropdownOpen or onDropdownClose callback based on idOfOpenDropdown.
-    var _this$props = this.props,
-        onDropdownOpen = _this$props.onDropdownOpen,
-        onDropdownClose = _this$props.onDropdownClose;
 
     if (onDropdownOpen && idOfOpenDropdown !== null) {
       var onDropdownOpenCallback = (0, _utils.getCallbackFunction)(onDropdownOpen);
-
       if (onDropdownOpenCallback) {
         onDropdownOpenCallback();
       }
     }
-
     if (onDropdownClose && idOfOpenDropdown == null) {
       var onDropdownCloseCallback = (0, _utils.getCallbackFunction)(onDropdownClose);
-
       if (onDropdownCloseCallback) {
         onDropdownCloseCallback();
       }
     }
   };
-
-  _proto.render = function render() {
-    var _this3 = this;
-
-    return this.props.enabled !== false && /*#__PURE__*/_react["default"].createElement(_HeaderContext.HeaderContextProvider, null, /*#__PURE__*/_react["default"].createElement(_HeaderContext.HeaderContext.Consumer, null, function (_ref) {
-      (0, _newArrowCheck2["default"])(this, _this3);
-      var idOfOpenDropdown = _ref.idOfOpenDropdown;
-      this.dropdownToggleHandler(idOfOpenDropdown);
-      return /*#__PURE__*/_react["default"].createElement("span", {
-        id: "scrim",
-        className: idOfOpenDropdown !== null ? _HeaderModule["default"].scrim : undefined,
-        "aria-hidden": "true"
-      });
-    }.bind(this)), /*#__PURE__*/_react["default"].createElement("div", {
-      className: _HeaderModule["default"].header,
+  if (renderSearchOnly) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, _objectSpread({
+      skipLinkId: skipLinkId,
+      onNavigating: onNavigating
+    }, search));
+  }
+  return enabled !== false && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HeaderContext.HeaderContextProvider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderContext.HeaderContext.Consumer, {
+      children: function children(_ref2) {
+        var idOfOpenDropdown = _ref2.idOfOpenDropdown;
+        dropdownToggleHandler(idOfOpenDropdown);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          id: "scrim",
+          className: idOfOpenDropdown !== null ? _HeaderModule.default.scrim : undefined,
+          "aria-hidden": "true"
+        });
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _HeaderModule.default.header,
       "data-tracking": "Global nav",
-      id: "top"
-    }, /*#__PURE__*/_react["default"].createElement("header", {
-      "aria-label": "Site header"
-    }, /*#__PURE__*/_react["default"].createElement("ul", {
-      className: _HeaderModule["default"].a11yLinks,
-      "aria-label": "Accessibility links"
-    }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_SkipLink["default"], {
-      to: "#" + this.props.skipLinkId
-    }, "Skip to content")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_SkipLink["default"], {
-      to: "https://www.nice.org.uk/accessibility"
-    }, "Accessibility help"))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: _HeaderModule["default"].container
-    }, /*#__PURE__*/_react["default"].createElement("a", {
-      href: "https://www.nice.org.uk/",
-      "aria-label": "Home",
-      className: _HeaderModule["default"].home,
-      onClick: this.handleLogoClick,
-      "data-tracking": "Logo"
-    }, /*#__PURE__*/_react["default"].createElement(_LogoFull["default"], {
-      className: _HeaderModule["default"].icon,
-      width: null,
-      height: null
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: _HeaderModule["default"].wrapper
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: _HeaderModule["default"].search
-    }, this.props.search && /*#__PURE__*/_react["default"].createElement(_Search["default"], (0, _extends2["default"])({
-      skipLinkId: this.props.skipLinkId,
-      onNavigating: this.props.onNavigating
-    }, this.props.search))), /*#__PURE__*/_react["default"].createElement("button", {
-      className: _HeaderModule["default"].mobileMenuBtn,
-      id: "header-menu-button",
-      type: "button",
-      "aria-controls": "header-menu",
-      "aria-expanded": this.state.isExpanded,
-      "aria-haspopup": "menu",
-      "aria-label": this.state.isExpanded ? "Close site menu" : "Expand site menu",
-      onClick: this.handleMobileMenuBtnClick
-    }, this.state.isExpanded ? "Close" : "Menu"), this.props.auth !== false && /*#__PURE__*/_react["default"].createElement("div", {
-      className: _HeaderModule["default"].account
-    }, /*#__PURE__*/_react["default"].createElement(_Account["default"], (0, _extends2["default"])({
-      onLoginStatusChecked: this.handleLoginStatusChecked,
-      isLoggedIn: this.state.isLoggedIn,
-      accountsData: this.state.accountsData
-    }, this.props.auth))))), /*#__PURE__*/_react["default"].createElement(_Nav["default"], {
-      skipLinkId: this.props.skipLinkId,
-      service: this.props.service,
-      isExpanded: this.state.isExpanded,
-      accountsLinks: this.state.accountsData && this.state.accountsData.links,
-      onNavigating: this.props.onNavigating,
-      additionalSubMenuItems: this.props.additionalSubMenuItems
-    })), /*#__PURE__*/_react["default"].createElement(_OldIEMessage["default"], null)));
-  };
-
-  return Header;
-}(_react.Component);
-
-exports.Header = Header;
-Header.propTypes = {
-  service: _propTypes["default"].string,
-  skipLinkId: _propTypes["default"].string,
-  enabled: _propTypes["default"].bool,
-  search: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
-  auth: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
-  onNavigating: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
-  onResize: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
-  onDropdownOpen: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
-  onDropdownClose: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]),
-  additionalSubMenuItems: _propTypes["default"].arrayOf(_propTypes["default"].object)
+      id: "top",
+      ref: onRendered,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+        "aria-label": "Site header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+          className: _HeaderModule.default.a11yLinks,
+          "aria-label": "Accessibility links",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
+              to: "#".concat(skipLinkId),
+              children: "Skip to content"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
+              to: "https://www.nice.org.uk/accessibility",
+              children: "Accessibility help"
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _HeaderModule.default.container,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: "https://www.nice.org.uk/",
+            "aria-label": "Home",
+            className: _HeaderModule.default.home,
+            onClick: handleLogoClick,
+            "data-tracking": "Logo",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoFull.default, {
+              className: _HeaderModule.default.icon,
+              width: null,
+              height: null
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _HeaderModule.default.wrapper,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _HeaderModule.default.search,
+              children: search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, _objectSpread({
+                skipLinkId: skipLinkId,
+                onNavigating: onNavigating
+              }, search))
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              className: _HeaderModule.default.mobileMenuBtn,
+              id: "header-menu-button",
+              type: "button",
+              "aria-controls": "header-menu",
+              "aria-expanded": isExpanded,
+              "aria-haspopup": "menu",
+              "aria-label": isExpanded ? "Close site menu" : "Expand site menu",
+              onClick: handleMobileMenuBtnClick,
+              children: isExpanded ? "Close" : "Menu"
+            }), auth !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _HeaderModule.default.account,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, _objectSpread({
+                onLoginStatusChecked: handleLoginStatusChecked,
+                isLoggedIn: isLoggedIn,
+                accountsData: accountsData
+              }, auth))
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default, {
+          skipLinkId: skipLinkId,
+          service: service,
+          isExpanded: isExpanded,
+          accountsLinks: accountsData && accountsData.links,
+          onNavigating: onNavigating,
+          additionalSubMenuItems: additionalSubMenuItems
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OldIEMessage.default, {})]
+    })]
+  });
 };
-Header.defaultProps = {
-  search: {},
-  skipLinkId: "content-start",
-  additionalSubMenuItems: []
+var OldHeader = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(OldHeader, _Component);
+  var _super = _createSuper(OldHeader);
+  function OldHeader(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, OldHeader);
+    _this = _super.call(this, props);
+    _this.state = {
+      isExpanded: false,
+      isLoggedIn: false,
+      accountsData: null,
+      scrimIsActive: false
+    };
+    _this.handleMobileMenuBtnClick = _this.handleMobileMenuBtnClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleLoginStatusChecked = _this.handleLoginStatusChecked.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleLogoClick = _this.handleLogoClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.headerRef = /*#__PURE__*/_react.default.createRef(null);
+    return _this;
+  }
+  (0, _createClass2.default)(OldHeader, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!document.getElementById(this.props.skipLinkId)) {
+        var firstH1OnPage = document.getElementsByTagName("h1")[0];
+        if (firstH1OnPage) firstH1OnPage.setAttribute("id", this.props.skipLinkId);
+      }
+    }
+  }, {
+    key: "handleMobileMenuBtnClick",
+    value: function handleMobileMenuBtnClick() {
+      (0, _tracker.trackEvent)(_tracker.defaultEventCategory, _tracker.headerClickEventAction, "Menu");
+      this.setState(function (prevState) {
+        return {
+          isExpanded: !prevState.isExpanded
+        };
+      });
+    }
+  }, {
+    key: "handleLogoClick",
+    value: function handleLogoClick(e) {
+      e.preventDefault();
+      var href = e.currentTarget.getAttribute("href");
+      (0, _tracker.trackEvent)(_tracker.defaultEventCategory, _tracker.headerClickEventAction, "Logo", null, href, function () {
+        window.location.assign(href);
+      });
+    }
+  }, {
+    key: "handleLoginStatusChecked",
+    value: function handleLoginStatusChecked(accountsData) {
+      if (accountsData.display_name) {
+        this.setState({
+          isLoggedIn: true,
+          accountsData: accountsData
+        });
+      } else {
+        this.setState({
+          isLoggedIn: false,
+          accountsData: accountsData
+        });
+      }
+    }
+  }, {
+    key: "dropdownToggleHandler",
+    value: function dropdownToggleHandler(idOfOpenDropdown) {
+      // If we've got an onDropdownOpen or onDropdownClose prop call the onDropdownOpen or onDropdownClose callback based on idOfOpenDropdown.
+      var _this$props = this.props,
+        onDropdownOpen = _this$props.onDropdownOpen,
+        onDropdownClose = _this$props.onDropdownClose;
+      if (onDropdownOpen && idOfOpenDropdown !== null) {
+        var onDropdownOpenCallback = (0, _utils.getCallbackFunction)(onDropdownOpen);
+        if (onDropdownOpenCallback) {
+          onDropdownOpenCallback();
+        }
+      }
+      if (onDropdownClose && idOfOpenDropdown == null) {
+        var onDropdownCloseCallback = (0, _utils.getCallbackFunction)(onDropdownClose);
+        if (onDropdownCloseCallback) {
+          onDropdownCloseCallback();
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (this.props.renderSearchOnly) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, _objectSpread({
+          skipLinkId: this.props.skipLinkId,
+          onNavigating: this.props.onNavigating
+        }, this.props.search));
+      }
+      return this.props.enabled !== false && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HeaderContext.HeaderContextProvider, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderContext.HeaderContext.Consumer, {
+          children: function children(_ref3) {
+            var idOfOpenDropdown = _ref3.idOfOpenDropdown;
+            _this2.dropdownToggleHandler(idOfOpenDropdown);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              id: "scrim",
+              className: idOfOpenDropdown !== null ? _HeaderModule.default.scrim : undefined,
+              "aria-hidden": "true"
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _HeaderModule.default.header,
+          "data-tracking": "Global nav",
+          id: "top",
+          ref: this.props.onRendered,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+            "aria-label": "Site header",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+              className: _HeaderModule.default.a11yLinks,
+              "aria-label": "Accessibility links",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
+                  to: "#".concat(this.props.skipLinkId),
+                  children: "Skip to content"
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
+                  to: "https://www.nice.org.uk/accessibility",
+                  children: "Accessibility help"
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: _HeaderModule.default.container,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: "https://www.nice.org.uk/",
+                "aria-label": "Home",
+                className: _HeaderModule.default.home,
+                onClick: this.handleLogoClick,
+                "data-tracking": "Logo",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoFull.default, {
+                  className: _HeaderModule.default.icon,
+                  width: null,
+                  height: null
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: _HeaderModule.default.wrapper,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: _HeaderModule.default.search,
+                  children: this.props.search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, _objectSpread({
+                    skipLinkId: this.props.skipLinkId,
+                    onNavigating: this.props.onNavigating
+                  }, this.props.search))
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                  className: _HeaderModule.default.mobileMenuBtn,
+                  id: "header-menu-button",
+                  type: "button",
+                  "aria-controls": "header-menu",
+                  "aria-expanded": this.state.isExpanded,
+                  "aria-haspopup": "menu",
+                  "aria-label": this.state.isExpanded ? "Close site menu" : "Expand site menu",
+                  onClick: this.handleMobileMenuBtnClick,
+                  children: this.state.isExpanded ? "Close" : "Menu"
+                }), this.props.auth !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: _HeaderModule.default.account,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, _objectSpread({
+                    onLoginStatusChecked: this.handleLoginStatusChecked,
+                    isLoggedIn: this.state.isLoggedIn,
+                    accountsData: this.state.accountsData
+                  }, this.props.auth))
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default, {
+              skipLinkId: this.props.skipLinkId,
+              service: this.props.service,
+              isExpanded: this.state.isExpanded,
+              accountsLinks: this.state.accountsData && this.state.accountsData.links,
+              onNavigating: this.props.onNavigating,
+              additionalSubMenuItems: this.props.additionalSubMenuItems
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OldIEMessage.default, {})]
+        })]
+      });
+    }
+  }]);
+  return OldHeader;
+}(_react.Component); //TODO convert proptypes to typescript types
+exports.OldHeader = OldHeader;
+Header.propTypes = {
+  service: _propTypes.default.string,
+  skipLinkId: _propTypes.default.string,
+  enabled: _propTypes.default.bool,
+  search: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  auth: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  onNavigating: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  onResize: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  onDropdownOpen: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  onDropdownClose: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  onRendered: _propTypes.default.func,
+  additionalSubMenuItems: _propTypes.default.arrayOf(_propTypes.default.object),
+  renderSearchOnly: _propTypes.default.bool
 };
 var _default = Header;
-exports["default"] = _default;
+exports.default = _default;

package/lib/Header/Header.module.scss

@@ -84,7 +84,7 @@
   flex-grow: 1;
   float: left;
   margin-right: utils.rem(spacing.$medium);
-  min-width: percentage(math.div(2, 3));
+  min-width: math.percentage(math.div(2, 3));
 }
 
 .mobileMenuBtn {
@@ -133,7 +133,7 @@
 
 @include media-queries.mq($from: md) {
   .scrim {
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0 0 0 / 70%);
     display: block;
     left: 0;
     min-height: 100vh;