Skip to content

Commit 28472d5

Browse files
georgerichmondgeorgerichmond
authored
Update NewsletterSignupCard styling for better responsiveness on small devices (#16702)
* Update NewsletterSignupCard styling for better responsiveness on small devices * Make image smaller on small mobile and line wider
1 parent 9132ba9 commit 28472d5

3 files changed

Lines changed: 99 additions & 31 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: 67 additions & 29 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,34 +55,64 @@ 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 -${space[3]}px ${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
`;
78103

79104
const illustrationStyles = css`
80105
flex-shrink: 0;
81-
width: 90px;
82-
height: 90px;
106+
width: 70px;
107+
height: 70px;
83108
border-radius: 50%;
84109
object-fit: cover;
85110
111+
${from.mobileMedium} {
112+
width: 90px;
113+
height: 90px;
114+
}
115+
86116
${from.tablet} {
87117
width: 100px;
88118
height: 100px;
@@ -92,27 +122,35 @@ const illustrationStyles = css`
92122
const NewsletterSignupHeader = (
93123
props: Omit<NewsletterSignupCardProps, 'children'>,
94124
) => (
95-
<div css={headerStyles}>
96-
<div css={titleAndMetaStyles}>
97-
<div css={frequencyTagStyles}>
125+
<>
126+
<div css={frequencyTagStyles}>
127+
<span css={badgeStyles}>
98128
<SvgNewsletterFilled />
99-
Free newsletter | {props.frequency}
129+
</span>
130+
<span css={frequencyTextStyles}>
131+
<span css={frequencyLabelStyles}>Free newsletter |</span>
132+
<span css={frequencyLabelStyles}>{props.frequency}</span>
133+
</span>
134+
</div>
135+
<hr css={innerDividerStyles} />
136+
<div css={headerStyles}>
137+
<div css={titleAndMetaStyles}>
138+
<p css={titleStyles}>
139+
Sign up to <span>{props.name}</span>
140+
</p>
141+
<p css={descriptionStyles}>{props.description}</p>
100142
</div>
101-
<p css={titleStyles}>
102-
Sign up to <span>{props.name}</span>
103-
</p>
104-
<p css={descriptionStyles}>{props.description}</p>
143+
{!!props.illustrationSquare && (
144+
<img
145+
css={illustrationStyles}
146+
src={props.illustrationSquare}
147+
alt=""
148+
loading="lazy"
149+
decoding="async"
150+
/>
151+
)}
105152
</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>
153+
</>
116154
);
117155

118156
export const NewsletterSignupCard = ({

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7969,6 +7969,14 @@ const paletteColours = {
79697969
light: () => '#F3F7FF',
79707970
dark: () => sourcePalette.brand[100],
79717971
},
7972+
'--newsletter-card-badge-background': {
7973+
light: () => sourcePalette.brand[400],
7974+
dark: () => sourcePalette.brand[600],
7975+
},
7976+
'--newsletter-card-badge-icon': {
7977+
light: () => sourcePalette.neutral[100],
7978+
dark: () => sourcePalette.neutral[100],
7979+
},
79727980
'--newsletter-card-description': {
79737981
light: () => sourcePalette.neutral[20],
79747982
dark: () => sourcePalette.neutral[86],
@@ -7978,8 +7986,8 @@ const paletteColours = {
79787986
dark: () => sourcePalette.neutral[46],
79797987
},
79807988
'--newsletter-card-frequency-tag': {
7981-
light: () => sourcePalette.neutral[38],
7982-
dark: () => sourcePalette.neutral[73],
7989+
light: () => sourcePalette.brand[400],
7990+
dark: () => sourcePalette.neutral[100],
79837991
},
79847992
'--newsletter-card-title': {
79857993
light: () => sourcePalette.neutral[7],

0 commit comments

Comments
 (0)