From 3e2e3fa63160f6544aff3b2d3df6a23f270bba3a Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Fri, 22 Nov 2024 09:42:59 +0000 Subject: [PATCH 1/4] Slideshows: Special palette overrides (#12884) * Add special palette variations for slideshows * Add special palette examples to slideshow stories --- .../src/components/ContainerOverrides.tsx | 30 ++++ .../components/SlideshowCarousel.stories.tsx | 131 +++++++++++++----- 2 files changed, 124 insertions(+), 37 deletions(-) diff --git a/dotcom-rendering/src/components/ContainerOverrides.tsx b/dotcom-rendering/src/components/ContainerOverrides.tsx index 3d86ad7116..e1d566bb35 100644 --- a/dotcom-rendering/src/components/ContainerOverrides.tsx +++ b/dotcom-rendering/src/components/ContainerOverrides.tsx @@ -1077,6 +1077,28 @@ const carouselChevronBorderDisabledDark: ContainerFunction = ( containerPalette, ) => transparentColour(cardHeadlineDark(containerPalette), 0.4); +const slideshowPaginationDotLight: ContainerFunction = (containerPalette) => { + switch (containerPalette) { + case 'BreakingPalette': + case 'InvestigationPalette': + case 'SombrePalette': + case 'SombreAltPalette': + return transparentColour(cardHeadlineLight(containerPalette), 0.4); + default: + return transparentColour(cardHeadlineLight(containerPalette), 0.2); + } +}; + +const slideshowPaginationDotDark: ContainerFunction = (containerPalette) => + transparentColour(cardHeadlineDark(containerPalette), 0.4); + +const slideshowPaginationDotActiveLight: ContainerFunction = ( + containerPalette, +) => cardHeadlineLight(containerPalette); +const slideshowPaginationDotActiveDark: ContainerFunction = ( + containerPalette, +) => cardHeadlineDark(containerPalette); + type ColourName = Parameters[0]; type ContainerFunction = (containerPalette: DCRContainerPalette) => string; @@ -1210,6 +1232,14 @@ const containerColours = { light: carouselChevronHoverLight, dark: carouselChevronHoverDark, }, + '--slideshow-pagination-dot': { + light: slideshowPaginationDotLight, + dark: slideshowPaginationDotDark, + }, + '--slideshow-pagination-dot-active': { + light: slideshowPaginationDotActiveLight, + dark: slideshowPaginationDotActiveDark, + }, '--section-border': { light: sectionBorderLight, dark: sectionBorderDark, diff --git a/dotcom-rendering/src/components/SlideshowCarousel.stories.tsx b/dotcom-rendering/src/components/SlideshowCarousel.stories.tsx index 6ea619fddf..d1ff34ec86 100644 --- a/dotcom-rendering/src/components/SlideshowCarousel.stories.tsx +++ b/dotcom-rendering/src/components/SlideshowCarousel.stories.tsx @@ -1,41 +1,12 @@ import { css } from '@emotion/react'; -import { breakpoints, space } from '@guardian/source/foundations'; +import { breakpoints, space, textSans17 } from '@guardian/source/foundations'; import type { Meta, StoryObj } from '@storybook/react'; import type { ReactNode } from 'react'; -import type { DCRSlideshowImage } from '../types/front'; +import { palette } from '../palette'; +import type { DCRContainerPalette, DCRSlideshowImage } from '../types/front'; +import { ContainerOverrides } from './ContainerOverrides'; import { SlideshowCarousel } from './SlideshowCarousel.importable'; -const Wrapper = ({ children }: { children: ReactNode }) => { - const styles = css` - margin: ${space[2]}px; - max-width: 460px; - `; - return
{children}
; -}; - -const meta = { - component: SlideshowCarousel, - title: 'Components/SlideshowCarousel', - render: (args) => ( - - - - ), - parameters: { - chromatic: { - viewports: [ - breakpoints.mobile, - breakpoints.tablet, - breakpoints.leftCol, - ], - }, - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - const images = [ { imageSrc: @@ -75,23 +46,109 @@ const images = [ }, ] as const satisfies readonly DCRSlideshowImage[]; -export const WithMultipleImages = { +const Wrapper = ({ + children, + heading, +}: { + children: ReactNode; + heading?: string; +}) => { + const sectionStyles = css` + padding: ${space[4]}px; + background: ${palette('--card-background')}; + `; + const containerStyles = css` + max-width: 460px; + `; + const headingStyles = css` + ${textSans17}; + color: ${palette('--card-headline')}; + margin-bottom: ${space[2]}px; + `; + return ( +
+
+ {!!heading &&

{heading}

} + {children} +
+
+ ); +}; + +const meta = { + component: SlideshowCarousel, + title: 'Components/SlideshowCarousel', + parameters: { + chromatic: { + viewports: [ + breakpoints.mobile, + breakpoints.tablet, + breakpoints.leftCol, + ], + }, + }, args: { images, imageSize: 'medium', }, -} satisfies Story; + render: (args) => ( + + + + ), +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const WithMultipleImages = {} satisfies Story; export const WithThreeImages = { args: { images: images.slice(0, 3), - imageSize: 'medium', }, } satisfies Story; export const WithOneImage = { args: { images: images.slice(0, 1), - imageSize: 'medium', }, } satisfies Story; + +const containerPalettes = [ + 'InvestigationPalette', + 'LongRunningPalette', + 'SombrePalette', + 'BreakingPalette', + 'EventPalette', + 'EventAltPalette', + 'LongRunningAltPalette', + 'SombreAltPalette', + 'SpecialReportAltPalette', + 'Branded', +] as const satisfies readonly Omit< + DCRContainerPalette, + 'MediaPalette' | 'PodcastPalette' +>[]; + +export const WithSpecialPaletteVariations = { + parameters: { + /** We only want one breakpoint snapshotted for special palette variations */ + chromatic: { viewports: [breakpoints.desktop] }, + }, + render: (args) => ( + <> + {containerPalettes.map((containerPalette) => ( + + + + + + ))} + + ), +} satisfies Story; From d060d63bfaf528975ca9d80121d82eae32720af5 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Fri, 22 Nov 2024 10:21:44 +0000 Subject: [PATCH 2/4] Slideshow: Reduce gradient height and hide buttons on mobile (#12894) * Reduce gradient height and change alignment of navigation dots * Hide buttons on mobile * Use spacing value from Source Co-authored-by: Charlotte Emms <43961396+cemms1@users.noreply.github.com> --------- Co-authored-by: Charlotte Emms <43961396+cemms1@users.noreply.github.com> --- .../SlideshowCarousel.importable.tsx | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/dotcom-rendering/src/components/SlideshowCarousel.importable.tsx b/dotcom-rendering/src/components/SlideshowCarousel.importable.tsx index c187a25f11..2fe1be68b2 100644 --- a/dotcom-rendering/src/components/SlideshowCarousel.importable.tsx +++ b/dotcom-rendering/src/components/SlideshowCarousel.importable.tsx @@ -1,5 +1,10 @@ import { css } from '@emotion/react'; -import { space, textSansBold12, width } from '@guardian/source/foundations'; +import { + from, + space, + textSansBold12, + width, +} from '@guardian/source/foundations'; import type { ThemeButton } from '@guardian/source/react-components'; import { Button, @@ -49,18 +54,18 @@ const carouselItemStyles = css` `; const captionStyles = css` - ${textSansBold12} position: absolute; bottom: 0; left: 0; right: 0; + ${textSansBold12} + color: ${palette('--slideshow-caption')}; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100% ); - color: ${palette('--slideshow-caption')}; - padding: 60px ${space[2]}px ${space[2]}px; + padding: ${space[10]}px ${space[2]}px ${space[2]}px; `; const navigationStyles = css` @@ -70,20 +75,25 @@ const navigationStyles = css` `; const buttonStyles = css` - display: flex; - gap: ${space[2]}px; + display: none; + ${from.tablet} { + display: flex; + gap: ${space[2]}px; + } `; /** * Padding is added to the left of the scrolling navigation dots to match the - * width of the navigation buttons on the right. This allows them to be centred - * below the slideshow image. + * width of the navigation buttons on the right at tablet and above. This allows + * them to be centred below the slideshow image. */ const scrollingDotStyles = css` display: flex; justify-content: center; flex: 1 0 0; - padding-left: ${width.ctaSmall * 2 + space[2]}px; + ${from.tablet} { + padding-left: ${width.ctaSmall * 2 + space[2]}px; + } `; export const SlideshowCarousel = ({ From c9808f8307224e90d9ba8ffacb013df597604394 Mon Sep 17 00:00:00 2001 From: Harry Fischer Date: Fri, 22 Nov 2024 10:31:05 +0000 Subject: [PATCH 3/4] make table of contents sticky if it has more than 5 items (#12895) * make table of contents sticky if it has more than 5 items * use palette instead of 'white' * use zIndex function and close nav when item is clicked * fix lint errors * update getZIndex.test --- .../components/TableOfContents.importable.tsx | 23 ++++++++- dotcom-rendering/src/lib/getZIndex.test.ts | 49 ++++++++++--------- dotcom-rendering/src/lib/getZIndex.ts | 3 ++ 3 files changed, 50 insertions(+), 25 deletions(-) diff --git a/dotcom-rendering/src/components/TableOfContents.importable.tsx b/dotcom-rendering/src/components/TableOfContents.importable.tsx index e383e66272..faa660d8c1 100644 --- a/dotcom-rendering/src/components/TableOfContents.importable.tsx +++ b/dotcom-rendering/src/components/TableOfContents.importable.tsx @@ -11,6 +11,7 @@ import { } from '@guardian/source/react-components'; import { useState } from 'react'; import { ArticleDisplay, type ArticleFormat } from '../lib/articleFormat'; +import { getZIndex } from '../lib/getZIndex'; import type { TableOfContentsItem } from '../model/enhanceTableOfContents'; import { palette } from '../palette'; @@ -72,6 +73,20 @@ const detailsStyles = css` display: none; } `; +const stickyStyles = css` + position: sticky; + top: 0; + background: ${palette('--article-background')}; + ${getZIndex('tableOfContents')} + max-height: 100vh; + overflow: scroll; + summary { + position: sticky; + top: 0; + z-index: 1; + background: ${palette('--article-background')}; + } +`; const summaryStyles = css` display: flex; @@ -126,7 +141,10 @@ export const TableOfContents = ({ tableOfContents, format }: Props) => { return (
5 ? stickyStyles : undefined, + ]} data-component="table-of-contents" > { { + setOpen((state) => !state); + }} > {item.title} diff --git a/dotcom-rendering/src/lib/getZIndex.test.ts b/dotcom-rendering/src/lib/getZIndex.test.ts index 64bfde5ec4..19ffb9fe13 100644 --- a/dotcom-rendering/src/lib/getZIndex.test.ts +++ b/dotcom-rendering/src/lib/getZIndex.test.ts @@ -2,34 +2,35 @@ import { getZIndex } from './getZIndex'; describe('getZIndex', () => { it('gets the correct zindex for group and sibling', () => { - expect(getZIndex('sticky-video-button')).toBe('z-index: 31;'); - expect(getZIndex('sticky-video')).toBe('z-index: 30;'); - expect(getZIndex('banner')).toBe('z-index: 29;'); - expect(getZIndex('dropdown')).toBe('z-index: 28;'); - expect(getZIndex('burger')).toBe('z-index: 27;'); + 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: 26;', + 'z-index: 27;', ); - expect(getZIndex('expanded-veggie-menu-wrapper')).toBe('z-index: 25;'); - expect(getZIndex('expanded-veggie-menu')).toBe('z-index: 24;'); + 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: 23;', + 'z-index: 24;', ); - expect(getZIndex('mobileSticky')).toBe('z-index: 22;'); - expect(getZIndex('stickyAdWrapperLabsHeader')).toBe('z-index: 21;'); - expect(getZIndex('stickyAdWrapper')).toBe('z-index: 20;'); - expect(getZIndex('stickyAdWrapperNav')).toBe('z-index: 19;'); - expect(getZIndex('mastheadMyAccountDropdown')).toBe('z-index: 18;'); - expect(getZIndex('mastheadEditionDropdown')).toBe('z-index: 17;'); - expect(getZIndex('editionDropdown')).toBe('z-index: 16;'); - expect(getZIndex('summaryDetails')).toBe('z-index: 15;'); - expect(getZIndex('toast')).toBe('z-index: 14;'); - expect(getZIndex('onwardsCarousel')).toBe('z-index: 13;'); - expect(getZIndex('myAccountDropdown')).toBe('z-index: 12;'); - expect(getZIndex('searchHeaderLink')).toBe('z-index: 11;'); - expect(getZIndex('TheGuardian')).toBe('z-index: 10;'); - expect(getZIndex('editionSwitcherBanner')).toBe('z-index: 9;'); - expect(getZIndex('expandableMarketingCardOverlay')).toBe('z-index: 8;'); + 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;'); diff --git a/dotcom-rendering/src/lib/getZIndex.ts b/dotcom-rendering/src/lib/getZIndex.ts index cd8d4850eb..8ee643a254 100644 --- a/dotcom-rendering/src/lib/getZIndex.ts +++ b/dotcom-rendering/src/lib/getZIndex.ts @@ -77,6 +77,9 @@ const indices = [ // Overlay for expandable marketing card (currently US only) 'expandableMarketingCardOverlay', + // Sticky table of contents element + 'tableOfContents', + // Article headline (should be above main media) 'articleHeadline', 'immersiveBlackBox', From 9caa909c91879acd6bf0b2be61f85e00862f4ed6 Mon Sep 17 00:00:00 2001 From: Jamie B <53781962+JamieB-gu@users.noreply.github.com> Date: Fri, 22 Nov 2024 13:21:34 +0000 Subject: [PATCH 4/4] 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. --- .../src/components/AdSlot.web.tsx | 2 +- .../src/components/ArticleHeadline.tsx | 2 +- dotcom-rendering/src/components/Card/Card.tsx | 12 +++-- .../Card/components/CardBranding.tsx | 2 +- .../components/Card/components/CardLink.tsx | 2 +- .../src/components/CardHeadline.tsx | 2 +- .../src/components/Carousel.importable.tsx | 2 +- .../CarouselForNewsletters.importable.tsx | 2 +- dotcom-rendering/src/components/Details.tsx | 2 +- .../src/components/Dropdown.importable.tsx | 2 +- .../EditionSwitcherBanner.importable.tsx | 2 +- .../ExpandableMarketingCardSwipeable.tsx | 2 +- .../src/components/FeatureCard.tsx | 2 +- dotcom-rendering/src/components/GridItem.tsx | 4 +- ...ctiveContentsBlockComponent.importable.tsx | 2 +- .../components/LightboxLayout.importable.tsx | 2 +- dotcom-rendering/src/components/MainMedia.tsx | 4 +- .../Masthead/Titlepiece/EditionDropdown.tsx | 2 +- .../Titlepiece/ExpandedNav/ExpandedNav.tsx | 4 +- .../Masthead/Titlepiece/VeggieBurger.tsx | 2 +- .../StickyBottomBanner/BrazeBanner.tsx | 2 +- .../ReaderRevenueBanner.tsx | 2 +- .../components/TableOfContents.importable.tsx | 2 +- .../src/components/TopBarMyAccount.tsx | 2 +- .../YoutubeAtom/YoutubeAtomPlayer.tsx | 2 +- dotcom-rendering/src/layouts/AudioLayout.tsx | 2 +- .../src/layouts/CommentLayout.tsx | 2 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/ImmersiveLayout.tsx | 6 +-- dotcom-rendering/src/layouts/LiveLayout.tsx | 2 +- .../src/layouts/ShowcaseLayout.tsx | 2 +- .../src/layouts/StandardLayout.tsx | 2 +- .../src/layouts/lib/stickiness.tsx | 8 ++-- dotcom-rendering/src/lib/getZIndex.test.ts | 47 +++++-------------- dotcom-rendering/src/lib/getZIndex.ts | 10 +--- 35 files changed, 63 insertions(+), 86 deletions(-) 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;`;