Add story for inputs

[MAILPOET-2772]

assets/css/src/generic/_helpers.scss

@@ -1,3 +1,8 @@
 .mailpoet-full-width {
   width: 100%;
 }
+
+.mailpoet-gap {
+	display: block;
+	height: $grid-gap;
+}

assets/js/src/common/form/input/_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/input/_stories/input.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Input from '../input';
+import Heading from '../../../typography/heading/heading';
+import icon from './assets/icon';
+
+export default {
+  title: 'Form',
+  component: Input,
+};
+
+export const Inputs = () => (
+  <>
+    <Heading level={3}>Small inputs</Heading>
+    <p>
+      <Input
+        type="text"
+        size="small"
+        placeholder="Small input value"
+      />
+      <div className="mailpoet-gap" />
+      <Input
+        type="text"
+        placeholder="Small input with iconStart"
+        size="small"
+        iconStart={icon}
+      />
+      <div className="mailpoet-gap" />
+      <Input
+        type="text"
+        placeholder="Small input with iconEnd"
+        size="small"
+        iconEnd={icon}
+      />
+      <div className="mailpoet-gap" />
+      <Input
+        type="text"
+        placeholder="Small input with both icons"
+        size="small"
+        iconStart={icon}
+        iconEnd={icon}
+      />
+    </p>
+    <br />
+    <Heading level={3}>Regular inputs</Heading>
+    <p>
+      <Input
+        type="text"
+        placeholder="Regular input"
+      />
+      <div className="mailpoet-gap" />
+      <Input
+        type="text"
+        placeholder="Regular input with iconStart"
+        iconStart={icon}
+      />
+      <div className="mailpoet-gap" />
+      <Input
+        type="text"
+        placeholder="Regular input with iconEnd"
+        iconEnd={icon}
+      />
+      <div className="mailpoet-gap" />
+      <Input
+        type="text"
+        placeholder="Regular input with both icons"
+        iconStart={icon}
+        iconEnd={icon}
+      />
+    </p>
+    <br />
+    <Heading level={3}>Full-width inputs</Heading>
+    <p>
+      <Input
+        type="text"
+        placeholder="Full-width input"
+        isFullWidth
+      />
+      <Input
+        type="text"
+        placeholder="Full-width input with iconStart"
+        isFullWidth
+        iconStart={icon}
+      />
+      <Input
+        type="text"
+        placeholder="Full-width input with iconEnd"
+        isFullWidth
+        iconEnd={icon}
+      />
+      <Input
+        type="text"
+        placeholder="Full-width input with both icons"
+        isFullWidth
+        iconStart={icon}
+        iconEnd={icon}
+      />
+    </p>
+    <br />
+  </>
+);