apply new storybook practices

guardian · Aug 16, 2021 · 705b302 · 705b302
1 parent 1239439
commit 705b302
Show file tree

Hide file tree

Showing 2 changed files with 156 additions and 203 deletions.
diff --git a/src/core/components/radio/Radio.stories.tsx b/src/core/components/radio/Radio.stories.tsx
@@ -12,130 +12,113 @@ import { asPlayground, asChromaticStory } from '../../../lib/story-intents';
 export default {
 	title: 'Source/src-radio/Radio',
 	component: Radio,
-};
-
-const Template: Story = (args: RadioProps) => <Radio {...args} />;
-Template.args = {
-	label: 'Red',
-	value: 'red',
-	supporting: '',
-	checked: true,
-};
-
-export const Playground = Template.bind({});
-Playground.argTypes = {
-	label: {
-		control: {
-			type: 'text',
+	argTypes: {
+		label: {
+			control: {
+				type: 'text',
+			},
 		},
-	},
-	supporting: {
-		control: {
-			type: 'text',
+		supporting: {
+			control: {
+				type: 'text',
+			},
+		},
+		cssOverrides: {
+			control: null,
 		},
 	},
-	cssOverrides: {
-		control: null,
+	args: {
+		label: 'Red',
+		value: 'red',
+		supporting: '',
+		checked: true,
 	},
 };
-Playground.args = {
-	...Template.args,
-};
+
+const Template: Story = (args: RadioProps) => <Radio {...args} />;
+
+// *****************************************************************************
+
+export const Playground = Template.bind({});
 asPlayground(Playground);
 
-export const Default = Template.bind({});
-Default.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-Default.args = {
-	...Template.args,
-};
-asChromaticStory(Default);
+// *****************************************************************************
 
-export const DefaultBrand = (args: RadioProps) => (
-	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
+export const DefaultLightTheme = Template.bind({});
+asChromaticStory(DefaultLightTheme);
+
+// *****************************************************************************
+
+export const DefaultBrandTheme = (args: RadioProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
 );
-DefaultBrand.parameters = {
-	controls: {
-		disabled: true,
-	},
+DefaultBrandTheme.parameters = {
 	backgrounds: {
 		default: 'brandBackground.primary',
 	},
 };
-DefaultBrand.args = {
-	...Template.args,
-};
-asChromaticStory(DefaultBrand);
+asChromaticStory(DefaultBrandTheme);
 
-export const SupportingText = Template.bind({});
-SupportingText.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-SupportingText.args = {
-	...Template.args,
+// *****************************************************************************
+
+export const SupportingTextLightTheme = Template.bind({});
+SupportingTextLightTheme.args = {
 	supporting: '#ff0000',
 };
-asChromaticStory(SupportingText);
+asChromaticStory(SupportingTextLightTheme);
+
+// *****************************************************************************
 
-export const SupportingTextBrand: Story = (args: RadioProps) => (
-	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
+export const SupportingTextBrandTheme: Story = (args: RadioProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
 );
-SupportingTextBrand.parameters = {
-	controls: {
-		disabled: true,
-	},
+SupportingTextBrandTheme.parameters = {
 	backgrounds: {
 		default: 'brandBackground.primary',
 	},
 };
-SupportingTextBrand.args = {
-	...Template.args,
+SupportingTextBrandTheme.args = {
 	supporting: '#ff0000',
 };
-asChromaticStory(SupportingTextBrand);
+asChromaticStory(SupportingTextBrandTheme);
 
-export const SupportingTextOnly = Template.bind({});
-SupportingTextOnly.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-SupportingTextOnly.args = {
-	...Template.args,
+// *****************************************************************************
+
+export const SupportingTextOnlyLightTheme = Template.bind({});
+SupportingTextOnlyLightTheme.args = {
 	supporting: '#ff0000',
 	label: null,
 };
-asChromaticStory(SupportingTextOnly);
+asChromaticStory(SupportingTextOnlyLightTheme);
 
-export const SupportingTextOnlyBrand = (args: RadioProps) => (
-	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
+// *****************************************************************************
+
+export const SupportingTextOnlyBrandTheme = (args: RadioProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
 );
-SupportingTextOnlyBrand.story = {
+SupportingTextOnlyBrandTheme.story = {
 	parameters: {
-		controls: {
-			disabled: true,
-		},
 		backgrounds: {
 			default: 'brandBackground.primary',
 		},
 	},
 };
-SupportingTextOnlyBrand.args = {
-	...Template.args,
+SupportingTextOnlyBrandTheme.args = {
 	supporting: '#ff0000',
 	label: null,
 };
-asChromaticStory(SupportingTextOnlyBrand);
+asChromaticStory(SupportingTextOnlyBrandTheme);
 
-export const Unlabelled = Template.bind({});
-Unlabelled.parameters = {
-	controls: {
-		disabled: true,
-	},
+// *****************************************************************************
+
+export const UnlabelledLightTheme = Template.bind({});
+UnlabelledLightTheme.args = {
+	label: undefined,
 };
-asChromaticStory(Unlabelled);
+asChromaticStory(UnlabelledLightTheme);