From 75779f8491d7bf837c4892fa84e13422f12f7ef7 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 21 Nov 2024 09:51:53 +0000 Subject: [PATCH 01/26] Add AB test --- dotcom-rendering/src/experiments/ab-tests.ts | 2 ++ .../tests/onwards-content-article.ts | 30 +++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 dotcom-rendering/src/experiments/tests/onwards-content-article.ts diff --git a/dotcom-rendering/src/experiments/ab-tests.ts b/dotcom-rendering/src/experiments/ab-tests.ts index 89624262880..f00fb644ad0 100644 --- a/dotcom-rendering/src/experiments/ab-tests.ts +++ b/dotcom-rendering/src/experiments/ab-tests.ts @@ -4,6 +4,7 @@ import { adBlockAsk } from './tests/ad-block-ask'; import { consentlessAds } from './tests/consentless-ads'; import { integrateIma } from './tests/integrate-ima'; import { mpuWhenNoEpic } from './tests/mpu-when-no-epic'; +import { onwardsContentArticle } from './tests/onwards-content-article'; import { optimiseSpacefinderInline } from './tests/optimise-spacefinder-inline'; import { signInGateMainControl } from './tests/sign-in-gate-main-control'; import { signInGateMainVariant } from './tests/sign-in-gate-main-variant'; @@ -21,4 +22,5 @@ export const tests: ABTest[] = [ adBlockAsk, optimiseSpacefinderInline, UsaExpandableMarketingCard, + onwardsContentArticle, ]; diff --git a/dotcom-rendering/src/experiments/tests/onwards-content-article.ts b/dotcom-rendering/src/experiments/tests/onwards-content-article.ts new file mode 100644 index 00000000000..2035d0f73b6 --- /dev/null +++ b/dotcom-rendering/src/experiments/tests/onwards-content-article.ts @@ -0,0 +1,30 @@ +import type { ABTest } from '@guardian/ab-core'; + +export const onwardsContentArticle: ABTest = { + id: 'onwardsContentArticle', + start: '2024-11-25', + expiry: '2024-01-29', + author: 'dotcom.platform@guardian.co.uk', + description: + 'Test the impact of showing the galleries onwards content component on article pages.', + audience: 0 / 100, + audienceOffset: 0 / 100, + audienceCriteria: 'Article pages', + successMeasure: + 'Users are more likely to click a link in the onward content component.', + canRun: () => true, + variants: [ + { + id: 'control', + test: (): void => { + /* no-op */ + }, + }, + { + id: 'variant', + test: (): void => { + /* no-op */ + }, + }, + ], +}; From be09abc7a5abb99ac7ce33fe0c010910240d503c Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Wed, 4 Dec 2024 10:14:23 +0000 Subject: [PATCH 02/26] Onwards content gallery-style test --- .../src/components/BigSixOnwardsContent.tsx | 194 ++++++++++++++++++ .../src/components/Carousel.importable.tsx | 2 + .../components/OnwardsUpper.importable.tsx | 25 ++- .../tests/onwards-content-article.ts | 6 +- dotcom-rendering/src/types/front.ts | 10 +- 5 files changed, 227 insertions(+), 10 deletions(-) create mode 100644 dotcom-rendering/src/components/BigSixOnwardsContent.tsx diff --git a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx new file mode 100644 index 00000000000..6e421abde0e --- /dev/null +++ b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx @@ -0,0 +1,194 @@ +import { css } from '@emotion/react'; +import { from, headlineBold24, space } from '@guardian/source/foundations'; +import { decideFormat } from '../lib/articleFormat'; +import { useApi } from '../lib/useApi'; +import { palette } from '../palette'; +import type { DCRFrontCard } from '../types/front'; +import type { FETrailType } from '../types/trails'; +import { Card } from './Card/Card'; +import { LI } from './Card/components/LI'; +import { UL } from './Card/components/UL'; +import { LeftColumn } from './LeftColumn'; +import { Placeholder } from './Placeholder'; + +type Props = { url: string; discussionApiUrl: string }; + +type OnwardsResponse = { + trails: FETrailType[]; + heading: string; + displayname: string; + description: string; +}; + +const containerStyles = css` + display: flex; + flex-direction: column; + padding-bottom: ${space[6]}px; + + ${from.leftCol} { + flex-direction: row; + padding-right: 80px; + } +`; + +const headerStyles = css` + ${headlineBold24}; + color: ${palette('--carousel-text')}; + padding-bottom: ${space[2]}px; + padding-top: ${space[1]}px; + margin-left: 0; +`; +const mobileHeaderStyles = css` + ${headerStyles}; + ${from.tablet} { + padding-left: 10px; + } + ${from.leftCol} { + display: none; + } +`; + +const convertFETrailToDcrTrail = ( + trails: FETrailType[], + discussionApiUrl: string, +): DCRFrontCard[] => + trails.map((trail) => ({ + dataLinkName: 'onwards-content-card', + discussionId: trail.discussion?.discussionId, + discussionApiUrl, + format: decideFormat(trail.format), + headline: trail.headline, + image: { + src: trail.masterImage ?? '', + altText: trail.linkText ?? '', + }, + isExternalLink: false, + onwardsSource: 'related-content', + showLivePlayable: false, + showQuotedHeadline: false, + url: trail.url, + webPublicationDate: trail.webPublicationDate, + })); + +export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { + const { data, error } = useApi(url); + + if (error) { + // Send the error to Sentry and then prevent the element from rendering + window.guardian.modules.sentry.reportError(error, 'onwards-lower'); + return null; + } + + if (!data?.trails) { + return ( + + ); + } + + const trails: DCRFrontCard[] = convertFETrailToDcrTrail( + data.trails, + discussionApiUrl, + ); + + const firstSlice75 = trails.slice(0, 1); + const firstSlice25 = trails.slice(1, 2); + const secondSlice25 = trails.slice(2, 6); + + return ( +
+ +

+ {data.heading} +

+ +

+ {data.heading} +

+
+
    + {firstSlice75.map((trail) => ( +
  • + +
    • + ))} + {firstSlice25.map((trail) => ( +
  • + +
    • + ))} +
+
    + {secondSlice25.map((trail, index) => ( +
  • 0} + > + +
    • + ))} +
+
+
+ ); +}; diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx index 3f60618c868..7d3bc6f8dff 100644 --- a/dotcom-rendering/src/components/Carousel.importable.tsx +++ b/dotcom-rendering/src/components/Carousel.importable.tsx @@ -453,6 +453,7 @@ const Title = ({ {title} ); + type CarouselCardProps = { isFirst: boolean; index: number; @@ -500,6 +501,7 @@ const CarouselCard = ({ }: CarouselCardProps) => { const isVideoContainer = containerType === 'fixed/video'; const cardImagePosition = isOnwardContent ? 'bottom' : 'top'; + return (
  • { + const abTestAPI = useAB()?.api; + const isInOnwardsAbTestVariant = abTestAPI?.isUserInVariant( + 'OnwardsContentArticle', + 'variant', + ); + const isAndroid = useIsAndroid(); if (isAndroid) return null; @@ -260,10 +268,12 @@ export const OnwardsUpper = ({ // --- Tag excludes --- // const tagsToExclude = []; + // Exclude ad features from non-ad feature content if (!isPaidContent) { tagsToExclude.push('tone/advertisement-features'); } + // We don't want to show professional network content on videos or interactives if ( contentType.toLowerCase() === 'video' || @@ -296,7 +306,18 @@ export const OnwardsUpper = ({ return (
    - {!!url && ( + {!!url && isInOnwardsAbTestVariant && ( +
    + +
    + )} + {!!url && !isInOnwardsAbTestVariant && (
    )} - {!!(!isPaidContent && curatedDataUrl) && ( + {!isPaidContent && curatedDataUrl !== undefined && (
    Date: Wed, 4 Dec 2024 10:33:06 +0000 Subject: [PATCH 03/26] add tracking --- .../src/components/BigSixOnwardsContent.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx index 6e421abde0e..3aad237b4e9 100644 --- a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx +++ b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx @@ -11,8 +11,6 @@ import { UL } from './Card/components/UL'; import { LeftColumn } from './LeftColumn'; import { Placeholder } from './Placeholder'; -type Props = { url: string; discussionApiUrl: string }; - type OnwardsResponse = { trails: FETrailType[]; heading: string; @@ -70,6 +68,12 @@ const convertFETrailToDcrTrail = ( webPublicationDate: trail.webPublicationDate, })); +type Props = { url: string; discussionApiUrl: string }; + +/** + * Big Six refers to the style of the onwards content container. It displays six article + * cards in a gallery-style container, as opposed to a carousel. + */ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { const { data, error } = useApi(url); @@ -99,7 +103,10 @@ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { const secondSlice25 = trails.slice(2, 6); return ( -
    +

    {data.heading} @@ -122,7 +129,7 @@ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { format={trail.format} headlineText={trail.headline} image={trail.image} - dataLinkName={trail.dataLinkName} + dataLinkName={`onwards-content-gallery-style ${trail.dataLinkName}`} discussionId={trail.discussionId} discussionApiUrl={trail.discussionApiUrl} isExternalLink={trail.isExternalLink} @@ -149,7 +156,7 @@ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { format={trail.format} headlineText={trail.headline} image={trail.image} - dataLinkName={trail.dataLinkName} + dataLinkName={`onwards-content-gallery-style ${trail.dataLinkName}`} discussionId={trail.discussionId} discussionApiUrl={trail.discussionApiUrl} isExternalLink={trail.isExternalLink} @@ -177,7 +184,7 @@ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { format={trail.format} headlineText={trail.headline} image={trail.image} - dataLinkName={trail.dataLinkName} + dataLinkName={`onwards-content-gallery-style ${trail.dataLinkName}`} discussionId={trail.discussionId} discussionApiUrl={trail.discussionApiUrl} isExternalLink={trail.isExternalLink} From 23ddc99e14e9bee6164520f4e090ab0e7d1a1eb6 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 5 Dec 2024 08:02:46 +0000 Subject: [PATCH 04/26] Fix heading --- dotcom-rendering/src/components/BigSixOnwardsContent.tsx | 6 ++++-- dotcom-rendering/src/components/OnwardsUpper.importable.tsx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx index 3aad237b4e9..8e88cbad039 100644 --- a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx +++ b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx @@ -102,6 +102,8 @@ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { const firstSlice25 = trails.slice(1, 2); const secondSlice25 = trails.slice(2, 6); + const heading = data.heading || data.displayname; + return (
    { >

    - {data.heading} + {heading}

    - {data.heading} + {heading}

      diff --git a/dotcom-rendering/src/components/OnwardsUpper.importable.tsx b/dotcom-rendering/src/components/OnwardsUpper.importable.tsx index 3bee7e0c8fb..888f0156ff7 100644 --- a/dotcom-rendering/src/components/OnwardsUpper.importable.tsx +++ b/dotcom-rendering/src/components/OnwardsUpper.importable.tsx @@ -332,7 +332,7 @@ export const OnwardsUpper = ({ />

    )} - {!isPaidContent && curatedDataUrl !== undefined && ( + {!!curatedDataUrl && !isPaidContent && (
    Date: Thu, 5 Dec 2024 19:42:47 +0000 Subject: [PATCH 05/26] beginnings of new design on banners --- .../designableBanner/DesignableBannerV2.tsx | 238 ++++++++++++++++++ .../banners/designableBanner/settings.ts | 2 +- .../stories/DesignableBannerV2.stories.tsx | 32 +++ 3 files changed, 271 insertions(+), 1 deletion(-) create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx new file mode 100644 index 00000000000..b591aa01486 --- /dev/null +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -0,0 +1,238 @@ +import { css } from '@emotion/react'; +import { + brandAlt, + from, + neutral, + space, + until, +} from '@guardian/source/foundations'; +import { useEffect, useState } from 'react'; +import { ThreeTierChoiceCards } from '../../epics/ThreeTierChoiceCards'; +import type { SupportTier } from '../../epics/utils/threeTierChoiceCardAmounts'; +import type { ReactComponent } from '../../lib/ReactComponent'; +import { bannerWrapper, validatedBannerWrapper } from '../common/BannerWrapper'; +import type { BannerRenderProps } from '../common/types'; +import { DesignableBannerArticleCount } from './components/DesignableBannerArticleCount'; +import { DesignableBannerBody } from './components/DesignableBannerBody'; +import { DesignableBannerCloseButton } from './components/DesignableBannerCloseButton'; +import { DesignableBannerHeader } from './components/DesignableBannerHeader'; +import type { BannerTemplateSettings } from './settings'; +import { templateSpacing } from './styles/templateStyles'; + +const DesignableBannerV2: ReactComponent = ({ + content, + countryCode, + onCloseClick, + articleCounts, + separateArticleCount, // legacy field + separateArticleCountSettings, + submitComponentEvent, + design, +}: BannerRenderProps): JSX.Element => { + const [iosAppBannerPresent, setIosAppBannerPresent] = useState(false); + + const [ + threeTierChoiceCardSelectedProduct, + setThreeTierChoiceCardSelectedProduct, + ] = useState('SupporterPlus'); + + const variantOfChoiceCard = + countryCode === 'US' + ? 'US_THREE_TIER_CHOICE_CARDS' + : 'THREE_TIER_CHOICE_CARDS'; + + useEffect(() => { + setIosAppBannerPresent( + window.innerHeight !== window.document.documentElement.clientHeight, + ); + }, []); + + useEffect(() => { + if (iosAppBannerPresent) { + if (submitComponentEvent) { + submitComponentEvent({ + component: { + componentType: 'ACQUISITIONS_OTHER', + id: 'safari-ios-banner-present', + }, + action: 'VIEW', + }); + } + } + }, [iosAppBannerPresent, submitComponentEvent]); + + if (!design) { + return <>; + } + + const templateSettings: BannerTemplateSettings = { + containerSettings: { + backgroundColour: neutral[100], + textColor: neutral[0], + }, + headerSettings: { + textColour: neutral[0], + }, + primaryCtaSettings: { + default: { + backgroundColour: brandAlt[400], + textColour: neutral[0], + }, + hover: { + backgroundColour: brandAlt[400], + textColour: neutral[0], + }, + }, + closeButtonSettings: { + default: { + backgroundColour: neutral[100], + textColour: neutral[0], + border: `1px solid ${neutral[38]}`, + }, + hover: { + backgroundColour: neutral[100], + textColour: neutral[0], + border: `1px solid ${neutral[100]}`, + }, + }, + highlightedTextSettings: { + textColour: neutral[0], + highlightColour: brandAlt[400], + }, + articleCountTextColour: neutral[0], + bannerId: 'designable-banner', + }; + + const showAboveArticleCount = + (separateArticleCountSettings?.type === 'above' || + separateArticleCount) && + articleCounts.forTargetedWeeks >= 5; + + return ( +
    +
    + +
    + +
    +
    + {showAboveArticleCount && ( + + )} +
    + +
    +
    + + + {/*insert guardain logo?*/} +
    +
    + ); +}; + +const styles = { + outerContainer: (limitHeight: boolean) => css` + ${limitHeight ? 'max-height: 70vh;' : ''} + overflow: auto; + + * { + box-sizing: border-box; + } + + ${from.tablet} { + border-top: 1px solid ${neutral[0]}; + } + + b, + strong { + font-weight: bold; + } + `, + containerOverrides: css` + display: flex; + flex-direction: column; + position: relative; + padding: 0 10px; + + ${from.tablet} { + display: grid; + grid-template-columns: 1fr 280px; + grid-template-rows: auto 1fr auto; + column-gap: ${space[5]}px; + width: 100%; + max-width: 1300px; + margin: 0 auto; + padding: 0 ${space[5]}px; + } + + ${from.desktop} { + column-gap: 60px; + grid-template-columns: 1fr 460px; + } + + ${from.wide} { + column-gap: 100px; + } + + ${templateSpacing.bannerContainer}; + `, + closeButtonOverrides: (isGridCell: boolean) => css` + ${until.tablet} { + position: fixed; + margin-top: ${space[3]}px; + padding-right: 10px; + right: 0; + } + + ${from.tablet} { + margin-top: ${space[3]}px; + + ${isGridCell + ? css` + grid-column: 2; + grid-row: 1; + ` + : css` + margin-bottom: ${space[3]}px; + display: flex; + justify-content: flex-end; + `} + } + `, +}; + +const unvalidated = bannerWrapper(DesignableBannerV2, 'designable-banner'); +const validated = validatedBannerWrapper( + DesignableBannerV2, + 'designable-banner', +); + +export { + validated as DesignableBannerV2, + unvalidated as DesignableBannerV2Unvalidated, +}; diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts index e4695c6e3bf..f520d8c777e 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts @@ -41,7 +41,7 @@ export interface HeaderSettings { export interface BannerTemplateSettings { containerSettings: ContainerSettings; primaryCtaSettings: CtaSettings; - secondaryCtaSettings: CtaSettings; + secondaryCtaSettings?: CtaSettings; closeButtonSettings: CtaSettings; highlightedTextSettings: HighlightedTextSettings; setReminderCtaSettings?: CtaSettings; diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx new file mode 100644 index 00000000000..983b19508da --- /dev/null +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import lzstring from 'lz-string'; +import { props } from '../../utils/storybook'; +import { DesignableBannerV2 } from '../DesignableBannerV2'; + +type WithJsonProps = T & { json?: string }; +type Props = WithJsonProps>; +const meta: Meta = { + component: DesignableBannerV2, + title: 'Components/marketing/DesignableBannerV2', + args: { + ...props, + json: '', + }, + render: ({ json, ...args }) => { + const jsonProps = json + ? JSON.parse(lzstring.decompressFromEncodedURIComponent(json)) + : {}; + + return ( +
    + +
    + ); + }, +}; +export default meta; + +type Story = StoryObj; +export const Default: Story = { + name: 'Basic DesignableBannerV2', +}; From cc72f24ef777aa86caeb6d7ba72cad642329e1b7 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Thu, 5 Dec 2024 19:43:09 +0000 Subject: [PATCH 06/26] making secondary CTAs optional --- .../designableBanner/components/DesignableBannerCtas.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx index a80a90975b0..9a49a2bbcee 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx @@ -16,9 +16,9 @@ import { buttonStyles } from '../styles/buttonStyles'; interface DesignableBannerCtasProps { mainOrMobileContent: BannerRenderedContent; onPrimaryCtaClick: () => void; - onSecondaryCtaClick: () => void; + onSecondaryCtaClick?: () => void; primaryCtaSettings: CtaSettings; - secondaryCtaSettings: CtaSettings; + secondaryCtaSettings?: CtaSettings; } export function DesignableBannerCtas({ From 532d0dd698950f85009b74bd8930bfab09dfbcbb Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Thu, 5 Dec 2024 19:43:42 +0000 Subject: [PATCH 07/26] adding in semicolons nit pick to fix error that's been bugging me for ages! --- .../marketing/banners/designableBanner/DesignableBanner.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx index ecf5289ae11..e41a54bd24f 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx @@ -626,7 +626,7 @@ const styles = { } `, reminderText: css` - ${textSans17} + ${textSans17}; display: none; ${from.tablet} { @@ -634,7 +634,7 @@ const styles = { } `, reminderCta: ({ default: defaultSettings }: CtaSettings) => css` - ${textSansBold17} + ${textSansBold17}; color: ${defaultSettings.backgroundColour}; display: inline; height: auto; From da923b2abe1da8d62b28b0198e58bfe194f1ccea Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Fri, 6 Dec 2024 12:13:18 +0000 Subject: [PATCH 08/26] two tier choice cards created and updated to the new banner --- .../designableBanner/DesignableBannerV2.tsx | 5 +- .../epics/ThreeTierChoiceCardData.tsx | 48 +++++++++++++++++++ .../marketing/epics/ThreeTierChoiceCards.tsx | 3 ++ 3 files changed, 52 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index b591aa01486..3a71a726817 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -36,10 +36,7 @@ const DesignableBannerV2: ReactComponent = ({ setThreeTierChoiceCardSelectedProduct, ] = useState('SupporterPlus'); - const variantOfChoiceCard = - countryCode === 'US' - ? 'US_THREE_TIER_CHOICE_CARDS' - : 'THREE_TIER_CHOICE_CARDS'; + const variantOfChoiceCard = 'TWO_TIER_CHOICE_CARDS'; //this may need changed when US involved useEffect(() => { setIosAppBannerPresent( diff --git a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx index a3591a0fb3f..fd32d1a5a1a 100644 --- a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx @@ -90,3 +90,51 @@ export const ChoiceCardTestData_US: ChoiceInfo[] = [ recommended: false, }, ]; + +export const ChoiceCardTestData_TwoTier_REGULAR: ChoiceInfo[] = [ + { + supportTier: 'SupporterPlus', + label: ( + amount: number, + currencySymbol: string, + discount?: number, + ): JSX.Element | string => { + if (!isUndefined(discount)) { + return ( + <> + Support{' '} + + {currencySymbol} + {amount} + {' '} + {currencySymbol} + {amount * discount}/month{' '} + + ); + } else { + return `Support ${currencySymbol}${amount}/month`; + } + }, + benefitsLabel: 'All-access digital', + benefits: () => [ + 'Unlimited access to the Guardian app', + 'Unlimited access to our new Feast App', + 'Ad-free reading on all your devices', + 'Exclusive newsletter for supporters, sent every week from the Guardian newsroom', + 'Far fewer asks for support', + ], + recommended: true, + }, + { + supportTier: 'OneOff', + label: ( + amount: number, + currencySymbol: string, + ): JSX.Element | string => <>Support us from just ${currencySymbol}1, + benefitsLabel: undefined, + benefits: (currencySymbol: string) => [ + `We welcome support of any size, any time - whether you choose to give ${currencySymbol}1 or more`, + ], + recommended: false, + }, +]; diff --git a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx index c41594b6e17..b0842019c85 100644 --- a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx @@ -22,6 +22,7 @@ import { import type { Dispatch, SetStateAction } from 'react'; import { ChoiceCardTestData_REGULAR, + ChoiceCardTestData_TwoTier_REGULAR, ChoiceCardTestData_US, } from './ThreeTierChoiceCardData'; import type { @@ -185,6 +186,8 @@ const getChoiceCardData = (choiceCardVariant: string): ChoiceInfo[] => { return ChoiceCardTestData_US; case 'US_CHECKOUT_THREE_TIER_CHOICE_CARDS': return ChoiceCardTestData_US; + case 'TWO_TIER_CHOICE_CARDS': + return ChoiceCardTestData_TwoTier_REGULAR; default: return ChoiceCardTestData_REGULAR; } From 7b2124aabaa3ed58c7e436d429a3f34ffa35716e Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Fri, 6 Dec 2024 12:37:41 +0000 Subject: [PATCH 09/26] fixing currency symbol mismatch and making the highlighted copy colour white so we're still passing it in but not using it --- .../banners/designableBanner/DesignableBannerV2.tsx | 2 +- .../marketing/epics/ThreeTierChoiceCardData.tsx | 11 ++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index 3a71a726817..6c024ca7d18 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -94,7 +94,7 @@ const DesignableBannerV2: ReactComponent = ({ }, highlightedTextSettings: { textColour: neutral[0], - highlightColour: brandAlt[400], + highlightColour: neutral[100], //setting to not show as we may want this in the future? }, articleCountTextColour: neutral[0], bannerId: 'designable-banner', diff --git a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx index fd32d1a5a1a..0a3613c64e4 100644 --- a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx @@ -118,19 +118,16 @@ export const ChoiceCardTestData_TwoTier_REGULAR: ChoiceInfo[] = [ benefitsLabel: 'All-access digital', benefits: () => [ 'Unlimited access to the Guardian app', - 'Unlimited access to our new Feast App', 'Ad-free reading on all your devices', - 'Exclusive newsletter for supporters, sent every week from the Guardian newsroom', - 'Far fewer asks for support', + 'Exclusive newsletter for supporters', + 'And much more!', ], recommended: true, }, { supportTier: 'OneOff', - label: ( - amount: number, - currencySymbol: string, - ): JSX.Element | string => <>Support us from just ${currencySymbol}1, + label: (amount: number, currencySymbol: string): string => + `Support us from just ${currencySymbol}1`, benefitsLabel: undefined, benefits: (currencySymbol: string) => [ `We welcome support of any size, any time - whether you choose to give ${currencySymbol}1 or more`, From 51920ff439dc41512d3de670902de51772557559 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Fri, 6 Dec 2024 14:51:24 +0000 Subject: [PATCH 10/26] added some code comments --- .../marketing/banners/designableBanner/DesignableBannerV2.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index 6c024ca7d18..1443a4f90c9 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -62,6 +62,7 @@ const DesignableBannerV2: ReactComponent = ({ return <>; } + //All config hard coded for the tests - TODO make this configurable in the future const templateSettings: BannerTemplateSettings = { containerSettings: { backgroundColour: neutral[100], @@ -94,7 +95,7 @@ const DesignableBannerV2: ReactComponent = ({ }, highlightedTextSettings: { textColour: neutral[0], - highlightColour: neutral[100], //setting to not show as we may want this in the future? + highlightColour: neutral[100], //set to be white as we may want this in the future? }, articleCountTextColour: neutral[0], bannerId: 'designable-banner', From 9f08d420ecef52658550a1bea9fa8e4949e308a9 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Fri, 6 Dec 2024 15:02:10 +0000 Subject: [PATCH 11/26] renaming of storybook and adding in article count --- .../stories/DesignableBannerV2.stories.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx index 983b19508da..3a26a253b47 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx @@ -27,6 +27,12 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Default: Story = { +export const BasicDesignableBannerV2: Story = { name: 'Basic DesignableBannerV2', + args: { + ...meta.args, + separateArticleCountSettings: { + type: 'above', + }, + }, }; From 419dbc1a4862f87fdcb44f362d05daf879f30249 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Fri, 6 Dec 2024 15:24:25 +0000 Subject: [PATCH 12/26] updated storybook example to be more realistic including the character limits --- .../stories/DesignableBannerV2.stories.tsx | 8 +++++++- .../src/components/marketing/banners/utils/storybook.ts | 7 +++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx index 3a26a253b47..5891d17d8c3 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import lzstring from 'lz-string'; -import { props } from '../../utils/storybook'; +import { props, reducedBodyCopy } from '../../utils/storybook'; import { DesignableBannerV2 } from '../DesignableBannerV2'; type WithJsonProps = T & { json?: string }; @@ -34,5 +34,11 @@ export const BasicDesignableBannerV2: Story = { separateArticleCountSettings: { type: 'above', }, + content: { + ...reducedBodyCopy, + }, + mobileContent: { + ...reducedBodyCopy, + }, }, }; diff --git a/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts b/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts index 1fd9349a16b..0f29ecb4a6e 100644 --- a/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts +++ b/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts @@ -71,6 +71,13 @@ export const mobileContentWithHeading = { heading: 'Show your support for reader-funded journalism', }; +export const reducedBodyCopy = { + heading: 'Lorem ipsum dolor sit amet, et lorem.', // Max 40 characters. Example is 37 characters. + paragraphs: [ + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', + ], //Max 180 charcters this example is 175ish +}; + const hexColourStringRegex = /^([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; export const stringToHexColour = (colourString: string): HexColour => { if (hexColourStringRegex.test(colourString)) { From ab246b472dc4db73bb462e882b5d39ffca50a530 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Fri, 6 Dec 2024 16:02:31 +0000 Subject: [PATCH 13/26] button on own row as per design spacing needs sorted --- .../designableBanner/DesignableBannerV2.tsx | 33 ++++--------------- 1 file changed, 7 insertions(+), 26 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index 1443a4f90c9..31d41f69216 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -112,7 +112,7 @@ const DesignableBannerV2: ReactComponent = ({
    = ({ setSelectedProduct={setThreeTierChoiceCardSelectedProduct} variantOfChoiceCard={variantOfChoiceCard} /> - - {/*insert guardain logo?*/}
    ); @@ -185,7 +183,7 @@ const styles = { width: 100%; max-width: 1300px; margin: 0 auto; - padding: 0 ${space[5]}px; + padding: 0 ${space[3]}px; } ${from.desktop} { @@ -199,28 +197,11 @@ const styles = { ${templateSpacing.bannerContainer}; `, - closeButtonOverrides: (isGridCell: boolean) => css` - ${until.tablet} { - position: fixed; - margin-top: ${space[3]}px; - padding-right: 10px; - right: 0; - } - - ${from.tablet} { - margin-top: ${space[3]}px; - - ${isGridCell - ? css` - grid-column: 2; - grid-row: 1; - ` - : css` - margin-bottom: ${space[3]}px; - display: flex; - justify-content: flex-end; - `} - } + closeButtonOverrides: css` + margin-top: ${space[3]}px; + grid-column: 2; + grid-row: 1; + justify-content: flex-end; `, }; From 93afb9ed6cf42f00bc1dab671f3f9eacf325a919 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Fri, 6 Dec 2024 16:30:35 +0000 Subject: [PATCH 14/26] updates to colours --- .../designableBanner/DesignableBannerV2.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index 31d41f69216..2e597b11066 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -4,7 +4,7 @@ import { from, neutral, space, - until, + sport, } from '@guardian/source/foundations'; import { useEffect, useState } from 'react'; import { ThreeTierChoiceCards } from '../../epics/ThreeTierChoiceCards'; @@ -107,7 +107,13 @@ const DesignableBannerV2: ReactComponent = ({ articleCounts.forTargetedWeeks >= 5; return ( -
    +
    = ({ }; const styles = { - outerContainer: (limitHeight: boolean) => css` + outerContainer: ( + background: string, + textColor: string | undefined, + limitHeight: boolean, + ) => css` + background: ${background}; + color: ${textColor}; ${limitHeight ? 'max-height: 70vh;' : ''} overflow: auto; From 6b4911535fd2a1d89221890dd3fdebb1adb8b873 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Mon, 9 Dec 2024 16:18:28 +0000 Subject: [PATCH 15/26] Created new button but we should the exisisting designable cta --- .../designableBanner/DesignableBannerV2.tsx | 52 +++++++++++++------ 1 file changed, 37 insertions(+), 15 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index 2e597b11066..3294c2993cb 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -1,11 +1,6 @@ import { css } from '@emotion/react'; -import { - brandAlt, - from, - neutral, - space, - sport, -} from '@guardian/source/foundations'; +import { brandAlt, from, neutral, space } from '@guardian/source/foundations'; +import { LinkButton } from '@guardian/source/react-components'; import { useEffect, useState } from 'react'; import { ThreeTierChoiceCards } from '../../epics/ThreeTierChoiceCards'; import type { SupportTier } from '../../epics/utils/threeTierChoiceCardAmounts'; @@ -28,6 +23,7 @@ const DesignableBannerV2: ReactComponent = ({ separateArticleCountSettings, submitComponentEvent, design, + onCtaClick, }: BannerRenderProps): JSX.Element => { const [iosAppBannerPresent, setIosAppBannerPresent] = useState(false); @@ -136,7 +132,7 @@ const DesignableBannerV2: ReactComponent = ({ copy={separateArticleCountSettings?.copy} /> )} -
    +
    = ({ />
    - +
    + +
    +
    + + Continue + +
    ); @@ -195,7 +208,6 @@ const styles = { width: 100%; max-width: 1300px; margin: 0 auto; - padding: 0 ${space[3]}px; } ${from.desktop} { @@ -215,6 +227,16 @@ const styles = { grid-row: 1; justify-content: flex-end; `, + linkButtonOverrides: css` + background-color: ${brandAlt[400]}; + color: ${neutral[0]}; + display: flex; + flex-wrap: wrap; + width: 100%; + `, + linkButtonContainer: css` + padding-top: ${space[3]}px; + `, }; const unvalidated = bannerWrapper(DesignableBannerV2, 'designable-banner'); From 03e899d3e03a3ae2df537c6a1abd845e10dabeb5 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Mon, 9 Dec 2024 16:28:06 +0000 Subject: [PATCH 16/26] placeholder to render the current changes for anything below tablet and show TODO --- .../banners/designableBanner/DesignableBannerV2.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index 3294c2993cb..b89b9f20aa4 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -2,6 +2,10 @@ import { css } from '@emotion/react'; import { brandAlt, from, neutral, space } from '@guardian/source/foundations'; import { LinkButton } from '@guardian/source/react-components'; import { useEffect, useState } from 'react'; +import { + removeMediaRulePrefix, + useMatchMedia, +} from '../../../../lib/useMatchMedia'; import { ThreeTierChoiceCards } from '../../epics/ThreeTierChoiceCards'; import type { SupportTier } from '../../epics/utils/threeTierChoiceCardAmounts'; import type { ReactComponent } from '../../lib/ReactComponent'; @@ -25,6 +29,8 @@ const DesignableBannerV2: ReactComponent = ({ design, onCtaClick, }: BannerRenderProps): JSX.Element => { + const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet)); + const [iosAppBannerPresent, setIosAppBannerPresent] = useState(false); const [ @@ -102,7 +108,9 @@ const DesignableBannerV2: ReactComponent = ({ separateArticleCount) && articleCounts.forTargetedWeeks >= 5; - return ( + return isTabletOrAbove ? ( +
    TO DO
    + ) : (
    Date: Tue, 10 Dec 2024 10:40:41 +0000 Subject: [PATCH 17/26] placeholder for breakpoints above tablet --- .../designableBanner/DesignableBannerV2.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index b89b9f20aa4..6be479f89ad 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import { brandAlt, from, neutral, space } from '@guardian/source/foundations'; -import { LinkButton } from '@guardian/source/react-components'; +import { LinkButton, SvgGuardianLogo } from '@guardian/source/react-components'; import { useEffect, useState } from 'react'; import { removeMediaRulePrefix, @@ -109,7 +109,11 @@ const DesignableBannerV2: ReactComponent = ({ articleCounts.forTargetedWeeks >= 5; return isTabletOrAbove ? ( -
    TO DO
    + <> +
    + +
    + ) : (
    Date: Tue, 10 Dec 2024 15:52:39 +0000 Subject: [PATCH 18/26] reverting secondary cta being an optional --- .../banners/designableBanner/DesignableBannerV2.tsx | 11 +++++++++++ .../components/DesignableBannerCtas.tsx | 2 +- .../marketing/banners/designableBanner/settings.ts | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index 6be479f89ad..fb19baf6b1e 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -83,6 +83,17 @@ const DesignableBannerV2: ReactComponent = ({ textColour: neutral[0], }, }, + //not used in this design but is required to be passed in + secondaryCtaSettings: { + default: { + backgroundColour: brandAlt[400], + textColour: neutral[0], + }, + hover: { + backgroundColour: brandAlt[400], + textColour: neutral[0], + }, + }, closeButtonSettings: { default: { backgroundColour: neutral[100], diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx index 9a49a2bbcee..e219657d34c 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx @@ -18,7 +18,7 @@ interface DesignableBannerCtasProps { onPrimaryCtaClick: () => void; onSecondaryCtaClick?: () => void; primaryCtaSettings: CtaSettings; - secondaryCtaSettings?: CtaSettings; + secondaryCtaSettings: CtaSettings; } export function DesignableBannerCtas({ diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts index f520d8c777e..e4695c6e3bf 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts @@ -41,7 +41,7 @@ export interface HeaderSettings { export interface BannerTemplateSettings { containerSettings: ContainerSettings; primaryCtaSettings: CtaSettings; - secondaryCtaSettings?: CtaSettings; + secondaryCtaSettings: CtaSettings; closeButtonSettings: CtaSettings; highlightedTextSettings: HighlightedTextSettings; setReminderCtaSettings?: CtaSettings; From 8d092910914dcd4e4170cab3640f630ddf856467 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Tue, 10 Dec 2024 16:14:19 +0000 Subject: [PATCH 19/26] reverting secondary click cta being an optional --- .../designableBanner/components/DesignableBannerCtas.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx index e219657d34c..a80a90975b0 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCtas.tsx @@ -16,7 +16,7 @@ import { buttonStyles } from '../styles/buttonStyles'; interface DesignableBannerCtasProps { mainOrMobileContent: BannerRenderedContent; onPrimaryCtaClick: () => void; - onSecondaryCtaClick?: () => void; + onSecondaryCtaClick: () => void; primaryCtaSettings: CtaSettings; secondaryCtaSettings: CtaSettings; } From c5452eb151c7469a1f2fe94e39b6a79e4ab62956 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Tue, 10 Dec 2024 16:50:43 +0000 Subject: [PATCH 20/26] hurrah the designable CTAs are working! --- .../designableBanner/DesignableBannerV2.tsx | 26 +++++++++++-------- .../stories/DesignableBannerV2.stories.tsx | 5 +++- .../marketing/banners/utils/storybook.ts | 4 +++ 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx index fb19baf6b1e..4aebe43f3e8 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import { brandAlt, from, neutral, space } from '@guardian/source/foundations'; -import { LinkButton, SvgGuardianLogo } from '@guardian/source/react-components'; +import { SvgGuardianLogo } from '@guardian/source/react-components'; import { useEffect, useState } from 'react'; import { removeMediaRulePrefix, @@ -14,6 +14,7 @@ import type { BannerRenderProps } from '../common/types'; import { DesignableBannerArticleCount } from './components/DesignableBannerArticleCount'; import { DesignableBannerBody } from './components/DesignableBannerBody'; import { DesignableBannerCloseButton } from './components/DesignableBannerCloseButton'; +import { DesignableBannerCtas } from './components/DesignableBannerCtas'; import { DesignableBannerHeader } from './components/DesignableBannerHeader'; import type { BannerTemplateSettings } from './settings'; import { templateSpacing } from './styles/templateStyles'; @@ -28,6 +29,7 @@ const DesignableBannerV2: ReactComponent = ({ submitComponentEvent, design, onCtaClick, + onSecondaryCtaClick, }: BannerRenderProps): JSX.Element => { const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet)); @@ -114,6 +116,10 @@ const DesignableBannerV2: ReactComponent = ({ bannerId: 'designable-banner', }; + const mainOrMobileContent = isTabletOrAbove + ? content.mainContent + : content.mobileContent; + const showAboveArticleCount = (separateArticleCountSettings?.type === 'above' || separateArticleCount) && @@ -176,17 +182,15 @@ const DesignableBannerV2: ReactComponent = ({ />
    - - Continue - + />
    diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx index 5891d17d8c3..0576a81f126 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBannerV2.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import lzstring from 'lz-string'; -import { props, reducedBodyCopy } from '../../utils/storybook'; +import { design, props, reducedBodyCopy } from '../../utils/storybook'; import { DesignableBannerV2 } from '../DesignableBannerV2'; type WithJsonProps = T & { json?: string }; @@ -40,5 +40,8 @@ export const BasicDesignableBannerV2: Story = { mobileContent: { ...reducedBodyCopy, }, + design: { + ...design, + }, }, }; diff --git a/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts b/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts index 0f29ecb4a6e..00e46bad80b 100644 --- a/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts +++ b/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts @@ -76,6 +76,10 @@ export const reducedBodyCopy = { paragraphs: [ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', ], //Max 180 charcters this example is 175ish + cta: { + text: 'Support us', + baseUrl: 'https://support.theguardian.com/contribute/one-off', + }, }; const hexColourStringRegex = /^([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; From 1e5d71320be68d4564cc0fd6df19c77d525fb8a6 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Tue, 10 Dec 2024 16:54:06 +0000 Subject: [PATCH 21/26] change button copy --- .../src/components/marketing/banners/utils/storybook.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts b/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts index 00e46bad80b..a38823c294a 100644 --- a/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts +++ b/dotcom-rendering/src/components/marketing/banners/utils/storybook.ts @@ -77,7 +77,7 @@ export const reducedBodyCopy = { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.', ], //Max 180 charcters this example is 175ish cta: { - text: 'Support us', + text: 'Continue', baseUrl: 'https://support.theguardian.com/contribute/one-off', }, }; From 206ff282861886cb08611635faa065a522dc6308 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:05:53 +0000 Subject: [PATCH 22/26] Bump webpack and fix dev server --- apps-rendering/package.json | 6 +- dotcom-rendering/package.json | 4 +- .../webpack/webpack.config.dev-server.js | 1 + pnpm-lock.yaml | 460 +++++++++--------- 4 files changed, 237 insertions(+), 234 deletions(-) diff --git a/apps-rendering/package.json b/apps-rendering/package.json index 50d61212527..6f42b8c8fa4 100644 --- a/apps-rendering/package.json +++ b/apps-rendering/package.json @@ -86,7 +86,7 @@ "eslint-plugin-jsx-a11y": "6.7.1", "eslint-plugin-react": "7.33.2", "express": "4.21.0", - "html-webpack-plugin": "5.6.0", + "html-webpack-plugin": "5.6.3", "jest": "29.7.0", "jest-environment-jsdom": "29.7.0", "jsdom": "16.7.0", @@ -103,9 +103,9 @@ "tslib": "2.6.2", "tsx": "4.6.2", "typescript": "5.5.3", - "webpack": "5.94.0", + "webpack": "5.97.1", "webpack-cli": "5.1.4", - "webpack-dev-server": "5.0.4", + "webpack-dev-server": "5.1.0", "webpack-manifest-plugin": "5.0.0", "whatwg-fetch": "3.6.19", "winston": "3.11.0", diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json index 100e4cb551a..9905ae938bc 100644 --- a/dotcom-rendering/package.json +++ b/dotcom-rendering/package.json @@ -191,12 +191,12 @@ "unified": "11.0.5", "valibot": "0.28.1", "web-vitals": "4.2.3", - "webpack": "5.94.0", + "webpack": "5.97.1", "webpack-assets-manifest": "5.2.1", "webpack-bundle-analyzer": "4.10.2", "webpack-cli": "5.1.4", "webpack-dev-middleware": "7.4.2", - "webpack-dev-server": "5.0.4", + "webpack-dev-server": "5.1.0", "webpack-hot-middleware": "2.26.1", "webpack-hot-server-middleware": "0.6.1", "webpack-manifest-plugin": "5.0.0", diff --git a/dotcom-rendering/webpack/webpack.config.dev-server.js b/dotcom-rendering/webpack/webpack.config.dev-server.js index c14f72a2f7b..d21805fcda5 100644 --- a/dotcom-rendering/webpack/webpack.config.dev-server.js +++ b/dotcom-rendering/webpack/webpack.config.dev-server.js @@ -34,6 +34,7 @@ module.exports = { devMiddleware: { publicPath: '/assets/', serverSideRender: true, + writeToDisk: true, headers: (req, res) => { // Allow any localhost request from accessing the assets if ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea34b01c925..2457e5e83f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -102,7 +102,7 @@ importers: version: 8.4.2(@types/react@18.3.1)(storybook@8.4.2) '@storybook/addon-webpack5-compiler-babel': specifier: 3.0.3 - version: 3.0.3(webpack@5.94.0) + version: 3.0.3(webpack@5.97.1) '@storybook/components': specifier: 8.4.2 version: 8.4.2(storybook@8.4.2) @@ -165,7 +165,7 @@ importers: version: 2.100.0(constructs@10.3.0) babel-loader: specifier: 9.2.1 - version: 9.2.1(@babel/core@7.26.0)(webpack@5.94.0) + version: 9.2.1(@babel/core@7.26.0)(webpack@5.97.1) buffer: specifier: 6.0.3 version: 6.0.3 @@ -197,8 +197,8 @@ importers: specifier: 4.21.0 version: 4.21.0 html-webpack-plugin: - specifier: 5.6.0 - version: 5.6.0(webpack@5.94.0) + specifier: 5.6.3 + version: 5.6.3(webpack@5.97.1) jest: specifier: 29.7.0 version: 29.7.0(@types/node@18.18.14) @@ -237,7 +237,7 @@ importers: version: 29.1.2(@babel/core@7.26.0)(esbuild@0.18.20)(jest@29.7.0)(typescript@5.5.3) ts-loader: specifier: 9.5.1 - version: 9.5.1(typescript@5.5.3)(webpack@5.94.0) + version: 9.5.1(typescript@5.5.3)(webpack@5.97.1) tslib: specifier: 2.6.2 version: 2.6.2 @@ -248,17 +248,17 @@ importers: specifier: 5.5.3 version: 5.5.3 webpack: - specifier: 5.94.0 - version: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + specifier: 5.97.1 + version: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) webpack-cli: specifier: 5.1.4 - version: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.94.0) + version: 5.1.4(webpack-dev-server@5.1.0)(webpack@5.97.1) webpack-dev-server: - specifier: 5.0.4 - version: 5.0.4(webpack-cli@5.1.4)(webpack@5.94.0) + specifier: 5.1.0 + version: 5.1.0(webpack-cli@5.1.4)(webpack@5.97.1) webpack-manifest-plugin: specifier: 5.0.0 - version: 5.0.0(patch_hash=zao44j4xgexeap52664hqknxfu)(webpack@5.94.0) + version: 5.0.0(patch_hash=zao44j4xgexeap52664hqknxfu)(webpack@5.97.1) whatwg-fetch: specifier: 3.6.19 version: 3.6.19 @@ -396,7 +396,7 @@ importers: version: 8.4.2(storybook@8.4.2) '@storybook/addon-webpack5-compiler-swc': specifier: 1.0.5 - version: 1.0.5(webpack@5.94.0) + version: 1.0.5(webpack@5.97.1) '@storybook/components': specifier: 8.4.2 version: 8.4.2(storybook@8.4.2) @@ -558,7 +558,7 @@ importers: version: 2.100.0(constructs@10.3.0) babel-loader: specifier: 9.2.1 - version: 9.2.1(@babel/core@7.26.0)(webpack@5.94.0) + version: 9.2.1(@babel/core@7.26.0)(webpack@5.97.1) babel-plugin-polyfill-corejs3: specifier: 0.10.6 version: 0.10.6(@babel/core@7.26.0) @@ -594,7 +594,7 @@ importers: version: 11.0.0 css-loader: specifier: 7.1.2 - version: 7.1.2(webpack@5.94.0) + version: 7.1.2(webpack@5.97.1) curlyquotes: specifier: 1.5.5 version: 1.5.5 @@ -744,7 +744,7 @@ importers: version: 14.0.0(stylelint@16.5.0) swc-loader: specifier: 0.2.6 - version: 0.2.6(@swc/core@1.9.2)(webpack@5.94.0) + version: 0.2.6(@swc/core@1.9.2)(webpack@5.97.1) swr: specifier: 1.3.0 version: 1.3.0(react@18.3.1) @@ -759,7 +759,7 @@ importers: version: 2.0.0 ts-loader: specifier: 9.5.1 - version: 9.5.1(typescript@5.5.3)(webpack@5.94.0) + version: 9.5.1(typescript@5.5.3)(webpack@5.97.1) ts-unused-exports: specifier: 10.1.0 version: 10.1.0(typescript@5.5.3) @@ -788,32 +788,32 @@ importers: specifier: 4.2.3 version: 4.2.3 webpack: - specifier: 5.94.0 - version: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + specifier: 5.97.1 + version: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) webpack-assets-manifest: specifier: 5.2.1 - version: 5.2.1(webpack@5.94.0) + version: 5.2.1(webpack@5.97.1) webpack-bundle-analyzer: specifier: 4.10.2 version: 4.10.2 webpack-cli: specifier: 5.1.4 - version: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.0.4)(webpack@5.94.0) + version: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.1.0)(webpack@5.97.1) webpack-dev-middleware: specifier: 7.4.2 - version: 7.4.2(webpack@5.94.0) + version: 7.4.2(webpack@5.97.1) webpack-dev-server: - specifier: 5.0.4 - version: 5.0.4(webpack-cli@5.1.4)(webpack@5.94.0) + specifier: 5.1.0 + version: 5.1.0(webpack-cli@5.1.4)(webpack@5.97.1) webpack-hot-middleware: specifier: 2.26.1 version: 2.26.1 webpack-hot-server-middleware: specifier: 0.6.1 - version: 0.6.1(webpack@5.94.0) + version: 0.6.1(webpack@5.97.1) webpack-manifest-plugin: specifier: 5.0.0 - version: 5.0.0(patch_hash=zao44j4xgexeap52664hqknxfu)(webpack@5.94.0) + version: 5.0.0(patch_hash=zao44j4xgexeap52664hqknxfu)(webpack@5.97.1) webpack-merge: specifier: 6.0.1 version: 6.0.1 @@ -5865,23 +5865,23 @@ packages: storybook: 8.4.2(prettier@3.0.3) dev: false - /@storybook/addon-webpack5-compiler-babel@3.0.3(webpack@5.94.0): + /@storybook/addon-webpack5-compiler-babel@3.0.3(webpack@5.97.1): resolution: {integrity: sha512-rVQTTw+oxJltbVKaejIWSHwVKOBJs3au21f/pYXhV0aiNgNhxEa3vr79t/j0j8ox8uJtzM8XYOb7FlkvGfHlwQ==} engines: {node: '>=18'} dependencies: '@babel/core': 7.26.0 - babel-loader: 9.2.1(@babel/core@7.26.0)(webpack@5.94.0) + babel-loader: 9.2.1(@babel/core@7.26.0)(webpack@5.97.1) transitivePeerDependencies: - supports-color - webpack dev: false - /@storybook/addon-webpack5-compiler-swc@1.0.5(webpack@5.94.0): + /@storybook/addon-webpack5-compiler-swc@1.0.5(webpack@5.97.1): resolution: {integrity: sha512-1NlM3noit2vA22OyWb8Ma2lhcEKCS1Snv2kr+EkaVABUqNDfVc9AD/GgYQhF7F/2CoF5N2JU7uzXDzFHd5TzZg==} engines: {node: '>=18'} dependencies: '@swc/core': 1.9.2 - swc-loader: 0.2.6(@swc/core@1.9.2)(webpack@5.94.0) + swc-loader: 0.2.6(@swc/core@1.9.2)(webpack@5.97.1) transitivePeerDependencies: - '@swc/helpers' - webpack @@ -5923,24 +5923,24 @@ packages: case-sensitive-paths-webpack-plugin: 2.4.0 cjs-module-lexer: 1.2.3 constants-browserify: 1.0.0 - css-loader: 6.10.0(webpack@5.94.0) + css-loader: 6.10.0(webpack@5.97.1) es-module-lexer: 1.5.3 - fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.5.3)(webpack@5.94.0) - html-webpack-plugin: 5.6.0(webpack@5.94.0) + fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.5.3)(webpack@5.97.1) + html-webpack-plugin: 5.6.3(webpack@5.97.1) magic-string: 0.30.5 path-browserify: 1.0.1 process: 0.11.10 semver: 7.5.4 storybook: 8.4.2(prettier@3.0.3) - style-loader: 3.3.3(webpack@5.94.0) - terser-webpack-plugin: 5.3.10(@swc/core@1.9.2)(esbuild@0.18.20)(webpack@5.94.0) + style-loader: 3.3.3(webpack@5.97.1) + terser-webpack-plugin: 5.3.10(@swc/core@1.9.2)(esbuild@0.18.20)(webpack@5.97.1) ts-dedent: 2.2.0 typescript: 5.5.3 url: 0.11.3 util: 0.12.5 util-deprecate: 1.0.2 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) - webpack-dev-middleware: 6.1.3(webpack@5.94.0) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack-dev-middleware: 6.1.3(webpack@5.97.1) webpack-hot-middleware: 2.26.1 webpack-virtual-modules: 0.6.1 transitivePeerDependencies: @@ -5967,24 +5967,24 @@ packages: case-sensitive-paths-webpack-plugin: 2.4.0 cjs-module-lexer: 1.2.3 constants-browserify: 1.0.0 - css-loader: 6.10.0(webpack@5.94.0) + css-loader: 6.10.0(webpack@5.97.1) es-module-lexer: 1.5.3 - fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.5.3)(webpack@5.94.0) - html-webpack-plugin: 5.6.0(webpack@5.94.0) + fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.5.3)(webpack@5.97.1) + html-webpack-plugin: 5.6.3(webpack@5.97.1) magic-string: 0.30.5 path-browserify: 1.0.1 process: 0.11.10 semver: 7.5.4 storybook: 8.4.2(prettier@3.0.3) - style-loader: 3.3.3(webpack@5.94.0) - terser-webpack-plugin: 5.3.10(esbuild@0.18.20)(webpack@5.94.0) + style-loader: 3.3.3(webpack@5.97.1) + terser-webpack-plugin: 5.3.10(esbuild@0.18.20)(webpack@5.97.1) ts-dedent: 2.2.0 typescript: 5.5.3 url: 0.11.3 util: 0.12.5 util-deprecate: 1.0.2 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) - webpack-dev-middleware: 6.1.3(webpack@5.94.0) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack-dev-middleware: 6.1.3(webpack@5.97.1) webpack-hot-middleware: 2.26.1 webpack-virtual-modules: 0.6.1 transitivePeerDependencies: @@ -6109,7 +6109,7 @@ packages: dependencies: '@storybook/core-webpack': 8.4.2(storybook@8.4.2) '@storybook/react': 8.4.2(@storybook/test@8.4.2)(react-dom@18.3.1)(react@18.3.1)(storybook@8.4.2)(typescript@5.5.3) - '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.5.3)(webpack@5.94.0) + '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.5.3)(webpack@5.97.1) '@types/node': 22.8.0 '@types/semver': 7.5.6 find-up: 5.0.0 @@ -6122,7 +6122,7 @@ packages: storybook: 8.4.2(prettier@3.0.3) tsconfig-paths: 4.2.0 typescript: 5.5.3 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) transitivePeerDependencies: - '@storybook/test' - '@swc/core' @@ -6146,7 +6146,7 @@ packages: dependencies: '@storybook/core-webpack': 8.4.2(storybook@8.4.2) '@storybook/react': 8.4.2(@storybook/test@8.4.2)(react-dom@18.3.1)(react@18.3.1)(storybook@8.4.2)(typescript@5.5.3) - '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.5.3)(webpack@5.94.0) + '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.5.3)(webpack@5.97.1) '@types/node': 22.8.0 '@types/semver': 7.5.6 find-up: 5.0.0 @@ -6159,7 +6159,7 @@ packages: storybook: 8.4.2(prettier@3.0.3) tsconfig-paths: 4.2.0 typescript: 5.5.3 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) transitivePeerDependencies: - '@storybook/test' - '@swc/core' @@ -6177,7 +6177,7 @@ packages: storybook: 8.4.2(prettier@3.0.3) dev: false - /@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.5.3)(webpack@5.94.0): + /@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.5.3)(webpack@5.97.1): resolution: {integrity: sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==} peerDependencies: typescript: '>= 4.x' @@ -6191,7 +6191,7 @@ packages: react-docgen-typescript: 2.2.2(typescript@5.5.3) tslib: 2.6.2 typescript: 5.5.3 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) transitivePeerDependencies: - supports-color dev: false @@ -6851,10 +6851,28 @@ packages: '@types/trusted-types': 2.0.7 dev: false + /@types/eslint-scope@3.7.7: + resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} + dependencies: + '@types/eslint': 9.6.1 + '@types/estree': 1.0.6 + dev: false + + /@types/eslint@9.6.1: + resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==} + dependencies: + '@types/estree': 1.0.6 + '@types/json-schema': 7.0.15 + dev: false + /@types/estree@1.0.5: resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} dev: false + /@types/estree@1.0.6: + resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} + dev: false + /@types/express-serve-static-core@4.17.41: resolution: {integrity: sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==} dependencies: @@ -7232,7 +7250,7 @@ packages: dependencies: '@types/node': 20.14.10 tapable: 2.2.1 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) transitivePeerDependencies: - '@swc/core' - esbuild @@ -7248,7 +7266,7 @@ packages: resolution: {integrity: sha512-8Z3/edqxE3RRlOJwKSgOFxLZRt/i1qFlv/Bi308ZUKo9jh8oGngd9r8GR0ZNKW5AEJq8QNQE3b17CwghTjQ0Uw==} dependencies: '@types/node': 20.14.10 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) transitivePeerDependencies: - '@swc/core' - esbuild @@ -7618,135 +7636,135 @@ packages: tinyrainbow: 1.2.0 dev: false - /@webassemblyjs/ast@1.12.1: - resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} + /@webassemblyjs/ast@1.14.1: + resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==} dependencies: - '@webassemblyjs/helper-numbers': 1.11.6 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 + '@webassemblyjs/helper-numbers': 1.13.2 + '@webassemblyjs/helper-wasm-bytecode': 1.13.2 dev: false - /@webassemblyjs/floating-point-hex-parser@1.11.6: - resolution: {integrity: sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==} + /@webassemblyjs/floating-point-hex-parser@1.13.2: + resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==} dev: false - /@webassemblyjs/helper-api-error@1.11.6: - resolution: {integrity: sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==} + /@webassemblyjs/helper-api-error@1.13.2: + resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==} dev: false - /@webassemblyjs/helper-buffer@1.12.1: - resolution: {integrity: sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==} + /@webassemblyjs/helper-buffer@1.14.1: + resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==} dev: false - /@webassemblyjs/helper-numbers@1.11.6: - resolution: {integrity: sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==} + /@webassemblyjs/helper-numbers@1.13.2: + resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==} dependencies: - '@webassemblyjs/floating-point-hex-parser': 1.11.6 - '@webassemblyjs/helper-api-error': 1.11.6 + '@webassemblyjs/floating-point-hex-parser': 1.13.2 + '@webassemblyjs/helper-api-error': 1.13.2 '@xtuc/long': 4.2.2 dev: false - /@webassemblyjs/helper-wasm-bytecode@1.11.6: - resolution: {integrity: sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==} + /@webassemblyjs/helper-wasm-bytecode@1.13.2: + resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==} dev: false - /@webassemblyjs/helper-wasm-section@1.12.1: - resolution: {integrity: sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==} + /@webassemblyjs/helper-wasm-section@1.14.1: + resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==} dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-buffer': 1.12.1 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/wasm-gen': 1.12.1 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/helper-buffer': 1.14.1 + '@webassemblyjs/helper-wasm-bytecode': 1.13.2 + '@webassemblyjs/wasm-gen': 1.14.1 dev: false - /@webassemblyjs/ieee754@1.11.6: - resolution: {integrity: sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==} + /@webassemblyjs/ieee754@1.13.2: + resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==} dependencies: '@xtuc/ieee754': 1.2.0 dev: false - /@webassemblyjs/leb128@1.11.6: - resolution: {integrity: sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==} + /@webassemblyjs/leb128@1.13.2: + resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==} dependencies: '@xtuc/long': 4.2.2 dev: false - /@webassemblyjs/utf8@1.11.6: - resolution: {integrity: sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==} + /@webassemblyjs/utf8@1.13.2: + resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==} dev: false - /@webassemblyjs/wasm-edit@1.12.1: - resolution: {integrity: sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==} + /@webassemblyjs/wasm-edit@1.14.1: + resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==} dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-buffer': 1.12.1 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/helper-wasm-section': 1.12.1 - '@webassemblyjs/wasm-gen': 1.12.1 - '@webassemblyjs/wasm-opt': 1.12.1 - '@webassemblyjs/wasm-parser': 1.12.1 - '@webassemblyjs/wast-printer': 1.12.1 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/helper-buffer': 1.14.1 + '@webassemblyjs/helper-wasm-bytecode': 1.13.2 + '@webassemblyjs/helper-wasm-section': 1.14.1 + '@webassemblyjs/wasm-gen': 1.14.1 + '@webassemblyjs/wasm-opt': 1.14.1 + '@webassemblyjs/wasm-parser': 1.14.1 + '@webassemblyjs/wast-printer': 1.14.1 dev: false - /@webassemblyjs/wasm-gen@1.12.1: - resolution: {integrity: sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==} + /@webassemblyjs/wasm-gen@1.14.1: + resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==} dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/ieee754': 1.11.6 - '@webassemblyjs/leb128': 1.11.6 - '@webassemblyjs/utf8': 1.11.6 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/helper-wasm-bytecode': 1.13.2 + '@webassemblyjs/ieee754': 1.13.2 + '@webassemblyjs/leb128': 1.13.2 + '@webassemblyjs/utf8': 1.13.2 dev: false - /@webassemblyjs/wasm-opt@1.12.1: - resolution: {integrity: sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==} + /@webassemblyjs/wasm-opt@1.14.1: + resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==} dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-buffer': 1.12.1 - '@webassemblyjs/wasm-gen': 1.12.1 - '@webassemblyjs/wasm-parser': 1.12.1 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/helper-buffer': 1.14.1 + '@webassemblyjs/wasm-gen': 1.14.1 + '@webassemblyjs/wasm-parser': 1.14.1 dev: false - /@webassemblyjs/wasm-parser@1.12.1: - resolution: {integrity: sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==} + /@webassemblyjs/wasm-parser@1.14.1: + resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==} dependencies: - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/helper-api-error': 1.11.6 - '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/ieee754': 1.11.6 - '@webassemblyjs/leb128': 1.11.6 - '@webassemblyjs/utf8': 1.11.6 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/helper-api-error': 1.13.2 + '@webassemblyjs/helper-wasm-bytecode': 1.13.2 + '@webassemblyjs/ieee754': 1.13.2 + '@webassemblyjs/leb128': 1.13.2 + '@webassemblyjs/utf8': 1.13.2 dev: false - /@webassemblyjs/wast-printer@1.12.1: - resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==} + /@webassemblyjs/wast-printer@1.14.1: + resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==} dependencies: - '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/ast': 1.14.1 '@xtuc/long': 4.2.2 dev: false - /@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.94.0): + /@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.97.1): resolution: {integrity: sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==} engines: {node: '>=14.15.0'} peerDependencies: webpack: 5.x.x webpack-cli: 5.x.x dependencies: - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.94.0) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack-cli: 5.1.4(webpack-dev-server@5.1.0)(webpack@5.97.1) dev: false - /@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.94.0): + /@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.97.1): resolution: {integrity: sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==} engines: {node: '>=14.15.0'} peerDependencies: webpack: 5.x.x webpack-cli: 5.x.x dependencies: - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.94.0) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack-cli: 5.1.4(webpack-dev-server@5.1.0)(webpack@5.97.1) dev: false - /@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.0.4)(webpack@5.94.0): + /@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.1.0)(webpack@5.97.1): resolution: {integrity: sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==} engines: {node: '>=14.15.0'} peerDependencies: @@ -7757,9 +7775,9 @@ packages: webpack-dev-server: optional: true dependencies: - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.94.0) - webpack-dev-server: 5.0.4(webpack-cli@5.1.4)(webpack@5.94.0) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack-cli: 5.1.4(webpack-dev-server@5.1.0)(webpack@5.97.1) + webpack-dev-server: 5.1.0(webpack-cli@5.1.4)(webpack@5.97.1) dev: false /@xhmikosr/archive-type@7.0.0: @@ -7895,14 +7913,6 @@ packages: acorn-walk: 8.3.1 dev: false - /acorn-import-attributes@1.9.5(acorn@8.11.2): - resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==} - peerDependencies: - acorn: ^8 - dependencies: - acorn: 8.11.2 - dev: false - /acorn-jsx@5.3.2(acorn@8.11.2): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -7933,6 +7943,12 @@ packages: hasBin: true dev: false + /acorn@8.14.0: + resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==} + engines: {node: '>=0.4.0'} + hasBin: true + dev: false + /agent-base@6.0.2: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} @@ -8358,7 +8374,7 @@ packages: - supports-color dev: false - /babel-loader@9.2.1(@babel/core@7.26.0)(webpack@5.94.0): + /babel-loader@9.2.1(@babel/core@7.26.0)(webpack@5.97.1): resolution: {integrity: sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==} engines: {node: '>= 14.15.0'} peerDependencies: @@ -8368,7 +8384,7 @@ packages: '@babel/core': 7.26.0 find-cache-dir: 4.0.0 schema-utils: 4.2.0 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /babel-plugin-istanbul@6.1.1: @@ -9511,7 +9527,7 @@ packages: engines: {node: '>=12 || >=16'} dev: false - /css-loader@6.10.0(webpack@5.94.0): + /css-loader@6.10.0(webpack@5.97.1): resolution: {integrity: sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -9531,10 +9547,10 @@ packages: postcss-modules-values: 4.0.0(postcss@8.4.47) postcss-value-parser: 4.2.0 semver: 7.5.4 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false - /css-loader@7.1.2(webpack@5.94.0): + /css-loader@7.1.2(webpack@5.97.1): resolution: {integrity: sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==} engines: {node: '>= 18.12.0'} peerDependencies: @@ -9554,7 +9570,7 @@ packages: postcss-modules-values: 4.0.0(postcss@8.4.39) postcss-value-parser: 4.2.0 semver: 7.5.4 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /css-select@4.3.0: @@ -9849,13 +9865,6 @@ packages: default-browser-id: 5.0.0 dev: false - /default-gateway@6.0.3: - resolution: {integrity: sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==} - engines: {node: '>= 10'} - dependencies: - execa: 5.1.1 - dev: false - /defaults@3.0.0: resolution: {integrity: sha512-RsqXDEAALjfRTro+IFNKpcPCt0/Cy2FqHSIlnomiJp9YGadpQnrtbRpSgN2+np21qHcIKiva4fiOQGjS9/qR/A==} engines: {node: '>=18'} @@ -11463,7 +11472,7 @@ packages: signal-exit: 4.1.0 dev: false - /fork-ts-checker-webpack-plugin@8.0.0(typescript@5.5.3)(webpack@5.94.0): + /fork-ts-checker-webpack-plugin@8.0.0(typescript@5.5.3)(webpack@5.97.1): resolution: {integrity: sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==} engines: {node: '>=12.13.0', yarn: '>=1.0.0'} peerDependencies: @@ -11483,7 +11492,7 @@ packages: semver: 7.5.4 tapable: 2.2.1 typescript: 5.5.3 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /form-data-encoder@2.1.4: @@ -12154,8 +12163,8 @@ packages: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} dev: false - /html-webpack-plugin@5.6.0(webpack@5.94.0): - resolution: {integrity: sha512-iwaY4wzbe48AfKLZ/Cc8k0L+FKG6oSNRaZ8x5A/T/IVDGyXcbHncM9TdDa93wn0FsSm82FhTKW7f3vS61thXAw==} + /html-webpack-plugin@5.6.3(webpack@5.97.1): + resolution: {integrity: sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==} engines: {node: '>=10.13.0'} peerDependencies: '@rspack/core': 0.x || 1.x @@ -12171,7 +12180,7 @@ packages: lodash: 4.17.21 pretty-error: 4.0.0 tapable: 2.2.1 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /htmlparser2@6.1.0: @@ -16662,13 +16671,13 @@ packages: peek-readable: 5.3.1 dev: false - /style-loader@3.3.3(webpack@5.94.0): + /style-loader@3.3.3(webpack@5.97.1): resolution: {integrity: sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==} engines: {node: '>= 12.13.0'} peerDependencies: webpack: ^5.0.0 dependencies: - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /stylelint-config-recommended@14.0.0(stylelint@16.5.0): @@ -16797,7 +16806,7 @@ packages: picocolors: 1.1.1 dev: false - /swc-loader@0.2.6(@swc/core@1.9.2)(webpack@5.94.0): + /swc-loader@0.2.6(@swc/core@1.9.2)(webpack@5.97.1): resolution: {integrity: sha512-9Zi9UP2YmDpgmQVbyOPJClY0dwf58JDyDMQ7uRc4krmc72twNI2fvlBWHLqVekBpPc7h5NJkGVT1zNDxFrqhvg==} peerDependencies: '@swc/core': ^1.2.147 @@ -16805,7 +16814,7 @@ packages: dependencies: '@swc/core': 1.9.2 '@swc/counter': 0.1.3 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /swr@1.3.0(react@18.3.1): @@ -16844,7 +16853,7 @@ packages: streamx: 2.21.0 dev: false - /terser-webpack-plugin@5.3.10(@swc/core@1.9.2)(esbuild@0.18.20)(webpack@5.94.0): + /terser-webpack-plugin@5.3.10(@swc/core@1.9.2)(esbuild@0.18.20)(webpack@5.97.1): resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -16867,10 +16876,10 @@ packages: schema-utils: 3.3.0 serialize-javascript: 6.0.1 terser: 5.26.0 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false - /terser-webpack-plugin@5.3.10(esbuild@0.18.20)(webpack@5.94.0): + /terser-webpack-plugin@5.3.10(esbuild@0.18.20)(webpack@5.97.1): resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -16892,7 +16901,7 @@ packages: schema-utils: 3.3.0 serialize-javascript: 6.0.1 terser: 5.26.0 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /terser@5.26.0: @@ -17141,7 +17150,7 @@ packages: yargs-parser: 21.1.1 dev: false - /ts-loader@9.5.1(typescript@5.5.3)(webpack@5.94.0): + /ts-loader@9.5.1(typescript@5.5.3)(webpack@5.97.1): resolution: {integrity: sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==} engines: {node: '>=12.0.0'} peerDependencies: @@ -17154,7 +17163,7 @@ packages: semver: 7.5.4 source-map: 0.7.4 typescript: 5.5.3 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /ts-node@10.9.2(@swc/core@1.9.2)(@types/node@16.18.68)(typescript@5.1.6): @@ -17807,7 +17816,7 @@ packages: engines: {node: '>=12'} dev: false - /webpack-assets-manifest@5.2.1(webpack@5.94.0): + /webpack-assets-manifest@5.2.1(webpack@5.97.1): resolution: {integrity: sha512-MsEcXVio1GY6R+b4dVfTHIDMB0RB90KajQG8neRbH92vE2S1ClGw9mNa9NPlratYBvZOhExmN0qqMNFTaCTuIg==} engines: {node: '>=10.13.0'} peerDependencies: @@ -17820,7 +17829,7 @@ packages: lodash.has: 4.5.2 schema-utils: 3.3.0 tapable: 2.2.1 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false /webpack-bundle-analyzer@4.10.2: @@ -17845,7 +17854,7 @@ packages: - utf-8-validate dev: false - /webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.0.4)(webpack@5.94.0): + /webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.1.0)(webpack@5.97.1): resolution: {integrity: sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==} engines: {node: '>=14.15.0'} hasBin: true @@ -17863,9 +17872,9 @@ packages: optional: true dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.94.0) - '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.94.0) - '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.0.4)(webpack@5.94.0) + '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.97.1) + '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.97.1) + '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.1.0)(webpack@5.97.1) colorette: 2.0.20 commander: 10.0.1 cross-spawn: 7.0.3 @@ -17874,13 +17883,13 @@ packages: import-local: 3.1.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) webpack-bundle-analyzer: 4.10.2 - webpack-dev-server: 5.0.4(webpack-cli@5.1.4)(webpack@5.94.0) + webpack-dev-server: 5.1.0(webpack-cli@5.1.4)(webpack@5.97.1) webpack-merge: 5.10.0 dev: false - /webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.94.0): + /webpack-cli@5.1.4(webpack-dev-server@5.1.0)(webpack@5.97.1): resolution: {integrity: sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==} engines: {node: '>=14.15.0'} hasBin: true @@ -17898,9 +17907,9 @@ packages: optional: true dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.94.0) - '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.94.0) - '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.0.4)(webpack@5.94.0) + '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.97.1) + '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.97.1) + '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack-dev-server@5.1.0)(webpack@5.97.1) colorette: 2.0.20 commander: 10.0.1 cross-spawn: 7.0.3 @@ -17909,12 +17918,12 @@ packages: import-local: 3.1.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) - webpack-dev-server: 5.0.4(webpack-cli@5.1.4)(webpack@5.94.0) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack-dev-server: 5.1.0(webpack-cli@5.1.4)(webpack@5.97.1) webpack-merge: 5.10.0 dev: false - /webpack-dev-middleware@6.1.3(webpack@5.94.0): + /webpack-dev-middleware@6.1.3(webpack@5.97.1): resolution: {integrity: sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==} engines: {node: '>= 14.15.0'} peerDependencies: @@ -17928,28 +17937,10 @@ packages: mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.2.0 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false - /webpack-dev-middleware@7.2.1(webpack@5.94.0): - resolution: {integrity: sha512-hRLz+jPQXo999Nx9fXVdKlg/aehsw1ajA9skAneGmT03xwmyuhvF93p6HUKKbWhXdcERtGTzUCtIQr+2IQegrA==} - engines: {node: '>= 18.12.0'} - peerDependencies: - webpack: ^5.0.0 - peerDependenciesMeta: - webpack: - optional: true - dependencies: - colorette: 2.0.20 - memfs: 4.7.7 - mime-types: 2.1.35 - on-finished: 2.4.1 - range-parser: 1.2.1 - schema-utils: 4.2.0 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) - dev: false - - /webpack-dev-middleware@7.4.2(webpack@5.94.0): + /webpack-dev-middleware@7.4.2(webpack@5.97.1): resolution: {integrity: sha512-xOO8n6eggxnwYpy1NlzUKpvrjfJTvae5/D6WOK0S2LSo7vjmo5gCM1DbLUmFqrMTJP+W/0YZNctm7jasWvLuBA==} engines: {node: '>= 18.12.0'} peerDependencies: @@ -17964,11 +17955,11 @@ packages: on-finished: 2.4.1 range-parser: 1.2.1 schema-utils: 4.2.0 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) dev: false - /webpack-dev-server@5.0.4(webpack-cli@5.1.4)(webpack@5.94.0): - resolution: {integrity: sha512-dljXhUgx3HqKP2d8J/fUMvhxGhzjeNVarDLcbO/EWMSgRizDkxHQDZQaLFL5VJY9tRBj2Gz+rvCEYYvhbqPHNA==} + /webpack-dev-server@5.1.0(webpack-cli@5.1.4)(webpack@5.97.1): + resolution: {integrity: sha512-aQpaN81X6tXie1FoOB7xlMfCsN19pSvRAeYUHOdFWOlhpQ/LlbfTqYwwmEDFV0h8GGuqmCmKmT+pxcUV/Nt2gQ==} engines: {node: '>= 18.12.0'} hasBin: true peerDependencies: @@ -17993,7 +17984,6 @@ packages: colorette: 2.0.20 compression: 1.7.4 connect-history-api-fallback: 2.0.0 - default-gateway: 6.0.3 express: 4.21.0 graceful-fs: 4.2.11 html-entities: 2.4.0 @@ -18002,16 +17992,15 @@ packages: launch-editor: 2.6.1 open: 10.1.0 p-retry: 6.2.0 - rimraf: 5.0.5 schema-utils: 4.2.0 selfsigned: 2.4.1 serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.94.0) - webpack-dev-middleware: 7.2.1(webpack@5.94.0) - ws: 8.17.1 + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack-cli: 5.1.4(webpack-dev-server@5.1.0)(webpack@5.97.1) + webpack-dev-middleware: 7.4.2(webpack@5.97.1) + ws: 8.18.0 transitivePeerDependencies: - bufferutil - debug @@ -18034,7 +18023,7 @@ packages: strip-ansi: 6.0.1 dev: false - /webpack-hot-server-middleware@0.6.1(webpack@5.94.0): + /webpack-hot-server-middleware@0.6.1(webpack@5.97.1): resolution: {integrity: sha512-YOKwdS0hnmADsNCsReGkMOBkoz2YVrQZvnVcViM2TDXlK9NnaOGXmnrLFjzwsHFa0/iuJy/QJFEoMxzk8R1Mgg==} peerDependencies: webpack: '*' @@ -18042,19 +18031,19 @@ packages: debug: 3.2.7 require-from-string: 2.0.2 source-map-support: 0.5.21 - webpack: 5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4) transitivePeerDependencies: - supports-color dev: false - /webpack-manifest-plugin@5.0.0(patch_hash=zao44j4xgexeap52664hqknxfu)(webpack@5.94.0): + /webpack-manifest-plugin@5.0.0(patch_hash=zao44j4xgexeap52664hqknxfu)(webpack@5.97.1): resolution: {integrity: sha512-8RQfMAdc5Uw3QbCQ/CBV/AXqOR8mt03B6GJmRbhWopE8GzRfEpn+k0ZuWywxW+5QZsffhmFDY1J6ohqJo+eMuw==} engines: {node: '>=12.22.0'} peerDependencies: webpack: ^5.47.0 dependencies: tapable: 2.2.1 - webpack: 5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4) + webpack: 5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4) webpack-sources: 2.3.1 dev: false patched: true @@ -18108,8 +18097,8 @@ packages: resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==} dev: false - /webpack@5.94.0(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4): - resolution: {integrity: sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==} + /webpack@5.97.1(@swc/core@1.9.2)(esbuild@0.18.20)(webpack-cli@5.1.4): + resolution: {integrity: sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==} engines: {node: '>=10.13.0'} hasBin: true peerDependencies: @@ -18118,13 +18107,13 @@ packages: webpack-cli: optional: true dependencies: - '@types/estree': 1.0.5 - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/wasm-edit': 1.12.1 - '@webassemblyjs/wasm-parser': 1.12.1 - acorn: 8.11.2 - acorn-import-attributes: 1.9.5(acorn@8.11.2) - browserslist: 4.23.0 + '@types/eslint-scope': 3.7.7 + '@types/estree': 1.0.6 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/wasm-edit': 1.14.1 + '@webassemblyjs/wasm-parser': 1.14.1 + acorn: 8.14.0 + browserslist: 4.24.0 chrome-trace-event: 1.0.3 enhanced-resolve: 5.17.1 es-module-lexer: 1.5.3 @@ -18138,9 +18127,9 @@ packages: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(@swc/core@1.9.2)(esbuild@0.18.20)(webpack@5.94.0) + terser-webpack-plugin: 5.3.10(@swc/core@1.9.2)(esbuild@0.18.20)(webpack@5.97.1) watchpack: 2.4.1 - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.0.4)(webpack@5.94.0) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.1.0)(webpack@5.97.1) webpack-sources: 3.2.3 transitivePeerDependencies: - '@swc/core' @@ -18148,8 +18137,8 @@ packages: - uglify-js dev: false - /webpack@5.94.0(esbuild@0.18.20)(webpack-cli@5.1.4): - resolution: {integrity: sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==} + /webpack@5.97.1(esbuild@0.18.20)(webpack-cli@5.1.4): + resolution: {integrity: sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==} engines: {node: '>=10.13.0'} hasBin: true peerDependencies: @@ -18158,13 +18147,13 @@ packages: webpack-cli: optional: true dependencies: - '@types/estree': 1.0.5 - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/wasm-edit': 1.12.1 - '@webassemblyjs/wasm-parser': 1.12.1 - acorn: 8.11.2 - acorn-import-attributes: 1.9.5(acorn@8.11.2) - browserslist: 4.23.0 + '@types/eslint-scope': 3.7.7 + '@types/estree': 1.0.6 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/wasm-edit': 1.14.1 + '@webassemblyjs/wasm-parser': 1.14.1 + acorn: 8.14.0 + browserslist: 4.24.0 chrome-trace-event: 1.0.3 enhanced-resolve: 5.17.1 es-module-lexer: 1.5.3 @@ -18178,9 +18167,9 @@ packages: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.18.20)(webpack@5.94.0) + terser-webpack-plugin: 5.3.10(esbuild@0.18.20)(webpack@5.97.1) watchpack: 2.4.1 - webpack-cli: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.94.0) + webpack-cli: 5.1.4(webpack-dev-server@5.1.0)(webpack@5.97.1) webpack-sources: 3.2.3 transitivePeerDependencies: - '@swc/core' @@ -18468,6 +18457,19 @@ packages: optional: true dev: false + /ws@8.18.0: + resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==} + engines: {node: '>=10.0.0'} + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: '>=5.0.2' + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + dev: false + /xml-name-validator@3.0.0: resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==} dev: false From 36232eab577fcaa10fe52e0f4ba8af0a27be098b Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Wed, 11 Dec 2024 17:14:50 +0000 Subject: [PATCH 23/26] Remove decidePalette from CalloutEmbedBlock component --- .../CalloutEmbedBlockComponent.importable.tsx | 18 ++++------ .../CalloutEmbedBlockComponent.stories.tsx | 6 ---- dotcom-rendering/src/lib/decidePalette.ts | 13 ------- dotcom-rendering/src/lib/renderElement.tsx | 5 +-- dotcom-rendering/src/paletteDeclarations.ts | 35 +++++++++++++++++++ dotcom-rendering/src/types/palette.ts | 1 - 6 files changed, 42 insertions(+), 36 deletions(-) diff --git a/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx b/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx index 8ca13f2f796..d6f5d4b14db 100644 --- a/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx @@ -6,15 +6,13 @@ import { } from '@guardian/source/foundations'; import { Button } from '@guardian/source/react-components'; import { useEffect, useState } from 'react'; -import type { ArticleFormat } from '../lib/articleFormat'; -import { decidePalette } from '../lib/decidePalette'; +import { palette } from '../palette'; import MinusIcon from '../static/icons/minus.svg'; import PlusIcon from '../static/icons/plus.svg'; import type { CalloutBlockElement, CalloutBlockElementV2, } from '../types/content'; -import type { Palette } from '../types/palette'; import { Form } from './CalloutEmbed/Form'; const wrapperStyles = css` @@ -79,10 +77,10 @@ const summaryContentWrapper = css` flex-direction: row; `; -const speechBubbleStyles = (palette: Palette) => css` +const speechBubbleStyles = css` ${textSansBold17} color: ${srcPalette.neutral[100]}; - background-color: ${palette.background.speechBubble}; + background-color: ${palette('--speech-bubble-background')}; min-width: 88px; padding-bottom: 6px; padding-left: 10px; @@ -93,7 +91,7 @@ const speechBubbleStyles = (palette: Palette) => css` height: 22px; border-bottom-right-radius: 18px; position: absolute; - background-color: ${palette.background.speechBubble}; + background-color: ${palette('--speech-bubble-background')}; } `; @@ -147,10 +145,8 @@ type FormDataType = { [key in string]: unknown }; */ export const CalloutEmbedBlockComponent = ({ callout, - format, }: { callout: CalloutBlockElement | CalloutBlockElementV2; - format: ArticleFormat; }) => { let expandFormButtonRef: HTMLButtonElement | null = null; let firstFieldElementRef: HTMLElement | null = null; @@ -160,8 +156,6 @@ export const CalloutEmbedBlockComponent = ({ const [error, setError] = useState(''); const [submissionSuccess, setSubmissionSuccess] = useState(false); - const palette = decidePalette(format); - const { title, description, formFields } = callout; const onSubmit = async (formData: FormDataType) => { @@ -312,7 +306,7 @@ export const CalloutEmbedBlockComponent = ({
    -
    +

    Share your story

    @@ -338,7 +332,7 @@ export const CalloutEmbedBlockComponent = ({
    -
    +

    Share your story

    diff --git a/dotcom-rendering/src/components/CalloutEmbedBlockComponent.stories.tsx b/dotcom-rendering/src/components/CalloutEmbedBlockComponent.stories.tsx index 3f6f711ab8e..16e144fe17c 100644 --- a/dotcom-rendering/src/components/CalloutEmbedBlockComponent.stories.tsx +++ b/dotcom-rendering/src/components/CalloutEmbedBlockComponent.stories.tsx @@ -2,7 +2,6 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react'; import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators'; import { allModes } from '../../.storybook/modes'; import { calloutCampaign } from '../../fixtures/manual/calloutCampaign'; -import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat'; import { customMockFetch } from '../lib/mockRESTCalls'; import { CalloutEmbedBlockComponent as CalloutEmbedBlock } from './CalloutEmbedBlockComponent.importable'; @@ -39,11 +38,6 @@ const goodRequest: Decorator = (Story) => { export const CalloutEmbedBlockComponent = { args: { callout: calloutCampaign, - format: { - display: ArticleDisplay.Standard, - design: ArticleDesign.Standard, - theme: Pillar.News, - }, }, decorators: [goodRequest], } satisfies Story; diff --git a/dotcom-rendering/src/lib/decidePalette.ts b/dotcom-rendering/src/lib/decidePalette.ts index ea1e9ff98ea..a2ca4b6e860 100644 --- a/dotcom-rendering/src/lib/decidePalette.ts +++ b/dotcom-rendering/src/lib/decidePalette.ts @@ -138,18 +138,6 @@ const backgroundBulletStandfirst = (format: ArticleFormat): string => { return neutral[86]; // default previously defined in Standfirst.tsx }; -const backgroundSpeechBubble = (format: ArticleFormat): string => { - if (format.design === ArticleDesign.Analysis) { - switch (format.theme) { - case Pillar.News: - return news[300]; - default: - return pillarPalette[format.theme].main; - } - } - return pillarPalette[format.theme].main; -}; - const backgroundFilterButtonHover = (format: ArticleFormat): string => { switch (format.theme) { case Pillar.News: @@ -439,7 +427,6 @@ export const decidePalette = (format: ArticleFormat): Palette => { analysisContrastHover: backgroundAnalysisContrastHoverColour(), bullet: backgroundBullet(format), bulletStandfirst: backgroundBulletStandfirst(format), - speechBubble: backgroundSpeechBubble(format), filterButton: backgroundFilterButton(), filterButtonHover: backgroundFilterButtonHover(format), filterButtonActive: backgroundFilterButtonActive(format), diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx index a220303bfc8..cd0241d8f26 100644 --- a/dotcom-rendering/src/lib/renderElement.tsx +++ b/dotcom-rendering/src/lib/renderElement.tsx @@ -185,10 +185,7 @@ export const renderElement = ({ case 'model.dotcomrendering.pageElements.CalloutBlockElement': return ( - + ); case 'model.dotcomrendering.pageElements.CalloutBlockElementV2': diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 191d007e138..366039f3198 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -4892,6 +4892,37 @@ const staffPickBadgeTextLight: PaletteFunction = () => sourcePalette.neutral[100]; const staffPickBadgeTextDark: PaletteFunction = () => sourcePalette.neutral[7]; +const speechBubbleBackgroundLight: PaletteFunction = ({ theme, design }) => { + switch (theme) { + case Pillar.News: { + return design === ArticleDesign.Analysis + ? sourcePalette.news[300] + : sourcePalette.news[400]; + } + case Pillar.Opinion: { + return sourcePalette.opinion[400]; + } + case Pillar.Sport: { + return sourcePalette.sport[400]; + } + case Pillar.Culture: { + return sourcePalette.culture[400]; + } + case Pillar.Lifestyle: { + return sourcePalette.lifestyle[400]; + } + case ArticleSpecial.Labs: { + return sourcePalette.labs[400]; + } + case ArticleSpecial.SpecialReport: { + return sourcePalette.specialReport[400]; + } + case ArticleSpecial.SpecialReportAlt: { + return sourcePalette.specialReportAlt[200]; + } + } +}; + const staffBadgeLight: PaletteFunction = () => sourcePalette.brand[400]; const staffBadgeDark: PaletteFunction = () => sourcePalette.neutral[100]; @@ -6946,6 +6977,10 @@ const paletteColours = { light: slideshowPaginationDotActiveLight, dark: slideshowPaginationDotActiveDark, }, + '--speech-bubble-background': { + light: speechBubbleBackgroundLight, + dark: speechBubbleBackgroundLight, + }, '--staff-contributor-badge': { light: staffBadgeLight, dark: staffBadgeDark, diff --git a/dotcom-rendering/src/types/palette.ts b/dotcom-rendering/src/types/palette.ts index a462360ebd1..98a5fc70462 100644 --- a/dotcom-rendering/src/types/palette.ts +++ b/dotcom-rendering/src/types/palette.ts @@ -18,7 +18,6 @@ export type Palette = { analysisContrastHover: Colour; bullet: Colour; bulletStandfirst: Colour; - speechBubble: Colour; filterButton: Colour; filterButtonHover: Colour; filterButtonActive: Colour; From 19c945b09ff65ba613e112a6b2b5b6dc7607f0b9 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 12 Dec 2024 09:49:57 +0000 Subject: [PATCH 24/26] Include card index in data link name --- .../src/components/BigSixOnwardsContent.tsx | 64 +++++++++++-------- 1 file changed, 36 insertions(+), 28 deletions(-) diff --git a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx index 8e88cbad039..59b36a6b0ed 100644 --- a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx +++ b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx @@ -131,7 +131,7 @@ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { format={trail.format} headlineText={trail.headline} image={trail.image} - dataLinkName={`onwards-content-gallery-style ${trail.dataLinkName}`} + dataLinkName={`onwards-content-gallery-style ${trail.dataLinkName}-position-0`} discussionId={trail.discussionId} discussionApiUrl={trail.discussionApiUrl} isExternalLink={trail.isExternalLink} @@ -158,7 +158,7 @@ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { format={trail.format} headlineText={trail.headline} image={trail.image} - dataLinkName={`onwards-content-gallery-style ${trail.dataLinkName}`} + dataLinkName={`onwards-content-gallery-style ${trail.dataLinkName}-position-1`} discussionId={trail.discussionId} discussionApiUrl={trail.discussionApiUrl} isExternalLink={trail.isExternalLink} @@ -170,32 +170,40 @@ export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { ))}
      - {secondSlice25.map((trail, index) => ( -
    • 0} - > - -
      • - ))} + {secondSlice25.map((trail, index) => { + const dataLinkName = `onwards-content-gallery-style ${ + trail.dataLinkName + }-position-${index + 2}`; + + return ( +
    • 0} + > + +
      • + ); + })}
    From c8f5b0907a2452abda6da25ce940733ac87b5e7c Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Thu, 12 Dec 2024 09:50:57 +0000 Subject: [PATCH 25/26] Rework container level spacing for beta containers (#12951) * Add container spacing context and space * Lift small spacing into front section and out of rows * fix linting * Use boolean rather than falsey --- .../src/components/FlexibleGeneral.tsx | 25 +- .../src/components/FlexibleSpecial.tsx | 13 +- .../src/components/FrontSection.tsx | 342 ++++++++---------- .../src/components/ScrollableCarousel.tsx | 1 - .../src/components/StaticFeatureTwo.tsx | 2 +- .../src/components/StaticMediumFour.tsx | 2 +- dotcom-rendering/src/layouts/FrontLayout.tsx | 1 + .../src/model/enhanceCollections.ts | 10 + dotcom-rendering/src/types/front.ts | 1 + 9 files changed, 190 insertions(+), 207 deletions(-) diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index 8c24acdc2c5..11f874b545d 100644 --- a/dotcom-rendering/src/components/FlexibleGeneral.tsx +++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx @@ -158,6 +158,7 @@ export const SplashCardLayout = ({ absoluteServerTimes, imageLoading, aspectRatio, + isLastRow, }: { cards: DCRFrontCard[]; imageLoading: Loading; @@ -165,6 +166,7 @@ export const SplashCardLayout = ({ showAge?: boolean; absoluteServerTimes: boolean; aspectRatio: AspectRatio; + isLastRow: boolean; }) => { const card = cards[0]; if (!card) return null; @@ -183,7 +185,11 @@ export const SplashCardLayout = ({ ); return ( -
      +
      • { const card = cards[0]; if (!card) return null; @@ -287,7 +295,11 @@ export const BoostedCardLayout = ({ liveUpdatesPosition, } = decideCardProperties(card.boostLevel); return ( -
          +
          • { if (cards.length === 0) return null; return (
              )} @@ -444,6 +459,7 @@ export const FlexibleGeneral = ({ imageLoading={imageLoading} aspectRatio={aspectRatio} isFirstRow={!splash.length && i === 0} + isLastRow={i === groupedCards.length - 1} /> ); @@ -460,6 +476,7 @@ export const FlexibleGeneral = ({ isFirstRow={!splash.length && i === 0} isFirstStandardRow={i === 0} aspectRatio={aspectRatio} + isLastRow={i === groupedCards.length - 1} /> ); } diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index fc1fff05590..36de07c0b1d 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -113,6 +113,7 @@ export const OneCardLayout = ({ absoluteServerTimes, imageLoading, aspectRatio, + isLastRow, }: { cards: DCRFrontCard[]; imageLoading: Loading; @@ -120,6 +121,7 @@ export const OneCardLayout = ({ showAge?: boolean; absoluteServerTimes: boolean; aspectRatio: AspectRatio; + isLastRow: boolean; }) => { const card = cards[0]; if (!card) return null; @@ -137,7 +139,7 @@ export const OneCardLayout = ({ card.supportingContent?.length ?? 0, ); return ( -
                +
                • +
                    {cards.map((card, cardIndex) => { return (
                  • - {/** Primary level containers have additional spacing above the horizontal rule */} - {containerLevel === 'Primary' && ( -
                    -
                    -
                    - )} - -
                    - {!!containerLevel && showTopBorder && ( -
                    - )} - + +
                    + {!!containerLevel && showTopBorder && (
                    + )} -
                    as the leftContent - title?.toLowerCase() === 'opinion', - ), - showVerticalRule && - !containerLevel && - sectionHeadlineFromLeftCol( - schemePalette('--section-border'), - ), - title?.toLowerCase() === 'headlines' && - sectionHeadlineHeight, - ]} - > - - } - collectionBranding={collectionBranding} - /> +
                    - {leftContent} -
                    +
                    as the leftContent + title?.toLowerCase() === 'opinion', + ), + showVerticalRule && + !containerLevel && + sectionHeadlineFromLeftCol( + schemePalette('--section-border'), + ), + title?.toLowerCase() === 'headlines' && + sectionHeadlineHeight, + ]} + > + + } + collectionBranding={collectionBranding} + /> - {isToggleable && ( -
                    - -
                    - )} + {leftContent} +
                    -
                    - {children} + {isToggleable && ( +
                    +
                    + )} -
                    - {isString(targetedTerritory) && - isAustralianTerritory(targetedTerritory) ? ( - - - - ) : showMore ? ( - - - - ) : null} - {pagination && ( - - )} -
                    +
                    + {children} +
                    - {treats && !hasPageSkin && ( -
                    - + {isString(targetedTerritory) && + isAustralianTerritory(targetedTerritory) ? ( + + -
                    + + ) : showMore ? ( + + + + ) : null} + {pagination && ( + )} -
                    -                     - +
                    + + {treats && !hasPageSkin && ( +
                    + +
                    + )} +
                    +                     ); }; diff --git a/dotcom-rendering/src/components/ScrollableCarousel.tsx b/dotcom-rendering/src/components/ScrollableCarousel.tsx index 714cabba628..99cd166ad11 100644 --- a/dotcom-rendering/src/components/ScrollableCarousel.tsx +++ b/dotcom-rendering/src/components/ScrollableCarousel.tsx @@ -47,7 +47,6 @@ const gridGapMobile = 10; */ const containerStyles = css` position: relative; - margin-bottom: ${space[6]}px; margin-left: -${gridGapMobile}px; margin-right: -${gridGapMobile}px; ${from.mobileLandscape} { diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx index 4aeac445feb..d46959615d7 100644 --- a/dotcom-rendering/src/components/StaticFeatureTwo.tsx +++ b/dotcom-rendering/src/components/StaticFeatureTwo.tsx @@ -26,7 +26,7 @@ export const StaticFeatureTwo = ({ const cards = trails.slice(0, 2); return ( -
                      +
                        {cards.map((card) => { return (
                      • +
                          {cards.map((card, cardIndex) => { return (
                        • { containerLevel={ collection.config.containerLevel } + containerSpacing={collection.containerSpacing} > { + const nextCollectionIsPrimary = + nextSiblingCollection?.config.collectionLevel === 'Primary'; + return nextCollectionIsPrimary ? 'large' : 'small'; +}; + export const enhanceCollections = ({ collections, editionId, @@ -89,6 +96,8 @@ export const enhanceCollections = ({ }, ); + const containerSpacing = getContainerSpacing(collections[index + 1]); + return { id, displayName, @@ -99,6 +108,7 @@ export const enhanceCollections = ({ collectionType, href, containerPalette, + containerSpacing, collectionBranding, grouped: groupCards( collectionType, diff --git a/dotcom-rendering/src/types/front.ts b/dotcom-rendering/src/types/front.ts index 6b72b26c0d4..f2f0128aad4 100644 --- a/dotcom-rendering/src/types/front.ts +++ b/dotcom-rendering/src/types/front.ts @@ -417,6 +417,7 @@ export type DCRCollectionType = { description?: string; collectionType: DCRContainerType; containerPalette?: DCRContainerPalette; + containerSpacing?: 'large' | 'small'; grouped: DCRGroupedTrails; curated: DCRFrontCard[]; backfill: DCRFrontCard[]; From 1a28f88952bedb533bc5adffc01ce2bd83f82461 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 12 Dec 2024 10:17:52 +0000 Subject: [PATCH 26/26] Update dotcom-rendering/src/paletteDeclarations.ts Co-authored-by: Daniel Clifton <110032454+DanielCliftonGuardian@users.noreply.github.com> --- dotcom-rendering/src/paletteDeclarations.ts | 29 +++++++-------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 366039f3198..cf2814f0d34 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -4894,32 +4894,21 @@ const staffPickBadgeTextDark: PaletteFunction = () => sourcePalette.neutral[7]; const speechBubbleBackgroundLight: PaletteFunction = ({ theme, design }) => { switch (theme) { - case Pillar.News: { + case Pillar.News: return design === ArticleDesign.Analysis ? sourcePalette.news[300] : sourcePalette.news[400]; - } - case Pillar.Opinion: { - return sourcePalette.opinion[400]; - } - case Pillar.Sport: { - return sourcePalette.sport[400]; - } - case Pillar.Culture: { - return sourcePalette.culture[400]; - } - case Pillar.Lifestyle: { - return sourcePalette.lifestyle[400]; - } - case ArticleSpecial.Labs: { + case Pillar.Opinion: + case Pillar.Sport: + case Pillar.Culture: + case Pillar.Lifestyle: + return pillarPalette(theme, 400); + case ArticleSpecial.Labs: return sourcePalette.labs[400]; - } - case ArticleSpecial.SpecialReport: { + case ArticleSpecial.SpecialReport: return sourcePalette.specialReport[400]; - } - case ArticleSpecial.SpecialReportAlt: { + case ArticleSpecial.SpecialReportAlt: return sourcePalette.specialReportAlt[200]; - } } };