Skip to content

Commit 50b91b3

Browse files
deedeehdeedeeh
authored
Merge branch 'main' into md/insert-galleries-ads
2 parents c2ee17d + c49d7c2 commit 50b91b3

18 files changed

+252
-234
lines changed

‎dotcom-rendering/fixtures/manual/sign-in-gate.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const mockAuxiaResponseDismissible = {
88
treatmentContent: JSON.stringify({
99
title: 'Like uninterrupted reading?\nSo do we. Sign in.',
1010
subtitle:
11-
"Sign in to keep reading. It's free, and we'll bring you right back here in under a minute.",
11+
"Sign in to keep reading.\n\nIt's free, and we'll bring you right back here in under a minute.",
1212
body: '',
1313
first_cta_name: 'Create a free account',
1414
first_cta_link: 'https://profile.theguardian.com/register',

‎dotcom-rendering/fixtures/manual/trails.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,7 @@ export const audioTrails: [DCRFrontCard, DCRFrontCard] = [
469469
altText:
470470
"TOPSHOT-FBL-EUR-C1-MILAN-FEYENOORD<br>TOPSHOT - Polish referee Szymon Marciniak gives a red card to AC Milan's French defender #19 Theo Hernandez (R) during the UEFA Champions League knockout round play-off second leg football match between AC Milan and Feyenoord at San Siro stadium in Milan, on February 18, 2025. (Photo by Piero CRUCIATTI / AFP) (Photo by PIERO CRUCIATTI/AFP via Getty Images)",
471471
},
472+
supportingContent: getSublinks(2),
472473
},
473474
];
474475

@@ -541,6 +542,7 @@ export const galleryTrails: [DCRFrontCard, DCRFrontCard] = [
541542
src: 'https://media.guim.co.uk/69ac2383ea611126b54373865dac3e7e77981d7e/0_39_5500_3302/master/5500.jpg',
542543
altText: 'A group of people in the street, some looking worried',
543544
},
545+
supportingContent: getSublinks(2),
544546
},
545547
];
546548

‎dotcom-rendering/src/components/AdSlot.web.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,12 +137,17 @@ const topAboveNavContainerVariantStyles = css`
137137
content: '';
138138
position: absolute;
139139
height: 250px;
140-
width: 970px;
140+
width: 728px;
141141
top: ${labelHeight}px;
142142
left: 50%;
143143
transform: translateX(-50%);
144144
background-color: ${palette.neutral[93]};
145145
}
146+
${from.desktop} {
147+
::before {
148+
width: 970px;
149+
}
150+
}
146151
}
147152
`;
148153

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

Lines changed: 59 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import {
99
Pillar,
1010
} from '../../lib/articleFormat';
1111
import type { Branding } from '../../types/branding';
12-
import type { DCRContainerPalette } from '../../types/front';
12+
import type {
13+
DCRContainerPalette,
14+
DCRSupportingContent,
15+
} from '../../types/front';
1316
import type { MainMedia } from '../../types/mainMedia';
1417
import { ContainerOverrides } from '../ContainerOverrides';
1518
import { FrontSection } from '../FrontSection';
@@ -80,6 +83,19 @@ const mainGallery: MainMedia = {
8083
count: '5',
8184
};
8285

