New Component: Time picker

[haworku]

Time Picker

Description

A time picker helps users select a specific time. It is a specialized combo box, see the combo box documentation for complete usability guidance.

Requirements (proposed)

Prop Interface

Props = {
  id: string
  name: string
  defaultValue?: string
  disabled?: boolean
  onChange: (val?: string) => void
  minTime: string // hh:mm format
  maxTime: string // hh:mm format
  step? : number //The number of minutes between options. Defaults to 30.
  hint?: string 

}

Render

  return (
  <FormGroup>
      <Label htmlFor={id}>{label}</Label>
      {hint && (
        <div className="usa-hint" id={`${id}-hint`}>
          {hint}
        </div>
      )}

      <div class="usa-time-picker">
        <ComboBox
          options={optionsList}
          {...ComboBoxProps}
        />
      </div>
    </FormGroup>

Example Implementation (proposed)

<TimePicker
   id="appointment-time"
   name="appointment-time"
   defaultValue="10:00"
   onChange: someFunction
   minTime="08:00"
   maxTime="15:00"
   step={60}
/>

More Details

• The react-uswds FormGroup is the root element
• The options list, a required prop for ComboBox, should be dynamically created using the minTime, maxTime and step.
• Some small refactors to ComboBox may be needed. For example, surfacing a prop on ComboBox to pass in custom filter logic, for example a regular expression, to match numbers or hh:mm formated times.