use story intents in radio stories

guardian · Aug 16, 2021 · 1239439 · 1239439
1 parent 67a3194
commit 1239439
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 73 deletions.
diff --git a/src/core/components/radio/Radio.stories.tsx b/src/core/components/radio/Radio.stories.tsx
@@ -4,6 +4,8 @@ import type { RadioProps } from './Radio';
 import { radioBrand } from './index';
 import { ThemeProvider } from '@emotion/react';
 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
 // import type { Args, Story } from '@storybook/react';
 
@@ -39,6 +41,7 @@ Playground.argTypes = {
 Playground.args = {
 	...Template.args,
 };
+asPlayground(Playground);
 
 export const Default = Template.bind({});
 Default.parameters = {
@@ -49,6 +52,8 @@ Default.parameters = {
 Default.args = {
 	...Template.args,
 };
+asChromaticStory(Default);
+
 export const DefaultBrand = (args: RadioProps) => (
 	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
 );
@@ -63,17 +68,19 @@ DefaultBrand.parameters = {
 DefaultBrand.args = {
 	...Template.args,
 };
+asChromaticStory(DefaultBrand);
 
-export const SupportingTextDefault = Template.bind({});
-SupportingTextDefault.parameters = {
+export const SupportingText = Template.bind({});
+SupportingText.parameters = {
 	controls: {
 		disabled: true,
 	},
 };
-SupportingTextDefault.args = {
+SupportingText.args = {
 	...Template.args,
 	supporting: '#ff0000',
 };
+asChromaticStory(SupportingText);
 
 export const SupportingTextBrand: Story = (args: RadioProps) => (
 	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
@@ -90,23 +97,24 @@ SupportingTextBrand.args = {
 	...Template.args,
 	supporting: '#ff0000',
 };
+asChromaticStory(SupportingTextBrand);
 
-export const SupportingTextOnlyDefault = Template.bind({});
-SupportingTextOnlyDefault.parameters = {
+export const SupportingTextOnly = Template.bind({});
+SupportingTextOnly.parameters = {
 	controls: {
 		disabled: true,
 	},
 };
-SupportingTextOnlyDefault.args = {
+SupportingTextOnly.args = {
 	...Template.args,
 	supporting: '#ff0000',
 	label: null,
 };
+asChromaticStory(SupportingTextOnly);
 
 export const SupportingTextOnlyBrand = (args: RadioProps) => (
 	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
 );
-
 SupportingTextOnlyBrand.story = {
 	parameters: {
 		controls: {
@@ -122,25 +130,12 @@ SupportingTextOnlyBrand.args = {
 	supporting: '#ff0000',
 	label: null,
 };
+asChromaticStory(SupportingTextOnlyBrand);
 
 export const Unlabelled = Template.bind({});
 Unlabelled.parameters = {
 	controls: {
 		disabled: true,
 	},
 };
-
-export const Ungrouped: Story = (args: RadioProps) => (
-	<>
-		{Template(args)}
-		{Template(args)}
-	</>
-);
-Ungrouped.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-Ungrouped.args = {
-	...Template.args,
-};
+asChromaticStory(Unlabelled);
diff --git a/src/core/components/radio/RadioGroup.stories.tsx b/src/core/components/radio/RadioGroup.stories.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react';
 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 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
 // import type { Args, Story } from '@storybook/react';
 
@@ -49,16 +49,18 @@ Playground.argTypes = {
 	className: { control: null },
 	cssOverrides: { control: null },
 };
+asPlayground(Playground);
 
-export const DefaultLight = Template.bind({});
-DefaultLight.parameters = {
+export const Default = Template.bind({});
+Default.parameters = {
 	controls: {
 		disabled: true,
 	},
 };
-DefaultLight.args = {
+Default.args = {
 	...Template.args,
 };
+asChromaticStory(Default);
 
 export const DefaultBrand: Story = (args: RadioGroupProps) => (
 	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
@@ -74,6 +76,7 @@ DefaultBrand.parameters = {
 DefaultBrand.args = {
 	...Template.args,
 };
+asChromaticStory(DefaultBrand);
 
 export const Horizontal = Template.bind({});
 Horizontal.parameters = {
@@ -85,6 +88,7 @@ Horizontal.args = {
 	...Template.args,
 	orientation: 'horizontal',
 };
+asChromaticStory(Horizontal);
 
 export const VisuallyHideLegend = Template.bind({});
 VisuallyHideLegend.parameters = {
@@ -96,55 +100,60 @@ VisuallyHideLegend.args = {
 	...Template.args,
 	hideLabel: true,
 };
+asChromaticStory(VisuallyHideLegend);
 
-export const LegendSupportingTextLight = Template.bind({});
-LegendSupportingTextLight.parameters = {
+export const SupportingText = Template.bind({});
+SupportingText.parameters = {
 	controls: {
 		disabled: true,
 	},
 };
-LegendSupportingTextLight.args = {
+SupportingText.args = {
 	...Template.args,
 	supporting: 'You can always change it later',
 };
+asChromaticStory(SupportingText);
 
-export const LegendSupportingTextBrand: Story = (args: RadioGroupProps) => (
+export const SupportingTextBrand: Story = (args: RadioGroupProps) => (
 	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
 );
-LegendSupportingTextBrand.parameters = {
+SupportingTextBrand.parameters = {
 	controls: {
 		disabled: true,
 	},
 	backgrounds: {
 		default: 'brandBackground.primary',
 	},
 };
-LegendSupportingTextBrand.args = {
+SupportingTextBrand.args = {
 	...Template.args,
 	supporting: 'You can always change it later',
 };
+asChromaticStory(SupportingTextBrand);
 
-export const LegendSupportingMedia = Template.bind({});
-LegendSupportingMedia.args = {
+export const SupportingMedia = Template.bind({});
+SupportingMedia.args = {
 	...Template.args,
 	supporting: <Image />,
 };
-LegendSupportingMedia.parameters = {
+SupportingMedia.parameters = {
 	controls: {
 		disabled: true,
 	},
 };
+asChromaticStory(SupportingMedia);
 
-export const ErrorLight = Template.bind({});
-ErrorLight.args = {
+export const Error = Template.bind({});
+Error.args = {
 	...Template.args,
 	error: 'Please select a colour',
 };
-ErrorLight.parameters = {
+Error.parameters = {
 	controls: {
 		disabled: true,
 	},
 };
+asChromaticStory(Error);
 
 export const ErrorBrand: Story = (args: RadioGroupProps) => (
 	<ThemeProvider theme={radioBrand}>{Template(args)}</ThemeProvider>
@@ -161,47 +170,17 @@ ErrorBrand.parameters = {
 		default: 'brandBackground.primary',
 	},
 };
+asChromaticStory(ErrorBrand);
 
-export const LegendSupportingMediaWithError = Template.bind({});
-LegendSupportingMediaWithError.args = {
+export const SupportingMediaWithError = Template.bind({});
+SupportingMediaWithError.args = {
 	...Template.args,
 	error: 'Please select a colour',
 	supporting: <Image />,
 };
-LegendSupportingMediaWithError.parameters = {
-	controls: {
-		disabled: true,
-	},
-};
-
-export const ControlledExample = (_: RadioGroupProps) => {
-	const [selected, setSelected] = useState<string | null>(null);
-
-	return (
-		<RadioGroup name="colours">
-			<Radio
-				value="red"
-				label="Red"
-				checked={selected === 'red'}
-				onChange={() => setSelected('red')}
-			/>
-			<Radio
-				value="green"
-				label="Green"
-				checked={selected === 'green'}
-				onChange={() => setSelected('green')}
-			/>
-			<Radio
-				value="blue"
-				label="Blue"
-				checked={selected === 'blue'}
-				onChange={() => setSelected('blue')}
-			/>
-		</RadioGroup>
-	);
-};
-ControlledExample.parameters = {
+SupportingMediaWithError.parameters = {
 	controls: {
 		disabled: true,
 	},
 };
+asChromaticStory(SupportingMediaWithError);