Skip to content

Commit 4729bfb

Browse files
andrewHEguardianandrewHEguardian
authored
Merge branch 'main' into ahe/product-button-strike-through
2 parents c36d7c3 + 9680460 commit 4729bfb

16 files changed

Lines changed: 1392 additions & 1107 deletions

File tree

‎.github/actions/setup-node-env/action.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: 'Sets up Node.js environment and installs dependencies'
44
runs:
55
using: 'composite'
66
steps:
7-
- run: npm install --global corepack@0.31.0
7+
- run: npm install --global corepack@0.36.0
88
shell: bash
99

1010
- run: corepack enable

‎.github/workflows/dcr-chromatic.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ jobs:
4949
- name: Chromatic - DCR
5050
env:
5151
NODE_OPTIONS: '--max_old_space_size=4096'
52-
uses: chromaui/action@v18.7.1
52+
uses: chromaui/action@v18.8.1
5353
if: |
5454
github.event_name == 'merge_group' ||
5555
(github.event_name == 'pull_request' &&

‎ab-testing/config/abTests.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,26 @@ const ABTests: ABTest[] = [
231231
groups: ["control", "variant"],
232232
shouldForceMetricsCollection: true,
233233
},
234+
{
235+
name: "commercial-header-bidder-timeouts",
236+
description:
237+
"Test to measure the impact of changing the Prebid and APS timeout value.",
238+
owners: ["commercial.dev@guardian.co.uk"],
239+
expirationDate: "2026-10-28",
240+
type: "client",
241+
status: "ON",
242+
audienceSize: 0 / 100,
243+
audienceSpace: "A",
244+
groups: [
245+
"variant-500",
246+
"variant-750",
247+
"variant-1000",
248+
"variant-1250",
249+
"control", // 1500ms timeout
250+
"variant-1650",
251+
],
252+
shouldForceMetricsCollection: true,
253+
},
234254
];
235255

236256
const activeABtests = ABTests.filter((test) => test.status === "ON");

‎dotcom-rendering/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"@guardian/identity-auth": "6.0.1",
4040
"@guardian/identity-auth-frontend": "20.1.0",
4141
"@guardian/libs": "32.0.0",
42-
"@guardian/ophan-tracker-js": "5.1.1",
42+
"@guardian/ophan-tracker-js": "5.1.3",
4343
"@guardian/react-crossword": "19.0.1",
4444
"@guardian/shimport": "1.0.2",
4545
"@guardian/source": "12.2.1",
@@ -157,7 +157,7 @@
157157
"trusted-types": "2.0.0",
158158
"ts-unused-exports": "10.1.0",
159159
"tslib": "catalog:",
160-
"tsx": "4.6.2",
160+
"tsx": "4.23.13",
161161
"type-fest": "catalog:",
162162
"typescript": "catalog:",
163163
"typescript-eslint": "8.57.1",

‎dotcom-rendering/src/components/ElectionTrackers/ElectionTracker.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ type Props = {
2424
electionDataUrl: URL;
2525
/**
2626
* A potentially side-effectful function used to retrieve election data from
27-
* the given URL. The result is a JS object of unknown shape.
27+
* the given URL, allowing for different effects to be passed in different
28+
* environments. The result is a JS object of unknown shape, which will be
29+
* parsed here.
2830
*/
2931
getElectionData: (url: string) => Promise<unknown>;
3032
/**

‎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/components/marketing/lib/consentBannerTest.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import { getCookie } from '@guardian/libs';
22

33
const AB_TEST_GEO_REGION_COOKIE = 'GU_geo_country_region';
44
const AB_TEST_US_STATES = [
5-
'WA', // Washington
6-
'NC', // North Carolina
7-
'OH', // Ohio
85
'SC', // South Carolina
9-
'MI', // Michigan
10-
'AZ', // Arizona
11-
'MO', // Missouri
12-
'WI', // Wisconsin
13-
'DC', // District of Columbia
14-
'KS', // Kansas
15-
'NM', // New Mexico
16-
'ME', // Maine
6+
// 'WA', // Washington
7+
// 'NC', // North Carolina
8+
// 'OH', // Ohio
9+
// 'MI', // Michigan
10+
// 'AZ', // Arizona
11+
// 'MO', // Missouri
12+
// 'WI', // Wisconsin
13+
// 'DC', // District of Columbia
14+
// 'KS', // Kansas
15+
// 'NM', // New Mexico
16+
// 'ME', // Maine
1717
];
1818

1919
export const isInUsStateForAbTest = (): boolean => {

‎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?: {

0 commit comments

Comments
 (0)