86+
const twoSublinks: DCRSupportingContent[] = [
87+
{
88+
...aBasicLink,
89+
headline: 'Headline 1',
90+
kickerText: 'Kicker',
91+
},
92+
{
93+
...aBasicLink,
94+
headline: 'Headline 2',
95+
kickerText: 'Kicker',
96+
},
97+
];
98+
8399
const CardWrapper = ({ children }: { children: React.ReactNode }) => {
84100
return (
85101
<div
@@ -345,23 +361,48 @@ export const WithMediaTypeAndSublinks = () => {
345361
design: ArticleDesign.Video,
346362
theme: Pillar.Sport,
347363
}}
348-
containerType="flexible/general"
349364
mainMedia={{ ...mainVideo, duration: 30 }}
350365
headlineText="Video"
351-
imagePositionOnDesktop="top"
352-
imagePositionOnMobile="left"
353-
supportingContent={[
354-
{
355-
...aBasicLink,
356-
headline: 'Headline 1',
357-
kickerText: 'Kicker',
358-
},
359-
{
360-
...aBasicLink,
361-
headline: 'Headline 2',
362-
kickerText: 'Kicker',
363-
},
364-
]}
366+
supportingContent={twoSublinks}
367+
/>
368+
</CardWrapper>
369+
<CardWrapper>
370+
<Card
371+
{...basicCardProps}
372+
format={{
373+
display: ArticleDisplay.Standard,
374+
design: ArticleDesign.Video,
375+
theme: Pillar.Sport,
376+
}}
377+
mainMedia={{ ...mainVideo, duration: 0 }}
378+
headlineText="Video without duration"
379+
supportingContent={twoSublinks}
380+
/>
381+
</CardWrapper>
382+
<CardWrapper>
383+
<Card
384+
{...basicCardProps}
385+
format={{
386+
display: ArticleDisplay.Standard,
387+
design: ArticleDesign.Audio,
388+
theme: Pillar.Sport,
389+
}}
390+
mainMedia={mainAudio}
391+
headlineText="Audio"
392+
supportingContent={twoSublinks}
393+
/>
394+
</CardWrapper>
395+
<CardWrapper>
396+
<Card
397+
{...basicCardProps}
398+
format={{
399+
display: ArticleDisplay.Standard,
400+
design: ArticleDesign.Gallery,
401+
theme: Pillar.Sport,
402+
}}
403+
mainMedia={mainGallery}
404+
headlineText="Gallery"
405+
supportingContent={twoSublinks}
365406
/>
366407
</CardWrapper>
367408
</CardGroup>
@@ -1764,18 +1805,7 @@ export const WithBetaContainerAndSublinks = () => {
17641805
{...basicCardProps}
17651806
containerType="flexible/general"
17661807
imagePositionOnMobile="bottom"
1767-
supportingContent={[
1768-
{
1769-
...aBasicLink,
1770-
headline: 'Headline 1',
1771-
kickerText: 'Kicker',
1772-
},
1773-
{
1774-
...aBasicLink,
1775-
headline: 'Headline 2',
1776-
kickerText: 'Kicker',
1777-
},
1778-
]}
1808+
supportingContent={twoSublinks}
17791809
/>
17801810
</CardWrapper>
17811811
</CardGroup>
@@ -1791,18 +1821,7 @@ export const WithBetaContainerAndSublinksNoImage = () => {
17911821
image={undefined}
17921822
containerType="flexible/general"
17931823
imagePositionOnMobile="bottom"
1794-
supportingContent={[
1795-
{
1796-
...aBasicLink,
1797-
headline: 'Headline 1',
1798-
kickerText: 'Kicker',
1799-
},
1800-
{
1801-
...aBasicLink,
1802-
headline: 'Headline 2',
1803-
kickerText: 'Kicker',
1804-
},
1805-
]}
1824+
supportingContent={twoSublinks}
18061825
/>
18071826
</CardWrapper>
18081827
</CardGroup>

‎dotcom-rendering/src/components/Card/components/CardLayout.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ type Props = {
2323

2424
const containerStyles = css`
2525
display: flex;
26+
position: relative;
2627
flex-basis: 100%;
2728
`;
2829

‎dotcom-rendering/src/components/Carousel.importable.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,10 @@ const getDataLinkNameCarouselButton = (
425425
return `${isVideoContainer ? 'video-container' : arrowName}-${direction}`;
426426
};
427427

428+
const cleanTitle = (title: string) => {
429+
return title.replace('More', '').trimStart();
430+
};
431+
428432
const Title = ({
429433
title,
430434
isCuratedContent,
@@ -453,7 +457,9 @@ const Title = ({
453457
) : (
454458
<h2 css={headerStyles}>
455459
{isCuratedContent ? 'More from ' : ''}
456-
<span css={titleStyle(isCuratedContent)}>{title}</span>
460+
<span css={titleStyle(isCuratedContent)}>
461+
{isCuratedContent ? cleanTitle(title) : title}
462+
</span>
457463
</h2>
458464
);
459465

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

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@ import { breakpoints } from '@guardian/source/foundations';
22
import type { Meta, StoryObj } from '@storybook/react';
33
import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
44
import {
5+
audioTrails,
6+
galleryTrails,
57
getSublinks,
68
loopVideoCard,
79
opinionTrails,
810
trails,
11+
videoTrails,
912
} from '../../fixtures/manual/trails';
1013
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
1114
import { customMockFetch } from '../lib/mockRESTCalls';
@@ -54,7 +57,9 @@ const standardCards = standards.map((card, index) => {
5457

5558
switch (index + 1) {
5659
case 2:
57-
return enhanceCardFields({ supportingContent: getSublinks(2) });
60+
return enhanceCardFields({
61+
supportingContent: getSublinks(2),
62+
});
5863
case 3:
5964
return enhanceCardFields({
6065
boostLevel: 'boost',
@@ -437,13 +442,13 @@ const slideshowCard = {
437442
],
438443
} satisfies DCRFrontCard;
439444

440-
export const DefaultSplashWithLiveUpdatesAndSlideshow: Story = {
441-
name: 'Standard splash with live updates and slideshow',
445+
// Boost level is ignored for slideshows
446+
export const SplashWithLiveUpdatesAndSlideshow: Story = {
447+
name: 'Splash with live updates and slideshow',
442448
args: {
443-
frontSectionTitle: 'Standard splash with live updates and slideshow',
449+
frontSectionTitle: 'Splash with live updates and slideshow',
444450
groupedTrails: {
445451
...emptyGroupedTrails,
446-
447452
splash: [{ ...slideshowCard }],
448453
},
449454
},
@@ -455,18 +460,13 @@ export const StandardCards: Story = {
455460
frontSectionTitle: 'Standard cards',
456461
groupedTrails: {
457462
...emptyGroupedTrails,
458-
standard: trails.slice(0, 4),
459-
},
460-
},
461-
};
462-
463-
export const OpinionStandardCards: Story = {
464-
name: 'Opinion standard cards',
465-
args: {
466-
frontSectionTitle: 'Opinion standard cards',
467-
groupedTrails: {
468-
...emptyGroupedTrails,
469-
standard: opinionTrails.slice(0, 2),
463+
standard: [
464+
...trails.slice(0, 4),
465+
...opinionTrails.slice(0, 2),
466+
...audioTrails.slice(0, 2),
467+
...galleryTrails.slice(0, 2),
468+
...videoTrails.slice(0, 2),
469+
],
470470
},
471471
},
472472
};
@@ -559,3 +559,18 @@ export const LoopVideoCards: Story = {
559559
},
560560
},
561561
};
562+
563+
export const StandardBoostedMediaCardWithSublinks: Story = {
564+
name: 'Standard boosted media card with sublinks',
565+
args: {
566+
frontSectionTitle: 'Standard boosted media card with sublinks',
567+
groupedTrails: {
568+
...emptyGroupedTrails,
569+
standard: [trails[1]].map((card) => ({
570+
...card,
571+
boostLevel: 'boost',
572+
supportingContent: getSublinks(2),
573+
})),
574+
},
575+
},
576+
};

0 commit comments

Comments
 (0)