diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx index f1b4adb949..55e18f5c14 100644 --- a/dotcom-rendering/src/components/AdSlot.web.tsx +++ b/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; } diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index d9e3ad1df2..56cfa09209 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/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; } diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 3bc2f3afdd..e09fd837c6 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/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 = ({
diff --git a/dotcom-rendering/src/components/Dropdown.importable.tsx b/dotcom-rendering/src/components/Dropdown.importable.tsx index 2e9c4641f6..37e6ccad09 100644 --- a/dotcom-rendering/src/components/Dropdown.importable.tsx +++ b/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 */ diff --git a/dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx b/dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx index c8d1bc3891..2a0128e9a8 100644 --- a/dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx +++ b/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` diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardSwipeable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardSwipeable.tsx index d8ce154e36..c7c662cd25 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCardSwipeable.tsx +++ b/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; diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx index 7a22c8d128..c9ed99c777 100644 --- a/dotcom-rendering/src/components/FeatureCard.tsx +++ b/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 */ diff --git a/dotcom-rendering/src/components/GridItem.tsx b/dotcom-rendering/src/components/GridItem.tsx index ac72369de6..42ac8857b2 100644 --- a/dotcom-rendering/src/components/GridItem.tsx +++ b/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` diff --git a/dotcom-rendering/src/components/InteractiveContentsBlockComponent.importable.tsx b/dotcom-rendering/src/components/InteractiveContentsBlockComponent.importable.tsx index 7b31535405..024484c2e8 100644 --- a/dotcom-rendering/src/components/InteractiveContentsBlockComponent.importable.tsx +++ b/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` diff --git a/dotcom-rendering/src/components/LightboxLayout.importable.tsx b/dotcom-rendering/src/components/LightboxLayout.importable.tsx index b9781915d1..8401dbe5e7 100644 --- a/dotcom-rendering/src/components/LightboxLayout.importable.tsx +++ b/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 { diff --git a/dotcom-rendering/src/components/MainMedia.tsx b/dotcom-rendering/src/components/MainMedia.tsx index d7cb77e10f..4c9fecb3ee 100644 --- a/dotcom-rendering/src/components/MainMedia.tsx +++ b/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) => { diff --git a/dotcom-rendering/src/components/Masthead/Titlepiece/EditionDropdown.tsx b/dotcom-rendering/src/components/Masthead/Titlepiece/EditionDropdown.tsx index 8bfc7492f3..5f09344deb 100644 --- a/dotcom-rendering/src/components/Masthead/Titlepiece/EditionDropdown.tsx +++ b/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; diff --git a/dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/ExpandedNav.tsx b/dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/ExpandedNav.tsx index ba23dfb813..934747ec70 100644 --- a/dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/ExpandedNav.tsx +++ b/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; diff --git a/dotcom-rendering/src/components/Masthead/Titlepiece/VeggieBurger.tsx b/dotcom-rendering/src/components/Masthead/Titlepiece/VeggieBurger.tsx index b0388b432f..862f9991e7 100644 --- a/dotcom-rendering/src/components/Masthead/Titlepiece/VeggieBurger.tsx +++ b/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')}; } } `; diff --git a/dotcom-rendering/src/components/StickyBottomBanner/BrazeBanner.tsx b/dotcom-rendering/src/components/StickyBottomBanner/BrazeBanner.tsx index 87e0f935e2..3ad5caa324 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner/BrazeBanner.tsx +++ b/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: diff --git a/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx b/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx index 81ce106e18..ee6903663f 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx +++ b/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx @@ -330,7 +330,7 @@ const RemoteBanner = ({ module, fetchEmail }: RemoteBannerProps) => {
{} diff --git a/dotcom-rendering/src/components/TableOfContents.importable.tsx b/dotcom-rendering/src/components/TableOfContents.importable.tsx index faa660d8c1..cd5f1f59cc 100644 --- a/dotcom-rendering/src/components/TableOfContents.importable.tsx +++ b/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 { diff --git a/dotcom-rendering/src/components/TopBarMyAccount.tsx b/dotcom-rendering/src/components/TopBarMyAccount.tsx index 4ed9d88711..0720504129 100644 --- a/dotcom-rendering/src/components/TopBarMyAccount.tsx +++ b/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 = ( diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx index dcebfa8c7d..a938fafd0a 100644 --- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx +++ b/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')}; } `; diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx index 634a49fa19..e2e64717ca 100644 --- a/dotcom-rendering/src/layouts/AudioLayout.tsx +++ b/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; diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx index 674061ebe6..1d01384585 100644 --- a/dotcom-rendering/src/layouts/CommentLayout.tsx +++ b/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; diff --git a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx index 575300b4c0..a9d58f9b7f 100644 --- a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx @@ -136,7 +136,7 @@ const NavHeader = ({ article, NAV, format }: Props) => {
diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx index f38bae6e8a..6ae191556a 100644 --- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx +++ b/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')}; `} >
{ css={css` position: sticky; top: 0; - ${getZIndex('toast')}; + z-index: ${getZIndex('toast')}; display: flex; justify-content: center; `} diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx index 9b7027e669..6300d3778b 100644 --- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx +++ b/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; diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index 4e577f10ed..007187783a 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/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; diff --git a/dotcom-rendering/src/layouts/lib/stickiness.tsx b/dotcom-rendering/src/layouts/lib/stickiness.tsx index 03a8b6a779..a318d98d7e 100644 --- a/dotcom-rendering/src/layouts/lib/stickiness.tsx +++ b/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 */ diff --git a/dotcom-rendering/src/lib/getZIndex.test.ts b/dotcom-rendering/src/lib/getZIndex.test.ts index 19ffb9fe13..19f82962d8 100644 --- a/dotcom-rendering/src/lib/getZIndex.test.ts +++ b/dotcom-rendering/src/lib/getZIndex.test.ts @@ -2,41 +2,20 @@ import { getZIndex } from './getZIndex'; describe('getZIndex', () => { it('gets the correct zindex for group and sibling', () => { - expect(getZIndex('sticky-video-button')).toBe('z-index: 32;'); - expect(getZIndex('sticky-video')).toBe('z-index: 31;'); - expect(getZIndex('banner')).toBe('z-index: 30;'); - expect(getZIndex('dropdown')).toBe('z-index: 29;'); - expect(getZIndex('burger')).toBe('z-index: 28;'); - expect(getZIndex('mastheadVeggieBurgerExpandedMobile')).toBe( - 'z-index: 27;', + expect(getZIndex('sticky-video-button')).toBeGreaterThan( + getZIndex('sticky-video'), ); - expect(getZIndex('expanded-veggie-menu-wrapper')).toBe('z-index: 26;'); - expect(getZIndex('expanded-veggie-menu')).toBe('z-index: 25;'); - expect(getZIndex('fullPageInteractiveHeaderWrapper')).toBe( - 'z-index: 24;', + expect(getZIndex('expanded-veggie-menu-wrapper')).toBeGreaterThan( + getZIndex('expanded-veggie-menu'), + ); + expect(getZIndex('stickyAdWrapperLabsHeader')).toBeGreaterThan( + getZIndex('stickyAdWrapper'), + ); + expect(getZIndex('tableOfContents')).toBeGreaterThan( + getZIndex('articleHeadline'), + ); + expect(getZIndex('card-nested-link')).toBeGreaterThan( + getZIndex('card-link'), ); - expect(getZIndex('mobileSticky')).toBe('z-index: 23;'); - expect(getZIndex('stickyAdWrapperLabsHeader')).toBe('z-index: 22;'); - expect(getZIndex('stickyAdWrapper')).toBe('z-index: 21;'); - expect(getZIndex('stickyAdWrapperNav')).toBe('z-index: 20;'); - expect(getZIndex('mastheadMyAccountDropdown')).toBe('z-index: 19;'); - expect(getZIndex('mastheadEditionDropdown')).toBe('z-index: 18;'); - expect(getZIndex('editionDropdown')).toBe('z-index: 17;'); - expect(getZIndex('summaryDetails')).toBe('z-index: 16;'); - expect(getZIndex('toast')).toBe('z-index: 15;'); - expect(getZIndex('onwardsCarousel')).toBe('z-index: 14;'); - expect(getZIndex('myAccountDropdown')).toBe('z-index: 13;'); - expect(getZIndex('searchHeaderLink')).toBe('z-index: 12;'); - expect(getZIndex('TheGuardian')).toBe('z-index: 11;'); - expect(getZIndex('editionSwitcherBanner')).toBe('z-index: 10;'); - expect(getZIndex('expandableMarketingCardOverlay')).toBe('z-index: 9;'); - expect(getZIndex('tableOfContents')).toBe('z-index: 8;'); - expect(getZIndex('articleHeadline')).toBe('z-index: 7;'); - expect(getZIndex('immersiveBlackBox')).toBe('z-index: 6;'); - expect(getZIndex('bodyArea')).toBe('z-index: 5;'); - expect(getZIndex('rightColumnArea')).toBe('z-index: 4;'); - expect(getZIndex('mainMedia')).toBe('z-index: 3;'); - expect(getZIndex('card-nested-link')).toBe('z-index: 2;'); - expect(getZIndex('card-link')).toBe('z-index: 1;'); }); }); diff --git a/dotcom-rendering/src/lib/getZIndex.ts b/dotcom-rendering/src/lib/getZIndex.ts index 8ee643a254..a76c649811 100644 --- a/dotcom-rendering/src/lib/getZIndex.ts +++ b/dotcom-rendering/src/lib/getZIndex.ts @@ -16,7 +16,7 @@ * * const myCss = css` * color: blue; - * ${getZIndex('TheGuardian')} + * z-index: ${getZIndex('TheGuardian')}; * `; * * As new items are added, all z-indexes are adjusted @@ -100,14 +100,8 @@ const indices = [ // Implementation code - you don't need to change this to get a new index export type ZIndex = (typeof indices)[number]; -const decideIndex = (name: ZIndex): number => { +export const getZIndex = (name: ZIndex): number => { const index = indices.indexOf(name); if (index === -1) return -1; // indexOf returns -1 if there is no match return indices.length - index; // reverse the indices: last item gets 1 }; - -export const getZIndex = (zIndex: ZIndex): string => - `z-index: ${decideIndex(zIndex)};`; - -export const getZIndexImportant = (zIndex: ZIndex): string => - `z-index: ${decideIndex(zIndex)} !important;`;