@nice-digital/global-nav 4.1.729 → 4.1.730-GN-169-Dropdown-open

package/README.md

@@ -42,6 +42,8 @@
 					- [Header.skipLinkId](#headerskiplinkid)
 					- [Header.onNavigating](#headeronnavigating)
 					- [Header.onResize](#headeronresize)
+					- [Header.onDropdownOpen](#headerondropdownopen)
+					- [Header.onDropdownClose](#headerondropdownclose)
 					- [Header.additionalSubMenuItems](#headeradditionalsubmenuitems)
 					- [Header.search](#headersearch)
 					- [Header.search.url](#headersearchurl)
@@ -408,6 +410,53 @@ var global_nav_config = {
 };
 ```
 
+###### Header.onDropdownOpen
+
+- Type: `String`, `Function`
+- Default: `null`
+
+Pass an `onDropdownOpen` property to enable callback when dropdown is open.
+Pass either a function, or the name of a function defined on `window`. E.g.:
+
+```js
+window.onDropdownOpenHandler = function () {
+  // Define your implementation here e.g.:
+  document.querySelector("body").classList.add("global-nav__dropdown--open");
+};
+
+var global_nav_config = {
+  header: {
+      onDropdownOpen: 'onDropdownOpenHandler',
+  },
+};
+```
+
+###### Header.onDropdownClose
+
+- Type: `String`, `Function`
+- Default: `null`
+
+Function parameters:
+
+- `query` (`String`) the query term used in the search
+
+Pass an `onDropdownClose` property to enable callback when dropdown is closed.
+Pass either a function, or the name of a function defined on `window`. E.g.:
+
+```js
+window.onDropdownCloseHandler = function (e) {
+  // Define your implementation here e.g.:
+ document.querySelector("body").classList.remove("global-nav__dropdown--open")
+
+};
+
+var global_nav_config = {
+  header: {
+      onDropdownClose: 'onDropdownCloseHandler',
+  },
+};
+```
+
 ###### Header.additionalSubMenuItems
 
 - Type: `null | Array`

package/lib/Header/Account/Account.js

@@ -165,7 +165,7 @@ function Account(props) {
     "aria-labelledby": "my-account-button",
     onKeyDown: handleKeyDown,
     ref: myAccountMenu
-  }, doesUseIdAM && accountsData.display_name && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", null, accountsData.display_name)), accountsData.links && Object.keys(accountsData.links).map(function (text, i) {
+  }, accountsData.links && Object.keys(accountsData.links).map(function (text, i) {
     return /*#__PURE__*/_react["default"].createElement("li", {
       key: i,
       role: "presentation"

package/lib/Header/Account/Account.module.scss

@@ -106,14 +106,10 @@
     margin: 0;
   }
 
-  span,
   a {
+    color: $nds-colour-link;
     display: block;
     padding: rem($nds-spacing-small $nds-spacing-medium);
-  }
-
-  a {
-    color: $nds-colour-link;
     text-decoration: none;
     white-space: nowrap;
 

package/lib/Header/Header.js

@@ -103,12 +103,40 @@ var Header = /*#__PURE__*/function (_Component) {
     }
   };
 
+  _proto.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) {
+      var onDropdownOpenCallback = typeof onDropdownOpen === "function" ? onDropdownOpen : window[onDropdownOpen];
+
+      if (idOfOpenDropdown !== null && typeof onDropdownOpenCallback === "function") {
+        onDropdownOpenCallback();
+        return true;
+      }
+    }
+
+    if (onDropdownClose) {
+      var onDropdownCloseCallback = typeof onDropdownClose === "function" ? onDropdownClose : window[onDropdownClose];
+
+      if (idOfOpenDropdown == null && typeof onDropdownCloseCallback === "function") {
+        onDropdownCloseCallback();
+        return true;
+      }
+    }
+
+    return false;
+  };
+
   _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,
@@ -184,6 +212,8 @@ Header.propTypes = {
   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)
 };
 Header.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-digital/global-nav",
-  "version": "4.1.729",
+  "version": "4.1.730-GN-169-Dropdown-open",
   "description": "Global header and footer components for NICE digital services",
   "main": "lib/index.js",
   "types": "./types.d.ts",