Skip to content

Commit

Permalink
Merge pull request #12569 from guardian/lp-update-liveblog-epic-test
Browse files Browse the repository at this point in the history 
Changes for the Live Blog Epic colour change AB test
  • Loading branch information
@LAKSHMIRPILLAI
LAKSHMIRPILLAI authored Oct 18, 2024
2 parents 20dcda1 + 89b5867 commit 51402d3
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 10 deletions.
83 changes: 83 additions & 0 deletions dotcom-rendering/src/components/marketing/epics/ContributionsLiveblogEpic.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,89 @@ export const WithThreeTierChoiceCardsForUS: Story = {
},
},
};
export const WithThreeTierChoiceCardsForUSWithColourVariant: Story = {
name: 'Contributions Liveblog Epic with Three Tier Choice Cards for US and with Colour Variant',
args: {
...meta.args,
tracking: {
...tracking,
abTestName: 'US_LB_EPIC_BG_COLOUR',
abTestVariant: 'VARIANT',
},
countryCode: 'US',
variant: {
...props.variant,
name: 'VARIANT',
heading: 'There’s no paywall here',
paragraphs: [
'Apologies for the brief interruption. We hope you’re appreciating these factual, verified, up-to-the-minute news updates provided by our expert reporters.',
'You will never find a paywall around our live blogs – or any of our news, because the Guardian believes that access to trustworthy information is vital for democracy.',
'In a time of increasing misinformation spread by bad actors, extremist media and autocratic politicians, real, reliable journalism has never been more important – and we’re proud to be able to make ours free thanks to the generous support of readers like you.',
'By helping fund the Guardian today, you can play a vital role in combating the bad faith and self-interest of a powerful few who spread lies to undermine our democracy, enrich themselves, and stoke division between Americans.',
'Before you get back to reading the news, we would be grateful if you could take half a minute to give us your support. Any amount helps. Thank you.',
],
secondaryCta: undefined,
showChoiceCards: true,
tickerSettings: {
endType: TickerEndType.unlimited,
countType: TickerCountType.money,
currencySymbol: '£',
copy: {
countLabel: '',
goalReachedPrimary: '',
goalReachedSecondary: '',
},
tickerData: {
total: 500000,
goal: 2000000,
},
name: 'US',
},
},
},
};

export const WithThreeTierChoiceCardsForUSWithColourControl: Story = {
name: 'Contributions Liveblog Epic with Three Tier Choice Cards for US and with Colour Control',
args: {
...meta.args,
tracking: {
...tracking,
abTestName: 'US_LB_EPIC_BG_COLOUR',
abTestVariant: 'CONTROL',
},
countryCode: 'US',
variant: {
...props.variant,
name: 'CONTROL',
heading: 'There’s no paywall here',
paragraphs: [
'Apologies for the brief interruption. We hope you’re appreciating these factual, verified, up-to-the-minute news updates provided by our expert reporters.',
'You will never find a paywall around our live blogs – or any of our news, because the Guardian believes that access to trustworthy information is vital for democracy.',
'In a time of increasing misinformation spread by bad actors, extremist media and autocratic politicians, real, reliable journalism has never been more important – and we’re proud to be able to make ours free thanks to the generous support of readers like you.',
'By helping fund the Guardian today, you can play a vital role in combating the bad faith and self-interest of a powerful few who spread lies to undermine our democracy, enrich themselves, and stoke division between Americans.',
'Before you get back to reading the news, we would be grateful if you could take half a minute to give us your support. Any amount helps. Thank you.',
],
secondaryCta: undefined,
showChoiceCards: true,
tickerSettings: {
endType: TickerEndType.unlimited,
countType: TickerCountType.money,
currencySymbol: '£',
copy: {
countLabel: '',
goalReachedPrimary: '',
goalReachedSecondary: '',
},
tickerData: {
total: 500000,
goal: 2000000,
},
name: 'US',
},
},
},
};

export const WithTicker: Story = {
name: 'ContributionsLiveblogEpic with Ticker',
Expand Down
13 changes: 7 additions & 6 deletions dotcom-rendering/src/components/marketing/epics/ContributionsLiveblogEpic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,15 @@ import { ContributionsEpicCtasContainer } from './ctas/ContributionsEpicCtasCont
// 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 getBackgroundColour = (isInTestVariant: boolean) => {
return isInTestVariant ? palette.brand[800] : palette.neutral[100];
return isInTestVariant ? '#E2E3BF' : palette.neutral[100];
};

const getHeadingBackgroundColour = (isInTestVariant: boolean) => {
return isInTestVariant ? palette.brand[400] : palette.brandAlt[400];
return isInTestVariant ? '#051D32' : palette.brandAlt[400];
};

const getHeadingColour = (isInTestVariant: boolean) => {
return isInTestVariant ? palette.neutral[100] : palette.neutral[7];
return isInTestVariant ? '#FFFFFF' : palette.neutral[7];
};

