GN-139 Conditions and diseases carousel stacking issue

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 {

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,
 };

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 {

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 {

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,

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;

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 {

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;

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;
   }
 }

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;