From 1ce07ad981c892e2dacb7bb694d3cd9da65dfc97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Wed, 6 May 2020 17:34:17 +0200
Subject: [PATCH] Add story for select boxes

[MAILPOET-2772]
---
 .../form/select/_stories/assets/icon.tsx      |  7 ++
 .../common/form/select/_stories/select.tsx    | 66 +++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 assets/js/src/common/form/select/_stories/assets/icon.tsx
 create mode 100644 assets/js/src/common/form/select/_stories/select.tsx

diff --git a/assets/js/src/common/form/select/_stories/assets/icon.tsx b/assets/js/src/common/form/select/_stories/assets/icon.tsx
new file mode 100644
index 0000000000..6877b67def
--- /dev/null
+++ b/assets/js/src/common/form/select/_stories/assets/icon.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default (
+  <svg viewBox="3 3 18 18">
+    <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+  </svg>
+);
diff --git a/assets/js/src/common/form/select/_stories/select.tsx b/assets/js/src/common/form/select/_stories/select.tsx
new file mode 100644
index 0000000000..062fc1be6f
--- /dev/null
+++ b/assets/js/src/common/form/select/_stories/select.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Select from '../select';
+import Heading from '../../../typography/heading/heading';
+import icon from './assets/icon';
+
+export default {
+  title: 'Form',
+  component: Select,
+};
+
+export const SelectBoxes = () => (
+  <>
+    <Heading level={3}>Small select boxes</Heading>
+    <p>
+      <Select size="small">
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </Select>
+      <div className="mailpoet-gap" />
+      <Select
+        size="small"
+        iconStart={icon}
+      >
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </Select>
+    </p>
+    <br />
+    <Heading level={3}>Regular select boxes</Heading>
+    <p>
+      <Select>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </Select>
+      <div className="mailpoet-gap" />
+      <Select iconStart={icon}>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </Select>
+    </p>
+    <br />
+    <Heading level={3}>Full-width select boxes</Heading>
+    <p>
+      <Select isFullWidth>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </Select>
+      <div className="mailpoet-gap" />
+      <Select
+        isFullWidth
+        iconStart={icon}
+      >
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </Select>
+    </p>
+    <br />
+  </>
+);