From d51ba82063649ddd9b3a363fa9c4e868b9d4abaa Mon Sep 17 00:00:00 2001 From: Sue Burt <“sue.burt@guardian.co.uk”> Date: Fri, 18 Oct 2024 18:17:51 +0100 Subject: [PATCH 01/11] Added check for variant of hard coded test and changes styles --- .../marketing/epics/BylineWithHeadshot.tsx | 12 ++-- .../marketing/epics/ContributionsEpic.tsx | 62 ++++++++++++++++--- 2 files changed, 62 insertions(+), 12 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx b/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx index 5ac05579b11..c0fb9967290 100644 --- a/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx +++ b/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx @@ -14,6 +14,7 @@ import type { ReactComponent } from '../lib/ReactComponent'; interface BylineWithHeadshotProps { bylineWithImage: BylineWithImage; + isColourInTestVariant: boolean; } const bylineWithImageContainer = css` @@ -55,7 +56,7 @@ const bylineHeadshotImage = css` object-fit: cover; `; -const bylineBottomDecoration = css` +const bylineBottomDecoration = (isInTestVariant: boolean) => css` position: absolute; bottom: 0; left: 0; @@ -66,8 +67,8 @@ const bylineBottomDecoration = css` height: calc(0.25rem * 4 + 1px); background-image: repeating-linear-gradient( to bottom, - ${palette.neutral[86]}, - ${palette.neutral[86]} 1px, + ${isInTestVariant ? palette.neutral[0] : palette.neutral[86]}, + ${isInTestVariant ? palette.neutral[0] : palette.neutral[86]} 1px, transparent 1px, transparent 0.25rem ); @@ -75,6 +76,7 @@ const bylineBottomDecoration = css` export const BylineWithHeadshot: ReactComponent = ({ bylineWithImage, + isColourInTestVariant, }) => { const { name, description, headshot } = bylineWithImage; @@ -86,7 +88,9 @@ export const BylineWithHeadshot: ReactComponent = ({ {headshot && ( <> -
+
{ + return isInTestVariant ? variant : control; +}; + // CSS Styling // ------------------------------------------- -const wrapperStyles = css` +const wrapperStyles = (isInTestVariant: boolean) => css` padding: ${space[1]}px ${space[2]}px ${space[3]}px; border-top: 1px solid ${palette.brandAlt[400]}; - background-color: ${palette.neutral[97]}; + background-color: ${getVariantOrControlStyle( + isInTestVariant, + '#E2E3BF', + palette.neutral[97], + )}; * { ::selection { @@ -91,9 +105,14 @@ const highlightWrapperStyles = css` ${linkStyles}; `; -const highlightStyles = css` +const highlightStyles = (isInTestVariant: boolean) => css` padding: 2px; - background-color: ${palette.brandAlt[400]}; + background-color: ${getVariantOrControlStyle( + isInTestVariant, + '#C41C1C', + palette.brandAlt[400], + )}; + color: ${getVariantOrControlStyle(isInTestVariant, '#FFF', '#000')}; `; const imageWrapperStyles = css` @@ -117,6 +136,13 @@ const defaultTickerStylingSettings: TickerSettings['tickerStylingSettings'] = { totalColour: '#5056F5', goalColour: '#000000', }; +const usEOYTickerStylingSettings: TickerSettings['tickerStylingSettings'] = { + filledProgressColour: '#C41C1C', + progressBarBackgroundColour: '#D9A78E', + headlineColour: '#000000', + totalColour: '#C41C1C', + goalColour: '#000000', +}; const articleCountAboveContainerStyles = css` margin-bottom: ${space[4]}px; @@ -159,6 +185,7 @@ type HighlightedProps = { numArticles: number; tracking?: OphanTracking; showAboveArticleCount: boolean; + isColourInTestVariant: boolean; }; const Highlighted: ReactComponent = ({ @@ -166,6 +193,7 @@ const Highlighted: ReactComponent = ({ numArticles, tracking, showAboveArticleCount, + isColourInTestVariant, }: HighlightedProps) => { const elements = replaceArticleCount( highlightedText, @@ -178,7 +206,7 @@ const Highlighted: ReactComponent = ({ return ( {' '} - {elements} + {elements} ); }; @@ -224,6 +252,7 @@ type BodyProps = { numArticles: number; tracking?: OphanTracking; showAboveArticleCount: boolean; + isColourInTestVariant: boolean; }; const EpicBody: ReactComponent = ({ @@ -232,6 +261,7 @@ const EpicBody: ReactComponent = ({ highlightedText, tracking, showAboveArticleCount, + isColourInTestVariant, }: BodyProps) => { return ( <> @@ -249,6 +279,9 @@ const EpicBody: ReactComponent = ({ showAboveArticleCount={ showAboveArticleCount } + isColourInTestVariant={ + isColourInTestVariant + } /> ) : null } @@ -305,6 +338,10 @@ const ContributionsEpic: ReactComponent = ({ const { image, tickerSettings, choiceCardAmounts, newsletterSignup } = variant; + const isColourInTestVariant: boolean = + tracking.abTestName.includes('_EPIC_BG_COLOUR') && + tracking.abTestVariant === 'VARIANT'; + const { hasOptedOut, onArticleCountOptIn, onArticleCountOptOut } = useArticleCountOptOut(); @@ -391,7 +428,7 @@ const ContributionsEpic: ReactComponent = ({ ); return ( -
+
{showAboveArticleCount && (
= ({ headline: tickerSettings.copy.countLabel, }} tickerData={tickerSettings.tickerData} - tickerStylingSettings={defaultTickerStylingSettings} + tickerStylingSettings={ + isColourInTestVariant + ? usEOYTickerStylingSettings + : defaultTickerStylingSettings + } size={'medium'} />
@@ -445,10 +486,14 @@ const ContributionsEpic: ReactComponent = ({ numArticles={articleCounts.forTargetedWeeks} tracking={ophanTracking} showAboveArticleCount={showAboveArticleCount} + isColourInTestVariant={isColourInTestVariant} /> {variant.bylineWithImage && ( - + )} {newsletterSignup ? ( @@ -468,6 +513,7 @@ const ContributionsEpic: ReactComponent = ({ submitComponentEvent={submitComponentEvent} amountsTestName={choiceCardAmounts?.testName} amountsVariantName={choiceCardAmounts?.variantName} + isColourInTestVariant={isColourInTestVariant} /> )} From fe20f30c8679c1fc69659d727370f0505989cd67 Mon Sep 17 00:00:00 2001 From: Sue Burt <“sue.burt@guardian.co.uk”> Date: Fri, 18 Oct 2024 18:18:40 +0100 Subject: [PATCH 02/11] Stories for CONTROL and VARIANT to develop against --- .../epics/ContributionsEpic.stories.tsx | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx index 058fe3d66bc..91a1b47ba9a 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx @@ -101,6 +101,144 @@ export const WithBylineAndHeadshot: Story = { }, }; +export const WithBylineAndHeadshot_USEOY2024_VARIANT: Story = { + name: 'ContributionsEpic with byline + headshot image for US EOY 2024 VARIANT', + args: { + ...meta.args, + tracking: { + ...tracking, + abTestName: '_EPIC_BG_COLOUR', + abTestVariant: 'VARIANT', + }, + countryCode: 'US', + variant: { + ...props.variant, + tickerSettings: { + endType: TickerEndType.unlimited, + countType: TickerCountType.money, + currencySymbol: '£', + copy: { + countLabel: '', + goalReachedPrimary: '', + goalReachedSecondary: '', + }, + tickerData: { + total: 10000, + goal: 100000, + }, + name: 'US', + }, + name: 'THREE_TIER_CHOICE_CARDS', + cta: { + baseUrl: 'https://support.theguardian.com', + text: 'Continue', + }, + showChoiceCards: true, + bylineWithImage: { + name: 'Betsy Reed', + description: 'Editor, Guardian US', + headshot: { + mainUrl: + 'https://i.guim.co.uk/img/media/8eda1b06a686fe5ab4f7246bd6b5f8e63851088e/0_0_300_250/300.png?quality=85&s=f42e9642f335d705cab8b712bbbcb64e', + altText: 'Betsy Reed staff byline photograph', + }, + }, + heading: '', + paragraphs: [ + 'I hope you appreciated this article. Before you move on, I wanted to ask if you would consider supporting the Guardian’s journalism during one of the most consequential news cycles of our lifetimes. As a reader-funded organization, we need your help to hit our annual fundraising goal.', + 'In the heat of a tumultuous presidential race, there is an urgent need for free, trustworthy journalism that foregrounds the stakes of this election for our country and planet.', + 'Yet from Elon Musk to the Murdochs, a small number of billionaire owners have a powerful hold on so much of the information that reaches the public. The Guardian is different. We have no billionaire owner or shareholders to consider. Our journalism is produced to serve the public interest – not profit motives.', + 'Largely because of this independence, we are able to avoid the trap that befalls much US media: the tendency, born of a desire to please all sides, to engage in false equivalence in the name of neutrality. The way we see it, our job is to be truly fair, which means listening to different points of view, but also calling out the lies of powerful people and institutions – and making clear how misinformation and demagoguery can damage democracy.', + 'From threats to election integrity, to the spiraling climate crisis, to complex foreign conflicts, our journalists contextualize, investigate and illuminate the critical stories of our time. As a global news organization with a robust US reporting staff, we’re able to provide a fresh, outsider perspective – one so often missing in the American media bubble.', + 'Around the world, readers can access the Guardian’s paywall-free journalism because of our unique reader-supported model. That’s because of people like you. Our readers keep us independent, beholden to no outside influence and accessible to everyone – whether they can afford to pay for news, or not.', + ], + highlightedText: + 'If you can, please consider supporting us just once, or better yet, support us every month with a little more. Thank you.', + secondaryCta: { + type: SecondaryCtaType.ContributionsReminder, + }, + showReminderFields: { + reminderCta: 'Remind me in November', + reminderPeriod: '2024-11-01', + reminderLabel: 'November', + }, + }, + fetchEmail: () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve('test@guardian.co.uk'); + }, 500); + }); + }, + }, +}; + +export const WithBylineAndHeadshot_USEOY2024_CONTROL: Story = { + name: 'ContributionsEpic with byline + headshot image for US EOY 2024 CONTROL', + args: { + ...meta.args, + tracking: { + ...tracking, + abTestName: '_EPIC_BG_COLOUR', + abTestVariant: 'CONTROL', + }, + countryCode: 'US', + variant: { + ...props.variant, + tickerSettings: { + endType: TickerEndType.unlimited, + countType: TickerCountType.money, + currencySymbol: '£', + copy: { + countLabel: 'Help us reach our end-of-year goal', + goalReachedPrimary: '', + goalReachedSecondary: '', + }, + tickerData: { + total: 10000, + goal: 100000, + }, + name: 'US', + }, + bylineWithImage: { + name: 'Betsy Reed', + description: 'Editor, Guardian US', + headshot: { + mainUrl: + 'https://i.guim.co.uk/img/media/8eda1b06a686fe5ab4f7246bd6b5f8e63851088e/0_0_300_250/300.png?quality=85&s=f42e9642f335d705cab8b712bbbcb64e', + altText: 'Betsy Reed staff byline photograph', + }, + }, + heading: '', + paragraphs: [ + 'I hope you appreciated this article. Before you move on, I wanted to ask if you would consider supporting the Guardian’s journalism during one of the most consequential news cycles of our lifetimes. As a reader-funded organization, we need your help to hit our annual fundraising goal.', + 'In the heat of a tumultuous presidential race, there is an urgent need for free, trustworthy journalism that foregrounds the stakes of this election for our country and planet.', + 'Yet from Elon Musk to the Murdochs, a small number of billionaire owners have a powerful hold on so much of the information that reaches the public. The Guardian is different. We have no billionaire owner or shareholders to consider. Our journalism is produced to serve the public interest – not profit motives.', + 'Largely because of this independence, we are able to avoid the trap that befalls much US media: the tendency, born of a desire to please all sides, to engage in false equivalence in the name of neutrality. The way we see it, our job is to be truly fair, which means listening to different points of view, but also calling out the lies of powerful people and institutions – and making clear how misinformation and demagoguery can damage democracy.', + 'From threats to election integrity, to the spiraling climate crisis, to complex foreign conflicts, our journalists contextualize, investigate and illuminate the critical stories of our time. As a global news organization with a robust US reporting staff, we’re able to provide a fresh, outsider perspective – one so often missing in the American media bubble.', + 'Around the world, readers can access the Guardian’s paywall-free journalism because of our unique reader-supported model. That’s because of people like you. Our readers keep us independent, beholden to no outside influence and accessible to everyone – whether they can afford to pay for news, or not.', + ], + highlightedText: + 'If you can, please consider supporting us just once, or better yet, support us every month with a little more. Thank you.', + secondaryCta: { + type: SecondaryCtaType.ContributionsReminder, + }, + showReminderFields: { + reminderCta: 'Remind me in November', + reminderPeriod: '2024-11-01', + reminderLabel: 'November', + }, + }, + fetchEmail: () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve('test@guardian.co.uk'); + }, 500); + }); + }, + }, +}; + export const WithBylineOnly: Story = { name: 'ContributionsEpic with byline only', args: { From fa73ec5f7241561a8e609876d4222ad592d1a7dd Mon Sep 17 00:00:00 2001 From: Sue Burt <“sue.burt@guardian.co.uk”> Date: Mon, 21 Oct 2024 12:27:39 +0100 Subject: [PATCH 03/11] Return secondary button to transparent as per Figma. --- .../src/components/marketing/epics/ctas/EpicButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx index a593d4f5002..8143ab1e5c8 100644 --- a/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx @@ -76,7 +76,7 @@ const tertiaryButtonOverrides = css` /* stylelint-disable-next-line declaration-no-important */ border: 1px solid ${palette.neutral[7]} !important; /* stylelint-disable-next-line declaration-no-important */ - background-color: ${palette.neutral[100]} !important; + background-color: transparent !important; :hover { /* stylelint-disable-next-line declaration-no-important */ From c2b2c16863fca88bcf9ff8ebec089a5652e162bd Mon Sep 17 00:00:00 2001 From: Sue Burt <“sue.burt@guardian.co.uk”> Date: Mon, 21 Oct 2024 12:32:32 +0100 Subject: [PATCH 04/11] vary ticker top padding, rename test to avoid clash --- .../marketing/epics/ContributionsEpic.stories.tsx | 5 +++-- .../src/components/marketing/epics/ContributionsEpic.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx index 91a1b47ba9a..ab52ac8919a 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx @@ -107,7 +107,7 @@ export const WithBylineAndHeadshot_USEOY2024_VARIANT: Story = { ...meta.args, tracking: { ...tracking, - abTestName: '_EPIC_BG_COLOUR', + abTestName: '_ARTICLE_EPIC_BG_COLOUR', abTestVariant: 'VARIANT', }, countryCode: 'US', @@ -151,6 +151,7 @@ export const WithBylineAndHeadshot_USEOY2024_VARIANT: Story = { 'Largely because of this independence, we are able to avoid the trap that befalls much US media: the tendency, born of a desire to please all sides, to engage in false equivalence in the name of neutrality. The way we see it, our job is to be truly fair, which means listening to different points of view, but also calling out the lies of powerful people and institutions – and making clear how misinformation and demagoguery can damage democracy.', 'From threats to election integrity, to the spiraling climate crisis, to complex foreign conflicts, our journalists contextualize, investigate and illuminate the critical stories of our time. As a global news organization with a robust US reporting staff, we’re able to provide a fresh, outsider perspective – one so often missing in the American media bubble.', 'Around the world, readers can access the Guardian’s paywall-free journalism because of our unique reader-supported model. That’s because of people like you. Our readers keep us independent, beholden to no outside influence and accessible to everyone – whether they can afford to pay for news, or not.', + '', ], highlightedText: 'If you can, please consider supporting us just once, or better yet, support us every month with a little more. Thank you.', @@ -179,7 +180,7 @@ export const WithBylineAndHeadshot_USEOY2024_CONTROL: Story = { ...meta.args, tracking: { ...tracking, - abTestName: '_EPIC_BG_COLOUR', + abTestName: '_ARTICLE_EPIC_BG_COLOUR', abTestVariant: 'CONTROL', }, countryCode: 'US', diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx index 0090c222a70..c89f9e13049 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx @@ -148,9 +148,9 @@ const articleCountAboveContainerStyles = css` margin-bottom: ${space[4]}px; `; -const tickerContainerStyles = css` +const tickerContainerStyles = (isInTestVariant: boolean) => css` padding-bottom: ${space[5]}px; - padding-top: ${space[1]}px; + padding-top: ${getVariantOrControlStyle(isInTestVariant, '25px', '4px')}; `; // EpicHeader - local component @@ -339,7 +339,7 @@ const ContributionsEpic: ReactComponent = ({ variant; const isColourInTestVariant: boolean = - tracking.abTestName.includes('_EPIC_BG_COLOUR') && + tracking.abTestName.includes('_ARTICLE_EPIC_BG_COLOUR') && tracking.abTestVariant === 'VARIANT'; const { hasOptedOut, onArticleCountOptIn, onArticleCountOptOut } = @@ -444,7 +444,7 @@ const ContributionsEpic: ReactComponent = ({ )} {tickerSettings?.tickerData && ( -
+
Date: Mon, 21 Oct 2024 12:59:39 +0100 Subject: [PATCH 05/11] Ensure control story identical for comparison purposes --- .../marketing/epics/ContributionsEpic.stories.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx index ab52ac8919a..328dacf0301 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx @@ -116,7 +116,7 @@ export const WithBylineAndHeadshot_USEOY2024_VARIANT: Story = { tickerSettings: { endType: TickerEndType.unlimited, countType: TickerCountType.money, - currencySymbol: '£', + currencySymbol: '$', copy: { countLabel: '', goalReachedPrimary: '', @@ -189,7 +189,7 @@ export const WithBylineAndHeadshot_USEOY2024_CONTROL: Story = { tickerSettings: { endType: TickerEndType.unlimited, countType: TickerCountType.money, - currencySymbol: '£', + currencySymbol: '$', copy: { countLabel: 'Help us reach our end-of-year goal', goalReachedPrimary: '', @@ -201,6 +201,12 @@ export const WithBylineAndHeadshot_USEOY2024_CONTROL: Story = { }, name: 'US', }, + name: 'THREE_TIER_CHOICE_CARDS', + cta: { + baseUrl: 'https://support.theguardian.com', + text: 'Continue', + }, + showChoiceCards: true, bylineWithImage: { name: 'Betsy Reed', description: 'Editor, Guardian US', From c0be3c0a40a8a383ee92597b0ca30fe3d32719f4 Mon Sep 17 00:00:00 2001 From: Sue Burt <“sue.burt@guardian.co.uk”> Date: Mon, 21 Oct 2024 16:39:57 +0100 Subject: [PATCH 06/11] Fix change to top margin on epic from yellow to black for the variant. --- .../src/components/marketing/epics/ContributionsEpic.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx index c89f9e13049..640fcd27f55 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx @@ -57,7 +57,12 @@ const getVariantOrControlStyle = ( // ------------------------------------------- const wrapperStyles = (isInTestVariant: boolean) => css` padding: ${space[1]}px ${space[2]}px ${space[3]}px; - border-top: 1px solid ${palette.brandAlt[400]}; + border-top: 1px solid + ${getVariantOrControlStyle( + isInTestVariant, + palette.neutral[0], + palette.brandAlt[400], + )}; background-color: ${getVariantOrControlStyle( isInTestVariant, '#E2E3BF', From 68d4cbc8d7c8baa4591062d21af11e8adc806511 Mon Sep 17 00:00:00 2001 From: Sue Burt <“sue.burt@guardian.co.uk”> Date: Mon, 21 Oct 2024 16:40:37 +0100 Subject: [PATCH 07/11] Add image of correct US editor to stories. --- .../components/marketing/epics/ContributionsEpic.stories.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx index 328dacf0301..653c4c8d1d2 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx @@ -138,8 +138,7 @@ export const WithBylineAndHeadshot_USEOY2024_VARIANT: Story = { name: 'Betsy Reed', description: 'Editor, Guardian US', headshot: { - mainUrl: - 'https://i.guim.co.uk/img/media/8eda1b06a686fe5ab4f7246bd6b5f8e63851088e/0_0_300_250/300.png?quality=85&s=f42e9642f335d705cab8b712bbbcb64e', + mainUrl: `https://i.guim.co.uk/img/media/6d6aec079caf868fd5948df959a82f67841d475d/0_0_1628_1317/500.png?width=400&quality=75&s=764f4aed4118b6315798444bd2911ca0`, altText: 'Betsy Reed staff byline photograph', }, }, @@ -212,7 +211,7 @@ export const WithBylineAndHeadshot_USEOY2024_CONTROL: Story = { description: 'Editor, Guardian US', headshot: { mainUrl: - 'https://i.guim.co.uk/img/media/8eda1b06a686fe5ab4f7246bd6b5f8e63851088e/0_0_300_250/300.png?quality=85&s=f42e9642f335d705cab8b712bbbcb64e', + 'https://i.guim.co.uk/img/media/6d6aec079caf868fd5948df959a82f67841d475d/0_0_1628_1317/500.png?width=400&quality=75&s=764f4aed4118b6315798444bd2911ca0', altText: 'Betsy Reed staff byline photograph', }, }, From e8c7fd641ae7e7806ab53e9a69fac1a5baa44f5c Mon Sep 17 00:00:00 2001 From: Sue Burt <“sue.burt@guardian.co.uk”> Date: Tue, 22 Oct 2024 11:04:22 +0100 Subject: [PATCH 08/11] Ensure extra padding on ticker only appears if no copy in the label for variant. --- .../marketing/epics/ContributionsEpic.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx index 640fcd27f55..1e2a3a02f96 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx @@ -153,9 +153,16 @@ const articleCountAboveContainerStyles = css` margin-bottom: ${space[4]}px; `; -const tickerContainerStyles = (isInTestVariant: boolean) => css` +const tickerContainerStyles = ( + isInTestVariant: boolean, + heading: string | undefined, +) => css` padding-bottom: ${space[5]}px; - padding-top: ${getVariantOrControlStyle(isInTestVariant, '25px', '4px')}; + padding-top: ${getVariantOrControlStyle( + isInTestVariant && !heading, + '24px', + '4px', + )}; `; // EpicHeader - local component @@ -449,7 +456,12 @@ const ContributionsEpic: ReactComponent = ({ )} {tickerSettings?.tickerData && ( -
+
Date: Tue, 22 Oct 2024 14:43:24 +0100 Subject: [PATCH 09/11] Remove variant and leave extra padding if there is no heading/label for the ticker. --- .../marketing/epics/ContributionsEpic.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx index 1e2a3a02f96..a443dca87db 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx @@ -153,16 +153,9 @@ const articleCountAboveContainerStyles = css` margin-bottom: ${space[4]}px; `; -const tickerContainerStyles = ( - isInTestVariant: boolean, - heading: string | undefined, -) => css` +const tickerContainerStyles = (heading: string | undefined) => css` padding-bottom: ${space[5]}px; - padding-top: ${getVariantOrControlStyle( - isInTestVariant && !heading, - '24px', - '4px', - )}; + padding-top: ${getVariantOrControlStyle(!heading, '24px', '4px')}; `; // EpicHeader - local component @@ -457,10 +450,7 @@ const ContributionsEpic: ReactComponent = ({ {tickerSettings?.tickerData && (
Date: Tue, 22 Oct 2024 15:41:58 +0100 Subject: [PATCH 10/11] Agreed to remove the padding change for this test, use source colours --- .../marketing/epics/ContributionsEpic.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx index a443dca87db..cf4e688cecf 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx @@ -117,7 +117,11 @@ const highlightStyles = (isInTestVariant: boolean) => css` '#C41C1C', palette.brandAlt[400], )}; - color: ${getVariantOrControlStyle(isInTestVariant, '#FFF', '#000')}; + color: ${getVariantOrControlStyle( + isInTestVariant, + palette.neutral[100], + palette.neutral[7], + )}; `; const imageWrapperStyles = css` @@ -153,9 +157,9 @@ const articleCountAboveContainerStyles = css` margin-bottom: ${space[4]}px; `; -const tickerContainerStyles = (heading: string | undefined) => css` +const tickerContainerStyles = css` padding-bottom: ${space[5]}px; - padding-top: ${getVariantOrControlStyle(!heading, '24px', '4px')}; + padding-top: ${space[1]}px; `; // EpicHeader - local component @@ -449,9 +453,7 @@ const ContributionsEpic: ReactComponent = ({ )} {tickerSettings?.tickerData && ( -
+
Date: Tue, 22 Oct 2024 15:59:22 +0100 Subject: [PATCH 11/11] Changed to correct colour against figma and add opacity to ticker background --- .../src/components/marketing/epics/ContributionsEpic.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx index cf4e688cecf..2b9be36c988 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx @@ -147,7 +147,7 @@ const defaultTickerStylingSettings: TickerSettings['tickerStylingSettings'] = { }; const usEOYTickerStylingSettings: TickerSettings['tickerStylingSettings'] = { filledProgressColour: '#C41C1C', - progressBarBackgroundColour: '#D9A78E', + progressBarBackgroundColour: 'rgba(196, 28, 28, 0.30)', headlineColour: '#000000', totalColour: '#C41C1C', goalColour: '#000000',