Skip to content

Commit

Permalink
Update not-thrasher copy, colour for USEOY 'final countdown' sub-camp…
Browse files Browse the repository at this point in the history
…aign (#12984)

* Replace GivingTuesday with SubCampaign throughout

* Update copy

* Add highlight, change bg, h2 colour, add dates of sub-campaign

* Add story for final countdown

* revert hover colour until the design team can give us a steer

---------

Co-authored-by: Sue Burt <“[email protected]”>
  • Loading branch information
sookburt and Sue Burt authored Dec 13, 2024
1 parent fbef8c2 commit 785a89c
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 44 deletions.
12 changes: 12 additions & 0 deletions dotcom-rendering/src/components/UsEoy2024.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,15 @@ export const Default = {
date: new Date('2024-11-26T00:00:00Z'),
},
} satisfies Story;

export const FinalCountdown = {
args: {
tickerData: {
total: 1000000,
goal: 2000000,
},
// eslint-disable-next-line @typescript-eslint/no-empty-function
submitTrackingEvent: () => {},
date: new Date('2024-12-26T00:00:00Z'),
},
} satisfies Story;
95 changes: 51 additions & 44 deletions dotcom-rendering/src/components/UsEoy2024Wrapper.importable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ const styles = {
${textEgyptianBold17};
}
`,
highlight: css`
background-color: inherit;
color: inherit;
`,
ticker: css`
margin-bottom: ${space[4]}px;
`,
Expand All @@ -113,10 +117,10 @@ const styles = {
`,
};

const stylesGivingTuesday = {
const stylesSubCampaign = {
container: css`
/* stylelint-disable-next-line color-no-hex */
background: #f3afd9;
background: #edb438;
color: ${palette.neutral[100]};
`,
grid: css`
Expand Down Expand Up @@ -157,7 +161,7 @@ const stylesGivingTuesday = {
}
h2 {
margin: ${space[2]}px 0 ${space[4]}px;
color: ${'#670055'};
color: ${'#1A2835'};
${headlineMedium24}
${from.tablet} {
Expand All @@ -180,6 +184,11 @@ const stylesGivingTuesday = {
}
color: ${'#1A2835'};
`,
highlight: css`
background-color: ${'#670055'};
color: ${'#F6F6F6'};
padding-left: 2px;
`,
ticker: css`
margin-bottom: ${space[4]}px;
`,
Expand Down Expand Up @@ -211,7 +220,7 @@ const tickerSettings = {
},
};

const tickerSettingsGivingTuesday = {
const tickerSettingsSubCampaign = {
currencySymbol: '$',
copy: {},
tickerStylingSettings: {
Expand All @@ -223,24 +232,24 @@ const tickerSettingsGivingTuesday = {
},
};

const heading = (isGivingTuesday: boolean) => {
return isGivingTuesday
? 'This Giving Tuesday, give to the Guardian.'
const heading = (isSubCampaign: boolean) => {
return isSubCampaign
? 'Last chance to support us this year'
: 'Can you help us hit our goal?';
};
const bodyCopy = (isGivingTuesday: boolean) => {
const givingTuesdayCopy =
const bodyCopy = (isSubCampaign: boolean) => {
const SubCampaignCopy =
'We’re funded by readers, not billionaires - which means we can publish factual journalism with no outside influence.';
const normalCopy =
'With no billionaire owner or shareholders pulling our strings, reader support keeps us fiercely independent.';
return isGivingTuesday ? givingTuesdayCopy : normalCopy;
return isSubCampaign ? SubCampaignCopy : normalCopy;
};

const bodyCopyHighlightedText = (isGivingTuesday: boolean) => {
const givingTuesdayCopy = 'Help us raise $4m to keep going in 2025.';
const bodyCopyHighlightedText = (isSubCampaign: boolean) => {
const SubCampaignCopy = 'Help us keep going in 2025.';
const normalCopy =
'Help us hit our most important annual fundraising goal so we can keep going.';
return isGivingTuesday ? givingTuesdayCopy : normalCopy;
return isSubCampaign ? SubCampaignCopy : normalCopy;
};

const getTickerData = async (): Promise<TickerData | undefined> => {
Expand Down Expand Up @@ -316,48 +325,38 @@ export const UsEoy2024: ReactComponent<Props> = ({
currencySymbol,
} = useChoiceCards(choiceCardAmounts, 'US', cta, cta);

const isGivingTuesday =
date >= new Date('2024-11-27T00:00:01') &&
date < new Date('2024-12-03T23:59:59');
const isSubCampaign =
date >= new Date('2024-12-20T00:00:01') &&
date < new Date('2024-12-31T23:59:59');

return (
<div
css={
isGivingTuesday
? stylesGivingTuesday.container
: styles.container
}
css={isSubCampaign ? stylesSubCampaign.container : styles.container}
>
<div css={isGivingTuesday ? stylesGivingTuesday.grid : styles.grid}>
<div
css={
isGivingTuesday ? stylesGivingTuesday.logo : styles.logo
}
>
<div css={isSubCampaign ? stylesSubCampaign.grid : styles.grid}>
<div css={isSubCampaign ? stylesSubCampaign.logo : styles.logo}>
<SvgGuardianLogo
textColor={isGivingTuesday ? '#000000' : '#FFFFFF'}
textColor={isSubCampaign ? '#000000' : '#FFFFFF'}
width={100}
/>
</div>
<div
css={
isGivingTuesday
? stylesGivingTuesday.heading
isSubCampaign
? stylesSubCampaign.heading
: styles.heading
}
>
<h2>{heading(isGivingTuesday)}</h2>
<h2>{heading(isSubCampaign)}</h2>
<div
css={
isGivingTuesday
? stylesGivingTuesday.body
: styles.body
isSubCampaign ? stylesSubCampaign.body : styles.body
}
>
<div
css={
isGivingTuesday
? stylesGivingTuesday.ticker
isSubCampaign
? stylesSubCampaign.ticker
: styles.ticker
}
>
Expand All @@ -366,24 +365,32 @@ export const UsEoy2024: ReactComponent<Props> = ({
copy={{}}
tickerData={tickerData}
tickerStylingSettings={
isGivingTuesday
? tickerSettingsGivingTuesday.tickerStylingSettings
isSubCampaign
? tickerSettingsSubCampaign.tickerStylingSettings
: tickerSettings.tickerStylingSettings
}
size={'medium'}
/>
</div>
{bodyCopy(isGivingTuesday)}
{bodyCopy(isSubCampaign)}
<strong>
{' '}
{bodyCopyHighlightedText(isGivingTuesday)}
<span
css={
isSubCampaign
? stylesSubCampaign.highlight
: styles.highlight
}
>
{bodyCopyHighlightedText(isSubCampaign)}
</span>
</strong>
</div>
</div>
<div
css={
isGivingTuesday
? stylesGivingTuesday.choiceCards
isSubCampaign
? stylesSubCampaign.choiceCards
: styles.choiceCards
}
>
Expand All @@ -399,13 +406,13 @@ export const UsEoy2024: ReactComponent<Props> = ({
getCtaUrl={getCtaUrl}
cssCtaOverides={buttonStyles({
default: {
backgroundColour: isGivingTuesday
backgroundColour: isSubCampaign
? '#016D67'
: '#C41C1C',
textColour: '#FFFFFF',
},
hover: {
backgroundColour: isGivingTuesday
backgroundColour: isSubCampaign
? '#891414'
: '#C41C1C',
textColour: '#FFFFFF',
Expand Down

0 comments on commit 785a89c

Please sign in to comment.