share zindex value for edition switcher banner with sticky labs header banner (#14612)

Author: cemms1

dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx

@@ -19,7 +19,7 @@ const container = css`
 	position: relative;
 	top: 0;
 	background-color: ${palette.brand[800]};
-	z-index: ${getZIndex('editionSwitcherBanner')};
+	z-index: ${getZIndex('subNavBanner')};
 `;
 
 const content = css`

dotcom-rendering/src/layouts/AudioLayout.tsx

@@ -191,7 +191,7 @@ export const AudioLayout = (props: WebProps) => {
 			</div>
 
 			{format.theme === ArticleSpecial.Labs && (
-				<Stuck>
+				<Stuck zIndex="subNavBanner">
 					<Section
 						fullWidth={true}
 						showTopBorder={false}

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -232,7 +232,7 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
 						/>
 
 						{format.theme === ArticleSpecial.Labs && (
-							<Stuck>
+							<Stuck zIndex="subNavBanner">
 								<Section
 									fullWidth={true}
 									showTopBorder={false}

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -220,7 +220,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 			)}
 
 			{format.theme === ArticleSpecial.Labs && (
-				<Stuck>
+				<Stuck zIndex="subNavBanner">
 					<Section
 						fullWidth={true}
 						showTopBorder={false}

dotcom-rendering/src/layouts/ImmersiveLayout.tsx

@@ -333,7 +333,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 			)}
 
 			{format.theme === ArticleSpecial.Labs && (
-				<Stuck>
+				<Stuck zIndex="subNavBanner">
 					<Section
 						fullWidth={true}
 						showTopBorder={false}

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -298,7 +298,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					</div>
 
 					{format.theme === ArticleSpecial.Labs && (
-						<Stuck>
+						<Stuck zIndex="subNavBanner">
 							<Section
 								fullWidth={true}
 								showTopBorder={false}

dotcom-rendering/src/layouts/ShowcaseLayout.tsx

@@ -332,7 +332,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 									/>
 								</Stuck>
 							</div>
-							<Stuck zIndex="stickyAdWrapperLabsHeader">
+							<Stuck zIndex="subNavBanner">
 								<Section
 									fullWidth={true}
 									showTopBorder={false}

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -430,7 +430,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 			)}
 
 			{format.theme === ArticleSpecial.Labs && (
-				<Stuck>
+				<Stuck zIndex="subNavBanner">
 					<Section
 						fullWidth={true}
 						showTopBorder={false}

dotcom-rendering/src/lib/getZIndex.ts

@@ -71,9 +71,9 @@ const indices = [
 	'searchHeaderLink',
 	'TheGuardian',
 
-	// The edition switcher banner needs to be below the Edition selector
-	// and the myAccount dropdown in the nav
-	'editionSwitcherBanner',
+	// Banners appearing directly under the nav need to be below
+	// the Edition selector and the myAccount dropdown in the nav
+	'subNavBanner',
 
 	// Sticky table of contents element
 	'tableOfContents',