Merge pull request #1232 from guardian/ahe/storybook-csf3

Storybook: Move to Component Story Format 3
guardian · Nov 3, 2023 · 68c643f · 68c643f
2 parents c28f320 + 3ae9544
commit 68c643f
Show file tree

Hide file tree

Showing 40 changed files with 1,160 additions and 1,017 deletions.
diff --git a/client/components/helpCentre/HelpCentre.stories.tsx b/client/components/helpCentre/HelpCentre.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { rest } from 'msw';
 import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator';
 import { HelpCenterContentWrapper } from './HelpCenterContentWrapper';
@@ -13,38 +13,43 @@ export default {
 	},
 } as Meta<typeof HelpCentre>;
 
-export const Default: StoryFn<typeof HelpCentre> = () => {
-	return (
-		<HelpCenterContentWrapper knownIssues={[]}>
-			<HelpCentre />
-		</HelpCenterContentWrapper>
-	);
-};
+export const Default: StoryObj<typeof HelpCentre> = {
+	render: () => {
+		return (
+			<HelpCenterContentWrapper knownIssues={[]}>
+				<HelpCentre />
+			</HelpCenterContentWrapper>
+		);
+	},
 
-Default.parameters = {
-	msw: [
-		rest.get('/api/known-issues/', (_req, res, ctx) => {
-			return res(ctx.json([]));
-		}),
-	],
+	parameters: {
+		msw: [
+			rest.get('/api/known-issues/', (_req, res, ctx) => {
+				return res(ctx.json([]));
+			}),
+		],
+	},
 };
 
-export const WithKnownIssue: StoryFn<typeof HelpCentre> = () => {
-	const knownIssue = [
-		{
-			date: '20 Jan 2022 12:00',
-			message: 'Live Chat is currently unavailable.',
-		},
-	];
+export const WithKnownIssue: StoryObj<typeof HelpCentre> = {
+	render: () => {
+		const knownIssue = [
+			{
+				date: '20 Jan 2022 12:00',
+				message: 'Live Chat is currently unavailable.',
+			},
+		];
 
-	return (
-		<HelpCenterContentWrapper knownIssues={knownIssue}>
-			<HelpCentre />
-		</HelpCenterContentWrapper>
-	);
-};
-WithKnownIssue.parameters = {
-	chromatic: {
-		viewports: [320, 1300],
+		return (
+			<HelpCenterContentWrapper knownIssues={knownIssue}>
+				<HelpCentre />
+			</HelpCenterContentWrapper>
+		);
+	},
+
+	parameters: {
+		chromatic: {
+			viewports: [320, 1300],
+		},
 	},
 };
diff --git a/client/components/helpCentre/HelpCentreArticle.stories.tsx b/client/components/helpCentre/HelpCentreArticle.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { rest } from 'msw';
 import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator';
 import { SectionContent } from '../shared/SectionContent';
@@ -40,31 +40,33 @@ const articleContent = {
 	],
 };
 
-export const Default: StoryFn<typeof HelpCentreArticle> = () => {
-	return (
-		<>
-			<SectionHeader title="How can we help you?" pageHasNav={true} />
-			<SectionContent hasNav={true}>
-				<HelpCentreArticle />
-			</SectionContent>
-		</>
-	);
-};
+export const Default: StoryObj<typeof HelpCentreArticle> = {
+	render: () => {
+		return (
+			<>
+				<SectionHeader title="How can we help you?" pageHasNav={true} />
+				<SectionContent hasNav={true}>
+					<HelpCentreArticle />
+				</SectionContent>
+			</>
+		);
+	},
 
-Default.parameters = {
-	msw: [
-		rest.get('/api/known-issues/', (_req, res, ctx) => {
-			return res(ctx.json([]));
-		}),
-		rest.get(
-			'/api/help-centre/article/i-need-to-pause-my-delivery',
-			(_req, res, ctx) => {
-				return res(ctx.json(articleContent));
-			},
-		),
-	],
-	reactRouter: {
-		location: '/article/i-need-to-pause-my-delivery',
-		path: '/article/:articleCode',
+	parameters: {
+		msw: [
+			rest.get('/api/known-issues/', (_req, res, ctx) => {
+				return res(ctx.json([]));
+			}),
+			rest.get(
+				'/api/help-centre/article/i-need-to-pause-my-delivery',
+				(_req, res, ctx) => {
+					return res(ctx.json(articleContent));
+				},
+			),
+		],
+		reactRouter: {
+			location: '/article/i-need-to-pause-my-delivery',
+			path: '/article/:articleCode',
+		},
 	},
 };
diff --git a/client/components/helpCentre/HelpCentrePhoneNumbers.stories.tsx b/client/components/helpCentre/HelpCentrePhoneNumbers.stories.tsx
@@ -1,5 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { HelpCentrePhoneNumbersProps } from './HelpCentrePhoneNumbers';
+import type { Meta } from '@storybook/react';
 import { HelpCentrePhoneNumbers } from './HelpCentrePhoneNumbers';
 
 export default {
@@ -15,13 +14,10 @@ export default {
 	},
 } as Meta<typeof HelpCentrePhoneNumbers>;
 
-const Template: StoryFn<typeof HelpCentrePhoneNumbers> = (
-	args: HelpCentrePhoneNumbersProps,
-) => <HelpCentrePhoneNumbers {...args} />;
+export const Default = {};
 
-export const Default = Template.bind({});
-
-export const CompactLayout = Template.bind({});
-CompactLayout.args = {
-	compactLayout: true,
+export const CompactLayout = {
+	args: {
+		compactLayout: true,
+	},
 };
diff --git a/client/components/helpCentre/HelpCentreTopic.stories.tsx b/client/components/helpCentre/HelpCentreTopic.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { rest } from 'msw';
 import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator';
 import { SectionContent } from '../shared/SectionContent';
@@ -33,25 +33,27 @@ const topicContent = {
 	],
 };
 
-export const Default: StoryFn<typeof HelpCentreTopic> = () => {
-	return (
-		<>
-			<SectionHeader title="How can we help you?" pageHasNav={true} />
-			<SectionContent hasNav={true}>
-				<HelpCentreTopic />
-			</SectionContent>
-		</>
-	);
-};
+export const Default: StoryObj<typeof HelpCentreTopic> = {
+	render: () => {
+		return (
+			<>
+				<SectionHeader title="How can we help you?" pageHasNav={true} />
+				<SectionContent hasNav={true}>
+					<HelpCentreTopic />
+				</SectionContent>
+			</>
+		);
+	},
 
-Default.parameters = {
-	msw: [
-		rest.get('/api/help-centre/topic/delivery', (_req, res, ctx) => {
-			return res(ctx.json(topicContent));
-		}),
-	],
-	reactRouter: {
-		location: '/topic/delivery',
-		path: '/topic/:topicCode',
+	parameters: {
+		msw: [
+			rest.get('/api/help-centre/topic/delivery', (_req, res, ctx) => {
+				return res(ctx.json(topicContent));
+			}),
+		],
+		reactRouter: {
+			location: '/topic/delivery',
+			path: '/topic/:topicCode',
+		},
 	},
 };
diff --git a/client/components/helpCentre/contactUs/ContactUs.stories.tsx b/client/components/helpCentre/contactUs/ContactUs.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { rest } from 'msw';
 import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator';
 import { SectionContent } from '../../shared/SectionContent';
@@ -15,24 +15,26 @@ export default {
 	},
 } as Meta<typeof ContactUs>;
 
-export const Default: StoryFn<typeof ContactUs> = () => {
-	return (
-		<>
-			<SectionHeader title="Need to contact us?" />
-			<KnownIssues issues={[]} />
-			<SectionContent>
-				<ContactUs />
-			</SectionContent>
-		</>
-	);
-};
+export const Default: StoryObj<typeof ContactUs> = {
+	render: () => {
+		return (
+			<>
+				<SectionHeader title="Need to contact us?" />
+				<KnownIssues issues={[]} />
+				<SectionContent>
+					<ContactUs />
+				</SectionContent>
+			</>
+		);
+	},
 
-Default.parameters = {
-	msw: [
-		rest.get('/api/known-issues/', (_req, res, ctx) => {
-			return res(ctx.json([]));
-		}),
-	],
+	parameters: {
+		msw: [
+			rest.get('/api/known-issues/', (_req, res, ctx) => {
+				return res(ctx.json([]));
+			}),
+		],
+	},
 };
 
 const knownIssue = [
@@ -42,38 +44,43 @@ const knownIssue = [
 	},
 ];
 
-export const WithKnownIssue: StoryFn<typeof ContactUs> = () => {
-	return (
+export const WithKnownIssue: StoryObj<typeof ContactUs> = {
+	render: () => {
+		return (
+			<>
+				<SectionHeader title="Need to contact us?" />
+				<KnownIssues issues={knownIssue} />
+				<SectionContent>
+					<ContactUs />
+				</SectionContent>
+			</>
+		);
+	},
+
+	parameters: {
+		msw: [
+			rest.get('/api/known-issues/', (_req, res, ctx) => {
+				return res(ctx.json(knownIssue));
+			}),
+		],
+	},
+};
+
+export const TopicSelected: StoryObj<typeof ContactUs> = {
+	render: () => (
 		<>
 			<SectionHeader title="Need to contact us?" />
-			<KnownIssues issues={knownIssue} />
+			<KnownIssues issues={[]} />
 			<SectionContent>
 				<ContactUs />
 			</SectionContent>
 		</>
-	);
-};
+	),
 
-WithKnownIssue.parameters = {
-	msw: [
-		rest.get('/api/known-issues/', (_req, res, ctx) => {
-			return res(ctx.json(knownIssue));
-		}),
-	],
-};
-
-export const TopicSelected: StoryFn<typeof ContactUs> = () => (
-	<>
-		<SectionHeader title="Need to contact us?" />
-		<KnownIssues issues={[]} />
-		<SectionContent>
-			<ContactUs />
-		</SectionContent>
-	</>
-);
-TopicSelected.parameters = {
-	reactRouter: {
-		location: '/contact-us/billing',
-		path: '/contact-us/:urlTopicId',
+	parameters: {
+		reactRouter: {
+			location: '/contact-us/billing',
+			path: '/contact-us/:urlTopicId',
+		},
 	},
 };