DateInput Component for Forms

src/components/forms/DateInput/DateInput.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { DateInput } from './DateInput'
+import { DateInputGroup } from '../DateInputGroup/DateInputGroup'
+import { Fieldset } from '../Fieldset/Fieldset'
+
+export default {
+  title: 'Forms/DateInput',
+  parameters: {
+    info: `
+USWDS 2.0 DateInput component
+
+Source: https://designsystem.digital.gov/components/form-controls/#date-input
+`,
+  },
+}
+
+export const monthDateInput = (): React.ReactElement => (
+  <DateInput
+    id="testDateInput"
+    name="testName"
+    label="Month"
+    unit="month"
+    maxLength={2}
+    minLength={2}
+  />
+)
+
+export const dayDateInput = (): React.ReactElement => (
+  <DateInput
+    id="testDateInput"
+    name="testName"
+    label="Day"
+    unit="day"
+    maxLength={2}
+    minLength={1}
+  />
+)
+
+export const yearDateInput = (): React.ReactElement => (
+  <DateInput
+    id="testDateInput"
+    name="testName"
+    label="Year"
+    unit="year"
+    maxLength={4}
+    minLength={4}
+  />
+)
+
+export const dateOfBirthExample = (): React.ReactElement => (
+  <Fieldset legend="Date of birth">
+    <span className="usa-hint" id="dateOfBirthHint">
+      For example: 4 28 1986
+    </span>
+    <DateInputGroup>
+      <DateInput
+        id="testDateInput"
+        name="testName"
+        label="Month"
+        unit="month"
+        maxLength={2}
+        minLength={2}
+      />
+      <DateInput
+        id="testDateInput"
+        name="testName"
+        label="Day"
+        unit="day"
+        maxLength={2}
+        minLength={2}
+      />
+      <DateInput
+        id="testDateInput"
+        name="testName"
+        label="Year"
+        unit="year"
+        maxLength={4}
+        minLength={4}
+      />
+    </DateInputGroup>
+  </Fieldset>
+)

src/components/forms/DateInput/DateInput.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { DateInput } from './DateInput'
+
+describe('DateInput component', () => {
+  it('renders without errors', () => {
+    const { getByText } = render(
+      <DateInput
+        id="testDateInput"
+        name="testName"
+        label="Day"
+        unit="day"
+        maxLength={2}
+        minLength={2}
+      />
+    )
+    expect(getByText('Day')).toBeInTheDocument()
+  })
+
+  it('renders the month, day and year inputs', () => {
+    const { getByText } = render(
+      <>
+        <DateInput
+          id="testDateInput"
+          name="testName"
+          label="Day"
+          unit="day"
+          maxLength={2}
+          minLength={2}
+        />
+        <DateInput
+          id="testDateInput"
+          name="testName"
+          label="Month"
+          unit="month"
+          maxLength={2}
+          minLength={2}
+        />
+        <DateInput
+          id="testDateInput"
+          name="testName"
+          label="Year"
+          unit="year"
+          maxLength={4}
+          minLength={4}
+        />
+      </>
+    )
+    expect(getByText('Month')).toBeInTheDocument()
+    expect(getByText('Day')).toBeInTheDocument()
+    expect(getByText('Year')).toBeInTheDocument()
+  })
+
+  it('renders the correct class based on unit', () => {
+    const { getByTestId } = render(
+      <DateInput
+        id="testDateInput"
+        name="testName"
+        label="Day"
+        unit="day"
+        maxLength={2}
+        minLength={2}
+      />
+    )
+    expect(getByTestId('formGroup')).toHaveClass('usa-form-group--day')
+  })
+})

src/components/forms/DateInput/DateInput.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { TextInput } from '../TextInput/TextInput'
+import { Label } from '../Label/Label'
+import { FormGroup } from '../FormGroup/FormGroup'
+
+interface DateInputElementProps {
+  id: string
+  name: string
+  label: string
+  unit: 'month' | 'day' | 'year'
+  maxLength: number
+  minLength?: number
+}
+
+export const DateInput = (
+  props: DateInputElementProps & React.InputHTMLAttributes<HTMLInputElement>
+): React.ReactElement => {
+  const {
+    id,
+    name,
+    label,
+    unit,
+    maxLength,
+    minLength,
+    className,
+    ...inputProps
+  } = props
+
+  const formGroupClasses = classnames({
+    'usa-form-group--month': unit == 'month',
+    'usa-form-group--day': unit == 'day',
+    'usa-form-group--year': unit == 'year',
+  })
+
+  const inputClasses = classnames('usa-input--inline', className)
+
+  return (
+    <FormGroup className={formGroupClasses}>
+      <Label htmlFor={id}>{label}</Label>
+      <TextInput
+        {...inputProps}
+        className={inputClasses}
+        id={id}
+        name={name}
+        type="text"
+        maxLength={maxLength}
+        minLength={minLength}
+        pattern="[0-9]*"
+        inputMode="numeric"
+      />
+    </FormGroup>
+  )
+}
+
+export default DateInput

src/components/forms/DateInputGroup/DateInputGroup.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { DateInputGroup } from './DateInputGroup'
+
+describe('DateInputGroup component', () => {
+  it('renders without errors', () => {
+    const { getByTestId } = render(<DateInputGroup />)
+    expect(getByTestId('dateInputGroup')).toBeInTheDocument()
+  })
+
+  it('renders children', () => {
+    const { getByText } = render(<DateInputGroup>DATES</DateInputGroup>)
+
+    expect(getByText('DATES')).toBeInTheDocument()
+  })
+})

src/components/forms/DateInputGroup/DateInputGroup.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export const DateInputGroup = (
+  props: React.HTMLAttributes<HTMLElement>
+): React.ReactElement => {
+  const { children, className, ...divAttributes } = props
+
+  const classes = classnames('usa-memorable-date', className)
+
+  return (
+    <div className={classes} {...divAttributes} data-testid="dateInputGroup">
+      {children}
+    </div>
+  )
+}
+
+export default DateInputGroup

src/index.ts

@@ -16,6 +16,8 @@ export { Grid } from './components/grid/Grid/Grid'
 
 /** Form components */
 export { Checkbox } from './components/forms/Checkbox/Checkbox'
+export { DateInput } from './components/forms/DateInput/DateInput'
+export { DateInputGroup } from './components/forms/DateInputGroup/DateInputGroup'
 export { Dropdown } from './components/forms/Dropdown/Dropdown'
 export { ErrorMessage } from './components/forms/ErrorMessage/ErrorMessage'
 export { Fieldset } from './components/forms/Fieldset/Fieldset'