GN-117 Remove need to assert on dom

src/GlobalNavContext.js

@@ -0,0 +1,23 @@
+import React, { useState, createContext } from "react";
+import PropTypes from "prop-types";
+
+export const GlobalNavContext = createContext();
+
+export const GlobalNavContextProvider = function ({ children }) {
+	const [idOfOpenDropdown, setidOfOpenDropdown] = useState(null);
+
+	const value = {
+		idOfOpenDropdown,
+		setidOfOpenDropdown,
+	};
+
+	return (
+		<GlobalNavContext.Provider value={value}>
+			{children}
+		</GlobalNavContext.Provider>
+	);
+};
+
+GlobalNavContextProvider.propTypes = {
+	children: PropTypes.array,
+};

src/Header/Header.jsx

@@ -15,6 +15,7 @@ import Account from "./Account";
 import SkipLink from "./SkipLink";
 
 import styles from "./Header.module.scss";
+import { GlobalNavContextProvider } from "../GlobalNavContext";
 
 export class Header extends Component {
 	constructor(props) {
@@ -84,7 +85,7 @@ export class Header extends Component {
 	render() {
 		return (
 			this.props.enabled !== false && (
-				<>
+				<GlobalNavContextProvider>
 					<span
 						id="scrim"
 						className={this.state.scrimIsActive ? styles.scrim : undefined}
@@ -171,7 +172,7 @@ export class Header extends Component {
 						<CoronaMessage onResize={this.props.onResize} />
 						<OldIEMessage />
 					</div>
-				</>
+				</GlobalNavContextProvider>
 			)
 		);
 	}

src/Header/Nav/Nav.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
@@ -11,14 +11,18 @@ import {
 	headerClickEventAction,
 } from "../../tracker";
 
-export default class Nav extends Component {
-	constructor(props) {
-		super(props);
+import useClickOutside from "../../useClickOutside";
+import { GlobalNavContext } from "../../GlobalNavContext";
 
-		this.handleAccountNavItemClick = this.handleAccountNavItemClick.bind(this);
-	}
+function Nav(props) {
+	const { accountsLinks } = props;
+	const context = useContext(GlobalNavContext);
+	const { ref } = useClickOutside(
+		context.idOfOpenDropdown,
+		context.setidOfOpenDropdown
+	);
 
-	handleNavItemClick(e) {
+	function handleNavItemClick(e) {
 		e.preventDefault();
 
 		const href = e.currentTarget.getAttribute("href");
@@ -38,7 +42,7 @@ export default class Nav extends Component {
 		);
 	}
 
-	handleAccountNavItemClick(e) {
+	function handleAccountNavItemClick(e) {
 		const href = e.currentTarget.getAttribute("href");
 
 		let eventLabel;
@@ -65,114 +69,113 @@ export default class Nav extends Component {
 		}
 	}
 
-	render() {
-		const { accountsLinks } = this.props;
-
-		// Links from NICE Accounts is an object so flatten to a loop for easier traversal
-		const accountsLinksArray =
-			accountsLinks &&
-			Object.keys(accountsLinks).map((text) => ({
-				text: text,
-				href: accountsLinks[text],
-			}));
-
-		// 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
-		let activeService = null;
-		let internalService = false;
-		let servicesToDisplay = services.external; //default to displaying external services.
-		for (let i = 0; i < services.internal.length; i++) {
-			const internalRootLink = services.internal[i];
-			if (this.props.service && internalRootLink.id === this.props.service) {
-				internalService = true;
-				activeService = internalRootLink;
-				servicesToDisplay = [internalRootLink]; //unlike external, internal services dosn't display other internal services.
-				break;
-			}
+	// Links from NICE Accounts is an object so flatten to a loop for easier traversal
+	const accountsLinksArray =
+		accountsLinks &&
+		Object.keys(accountsLinks).map((text) => ({
+			text: text,
+			href: accountsLinks[text],
+		}));
+
+	// 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
+	let activeService = null;
+	let internalService = false;
+	let servicesToDisplay = services.external; //default to displaying external services.
+	for (let i = 0; i < services.internal.length; i++) {
+		const internalRootLink = services.internal[i];
+		if (props.service && internalRootLink.id === props.service) {
+			internalService = true;
+			activeService = internalRootLink;
+			servicesToDisplay = [internalRootLink]; //unlike external, internal services dosn't display other internal services.
+			break;
 		}
-		if (!internalService) {
-			for (let i = 0; i < services.external.length; i++) {
-				const externalService = services.external[i];
-				if (this.props.service && externalService.id === this.props.service) {
-					activeService = externalService;
-					break;
-				}
+	}
+	if (!internalService) {
+		for (let i = 0; i < services.external.length; i++) {
+			const externalService = services.external[i];
+			if (props.service && externalService.id === props.service) {
+				activeService = externalService;
+				break;
 			}
 		}
-		let additionalSubMenuLinks = [];
-		for (let i = 0; i < this.props.additionalSubMenuItems.length; i++) {
-			const additionalSubMenuItem = this.props.additionalSubMenuItems[i];
-			if (
-				typeof additionalSubMenuItem !== "undefined" &&
-				additionalSubMenuItem.service === this.props.service &&
-				Array.isArray(additionalSubMenuItem.links)
-			) {
-				additionalSubMenuLinks = additionalSubMenuItem.links.map((link) => ({
-					text: link.text,
-					href: link.url,
-				}));
-			}
+	}
+	let additionalSubMenuLinks = [];
+	for (let i = 0; i < props.additionalSubMenuItems.length; i++) {
+		const additionalSubMenuItem = props.additionalSubMenuItems[i];
+		if (
+			typeof additionalSubMenuItem !== "undefined" &&
+			additionalSubMenuItem.service === props.service &&
+			Array.isArray(additionalSubMenuItem.links)
+		) {
+			additionalSubMenuLinks = additionalSubMenuItem.links.map((link) => ({
+				text: link.text,
+				href: link.url,
+			}));
 		}
-		const subLinks =
-			activeService &&
-			activeService.links &&
-			activeService.links.concat(additionalSubMenuLinks);
-
-		return (
-			<div
-				id="header-menu"
-				className={classnames(
-					styles.wrapper,
-					{
-						[styles.wrapperExpanded]: this.props.isExpanded,
-					},
-					{
-						[styles.wrapperWithSubLinks]: subLinks,
-					}
-				)}
-			>
-				<nav className={styles.nav} aria-label="primary navigation">
+	}
+	const subLinks =
+		activeService &&
+		activeService.links &&
+		activeService.links.concat(additionalSubMenuLinks);
+
+	return (
+		<div
+			id="header-menu"
+			className={classnames(
+				styles.wrapper,
+				{
+					[styles.wrapperExpanded]: props.isExpanded,
+				},
+				{
+					[styles.wrapperWithSubLinks]: subLinks,
+				}
+			)}
+			ref={ref}
+		>
+			<nav className={styles.nav} aria-label="primary navigation">
+				<div className={styles.menuWrapper}>
+					<NavLinks
+						handleScrim={props.handleScrim}
+						skipLinkId={props.skipLinkId}
+						servicesToDisplay={servicesToDisplay}
+						currentService={props.service}
+						subLinks={subLinks}
+						onNavigating={props.onNavigating}
+					/>
+				</div>
+			</nav>
+			{accountsLinksArray && (
+				<nav
+					aria-label="My account"
+					className={classnames(styles.nav, styles.myAccount)}
+				>
+					{accountsLinksArray.length > 1 && (
+						<h2 className={styles.myAccountHeading}>My account</h2>
+					)}
 					<div className={styles.menuWrapper}>
-						<NavLinks
-							handleScrim={this.props.handleScrim}
-							skipLinkId={this.props.skipLinkId}
-							servicesToDisplay={servicesToDisplay}
-							currentService={this.props.service}
-							subLinks={subLinks}
-							onNavigating={this.props.onNavigating}
-						/>
+						<ul className={styles.menuList}>
+							{accountsLinksArray.map(({ href, text }) => (
+								<li key={href}>
+									<a
+										href={href}
+										className={styles.link}
+										onClick={handleAccountNavItemClick}
+									>
+										{text}
+									</a>
+								</li>
+							))}
+						</ul>
 					</div>
 				</nav>
-				{accountsLinksArray && (
-					<nav
-						aria-label="My account"
-						className={classnames(styles.nav, styles.myAccount)}
-					>
-						{accountsLinksArray.length > 1 && (
-							<h2 className={styles.myAccountHeading}>My account</h2>
-						)}
-						<div className={styles.menuWrapper}>
-							<ul className={styles.menuList}>
-								{accountsLinksArray.map(({ href, text }) => (
-									<li key={href}>
-										<a
-											href={href}
-											className={styles.link}
-											onClick={this.handleAccountNavItemClick}
-										>
-											{text}
-										</a>
-									</li>
-								))}
-							</ul>
-						</div>
-					</nav>
-				)}
-			</div>
-		);
-	}
+			)}
+		</div>
+	);
 }
 
+export default Nav;
+
 Nav.propTypes = {
 	skipLinkId: PropTypes.string,
 	service: PropTypes.string,

src/Header/Nav/NavLinks/NavLinks.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import classnames from "classnames";
 import FocusTrap from "focus-trap-react";
 import PropTypes from "prop-types";
@@ -7,6 +7,7 @@ import ChevronDown from "@nice-digital/icons/lib/ChevronDown";
 import ChevronUp from "@nice-digital/icons/lib/ChevronUp";
 import SubNav from "../SubNav";
 import Dropdown from "../Dropdown";
+import { GlobalNavContext } from "../../../GlobalNavContext";
 
 import styles from "./NavLinks.module.scss";
 import {
@@ -23,9 +24,9 @@ export function NavLinks({
 	skipLinkId,
 	handleScrim,
 }) {
-	const [idOfOpenDropdown, setidOfOpenDropdown] = useState(null);
-	const [focusTrapActive] = useState(idOfOpenDropdown !== null);
 	const [canUseDOM, setCanUseDOM] = useState(false);
+	const { idOfOpenDropdown, setidOfOpenDropdown } =
+		useContext(GlobalNavContext);
 
 	useEffect(() => {
 		setCanUseDOM(true);
@@ -62,22 +63,6 @@ export function NavLinks({
 		if (ESCAPE_KEYS.includes(String(key))) setidOfOpenDropdown(null);
 	}
 
-	// NOTE: could the following be solved with context?
-	function clickOutsideNav(e) {
-		var thingYouClickedOn = e.target;
-		var areaToAvoid = document.getElementById("header-menu");
-		if (!areaToAvoid.contains(thingYouClickedOn)) {
-			setidOfOpenDropdown(null);
-		}
-	}
-
-	useEventListener(
-		"click",
-		clickOutsideNav,
-		document.querySelector("#global-nav-header")
-	);
-	// ---------------
-
 	useEventListener("keydown", escapeDropdown);
 
 	const options = {
@@ -126,14 +111,16 @@ export function NavLinks({
 										aria-controls={`dropdown-${id}`}
 										aria-expanded={id === idOfOpenDropdown ? true : false}
 									>
-										<span aria-label={abbreviation && title}>{text}</span>{" "}
+										<span aria-label={abbreviation && title}>{text}</span>
 										{id === idOfOpenDropdown ? (
 											<ChevronUp className={styles.icon} pointerEvents="none" />
 										) : (
-											<ChevronDown
-												className={styles.icon}
-												pointerEvents="none"
-											/>
+											<>
+												<ChevronDown
+													className={styles.icon}
+													pointerEvents="none"
+												/>
+											</>
 										)}
 									</button>
 								) : (