'DateSelector'

lib/components/atoms/Select/Select.js

@@ -35,9 +35,13 @@ const Select = ({
     data-locator={elementLocator || `select-input-${name}-${id}`}
     {...others}
   >
-    {placeholder && <option value="">{placeholder}</option>}
-    {options.map(opt => (
-      <option key={opt} value={opt}>
+    {placeholder && (
+      <option value="" disabled selected>
+        {placeholder}
+      </option>
+    )}
+    {options.map((opt, index) => (
+      <option key={`${name}_${index.toString()}`} value={opt}>
         {opt}
       </option>
     ))}
@@ -46,10 +50,10 @@ const Select = ({
 
 Select.defaultProps = {
   disabled: false,
-  selectedOption: '',
-  placeholder: '',
-  className: '',
-  elementLocator: '',
+  selectedOption: 'select',
+  placeholder: 'Select',
+  className: 'select',
+  elementLocator: 'select',
 };
 
 export default styled(Select)`

lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap

@@ -2,8 +2,8 @@
 
 exports[`Select Styled component should render correctly 1`] = `
 <select
-  className=""
-  data-locator="select-input-userType-undefined"
+  className="select"
+  data-locator="select"
   disabled={false}
   name="userType"
   theme={
@@ -221,16 +221,23 @@ exports[`Select Styled component should render correctly 1`] = `
       },
     }
   }
-  value=""
+  value="select"
 >
   <option
-    key="Option 1"
+    disabled={true}
+    selected={true}
+    value=""
+  >
+    Select
+  </option>
+  <option
+    key="userType_0"
     value="Option 1"
   >
     Option 1
   </option>
   <option
-    key="Option 2"
+    key="userType_1"
     value="Option 2"
   >
     Option 2

lib/components/atoms/Select/tests/__snapshots__/Select.test.js.snap

@@ -2,22 +2,29 @@
 
 exports[`Select Component should render correctly 1`] = `
 <select
-  className=""
+  className="select"
   data-locator="my-custom-select-locator"
   disabled={false}
   id="dropdown-1"
   name="my-drop"
   onChange={[Function]}
-  value=""
+  value="select"
 >
   <option
-    key="Option 1"
+    disabled={true}
+    selected={true}
+    value=""
+  >
+    Select
+  </option>
+  <option
+    key="my-drop_0"
     value="Option 1"
   >
     Option 1
   </option>
   <option
-    key="Option 2"
+    key="my-drop_1"
     value="Option 2"
   >
     Option 2

lib/components/molecules/DateSelector/DateSelector.js

@@ -0,0 +1,170 @@
+// @flow
+/**
+ *
+ * DateSelector
+ *
+ */
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import classNames from 'classnames';
+import styles from './DateSelector.style';
+import type { Props } from './types';
+import Select from '../../atoms/Select';
+import Label from '../../atoms/Label';
+
+const DateSelector = ({ id, className, format, startDate, endDate, locale }: Props): Node => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [months, setMonths] = useState([]);
+
+  const getMonths = () => {
+    const date = new Date();
+    const monthsOptions = [];
+    for (let i = 0; i < 12; i += 1) {
+      date.setMonth(i);
+      monthsOptions.push(date.toLocaleString(locale, { month: 'long' }));
+    }
+    return monthsOptions;
+  };
+
+  useEffect(() => {
+    setMonths(getMonths());
+  }, []);
+
+  useEffect(() => {
+    setSelectedDate(startDate);
+  }, [startDate, endDate]);
+
+  const getDaysInMonth = () => {
+    const daysOptions = [];
+    let startDay = 1;
+    let endDay = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 0).getDate();
+    if (
+      selectedDate.getMonth() === startDate.getMonth() &&
+      selectedDate.getFullYear() === startDate.getFullYear()
+    ) {
+      startDay = startDate.getDate();
+    }
+    if (
+      selectedDate.getMonth() === endDate.getMonth() &&
+      selectedDate.getFullYear() === endDate.getFullYear()
+    ) {
+      endDay = endDate.getDate();
+    }
+    for (let i = startDay; i <= endDay; i += 1) {
+      daysOptions.push(i);
+    }
+    return daysOptions;
+  };
+
+  const getMonthOptions = () => {
+    let monthOptions = [...months];
+    if (selectedDate.getFullYear() === startDate.getFullYear()) {
+      const startMonth = startDate.getMonth();
+      monthOptions = monthOptions.slice(startMonth, months.length);
+    }
+    if (selectedDate.getFullYear() === endDate.getFullYear()) {
+      const endMonth = endDate.getMonth();
+      monthOptions = monthOptions.slice(0, endMonth + 1);
+    }
+    return monthOptions;
+  };
+
+  const getYearOptions = () => {
+    const years = [];
+    for (let i = startDate.getFullYear(); i <= endDate.getFullYear(); i += 1) {
+      years.push(i);
+    }
+    return years;
+  };
+
+  const DaySelector = (
+    <>
+      <Label htmlFor={`${id}-day`} />
+      <Select
+        onChange={e => {
+          return setSelectedDate(
+            new Date(selectedDate.getFullYear(), selectedDate.getMonth(), e.target.value)
+          );
+        }}
+        id={`${id}-day`}
+        name="day"
+        className={classNames('date', className)}
+        selectedOption={selectedDate.getDate()}
+        options={getDaysInMonth()}
+      />
+    </>
+  );
+
+  const MonthSelector = (
+    <>
+      <Label htmlFor={`${id}-month`} />
+      <Select
+        onChange={e => {
+          return setSelectedDate(
+            new Date(
+              selectedDate.getFullYear(),
+              months.indexOf(e.target.value),
+              selectedDate.getDate()
+            )
+          );
+        }}
+        id={`${id}-month`}
+        name="month"
+        className={classNames('month', className)}
+        selectedOption={months[selectedDate.getMonth()]}
+        options={getMonthOptions()}
+      />
+    </>
+  );
+
+  const YearSelector = (
+    <>
+      <Label htmlFor={`${id}-year`} />
+      <Select
+        onChange={e => {
+          return setSelectedDate(
+            new Date(e.target.value, selectedDate.getMonth(), selectedDate.getDate())
+          );
+        }}
+        id={`${id}-year`}
+        name="year"
+        className={classNames('year', className)}
+        selectedOption={selectedDate.getFullYear()}
+        options={getYearOptions()}
+      />
+    </>
+  );
+
+  const renderSelector = value => {
+    switch (value.toLowerCase()) {
+      case 'mmddyy':
+      case 'mmddyyyy':
+        return [MonthSelector, DaySelector, YearSelector];
+      case 'mmyy':
+      case 'mmyyyy':
+        return [MonthSelector, YearSelector];
+      case 'ddmmyy':
+      case 'ddmmyyyy':
+      default:
+        return [DaySelector, MonthSelector, YearSelector];
+    }
+  };
+
+  return <div className={className}>{renderSelector(format)}</div>;
+};
+
+DateSelector.defaultProps = {
+  id: 'date-selector',
+  className: 'date-selector',
+  format: 'ddmmyy',
+  startDate: new Date(),
+  endDate: new Date(new Date().setFullYear(new Date().getFullYear() + 50)),
+  locale: 'default',
+};
+
+export default styled(DateSelector)`
+  ${styles};
+`;
+
+export { DateSelector as DateSelectorVanilla };

lib/components/molecules/DateSelector/DateSelector.mock.js

@@ -0,0 +1,44 @@
+const dateSelectorDefaultProps = {
+  className: 'example',
+  defaultValue: new Date(),
+  format: 'ddmmyy',
+};
+
+const mmddyyFormatProps = {
+  className: 'example',
+  format: 'mmddyy',
+  startDate: new Date(),
+};
+
+const monthYearOnlyProps = {
+  className: 'example',
+  format: 'mmyy',
+};
+
+const startDateProps = {
+  className: 'example',
+  format: 'ddmmyy',
+  startDate: new Date(955865024000),
+};
+
+const endDateProps = {
+  className: 'example',
+  format: 'ddmmyy',
+  endDate: new Date(2555865024000),
+};
+
+const startAndEndDateProps = {
+  className: 'example',
+  format: 'ddmmyy',
+  startDate: new Date(955865024000),
+  endDate: new Date(2555865024000),
+};
+
+export {
+  dateSelectorDefaultProps,
+  mmddyyFormatProps,
+  monthYearOnlyProps,
+  startDateProps,
+  endDateProps,
+  startAndEndDateProps,
+};

lib/components/molecules/DateSelector/DateSelector.story.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+// import { action } from '@storybook/addon-actions';
+import {
+  dateSelectorDefaultProps,
+  mmddyyFormatProps,
+  monthYearOnlyProps,
+  startDateProps,
+  endDateProps,
+  startAndEndDateProps,
+} from './DateSelector.mock';
+
+// Import Styled Component to showcase variations
+import DateSelector, { DateSelectorVanilla } from '.';
+
+storiesOf('Molecules/DateSelector', module)
+  .addParameters({ jest: ['DateSelector', 'DateSelectorVanilla'] })
+  .add('Knobs', () => <DateSelectorVanilla {...dateSelectorDefaultProps} />)
+  .add('DateSelector format ddmmyyyy', () => <DateSelector {...dateSelectorDefaultProps} />)
+  .add('DateSelector format mmddyyyy', () => <DateSelector {...mmddyyFormatProps} />)
+  .add('DateSelector format mmyyyy', () => <DateSelector {...monthYearOnlyProps} />)
+  .add('DateSelector with Start Date', () => <DateSelector {...startDateProps} />)
+  .add('DateSelector with End Date', () => <DateSelector {...endDateProps} />)
+  .add('DateSelector with Start and End Date', () => <DateSelector {...startAndEndDateProps} />);

lib/components/molecules/DateSelector/DateSelector.style.js

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export default css`
+  ${props => (props.inheritedStyles ? props.inheritedStyles : '')};
+`;

lib/components/molecules/DateSelector/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { default } from './DateSelector';
+export { DateSelectorVanilla } from './DateSelector';