Skip to content

Commit

Permalink
Merge pull request #12898 from guardian/lp-add-giving-tuesday-thrasher
Browse files Browse the repository at this point in the history 
Giving Tuesday: Update Thrasher colour/copy
  • Loading branch information
@LAKSHMIRPILLAI
LAKSHMIRPILLAI authored Nov 25, 2024
2 parents 3753471 + 7aa7b70 commit d9674bb
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 16 deletions.
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/UsEoy2024.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@ export const Default = {
},
// eslint-disable-next-line @typescript-eslint/no-empty-function
submitTrackingEvent: () => {},
date: new Date('2024-11-26T00:00:00Z'),
},
} satisfies Story;
199 changes: 183 additions & 16 deletions dotcom-rendering/src/components/UsEoy2024Wrapper.importable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,92 @@ const styles = {
`,
};

const stylesGivingTuesday = {
container: css`
/* stylelint-disable-next-line color-no-hex */
background: #f3afd9;
color: ${palette.neutral[100]};
`,
grid: css`
display: grid;
flex-direction: column;
position: relative;
padding: 0 ${space[3]}px ${space[4]}px ${space[3]}px;
${from.tablet} {
display: grid;
grid-template-columns: 350px 350px;
padding: 0 ${space[5]}px ${space[4]}px ${space[5]}px;
}
${from.desktop} {
grid-template-columns: 462px 462px;
column-gap: ${space[4]}px;
}
${from.leftCol} {
grid-template-columns: 148px 482px 482px;
column-gap: 0;
}
${from.wide} {
grid-template-columns: 228px 482px 482px;
}
`,
logo: css`
display: none;
${from.leftCol} {
display: block;
grid-column: 1;
grid-row: 1;
margin-top: ${space[2]}px;
}
`,
heading: css`
${from.tablet} {
grid-column: 1;
grid-row: 1;
}
h2 {
margin: ${space[2]}px 0 ${space[4]}px;
color: ${'#670055'};
${headlineMedium24}
${from.tablet} {
${headlineMedium28}
}
${from.leftCol} {
${headlineMedium34}
}
}
${from.leftCol} {
grid-column: 2;
border-left: 1px solid rgba(0, 0, 0, 0.2);
padding-left: ${space[2]}px;
}
`,
body: css`
${textEgyptian17};
strong {
${textEgyptianBold17};
}
color: ${'#1A2835'};
`,
ticker: css`
margin-bottom: ${space[4]}px;
`,
choiceCards: css`
margin-top: ${space[6]}px;
${from.tablet} {
grid-column: 2;
grid-row: 1;
align-self: flex-start;
display: flex;
justify-content: flex-end;
}
${from.leftCol} {
grid-column: 3;
margin-right: ${space[3]}px;
}
`,
};

const tickerSettings = {
currencySymbol: '$',
copy: {},
Expand All @@ -125,6 +211,38 @@ const tickerSettings = {
},
};

const tickerSettingsGivingTuesday = {
currencySymbol: '$',
copy: {},
tickerStylingSettings: {
filledProgressColour: '#016D67',
progressBarBackgroundColour: 'rgba(1, 109, 103, 0.3)',
headlineColour: '#000000',
totalColour: '#1A2835',
goalColour: '#016D67',
},
};

const heading = (isGivingTuesday: boolean) => {
return isGivingTuesday
? 'This Giving Tuesday, give to the Guardian.'
: 'Can you help us hit our goal?';
};
const bodyCopy = (isGivingTuesday: boolean) => {
const givingTuesdayCopy =
'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;
};

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

const getTickerData = async (): Promise<TickerData | undefined> => {
const data = await fetch(
'https://support.theguardian.com/ticker/US.json',
Expand Down Expand Up @@ -182,11 +300,13 @@ const cta = {
interface Props {
tickerData: TickerData;
submitTrackingEvent: (event: ComponentEvent) => void;
date: Date;
}

export const UsEoy2024: ReactComponent<Props> = ({
tickerData,
submitTrackingEvent,
date,
}: Props): JSX.Element => {
const {
choiceCardSelection,
Expand All @@ -196,36 +316,77 @@ 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');

return (
<div css={styles.container}>
<div css={styles.grid}>
<div css={styles.logo}>
<SvgGuardianLogo textColor={'#FFFFFF'} width={100} />
<div
css={
isGivingTuesday
? stylesGivingTuesday.container
: styles.container
}
>
<div css={isGivingTuesday ? stylesGivingTuesday.grid : styles.grid}>
<div
css={
isGivingTuesday ? stylesGivingTuesday.logo : styles.logo
}
>
<SvgGuardianLogo
textColor={isGivingTuesday ? '#000000' : '#FFFFFF'}
width={100}
/>
</div>
<div css={styles.heading}>
<h2>Can you help us hit our goal?</h2>
<div css={styles.body}>
<div css={styles.ticker}>
<div
css={
isGivingTuesday
? stylesGivingTuesday.heading
: styles.heading
}
>
<h2>{heading(isGivingTuesday)}</h2>
<div
css={
isGivingTuesday
? stylesGivingTuesday.body
: styles.body
}
>
<div
css={
isGivingTuesday
? stylesGivingTuesday.ticker
: styles.ticker
}
>
<Ticker
currencySymbol={tickerSettings.currencySymbol}
copy={{}}
tickerData={tickerData}
tickerStylingSettings={
tickerSettings.tickerStylingSettings
isGivingTuesday
? tickerSettingsGivingTuesday.tickerStylingSettings
: tickerSettings.tickerStylingSettings
}
size={'medium'}
/>
</div>
With no billionaire owner or shareholders pulling our
strings, reader support keeps us fiercely independent.
{bodyCopy(isGivingTuesday)}
<strong>
{' '}
Help us hit our most important annual fundraising
goal so we can keep going.
{bodyCopyHighlightedText(isGivingTuesday)}
</strong>
</div>
</div>
<div css={styles.choiceCards}>
<div
css={
isGivingTuesday
? stylesGivingTuesday.choiceCards
: styles.choiceCards
}
>
<ChoiceCards
setSelectionsCallback={setChoiceCardSelection}
selection={choiceCardSelection}
Expand All @@ -238,11 +399,15 @@ export const UsEoy2024: ReactComponent<Props> = ({
getCtaUrl={getCtaUrl}
cssCtaOverides={buttonStyles({
default: {
backgroundColour: '#C41C1C',
backgroundColour: isGivingTuesday
? '#016D67'
: '#C41C1C',
textColour: '#FFFFFF',
},
hover: {
backgroundColour: '#C41C1C',
backgroundColour: isGivingTuesday
? '#891414'
: '#C41C1C',
textColour: '#FFFFFF',
},
})}
Expand Down Expand Up @@ -285,13 +450,15 @@ export const UsEoy2024Wrapper = (): JSX.Element => {
const submitTrackingEvent = (event: ComponentEvent) => {
void submitComponentEvent(event, renderingTarget);
};
const now = new Date();

return (
<>
{showSupportMessagingForUser && tickerData && (
<UsEoy2024
tickerData={tickerData}
submitTrackingEvent={submitTrackingEvent}
date={now}
/>
)}
</>
Expand Down

0 comments on commit d9674bb

Please sign in to comment.