Allow icons and small dimension in <Datepicker> component

[MAILPOET-2787]

assets/css/src/components/_datepicker.scss

@@ -1,9 +1,6 @@
 @import '../../../../node_modules/react-datepicker/src/stylesheets/datepicker';
 
 .mailpoet-datepicker {
-  display: inline-block;
-  vertical-align: middle;
-
   .react-datepicker {
     background-color: $color-input-background;
     border: solid 1px $color-tertiary-light;

assets/css/src/generic/_forms-input.scss

@@ -44,7 +44,13 @@
     width: $form-control-icon;
 
     &:first-child {
-      margin: 0 (-$form-control-spacing) 0 $form-control-spacing;
+      margin: 0 (-$form-control-spacing - $form-control-icon) 0 $form-control-spacing;
+    }
+
+    + input,
+    + select,
+    + * input {
+      padding-left: $form-control-icon + 2 * $form-control-spacing;
     }
 
     &:last-child {

assets/css/src/generic/_forms-select.scss

@@ -7,9 +7,6 @@
   }
 
   > svg {
-    &:first-child { margin-right: -($form-control-icon + $form-control-spacing); }
-    + select { padding-left: $form-control-icon + 2 * $form-control-spacing; }
-
     ~ .mailpoet-form-react-select .mailpoet-form-react-select__value-container {
       padding-left: $form-control-icon + 2 * $form-control-spacing !important;
     }

assets/js/src/common/datepicker/_stories/datepicker.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import Datepicker from '../datepicker';
 import Heading from '../../typography/heading/heading';
+import Icon from '../icon/calendar';
 
 export default {
   title: 'Datepickers',
@@ -27,12 +28,48 @@ const DatepickerWrapper = ({
 
 export const Datepickers = () => (
   <>
+    <Heading level={3}>Small datepicker</Heading>
+    <div>
+      <DatepickerWrapper
+        dateFormat="MMMM d, yyyy"
+        dimension="small"
+        onChange={action('normal datepicker')}
+      />
+      <div className="mailpoet-gap" />
+      <DatepickerWrapper
+        dateFormat="MMMM d, yyyy"
+        dimension="small"
+        onChange={action('normal datepicker')}
+        iconStart={Icon}
+      />
+      <div className="mailpoet-gap" />
+      <DatepickerWrapper
+        dateFormat="MMMM d, yyyy"
+        dimension="small"
+        onChange={action('normal datepicker')}
+        iconEnd={Icon}
+      />
+    </div>
+    <br />
+
     <Heading level={3}>Datepicker</Heading>
     <div>
       <DatepickerWrapper
         dateFormat="MMMM d, yyyy"
         onChange={action('normal datepicker')}
       />
+      <div className="mailpoet-gap" />
+      <DatepickerWrapper
+        dateFormat="MMMM d, yyyy"
+        onChange={action('normal datepicker')}
+        iconStart={Icon}
+      />
+      <div className="mailpoet-gap" />
+      <DatepickerWrapper
+        dateFormat="MMMM d, yyyy"
+        onChange={action('normal datepicker')}
+        iconEnd={Icon}
+      />
     </div>
     <br />
 
@@ -55,5 +92,16 @@ export const Datepickers = () => (
       />
     </div>
     <br />
+
+    <Heading level={3}>Full-width datepicker</Heading>
+    <div>
+      <DatepickerWrapper
+        dateFormat="MMMM d, yyyy"
+        isFullWidth
+        onChange={action('disabled datepicker')}
+        iconStart={Icon}
+      />
+    </div>
+    <br />
   </>
 );

assets/js/src/common/datepicker/datepicker.tsx

@@ -3,9 +3,17 @@ import classnames from 'classnames';
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
 
 type Props = ReactDatePickerProps & {
+  dimension?: 'small',
+  isFullWidth?: boolean,
+  iconStart?: JSX.Element,
+  iconEnd?: JSX.Element,
 };
 
 const Datepicker = ({
+  dimension,
+  isFullWidth,
+  iconStart,
+  iconEnd,
   ...props
 }: Props) => (
   <div
@@ -13,15 +21,19 @@ const Datepicker = ({
       classnames(
         'mailpoet-datepicker mailpoet-form-input',
         {
+          [`mailpoet-form-input-${dimension}`]: dimension,
           'mailpoet-disabled': props.disabled,
+          'mailpoet-full-width': isFullWidth,
         }
       )
     }
   >
+    {iconStart}
     <ReactDatePicker
       useWeekdaysShort
       {...props} // eslint-disable-line react/jsx-props-no-spreading
     />
+    {iconEnd}
   </div>
 );
 

assets/js/src/common/datepicker/icon/calendar.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default (
+  <svg viewBox="0 0 24 24">
+    <path d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z" />
+  </svg>
+);