Skip to content

Commit 1957de2

Browse files
FweddiFweddi
authored
Merge pull request #14409 from guardian/ab/slideshow-restriction
Slideshow card restriction
2 parents c32a583 + d5037ef commit 1957de2

File tree

5 files changed

+110
-45
lines changed

5 files changed

+110
-45
lines changed

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -626,6 +626,40 @@ export const loopVideoCard: DCRFrontCard = {
626626
},
627627
};
628628

629+
export const slideshowCard: DCRFrontCard = {
630+
...defaultCardProps,
631+
dataLinkName: 'news | group-0 | card-@2',
632+
url: '/uk-news/2025/jan/22/prince-harry-says-sun-publisher-made-historic-admission-as-he-settles-case',
633+
headline: 'Headline for slideshow card',
634+
trailText: 'Trail text for slideshow card',
635+
slideshowImages: [
636+
{
637+
imageSrc:
638+
'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/1000.jpg',
639+
},
640+
{
641+
imageSrc:
642+
'https://media.guim.co.uk/77e960298d4339e047eac5c1986d0f3214f6285d/419_447_4772_2863/master/4772.jpg',
643+
},
644+
{
645+
imageSrc:
646+
'https://media.guim.co.uk/df5aea6391e21b5a5d2d25fd9aad81d497f99d42/0_45_3062_1837/master/3062.jpg',
647+
},
648+
{
649+
imageSrc:
650+
'https://media.guim.co.uk/5ebec1a8d662f0da39887dae16e4b2720379246e/0_0_5000_3000/master/5000.jpg',
651+
},
652+
{
653+
imageSrc:
654+
'https://media.guim.co.uk/77e960298d4339e047eac5c1986d0f3214f6285d/419_447_4772_2863/master/4772.jpg',
655+
},
656+
],
657+
image: {
658+
src: 'https://media.guim.co.uk/966bf085fb982b1103aaba42a812b09726cc0a3c/1417_104_1378_1104/master/1378.jpg',
659+
altText: 'Wyatt Russell and Florence Pugh in Thunderbolts*.',
660+
},
661+
};
662+
629663
const snapDataEnriched = {
630664
embedHtml:
631665
'\u003Cdiv class="football-atom__container"\u003E\n\t\u003Chtml\u003E\u003Chead\u003E\u003C/head\u003E\u003Cbody\u003E\u003Cdiv class="knockout-container" data-link-name="Women\'s Euro 2025 knockout chart"\u003E\n\n \u003Cdiv class="football-knockouts football-knockouts--has-spider"\u003E\n \n \u003Cul class="u-unstyled u-cf"\u003E\n \u003Cli\u003E\n \n\u003Ctable class="table table--football football-matches"\u003E\n \u003Cthead hidden=""\u003E\n \u003Ctr\u003E\n \u003Cth class="match__status"\u003EMatch status / kick off time\u003C/th\u003E\n \u003Cth class="match__details"\u003EMatch details\u003C/th\u003E\n \u003C/tr\u003E\n \u003C/thead\u003E\n\n \u003Ctbody\u003E\n \n \u003Ctr data-link-to="https://football.theguardian.com/match-redirect/4512667" data-match-id="4512667" data-score-home="1" data-score-away="2" data-match-status="FT" id="football-match-4512667" class="football-match football-match--result"\u003E\n \u003Ctd class="football-match__status football-match__status--ft table-column--sub"\u003E\n \n FT\n \n \u003C/td\u003E\n \u003Ctd class="football-match__crest football-match__crest--home"\u003E\n \u003C!--\n \u003Cimg class="team-crest" alt="" src="https://sport.guim.co.uk/football/crests/60/8184.png" /\u003E\n --\u003E\n \u003C/td\u003E\n \u003Ctd class="football-match__teams table-column--main"\u003E\n \u003Ca href="https://www.theguardian.com/football/2025/jul/16/norway-italy-womens-euro-2025-quarter-final-match-report" class="u-unstyled football-teams u-cf" data-link-name="match-redirect"\u003E\n \u003Cdiv class="football-match__team football-match__team--home football-team"\u003E\n \u003Cdiv class="football-team__name team-name" data-abbr="NOR"\u003E\n \u003Cspan class="team-name__long"\u003ENorway\u003C/span\u003E\n \u003C/div\u003E\n \u003Cdiv class="football-team__score"\u003E1\u003C/div\u003E\n \u003C/div\u003E\n\n \u003Cdiv class="football-match__team football-match__team--away football-team"\u003E\n \u003Cdiv class="football-team__name team-name" data-abbr="ITA"\u003E\n \u003Cspan class="team-name__long"\u003EItaly\u003C/span\u003E\n \u003C/div\u003E\n \u003Cdiv class="football-team__score"\u003E2\u003C/div\u003E\n \u003C/div\u003E\n\n \u003Cdiv class="football-teams__battleline"\u003E\u003C/div\u003E\n\n \n \u003C/a\u003E\n \u003C/td\u003E\n \u003Ctd class="football-match__crest football-match__crest--home"\u003E\n \u003C!--\n \u003Cimg class="team-crest" alt="" src="https://sport.guim.co.uk/football/crests/120/7720.png" /\u003E\n --\u003E\n \u003C/td\u003E\n \u003C/tr\u003E\n \n \u003C/tbody\u003E\n \u003Ccaption class="table__caption table__caption--top"\u003E\n \n \n \u003Cspan class="football-matches__heading"\u003EFixtures and results\u003C/span\u003E\n \n \n \u003Cspan class="football-matches__date"\u003E\n Wed 16 July \n \u003C/span\u003E\n\n \u003C/caption\u003E\n \n\n \n\u003C/table\u003E\n\n\u003Ctable class="table table--football football-matches"\u003E\n \u003Cthead hidden=""\u003E\n \u003Ctr\u003E\n \u003Cth class="match__status"\u003EMatch status / kick off time\u003C/th\u003E\n \u003Cth class="match__details"\u003EMatch details\u003C/th\u003E\n \u003C/tr\u003E\n \u003C/thead\u003E\n\n \u003Ctbody\u003E\n \n \u003Ctr data-link-to="https://football.theguardian.com/match-redirect/4512685" data-match-id="4512685" data-score-home="2" data-score-away="2" data-match-status="FT" id="football-match-4512685" class="football-match football-match--result"\u003E\n \u003Ctd class="football-match__status football-match__status--ft table-column--sub"\u003E\n \n FT\n \n \u003C/td\u003E\n \u003Ctd class="football-match__crest football-match__crest--home"\u003E\n \u003C!--\n \u003Cimg class="team-crest" alt="" src="https://sport.guim.co.uk/football/crests/60/8319.png" /\u003E\n --\u003E\n \u003C/td\u003E\n \u003Ctd class="football-match__teams table-column--main"\u003E\n \u003Ca href="https://www.theguardian.com/football/2025/jul/17/sweden-england-womens-euro-2025-quarter-final-match-report" class="u-unstyled football-teams u-cf" data-link-name="match-redirect"\u003E\n \u003Cdiv class="football-match__team football-match__team--home football-team"\u003E\n \u003Cdiv class="football-team__name team-name" data-abbr="SWE"\u003E\n \u003Cspan class="team-name__long"\u003ESweden\u003C/span\u003E\n \u003C/div\u003E\n \u003Cdiv class="football-team__score"\u003E2\u003C/div\u003E\n \u003C/div\u003E\n\n \u003Cdiv class="football-match__team football-match__team--away football-team"\u003E\n \u003Cdiv class="football-team__name team-name" data-abbr="ENG"\u003E\n \u003Cspan class="team-name__long"\u003EEngland\u003C/span\u003E\n \u003C/div\u003E\n \u003Cdiv class="football-team__score"\u003E2\u003C/div\u003E\n \u003C/div\u003E\n\n \u003Cdiv class="football-teams__battleline"\u003E\u003C/div\u003E\n\n \n \u003Cdiv class="football-match__comments"\u003EEngland win 3-2 on penalties\u003C/div\u003E\n \n \u003C/a\u003E\n \u003C/td\u003E\n \u003Ctd class="football-match__crest football-match__crest--home"\u003E\n \u003C!--\n \u003Cimg class="team-crest" alt="" src="https://sport.guim.co.uk/football/crests/120/7514.png" /\u003E\n --\u003E\n \u003C/td\u003E\n \u003C/tr\u003E\n \n \u003C/tbody\u003E\n \u003Ccaption class="table__caption table__caption--top"\u003E\n \n \u003Cspan class="football-matches__date"\u003E\n Thu 17 July \n \u003C/span\u003E\n\n \u003C/caption\u003E\n \n\n \n\u003C/table\u003E\n\n\u003Ctable class="table table--football football-matches"\u003E\n \u003Cthead hidden=""\u003E\n \u003Ctr\u003E\n \u003Cth class="match__status"\u003EMatch status / kick off time\u003C/th\u003E\n \u003Cth class="match__details"\u003EMatch details\u003C/th\u003E\n \u003C/tr\u003E\n \u003C/thead\u003E\n\n \u003Ctbody\u003E\n \n \u003Ctr data-link-to="https://football.theguardian.com/match-redirect/4512668" data-match-id="4512668" data-score-home="2" data-score-away="0" data-match-status="FT" id="football-match-4512668" class="football-match football-match--result"\u003E\n \u003Ctd class="football-match__status football-match__status--ft table-column--sub"\u003E\n \n FT\n \n \u003C/td\u003E\n \u003Ctd class="football-match__crest football-match__crest--home"\u003E\n \u003C!--\n \u003Cimg class="team-crest" alt="" src="https://sport.guim.co.uk/football/crests/60/42111.png" /\u003E\n --\u003E\n \u003C/td\u003E\n \u003Ctd class="football-match__teams table-column--main"\u003E\n \u003Ca href="https://www.theguardian.com/football/2025/jul/18/spain-switzerland-womens-euro-2025-quarter-final-match-report" class="u-unstyled football-teams u-cf" data-link-name="match-redirect"\u003E\n \u003Cdiv class="football-match__team football-match__team--home football-team"\u003E\n \u003Cdiv class="football-team__name team-name" data-abbr="SPA"\u003E\n \u003Cspan class="team-name__long"\u003ESpain\u003C/span\u003E\n \u003C/div\u003E\n \u003Cdiv class="football-team__score"\u003E2\u003C/div\u003E\n \u003C/div\u003E\n\n \u003Cdiv class="football-match__team football-match__team--away football-team"\u003E\n \u003Cdiv class="football-team__name team-name" data-abbr="SUI"\u003E\n \u003Cspan class="team-name__long"\u003ESwitzerland\u003C/span\u003E\n \u003C/div\u003E\n \u003Cdiv class="football-team__score"\u003E0\u003C/div\u003E\n \u003C/div\u003E\n\n \u003Cdiv class="football-teams__battleline"\u003E\u003C/div\u003E\n\n \n \u003C/a\u003E\n \u003C/td\u003E\n \u003Ctd class="football-match__crest football-match__crest--home"\u003E\n \u003C!--\n \u003Cimg class="team-crest" alt="" src="https://sport.guim.co.uk/football/crests/120/36601.png" /\u003E\n --\u003E\n \u003C/td\u003E\n \u003C/tr\u003E\n \n \u003C/tbody\u003E\n \u003Ccaption class="table__caption table__caption--top"\u003E\n \n \u003Cspan class="football-matches__date"\u003E\n Fri 18 July \n \u003C/span\u003E\n\n \u003C/caption\u003E\n \n\n \n\u003C/table\u003E\n\n\u003Ctable class="table table--football football-matches"\u003E\n \u003Cthead hidden=""\u003E\n \u003Ctr\u003E\n \u003Cth class="match__status"\u003EMatch status / kick off time\u003C/th\u003E\n \u003Cth class="match__details"\u003EMatch details\u003C/th\u003E\n \u003C/tr\u003E\n \u003C/thead\u003E\n\n \u003Ctbody\u003E\n \n \u003Ctr data-link-to="https://football.theguardian.com/match-redirect/4512686" data-match-id="4512686" data-score-home="1" data-score-away="1" data-match-status="FT" id="football-match-4512686" class="football-match football-match--result"\u003E\n \u003Ctd class="football-match__status football-match__status--ft table-column--sub"\u003E\n \n FT\n \n \u003C/td\u003E\n \u003Ctd class="football-match__crest football-match__crest--home"\u003E\n \u003C!--\n \u003Cimg class="team-crest" alt="" src="https://sport.guim.co.uk/football/crests/60/35853.png" /\u003E\n --\u003E\n \u003C/td\u003E\n \u003Ctd class="football-match__teams table-column--main"\u003E\n \u003Ca href="https://www.theguardian.com/football/2025/jul/19/france-germany-womens-euro-2025-quarter-final-match-report" class="u-unstyled football-teams u-cf" data-link-name="match-redirect"\u003E\n \u003Cdiv class="football-match__team football-match__team--home football-team"\u003E\n \u003Cdiv class="football-team__name team-name" data-abbr="FRA"\u003E\n \u003Cspan class="team-name__long"\u003EFrance\u003C/span\u003E\n \u003C/div\u003E\n \u003Cdiv class="football-team__score"\u003E1\u003C/div\u003E\n \u003C/div\u003E\n\n \u003Cdiv class="football-match__team football-match__team--away football-team"\u003E\n \u003Cdiv class="football-team__name team-name" data-abbr="GER"\u003E\n \u003Cspan class="team-name__long"\u003EGermany\u003C/span\u003E\n \u003C/div\u003E\n \u003Cdiv class="football-team__score"\u003E1\u003C/div\u003E\n \u003C/div\u003E\n\n \u003Cdiv class="football-teams__battleline"\u003E\u003C/div\u003E\n\n \n \u003Cdiv class="football-match__comments"\u003EGermany win 6-5 on penalties\u003C/div\u003E\n \n \u003C/a\u003E\n \u003C/td\u003E\n \u003Ctd class="football-match__crest football-match__crest--home"\u003E\n \u003C!--\n \u003Cimg class="team-crest" alt="" src="https://sport.guim.co.uk/football/crests/120/7699.png" /\u003E\n --\u003E\n \u003C/td\u003E\n \u003C/tr\u003E\n \n \u003C/tbody\u003E\n \u003Ccaption class="table__caption table__caption--top"\u003E\n \n \u003Cspan class="football-matches__date"\u003E\n Sat 19 July \n \u003C/span\u003E\n\n \u003C/caption\u003E\n \n\n \n\u003C/table\u003E\n\n \u003C/li\u003E\n \u003C/ul\u003E\n \n \u003C/div\u003E\n\n\u003C/div\u003E\n\n\n\u003C/body\u003E\u003C/html\u003E \n\t\u003Cbutton class="view-more--button"\u003E\n\t\t\u003Ca href="https://www.theguardian.com/football/women-s-euro-2025/overview"\u003EView all knockout stages\u003C/a\u003E\n\t\u003C/button\u003E\n\u003C/div\u003E\n',

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,14 @@ export type Props = {
9696
showClock?: boolean;
9797
mainMedia?: MainMedia;
9898
/**
99-
* Note YouTube recommends a minimum width of 480px @see https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-youtube-player-size
100-
* At 300px or below, the player will begin to lose functionality e.g. volume controls being omitted.
101-
* Youtube requires a minimum width 200px.
99+
* For interactive media (e.g., video or slideshow), certain card sizes are restricted from displaying
100+
* the interactive content because controls may be unavailable or inaccessible at those sizes.
101+
*
102+
* Note:
103+
* - YouTube recommends a minimum embed width of 480px
104+
* @see https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-youtube-player-size
105+
* - At widths of 300px or below, the player may lose functionality (e.g., volume controls may be omitted).
106+
* - YouTube requires an absolute minimum width of 200px.
102107
*/
103108
canPlayInline?: boolean;
104109
kickerText?: string;
@@ -281,7 +286,9 @@ const getMedia = ({
281286
mainMedia,
282287
} as const;
283288
}
284-
if (slideshowImages) return { type: 'slideshow', slideshowImages } as const;
289+
if (slideshowImages && canPlayInline) {
290+
return { type: 'slideshow', slideshowImages } as const;
291+
}
285292
if (avatarUrl) return { type: 'avatar', avatarUrl } as const;
286293
if (
287294
mainMedia?.type === 'Audio' &&
@@ -353,7 +360,7 @@ export const Card = ({
353360
avatarUrl,
354361
showClock,
355362
mainMedia,
356-
canPlayInline,
363+
canPlayInline = false,
357364
kickerText,
358365
showPulsingDot,
359366
starRating,

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

Lines changed: 50 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
getSublinks,
88
loopVideoCard,
99
opinionTrails,
10+
slideshowCard,
1011
trails,
1112
videoTrails,
1213
} from '../../fixtures/manual/trails';
@@ -450,45 +451,6 @@ export const StandardBoostedWithLiveUpdates: Story = {
450451
},
451452
};
452453

453-
const slideshowCard = {
454-
...liveUpdatesCard,
455-
mainMedia: undefined,
456-
slideshowImages: [
457-
{
458-
imageSrc:
459-
'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/1000.jpg',
460-
},
461-
{
462-
imageSrc:
463-
'https://media.guim.co.uk/77e960298d4339e047eac5c1986d0f3214f6285d/419_447_4772_2863/master/4772.jpg',
464-
},
465-
{
466-
imageSrc:
467-
'https://media.guim.co.uk/df5aea6391e21b5a5d2d25fd9aad81d497f99d42/0_45_3062_1837/master/3062.jpg',
468-
},
469-
{
470-
imageSrc:
471-
'https://media.guim.co.uk/5ebec1a8d662f0da39887dae16e4b2720379246e/0_0_5000_3000/master/5000.jpg',
472-
},
473-
{
474-
imageSrc:
475-
'https://media.guim.co.uk/77e960298d4339e047eac5c1986d0f3214f6285d/419_447_4772_2863/master/4772.jpg',
476-
},
477-
],
478-
} satisfies DCRFrontCard;
479-
480-
// Boost level is ignored for slideshows
481-
export const SplashWithLiveUpdatesAndSlideshow: Story = {
482-
name: 'Splash with live updates and slideshow',
483-
args: {
484-
frontSectionTitle: 'Splash with live updates and slideshow',
485-
groupedTrails: {
486-
...emptyGroupedTrails,
487-
splash: [{ ...slideshowCard }],
488-
},
489-
},
490-
};
491-
492454
export const StandardCards: Story = {
493455
name: 'Standard cards',
494456
args: {
@@ -606,3 +568,52 @@ export const StandardBoostedMediaCardWithSublinks: Story = {
606568
},
607569
},
608570
};
571+
572+
// All splash boost levels support slideshows.
573+
export const SplashWithSlideshow: Story = {
574+
name: 'Splash with a slideshow',
575+
args: {
576+
frontSectionTitle: 'Flexible General Splash card with a slideshow',
577+
groupedTrails: {
578+
...emptyGroupedTrails,
579+
splash: [
580+
{
581+
...slideshowCard,
582+
boostLevel: 'default',
583+
headline: 'Default splash card with a slideshow',
584+
},
585+
],
586+
},
587+
collectionId: 1,
588+
},
589+
};
590+
591+
export const StandardCardWithSlideshow: Story = {
592+
name: 'Standard card with a slideshow',
593+
args: {
594+
frontSectionTitle:
595+
'Flexible General standard card with a slideshow at each boost level',
596+
groupedTrails: {
597+
...emptyGroupedTrails,
598+
standard: [
599+
{
600+
...slideshowCard,
601+
boostLevel: 'default',
602+
headline:
603+
'Image fallback - default card is too small for a slideshow',
604+
},
605+
{
606+
...slideshowCard,
607+
boostLevel: 'boost',
608+
headline: 'Boosted card with a slideshow',
609+
},
610+
{
611+
...slideshowCard,
612+
boostLevel: 'megaboost',
613+
headline: 'MegaBoosted card with a slideshow',
614+
},
615+
],
616+
},
617+
collectionId: 1,
618+
},
619+
};

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
44
import {
55
loopVideoCard,
66
opinionTrails,
7+
slideshowCard,
78
snapLink,
89
trails,
910
} from '../../fixtures/manual/trails';
@@ -305,6 +306,19 @@ export const SnapCard: Story = {
305306
},
306307
};
307308

309+
export const Slideshow: Story = {
310+
name: 'With a slideshow',
311+
args: {
312+
frontSectionTitle: 'Flexible Special with a slideshow',
313+
groupedTrails: {
314+
...emptyGroupedTrails,
315+
snap: [],
316+
standard: [slideshowCard],
317+
},
318+
collectionId: 1,
319+
},
320+
};
321+
308322
const containerPalettes = [
309323
'InvestigationPalette',
310324
'LongRunningPalette',

0 commit comments

Comments
 (0)