Merge pull request #13707 from guardian/doml/feature-card-podcast-blur

Feature cards: Reinstate podcast image above blur

Author: domlander

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

@@ -111,6 +111,18 @@ type Story = StoryObj<typeof meta>;
 
 export const Standard: Story = {};
 
+export const Immersive: Story = {
+	args: {
+		aspectRatio: '5:3',
+		mobileAspectRatio: '4:5',
+		imageSize: 'feature-immersive',
+		maxWidth: '940',
+		isImmersive: true,
+		trailText:
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+	},
+};
+
 export const Review: Story = {
 	args: {
 		image: {
@@ -125,6 +137,13 @@ export const Review: Story = {
 	},
 };
 
+export const ReviewImmersive: Story = {
+	args: {
+		...Review.args,
+		...Immersive.args,
+	},
+};
+
 export const SportLiveBlog: Story = {
 	args: {
 		image: {
@@ -141,6 +160,13 @@ export const SportLiveBlog: Story = {
 	},
 };
 
+export const SportLiveBlogImmersive: Story = {
+	args: {
+		...SportLiveBlog.args,
+		...Immersive.args,
+	},
+};
+
 export const Opinion: Story = {
 	args: {
 		image: {
@@ -152,6 +178,13 @@ export const Opinion: Story = {
 	},
 };
 
+export const OpinionImmersive: Story = {
+	args: {
+		...Opinion.args,
+		...Immersive.args,
+	},
+};
+
 export const Podcast: Story = {
 	args: {
 		format: {
@@ -173,6 +206,13 @@ export const Podcast: Story = {
 	},
 };
 
+export const PodcastImmersive: Story = {
+	args: {
+		...Podcast.args,
+		...Immersive.args,
+	},
+};
+
 export const Gallery: Story = {
 	args: {
 		format: {
@@ -190,6 +230,13 @@ export const Gallery: Story = {
 	},
 };
 
+export const GalleryImmersive: Story = {
+	args: {
+		...Gallery.args,
+		...Immersive.args,
+	},
+};
+
 // A video article
 export const Video: Story = {
 	args: {
@@ -221,6 +268,13 @@ export const Video: Story = {
 	},
 };
 
+export const VideoImmersive: Story = {
+	args: {
+		...Video.args,
+		...Immersive.args,
+	},
+};
+
 // A standard (non-video) article with a video main media
 export const VideoMainMedia: Story = {
 	args: {
@@ -236,6 +290,13 @@ export const VideoMainMedia: Story = {
 	},
 };
 
+export const VideoMainMediaImmersive: Story = {
+	args: {
+		...VideoMainMedia.args,
+		...Immersive.args,
+	},
+};
+
 export const WithTrailText: Story = {
 	args: {
 		kickerText: undefined,
@@ -251,154 +312,22 @@ export const WithTrailText: Story = {
 	},
 };
 
-export const WithSublinks: Story = {
+export const WithTrailTextImmersive: Story = {
 	args: {
-		supportingContent,
+		...WithTrailText.args,
+		...Immersive.args,
 	},
 };
 
-export const Immersive: Story = {
-	args: {
-		aspectRatio: '5:3',
-		mobileAspectRatio: '4:5',
-		imageSize: 'feature-immersive',
-		maxWidth: '940',
-		isImmersive: true,
-	},
-};
-
-export const ImmersiveWithSublinks: Story = {
+export const WithSublinks: Story = {
 	args: {
-		aspectRatio: '5:3',
-		mobileAspectRatio: '4:5',
-		imageSize: 'feature-immersive',
-		maxWidth: '940',
-		isImmersive: true,
 		supportingContent,
 	},
 };
-// A standard (non-video) article with a video main media
-export const ImmersiveVideoMainMedia: Story = {
-	args: {
-		aspectRatio: '5:3',
-		mobileAspectRatio: '4:5',
-		imageSize: 'feature-immersive',
-		maxWidth: '940',
-		isImmersive: true,
-		...Video.args,
-		image: {
-			src: 'https://media.guim.co.uk/4612af5f4667888fa697139cf570b6373d93a710/2446_345_3218_1931/master/3218.jpg',
-			altText: 'alt text',
-		},
-		format: {
-			...cardProps.format,
-			design: ArticleDesign.Standard,
-		},
-	},
-};
-
-export const ImmersiveVideo: Story = {
-	args: {
-		aspectRatio: '5:3',
-		mobileAspectRatio: '4:5',
-		imageSize: 'feature-immersive',
-		maxWidth: '940',
-		isImmersive: true,
-		format: {
-			...cardProps.format,
-			design: ArticleDesign.Video,
-		},
-		image: {
-			src: 'https://media.guim.co.uk/f2aedd24e5414073a653f68112e0ad070c6f4a2b/254_0_7493_4500/master/7493.jpg',
-			altText: 'alt text',
-		},
-		mainMedia: {
-			type: 'Video',
-			id: 'video-id',
-			videoId: 'video-id',
-			height: 1080,
-			width: 1920,
-			origin: 'origin',
-			title: 'Video Title',
-			duration: 120,
-			expired: false,
-			images: [
-				{
-					url: 'https://media.guim.co.uk/video-thumbnail.jpg',
-					width: 1920,
-				},
-			],
-		},
-	},
-};
 
-export const ImmersivePodcast: Story = {
+export const WithSublinksImmersive: Story = {
 	args: {
-		aspectRatio: '5:3',
-		mobileAspectRatio: '4:5',
-		imageSize: 'feature-immersive',
-		maxWidth: '940',
-		isImmersive: true,
-		format: {
-			...cardProps.format,
-			design: ArticleDesign.Audio,
-		},
-		image: {
-			src: 'https://media.guim.co.uk/ecb7f0bebe473d6ef1375b5cb60b78f9466a5779/0_229_3435_2061/master/3435.jpg',
-			altText: 'alt text',
-		},
-		mainMedia: {
-			type: 'Audio',
-			podcastImage: {
-				src: 'https://media.guim.co.uk/be8830289638b0948b1ba4ade906e540554ada88/0_0_5000_3000/master/5000.jpg',
-				altText: 'Football Weekly',
-			},
-			duration: '55:09',
-		},
-	},
-};
-
-export const ImmersiveGallery: Story = {
-	args: {
-		aspectRatio: '5:3',
-		mobileAspectRatio: '4:5',
-		imageSize: 'feature-immersive',
-		maxWidth: '940',
-		isImmersive: true,
-		format: {
-			...cardProps.format,
-			design: ArticleDesign.Gallery,
-		},
-		image: {
-			src: 'https://media.guim.co.uk/7b500cfe9afe4e211ad771c86e66297c9c22993b/0_61_4801_2880/master/4801.jpg',
-			altText: 'alt text',
-		},
-		mainMedia: {
-			type: 'Gallery',
-			count: '12',
-		},
-	},
-};
-
-export const ImmersiveMediaCardWithSublinks: Story = {
-	args: {
-		aspectRatio: '5:3',
-		mobileAspectRatio: '4:5',
-		imageSize: 'feature-immersive',
-		maxWidth: '940',
-		isImmersive: true,
-		format: {
-			...cardProps.format,
-			design: ArticleDesign.Gallery,
-		},
-		image: {
-			src: 'https://media.guim.co.uk/7b500cfe9afe4e211ad771c86e66297c9c22993b/0_61_4801_2880/master/4801.jpg',
-			altText: 'alt text',
-		},
-		mainMedia: {
-			type: 'Gallery',
-			count: '12',
-		},
-		supportingContent,
+		...WithSublinks.args,
+		...Immersive.args,
 	},
 };