const container = (tracking: Tracking, isInTestVariant: boolean) => css`
Expand Down Expand Up @@ -109,10 +109,10 @@ const tickerContainer = css`
`;

const defaultTickerStylingSettings: TickerSettings['tickerStylingSettings'] = {
filledProgressColour: '#5056F5',
progressBarBackgroundColour: 'rgba(80, 86, 245, 0.35)',
filledProgressColour: '#C41C1C',
progressBarBackgroundColour: '#D9A78E',
headlineColour: '#000000',
totalColour: '#5056F5',
totalColour: '#C41C1C',
goalColour: '#000000',
};

Expand Down Expand Up @@ -249,6 +249,7 @@ export const ContributionsLiveblogEpic: ReactComponent<EpicProps> = ({
onReminderOpen={onReminderOpen}
fetchEmail={fetchEmail}
submitComponentEvent={submitComponentEvent}
isColourInTestVariant={isColourInTestVariant}
/>
)}
</section>
Expand Down
6 changes: 6 additions & 0 deletions dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ const PrimaryCtaButton = ({
amountsVariantName,
numArticles,
submitComponentEvent,
isColourInTestVariant,
}: {
cta?: Cta;
tracking: Tracking;
Expand All @@ -75,6 +76,7 @@ const PrimaryCtaButton = ({
amountsVariantName?: string;
numArticles: number;
submitComponentEvent?: (event: OphanComponentEvent) => void;
isColourInTestVariant?: boolean;
}): JSX.Element | null => {
if (!cta) {
return null;
Expand All @@ -98,6 +100,7 @@ const PrimaryCtaButton = ({
submitComponentEvent={submitComponentEvent}
showArrow={true}
data-ignore="global-link-styling"
isColourInTestVariant={isColourInTestVariant}
>
{buttonText}
</EpicButton>
Expand Down Expand Up @@ -152,6 +155,7 @@ interface ContributionsEpicButtonsProps {
amountsVariantName?: string;
numArticles: number;
variantOfChoiceCard?: string;
isColourInTestVariant?: boolean;
}

export const ContributionsEpicButtons = ({
Expand All @@ -168,6 +172,7 @@ export const ContributionsEpicButtons = ({
amountsVariantName,
numArticles,
variantOfChoiceCard,
isColourInTestVariant,
}: ContributionsEpicButtonsProps): JSX.Element | null => {
const [hasBeenSeen, setNode] = useIsInView({
debounce: true,
Expand Down Expand Up @@ -293,6 +298,7 @@ export const ContributionsEpicButtons = ({
amountsVariantName={amountsVariantName}
countryCode={countryCode}
submitComponentEvent={submitComponentEvent}
isColourInTestVariant={isColourInTestVariant}
/>
{secondaryCta?.type === SecondaryCtaType.Custom &&
!!secondaryCta.cta.baseUrl &&
Expand Down
3 changes: 3 additions & 0 deletions dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface OnReminderOpen {
type Props = EpicProps & {
amountsTestName?: string;
amountsVariantName?: string;
isColourInTestVariant?: boolean;
};

export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
Expand All @@ -25,6 +26,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
fetchEmail,
amountsTestName,
amountsVariantName,
isColourInTestVariant,
}: Props): JSX.Element => {
// reminders
const [fetchedEmail, setFetchedEmail] = useState<string | undefined>(
Expand Down Expand Up @@ -117,6 +119,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
amountsVariantName={amountsVariantName}
numArticles={articleCounts.for52Weeks}
variantOfChoiceCard={variantOfChoiceCard}
isColourInTestVariant={isColourInTestVariant}
/>
{isReminderActive && showReminderFields && (
<ContributionsEpicReminder
Expand Down
36 changes: 32 additions & 4 deletions dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@
* https://github.com/guardian/support-dotcom-components/blob/9c3eae7cb0b159db4a1c40679d6b37710b0bb937/packages/modules/src/modules/epics/Button.tsx
*/
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';
import { ThemeProvider } from '@emotion/react';
import { css, ThemeProvider } from '@emotion/react';
import type { OphanComponentEvent } from '@guardian/libs';
import { palette } from '@guardian/source/foundations';
import {
Expand All @@ -32,11 +31,26 @@ const buttonStyles = {
borderSecondary: palette.neutral[86],
};

const buttonStylesForTest = {
textPrimary: '#FFFFFF',
backgroundPrimary: '#051D32',
backgroundPrimaryHover: '#072744',
textSecondary: palette.neutral[7],
backgroundSecondary: palette.neutral[93],
backgroundSecondaryHover: palette.neutral[86],
borderSecondary: palette.neutral[86],
};

const contributionsTheme = {
button: buttonStyles,
link: buttonStyles,
};

const contributionsThemeForTest = {
button: buttonStylesForTest,
link: buttonStylesForTest,
};

type Url = string;

type Props = {
Expand All @@ -53,6 +67,7 @@ type Props = {
isTertiary?: boolean;
cssOverrides?: SerializedStyles;
icon?: React.ReactElement;
isColourInTestVariant?: boolean;
};

// Overrides for tertiary button
Expand All @@ -79,6 +94,7 @@ export const EpicButton: ReactComponent<Props> = (allProps: Props) => {
isTertiary,
cssOverrides,
icon,
isColourInTestVariant,
...props
} = allProps;

Expand All @@ -97,7 +113,13 @@ export const EpicButton: ReactComponent<Props> = (allProps: Props) => {
// So we'll map that to 'primary' and apply a CSS override on both of
// them so they get the same styles for 'tertiary' priority
return (
<ThemeProvider theme={contributionsTheme}>
<ThemeProvider
theme={
isColourInTestVariant
? contributionsThemeForTest
: contributionsTheme
}
>
<LinkButton
href={onClickAction}
icon={icon ?? <SvgArrowRightStraight />}
Expand All @@ -119,7 +141,13 @@ export const EpicButton: ReactComponent<Props> = (allProps: Props) => {
);
}
return (
<ThemeProvider theme={contributionsTheme}>
<ThemeProvider
theme={
isColourInTestVariant
? contributionsThemeForTest
: contributionsTheme
}
>
<DSButton
iconSide="right"
icon={showArrow ? <SvgArrowRightStraight /> : undefined}
Expand Down

0 comments on commit 51402d3

Please sign in to comment.