Update stories to use satisfies for typing

guardian · Nov 1, 2024 · 159b278 · 159b278
1 parent dd89ae6
commit 159b278
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/dotcom-rendering/src/components/ScrollableMedium.stories.tsx b/dotcom-rendering/src/components/ScrollableMedium.stories.tsx
@@ -6,7 +6,7 @@ import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { ScrollableMedium } from './ScrollableMedium.importable';
 
-export default {
+const meta = {
 	title: 'Components/ScrollableMedium',
 	component: ScrollableMedium,
 	parameters: {
@@ -36,35 +36,37 @@ export default {
 			<ScrollableMedium {...args} />
 		</FrontSection>
 	),
-} as Meta<typeof ScrollableMedium>;
+} satisfies Meta<typeof ScrollableMedium>;
+
+export default meta;
 
 type Story = StoryObj<typeof ScrollableMedium>;
 
-export const WithMultipleCards: Story = {};
+export const WithMultipleCards = {} satisfies Story;
 
-export const WithOneCard: Story = {
+export const WithOneCard = {
 	args: {
 		trails: trails.slice(0, 1),
 	},
-};
+} satisfies Story;
 
-export const WithTwoCards: Story = {
+export const WithTwoCards = {
 	args: {
 		trails: trails.slice(0, 2),
 	},
-};
+} satisfies Story;
 
-export const WithThreeCards: Story = {
+export const WithThreeCards = {
 	args: {
 		trails: trails.slice(0, 3),
 	},
-};
+} satisfies Story;
 
-export const WithFourCards: Story = {
+export const WithFourCards = {
 	args: {
 		trails: trails.slice(0, 4),
 	},
-};
+} satisfies Story;
 
 const containerPalettes = [
 	'InvestigationPalette',
@@ -82,7 +84,7 @@ const containerPalettes = [
 	'MediaPalette' | 'PodcastPalette'
 >[];
 
-export const WithSpecialPaletteVariations: Story = {
+export const WithSpecialPaletteVariations = {
 	render: (args) => (
 		<>
 			{containerPalettes.map((containerPalette) => (
@@ -102,4 +104,4 @@ export const WithSpecialPaletteVariations: Story = {
 			))}
 		</>
 	),
-};
+} satisfies Story;
diff --git a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
@@ -6,7 +6,7 @@ import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { ScrollableSmall } from './ScrollableSmall.importable';
 
-export default {
+const meta = {
 	title: 'Components/ScrollableSmall',
 	component: ScrollableSmall,
 	parameters: {
@@ -36,35 +36,37 @@ export default {
 			<ScrollableSmall {...args} />
 		</FrontSection>
 	),
-} as Meta<typeof ScrollableSmall>;
+} satisfies Meta<typeof ScrollableSmall>;
+
+export default meta;
 
 type Story = StoryObj<typeof ScrollableSmall>;
 
-export const WithMultipleCards: Story = {};
+export const WithMultipleCards = {} satisfies Story;
 
-export const WithOneCard: Story = {
+export const WithOneCard = {
 	args: {
 		trails: trails.slice(0, 1),
 	},
-};
+} satisfies Story;
 
-export const WithTwoCards: Story = {
+export const WithTwoCards = {
 	args: {
 		trails: trails.slice(0, 2),
 	},
-};
+} satisfies Story;
 
-export const WithThreeCards: Story = {
+export const WithThreeCards = {
 	args: {
 		trails: trails.slice(0, 3),
 	},
-};
+} satisfies Story;
 
-export const WithFourCards: Story = {
+export const WithFourCards = {
 	args: {
 		trails: trails.slice(0, 4),
 	},
-};
+} satisfies Story;
 
 const containerPalettes = [
 	'InvestigationPalette',
@@ -82,7 +84,7 @@ const containerPalettes = [
 	'MediaPalette' | 'PodcastPalette'
 >[];
 
-export const WithSpecialPaletteVariations: Story = {
+export const WithSpecialPaletteVariations = {
 	render: (args) => (
 		<>
 			{containerPalettes.map((containerPalette) => (
@@ -102,4 +104,4 @@ export const WithSpecialPaletteVariations: Story = {
 			))}
 		</>
 	),
-};
+} satisfies Story;