From bd4a51b7b370828ca4882f1addd44c878e4ae8b4 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Fri, 26 Mar 2021 09:23:01 -0400
Subject: [PATCH 01/12] Bump uswds version

---
 package.json | 4 ++--
 yarn.lock    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 1fb6f8e086..c0b48c5fc0 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
   "peerDependencies": {
     "react": "^16.x || ^17.x",
     "react-dom": "^16.x || ^17.x",
-    "uswds": "2.8.1"
+    "uswds": "2.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
@@ -126,7 +126,7 @@
     "ts-jest": "^26.1.2",
     "typescript": "^3.8.0",
     "url-loader": "^4.0.0",
-    "uswds": "2.8.1",
+    "uswds": "2.9.0",
     "webpack": "^4.41.0",
     "webpack-cli": "^4.0.0"
   },
diff --git a/yarn.lock b/yarn.lock
index 0648deaaee..8adee7c173 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13939,10 +13939,10 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-uswds@2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.8.1.tgz#937505ad8f7be4c131e6d4e01d0128cf0995a49c"
-  integrity sha512-x7RkaVFVuRxptsuUZka6Mc+wUUL98keorOUFVxrBIgd3KV18upuF5V7osm9sN/q6bGvwh2zJyfONETLUU8Eemg==
+uswds@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.9.0.tgz#002089d74582960099b0ee836f89f043cdf6d0bc"
+  integrity sha512-5IMVgMCUUlgWVFrB7Wf1qTvv5L3oDDlSsAgvJ02+/sV2uh4JzO9YPm3493RTaMuHTc+feRCuYyEIloXsEQY0Pg==
   dependencies:
     classlist-polyfill "^1.0.3"
     del "^5.1.0"

From 646de4e3ce775770c6659267068c59a4841bd86d Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Fri, 26 Mar 2021 09:43:10 -0400
Subject: [PATCH 02/12] Add accent style warm to Button component

---
 src/components/Button/Button.stories.tsx | 10 ++++++--
 src/components/Button/Button.test.tsx    | 32 ++++++++++++++++++++++++
 src/components/Button/Button.tsx         | 14 +++++++++--
 3 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 1c0872821f..9193638511 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -27,8 +27,14 @@ export const secondary = (): React.ReactElement => (
   </Button>
 )
 
