From 8f60b7ce51496cb88f32d14460902d939e102f52 Mon Sep 17 00:00:00 2001
From: Jamie Lynch <jamie.lynch@guardian.co.uk>
Date: Mon, 16 Aug 2021 14:33:47 +0100
Subject: [PATCH] Add API docs for `src-radio` (#902)

* extend story stub with default args and arg types

* remove api docs from readme

Co-authored-by: Jamie Lynch <jamie.lynch@theguardian.com>

* extract radio components into separate modules

Co-authored-by: Jamie Lynch <jamie.lynch@theguardian.com>

* refactor stories into component-specific stories files

Co-authored-by: Jamie Lynch <jamie.lynch@theguardian.com>

Co-authored-by: Simon Adcock <simonadcock2@gmail.com>
Co-authored-by: Jamie Lynch <jamie.lynch@theguardian.com>
---
 src/@types/storybook-emotion-10-fixes.ts      |   5 +-
 src/core/components/radio/README.md           |  96 +--------
 src/core/components/radio/Radio.stories.tsx   | 124 ++++++++++++
 src/core/components/radio/Radio.tsx           | 132 ++++++++++++
 .../components/radio/RadioGroup.stories.tsx   | 156 +++++++++++++++
 src/core/components/radio/RadioGroup.tsx      | 106 ++++++++++
 src/core/components/radio/index.tsx           | 188 +-----------------
 .../components/radio/radio-group.stories.tsx  |  15 --
 src/core/components/radio/radio.stories.tsx   |  11 -
 .../radio/stories/radio-group/controlled.tsx  |  34 ----
 .../radio/stories/radio-group/error.tsx       |  54 -----
 .../radio/stories/radio-group/horizontal.tsx  |  14 --
 .../stories/radio-group/legend-error.tsx      |  53 -----
 .../radio-group/legend-supporting-media.tsx   |  51 -----
 .../radio-group/legend-supporting-text.tsx    |  51 -----
 .../radio/stories/radio-group/legend.tsx      |  73 -------
 .../radio/stories/radio-group/vertical.tsx    |  43 ----
 .../stories/radio/supporting-text-only.tsx    |  76 -------
 .../radio/stories/radio/supporting-text.tsx   |  79 --------
 .../radio/stories/radio/ungrouped.tsx         |  25 ---
 .../radio/stories/radio/unlabelled.tsx        |  15 --
 21 files changed, 527 insertions(+), 874 deletions(-)
 create mode 100644 src/core/components/radio/Radio.stories.tsx
 create mode 100644 src/core/components/radio/Radio.tsx
 create mode 100644 src/core/components/radio/RadioGroup.stories.tsx
 create mode 100644 src/core/components/radio/RadioGroup.tsx
 delete mode 100644 src/core/components/radio/radio-group.stories.tsx
 delete mode 100644 src/core/components/radio/radio.stories.tsx
 delete mode 100644 src/core/components/radio/stories/radio-group/controlled.tsx
 delete mode 100644 src/core/components/radio/stories/radio-group/error.tsx
 delete mode 100644 src/core/components/radio/stories/radio-group/horizontal.tsx
 delete mode 100644 src/core/components/radio/stories/radio-group/legend-error.tsx
 delete mode 100644 src/core/components/radio/stories/radio-group/legend-supporting-media.tsx
 delete mode 100644 src/core/components/radio/stories/radio-group/legend-supporting-text.tsx
 delete mode 100644 src/core/components/radio/stories/radio-group/legend.tsx
 delete mode 100644 src/core/components/radio/stories/radio-group/vertical.tsx
 delete mode 100644 src/core/components/radio/stories/radio/supporting-text-only.tsx
 delete mode 100644 src/core/components/radio/stories/radio/supporting-text.tsx
 delete mode 100644 src/core/components/radio/stories/radio/ungrouped.tsx
 delete mode 100644 src/core/components/radio/stories/radio/unlabelled.tsx

diff --git a/src/@types/storybook-emotion-10-fixes.ts b/src/@types/storybook-emotion-10-fixes.ts
index d5e6e1f4f..a07e67e30 100644
--- a/src/@types/storybook-emotion-10-fixes.ts
+++ b/src/@types/storybook-emotion-10-fixes.ts
@@ -13,9 +13,10 @@ export type Parameters = {
 	[key: string]: any;
 };
 
-export type Story = {
-	(arg0: any): JSX.Element;
+export type Story<T = Args> = {
+	(arg0: Args & T): JSX.Element;
 	args?: Args;
 	parameters?: Parameters;
+	argTypes?: Args;
 	storyName?: string;
 };
diff --git a/src/core/components/radio/README.md b/src/core/components/radio/README.md
index cc3318524..f4b881e67 100644
--- a/src/core/components/radio/README.md
+++ b/src/core/components/radio/README.md
@@ -10,101 +10,13 @@ $ yarn add @guardian/src-radio
 
 ## Use
 
-```js
-import { RadioGroup, Radio } from '@guardian/src-radio';
+### API
 
-const Form = () => {
-    const [selected, setSelected] = useState(null);
+See [storybook](https://guardian.github.io/source/?path=/docs/source-src-radio-radio--demo)
 
-    return (
-        <form>
-            <RadioGroup
-                name="consent"
-                orientation="vertical"
-                label="Do you accept the terms and conditions?"
-                supporting="The full terms are available on our website"
-            >
-                <Radio
-                    value="no"
-                    label="No"
-                    supporting="I do not accept the terms"
-                    checked={selected === 'no'}
-                    onChange={setSelected('no')}
-                />
-                <Radio
-                    value="yes"
-                    label="Yes"
-                    supporting="I accept the terms"
-                    checked={selected === 'yes'}
-                    onChange={setSelected('yes')}
-                />,
-            </RadioGroup>
-        </form>
-    );
-};
-```
-
-## `RadioGroup` Props
-
-### `name`
-
-**`string`**
-
-Gets passed as the name attribute for each radio button
-
-### `label`
-
-**`string`**
-
-Appears as a legend at the top of the radio group
-
-### `hideLabel`
-
-**`boolean`** _= "false"_
-
-Visually hides the label.
-
-### `supporting`
-
-**`string | JSX.Element` **
-
-Additional text or component that appears below the label
-
-### `orientation`
-
-**`"vertical" | "horizontal"`** _= "vertical"_
-
-The direction in which radio buttons are stacked
-
-### `error`
-
-**`string`**
-
-If passed, error styling should applies to this radio group. The string appears as an inline error message.
-
-## `Radio` Props
-
-### `label`
-
-**`ReactNode`**
-
-Appears to the right of the radio button. If a visible label is undesirable (e.g. for layout reasons) use `aria-label` instead.
-
-If label is omitted, supporting text will not appear either.
-
-### `supporting`
-
-**`ReactNode`**
-
-Additional text or a component that appears below the label
-
-### `checked`
-
-**`boolean`**
-
-Whether radio button is checked. This is necessary when using the [controlled approach](https://reactjs.org/docs/forms.html#controlled-components) to form state management.
+### How to use
 
-**Note:** if you pass the `checked` prop, you **must** also pass an `onChange` handler, or the field will be rendered as read-only.
+For context and visual guides relating to usage see the [Source Design System website](https://theguardian.design/2a1e5182b/p/2891dd-radio-button/b/46940d).
 
 ## Supported themes
 
diff --git a/src/core/components/radio/Radio.stories.tsx b/src/core/components/radio/Radio.stories.tsx
new file mode 100644
index 000000000..7af4f80a6
--- /dev/null
+++ b/src/core/components/radio/Radio.stories.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { Radio } from './Radio';
+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';
+
+export default {
+	title: 'Source/src-radio/Radio',
+	component: Radio,
+	argTypes: {
+		label: {
+			control: {
+				type: 'text',
+			},
+		},
+		supporting: {
+			control: {
+				type: 'text',
+			},
+		},
+		cssOverrides: {
+			control: null,
+		},
+	},
+	args: {
+		label: 'Red',
+		value: 'red',
+		supporting: '',
+		checked: true,
+	},
+};
+
+const Template: Story = (args: RadioProps) => <Radio {...args} />;
+
+// *****************************************************************************
+
+export const Playground = Template.bind({});
+asPlayground(Playground);
+
+// *****************************************************************************
+
+export const DefaultLightTheme = Template.bind({});
+asChromaticStory(DefaultLightTheme);
+
+// *****************************************************************************
+
+export const DefaultBrandTheme = (args: RadioProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
+);
+DefaultBrandTheme.parameters = {
+	backgrounds: {
+		default: 'brandBackground.primary',
+	},
+};
+asChromaticStory(DefaultBrandTheme);
+
+// *****************************************************************************
+
+export const SupportingTextLightTheme = Template.bind({});
+SupportingTextLightTheme.args = {
+	supporting: '#ff0000',
+};
+asChromaticStory(SupportingTextLightTheme);
+
+// *****************************************************************************
+
+export const SupportingTextBrandTheme: Story = (args: RadioProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
+);
+SupportingTextBrandTheme.parameters = {
+	backgrounds: {
+		default: 'brandBackground.primary',
+	},
+};
+SupportingTextBrandTheme.args = {
+	supporting: '#ff0000',
+};
+asChromaticStory(SupportingTextBrandTheme);
+
+// *****************************************************************************
+
+export const SupportingTextOnlyLightTheme = Template.bind({});
+SupportingTextOnlyLightTheme.args = {
+	supporting: '#ff0000',
+	label: null,
+};
+asChromaticStory(SupportingTextOnlyLightTheme);
+
+// *****************************************************************************
+
+export const SupportingTextOnlyBrandTheme = (args: RadioProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
+);
+SupportingTextOnlyBrandTheme.story = {
+	parameters: {
+		backgrounds: {
+			default: 'brandBackground.primary',
+		},
+	},
+};
+SupportingTextOnlyBrandTheme.args = {
+	supporting: '#ff0000',
+	label: null,
+};
+asChromaticStory(SupportingTextOnlyBrandTheme);
+
+// *****************************************************************************
+
+export const UnlabelledLightTheme = Template.bind({});
+UnlabelledLightTheme.args = {
+	label: undefined,
+};
+asChromaticStory(UnlabelledLightTheme);
diff --git a/src/core/components/radio/Radio.tsx b/src/core/components/radio/Radio.tsx
new file mode 100644
index 000000000..244348a5f
--- /dev/null
+++ b/src/core/components/radio/Radio.tsx
@@ -0,0 +1,132 @@
+import React, { ReactNode, InputHTMLAttributes } from 'react';
+import {
+	label,
+	labelWithSupportingText,
+	radio,
+	labelText,
+	labelTextWithSupportingText,
+	supportingText,
+} from './styles';
+import { Props } from '@guardian/src-helpers';
+
+const LabelText = ({
+	hasSupportingText,
+	children,
+}: {
+	hasSupportingText?: boolean;
+	children: ReactNode;
+}) => {
+	return (
+		<div
+			css={(theme) => [
+				hasSupportingText ? labelTextWithSupportingText : '',
+				labelText(theme.radio && theme),
+			]}
+			className="src-radio-label-text"
+		>
+			{children}
+		</div>
+	);
+};
+
+const SupportingText = ({ children }: { children: ReactNode }) => {
+	return (
+		<div css={(theme) => supportingText(theme.radio && theme)}>
+			{children}
+		</div>
+	);
+};
+
+export interface RadioProps
+	extends InputHTMLAttributes<HTMLInputElement>,
+		Props {
+	/**
+	 * Whether radio button is checked. This is necessary when using the
+	 * [controlled approach](https://reactjs.org/docs/forms.html#controlled-components)
+	 * (recommended) to form state management.
+	 *
+	 * _Note: if you pass the `checked` prop, you MUST also pass an `onChange`
+	 * handler, or the field will be rendered as read-only._
+	 */
+	checked?: boolean;
+	/**
+	 * When using the [uncontrolled approach](https://reactjs.org/docs/uncontrolled-components.html),
+	 * use defaultChecked to indicate the initially checked button.
+	 */
+	defaultChecked?: boolean;
+	/**
+	 * Appears to the right of the radio button. If a visible label is
+	 * undesirable (e.g. for layout reasons) use `aria-label` instead.
+	 *
+	 * If label is omitted, supporting text will not appear either.
+	 */
+	label?: string | ReactNode;
+	/**
+	 * Additional text or a component that appears below the label
+	 */
+	supporting?: string | ReactNode;
+}
+
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-radio-radio--demo) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/2891dd-radio-button/b/46940d) •
+ * [GitHub](https://github.com/guardian/source/tree/main/src/core/components/radio) •
+ * [NPM](https://www.npmjs.com/package/@guardian/src-radio)
+ *
+ * Radio buttons allow users to make a single selection from a set of options.
+ *
+ * The following themes are supported: `default`, `brand`
+ */
+export const Radio = ({
+	label: labelContent,
+	value,
+	supporting,
+	checked,
+	defaultChecked,
+	cssOverrides,
+	...props
+}: RadioProps) => {
+	const isChecked = (): boolean => {
+		if (checked != null) {
+			return checked;
+		}
+
+		return !!defaultChecked;
+	};
+	const radioControl = (
+		<input
+			type="radio"
+			css={(theme) => [radio(theme.radio && theme), cssOverrides]}
+			value={value}
+			aria-checked={isChecked()}
+			defaultChecked={defaultChecked != null ? defaultChecked : undefined}
+			checked={checked != null ? isChecked() : undefined}
+			{...props}
+		/>
+	);
+
+	const labelledRadioControl = (
+		<label
+			css={(theme) => [
+				label(theme.radio && theme),
+				supporting ? labelWithSupportingText : '',
+			]}
+		>
+			{radioControl}
+			{supporting ? (
+				<div>
+					<LabelText hasSupportingText={true}>
+						{labelContent}
+					</LabelText>
+					<SupportingText>{supporting}</SupportingText>
+				</div>
+			) : (
+				<LabelText>{labelContent}</LabelText>
+			)}
+		</label>
+	);
+
+	return (
+		<>{labelContent || supporting ? labelledRadioControl : radioControl}</>
+	);
+};
diff --git a/src/core/components/radio/RadioGroup.stories.tsx b/src/core/components/radio/RadioGroup.stories.tsx
new file mode 100644
index 000000000..a948480dd
--- /dev/null
+++ b/src/core/components/radio/RadioGroup.stories.tsx
@@ -0,0 +1,156 @@
+import { RadioGroup, RadioGroupProps } from './RadioGroup';
+import { Radio } from './Radio';
+import { radioBrand } from './index';
+import { ThemeProvider } from '@emotion/react';
+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
+// import type { Args, Story } from '@storybook/react';
+
+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 = () => (
+	<div style={{ padding: `8px 0` }}>
+		<img
+			alt="test"
+			src="https://i.guim.co.uk/img/media/9bd896505173dcf4adadd02e5f40a03414c50bdc/172_201_2329_1397/master/2329.jpg?width=620&quality=85&auto=format&fit=max&s=133b7c6ce78a0780e99e605bb3ae7479"
+		/>
+	</div>
+);
+
+const Template: Story = (args: RadioGroupProps) => (
+	<RadioGroup {...args}>
+		<Radio {...RadioStories.args} key="radio-1" />
+	</RadioGroup>
+);
+
+// *****************************************************************************
+
+export const Playground = Template.bind({});
+asPlayground(Playground);
+
+// *****************************************************************************
+
+export const DefaultLightTheme = Template.bind({});
+asChromaticStory(DefaultLightTheme);
+
+// *****************************************************************************
+
+export const DefaultBrandTheme: Story = (args: RadioGroupProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
+);
+DefaultBrandTheme.parameters = {
+	backgrounds: {
+		default: 'brandBackground.primary',
+	},
+};
+asChromaticStory(DefaultBrandTheme);
+
+// *****************************************************************************
+
+export const HorizontalLightTheme = Template.bind({});
+HorizontalLightTheme.args = {
+	orientation: 'horizontal',
+};
+asChromaticStory(HorizontalLightTheme);
+
+// *****************************************************************************
+
+export const VisuallyHideLegendLightTheme = Template.bind({});
+VisuallyHideLegendLightTheme.args = {
+	hideLabel: true,
+};
+asChromaticStory(VisuallyHideLegendLightTheme);
+
+// *****************************************************************************
+
+export const SupportingTextLightTheme = Template.bind({});
+SupportingTextLightTheme.args = {
+	supporting: 'You can always change it later',
+};
+asChromaticStory(SupportingTextLightTheme);
+
+// *****************************************************************************
+
+export const SupportingTextBrandTheme: Story = (args: RadioGroupProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
+);
+SupportingTextBrandTheme.parameters = {
+	backgrounds: {
+		default: 'brandBackground.primary',
+	},
+};
+SupportingTextBrandTheme.args = {
+	supporting: 'You can always change it later',
+};
+asChromaticStory(SupportingTextBrandTheme);
+
+// *****************************************************************************
+
+export const SupportingMediaLightTheme = Template.bind({});
+SupportingMediaLightTheme.args = {
+	supporting: <Image />,
+};
+asChromaticStory(SupportingMediaLightTheme);
+
+// *****************************************************************************
+
+export const ErrorLightTheme = Template.bind({});
+ErrorLightTheme.args = {
+	error: 'Please select a colour',
+};
+asChromaticStory(ErrorLightTheme);
+
+// *****************************************************************************
+
+export const ErrorBrandTheme: Story = (args: RadioGroupProps) => (
+	<ThemeProvider theme={radioBrand}>
+		<Template {...args} />
+	</ThemeProvider>
+);
+ErrorBrandTheme.args = {
+	error: 'Please select a colour',
+};
+ErrorBrandTheme.parameters = {
+	backgrounds: {
+		default: 'brandBackground.primary',
+	},
+};
+asChromaticStory(ErrorBrandTheme);
+
+// *****************************************************************************
+
+export const SupportingMediaWithErrorLightTheme = Template.bind({});
+SupportingMediaWithErrorLightTheme.args = {
+	error: 'Please select a colour',
+	supporting: <Image />,
+};
+asChromaticStory(SupportingMediaWithErrorLightTheme);
diff --git a/src/core/components/radio/RadioGroup.tsx b/src/core/components/radio/RadioGroup.tsx
new file mode 100644
index 000000000..4dad586b3
--- /dev/null
+++ b/src/core/components/radio/RadioGroup.tsx
@@ -0,0 +1,106 @@
+import React, { FieldsetHTMLAttributes } from 'react';
+import { Legend } from '@guardian/src-label';
+import { InlineError } from '@guardian/src-user-feedback';
+import {
+	descriptionId,
+	generateSourceId,
+} from '@guardian/src-foundations/accessibility';
+import { fieldset, horizontal, vertical } from './styles';
+import { Props } from '@guardian/src-helpers';
+
+type Orientation = 'vertical' | 'horizontal';
+
+const orientationStyles = {
+	vertical: vertical,
+	horizontal: horizontal,
+};
+
+export interface RadioGroupProps
+	extends FieldsetHTMLAttributes<HTMLFieldSetElement>,
+		Props {
+	id?: string;
+	/**
+	 * Appears as a legend at the top of the radio group
+	 */
+	label?: string;
+	/**
+	 * Visually hides the label
+	 */
+	hideLabel?: boolean;
+	/**
+	 * Additional text or component that appears below the label
+	 */
+	supporting?: string | JSX.Element;
+	/**
+	 * The direction in which radio buttons are stacked
+	 */
+	orientation?: Orientation;
+	/**
+	 * If passed, error styling should applies to this radio group. The string appears as an inline error message.
+	 */
+	error?: string;
+}
+
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-radio-radio-group--demo) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/2891dd-radio-button/b/46940d) •
+ * [GitHub](https://github.com/guardian/source/tree/main/src/core/components/radio) •
+ * [NPM](https://www.npmjs.com/package/@guardian/src-radio)
+ *
+ * Radio buttons allow users to make a single selection from a set of options.
+ *
+ * The following themes are supported: `default`, `brand`
+ */
+export const RadioGroup = ({
+	id,
+	name,
+	label,
+	hideLabel = false,
+	supporting,
+	orientation = 'vertical',
+	error,
+	cssOverrides,
+	children,
+	...props
+}: RadioGroupProps) => {
+	const groupId = id || generateSourceId();
+	const legend = label ? (
+		<Legend text={label} supporting={supporting} hideLabel={hideLabel} />
+	) : (
+		''
+	);
+	const message = error && (
+		<InlineError id={descriptionId(groupId)}>{error}</InlineError>
+	);
+
+	return (
+		<fieldset
+			aria-invalid={!!error}
+			id={groupId}
+			css={(theme) => [
+				fieldset(theme.radio && theme),
+				orientationStyles[orientation],
+				cssOverrides,
+			]}
+			{...props}
+		>
+			{legend}
+			{message}
+			{React.Children.map(children, (child) => {
+				return React.cloneElement(
+					child as React.ReactElement,
+					Object.assign(
+						error
+							? {
+									'aria-describedby': descriptionId(groupId),
+							  }
+							: {},
+						{
+							name,
+						},
+					),
+				);
+			})}
+		</fieldset>
+	);
+};
diff --git a/src/core/components/radio/index.tsx b/src/core/components/radio/index.tsx
index 85b328715..67431b6df 100644
--- a/src/core/components/radio/index.tsx
+++ b/src/core/components/radio/index.tsx
@@ -1,188 +1,4 @@
-import React, { ReactNode, InputHTMLAttributes } from 'react';
-import { SerializedStyles } from '@emotion/react';
-import { Legend } from '@guardian/src-label';
-import { InlineError } from '@guardian/src-user-feedback';
-import {
-	descriptionId,
-	generateSourceId,
-} from '@guardian/src-foundations/accessibility';
-import {
-	fieldset,
-	label,
-	labelWithSupportingText,
-	radio,
-	labelText,
-	labelTextWithSupportingText,
-	supportingText,
-	horizontal,
-	vertical,
-} from './styles';
-import { Props } from '@guardian/src-helpers';
-
 export { radioBrand, radioDefault } from '@guardian/src-foundations/themes';
 
-type Orientation = 'vertical' | 'horizontal';
-
-const orientationStyles = {
-	vertical: vertical,
-	horizontal: horizontal,
-};
-
-interface RadioGroupProps extends Props {
-	id?: string;
-	name: string;
-	label?: string;
-	hideLabel?: boolean;
-	supporting?: string | JSX.Element;
-	orientation?: Orientation;
-	error?: string;
-	children: JSX.Element | JSX.Element[];
-	cssOverrides?: SerializedStyles | SerializedStyles[];
-}
-
-const RadioGroup = ({
-	id,
-	name,
-	label,
-	hideLabel,
-	supporting,
-	orientation = 'vertical',
-	error,
-	cssOverrides,
-	children,
-	...props
-}: RadioGroupProps) => {
-	const groupId = id || generateSourceId();
-	const legend = label ? (
-		<Legend text={label} supporting={supporting} hideLabel={hideLabel} />
-	) : (
-		''
-	);
-	const message = error && (
-		<InlineError id={descriptionId(groupId)}>{error}</InlineError>
-	);
-
-	return (
-		<fieldset
-			aria-invalid={!!error}
-			id={groupId}
-			css={(theme) => [
-				fieldset(theme.radio && theme),
-				orientationStyles[orientation],
-				cssOverrides,
-			]}
-			{...props}
-		>
-			{legend}
-			{message}
-			{React.Children.map(children, (child) => {
-				return React.cloneElement(
-					child,
-					Object.assign(
-						error
-							? {
-									'aria-describedby': descriptionId(groupId),
-							  }
-							: {},
-						{
-							name,
-						},
-					),
-				);
-			})}
-		</fieldset>
-	);
-};
-
-const LabelText = ({
-	hasSupportingText,
-	children,
-}: {
-	hasSupportingText?: boolean;
-	children: ReactNode;
-}) => {
-	return (
-		<div
-			css={(theme) => [
-				hasSupportingText ? labelTextWithSupportingText : '',
-				labelText(theme.radio && theme),
-			]}
-			className="src-radio-label-text"
-		>
-			{children}
-		</div>
-	);
-};
-
-const SupportingText = ({ children }: { children: ReactNode }) => {
-	return (
-		<div css={(theme) => supportingText(theme.radio && theme)}>
-			{children}
-		</div>
-	);
-};
-
-interface RadioProps extends InputHTMLAttributes<HTMLInputElement>, Props {
-	value: string;
-	checked?: boolean;
-	defaultChecked?: boolean;
-	label?: ReactNode;
-	supporting?: ReactNode;
-	cssOverrides?: SerializedStyles | SerializedStyles[];
-}
-
-const Radio = ({
-	label: labelContent,
-	value,
-	supporting,
-	checked,
-	defaultChecked,
-	cssOverrides,
-	...props
-}: RadioProps) => {
-	const isChecked = (): boolean => {
-		if (checked != null) {
-			return checked;
-		}
-
-		return !!defaultChecked;
-	};
-	const radioControl = (
-		<input
-			type="radio"
-			css={(theme) => [radio(theme.radio && theme), cssOverrides]}
-			value={value}
-			aria-checked={isChecked()}
-			defaultChecked={defaultChecked != null ? defaultChecked : undefined}
-			checked={checked != null ? isChecked() : undefined}
-			{...props}
-		/>
-	);
-
-	const labelledRadioControl = (
-		<label
-			css={(theme) => [
-				label(theme.radio && theme),
-				supporting ? labelWithSupportingText : '',
-			]}
-		>
-			{radioControl}
-			{supporting ? (
-				<div>
-					<LabelText hasSupportingText={true}>
-						{labelContent}
-					</LabelText>
-					<SupportingText>{supporting}</SupportingText>
-				</div>
-			) : (
-				<LabelText>{labelContent}</LabelText>
-			)}
-		</label>
-	);
-
-	return (
-		<>{labelContent || supporting ? labelledRadioControl : radioControl}</>
-	);
-};
-
-export { RadioGroup, Radio };
+export { RadioGroup } from './RadioGroup';
+export { Radio } from './Radio';
diff --git a/src/core/components/radio/radio-group.stories.tsx b/src/core/components/radio/radio-group.stories.tsx
deleted file mode 100644
index 4c4ad2d14..000000000
--- a/src/core/components/radio/radio-group.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { RadioGroup } from './index';
-
-export default {
-	title: 'Radio Group',
-	component: RadioGroup,
-};
-
-export * from './stories/radio-group/controlled';
-export * from './stories/radio-group/error';
-export * from './stories/radio-group/horizontal';
-export * from './stories/radio-group/legend';
-export * from './stories/radio-group/legend-error';
-export * from './stories/radio-group/legend-supporting-text';
-export * from './stories/radio-group/legend-supporting-media';
-export * from './stories/radio-group/vertical';
diff --git a/src/core/components/radio/radio.stories.tsx b/src/core/components/radio/radio.stories.tsx
deleted file mode 100644
index f1b32c223..000000000
--- a/src/core/components/radio/radio.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Radio } from './index';
-
-export default {
-	title: 'Radio',
-	component: Radio,
-};
-
-export * from './stories/radio/supporting-text';
-export * from './stories/radio/supporting-text-only';
-export * from './stories/radio/ungrouped';
-export * from './stories/radio/unlabelled';
diff --git a/src/core/components/radio/stories/radio-group/controlled.tsx b/src/core/components/radio/stories/radio-group/controlled.tsx
deleted file mode 100644
index 23993ae47..000000000
--- a/src/core/components/radio/stories/radio-group/controlled.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react';
-import { RadioGroup, Radio } from '../../index';
-
-const controlled = () => {
-	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>
-	);
-};
-controlled.story = {
-	name: 'controlled example',
-};
-
-export { controlled };
diff --git a/src/core/components/radio/stories/radio-group/error.tsx b/src/core/components/radio/stories/radio-group/error.tsx
deleted file mode 100644
index a7f59fd98..000000000
--- a/src/core/components/radio/stories/radio-group/error.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { storybookBackgrounds } from '@guardian/src-helpers';
-import { RadioGroup, Radio, radioDefault, radioBrand } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-/* eslint-disable react/jsx-key */
-const unselectedRadios = [
-	<Radio value="red" label="Red" />,
-	<Radio value="green" label="Green" />,
-	<Radio value="blue" label="Blue" />,
-];
-/* eslint-enable react/jsx-key */
-
-const errorLight = () => (
-	<ThemeProvider theme={radioDefault}>
-		<RadioGroup name="colours" error="Please select a colour">
-			{unselectedRadios.map((radio, index) =>
-				React.cloneElement(radio, { key: index }),
-			)}
-		</RadioGroup>
-	</ThemeProvider>
-);
-
-errorLight.story = {
-	name: `error default`,
-	parameters: {
-		backgrounds: {
-			default: 'default',
-			values: [storybookBackgrounds.default],
-		},
-	},
-};
-
-const errorBlue = () => (
-	<ThemeProvider theme={radioBrand}>
-		<RadioGroup name="colours" error="Please select a colour">
-			{unselectedRadios.map((radio, index) =>
-				React.cloneElement(radio, { key: index }),
-			)}
-		</RadioGroup>
-	</ThemeProvider>
-);
-
-errorBlue.story = {
-	name: `error brand`,
-	parameters: {
-		backgrounds: {
-			default: 'brand',
-			values: [storybookBackgrounds.brand],
-		},
-	},
-};
-
-export { errorLight, errorBlue };
diff --git a/src/core/components/radio/stories/radio-group/horizontal.tsx b/src/core/components/radio/stories/radio-group/horizontal.tsx
deleted file mode 100644
index fe6d142ef..000000000
--- a/src/core/components/radio/stories/radio-group/horizontal.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { RadioGroup, Radio } from '../../index';
-
-const horizontal = () => (
-	<RadioGroup orientation="horizontal" name="yes-or-no">
-		<Radio value="yes" label="Yes" />
-		<Radio value="no" label="No" defaultChecked={true} />
-	</RadioGroup>
-);
-horizontal.story = {
-	name: 'horizontal light',
-};
-
-export { horizontal };
diff --git a/src/core/components/radio/stories/radio-group/legend-error.tsx b/src/core/components/radio/stories/radio-group/legend-error.tsx
deleted file mode 100644
index afbfd43e9..000000000
--- a/src/core/components/radio/stories/radio-group/legend-error.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { storybookBackgrounds } from '@guardian/src-helpers';
-import { RadioGroup, Radio, radioBrand } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-/* eslint-disable react/jsx-key */
-const radios = [
-	<Radio value="red" label="Red" />,
-	<Radio value="green" label="Green" />,
-	<Radio value="blue" label="Blue" />,
-];
-/* eslint-enable react/jsx-key */
-
-export const legendErrorLight = () => (
-	<RadioGroup
-		id="colours"
-		name="colours"
-		label="Select your preferred colour"
-		error="Please select a colour"
-	>
-		{radios.map((radio, index) =>
-			React.cloneElement(radio, { key: index }),
-		)}
-	</RadioGroup>
-);
-legendErrorLight.story = {
-	name: `legend with error light`,
-};
-
-export const legendErrorBlue = () => (
-	<ThemeProvider theme={radioBrand}>
-		<RadioGroup
-			id="colours"
-			name="colours"
-			label="Select your preferred colour"
-			error="Please select a colour"
-		>
-			{radios.map((radio, index) =>
-				React.cloneElement(radio, { key: index }),
-			)}
-		</RadioGroup>
-	</ThemeProvider>
-);
-
-legendErrorBlue.story = {
-	name: `legend with error blue`,
-	parameters: {
-		backgrounds: {
-			default: 'brand',
-			values: [storybookBackgrounds.brand],
-		},
-	},
-};
diff --git a/src/core/components/radio/stories/radio-group/legend-supporting-media.tsx b/src/core/components/radio/stories/radio-group/legend-supporting-media.tsx
deleted file mode 100644
index 4f4ebf685..000000000
--- a/src/core/components/radio/stories/radio-group/legend-supporting-media.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { RadioGroup, Radio } from '../../index';
-
-/* eslint-disable react/jsx-key */
-const uncheckedRadios = [
-	<Radio value="red" label="Red" />,
-	<Radio value="green" label="Green" />,
-	<Radio value="blue" label="Blue" />,
-];
-
-const Image = () => (
-	<div style={{ padding: `8px 0` }}>
-		<img
-			alt="test"
-			src="https://i.guim.co.uk/img/media/9bd896505173dcf4adadd02e5f40a03414c50bdc/172_201_2329_1397/master/2329.jpg?width=620&quality=85&auto=format&fit=max&s=133b7c6ce78a0780e99e605bb3ae7479"
-		/>
-	</div>
-);
-
-/* eslint-enable react/jsx-key */
-export const legendSupportingMedia = () => (
-	<RadioGroup
-		name="colours"
-		label="Select your preferred colour"
-		supporting={<Image />}
-	>
-		{uncheckedRadios.map((radio, index) =>
-			React.cloneElement(radio, { key: index }),
-		)}
-	</RadioGroup>
-);
-legendSupportingMedia.story = {
-	name: `legend supporting media`,
-};
-
-/* eslint-enable react/jsx-key */
-export const legendSupportingMediaWithError = () => (
-	<RadioGroup
-		name="colours"
-		label="Select your preferred colour"
-		supporting={<Image />}
-		error="Please select a colour"
-	>
-		{uncheckedRadios.map((radio, index) =>
-			React.cloneElement(radio, { key: index }),
-		)}
-	</RadioGroup>
-);
-legendSupportingMediaWithError.story = {
-	name: ` legend supporting media with error`,
-};
diff --git a/src/core/components/radio/stories/radio-group/legend-supporting-text.tsx b/src/core/components/radio/stories/radio-group/legend-supporting-text.tsx
deleted file mode 100644
index 95c0dd8ce..000000000
--- a/src/core/components/radio/stories/radio-group/legend-supporting-text.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { storybookBackgrounds } from '@guardian/src-helpers';
-import { RadioGroup, Radio, radioBrand } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-/* eslint-disable react/jsx-key */
-const radios = [
-	<Radio value="red" label="Red" />,
-	<Radio value="green" label="Green" defaultChecked={true} />,
-	<Radio value="blue" label="Blue" />,
-];
-/* eslint-enable react/jsx-key */
-
-export const legendSupportingTextLight = () => (
-	<RadioGroup
-		name="colours"
-		label="Select your preferred colour"
-		supporting="You can always change it later"
-	>
-		{radios.map((radio, index) =>
-			React.cloneElement(radio, { key: index }),
-		)}
-	</RadioGroup>
-);
-legendSupportingTextLight.story = {
-	name: `legend supporting text light`,
-};
-
-export const legendSupportingTextBlue = () => (
-	<ThemeProvider theme={radioBrand}>
-		<RadioGroup
-			name="colours"
-			label="Select your preferred colour"
-			supporting="You can always change it later"
-		>
-			{radios.map((radio, index) =>
-				React.cloneElement(radio, { key: index }),
-			)}
-		</RadioGroup>
-	</ThemeProvider>
-);
-
-legendSupportingTextBlue.story = {
-	name: `legend supporting text blue`,
-	parameters: {
-		backgrounds: {
-			default: 'brand',
-			values: [storybookBackgrounds.brand],
-		},
-	},
-};
diff --git a/src/core/components/radio/stories/radio-group/legend.tsx b/src/core/components/radio/stories/radio-group/legend.tsx
deleted file mode 100644
index 58bd9c5fb..000000000
--- a/src/core/components/radio/stories/radio-group/legend.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { storybookBackgrounds } from '@guardian/src-helpers';
-import { RadioGroup, Radio, radioBrand } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-/* eslint-disable react/jsx-key */
-const radios = [
-	<Radio value="red" label="Red" />,
-	<Radio value="green" label="Green" defaultChecked={true} />,
-	<Radio value="blue" label="Blue" />,
-];
-/* eslint-enable react/jsx-key */
-
-export const legendLight = () => (
-	<RadioGroup name="colours" label="Select your preferred colour">
-		{radios.map((radio, index) =>
-			React.cloneElement(radio, { key: index }),
-		)}
-	</RadioGroup>
-);
-legendLight.story = {
-	name: `legend light`,
-};
-
-export const legendBlue = () => (
-	<ThemeProvider theme={radioBrand}>
-		<RadioGroup name="colours" label="Select your preferred colour">
-			{radios.map((radio, index) =>
-				React.cloneElement(radio, { key: index }),
-			)}
-		</RadioGroup>
-	</ThemeProvider>
-);
-
-legendBlue.story = {
-	name: `legend blue`,
-	parameters: {
-		backgrounds: {
-			default: 'brand',
-			values: [storybookBackgrounds.brand],
-		},
-	},
-};
-
-export const legendHorizontal = () => (
-	<RadioGroup
-		orientation="horizontal"
-		name="yes-or-no"
-		label="Do you live in the United Kingdom?"
-	>
-		<Radio value="yes" label="Yes" />
-		<Radio value="no" label="No" defaultChecked={true} />
-	</RadioGroup>
-);
-
-legendHorizontal.story = {
-	name: `legend horizontal light`,
-};
-
-export const legendHideLabelLight = () => (
-	<RadioGroup
-		name="colours"
-		label="Select your preferred colour"
-		hideLabel={true}
-	>
-		{radios.map((radio, index) =>
-			React.cloneElement(radio, { key: index }),
-		)}
-	</RadioGroup>
-);
-legendHideLabelLight.story = {
-	name: `visually hide legend light`,
-};
diff --git a/src/core/components/radio/stories/radio-group/vertical.tsx b/src/core/components/radio/stories/radio-group/vertical.tsx
deleted file mode 100644
index 047cb95e4..000000000
--- a/src/core/components/radio/stories/radio-group/vertical.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { storybookBackgrounds } from '@guardian/src-helpers';
-import { RadioGroup, Radio, radioBrand } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-/* eslint-disable react/jsx-key */
-const radios = [
-	<Radio value="red" label="Red" />,
-	<Radio value="green" label="Green" defaultChecked={true} />,
-	<Radio value="blue" label="Blue" />,
-];
-/* eslint-enable react/jsx-key */
-
-export const verticalLight = () => (
-	<RadioGroup name="colours">
-		{radios.map((radio, index) =>
-			React.cloneElement(radio, { key: index }),
-		)}
-	</RadioGroup>
-);
-verticalLight.story = {
-	name: `vertical light`,
-};
-
-export const verticalBlue = () => (
-	<ThemeProvider theme={radioBrand}>
-		<RadioGroup name="colours">
-			{radios.map((radio, index) =>
-				React.cloneElement(radio, { key: index }),
-			)}
-		</RadioGroup>
-	</ThemeProvider>
-);
-
-verticalBlue.story = {
-	name: `vertical blue`,
-	parameters: {
-		backgrounds: {
-			default: 'brand',
-			values: [storybookBackgrounds.brand],
-		},
-	},
-};
diff --git a/src/core/components/radio/stories/radio/supporting-text-only.tsx b/src/core/components/radio/stories/radio/supporting-text-only.tsx
deleted file mode 100644
index 285e5d7c3..000000000
--- a/src/core/components/radio/stories/radio/supporting-text-only.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/react';
-import { storybookBackgrounds } from '@guardian/src-helpers';
-import { RadioGroup, Radio, radioDefault, radioBrand } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-/* eslint-disable react/jsx-key */
-const radiosWithSupportingTextOnly = [
-	<Radio
-		value="6-for-6"
-		supporting="£6 for the first 6 issues (then £37.50 every quarter)"
-	/>,
-	<Radio
-		value="quarterly"
-		supporting="£37.50 every quarter"
-		defaultChecked={true}
-	/>,
-	<Radio
-		value="annual"
-		supporting={
-			<>
-				Subscribe for <strong>12 months</strong> and save 10% £135 for 1
-				year then standard rate (£150 every year)
-			</>
-		}
-	/>,
-];
-/* eslint-enable react/jsx-key */
-
-const narrow = css`
-	width: 30rem;
-`;
-
-const supportingTextOnlyLight = () => (
-	<ThemeProvider theme={radioDefault}>
-		<div css={narrow}>
-			<RadioGroup name="payment-options">
-				{radiosWithSupportingTextOnly.map((radio, index) =>
-					React.cloneElement(radio, { key: index }),
-				)}
-			</RadioGroup>
-		</div>
-	</ThemeProvider>
-);
-supportingTextOnlyLight.story = {
-	name: `supporting text only default`,
-	parameters: {
-		backgrounds: {
-			default: 'default',
-			values: [storybookBackgrounds.default],
-		},
-	},
-};
-
-const supportingTextOnlyBlue = () => (
-	<ThemeProvider theme={radioBrand}>
-		<div css={narrow}>
-			<RadioGroup name="payment-options">
-				{radiosWithSupportingTextOnly.map((radio, index) =>
-					React.cloneElement(radio, { key: index }),
-				)}
-			</RadioGroup>
-		</div>
-	</ThemeProvider>
-);
-supportingTextOnlyBlue.story = {
-	name: `supporting text only brand`,
-	parameters: {
-		backgrounds: {
-			default: 'brand',
-			values: [storybookBackgrounds.brand],
-		},
-	},
-};
-
-export { supportingTextOnlyLight, supportingTextOnlyBlue };
diff --git a/src/core/components/radio/stories/radio/supporting-text.tsx b/src/core/components/radio/stories/radio/supporting-text.tsx
deleted file mode 100644
index 9c8f009c4..000000000
--- a/src/core/components/radio/stories/radio/supporting-text.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/react';
-import { storybookBackgrounds } from '@guardian/src-helpers';
-import { RadioGroup, Radio, radioDefault, radioBrand } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-/* eslint-disable react/jsx-key */
-const radiosWithSupportingText = [
-	<Radio
-		value="6-for-6"
-		label="6 for 6"
-		supporting="£6 for the first 6 issues (then £37.50 every quarter)"
-	/>,
-	<Radio
-		value="quarterly"
-		label="Quarterly"
-		supporting="£37.50 every quarter"
-		defaultChecked={true}
-	/>,
-	<Radio
-		value="annual"
-		label="Annual"
-		supporting={
-			<>
-				Subscribe for <strong>12 months</strong> and save 10% £135 for 1
-				year then standard rate (£150 every year)
-			</>
-		}
-	/>,
-];
-/* eslint-enable react/jsx-key */
-
-const narrow = css`
-	width: 30rem;
-`;
-const supportingTextLight = () => (
-	<ThemeProvider theme={radioDefault}>
-		<div css={narrow}>
-			<RadioGroup name="payment-options">
-				{radiosWithSupportingText.map((radio, index) =>
-					React.cloneElement(radio, { key: index }),
-				)}
-			</RadioGroup>
-		</div>
-	</ThemeProvider>
-);
-supportingTextLight.story = {
-	name: `supporting text default`,
-	parameters: {
-		backgrounds: {
-			default: 'default',
-			values: [storybookBackgrounds.default],
-		},
-	},
-};
-
-const supportingTextBlue = () => (
-	<ThemeProvider theme={radioBrand}>
-		<div css={narrow}>
-			<RadioGroup name="payment-options">
-				{radiosWithSupportingText.map((radio, index) =>
-					React.cloneElement(radio, { key: index }),
-				)}
-			</RadioGroup>
-		</div>
-	</ThemeProvider>
-);
-
-supportingTextBlue.story = {
-	name: `supporting text brand`,
-	parameters: {
-		backgrounds: {
-			default: 'brand',
-			values: [storybookBackgrounds.brand],
-		},
-	},
-};
-
-export { supportingTextLight, supportingTextBlue };
diff --git a/src/core/components/radio/stories/radio/ungrouped.tsx b/src/core/components/radio/stories/radio/ungrouped.tsx
deleted file mode 100644
index 3b53ba50c..000000000
--- a/src/core/components/radio/stories/radio/ungrouped.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Radio, radioDefault } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-/* eslint-disable react/jsx-key */
-const radios = [
-	<Radio value="red" label="Red" name="colours" />,
-	<Radio value="green" label="Green" name="colours" defaultChecked={true} />,
-	<Radio value="blue" label="Blue" name="colours" />,
-];
-/* eslint-enable react/jsx-key */
-
-const ungrouped = () => (
-	<ThemeProvider theme={radioDefault}>
-		{radios.map((radio, index) =>
-			React.cloneElement(radio, { key: index }),
-		)}
-	</ThemeProvider>
-);
-
-ungrouped.story = {
-	name: 'ungrouped',
-};
-
-export { ungrouped };
diff --git a/src/core/components/radio/stories/radio/unlabelled.tsx b/src/core/components/radio/stories/radio/unlabelled.tsx
deleted file mode 100644
index 39e67a9aa..000000000
--- a/src/core/components/radio/stories/radio/unlabelled.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { Radio, radioDefault } from '../../index';
-import { ThemeProvider } from '@emotion/react';
-
-const unlabelled = () => (
-	<ThemeProvider theme={radioDefault}>
-		<Radio value="red" defaultChecked={true} aria-label="Red" />
-	</ThemeProvider>
-);
-
-unlabelled.story = {
-	name: 'unlabelled',
-};
-
-export { unlabelled };