Skip to content

Commit 51da207

Browse files
georgerichmondgeorgerichmond
committed
Update NewsletterSignupCard styling for better responsiveness on small devices
1 parent 1fe7ad1 commit 51da207

3 files changed

Lines changed: 92 additions & 29 deletions

File tree

‎dotcom-rendering/src/components/NewsletterSignupCard.stories.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,25 @@ export const Default = meta.story({
3939
children: <></>,
4040
},
4141
});
42+
43+
/**
44+
* Demonstrates a longer frequency string in a narrow container, to show that
45+
* the text breaks after the "|" divider rather than wrapping mid-word.
46+
*/
47+
export const LongFrequencyNarrow = meta.story({
48+
args: {
49+
name: 'Breaking News US',
50+
description: 'Get the most important news as it breaks.',
51+
frequency: 'Around 2-3 times a day',
52+
illustrationSquare:
53+
'https://media.guim.co.uk/10b4e02333ee97ecf51d5e814fd324a88832fb17/1177_0_2998_3000/2998.jpg',
54+
children: <></>,
55+
},
56+
decorators: [
57+
(Story) => (
58+
<div css={{ maxWidth: 300 }}>
59+
<Story />
60+
</div>
61+
),
62+
],
63+
});

‎dotcom-rendering/src/components/NewsletterSignupCard.tsx‎

Lines changed: 60 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
headlineMedium20,
55
space,
66
textSans14,
7-
textSans15,
7+
textSansBold15,
88
} from '@guardian/source/foundations';
99
import { SvgNewsletterFilled } from '@guardian/source/react-components';
1010
import { palette as themePalette } from '../palette';
@@ -55,23 +55,48 @@ const titleStyles = css`
5555
const frequencyTagStyles = css`
5656
display: flex;
5757
align-items: center;
58+
gap: 6px;
5859
color: ${themePalette('--newsletter-card-frequency-tag')};
59-
${textSans15};
60-
margin-left: -1px;
61-
margin-top: -1px;
62-
margin-bottom: ${space[1]}px;
60+
${textSansBold15};
61+
margin-bottom: ${space[2]}px;
62+
`;
63+
64+
const frequencyTextStyles = css`
65+
display: flex;
66+
flex-wrap: wrap;
67+
column-gap: ${space[1]}px;
68+
`;
69+
70+
const frequencyLabelStyles = css`
71+
white-space: nowrap;
72+
`;
73+
74+
const badgeStyles = css`
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
flex-shrink: 0;
79+
width: 24px;
80+
height: 24px;
81+
border-radius: 50%;
82+
background-color: ${themePalette('--newsletter-card-badge-background')};
6383
6484
svg {
65-
fill: currentColor;
66-
height: 20px;
67-
width: 20px;
85+
fill: ${themePalette('--newsletter-card-badge-icon')};
86+
height: 18px;
87+
width: 18px;
6888
}
6989
`;
7090

91+
const innerDividerStyles = css`
92+
border: none;
93+
border-top: 1px solid ${themePalette('--newsletter-card-divider')};
94+
margin: 0 0 ${space[2]}px;
95+
`;
96+
7197
const descriptionStyles = css`
7298
${textSans14};
7399
line-height: 1.15;
74-
margin-bottom: ${space[2]}px;
75100
clear: both;
76101
color: ${themePalette('--newsletter-card-description')};
77102
`;
@@ -92,27 +117,35 @@ const illustrationStyles = css`
92117
const NewsletterSignupHeader = (
93118
props: Omit<NewsletterSignupCardProps, 'children'>,
94119
) => (
95-
<div css={headerStyles}>
96-
<div css={titleAndMetaStyles}>
97-
<div css={frequencyTagStyles}>
120+
<>
121+
<div css={frequencyTagStyles}>
122+
<span css={badgeStyles}>
98123
<SvgNewsletterFilled />
99-
Free newsletter | {props.frequency}
124+
</span>
125+
<span css={frequencyTextStyles}>
126+
<span css={frequencyLabelStyles}>Free newsletter |</span>
127+
<span css={frequencyLabelStyles}>{props.frequency}</span>
128+
</span>
129+
</div>
130+
<hr css={innerDividerStyles} />
131+
<div css={headerStyles}>
132+
<div css={titleAndMetaStyles}>
133+
<p css={titleStyles}>
134+
Sign up to <span>{props.name}</span>
135+
</p>
136+
<p css={descriptionStyles}>{props.description}</p>
100137
</div>
101-
<p css={titleStyles}>
102-
Sign up to <span>{props.name}</span>
103-
</p>
104-
<p css={descriptionStyles}>{props.description}</p>
138+
{!!props.illustrationSquare && (
139+
<img
140+
css={illustrationStyles}
141+
src={props.illustrationSquare}
142+
alt=""
143+
loading="lazy"
144+
decoding="async"
145+
/>
146+
)}
105147
</div>
106-
{!!props.illustrationSquare && (
107-
<img
108-
css={illustrationStyles}
109-
src={props.illustrationSquare}
110-
alt=""
111-
loading="lazy"
112-
decoding="async"
113-
/>
114-
)}
115-
</div>
148+
</>
116149
);
117150

118151
export const NewsletterSignupCard = ({

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7965,6 +7965,14 @@ const paletteColours = {
79657965
light: () => '#F3F7FF',
79667966
dark: () => sourcePalette.brand[100],
79677967
},
7968+
'--newsletter-card-badge-background': {
7969+
light: () => sourcePalette.brand[400],
7970+
dark: () => sourcePalette.brand[600],
7971+
},
7972+
'--newsletter-card-badge-icon': {
7973+
light: () => sourcePalette.neutral[100],
7974+
dark: () => sourcePalette.neutral[100],
7975+
},
79687976
'--newsletter-card-description': {
79697977
light: () => sourcePalette.neutral[20],
79707978
dark: () => sourcePalette.neutral[86],
@@ -7974,8 +7982,8 @@ const paletteColours = {
79747982
dark: () => sourcePalette.neutral[46],
79757983
},
79767984
'--newsletter-card-frequency-tag': {
7977-
light: () => sourcePalette.neutral[38],
7978-
dark: () => sourcePalette.neutral[73],
7985+
light: () => sourcePalette.brand[400],
7986+
dark: () => sourcePalette.neutral[100],
79797987
},
79807988
'--newsletter-card-title': {
79817989
light: () => sourcePalette.neutral[7],

0 commit comments

Comments
 (0)