Article epic styling for US EOY 2024

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,15 +67,16 @@ 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
 	);
 `;
 
 export const BylineWithHeadshot: ReactComponent<BylineWithHeadshotProps> = ({
 	bylineWithImage,
+	isColourInTestVariant,
 }) => {
 	const { name, description, headshot } = bylineWithImage;
 
@@ -86,7 +88,9 @@ export const BylineWithHeadshot: ReactComponent<BylineWithHeadshotProps> = ({
 			</div>
 			{headshot && (
 				<>
-					<div css={bylineBottomDecoration}></div>
+					<div
+						css={bylineBottomDecoration(isColourInTestVariant)}
+					></div>
 					<div css={bylineImageContainer}>
 						<img
 							src={headshot.mainUrl}

dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx

@@ -101,6 +101,150 @@ 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: '_ARTICLE_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/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('[email protected]');
+				}, 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('[email protected]');
+				}, 500);
+			});
+		},
+	},
+};
+
 export const WithBylineOnly: Story = {
 	name: 'ContributionsEpic with byline only',
 	args: {

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,13 +194,15 @@ type HighlightedProps = {
 	numArticles: number;
 	tracking?: OphanTracking;
 	showAboveArticleCount: boolean;
+	isColourInTestVariant: boolean;
 };
 
 const Highlighted: ReactComponent<HighlightedProps> = ({
 	highlightedText,
 	numArticles,
 	tracking,
 	showAboveArticleCount,
+	isColourInTestVariant,
 }: HighlightedProps) => {
 	const elements = replaceArticleCount(
 		highlightedText,
@@ -178,7 +215,7 @@ const Highlighted: ReactComponent<HighlightedProps> = ({
 	return (
 		<strong css={highlightWrapperStyles}>
 			{' '}
-			<span css={highlightStyles}>{elements}</span>
+			<span css={highlightStyles(isColourInTestVariant)}>{elements}</span>
 		</strong>
 	);
 };
@@ -224,6 +261,7 @@ type BodyProps = {
 	numArticles: number;
 	tracking?: OphanTracking;
 	showAboveArticleCount: boolean;
+	isColourInTestVariant: boolean;
 };
 
 const EpicBody: ReactComponent<BodyProps> = ({
@@ -232,6 +270,7 @@ const EpicBody: ReactComponent<BodyProps> = ({
 	highlightedText,
 	tracking,
 	showAboveArticleCount,
+	isColourInTestVariant,
 }: BodyProps) => {
 	return (
 		<>
@@ -249,6 +288,9 @@ const EpicBody: ReactComponent<BodyProps> = ({
 									showAboveArticleCount={
 										showAboveArticleCount
 									}
+									isColourInTestVariant={
+										isColourInTestVariant
+									}
 								/>
 							) : null
 						}
@@ -305,6 +347,10 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 	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<EpicProps> = ({
 	);
 
 	return (
-		<section ref={setNode} css={wrapperStyles}>
+		<section ref={setNode} css={wrapperStyles(isColourInTestVariant)}>
 			{showAboveArticleCount && (
 				<div css={articleCountAboveContainerStyles}>
 					<ContributionsEpicArticleCountAboveWithOptOut
@@ -414,7 +460,11 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 							headline: tickerSettings.copy.countLabel,
 						}}
 						tickerData={tickerSettings.tickerData}
-						tickerStylingSettings={defaultTickerStylingSettings}
+						tickerStylingSettings={
+							isColourInTestVariant
+								? usEOYTickerStylingSettings
+								: defaultTickerStylingSettings
+						}
 						size={'medium'}
 					/>
 				</div>
@@ -445,10 +495,14 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 				numArticles={articleCounts.forTargetedWeeks}
 				tracking={ophanTracking}
 				showAboveArticleCount={showAboveArticleCount}
+				isColourInTestVariant={isColourInTestVariant}
 			/>
 
 			{variant.bylineWithImage && (
-				<BylineWithHeadshot bylineWithImage={variant.bylineWithImage} />
+				<BylineWithHeadshot
+					bylineWithImage={variant.bylineWithImage}
+					isColourInTestVariant={isColourInTestVariant}
+				/>
 			)}
 
 			{newsletterSignup ? (
@@ -468,6 +522,7 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 					submitComponentEvent={submitComponentEvent}
 					amountsTestName={choiceCardAmounts?.testName}
 					amountsVariantName={choiceCardAmounts?.variantName}
+					isColourInTestVariant={isColourInTestVariant}
 				/>
 			)}
 

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 */