Skip to content

Commit 2698ed3

Browse files
abeddow91abeddow91
authored
Immersive features in non splash slots (#13680)
* Pass through mobile aspect ratio to youtube component * Add immersive styling to overlay * Extract immersive card layout into its own component so it can be used in the splash and boost slots * Use real data for is immersive on boosted layout * Add test for immersive layout * Improve story coverage of feature cards * Decouple boosting from layout naming as this is no longer accurate. * Reorder components * Remove cards check as we have already made the check at the parent component * Update tests to match new naming convention * Add immersive cards to a flex gen story container in splash and non splash slots * Fix test
1 parent 551dd71 commit 2698ed3

File tree

4 files changed

+292
-78
lines changed

4 files changed

+292
-78
lines changed

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

Lines changed: 160 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,29 @@ const aBasicLink = {
4444
},
4545
};
4646

47+
const supportingContent = [
48+
{
49+
...aBasicLink,
50+
headline: 'Headline 1',
51+
kickerText: 'Kicker',
52+
},
53+
{
54+
...aBasicLink,
55+
headline: 'Headline 2',
56+
kickerText: 'Kicker',
57+
format: {
58+
theme: Pillar.Sport,
59+
design: ArticleDesign.Gallery,
60+
display: ArticleDisplay.Standard,
61+
},
62+
},
63+
{
64+
...aBasicLink,
65+
headline: 'Headline 3',
66+
kickerText: 'Kicker',
67+
},
68+
];
69+
4770
const CardWrapper = ({
4871
maxWidth,
4972
children,
@@ -230,36 +253,152 @@ export const WithTrailText: Story = {
230253

231254
export const WithSublinks: Story = {
232255
args: {
233-
supportingContent: [
234-
{
235-
...aBasicLink,
236-
headline: 'Headline 1',
237-
kickerText: 'Kicker',
238-
},
239-
{
240-
...aBasicLink,
241-
headline: 'Headline 2',
242-
kickerText: 'Kicker',
243-
format: {
244-
theme: Pillar.Sport,
245-
design: ArticleDesign.Gallery,
246-
display: ArticleDisplay.Standard,
256+
supportingContent,
257+
},
258+
};
259+
260+
export const Immersive: Story = {
261+
args: {
262+
aspectRatio: '5:3',
263+
mobileAspectRatio: '4:5',
264+
imageSize: 'feature-immersive',
265+
maxWidth: '940',
266+
isImmersive: true,
267+
},
268+
};
269+
270+
export const ImmersiveWithSublinks: Story = {
271+
args: {
272+
aspectRatio: '5:3',
273+
mobileAspectRatio: '4:5',
274+
imageSize: 'feature-immersive',
275+
maxWidth: '940',
276+
isImmersive: true,
277+
supportingContent,
278+
},
279+
};
280+
// A standard (non-video) article with a video main media
281+
export const ImmersiveVideoMainMedia: Story = {
282+
args: {
283+
aspectRatio: '5:3',
284+
mobileAspectRatio: '4:5',
285+
imageSize: 'feature-immersive',
286+
maxWidth: '940',
287+
isImmersive: true,
288+
...Video.args,
289+
image: {
290+
src: 'https://media.guim.co.uk/4612af5f4667888fa697139cf570b6373d93a710/2446_345_3218_1931/master/3218.jpg',
291+
altText: 'alt text',
292+
},
293+
format: {
294+
...cardProps.format,
295+
design: ArticleDesign.Standard,
296+
},
297+
},
298+
};
299+
300+
export const ImmersiveVideo: Story = {
301+
args: {
302+
aspectRatio: '5:3',
303+
mobileAspectRatio: '4:5',
304+
imageSize: 'feature-immersive',
305+
maxWidth: '940',
306+
isImmersive: true,
307+
format: {
308+
...cardProps.format,
309+
design: ArticleDesign.Video,
310+
},
311+
image: {
312+
src: 'https://media.guim.co.uk/f2aedd24e5414073a653f68112e0ad070c6f4a2b/254_0_7493_4500/master/7493.jpg',
313+
altText: 'alt text',
314+
},
315+
mainMedia: {
316+
type: 'Video',
317+
id: 'video-id',
318+
videoId: 'video-id',
319+
height: 1080,
320+
width: 1920,
321+
origin: 'origin',
322+
title: 'Video Title',
323+
duration: 120,
324+
expired: false,
325+
images: [
326+
{
327+
url: 'https://media.guim.co.uk/video-thumbnail.jpg',
328+
width: 1920,
247329
},
330+
],
331+
},
332+
},
333+
};
334+
335+
export const ImmersivePodcast: Story = {
336+
args: {
337+
aspectRatio: '5:3',
338+
mobileAspectRatio: '4:5',
339+
imageSize: 'feature-immersive',
340+
maxWidth: '940',
341+
isImmersive: true,
342+
format: {
343+
...cardProps.format,
344+
design: ArticleDesign.Audio,
345+
},
346+
image: {
347+
src: 'https://media.guim.co.uk/ecb7f0bebe473d6ef1375b5cb60b78f9466a5779/0_229_3435_2061/master/3435.jpg',
348+
altText: 'alt text',
349+
},
350+
mainMedia: {
351+
type: 'Audio',
352+
podcastImage: {
353+
src: 'https://media.guim.co.uk/be8830289638b0948b1ba4ade906e540554ada88/0_0_5000_3000/master/5000.jpg',
354+
altText: 'Football Weekly',
248355
},
249-
{
250-
...aBasicLink,
251-
headline: 'Headline 3',
252-
kickerText: 'Kicker',
253-
},
254-
],
356+
duration: '55:09',
357+
},
255358
},
256359
};
257360

258-
export const StandardImmersive: Story = {
361+
export const ImmersiveGallery: Story = {
259362
args: {
260363
aspectRatio: '5:3',
261364
mobileAspectRatio: '4:5',
262365
imageSize: 'feature-immersive',
263366
maxWidth: '940',
367+
isImmersive: true,
368+
format: {
369+
...cardProps.format,
370+
design: ArticleDesign.Gallery,
371+
},
372+
image: {
373+
src: 'https://media.guim.co.uk/7b500cfe9afe4e211ad771c86e66297c9c22993b/0_61_4801_2880/master/4801.jpg',
374+
altText: 'alt text',
375+
},
376+
mainMedia: {
377+
type: 'Gallery',
378+
count: '12',
379+
},
380+
},
381+
};
382+
383+
export const ImmersiveMediaCardWithSublinks: Story = {
384+
args: {
385+
aspectRatio: '5:3',
386+
mobileAspectRatio: '4:5',
387+
imageSize: 'feature-immersive',
388+
maxWidth: '940',
389+
isImmersive: true,
390+
format: {
391+
...cardProps.format,
392+
design: ArticleDesign.Gallery,
393+
},
394+
image: {
395+
src: 'https://media.guim.co.uk/7b500cfe9afe4e211ad771c86e66297c9c22993b/0_61_4801_2880/master/4801.jpg',
396+
altText: 'alt text',
397+
},
398+
mainMedia: {
399+
type: 'Gallery',
400+
count: '12',
401+
},
402+
supportingContent,
264403
},
265404
};

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -550,3 +550,18 @@ export const SecondaryContainerStandardCards: Story = {
550550
},
551551
},
552552
};
553+
554+
export const ContainerWithImmersiveCardInSplashAndNonSplash: Story = {
555+
name: 'Secondary container with standard cards',
556+
args: {
557+
frontSectionTitle: 'Secondary container standard cards',
558+
containerLevel: 'Secondary',
559+
groupedTrails: {
560+
...defaultGroupedTrails,
561+
splash: [
562+
{ ...splashCard, isImmersive: true, supportingContent: [] },
563+
],
564+
standard: [{ ...trails[0], isImmersive: true }],
565+
},
566+
},
567+
};

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,27 @@ const boostedCard = {
1313
} satisfies DCRFrontCard;
1414

1515
describe('FlexibleGeneral', () => {
16-
it('Should return a one card row layout if one standard card is provided', () => {
16+
it('Should return a one card half width row layout if one standard card is provided', () => {
1717
expect(decideCardPositions([standardCard])).toEqual([
1818
{
19-
layout: 'oneCard',
19+
layout: 'oneCardHalfWidth',
2020
cards: [standardCard],
2121
},
2222
]);
2323
});
24-
it('Should return a one card boosted row layout if one boosted card is provided', () => {
24+
it('Should return a one card full width row layout if one boosted card is provided', () => {
2525
expect(decideCardPositions([boostedCard])).toEqual([
26-
{ layout: 'oneCardBoosted', cards: [boostedCard] },
26+
{ layout: 'oneCardFullWidth', cards: [boostedCard] },
27+
]);
28+
});
29+
it('Should return a one card full width row layout if one immersive card is provided', () => {
30+
expect(
31+
decideCardPositions([{ ...standardCard, isImmersive: true }]),
32+
).toEqual([
33+
{
34+
layout: 'oneCardFullWidth',
35+
cards: [{ ...standardCard, isImmersive: true }],
36+
},
2737
]);
2838
});
2939
it('Should return a two card row layout if two standard cards are provided', () => {
@@ -32,14 +42,14 @@ describe('FlexibleGeneral', () => {
3242
]);
3343
});
3444

35-
it('Should return a one card row layout if one card without boost level is provided', () => {
45+
it('Should return a one card half width row layout if one card without boost level is provided', () => {
3646
const cardWithoutBoostLevel = {
3747
...standardCard,
3848
boostLevel: undefined,
3949
};
4050
expect(decideCardPositions([cardWithoutBoostLevel])).toEqual([
4151
{
42-
layout: 'oneCard',
52+
layout: 'oneCardHalfWidth',
4353
cards: [cardWithoutBoostLevel],
4454
},
4555
]);
@@ -68,9 +78,9 @@ describe('FlexibleGeneral', () => {
6878
standardCard,
6979
]),
7080
).toEqual([
71-
{ layout: 'oneCardBoosted', cards: [boostedCard] },
81+
{ layout: 'oneCardFullWidth', cards: [boostedCard] },
7282
{ layout: 'twoCard', cards: [standardCard, standardCard] },
73-
{ layout: 'oneCard', cards: [standardCard] },
83+
{ layout: 'oneCardHalfWidth', cards: [standardCard] },
7484
]);
7585
});
7686

@@ -83,8 +93,8 @@ describe('FlexibleGeneral', () => {
8393
standardCard,
8494
]),
8595
).toEqual([
86-
{ layout: 'oneCard', cards: [standardCard] },
87-
{ layout: 'oneCardBoosted', cards: [boostedCard] },
96+
{ layout: 'oneCardHalfWidth', cards: [standardCard] },
97+
{ layout: 'oneCardFullWidth', cards: [boostedCard] },
8898
{ layout: 'twoCard', cards: [standardCard, standardCard] },
8999
]);
90100
});

0 commit comments

Comments
 (0)