From 34ba928a763633f20b10d3378023d9d4faae07fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Mon, 18 May 2020 16:09:49 +0200
Subject: [PATCH] Add story with radio examples

[MAILPOET-2773]
---
 .../src/common/form/radio/_stories/radio.tsx  | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 assets/js/src/common/form/radio/_stories/radio.tsx

diff --git a/assets/js/src/common/form/radio/_stories/radio.tsx b/assets/js/src/common/form/radio/_stories/radio.tsx
new file mode 100644
index 0000000000..30bf5a5640
--- /dev/null
+++ b/assets/js/src/common/form/radio/_stories/radio.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Radio from '../radio';
+import RadioGroup from '../group';
+import Heading from '../../../typography/heading/heading';
+
+export default {
+  title: 'Form',
+  component: Radio,
+};
+
+const options = [
+  { value: 1, label: 'Group option 1' },
+  { value: 2, label: 'Group option 2' },
+];
+
+export const Radios = () => (
+  <>
+    <Heading level={3}>Inline individual radios</Heading>
+    <div>
+      <Radio
+        onChange={action('radio-individual-1')}
+        name="story"
+        value="1"
+      >
+        Option 1
+      </Radio>
+      <Radio
+        onChange={action('radio-individual-2')}
+        name="story"
+        value="2"
+      >
+        Option 2
+      </Radio>
+    </div>
+    <br />
+
+    <Heading level={3}>Full-width individual radios</Heading>
+    <div>
+      <Radio
+        isFullWidth
+        onChange={action('radio-full-individual-1')}
+        name="story-full"
+        value="1"
+      >
+        Option 1
+      </Radio>
+      <Radio
+        isFullWidth
+        onChange={action('radio-full-individual-2')}
+        name="story-full"
+        value="2"
+      >
+        Option 2
+      </Radio>
+    </div>
+    <br />
+
+    <Heading level={3}>Inline group radios</Heading>
+    <RadioGroup
+      defaultValue={1}
+      name="story-group"
+      onChange={action('radio-group')}
+      options={options}
+    />
+    <br />
+
+    <Heading level={3}>Full-width group radios</Heading>
+    <RadioGroup
+      name="story-group-full"
+      onChange={action('radio-group-full')}
+      options={options}
+      isFullWidth
+    />
+  </>
+);