feat: Add DateRangePicker Component (#983)

src/components/forms/DatePicker/DatePicker.tsx

@@ -24,14 +24,14 @@ import {
 } from './utils'
 import { Calendar } from './Calendar'
 
-interface DatePickerProps {
+interface BaseDatePickerProps {
   id: string
   name: string
   className?: string
   disabled?: boolean
   required?: boolean
   defaultValue?: string
-  minDate: string
+  minDate?: string
   maxDate?: string
   rangeDate?: string
   onChange?: (val?: string) => void
@@ -40,6 +40,8 @@ interface DatePickerProps {
   ) => void
 }
 
+export type DatePickerProps = BaseDatePickerProps & Omit<JSX.IntrinsicElements['input'], "onChange">
+
 export enum FocusMode {
   None,
   Input,
@@ -48,6 +50,7 @@ export enum FocusMode {
 export const DatePicker = ({
   id,
   name,
+  className,
   defaultValue,
   disabled,
   required,
@@ -57,7 +60,7 @@ export const DatePicker = ({
   onChange,
   onBlur,
   ...inputProps
-}: DatePickerProps & JSX.IntrinsicElements['input']): React.ReactElement => {
+}: DatePickerProps): React.ReactElement => {
   const datePickerEl = useRef<HTMLDivElement>(null)
   const externalInputEl = useRef<HTMLInputElement>(null)
 
@@ -236,7 +239,8 @@ export const DatePicker = ({
     'usa-date-picker--initialized',
     {
       'usa-date-picker--active': showCalendar,
-    }
+    },
+    className
   )
 
   return (

src/components/forms/DateRangePicker/DateRangePicker.stories.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+
+import { DateRangePicker } from './DateRangePicker'
+import { Form } from '../Form/Form'
+import { addDays, formatDate } from '../DatePicker/utils'
+
+export default {
+  title: 'Components/Form controls/Date range picker',
+  component: DateRangePicker,
+  argTypes: {
+    onSubmit: { 
+      action: 'submitted' 
+    },
+    startDatePickerDisabled: { 
+      control: { type: 'boolean' },
+      defaultValue: false
+    },
+    endDatePickerDisabled: { 
+      control: { type: 'boolean' },
+      defaultValue: false
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+  ### USWDS 2.0 Date Range Picker component
+  Source: https://designsystem.digital.gov/components/form-controls/#date-range-picker
+        `
+      },
+    },
+  },
+}
+
+export const completeDateRangePicker = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <DateRangePicker 
+      startDateLabel="Event start date"
+      startDateHint="mm/dd/yyyy"
+      startDatePickerProps={{
+        id: "event-date-start",
+        name: "event-date-start",
+        disabled: argTypes.startDatePickerDisabled
+      }}
+      endDateLabel="Event end date"
+      endDateHint="mm/dd/yyyy"
+      endDatePickerProps={{
+        id: "event-date-end",
+        name: "event-date-end",
+        disabled: argTypes.endDatePickerDisabled
+      }}
+    />
+  </Form> 
+)
+
+export const withDefaultValues = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <DateRangePicker 
+      startDateLabel="Event start date"
+      startDateHint="mm/dd/yyyy"
+      startDatePickerProps={{
+        id: "event-date-start",
+        name: "event-date-start",
+        defaultValue: "2021-01-20",
+        disabled: argTypes.startDatePickerDisabled
+      }}
+      endDateLabel="Event end date"
+      endDateHint="mm/dd/yyyy"
+      endDatePickerProps={{
+        id: "event-date-end",
+        name: "event-date-end",
+        defaultValue: "2021-01-25",
+        disabled: argTypes.endDatePickerDisabled
+      }}
+    />
+  </Form> 
+)
+
+export const withAllowableRanges = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <DateRangePicker 
+      startDateLabel="Event start date"
+      startDateHint="mm/dd/yyyy"
+      startDatePickerProps={{
+        id: "event-date-start",
+        name: "event-date-start",
+        minDate: "2021-01-01",
+        maxDate: "2021-01-20",
+        disabled: argTypes.startDatePickerDisabled
+      }}
+      endDateLabel="Event end date"
+      endDateHint="mm/dd/yyyy"
+      endDatePickerProps={{
+        id: "event-date-end",
+        name: "event-date-end",
+        minDate: "2021-01-20",
+        maxDate: "2021-01-25",
+        disabled: argTypes.endDatePickerDisabled
+      }}
+    />
+  </Form> 
+)