Skip to content

Commit f6c5b31

Browse files
DanielCliftonGuardianDanielCliftonGuardian
authored
Merge branch 'main' into labs-immersive-updates
2 parents 446f101 + 22bd2ac commit f6c5b31

8 files changed

Lines changed: 361 additions & 35 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: 68 additions & 30 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';
@@ -22,7 +22,7 @@ export type NewsletterSignupCardProps = {
2222
const containerStyles = css`
2323
clear: left;
2424
background-color: ${themePalette('--newsletter-card-background')};
25-
padding: ${space[3]}px ${space[3]}px ${space[4]}px ${space[3]}px;
25+
padding: ${space[2]}px ${space[3]}px ${space[4]}px ${space[3]}px;
2626
`;
2727

2828
const dividerStyles = css`
@@ -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/frontend/feFront.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,7 @@ export type FESupportingContent = {
434434
properties: {
435435
href?: string;
436436
webUrl?: string;
437+
tests?: EditorialTest[];
437438
};
438439
header: {
439440
kicker?: {

‎dotcom-rendering/src/frontend/schemas/feFront.json‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -950,6 +950,57 @@
950950
},
951951
"webUrl": {
952952
"type": "string"
953+
},
954+
"tests": {
955+
"type": "array",
956+
"items": {
957+
"type": "object",
958+
"properties": {
959+
"testUuid": {
960+
"type": "string"
961+
},
962+
"variantMeta": {
963+
"type": "array",
964+
"items": {
965+
"type": "object",
966+
"properties": {
967+
"id": {
968+
"$ref": "#/definitions/VariantId"
969+
},
970+
"meta": {
971+
"type": "object",
972+
"additionalProperties": {}
973+
}
974+
},
975+
"required": [
976+
"id",
977+
"meta"
978+
]
979+
}
980+
},
981+
"startDate": {
982+
"type": "number"
983+
},
984+
"expiryDate": {
985+
"type": "number"
986+
},
987+
"frontsThisTestCanRunOn": {
988+
"type": "array",
989+
"items": {
990+
"type": "string"
991+
}
992+
},
993+
"hasManuallyEndedOnThisTrail": {
994+
"type": "boolean"
995+
}
996+
},
997+
"required": [
998+
"frontsThisTestCanRunOn",
999+
"hasManuallyEndedOnThisTrail",
1000+
"testUuid",
1001+
"variantMeta"
1002+
]
1003+
}
9531004
}
9541005
}
9551006
},
@@ -1836,6 +1887,57 @@
18361887
},
18371888
"webUrl": {
18381889
"type": "string"
1890+
},
1891+
"tests": {
1892+
"type": "array",
1893+
"items": {
1894+
"type": "object",
1895+
"properties": {
1896+
"testUuid": {
1897+
"type": "string"
1898+
},
1899+
"variantMeta": {
1900+
"type": "array",
1901+
"items": {
1902+
"type": "object",
1903+
"properties": {
1904+
"id": {
1905+
"$ref": "#/definitions/VariantId"
1906+
},
1907+
"meta": {
1908+
"type": "object",
1909+
"additionalProperties": {}
1910+
}
1911+
},
1912+
"required": [
1913+
"id",
1914+
"meta"
1915+
]
1916+
}
1917+
},
1918+
"startDate": {
1919+
"type": "number"
1920+
},
1921+
"expiryDate": {
1922+
"type": "number"
1923+
},
1924+
"frontsThisTestCanRunOn": {
1925+
"type": "array",
1926+
"items": {
1927+
"type": "string"
1928+
}
1929+
},
1930+
"hasManuallyEndedOnThisTrail": {
1931+
"type": "boolean"
1932+
}
1933+
},
1934+
"required": [
1935+
"frontsThisTestCanRunOn",
1936+
"hasManuallyEndedOnThisTrail",
1937+
"testUuid",
1938+
"variantMeta"
1939+
]
1940+
}
18391941
}
18401942
}
18411943
},
@@ -2722,6 +2824,57 @@
27222824
},
27232825
"webUrl": {
27242826
"type": "string"
2827+
},
2828+
"tests": {
2829+
"type": "array",
2830+
"items": {
2831+
"type": "object",
2832+
"properties": {
2833+
"testUuid": {
2834+
"type": "string"
2835+
},
2836+
"variantMeta": {
2837+
"type": "array",
2838+
"items": {
2839+
"type": "object",
2840+
"properties": {
2841+
"id": {
2842+
"$ref": "#/definitions/VariantId"
2843+
},
2844+
"meta": {
2845+
"type": "object",
2846+
"additionalProperties": {}
2847+
}
2848+
},
2849+
"required": [
2850+
"id",
2851+
"meta"
2852+
]
2853+
}
2854+
},
2855+
"startDate": {
2856+
"type": "number"
2857+
},
2858+
"expiryDate": {
2859+
"type": "number"
2860+
},
2861+
"frontsThisTestCanRunOn": {
2862+
"type": "array",
2863+
"items": {
2864+
"type": "string"
2865+
}
2866+
},
2867+
"hasManuallyEndedOnThisTrail": {
2868+
"type": "boolean"
2869+
}
2870+
},
2871+
"required": [
2872+
"frontsThisTestCanRunOn",
2873+
"hasManuallyEndedOnThisTrail",
2874+
"testUuid",
2875+
"variantMeta"
2876+
]
2877+
}
27252878
}
27262879
}
27272880
},

0 commit comments

Comments
 (0)