From b77394ddca93ca495abcbc7d18b82733bd22d16a 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:41 +0200
Subject: [PATCH] Add story with checkbox examples

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

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