Add story for ReactSelect component

[MAILPOET-2772]

assets/js/src/common/form/react_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>
+);

assets/js/src/common/form/react_select/_stories/react_select.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Select from '../react_select';
+import Heading from '../../../typography/heading/heading';
+import icon from './assets/icon';
+
+export default {
+  title: 'Form',
+  component: Select,
+};
+
+export const ReactSelect = () => {
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' },
+  ];
+
+  return (
+    <>
+      <Heading level={3}>Small select boxes</Heading>
+      <div>
+        <Select
+          dimension="small"
+          options={options}
+          placeholder="Select single value"
+          onChange={action('small single')}
+        />
+        <div className="mailpoet-gap" />
+        <Select
+          dimension="small"
+          iconStart={icon}
+          options={options}
+          isMulti
+          placeholder="Select multiple values"
+          onChange={action('small multi')}
+        />
+      </div>
+      <br />
+      <Heading level={3}>Regular select boxes</Heading>
+      <div>
+        <Select
+          options={options}
+          placeholder="Select single value"
+          onChange={action('regular single')}
+        />
+        <div className="mailpoet-gap" />
+        <Select
+          iconStart={icon}
+          options={options}
+          defaultValue={options[2]}
+          onChange={action('regular single')}
+        />
+        <div className="mailpoet-gap" />
+        <Select
+          options={options}
+          placeholder="Select multiple values"
+          isMulti
+          onChange={action('regular multi')}
+        />
+        <div className="mailpoet-gap" />
+        <Select
+          iconStart={icon}
+          options={options}
+          isMulti
+          defaultValue={[options[2], options[1]]}
+          onChange={action('regular multi')}
+        />
+      </div>
+      <br />
+      <Heading level={3}>Full-width select boxes</Heading>
+      <div>
+        <Select
+          isFullWidth
+          options={options}
+          isMulti
+          placeholder="Select multiple values"
+          onChange={action('full-width multi')}
+        />
+        <div className="mailpoet-gap" />
+        <Select
+          isFullWidth
+          iconStart={icon}
+          options={options}
+          placeholder="Select single value"
+          onChange={action('full-width single')}
+        />
+      </div>
+      <br />
+    </>
+  );
+};

assets/js/src/common/form/select/_stories/select.tsx

@@ -9,7 +9,7 @@ export default {
   component: Select,
 };
 
-export const SelectBoxes = () => (
+export const NativeSelect = () => (
   <>
     <Heading level={3}>Small select boxes</Heading>
     <div>