feat: replaced memorable date month input with select (#2527)

trussworks · Oct 17, 2023 · d38b31b · d38b31b
1 parent 0fee2f5
commit d38b31b
Showing 1 changed file with 22 additions and 9 deletions.
diff --git a/src/components/forms/DateInput/DateInput.stories.tsx b/src/components/forms/DateInput/DateInput.stories.tsx
@@ -2,6 +2,9 @@ import React from 'react'
 import { DateInput } from './DateInput'
 import { DateInputGroup } from '../DateInputGroup/DateInputGroup'
 import { Fieldset } from '../Fieldset/Fieldset'
+import { Label } from '../Label/Label'
+import { Select } from '../Select/Select'
+import { FormGroup } from '../FormGroup/FormGroup'
 
 export default {
   title: 'Components/Date input',
@@ -55,17 +58,27 @@ export const yearDateInput = (): React.ReactElement => (
 export const dateOfBirthExample = (): React.ReactElement => (
   <Fieldset legend="Date of birth">
     <span className="usa-hint" id="dateOfBirthHint">
-      For example: 4 28 1986
+      For example: April 28 1986
     </span>
     <DateInputGroup>
-      <DateInput
-        id="testDateInput"
-        name="testName"
-        label="Month"
-        unit="month"
-        maxLength={2}
-        minLength={2}
-      />
+      <FormGroup className="usa-form-group--month usa-form-group--select">
+        <Label htmlFor="input-select">Month</Label>
+        <Select id="testDateInput" name="testDateInput">
+          <option>- Select -</option>
+          <option value="1">01 - January</option>
+          <option value="2">02 - February</option>
+          <option value="3">03 - March</option>
+          <option value="4">04 - April</option>
+          <option value="5">05 - May</option>
+          <option value="6">06 - June</option>
+          <option value="7">07 - July</option>
+          <option value="8">08 - August</option>
+          <option value="9">09 - September</option>
+          <option value="10">10 - October</option>
+          <option value="11">11 - November</option>
+          <option value="12">12 - December</option>
+        </Select>
+      </FormGroup>
       <DateInput
         id="testDateInput"
         name="testName"