Refactor getZIndex (#12900)

Changed the function to return just the `z-index` value rather than the CSS declaration. This should prove more flexible. One example of this is that it can be used with `!important` without requiring an addition to the API.

It also makes it easier to test. As a consequence this change also updates the tests to more accurately reflect that we care what the z-indices are relative to one another, not their absolute values.

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -306,7 +306,7 @@ const mobileStickyAdStyles = css`
 	margin: 0 auto;
 	right: 0;
 	left: 0;
-	${getZIndex('mobileSticky')}
+	z-index: ${getZIndex('mobileSticky')};
 	${from.phablet} {
 		display: none;
 	}

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -223,7 +223,7 @@ const immersiveWrapper = css`
         This z-index is what ensures the headline text shows above the pseudo black
         box that extends the black background to the right
     */
-	${getZIndex('articleHeadline')}
+	z-index: ${getZIndex('articleHeadline')};
 	${until.mobileLandscape} {
 		margin-right: 40px;
 	}

dotcom-rendering/src/components/Card/Card.tsx

@@ -365,9 +365,9 @@ export const Card = ({
 				href={`${linkTo}#comments`}
 				cssOverrides={css`
 					/* See: https://css-tricks.com/nested-links/ */
-					${getZIndex('card-nested-link')}
+					z-index: ${getZIndex('card-nested-link')};
 					/* The following styles turn off those provided by Link */
-				color: inherit;
+					color: inherit;
 					/* stylelint-disable-next-line property-disallowed-list */
 					font-family: inherit;
 					font-size: inherit;
@@ -614,7 +614,9 @@ export const Card = ({
 								<div
 									css={css`
 										position: relative;
-										${getZIndex('card-nested-link')}
+										z-index: ${getZIndex(
+											'card-nested-link',
+										)};
 									`}
 								>
 									<Island
@@ -654,7 +656,9 @@ export const Card = ({
 										css={css`
 											display: block;
 											position: relative;
-											${getZIndex('card-nested-link')}
+											z-index: ${getZIndex(
+												'card-nested-link',
+											)};
 										`}
 									>
 										<Island

dotcom-rendering/src/components/Card/components/CardBranding.tsx

@@ -35,7 +35,7 @@ const brandingWrapperStyle = css`
 	text-align: right;
 	flex: auto;
 	/* See: https://css-tricks.com/nested-links/ */
-	${getZIndex('card-nested-link')}
+	z-index: ${getZIndex('card-nested-link')};
 	position: relative;
 `;
 

dotcom-rendering/src/components/Card/components/CardLink.tsx

@@ -4,7 +4,7 @@ import { getZIndex } from '../../../lib/getZIndex';
 
 const fauxLinkStyles = css`
 	position: absolute;
-	${getZIndex('card-link')};
+	z-index: ${getZIndex('card-link')};
 	top: 0;
 	right: 0;
 	bottom: 0;

dotcom-rendering/src/components/CardHeadline.tsx

@@ -119,7 +119,7 @@ const getFontSize = (
 const sublinkStyles = css`
 	display: block;
 	/* See: https://css-tricks.com/nested-links/ */
-	${getZIndex('card-nested-link')}
+	z-index: ${getZIndex('card-nested-link')};
 	/* The following styles turn off those provided by Link */
 	color: inherit;
 	text-decoration: none;

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

@@ -255,7 +255,7 @@ const buttonContainerStyle = css`
 	flex-direction: column;
 	justify-content: center;
 	position: absolute;
-	${getZIndex('onwardsCarousel')}
+	z-index: ${getZIndex('onwardsCarousel')};
 	height: 100%;
 	padding-bottom: 36px; /* Align buttons centrally with cards */
 

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

@@ -189,7 +189,7 @@ const buttonContainerStyle = css`
 	flex-direction: column;
 	justify-content: center;
 	position: absolute;
-	${getZIndex('onwardsCarousel')}
+	z-index: ${getZIndex('onwardsCarousel')};
 	height: 100%;
 	padding-bottom: 36px; /* Align buttons centrally with cards */
 

dotcom-rendering/src/components/Details.tsx

@@ -36,7 +36,7 @@ const Position = ({
 			css={css`
 				/* Decide where the content revealed by details appears */
 				position: absolute;
-				${getZIndex('summaryDetails')}
+				z-index: ${getZIndex('summaryDetails')};
 				${positionStyles}
 			`}
 		>

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

@@ -42,7 +42,7 @@ interface Props {
 }
 
 const ulStyles = css`
-	${getZIndex('dropdown')}
+	z-index: ${getZIndex('dropdown')};
 	list-style: none;
 	/* https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility_concerns */
 	/* Needs double escape char: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#es2018_revision_of_illegal_escape_sequences */

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

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

dotcom-rendering/src/components/ExpandableMarketingCardSwipeable.tsx

@@ -35,7 +35,7 @@ const hideBannerStyles = css`
 const stickyContainerStyles = css`
 	position: sticky;
 	top: 0;
-	${getZIndex('expandableMarketingCardOverlay')};
+	z-index: ${getZIndex('expandableMarketingCardOverlay')};
 
 	/* The component slides in from the left-hand side */
 	animation: slidein 2.4s linear;

dotcom-rendering/src/components/FeatureCard.tsx

@@ -217,7 +217,7 @@ const CommentCount = ({
 			href={`${linkTo}#comments`}
 			cssOverrides={css`
 				/* See: https://css-tricks.com/nested-links/ */
-				${getZIndex('card-nested-link')}
+				z-index: ${getZIndex('card-nested-link')};
 				/* The following styles turn off those provided by Link */
 				color: inherit;
 				/* stylelint-disable-next-line property-disallowed-list */

dotcom-rendering/src/components/GridItem.tsx

@@ -16,7 +16,7 @@ const rightColumnStyles = css`
 	top: 0;
 	right: 0;
 	/* Pop me below the body */
-	${getZIndex('rightColumnArea')}
+	z-index: ${getZIndex('rightColumnArea')};
 
 	@supports (display: grid) {
 		position: relative;
@@ -25,7 +25,7 @@ const rightColumnStyles = css`
 
 const bodyStyles = css`
 	/* Pop me above the right column */
-	${getZIndex('bodyArea')}
+	z-index: ${getZIndex('bodyArea')};
 `;
 
 const gridArea = css`

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

@@ -69,7 +69,7 @@ const stickyNavBaseStyles = css`
 	background-color: ${sourcePalette.neutral[100]};
 	border: 1px solid ${sourcePalette.neutral[86]};
 	top: 0;
-	${getZIndex('banner')}
+	z-index: ${getZIndex('banner')};
 `;
 
 const olStyles = css`

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

@@ -204,7 +204,7 @@ export const LightboxLayout = ({ format, images }: Props) => {
 					html.lightbox-open {
 						#gu-lightbox {
 							position: fixed;
-							${getZIndex('lightbox')};
+							z-index: ${getZIndex('lightbox')};
 						}
 
 						body {

dotcom-rendering/src/components/MainMedia.tsx

@@ -47,9 +47,9 @@ const immersiveWrapper = css`
         we use this grow here to ensure the content fills the available height
     */
 	flex-grow: 1;
-	${getZIndex('mainMedia')}
+	z-index: ${getZIndex('mainMedia')};
 	/* Prevent the immersive image 100vh from spilling into main content */
-    overflow: hidden;
+	overflow: hidden;
 `;
 
 const chooseWrapper = (format: ArticleFormat) => {

dotcom-rendering/src/components/Masthead/Titlepiece/EditionDropdown.tsx

@@ -23,7 +23,7 @@ interface EditionDropdownProps {
 }
 
 const editionDropdownStyles = css`
-	${getZIndex('mastheadEditionDropdown')};
+	z-index: ${getZIndex('mastheadEditionDropdown')};
 	display: flex;
 	/** Required to absolutely position the dropdown menu */
 	position: relative;

dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/ExpandedNav.tsx

@@ -40,7 +40,7 @@ export const expandedMenuStyles = css`
 `;
 
 const wrapperMainMenuStyles = css`
-	${getZIndex('expanded-veggie-menu-wrapper')}
+	z-index: ${getZIndex('expanded-veggie-menu-wrapper')};
 	left: 0;
 	top: 0;
 
@@ -62,7 +62,7 @@ const wrapperMainMenuStyles = css`
 const mainMenuStyles = css`
 	background-color: ${themePalette('--masthead-nav-background')};
 	${textSans20};
-	${getZIndex('expanded-veggie-menu')}
+	z-index: ${getZIndex('expanded-veggie-menu')};
 	left: 0;
 	top: 0;
 	box-sizing: border-box;

dotcom-rendering/src/components/Masthead/Titlepiece/VeggieBurger.tsx

@@ -12,7 +12,7 @@ const labelStyles = css`
 	${`#${navInputCheckboxId}`}:checked ~ div & {
 		${until.desktop} {
 			/* Bump the z-index of the burger menu when expanded */
-			${getZIndex('mastheadVeggieBurgerExpandedMobile')}
+			z-index: ${getZIndex('mastheadVeggieBurgerExpandedMobile')};
 		}
 	}
 `;

dotcom-rendering/src/components/StickyBottomBanner/BrazeBanner.tsx

@@ -31,7 +31,7 @@ const containerStyles = css`
 	position: fixed;
 	bottom: -1px;
 	width: 100%;
-	${getZIndex('banner')}
+	z-index: ${getZIndex('banner')};
 `;
 
 // We can show a Braze banner if:

dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx

@@ -330,7 +330,7 @@ const RemoteBanner = ({ module, fetchEmail }: RemoteBannerProps) => {
 			<div
 				css={css`
 					width: 100%;
-					${getZIndex('banner')}
+					z-index: ${getZIndex('banner')};
 				`}
 			>
 				{}

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

@@ -77,7 +77,7 @@ const stickyStyles = css`
 	position: sticky;
 	top: 0;
 	background: ${palette('--article-background')};
-	${getZIndex('tableOfContents')}
+	z-index: ${getZIndex('tableOfContents')};
 	max-height: 100vh;
 	overflow: scroll;
 	summary {

dotcom-rendering/src/components/TopBarMyAccount.tsx

@@ -75,7 +75,7 @@ const myAccountLinkStyles = css`
 		margin: 0 ${space[1]}px 0 0;
 	}
 
-	${getZIndex('mastheadMyAccountDropdown')}
+	z-index: ${getZIndex('mastheadMyAccountDropdown')};
 `;
 
 export const buildIdentityLinks = (

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx

@@ -90,7 +90,7 @@ const fullscreenStyles = (id: string) => css`
 		width: 100svw;
 		/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
 		height: 100svh;
-		${getZIndex('youTubeFullscreen')};
+		z-index: ${getZIndex('youTubeFullscreen')};
 	}
 `;
 

dotcom-rendering/src/layouts/AudioLayout.tsx

@@ -128,7 +128,7 @@ const usCardStyles = css`
 	align-self: start;
 	position: sticky;
 	top: 0;
-	${getZIndex('expandableMarketingCardOverlay')}
+	z-index: ${getZIndex('expandableMarketingCardOverlay')};
 
 	${from.leftCol} {
 		margin-top: ${space[6]}px;

dotcom-rendering/src/layouts/CommentLayout.tsx

@@ -207,7 +207,7 @@ const usCardStyles = css`
 	align-self: start;
 	position: sticky;
 	top: 0;
-	${getZIndex('expandableMarketingCardOverlay')}
+	z-index: ${getZIndex('expandableMarketingCardOverlay')};
 
 	${from.leftCol} {
 		margin-top: ${space[6]}px;

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -136,7 +136,7 @@ const NavHeader = ({ article, NAV, format }: Props) => {
 		<section
 			/* Note, some interactives require this - e.g. https://www.theguardian.com/environment/ng-interactive/2015/jun/05/carbon-bomb-the-coal-boom-choking-china. */
 			css={css`
-				${getZIndex('fullPageInteractiveHeaderWrapper')};
+				z-index: ${getZIndex('fullPageInteractiveHeaderWrapper')};
 				position: relative;
 			`}
 		>

dotcom-rendering/src/layouts/ImmersiveLayout.tsx

@@ -171,7 +171,7 @@ const usCardStyles = css`
 	align-self: start;
 	position: sticky;
 	top: 0;
-	${getZIndex('expandableMarketingCardOverlay')}
+	z-index: ${getZIndex('expandableMarketingCardOverlay')};
 
 	${from.leftCol} {
 		margin-top: ${space[6]}px;
@@ -238,7 +238,7 @@ const Box = ({ children }: { children: React.ReactNode }) => (
 					width: 50%;
 					right: 0;
 					background-color: ${themePalette('--headline-background')};
-					${getZIndex('immersiveBlackBox')}
+					z-index: ${getZIndex('immersiveBlackBox')};
 					top: 0;
 					bottom: 0;
 				}
@@ -410,7 +410,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 									the text appears above the pseudo Box element
 								*/
 								position: relative;
-								${getZIndex('articleHeadline')};
+								z-index: ${getZIndex('articleHeadline')};
 							`}
 						>
 							<Section

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -601,7 +601,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 								css={css`
 									position: sticky;
 									top: 0;
-									${getZIndex('toast')};
+									z-index: ${getZIndex('toast')};
 									display: flex;
 									justify-content: center;
 								`}

dotcom-rendering/src/layouts/ShowcaseLayout.tsx

@@ -172,7 +172,7 @@ const usCardStyles = css`
 	align-self: start;
 	position: sticky;
 	top: 0;
-	${getZIndex('expandableMarketingCardOverlay')}
+	z-index: ${getZIndex('expandableMarketingCardOverlay')};
 
 	${from.leftCol} {
 		margin-top: ${space[6]}px;

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -316,7 +316,7 @@ const usCardStyles = css`
 	align-self: start;
 	position: sticky;
 	top: 0;
-	${getZIndex('expandableMarketingCardOverlay')}
+	z-index: ${getZIndex('expandableMarketingCardOverlay')};
 
 	${from.leftCol} {
 		margin-top: ${space[6]}px;

dotcom-rendering/src/layouts/lib/stickiness.tsx

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
-import type { ZIndex } from '../../lib/getZIndex';
-import { getZIndex, getZIndexImportant } from '../../lib/getZIndex';
+import { getZIndex, type ZIndex } from '../../lib/getZIndex';
 import { palette } from '../../palette';
 
 type Props = {
@@ -18,7 +17,7 @@ const stickyStyles = css`
 `;
 
 const addZindex = (zIndex: ZIndex = 'stickyAdWrapper') => css`
-	${getZIndex(zIndex)}
+	z-index: ${getZIndex(zIndex)};
 `;
 
 const background = css`
@@ -30,7 +29,8 @@ const bannerWrapper = css`
 	/* stylelint-disable-next-line declaration-no-important */
 	position: fixed !important;
 	bottom: 0;
-	${getZIndexImportant('banner')}
+	/* stylelint-disable-next-line declaration-no-important */
+	z-index: ${getZIndex('banner')} !important;
 	max-height: 90vh;
 	overflow: auto;
 	/* stylelint-disable-next-line declaration-no-important */