diff --git a/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx b/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx index 5ac05579b1..c0fb996729 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 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: '_ARTICLE_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', + }, + 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/6d6aec079caf868fd5948df959a82f67841d475d/0_0_1628_1317/500.png?width=400&quality=75&s=764f4aed4118b6315798444bd2911ca0', + 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: { diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx index ba597ccdba..2b9be36c98 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx @@ -43,12 +43,31 @@ import { ContributionsEpicNewsletterSignup } from './ContributionsEpicNewsletter import { ContributionsEpicSignInCta } from './ContributionsEpicSignInCta'; import { ContributionsEpicCtasContainer } from './ctas/ContributionsEpicCtasContainer'; +// Hard-coded AB TEST - picking up ab test name and variant name from the tracking object +// then applying a different colour if it matches, or the default colour if it doesn't. +const getVariantOrControlStyle = ( + isInTestVariant: boolean, + variant: string, + control: string, +) => { + 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]}; + border-top: 1px solid + ${getVariantOrControlStyle( + isInTestVariant, + palette.neutral[0], + palette.brandAlt[400], + )}; + background-color: ${getVariantOrControlStyle( + isInTestVariant, + '#E2E3BF', + palette.neutral[97], + )}; * { ::selection { @@ -91,9 +110,18 @@ 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, + palette.neutral[100], + palette.neutral[7], + )}; `; const imageWrapperStyles = css` @@ -117,6 +145,13 @@ const defaultTickerStylingSettings: TickerSettings['tickerStylingSettings'] = { totalColour: '#5056F5', goalColour: '#000000', }; +const usEOYTickerStylingSettings: TickerSettings['tickerStylingSettings'] = { + filledProgressColour: '#C41C1C', + progressBarBackgroundColour: 'rgba(196, 28, 28, 0.30)', + headlineColour: '#000000', + totalColour: '#C41C1C', + goalColour: '#000000', +}; const articleCountAboveContainerStyles = css` margin-bottom: ${space[4]}px; @@ -159,6 +194,7 @@ type HighlightedProps = { numArticles: number; tracking?: OphanTracking; showAboveArticleCount: boolean; + isColourInTestVariant: boolean; }; const Highlighted: ReactComponent = ({ @@ -166,6 +202,7 @@ const Highlighted: ReactComponent = ({ numArticles, tracking, showAboveArticleCount, + isColourInTestVariant, }: HighlightedProps) => { const elements = replaceArticleCount( highlightedText, @@ -178,7 +215,7 @@ const Highlighted: ReactComponent = ({ return ( {' '} - {elements} + {elements} ); }; @@ -224,6 +261,7 @@ type BodyProps = { numArticles: number; tracking?: OphanTracking; showAboveArticleCount: boolean; + isColourInTestVariant: boolean; }; const EpicBody: ReactComponent = ({ @@ -232,6 +270,7 @@ const EpicBody: ReactComponent = ({ highlightedText, tracking, showAboveArticleCount, + isColourInTestVariant, }: BodyProps) => { return ( <> @@ -249,6 +288,9 @@ const EpicBody: ReactComponent = ({ showAboveArticleCount={ showAboveArticleCount } + isColourInTestVariant={ + isColourInTestVariant + } /> ) : null } @@ -305,6 +347,10 @@ const ContributionsEpic: ReactComponent = ({ const { image, tickerSettings, choiceCardAmounts, newsletterSignup } = variant; + const isColourInTestVariant: boolean = + tracking.abTestName.includes('_ARTICLE_EPIC_BG_COLOUR') && + tracking.abTestVariant === 'VARIANT'; + const { hasOptedOut, onArticleCountOptIn, onArticleCountOptOut } = useArticleCountOptOut(); @@ -391,7 +437,7 @@ const ContributionsEpic: ReactComponent = ({ ); return ( -
+
{showAboveArticleCount && (
= ({ headline: tickerSettings.copy.countLabel, }} tickerData={tickerSettings.tickerData} - tickerStylingSettings={defaultTickerStylingSettings} + tickerStylingSettings={ + isColourInTestVariant + ? usEOYTickerStylingSettings + : defaultTickerStylingSettings + } size={'medium'} />
@@ -445,10 +495,14 @@ const ContributionsEpic: ReactComponent = ({ numArticles={articleCounts.forTargetedWeeks} tracking={ophanTracking} showAboveArticleCount={showAboveArticleCount} + isColourInTestVariant={isColourInTestVariant} /> {variant.bylineWithImage && ( - + )} {newsletterSignup ? ( @@ -468,6 +522,7 @@ const ContributionsEpic: ReactComponent = ({ submitComponentEvent={submitComponentEvent} amountsTestName={choiceCardAmounts?.testName} amountsVariantName={choiceCardAmounts?.variantName} + isColourInTestVariant={isColourInTestVariant} /> )} diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx index a593d4f500..8143ab1e5c 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 */