diff --git a/dotcom-rendering/src/components/EmailSignUpWrapper.stories.tsx b/dotcom-rendering/src/components/EmailSignUpWrapper.stories.tsx index ca198356990..9c7717d8475 100644 --- a/dotcom-rendering/src/components/EmailSignUpWrapper.stories.tsx +++ b/dotcom-rendering/src/components/EmailSignUpWrapper.stories.tsx @@ -15,6 +15,7 @@ const defaultArgs = { frequency: 'Weekly', successDescription: "We'll send you The Recap every week", theme: 'sport', + emailType: 'newsletter', } satisfies Story['args']; type Story = StoryObj; diff --git a/dotcom-rendering/src/components/EmailSignUpWrapper.tsx b/dotcom-rendering/src/components/EmailSignUpWrapper.tsx index b55112e23e9..1ab0c296aea 100644 --- a/dotcom-rendering/src/components/EmailSignUpWrapper.tsx +++ b/dotcom-rendering/src/components/EmailSignUpWrapper.tsx @@ -30,7 +30,9 @@ export const EmailSignUpWrapper = ({ /> {!emailSignUpProps.hidePrivacyMessage && ( - + )} diff --git a/dotcom-rendering/src/components/EmailSignup.stories.tsx b/dotcom-rendering/src/components/EmailSignup.stories.tsx index 999b2aeb17a..d2242e92e71 100644 --- a/dotcom-rendering/src/components/EmailSignup.stories.tsx +++ b/dotcom-rendering/src/components/EmailSignup.stories.tsx @@ -1,3 +1,4 @@ +import { LinkButton } from '@guardian/source/react-components'; import type { Meta, StoryObj } from '@storybook/react'; import { allModes } from '../../.storybook/modes'; import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat'; @@ -47,13 +48,14 @@ export const Default = { name: 'The Week in Patriarchy', frequency: 'Weekly', theme: 'opinion', + emailType: 'newsletter', children: ( <> - + ), }, @@ -75,13 +77,14 @@ export const NewsTheme = { name: 'First Edition', frequency: 'Every weekday', theme: 'news', + emailType: 'newsletter', children: ( <> - + ), }, @@ -103,15 +106,37 @@ export const IrregularFrequency = { name: 'Guardian Documentaries', frequency: 'Whenever a new film is available', theme: 'features', + emailType: 'newsletter', children: ( <> - + ), }, parameters: Default.parameters, } satisfies Story; + +export const MarketingEmail = { + args: { + description: + 'Find your next job with the Guardian Jobs weekly email. Get the latest job listings, as well as tips and advice on taking your next career step.', + name: 'Guardian Jobs', + theme: 'news', + emailType: 'marketingConsent', + children: ( + <> +
+ + Sign up from my account + +
+ + + ), + }, + parameters: Default.parameters, +}; diff --git a/dotcom-rendering/src/components/EmailSignup.tsx b/dotcom-rendering/src/components/EmailSignup.tsx index 1f5c2149f00..4e709436f98 100644 --- a/dotcom-rendering/src/components/EmailSignup.tsx +++ b/dotcom-rendering/src/components/EmailSignup.tsx @@ -8,14 +8,16 @@ import { } from '@guardian/source/foundations'; import { buildDetailText } from '../lib/buildNewsletterSignUpText'; import { palette as themePalette } from '../palette'; +import type { NewsletterOrMarketingEmail } from '../types/content'; import { NewsletterDetail } from './NewsletterDetail'; export type EmailSignUpProps = { name: string; description: string; - frequency: string; + frequency?: string; theme: string; children?: React.ReactNode; + emailType: NewsletterOrMarketingEmail['type']; }; const containerStyles = css` @@ -77,22 +79,34 @@ const descriptionStyles = css` max-width: ${335 + space[3] + 118}px; `; +const ariaLabel = (emailType: NewsletterOrMarketingEmail['type']) => { + switch (emailType) { + case 'newsletter': + return 'newsletter promotion'; + case 'marketingConsent': + return 'marketing newsletter promotion'; + } +}; + export const EmailSignup = ({ name, description, frequency, theme, children, + emailType, }: EmailSignUpProps) => { return ( -