From c00bead4d1a9c45b1ae618a0064ec69c7b1b6647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Tue, 19 May 2020 10:51:34 +0200
Subject: [PATCH] Add story for Toggle component

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

diff --git a/assets/js/src/common/form/toggle/_stories/toggle.tsx b/assets/js/src/common/form/toggle/_stories/toggle.tsx
new file mode 100644
index 0000000000..0983c38717
--- /dev/null
+++ b/assets/js/src/common/form/toggle/_stories/toggle.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Toggle from '../toggle';
+import Heading from '../../../typography/heading/heading';
+import Grid from '../../../grid';
+
+export default {
+  title: 'Form',
+  component: Toggle,
+};
+
+export const Toggles = () => (
+  <>
+    <Heading level={3}>Toggles</Heading>
+    <Grid.Column dimension="small">
+      <Grid.SpaceBetween>
+        <label htmlFor="toggle-1">Toggle regular</label>
+        <Toggle
+          onCheck={action('toggle-1')}
+          id="toggle-1"
+          name="toggle-1"
+        />
+      </Grid.SpaceBetween>
+      <div className="mailpoet-gap" />
+      <Grid.SpaceBetween>
+        <label htmlFor="toggle-2">Toggle small</label>
+        <Toggle
+          onCheck={action('toggle-2')}
+          dimension="small"
+          id="toggle-2"
+          name="toggle-2"
+        />
+      </Grid.SpaceBetween>
+    </Grid.Column>
+  </>
+);