-export const accent = (): React.ReactElement => (
-  <Button type="button" accent>
+export const accentCool = (): React.ReactElement => (
+  <Button type="button" accentStyle='cool'>
+    Click Me
+  </Button>
+)
+
+export const accentWarm = (): React.ReactElement => (
+  <Button type="button" accentStyle='warm'>
     Click Me
   </Button>
 )
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index 4a38fa7477..8d20e2a1a8 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -53,6 +53,27 @@ describe('Button component', () => {
       expect(queryByTestId('button')).toHaveClass('usa-button--big')
       expect(deprecationWarning).toHaveBeenCalledTimes(0)
     })
+
+    it('renders uswds class for cool accent style', () => {
+      const { queryByTestId } = render(
+        <Button type="button" accentStyle="cool">
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--accent-cool')
+      expect(deprecationWarning).toHaveBeenCalledTimes(0)
+    })
+
+    it('renders uswds class for warm accent style', () => {
+      const { queryByTestId } = render(
+        <Button type="button" accentStyle="warm">
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--accent-warm')
+      expect(deprecationWarning).toHaveBeenCalledTimes(0)
+    })
+
   })
 
   it('implements an onClick handler', () => {
@@ -67,6 +88,17 @@ describe('Button component', () => {
     expect(onClickFn).toHaveBeenCalledTimes(1)
   })
 
+  it('shows a deprecation warning for prop \'accent\'', () => {
+    const onClickFn = jest.fn()
+    const { getByText } = render(
+      <Button type="button" accent>
+        Click Me
+      </Button>
+    )
+
+    expect(deprecationWarning).toHaveBeenCalledTimes(1)
+  })
+
   it('accepts additional custom class names', () => {
     const { getByTestId } = render(
       <Button className="customClass" type="button">
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index bb38c27b90..d2eb99d98d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -7,7 +7,11 @@ interface ButtonProps {
   children: React.ReactNode
   secondary?: boolean
   base?: boolean
+  /**
+   * @deprecated since 1.14.0, use accentStyle
+   */
   accent?: boolean
+  accentStyle?: 'none' | 'cool' | 'warm'
   outline?: boolean
   inverse?: boolean
   size?: 'big' | 'small' // small is deprecated
@@ -32,6 +36,7 @@ export const Button = ({
     secondary,
     base,
     accent,
+    accentStyle = 'none',
     outline,
     inverse,
     size,
@@ -45,13 +50,17 @@ export const Button = ({
   }: ButtonProps & JSX.IntrinsicElements['button']): React.ReactElement => {
 
   if (big) {
-    deprecationWarning('Button property big is deprecated.  Use size')
+    deprecationWarning('Button property big is deprecated.  Use size.')
   }
 
   if (icon) {
     deprecationWarning('Button property icon is deprecated.')
   }
 
+  if (accent) {
+    deprecationWarning('Button property accent is deprecated. Use accentStyle.')
+  }
+
   const isBig = size ? size === 'big' : big
   const isSmall = size ? size === 'small' : small
 
@@ -66,7 +75,8 @@ export const Button = ({
     {
       'usa-button--secondary': secondary,
       'usa-button--base': base,
-      'usa-button--accent-cool': accent,
+      'usa-button--accent-cool': accent || accentStyle === 'cool',
+      'usa-button--accent-warm': accentStyle === 'warm',
       'usa-button--outline': outline,
       'usa-button--inverse': inverse,
       'usa-button--big': isBig,

From 37aac03f9e294ad1ec44a145612fcfa8e31cd96f Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Fri, 26 Mar 2021 10:42:53 -0400
Subject: [PATCH 03/12] Keep support for old (large) legend style

---
 src/components/Button/Button.tsx              |  2 +-
 .../forms/Fieldset/Fieldset.stories.tsx       | 67 ++++++++++++++++++-
 .../forms/Fieldset/Fieldset.test.tsx          | 43 ++++++++++++
 src/components/forms/Fieldset/Fieldset.tsx    | 17 ++++-
 4 files changed, 122 insertions(+), 7 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index d2eb99d98d..75e9725176 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -8,7 +8,7 @@ interface ButtonProps {
   secondary?: boolean
   base?: boolean
   /**
-   * @deprecated since 1.14.0, use accentStyle
+   * @deprecated since 1.15.0, use accentStyle
    */
   accent?: boolean
   accentStyle?: 'none' | 'cool' | 'warm'
diff --git a/src/components/forms/Fieldset/Fieldset.stories.tsx b/src/components/forms/Fieldset/Fieldset.stories.tsx
index 165165b604..f31f4655f5 100644
--- a/src/components/forms/Fieldset/Fieldset.stories.tsx
+++ b/src/components/forms/Fieldset/Fieldset.stories.tsx
@@ -23,7 +23,7 @@ Source: https://designsystem.digital.gov/components/form-controls/
 }
 
 export const nameFieldset = (): React.ReactElement => (
-  <Fieldset legend="Name">
+  <Fieldset legend="Name" legendStyle="large">
     <Label htmlFor="title" hint=" (optional)">
       Title
     </Label>
@@ -40,7 +40,37 @@ export const nameFieldset = (): React.ReactElement => (
 )
 
 export const checkboxFieldset = (): React.ReactElement => (
-  <Fieldset legend="Historical figures 1" legendSrOnly>
+  <Fieldset legend="Historical figures 1" legendStyle='srOnly'>
+    <Checkbox
+      id="truth"
+      name="historical-figures-1"
+      value="truth"
+      defaultChecked
+      label="Sojourner Truth"
+    />
+    <Checkbox
+      id="douglass"
+      name="historical-figures-1"
+      value="douglass"
+      label="Frederick Douglass"
+    />
+    <Checkbox
+      id="washington"
+      name="historical-figures-1"
+      value="washington"
+      label="Booker T. Washington"
+    />
+    <Checkbox
+      id="carver"
+      name="historical-figures-1"
+      label="George Washington Carver"
+      disabled
+    />
+  </Fieldset>
+)
+
+export const checkboxFieldsetWithDefaultLegend = (): React.ReactElement => (
+  <Fieldset legend="Historical figures 1">
     <Checkbox
       id="truth"
       name="historical-figures-1"
@@ -70,7 +100,38 @@ export const checkboxFieldset = (): React.ReactElement => (
 )
 
 export const radioFieldset = (): React.ReactElement => (
-  <Fieldset legend="Historical figures 2" legendSrOnly>
+  <Fieldset legend="Historical figures 2" legendStyle='srOnly'>
+    <Radio
+      id="stanton"
+      name="historical-figures-2"
+      defaultChecked
+      label="Elizabeth Cady Stanton"
+      value="stanton"
+    />
+    <Radio
+      id="anthony"
+      name="historical-figures-2"
+      label="Susan B. Anthony"
+      value="anthony"
+    />
+    <Radio
+      id="tubman"
+      name="historical-figures-2"
+      label="Harriet Tubman"
+      value="tubman"
+    />
+    <Radio
+      id="invalid"
+      name="historical-figures-2"
+      label="Invalid option"
+      value="invalid"
+      disabled
+    />
+  </Fieldset>
+)
+
+export const radioFieldsetWithDefaultLegend = (): React.ReactElement => (
+  <Fieldset legend="Historical figures 2">
     <Radio
       id="stanton"
       name="historical-figures-2"
diff --git a/src/components/forms/Fieldset/Fieldset.test.tsx b/src/components/forms/Fieldset/Fieldset.test.tsx
index a8d44f7267..b299548829 100644
--- a/src/components/forms/Fieldset/Fieldset.test.tsx
+++ b/src/components/forms/Fieldset/Fieldset.test.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 
+jest.mock('../../../deprecation')
 import { Fieldset } from './Fieldset'
+import { deprecationWarning } from '../../../deprecation'
 
 describe('Fieldset component', () => {
   it('renders without errors', () => {
@@ -13,4 +15,45 @@ describe('Fieldset component', () => {
     const { queryByText } = render(<Fieldset>My Fieldset</Fieldset>)
     expect(queryByText('My Fieldset')).toBeInTheDocument()
   })
+
+  describe('renders uswds classes', () => {
+    it('renders legend with class usa-legend by default', () => {
+      const { queryByTestId, getByText } = render(
+        <Fieldset legend="Legend">
+          My Fieldset
+        </Fieldset>
+      )
+      expect(queryByTestId('fieldset')).toBeInTheDocument()
+      expect(getByText('Legend')).toHaveClass('usa-legend')
+    })
+  
+    it('renders legend with class usa-legend--large when specified', () => {
+      const { queryByTestId, getByText } = render(
+        <Fieldset legend="Legend" legendStyle='large'>
+          My Fieldset
+        </Fieldset>
+      )
+      expect(queryByTestId('fieldset')).toBeInTheDocument()
+      expect(getByText('Legend')).toHaveClass('usa-legend--large')
+    })
+  
+    it('renders legend with class usa-sr-only when specified', () => {
+      const { queryByTestId, getByText } = render(
+        <Fieldset legend="Legend" legendStyle='srOnly'>
+          My Fieldset
+        </Fieldset>
+      )
+      expect(queryByTestId('fieldset')).toBeInTheDocument()
+      expect(getByText('Legend')).toHaveClass('usa-sr-only')
+    })
+    
+    it('shows a deprecation warning when using deprecated legendSrOnly prop', () => {
+      const { queryByTestId, getByText } = render(<Fieldset legend="Legend" legendSrOnly>My Fieldset</Fieldset>)
+      expect(queryByTestId('fieldset')).toBeInTheDocument()
+      expect(getByText('Legend')).toHaveClass('usa-sr-only')
+      expect(deprecationWarning).toBeCalledTimes(1)
+    })
+
+  })
+
 })
diff --git a/src/components/forms/Fieldset/Fieldset.tsx b/src/components/forms/Fieldset/Fieldset.tsx
index 0669a013c3..529ce71857 100644
--- a/src/components/forms/Fieldset/Fieldset.tsx
+++ b/src/components/forms/Fieldset/Fieldset.tsx
@@ -1,20 +1,31 @@
 import React from 'react'
 import classnames from 'classnames'
+import { deprecationWarning } from '../../../deprecation'
 
 interface FieldsetProps {
   children: React.ReactNode
   legend?: React.ReactNode
+  /**
+   * @deprecated since 1.15.0, use legendStyle
+   */
   legendSrOnly?: boolean
+  legendStyle?: 'default' | 'large' | 'srOnly'
   className?: string
 }
 
 export const Fieldset = ({ 
-  children, legend, className, legendSrOnly 
+  children, legend, legendStyle='default', className, legendSrOnly 
 }: FieldsetProps): React.ReactElement => {
   const classes = classnames('usa-fieldset', className)
 
-  const legendClasses = classnames('usa-legend', {
-    'usa-sr-only': legendSrOnly,
+  if (legendSrOnly) {
+    deprecationWarning('Fieldset property legendSrOnly is deprecated. Use legendStyle = \'srOnly\'.')
+  }
+
+  const legendClasses = classnames({
+    'usa-legend': legendStyle === 'default',
+    'usa-legend--large': legendStyle === 'large',
+    'usa-sr-only': legendStyle === 'srOnly' || legendSrOnly,
   })
 
   return (

From e356d75854c4dd7abeb3f770aa22eb76e31053a5 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Fri, 26 Mar 2021 10:51:15 -0400
Subject: [PATCH 04/12] Imrpove Button deprecation prop test case

---
 src/components/Button/Button.test.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index 8d20e2a1a8..6ac64ba4b3 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -74,6 +74,16 @@ describe('Button component', () => {
       expect(deprecationWarning).toHaveBeenCalledTimes(0)
     })
 
+    it('shows a deprecation warning for prop \'accent\'', () => {
+      const { queryByTestId } = render(
+        <Button type="button" accent>
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--accent-cool')
+      expect(deprecationWarning).toHaveBeenCalledTimes(1)
+    })
+
   })
 
   it('implements an onClick handler', () => {
@@ -88,17 +98,6 @@ describe('Button component', () => {
     expect(onClickFn).toHaveBeenCalledTimes(1)
   })
 
-  it('shows a deprecation warning for prop \'accent\'', () => {
-    const onClickFn = jest.fn()
-    const { getByText } = render(
-      <Button type="button" accent>
-        Click Me
-      </Button>
-    )
-
-    expect(deprecationWarning).toHaveBeenCalledTimes(1)
-  })
-
   it('accepts additional custom class names', () => {
     const { getByTestId } = render(
       <Button className="customClass" type="button">

From b16dbed51cf44776666c4cfde62e104f686e6990 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Mon, 29 Mar 2021 12:45:17 -0400
Subject: [PATCH 05/12] Remove default button accentStyle of 'none'

- It had no effect and would have added confusion. Just don't set the prop as it is optional, instead
---
 src/components/Button/Button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 4eba164196..ae0d66e687 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -11,7 +11,7 @@ interface ButtonProps {
    * @deprecated since 1.15.0, use accentStyle
    */
   accent?: boolean
-  accentStyle?: 'none' | 'cool' | 'warm'
+  accentStyle?: 'cool' | 'warm'
   outline?: boolean
   inverse?: boolean
   size?: 'big' | 'small' // small is deprecated
@@ -36,7 +36,7 @@ export const Button = ({
   secondary,
   base,
   accent,
-  accentStyle = 'none',
+  accentStyle,
   outline,
   inverse,
   size,

From 26383e64aeb375fcb4690dfb04d9085b6bb38c73 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 30 Mar 2021 12:33:08 -0400
Subject: [PATCH 06/12] Initial TimePicker component commit

---
 .../forms/TimePicker/TimePicker.stories.tsx   | 34 +++++++++
 .../forms/TimePicker/TimePicker.test.tsx      |  0
 .../forms/TimePicker/TimePicker.tsx           | 76 +++++++++++++++++++
 src/components/forms/TimePicker/constants.ts  |  6 ++
 src/components/forms/TimePicker/utils.test.ts |  0
 src/components/forms/TimePicker/utils.ts      | 74 ++++++++++++++++++
 6 files changed, 190 insertions(+)
 create mode 100644 src/components/forms/TimePicker/TimePicker.stories.tsx
 create mode 100644 src/components/forms/TimePicker/TimePicker.test.tsx
 create mode 100644 src/components/forms/TimePicker/TimePicker.tsx
 create mode 100644 src/components/forms/TimePicker/constants.ts
 create mode 100644 src/components/forms/TimePicker/utils.test.ts
 create mode 100644 src/components/forms/TimePicker/utils.ts

diff --git a/src/components/forms/TimePicker/TimePicker.stories.tsx b/src/components/forms/TimePicker/TimePicker.stories.tsx
new file mode 100644
index 0000000000..ee08ec4ac3
--- /dev/null
+++ b/src/components/forms/TimePicker/TimePicker.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Form } from '../Form/Form'
+import { TimePicker } from './TimePicker'
+
+export default {
+  title: 'Components/Form controls/Time picker',
+  component: TimePicker,
+  argTypes: {
+    onsubmit: { action: 'submitted' },
+    disabled: { control: { type: 'boolean' } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 TimePicker component
+
+https://designsystem.digital.gov/components/time-picker/
+`,
+      },
+    },
+  },
+}
+
+const noop = (): void => {
+  return
+}
+
+export const defaultTimePicker = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <TimePicker id="" label="" onChange={noop} />
+  </Form>
+)
diff --git a/src/components/forms/TimePicker/TimePicker.test.tsx b/src/components/forms/TimePicker/TimePicker.test.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/forms/TimePicker/TimePicker.tsx b/src/components/forms/TimePicker/TimePicker.tsx
new file mode 100644
index 0000000000..fc1ff6f5d0
--- /dev/null
+++ b/src/components/forms/TimePicker/TimePicker.tsx
@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react'
+import classnames from 'classnames'
+import { FormGroup } from '../FormGroup/FormGroup'
+import { Label } from '../Label/Label'
+import { ComboBox } from '../ComboBox/ComboBox'
+import { getTimes, parseTimeString } from './utils'
+import {
+  DEFAULT_MAX_TIME,
+  DEFAULT_MAX_TIME_MINUTES,
+  DEFAULT_MIN_TIME,
+  DEFAULT_MIN_TIME_MINUTES,
+  DEFAULT_STEP,
+  MIN_STEP,
+} from './constants'
+
+interface BaseTimePickerProps {
+  id: string
+  label: string
+  onChange: (val?: string) => void
+  defaultValue?: string
+  disabled?: boolean
+  minTime?: string
+  maxTime?: string
+  step?: number
+  hint?: string
+  className?: string
+}
+
+type TimePickerProps = BaseTimePickerProps &
+  Omit<JSX.IntrinsicElements['input'], 'onChange'>
+
+export const TimePicker = ({
+  id,
+  label,
+  onChange,
+  defaultValue,
+  disabled,
+  minTime = DEFAULT_MIN_TIME,
+  maxTime = DEFAULT_MAX_TIME,
+  step = DEFAULT_STEP,
+  hint,
+  className,
+}: TimePickerProps): React.ReactElement => {
+  const classes = classnames('usa-time-picker', className)
+
+  const parsedMinTime = parseTimeString(minTime) || DEFAULT_MIN_TIME_MINUTES
+  const parsedMaxTime = parseTimeString(maxTime) || DEFAULT_MAX_TIME_MINUTES
+  const validStep = step < MIN_STEP ? MIN_STEP : step
+  const timeOptions = useMemo(
+    () => getTimes(parsedMinTime, parsedMaxTime, validStep),
+    [minTime, maxTime, step]
+  )
+
+  return (
+    <FormGroup>
+      <Label className="usa-label" id="TOOD" htmlFor={id}>
+        {label}
+      </Label>
+      {hint && (
+        <div className="usa-hint" id="TODO">
+          {hint}
+        </div>
+      )}
+      <div className={classes}>
+        <ComboBox
+          id={id}
+          name="timepickernameTODO"
+          onChange={onChange}
+          defaultValue={defaultValue}
+          options={timeOptions}
+          disabled={disabled}
+        />
+      </div>
+    </FormGroup>
+  )
+}
diff --git a/src/components/forms/TimePicker/constants.ts b/src/components/forms/TimePicker/constants.ts
new file mode 100644
index 0000000000..8e188a5b7a
--- /dev/null
+++ b/src/components/forms/TimePicker/constants.ts
@@ -0,0 +1,6 @@
+export const DEFAULT_MAX_TIME = '24:00'
+export const DEFAULT_MAX_TIME_MINUTES = 24 * 60 - 1
+export const DEFAULT_MIN_TIME = '00:00'
+export const DEFAULT_MIN_TIME_MINUTES = 0
+export const DEFAULT_STEP = 30
+export const MIN_STEP = 1
diff --git a/src/components/forms/TimePicker/utils.test.ts b/src/components/forms/TimePicker/utils.test.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/forms/TimePicker/utils.ts b/src/components/forms/TimePicker/utils.ts
new file mode 100644
index 0000000000..4dcd2329f4
--- /dev/null
+++ b/src/components/forms/TimePicker/utils.ts
@@ -0,0 +1,74 @@
+import { ComboBoxOption } from '../ComboBox/ComboBox'
+
+/**
+ * Parse a string of hh:mm into minutes
+ *
+ * @param {string} timeStr the time string to parse
+ * @returns {number} the number of minutes
+ */
+export const parseTimeString = (timeStr: string): number | undefined => {
+  let minutes
+
+  if (timeStr) {
+    const [hours, mins] = timeStr.split(':').map((str) => {
+      let value: number | undefined
+      const parsed = parseInt(str, 10)
+      if (!Number.isNaN(parsed)) value = parsed
+      return value
+    })
+
+    if (hours != null && mins != null) {
+      minutes = hours * 60 + mins
+    }
+  }
+
+  return minutes
+}
+
+interface TimeContext {
+  minute: number
+  hour12: number
+  hour24: number
+  ampm: 'am' | 'pm'
+}
+
+const getTimeContext = (minutes: number): TimeContext => {
+  const minute = minutes % 60
+  const hour24 = Math.floor(minutes / 60)
+  const hour12 = hour24 % 12 || 12
+  const ampm = hour24 < 12 ? 'am' : 'pm'
+
+  return {
+    minute,
+    hour24,
+    hour12,
+    ampm,
+  }
+}
+
+const padZeros = (value: number, length: number): string => {
+  return `0000${value}`.slice(-length)
+}
+
+export const getTimes = (
+  minTimeMinutes: number,
+  maxTimeMinutes: number,
+  step: number
+): ComboBoxOption[] => {
+  const times: ComboBoxOption[] = []
+
+  for (
+    let minutes = minTimeMinutes;
+    minutes <= maxTimeMinutes;
+    minutes += step
+  ) {
+    const { minute, hour24, hour12, ampm } = getTimeContext(minutes)
+
+    times.push({
+      value: `${padZeros(hour24, 2)}:${padZeros(minute, 2)}`,
+      label: `${hour12}:${padZeros(minute, 2)}${ampm}`,
+    })
+  }
+
+  return times
+}

From 98d7555c2da722118de5131e121e49af9d200fa6 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 30 Mar 2021 15:20:33 -0400
Subject: [PATCH 07/12] Add stories and basic tests

---
 .../forms/TimePicker/TimePicker.stories.tsx   |  44 +++-
 .../forms/TimePicker/TimePicker.test.tsx      |  21 ++
 .../forms/TimePicker/TimePicker.tsx           |  36 +--
 src/components/forms/TimePicker/constants.ts  |   2 +-
 src/components/forms/TimePicker/utils.test.ts | 212 ++++++++++++++++++
 src/components/forms/TimePicker/utils.ts      |   8 +-
 6 files changed, 300 insertions(+), 23 deletions(-)

diff --git a/src/components/forms/TimePicker/TimePicker.stories.tsx b/src/components/forms/TimePicker/TimePicker.stories.tsx
index ee08ec4ac3..4100850428 100644
--- a/src/components/forms/TimePicker/TimePicker.stories.tsx
+++ b/src/components/forms/TimePicker/TimePicker.stories.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Form } from '../Form/Form'
+import TextInput from '../TextInput/TextInput'
 import { TimePicker } from './TimePicker'
 
 export default {
@@ -27,8 +28,47 @@ const noop = (): void => {
   return
 }
 
+export const completeTimePicker = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <TimePicker
+      id="appointment-time"
+      name="appointment-time"
+      label="Appointment Time"
+      hint="hh:mm"
+      onChange={noop}
+    />
+  </Form>
+)
+
 export const defaultTimePicker = (argTypes): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
-    <TimePicker id="" label="" onChange={noop} />
+    <TimePicker id="appointment-time" name="appointment-time" onChange={noop} />
+  </Form>
+)
+
+export const withMinAndMaxTimes = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <TimePicker
+      id="appointment-time"
+      name="appointment-time"
+      label="Appointment Time"
+      hint="hh:mm (9:00am - 5:00pm)"
+      minTime="9:00"
+      maxTime="17:00"
+      onChange={noop}
+    />
+  </Form>
+)
+
+export const withDefaultValue = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <TimePicker
+      id="appointment-time"
+      name="appointment-time"
+      label="Appointment Time"
+      hint="hh:mm"
+      defaultValue="12:00"
+      onChange={noop}
+    />
   </Form>
 )
diff --git a/src/components/forms/TimePicker/TimePicker.test.tsx b/src/components/forms/TimePicker/TimePicker.test.tsx
index e69de29bb2..9ebe50d57e 100644
--- a/src/components/forms/TimePicker/TimePicker.test.tsx
+++ b/src/components/forms/TimePicker/TimePicker.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { TimePicker } from './TimePicker'
+
+describe('TimePicker Component', () => {
+  const testProps = {
+    id: 'appointment-time',
+    name: 'appointment-time',
+    onChange: jest.fn(),
+  }
+
+  it('renders without errors', () => {
+    const { getByTestId } = render(<TimePicker {...testProps} />)
+
+    const timePickerComboBox = getByTestId('combo-box')
+
+    expect(timePickerComboBox).toBeInTheDocument()
+    expect(timePickerComboBox).toHaveClass('usa-combo-box usa-time-picker')
+  })
+})
diff --git a/src/components/forms/TimePicker/TimePicker.tsx b/src/components/forms/TimePicker/TimePicker.tsx
index fc1ff6f5d0..edc38178d1 100644
--- a/src/components/forms/TimePicker/TimePicker.tsx
+++ b/src/components/forms/TimePicker/TimePicker.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { FormGroup } from '../FormGroup/FormGroup'
 import { Label } from '../Label/Label'
 import { ComboBox } from '../ComboBox/ComboBox'
-import { getTimes, parseTimeString } from './utils'
+import { getTimeOptions, parseTimeString } from './utils'
 import {
   DEFAULT_MAX_TIME,
   DEFAULT_MAX_TIME_MINUTES,
@@ -15,8 +15,9 @@ import {
 
 interface BaseTimePickerProps {
   id: string
-  label: string
+  name: string
   onChange: (val?: string) => void
+  label?: string
   defaultValue?: string
   disabled?: boolean
   minTime?: string
@@ -31,8 +32,9 @@ type TimePickerProps = BaseTimePickerProps &
 
 export const TimePicker = ({
   id,
-  label,
+  name,
   onChange,
+  label,
   defaultValue,
   disabled,
   minTime = DEFAULT_MIN_TIME,
@@ -47,30 +49,32 @@ export const TimePicker = ({
   const parsedMaxTime = parseTimeString(maxTime) || DEFAULT_MAX_TIME_MINUTES
   const validStep = step < MIN_STEP ? MIN_STEP : step
   const timeOptions = useMemo(
-    () => getTimes(parsedMinTime, parsedMaxTime, validStep),
+    () => getTimeOptions(parsedMinTime, parsedMaxTime, validStep),
     [minTime, maxTime, step]
   )
 
+  const labelId = `${name}-label`
+  const hintId = `${name}-hint`
+
   return (
     <FormGroup>
-      <Label className="usa-label" id="TOOD" htmlFor={id}>
+      <Label className="usa-label" id={labelId} htmlFor={id}>
         {label}
       </Label>
       {hint && (
-        <div className="usa-hint" id="TODO">
+        <div className="usa-hint" id={hintId}>
           {hint}
         </div>
       )}
-      <div className={classes}>
-        <ComboBox
-          id={id}
-          name="timepickernameTODO"
-          onChange={onChange}
-          defaultValue={defaultValue}
-          options={timeOptions}
-          disabled={disabled}
-        />
-      </div>
+      <ComboBox
+        id={id}
+        name={name}
+        className={classes}
+        onChange={onChange}
+        defaultValue={defaultValue}
+        options={timeOptions}
+        disabled={disabled}
+      />
     </FormGroup>
   )
 }
diff --git a/src/components/forms/TimePicker/constants.ts b/src/components/forms/TimePicker/constants.ts
index 8e188a5b7a..c88edaabbb 100644
--- a/src/components/forms/TimePicker/constants.ts
+++ b/src/components/forms/TimePicker/constants.ts
@@ -1,4 +1,4 @@
-export const DEFAULT_MAX_TIME = '24:00'
+export const DEFAULT_MAX_TIME = '23:59'
 export const DEFAULT_MAX_TIME_MINUTES = 24 * 60 - 1
 export const DEFAULT_MIN_TIME = '00:00'
 export const DEFAULT_MIN_TIME_MINUTES = 0
diff --git a/src/components/forms/TimePicker/utils.test.ts b/src/components/forms/TimePicker/utils.test.ts
index e69de29bb2..05ca63ae5e 100644
--- a/src/components/forms/TimePicker/utils.test.ts
+++ b/src/components/forms/TimePicker/utils.test.ts
@@ -0,0 +1,212 @@
+import {
+  DEFAULT_MAX_TIME_MINUTES,
+  DEFAULT_MIN_TIME,
+  DEFAULT_MIN_TIME_MINUTES,
+  DEFAULT_STEP,
+} from './constants'
+import { getTimeOptions } from './utils'
+
+describe('getTimeOptions', () => {
+  it('returns the expected list of default times options', () => {
+    const timeOptions = getTimeOptions(
+      DEFAULT_MIN_TIME_MINUTES,
+      DEFAULT_MAX_TIME_MINUTES,
+      DEFAULT_STEP
+    )
+
+    expect(timeOptions).toEqual([
+      {
+        value: '00:00',
+        label: '12:00am',
+      },
+      {
+        value: '00:30',
+        label: '12:30am',
+      },
+      {
+        value: '01:00',
+        label: '1:00am',
+      },
+      {
+        value: '01:30',
+        label: '1:30am',
+      },
+      {
+        value: '02:00',
+        label: '2:00am',
+      },
+      {
+        value: '02:30',
+        label: '2:30am',
+      },
+      {
+        value: '03:00',
+        label: '3:00am',
+      },
+      {
+        value: '03:30',
+        label: '3:30am',
+      },
+      {
+        value: '04:00',
+        label: '4:00am',
+      },
+      {
+        value: '04:30',
+        label: '4:30am',
+      },
+      {
+        value: '05:00',
+        label: '5:00am',
+      },
+      {
+        value: '05:30',
+        label: '5:30am',
+      },
+      {
+        value: '06:00',
+        label: '6:00am',
+      },
+      {
+        value: '06:30',
+        label: '6:30am',
+      },
+      {
+        value: '07:00',
+        label: '7:00am',
+      },
+      {
+        value: '07:30',
+        label: '7:30am',
+      },
+      {
+        value: '08:00',
+        label: '8:00am',
+      },
+      {
+        value: '08:30',
+        label: '8:30am',
+      },
+      {
+        value: '09:00',
+        label: '9:00am',
+      },
+      {
+        value: '09:30',
+        label: '9:30am',
+      },
+      {
+        value: '10:00',
+        label: '10:00am',
+      },
+      {
+        value: '10:30',
+        label: '10:30am',
+      },
+      {
+        value: '11:00',
+        label: '11:00am',
+      },
+      {
+        value: '11:30',
+        label: '11:30am',
+      },
+      {
+        value: '12:00',
+        label: '12:00pm',
+      },
+      {
+        value: '12:30',
+        label: '12:30pm',
+      },
+      {
+        value: '13:00',
+        label: '1:00pm',
+      },
+      {
+        value: '13:30',
+        label: '1:30pm',
+      },
+      {
+        value: '14:00',
+        label: '2:00pm',
+      },
+      {
+        value: '14:30',
+        label: '2:30pm',
+      },
+      {
+        value: '15:00',
+        label: '3:00pm',
+      },
+      {
+        value: '15:30',
+        label: '3:30pm',
+      },
+      {
+        value: '16:00',
+        label: '4:00pm',
+      },
+      {
+        value: '16:30',
+        label: '4:30pm',
+      },
+      {
+        value: '17:00',
+        label: '5:00pm',
+      },
+      {
+        value: '17:30',
+        label: '5:30pm',
+      },
+      {
+        value: '18:00',
+        label: '6:00pm',
+      },
+      {
+        value: '18:30',
+        label: '6:30pm',
+      },
+      {
+        value: '19:00',
+        label: '7:00pm',
+      },
+      {
+        value: '19:30',
+        label: '7:30pm',
+      },
+      {
+        value: '20:00',
+        label: '8:00pm',
+      },
+      {
+        value: '20:30',
+        label: '8:30pm',
+      },
+      {
+        value: '21:00',
+        label: '9:00pm',
+      },
+      {
+        value: '21:30',
+        label: '9:30pm',
+      },
+      {
+        value: '22:00',
+        label: '10:00pm',
+      },
+      {
+        value: '22:30',
+        label: '10:30pm',
+      },
+      {
+        value: '23:00',
+        label: '11:00pm',
+      },
+      {
+        value: '23:30',
+        label: '11:30pm',
+      },
+    ])
+  })
+})
diff --git a/src/components/forms/TimePicker/utils.ts b/src/components/forms/TimePicker/utils.ts
index 4dcd2329f4..643b3ed09b 100644
--- a/src/components/forms/TimePicker/utils.ts
+++ b/src/components/forms/TimePicker/utils.ts
@@ -50,12 +50,12 @@ const padZeros = (value: number, length: number): string => {
   return `0000${value}`.slice(-length)
 }
 
-export const getTimes = (
+export const getTimeOptions = (
   minTimeMinutes: number,
   maxTimeMinutes: number,
   step: number
 ): ComboBoxOption[] => {
-  const times: ComboBoxOption[] = []
+  const timeOptions: ComboBoxOption[] = []
 
   for (
     let minutes = minTimeMinutes;
@@ -64,11 +64,11 @@ export const getTimes = (
   ) {
     const { minute, hour24, hour12, ampm } = getTimeContext(minutes)
 
-    times.push({
+    timeOptions.push({
       value: `${padZeros(hour24, 2)}:${padZeros(minute, 2)}`,
       label: `${hour12}:${padZeros(minute, 2)}${ampm}`,
     })
   }
 
-  return times
+  return timeOptions
 }

From 3c36241594318414ba335596e82151afc268fcc6 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 30 Mar 2021 16:24:16 -0400
Subject: [PATCH 08/12] Add TimePicker utils tests

---
 src/components/forms/TimePicker/utils.test.ts | 112 +++++++++++++++++-
 1 file changed, 110 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/TimePicker/utils.test.ts b/src/components/forms/TimePicker/utils.test.ts
index 05ca63ae5e..fbb0cd83c2 100644
--- a/src/components/forms/TimePicker/utils.test.ts
+++ b/src/components/forms/TimePicker/utils.test.ts
@@ -1,10 +1,9 @@
 import {
   DEFAULT_MAX_TIME_MINUTES,
-  DEFAULT_MIN_TIME,
   DEFAULT_MIN_TIME_MINUTES,
   DEFAULT_STEP,
 } from './constants'
-import { getTimeOptions } from './utils'
+import { getTimeOptions, parseTimeString } from './utils'
 
 describe('getTimeOptions', () => {
   it('returns the expected list of default times options', () => {
@@ -209,4 +208,113 @@ describe('getTimeOptions', () => {
       },
     ])
   })
+
+  it('returns the expected list of times options with a custom step size', () => {
+    const fourHoursInMinutes = 4 * 60
+    const timeOptions = getTimeOptions(
+      DEFAULT_MIN_TIME_MINUTES,
+      DEFAULT_MAX_TIME_MINUTES,
+      fourHoursInMinutes
+    )
+
+    expect(timeOptions).toEqual([
+      {
+        value: '00:00',
+        label: '12:00am',
+      },
+      {
+        value: '04:00',
+        label: '4:00am',
+      },
+      {
+        value: '08:00',
+        label: '8:00am',
+      },
+      {
+        value: '12:00',
+        label: '12:00pm',
+      },
+      {
+        value: '16:00',
+        label: '4:00pm',
+      },
+      {
+        value: '20:00',
+        label: '8:00pm',
+      },
+    ])
+  })
+
+  it('returns the expected list of times options with custom min and max times', () => {
+    const nineAM = parseTimeString('09:00') as number
+    const fivePM = parseTimeString('17:00') as number
+    const oneHourInMinutes = 60
+    const timeOptions = getTimeOptions(nineAM, fivePM, oneHourInMinutes)
+
+    expect(timeOptions).toEqual([
+      {
+        value: '09:00',
+        label: '9:00am',
+      },
+      {
+        value: '10:00',
+        label: '10:00am',
+      },
+      {
+        value: '11:00',
+        label: '11:00am',
+      },
+      {
+        value: '12:00',
+        label: '12:00pm',
+      },
+      {
+        value: '13:00',
+        label: '1:00pm',
+      },
+      {
+        value: '14:00',
+        label: '2:00pm',
+      },
+      {
+        value: '15:00',
+        label: '3:00pm',
+      },
+      {
+        value: '16:00',
+        label: '4:00pm',
+      },
+      {
+        value: '17:00',
+        label: '5:00pm',
+      },
+    ])
+  })
+})
+
+describe('parseTimeString', () => {
+  it('successfully parses valid values', () => {
+    const midnight = '00:00'
+    const sixThirtyAM = '06:30'
+    const noon = '12:00'
+    const fiveThirtyPM = '17:30'
+
+    const midnightParsed = parseTimeString(midnight)
+    const sixThirtyAMParsed = parseTimeString(sixThirtyAM)
+    const noonParsed = parseTimeString(noon)
+    const fiveThirtyPMParsed = parseTimeString(fiveThirtyPM)
+
+    expect(midnightParsed).toEqual(0)
+    expect(sixThirtyAMParsed).toEqual(6.5 * 60)
+    expect(noonParsed).toEqual(12 * 60)
+    expect(fiveThirtyPMParsed).toEqual(17.5 * 60)
+  })
+
+  it('successfully returns undefined for invalid values', () => {
+    const badFormat = 'abc:123'
+
+    const badFormatParsed = parseTimeString(badFormat)
+
+    expect(badFormatParsed).toBeUndefined()
+  })
 })

From 500c5c31a1aa79a1bec34ecc63c648c213126404 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 30 Mar 2021 16:48:17 -0400
Subject: [PATCH 09/12] Export the TimePicker

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index b1238f2c85..12059d0823 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -36,6 +36,7 @@ export { Radio } from './components/forms/Radio/Radio'
 export { RangeInput } from './components/forms/RangeInput/RangeInput'
 export { Textarea } from './components/forms/Textarea/Textarea'
 export { TextInput } from './components/forms/TextInput/TextInput'
+export { TimePicker } from './components/forms/TimePicker/TimePicker'
 export { ValidationChecklist } from './components/forms/Validation/ValidationChecklist'
 export { ValidationItem } from './components/forms/Validation/ValidationItem'
 

From 1e25510b7346bc545921934e7dcc751d05161596 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 31 Mar 2021 13:26:18 -0400
Subject: [PATCH 10/12] Remove unused imports

---
 src/components/forms/TimePicker/TimePicker.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/forms/TimePicker/TimePicker.stories.tsx b/src/components/forms/TimePicker/TimePicker.stories.tsx
index 4100850428..efc4a472dd 100644
--- a/src/components/forms/TimePicker/TimePicker.stories.tsx
+++ b/src/components/forms/TimePicker/TimePicker.stories.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { Form } from '../Form/Form'
-import TextInput from '../TextInput/TextInput'
 import { TimePicker } from './TimePicker'
 
 export default {

From 829493ea2042cab6a4773ff3bdaf251adaba1682 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 31 Mar 2021 16:55:12 -0400
Subject: [PATCH 11/12] Add more tests

---
 .../forms/TimePicker/TimePicker.test.tsx      | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/components/forms/TimePicker/TimePicker.test.tsx b/src/components/forms/TimePicker/TimePicker.test.tsx
index 9ebe50d57e..8d77f9e934 100644
--- a/src/components/forms/TimePicker/TimePicker.test.tsx
+++ b/src/components/forms/TimePicker/TimePicker.test.tsx
@@ -2,8 +2,13 @@ import React from 'react'
 import { render } from '@testing-library/react'
 
 import { TimePicker } from './TimePicker'
+import userEvent from '@testing-library/user-event'
 
 describe('TimePicker Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   const testProps = {
     id: 'appointment-time',
     name: 'appointment-time',
@@ -18,4 +23,56 @@ describe('TimePicker Component', () => {
     expect(timePickerComboBox).toBeInTheDocument()
     expect(timePickerComboBox).toHaveClass('usa-combo-box usa-time-picker')
   })
+
+  it('allows the user to select a time', () => {
+    const { getByTestId } = render(<TimePicker {...testProps} />)
+
+    const comboBoxTextInput = getByTestId('combo-box-input')
+    const comboBoxDropdownList = getByTestId('combo-box-option-list')
+    const elementToSelect = getByTestId('combo-box-option-00:00')
+    const comboBoxClearButton = getByTestId('combo-box-clear-button')
+
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxClearButton).not.toBeVisible()
+
+    // Click on the TimePicker input
+    userEvent.click(comboBoxTextInput)
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'true')
+    expect(comboBoxDropdownList).toBeVisible()
+
+    // Select a time
+    jest.clearAllMocks()
+
+    userEvent.hover(elementToSelect)
+    expect(elementToSelect).toHaveClass('usa-combo-box__list-option--focused')
+
+    userEvent.click(elementToSelect)
+    expect(testProps.onChange).toHaveBeenCalledTimes(1)
+    expect(elementToSelect).toHaveClass('usa-combo-box__list-option--selected')
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxTextInput).toHaveValue(elementToSelect.textContent)
+    expect(comboBoxClearButton).toBeVisible()
+  })
+
+  it('allows the user to clear the input', () => {
+    const { getByTestId } = render(
+      <TimePicker {...testProps} defaultValue="00:00" />
+    )
+
+    const comboBoxTextInput = getByTestId('combo-box-input')
+    const comboBoxClearButton = getByTestId('combo-box-clear-button')
+
+    expect(comboBoxClearButton).toBeVisible()
+    expect(comboBoxTextInput).toHaveValue('12:00am')
+
+    //Clear the input
+    jest.clearAllMocks()
+
+    userEvent.click(comboBoxClearButton)
+    expect(testProps.onChange).toHaveBeenCalledTimes(1)
+    expect(comboBoxClearButton).not.toBeVisible()
+    expect(comboBoxTextInput).not.toHaveValue()
+  })
 })

From 18ecb0353e4249be2ba1fdabde50388dba4162f4 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 31 Mar 2021 17:34:52 -0400
Subject: [PATCH 12/12] Add data props to TimePicker

---
 src/components/forms/ComboBox/ComboBox.tsx     | 4 +++-
 src/components/forms/TimePicker/TimePicker.tsx | 6 ++++++
 src/components/forms/TimePicker/constants.ts   | 8 ++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 8757c01df5..14ebf5e193 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -79,6 +79,7 @@ export const ComboBox = ({
   noResults,
   selectProps,
   inputProps,
+  ...customProps
 }: ComboBoxProps): React.ReactElement => {
   const isDisabled = !!disabled
 
@@ -270,7 +271,8 @@ export const ComboBox = ({
       data-testid="combo-box"
       className={containerClasses}
       id={id}
-      ref={containerRef}>
+      ref={containerRef}
+      {...customProps}>
       <select
         className="usa-select usa-sr-only usa-combo-box__select"
         name={name}
diff --git a/src/components/forms/TimePicker/TimePicker.tsx b/src/components/forms/TimePicker/TimePicker.tsx
index edc38178d1..a0538a8118 100644
--- a/src/components/forms/TimePicker/TimePicker.tsx
+++ b/src/components/forms/TimePicker/TimePicker.tsx
@@ -10,6 +10,7 @@ import {
   DEFAULT_MIN_TIME,
   DEFAULT_MIN_TIME_MINUTES,
   DEFAULT_STEP,
+  FILTER_DATASET,
   MIN_STEP,
 } from './constants'
 
@@ -74,6 +75,11 @@ export const TimePicker = ({
         defaultValue={defaultValue}
         options={timeOptions}
         disabled={disabled}
+        data-filter={FILTER_DATASET.filter}
+        data-ap-query-filter={FILTER_DATASET.apQueryFilter}
+        data-hour-query-filter={FILTER_DATASET.hourQueryFilter}
+        data-minute-query-filter={FILTER_DATASET.minuteQueryFilter}
+        data-disable-filtering="true"
       />
     </FormGroup>
   )
diff --git a/src/components/forms/TimePicker/constants.ts b/src/components/forms/TimePicker/constants.ts
index c88edaabbb..11ec37c635 100644
--- a/src/components/forms/TimePicker/constants.ts
+++ b/src/components/forms/TimePicker/constants.ts
@@ -4,3 +4,11 @@ export const DEFAULT_MIN_TIME = '00:00'
 export const DEFAULT_MIN_TIME_MINUTES = 0
 export const DEFAULT_STEP = 30
 export const MIN_STEP = 1
+
+export const FILTER_DATASET = {
+  filter:
+    '0?{{ hourQueryFilter }}:{{minuteQueryFilter}}.*{{ apQueryFilter }}m?',
+  apQueryFilter: '([ap])',
+  hourQueryFilter: '([1-9][0-2]?)',
+  minuteQueryFilter: '[\\d]+:([0-9]{0,2})',
+}