From 9dcd3247e4da2d0d8b25396b44d2258b38871dbc Mon Sep 17 00:00:00 2001
From: "w@rren" <w@rren.dev>
Date: Mon, 22 Nov 2021 17:23:07 +0000
Subject: [PATCH] Set base high z-index

---
 src/Common.module.scss                        |  4 +-
 src/Footer/Services/Services.jsx              | 68 ++++++++++++-------
 src/Header/Account/Account.module.scss        |  2 +-
 src/Header/Header.module.scss                 |  4 +-
 src/Header/Nav/Nav.module.scss                |  2 +-
 src/Header/Nav/NavLinks/NavLinks.module.scss  |  2 +-
 .../Autocomplete/Autocomplete.module.scss     |  6 +-
 src/Header/Search/Search.module.scss          |  2 +-
 src/Header/SkipLink/SkipLink.module.scss      |  3 +-
 src/Header/_header-settings.scss              |  2 +
 10 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/src/Common.module.scss b/src/Common.module.scss
index 3144a907..04e24d22 100644
--- a/src/Common.module.scss
+++ b/src/Common.module.scss
@@ -1,3 +1,5 @@
+@import 'Header/header-settings';
+
 .link .tooltip {
   clip: rect(1px 1px 1px 1px);
   clip: rect(1px, 1px, 1px, 1px);
@@ -18,7 +20,7 @@
   padding: rem(0 $nds-spacing-x-small);
   position: absolute;
   width: auto;
-  z-index: 1;
+  z-index: $base-z-index;
 }
 
 .visuallyHidden {
diff --git a/src/Footer/Services/Services.jsx b/src/Footer/Services/Services.jsx
index c364e8fb..06034ce5 100644
--- a/src/Footer/Services/Services.jsx
+++ b/src/Footer/Services/Services.jsx
@@ -12,32 +12,14 @@ export default class Services extends Component {
 			<nav className={styles.wrapper} aria-label="Our services">
 				<ul className={styles.list}>
 					{links.external.map(
-						function ({ href, id, text, abbreviation, title }) {
-							return (
-								<li key={id}>
-									<TrackedLink
-										href={href}
-										eventAction={footerClickEventAction}
-										eventLabel={text}
-										aria-current={id == this.props.service ? "true" : null}
-										className={styles.link}
-									>
-										{abbreviation ? (
-											<>
-												<abbr title={title}>
-													{text}{" "}
-													<span className={styles.visuallyHidden}>{title}</span>
-												</abbr>
-												<span aria-hidden="true" className={styles.tooltip}>
-													{title}
-												</span>
-											</>
-										) : (
-											text
-										)}
-									</TrackedLink>
-								</li>
-							);
+						function (link) {
+							if (link.nestedLinks) {
+								return link.nestedLinks.map((nestedLink) => {
+									return <FooterLink key={nestedLink.id} {...nestedLink} />;
+								});
+							} else {
+								return <FooterLink key={link.id} {...link} />;
+							}
 						}.bind(this)
 					)}
 				</ul>
@@ -46,6 +28,40 @@ export default class Services extends Component {
 	}
 }
 
+FooterLink.propTypes = {
+	href: PropTypes.string,
+	id: PropTypes.string,
+	text: PropTypes.string,
+	abbreviation: PropTypes.string,
+	title: PropTypes.string,
+};
+
+function FooterLink({ href, text, abbreviation, title }) {
+	return (
+		<li>
+			<TrackedLink
+				href={href}
+				eventAction={footerClickEventAction}
+				eventLabel={text}
+				className={styles.link}
+			>
+				{abbreviation ? (
+					<>
+						<abbr title={title}>
+							{text} <span className={styles.visuallyHidden}>{title}</span>
+						</abbr>
+						<span aria-hidden="true" className={styles.tooltip}>
+							{title}
+						</span>
+					</>
+				) : (
+					text
+				)}
+			</TrackedLink>
+		</li>
+	);
+}
+
 Services.propTypes = {
 	service: PropTypes.string,
 };
diff --git a/src/Header/Account/Account.module.scss b/src/Header/Account/Account.module.scss
index 35e4a03e..78edda48 100644
--- a/src/Header/Account/Account.module.scss
+++ b/src/Header/Account/Account.module.scss
@@ -62,7 +62,7 @@
   position: absolute;
   right: 0;
   top: 100%;
-  z-index: 1;
+  z-index: $base-z-index;
 
   // We move focus when we expand via keyboard navigation
   &:focus {
diff --git a/src/Header/Header.module.scss b/src/Header/Header.module.scss
index 3a749317..7138e926 100644
--- a/src/Header/Header.module.scss
+++ b/src/Header/Header.module.scss
@@ -6,7 +6,7 @@
   box-sizing: border-box;
   font-family: unquote($nds-font-family-sans);
   position: relative;
-  z-index: 2;
+  z-index: $base-z-index;
 
   *,
   *:before,
@@ -131,7 +131,7 @@
     position: fixed;
     top: 0;
     width: 100vw;
-    z-index: 2;
+    z-index: $base-z-index;
   }
 
   .header {
diff --git a/src/Header/Nav/Nav.module.scss b/src/Header/Nav/Nav.module.scss
index 5952afb8..6403d8b9 100644
--- a/src/Header/Nav/Nav.module.scss
+++ b/src/Header/Nav/Nav.module.scss
@@ -98,7 +98,7 @@ a.link,
     color: $colour-nav-text;
     outline: rem($nds-spacing-x-small) solid $nds-colour-focus-inverse;
     outline-offset: rem(-$nds-spacing-small);
-    z-index: 1; // Push above the adjacent nav items
+    z-index: $base-z-index + 1; // Push above the adjacent nav items
   }
 
   &:active,
diff --git a/src/Header/Nav/NavLinks/NavLinks.module.scss b/src/Header/Nav/NavLinks/NavLinks.module.scss
index eb3aac15..d531bb57 100644
--- a/src/Header/Nav/NavLinks/NavLinks.module.scss
+++ b/src/Header/Nav/NavLinks/NavLinks.module.scss
@@ -24,7 +24,7 @@ button.link {
   left: 0;
   position: relative;
   width: 100%;
-  z-index: 1;
+  z-index: $base-z-index;
 
   &.active {
     display: block;
diff --git a/src/Header/Search/Autocomplete/Autocomplete.module.scss b/src/Header/Search/Autocomplete/Autocomplete.module.scss
index 76014399..fa0d9d70 100644
--- a/src/Header/Search/Autocomplete/Autocomplete.module.scss
+++ b/src/Header/Search/Autocomplete/Autocomplete.module.scss
@@ -27,12 +27,12 @@
       margin: 0 !important;
       max-width: 100% !important;
       position: relative;
-      z-index: 101;
+      z-index: $base-z-index + 1;
 
       &:focus {
         outline: 3px solid $nds-colour-focus;
         outline-offset: -3px;
-        z-index: 1;
+        z-index: $base-z-index - 1;
       }
 
       &::placeholder {
@@ -103,7 +103,7 @@
       left: 0;
       position: absolute;
       top: 100%;
-      z-index: 100;
+      z-index: $base-z-index;
     }
 
     .autocomplete__menu--inline {
diff --git a/src/Header/Search/Search.module.scss b/src/Header/Search/Search.module.scss
index 2e345d92..eaf80ca2 100644
--- a/src/Header/Search/Search.module.scss
+++ b/src/Header/Search/Search.module.scss
@@ -29,7 +29,7 @@
   right: 0;
   text-align: center;
   top: 0;
-  z-index: 101; // To sit above the search box so the focus outline surrounds the button
+  z-index: $base-z-index + 2; // To sit above the search box so the focus outline surrounds the button
 
   &:focus {
     @include nds-default-focus-style;
diff --git a/src/Header/SkipLink/SkipLink.module.scss b/src/Header/SkipLink/SkipLink.module.scss
index 92db94e4..7c015b06 100644
--- a/src/Header/SkipLink/SkipLink.module.scss
+++ b/src/Header/SkipLink/SkipLink.module.scss
@@ -1,4 +1,5 @@
 @import '~@nice-digital/nds-core/scss/core';
+@import '../header-settings';
 
 .link {
   clip: rect(1px 1px 1px 1px);
@@ -22,6 +23,6 @@
     top: rem($nds-spacing-x-small);
     white-space: nowrap;
     width: auto;
-    z-index: 5;
+    z-index: $base-z-index + 5;
   }
 }
diff --git a/src/Header/_header-settings.scss b/src/Header/_header-settings.scss
index 2b5950d6..9fa22717 100644
--- a/src/Header/_header-settings.scss
+++ b/src/Header/_header-settings.scss
@@ -9,3 +9,5 @@ $colour-nav-background: $nds-colour-nice-teal;
 $colour-nav-text: $nds-colour-text-inverse;
 
 $search-height: 40;
+
+$base-z-index: 99990;