From 705b302aac28c98be7c451c5b4c7de25b00ee134 Mon Sep 17 00:00:00 2001
From: Simon Adcock <simonadcock2@gmail.com>
Date: Mon, 16 Aug 2021 12:00:50 +0100
Subject: [PATCH] apply new storybook practices

---
 src/core/components/radio/Radio.stories.tsx   | 155 ++++++-------
 .../components/radio/RadioGroup.stories.tsx   | 204 ++++++++----------
 2 files changed, 156 insertions(+), 203 deletions(-)

diff --git a/src/core/components/radio/Radio.stories.tsx b/src/core/components/radio/Radio.stories.tsx
index c34a3fafc..7af4f80a6 100644
--- 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);
diff --git a/src/core/components/radio/RadioGroup.stories.tsx b/src/core/components/radio/RadioGroup.stories.tsx
index f6fd6806f..a948480dd 100644
--- a/src/core/components/radio/RadioGroup.stories.tsx
+++ b/src/core/components/radio/RadioGroup.stories.tsx
@@ -2,7 +2,7 @@ import { RadioGroup, RadioGroupProps } from './RadioGroup';
 import { Radio } from './Radio';
 import { radioBrand } from './index';
 import { ThemeProvider } from '@emotion/react';
-import { Default as DefaultRadio } from './Radio.stories';
+import RadioStories from './Radio.stories';
 import type { Story } from '../../../@types/storybook-emotion-10-fixes';
 import { asPlayground, asChromaticStory } from '../../../lib/story-intents';
 // These types are the right types, but don't work with Storybook v6 which uses Emotion v10
@@ -12,6 +12,25 @@ export default {
 	title: 'Source/src-radio/RadioGroup',
 	component: RadioGroup,
 	subcomponents: { Radio },
+	args: {
+		name: 'colours',
+		label: 'Select your preferred colour',
+		supporting: '',
+		hideLabel: false,
+		orientation: 'vertical',
+		error: '',
+	},
+	argTypes: {
+		// Override the control so that users can try entering a string in the Storybook canvas
+		supporting: {
+			control: {
+				type: 'text',
+			},
+		},
+		id: { control: null },
+		className: { control: null },
+		cssOverrides: { control: null },
+	},
 };
 
 const Image = () => (
@@ -23,164 +42,115 @@ const Image = () => (
 	</div>
 );
 
-const Template: Story = (args: RadioGroupProps) => <RadioGroup {...args} />;
-Template.args = {
-	name: 'colours',
-	label: 'Select your preferred colour',
-	supporting: '',
-	hideLabel: false,
-	orientation: 'vertical',
-	error: '',
-	children: [<Radio {...DefaultRadio.args} key="radio-1" />],
-};
+const Template: Story = (args: RadioGroupProps) => (
+	<RadioGroup {...args}>
+		<Radio {...RadioStories.args} key="radio-1" />
+	</RadioGroup>
+);
+
+// *****************************************************************************
 
 export const Playground = Template.bind({});
-Playground.args = {
-	...Template.args,
-};
-Playground.argTypes = {
-	// Override the control so that users can try entering a string in the Storybook canvas
-	supporting: {
-		control: {
-			type: 'text',
-		},
-	},
-	id: { control: null },
-	className: { control: null },
-	cssOverrides: { control: null },
-};
 asPlayground(Playground);
 
-export const Default = Template.bind({});
-Default.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-Default.args = {
-	...Template.args,
-};
-asChromaticStory(Default);
+// *****************************************************************************
+
+export const DefaultLightTheme = Template.bind({});
+asChromaticStory(DefaultLightTheme);
+
+// *****************************************************************************
 
-export const DefaultBrand: Story = (args: RadioGroupProps) => (
-	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
+export const DefaultBrandTheme: Story = (args: RadioGroupProps) => (
+	<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 Horizontal = Template.bind({});
-Horizontal.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-Horizontal.args = {
-	...Template.args,
+// *****************************************************************************
+
+export const HorizontalLightTheme = Template.bind({});
+HorizontalLightTheme.args = {
 	orientation: 'horizontal',
 };
-asChromaticStory(Horizontal);
+asChromaticStory(HorizontalLightTheme);
 
-export const VisuallyHideLegend = Template.bind({});
-VisuallyHideLegend.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-VisuallyHideLegend.args = {
-	...Template.args,
+// *****************************************************************************
+
+export const VisuallyHideLegendLightTheme = Template.bind({});
+VisuallyHideLegendLightTheme.args = {
 	hideLabel: true,
 };
-asChromaticStory(VisuallyHideLegend);
+asChromaticStory(VisuallyHideLegendLightTheme);
 
-export const SupportingText = Template.bind({});
-SupportingText.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-SupportingText.args = {
-	...Template.args,
+// *****************************************************************************
+
+export const SupportingTextLightTheme = Template.bind({});
+SupportingTextLightTheme.args = {
 	supporting: 'You can always change it later',
 };
-asChromaticStory(SupportingText);
+asChromaticStory(SupportingTextLightTheme);
+
+// *****************************************************************************
 
-export const SupportingTextBrand: Story = (args: RadioGroupProps) => (
-	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
+export const SupportingTextBrandTheme: Story = (args: RadioGroupProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
 );
-SupportingTextBrand.parameters = {
-	controls: {
-		disabled: true,
-	},
+SupportingTextBrandTheme.parameters = {
 	backgrounds: {
 		default: 'brandBackground.primary',
 	},
 };
-SupportingTextBrand.args = {
-	...Template.args,
+SupportingTextBrandTheme.args = {
 	supporting: 'You can always change it later',
 };
-asChromaticStory(SupportingTextBrand);
+asChromaticStory(SupportingTextBrandTheme);
 
-export const SupportingMedia = Template.bind({});
-SupportingMedia.args = {
-	...Template.args,
+// *****************************************************************************
+
+export const SupportingMediaLightTheme = Template.bind({});
+SupportingMediaLightTheme.args = {
 	supporting: <Image />,
 };
-SupportingMedia.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-asChromaticStory(SupportingMedia);
+asChromaticStory(SupportingMediaLightTheme);
+
+// *****************************************************************************
 
-export const Error = Template.bind({});
-Error.args = {
-	...Template.args,
+export const ErrorLightTheme = Template.bind({});
+ErrorLightTheme.args = {
 	error: 'Please select a colour',
 };
-Error.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-asChromaticStory(Error);
+asChromaticStory(ErrorLightTheme);
+
+// *****************************************************************************
 
-export const ErrorBrand: Story = (args: RadioGroupProps) => (
-	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
+export const ErrorBrandTheme: Story = (args: RadioGroupProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
 );
-ErrorBrand.args = {
-	...Template.args,
+ErrorBrandTheme.args = {
 	error: 'Please select a colour',
 };
-ErrorBrand.parameters = {
-	controls: {
-		disabled: true,
-	},
+ErrorBrandTheme.parameters = {
 	backgrounds: {
 		default: 'brandBackground.primary',
 	},
 };
-asChromaticStory(ErrorBrand);
+asChromaticStory(ErrorBrandTheme);
+
+// *****************************************************************************
 
-export const SupportingMediaWithError = Template.bind({});
-SupportingMediaWithError.args = {
-	...Template.args,
+export const SupportingMediaWithErrorLightTheme = Template.bind({});
+SupportingMediaWithErrorLightTheme.args = {
 	error: 'Please select a colour',
 	supporting: <Image />,
 };
-SupportingMediaWithError.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-asChromaticStory(SupportingMediaWithError);
+asChromaticStory(SupportingMediaWithErrorLightTheme);