Add stories

Author: domlander

dotcom-rendering/fixtures/manual/trails.ts

@@ -605,6 +605,49 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 	},
 ];
 
+export const newsletterTrails: [DCRFrontCard, DCRFrontCard] = [
+	{
+		format: { design: 0, display: 0, theme: 0 },
+		dataLinkName: 'news | group-0 | card-@4',
+		url: '/global/2022/sep/20/sign-up-for-the-guide-newsletter-our-free-pop-culture-email',
+		headline: 'Sign up for a weekly dose of pop culture',
+		trailText:
+			'The best new music, film, TV, podcasts and more direct to your inbox, plus hidden gems and reader recommendations',
+		webPublicationDate: '2022-09-20T10:57:04.000Z',
+		kickerText: 'The Guide',
+		isNewsletter: true,
+		image: {
+			src: 'https://media.guim.co.uk/ce2e59cfa2ab7db34cba24adbf20910976e55604/0_55_501_401/master/501.jpg',
+			altText: 'The Guide Newsletter Design',
+		},
+		showQuotedHeadline: false,
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		isExternalLink: false,
+		showLivePlayable: false,
+		isImmersive: false,
+	},
+	{
+		format: { design: 0, display: 0, theme: 0 },
+		dataLinkName: 'news | group-0 | card-@2',
+		url: '/info/2024/oct/10/sign-up-for-the-filter-newsletter-our-free-weekly-buying-advice',
+		headline: 'Sign up our free weekly buying advice newsletter',
+		trailText:
+			'Get smart, sustainable shopping advice from the Filter team straight to your inbox, every Sunday<br><br>The Guardian’s journalism is independent. We will earn a commission if you buy something through an affiliate link.',
+		webPublicationDate: '2024-10-10T10:30:16.000Z',
+		kickerText: 'The Filter',
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		isNewsletter: true,
+		image: {
+			src: 'https://media.guim.co.uk/e5269c957a8e19da44d76b53f349b8d5a3b6a98f/0_0_5000_3000/master/5000.jpg',
+			altText: 'The Filter',
+		},
+		showQuotedHeadline: false,
+		isExternalLink: false,
+		showLivePlayable: false,
+		isImmersive: false,
+	},
+];
+
 export const loopVideoCard: DCRFrontCard = {
 	...defaultCardProps,
 	dataLinkName: 'news | group-0 | card-@2',

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

@@ -2,6 +2,12 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import { trails } from '../../fixtures/manual/highlights-trails';
+import {
+	audioTrails,
+	galleryTrails,
+	newsletterTrails,
+	videoTrails,
+} from '../../fixtures/manual/trails';
 import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { ScrollableMedium } from './ScrollableMedium.importable';
@@ -42,11 +48,17 @@ export default meta;
 
 type Story = StoryObj<typeof ScrollableMedium>;
 
-export const WithMultipleCards = {} satisfies Story;
+export const WithEightCards = {} satisfies Story;
 
-export const WithOneCard = {
+export const WithFourCards = {
 	args: {
-		trails: trails.slice(0, 1),
+		trails: trails.slice(0, 4),
+	},
+} satisfies Story;
+
+export const WithThreeCards = {
+	args: {
+		trails: trails.slice(0, 3),
 	},
 } satisfies Story;
 
@@ -56,15 +68,21 @@ export const WithTwoCards = {
 	},
 } satisfies Story;
 
-export const WithThreeCards = {
+export const WithOneCard = {
 	args: {
-		trails: trails.slice(0, 3),
+		trails: trails.slice(0, 1),
 	},
 } satisfies Story;
 
-export const WithFourCards = {
+export const Media = {
+	name: 'With Media Cards',
 	args: {
-		trails: trails.slice(0, 4),
+		trails: [
+			audioTrails[0],
+			videoTrails[0],
+			galleryTrails[0],
+			newsletterTrails[0],
+		],
 	},
 } satisfies Story;
 

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

@@ -2,6 +2,12 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import { trails } from '../../fixtures/manual/highlights-trails';
+import {
+	audioTrails,
+	galleryTrails,
+	newsletterTrails,
+	videoTrails,
+} from '../../fixtures/manual/trails';
 import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { ScrollableSmall } from './ScrollableSmall.importable';
@@ -66,6 +72,18 @@ export const WithOneCard = {
 	},
 };
 
+export const Media = {
+	name: 'With Media Cards',
+	args: {
+		trails: [
+			audioTrails[0],
+			videoTrails[0],
+			galleryTrails[0],
+			newsletterTrails[0],
+		],
+	},
+} satisfies Story;
+
 export const WithPrimaryContainer = {
 	render: (args) => (
 		<FrontSection

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

@@ -1,7 +1,13 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
+import {
+	audioTrails,
+	galleryTrails,
+	newsletterTrails,
+	trails,
+	videoTrails,
+} from '../../fixtures/manual/trails';
 import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { StaticMediumFour } from './StaticMediumFour';
@@ -42,36 +48,45 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Four = {
-	name: 'With four cards',
+	name: 'With Four Cards',
 	args: {
-		trails: trails.slice(0, 4).map((trail, index) => ({
-			...trail,
-			isNewsletter: index === 3, // Check that we see the Newsletter pill on a card.
-		})),
+		trails: trails.slice(0, 4),
 	},
 };
 
 export const Three: Story = {
-	name: 'With three cards',
+	name: 'With Three Cards',
 	args: {
 		trails: trails.slice(0, 3),
 	},
 };
 
 export const Two: Story = {
-	name: 'With two cards',
+	name: 'With Two Cards',
 	args: {
 		trails: trails.slice(0, 2),
 	},
 };
 
 export const One: Story = {
-	name: 'With one card',
+	name: 'With One Card',
 	args: {
 		trails: trails.slice(0, 1),
 	},
 };
 
+export const Media = {
+	name: 'With Media Cards',
+	args: {
+		trails: [
+			audioTrails[0],
+			videoTrails[0],
+			galleryTrails[0],
+			newsletterTrails[0],
+		],
+	},
+} satisfies Story;
+
 const containerPalettes = [
 	'InvestigationPalette',
 	'LongRunningPalette',