From 9297e7a1d8e76876ede6c456d4b3d78b54814716 Mon Sep 17 00:00:00 2001 From: George Richmond Date: Tue, 8 Sep 2026 16:14:55 +0100 Subject: [PATCH 1/3] Update NewsletterSignupCard styling for better responsiveness on small devices --- .../NewsletterSignupCard.stories.tsx | 22 +++++ .../src/components/NewsletterSignupCard.tsx | 87 +++++++++++++------ dotcom-rendering/src/paletteDeclarations.ts | 12 ++- 3 files changed, 92 insertions(+), 29 deletions(-) diff --git a/dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx b/dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx index a5ede6a2323..89041c1a0e3 100644 --- a/dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx +++ b/dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx @@ -39,3 +39,25 @@ export const Default = meta.story({ children: <>, }, }); + +/** + * Demonstrates a longer frequency string in a narrow container, to show that + * the text breaks after the "|" divider rather than wrapping mid-word. + */ +export const LongFrequencyNarrow = meta.story({ + args: { + name: 'Breaking News US', + description: 'Get the most important news as it breaks.', + frequency: 'Around 2-3 times a day', + illustrationSquare: + 'https://media.guim.co.uk/10b4e02333ee97ecf51d5e814fd324a88832fb17/1177_0_2998_3000/2998.jpg', + children: <>, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}); diff --git a/dotcom-rendering/src/components/NewsletterSignupCard.tsx b/dotcom-rendering/src/components/NewsletterSignupCard.tsx index ca3a3d18f48..cbf65d3418a 100644 --- a/dotcom-rendering/src/components/NewsletterSignupCard.tsx +++ b/dotcom-rendering/src/components/NewsletterSignupCard.tsx @@ -4,7 +4,7 @@ import { headlineMedium20, space, textSans14, - textSans15, + textSansBold15, } from '@guardian/source/foundations'; import { SvgNewsletterFilled } from '@guardian/source/react-components'; import { palette as themePalette } from '../palette'; @@ -55,23 +55,48 @@ const titleStyles = css` const frequencyTagStyles = css` display: flex; align-items: center; + gap: 6px; color: ${themePalette('--newsletter-card-frequency-tag')}; - ${textSans15}; - margin-left: -1px; - margin-top: -1px; - margin-bottom: ${space[1]}px; + ${textSansBold15}; + margin-bottom: ${space[2]}px; +`; + +const frequencyTextStyles = css` + display: flex; + flex-wrap: wrap; + column-gap: ${space[1]}px; +`; + +const frequencyLabelStyles = css` + white-space: nowrap; +`; + +const badgeStyles = css` + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: ${themePalette('--newsletter-card-badge-background')}; svg { - fill: currentColor; - height: 20px; - width: 20px; + fill: ${themePalette('--newsletter-card-badge-icon')}; + height: 18px; + width: 18px; } `; +const innerDividerStyles = css` + border: none; + border-top: 1px solid ${themePalette('--newsletter-card-divider')}; + margin: 0 0 ${space[2]}px; +`; + const descriptionStyles = css` ${textSans14}; line-height: 1.15; - margin-bottom: ${space[2]}px; clear: both; color: ${themePalette('--newsletter-card-description')}; `; @@ -92,27 +117,35 @@ const illustrationStyles = css` const NewsletterSignupHeader = ( props: Omit, ) => ( -
-
-
+ <> +
+ - Free newsletter | {props.frequency} + + + Free newsletter | + {props.frequency} + +
+
+
+
+

+ Sign up to {props.name} +

+

{props.description}

-

- Sign up to {props.name} -

-

{props.description}

+ {!!props.illustrationSquare && ( + + )}
- {!!props.illustrationSquare && ( - - )} -
+ ); export const NewsletterSignupCard = ({ diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 2aadb2c4148..abe06299ac9 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -7965,6 +7965,14 @@ const paletteColours = { light: () => '#F3F7FF', dark: () => sourcePalette.brand[100], }, + '--newsletter-card-badge-background': { + light: () => sourcePalette.brand[400], + dark: () => sourcePalette.brand[600], + }, + '--newsletter-card-badge-icon': { + light: () => sourcePalette.neutral[100], + dark: () => sourcePalette.neutral[100], + }, '--newsletter-card-description': { light: () => sourcePalette.neutral[20], dark: () => sourcePalette.neutral[86], @@ -7974,8 +7982,8 @@ const paletteColours = { dark: () => sourcePalette.neutral[46], }, '--newsletter-card-frequency-tag': { - light: () => sourcePalette.neutral[38], - dark: () => sourcePalette.neutral[73], + light: () => sourcePalette.brand[400], + dark: () => sourcePalette.neutral[100], }, '--newsletter-card-title': { light: () => sourcePalette.neutral[7], From e96805d3af14175c4ffd09c841175be1b002a1aa Mon Sep 17 00:00:00 2001 From: George Richmond Date: Thu, 10 Sep 2026 16:53:32 +0100 Subject: [PATCH 2/3] Make image smaller on small mobile and line wider --- .../src/components/NewsletterSignupCard.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/NewsletterSignupCard.tsx b/dotcom-rendering/src/components/NewsletterSignupCard.tsx index cbf65d3418a..63cc9c67e29 100644 --- a/dotcom-rendering/src/components/NewsletterSignupCard.tsx +++ b/dotcom-rendering/src/components/NewsletterSignupCard.tsx @@ -91,7 +91,7 @@ const badgeStyles = css` const innerDividerStyles = css` border: none; border-top: 1px solid ${themePalette('--newsletter-card-divider')}; - margin: 0 0 ${space[2]}px; + margin: 0 -${space[3]}px ${space[2]}px; `; const descriptionStyles = css` @@ -103,11 +103,16 @@ const descriptionStyles = css` const illustrationStyles = css` flex-shrink: 0; - width: 90px; - height: 90px; + width: 70px; + height: 70px; border-radius: 50%; object-fit: cover; + ${from.mobileMedium} { + width: 90px; + height: 90px; + } + ${from.tablet} { width: 100px; height: 100px; From 9ee82b59d518e60886f63d913fa1a185aa19931c Mon Sep 17 00:00:00 2001 From: George Richmond Date: Mon, 14 Sep 2026 10:31:53 +0100 Subject: [PATCH 3/3] Fix uneven vertical spacing above/below newsletter frequency badge Card top padding was space[3] (12px) while the badge row's margin-bottom was space[2] (8px), making the padding above and below the circular icon uneven. Align top padding to 8px to match. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- dotcom-rendering/src/components/NewsletterSignupCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/NewsletterSignupCard.tsx b/dotcom-rendering/src/components/NewsletterSignupCard.tsx index 63cc9c67e29..acd915bcf95 100644 --- a/dotcom-rendering/src/components/NewsletterSignupCard.tsx +++ b/dotcom-rendering/src/components/NewsletterSignupCard.tsx @@ -22,7 +22,7 @@ export type NewsletterSignupCardProps = { const containerStyles = css` clear: left; background-color: ${themePalette('--newsletter-card-background')}; - padding: ${space[3]}px ${space[3]}px ${space[4]}px ${space[3]}px; + padding: ${space[2]}px ${space[3]}px ${space[4]}px ${space[3]}px; `; const dividerStyles = css`