feat: Add validationStatus prop to Dropdown (#2365)

Co-authored-by: John Gedeon <[email protected]>

Author: brandonlenz

src/components/forms/DatePicker/DatePicker.stories.tsx

@@ -6,20 +6,21 @@ import { Form } from '../Form/Form'
 import { FormGroup } from '../FormGroup/FormGroup'
 import { Label } from '../Label/Label'
 import { TextInput } from '../TextInput/TextInput'
+import { ValidationStatus } from '../../../types/validationStatus'
 
 export default {
   title: 'Components/Date picker',
   component: DatePicker,
   argTypes: {
     onSubmit: { action: 'submitted' },
     disabled: { control: { type: 'boolean' } },
-    validationStatus: { 
+    validationStatus: {
       control: {
         type: 'select',
         options: [undefined, 'success', 'error'],
       },
-    defaultValue: undefined,
-   } 
+      defaultValue: undefined,
+    },
   },
   parameters: {
     docs: {
@@ -52,15 +53,18 @@ We may find that we want to expose props for custom event handlers or even a ref
 type StorybookArguments = {
   onSubmit: React.FormEventHandler<HTMLFormElement>
   disabled?: boolean
-  validationStatus: 'success' | 'error' | undefined
+  validationStatus?: ValidationStatus
 }
 
 export const completeDatePicker = (
   argTypes: StorybookArguments
 ): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <FormGroup error={argTypes.validationStatus === 'error'}>
-      <Label id="appointment-date-label" htmlFor="appointment-date" error={argTypes.validationStatus === 'error'}>
+      <Label
+        id="appointment-date-label"
+        htmlFor="appointment-date"
+        error={argTypes.validationStatus === 'error'}>
         Appointment date
       </Label>
       <div className="usa-hint" id="appointment-date-hint">

src/components/forms/DatePicker/DatePicker.tsx

@@ -24,12 +24,13 @@ import {
   addDays,
 } from './utils'
 import { Calendar } from './Calendar'
+import { ValidationStatus } from '../../../types/validationStatus'
 
 type BaseDatePickerProps = {
   id: string
   name: string
   className?: string
-  validationStatus?: 'error' | 'success'
+  validationStatus?: ValidationStatus
   disabled?: boolean
   required?: boolean
   defaultValue?: string
@@ -252,7 +253,7 @@ export const DatePicker = ({
     {
       'usa-input--error': isError,
       'usa-input--success': isSuccess,
-    },
+    }
   )
 
   const toggleCalendar = i18n.toggleCalendar

src/components/forms/Dropdown/Dropdown.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Dropdown } from './Dropdown'
 import { Label } from '../Label/Label'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
 
 export default {
   title: 'Components/Dropdown',
@@ -17,43 +18,50 @@ Source: https://designsystem.digital.gov/components/select/
       },
     },
   },
-}
+  argTypes: {
+    validationStatus: {
+      options: ['error', 'success'],
+      control: 'radio',
+    },
+    disabled: { control: 'boolean' },
+  },
+} as ComponentMeta<typeof Dropdown>
 
-export const defaultDropdown = (): React.ReactElement => (
-  <Dropdown id="input-dropdown" name="input-dropdown">
+const options = (
+  <>
     <option>- Select - </option>
     <option value="value1">Option A</option>
     <option value="value2">Option B</option>
     <option value="value3">Option C</option>
-  </Dropdown>
+  </>
 )
 
-export const withDefaultValue = (): React.ReactElement => (
-  <Dropdown id="input-dropdown" name="input-dropdown" defaultValue="value2">
-    <option>- Select - </option>
-    <option value="value1">Option A</option>
-    <option value="value2">Option B</option>
-    <option value="value3">Option C</option>
-  </Dropdown>
+const Template: ComponentStory<typeof Dropdown> = (args) => (
+  <Dropdown {...args}>{options}</Dropdown>
 )
 
-export const withLabel = (): React.ReactElement => (
+export const Default = Template.bind({})
+Default.args = { id: 'input-dropdown', name: 'input-dropdown' }
+
+export const WithDefaultValue = Template.bind({})
+WithDefaultValue.args = {
+  id: 'input-dropdown',
+  name: 'input-dropdown',
+  defaultValue: 'value2',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  id: 'input-dropdown',
+  name: 'input-dropdown',
+  disabled: true,
+}
+
+export const WithLabel = () => (
   <>
-    <Label htmlFor="options">Dropdown label</Label>
+    <Label htmlFor="input-dropdown">Dropdown label</Label>
     <Dropdown id="input-dropdown" name="input-dropdown">
-      <option>- Select - </option>
-      <option value="value1">Option A</option>
-      <option value="value2">Option B</option>
-      <option value="value3">Option C</option>
+      {options}
     </Dropdown>
   </>
 )
-
-export const disabled = (): React.ReactElement => (
-  <Dropdown id="input-dropdown" name="input-dropdown" disabled>
-    <option>- Select - </option>
-    <option value="value1">Option A</option>
-    <option value="value2">Option B</option>
-    <option value="value3">Option C</option>
-  </Dropdown>
-)

src/components/forms/Dropdown/Dropdown.test.tsx

@@ -1,18 +1,58 @@
-import React from 'react'
-import { render } from '@testing-library/react'
+import React, { ComponentProps } from 'react'
+import { render, screen } from '@testing-library/react'
 
 import { Dropdown } from './Dropdown'
 
 describe('Dropdown component', () => {
-  it('renders without errors', () => {
-    const { queryByTestId } = render(
-      <Dropdown id="input-type-text" name="input-type-text">
+  const renderDropdown = (
+    props?: Omit<ComponentProps<typeof Dropdown>, 'id' | 'name' | 'children'>
+  ) => {
+    render(
+      <Dropdown id="input-type-dropdown" name="input-type-dropdown" {...props}>
         <option>- Select - </option>
         <option value="value1">Option A</option>
         <option value="value2">Option B</option>
         <option value="value3">Option C</option>
       </Dropdown>
     )
-    expect(queryByTestId('dropdown')).toBeInTheDocument()
+
+    const queryForDropdown = () => screen.queryByRole('combobox')
+
+    return {
+      queryForDropdown,
+    }
+  }
+
+  it('renders without errors', () => {
+    const { queryForDropdown } = renderDropdown()
+
+    const dropdown = queryForDropdown()
+
+    expect(dropdown).toBeInTheDocument()
+    expect(dropdown).toHaveClass('usa-select')
+  })
+
+  describe('validationStatus', () => {
+    it('renders with error styling', () => {
+      const { queryForDropdown } = renderDropdown({ validationStatus: 'error' })
+
+      const dropdown = queryForDropdown()
+
+      expect(dropdown).toBeInTheDocument()
+      expect(dropdown).toHaveClass('usa-select')
+      expect(dropdown).toHaveClass('usa-input--error')
+    })
+
+    it('renders with success styling', () => {
+      const { queryForDropdown } = renderDropdown({
+        validationStatus: 'success',
+      })
+
+      const dropdown = queryForDropdown()
+
+      expect(dropdown).toBeInTheDocument()
+      expect(dropdown).toHaveClass('usa-select')
+      expect(dropdown).toHaveClass('usa-input--success')
+    })
   })
 })

src/components/forms/Dropdown/Dropdown.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import classnames from 'classnames'
+import { ValidationStatus } from '../../../types/validationStatus'
 
 type DropdownProps = {
   id: string
   name: string
   className?: string
   children: React.ReactNode
+  validationStatus?: ValidationStatus
   inputRef?:
     | string
     | ((instance: HTMLSelectElement | null) => void)
@@ -20,9 +22,19 @@ export const Dropdown = ({
   className,
   inputRef,
   children,
+  validationStatus,
   ...inputProps
 }: DropdownProps & JSX.IntrinsicElements['select']): React.ReactElement => {
-  const classes = classnames('usa-select', className)
+  const isError = validationStatus === 'error'
+  const isSuccess = validationStatus === 'success'
+  const classes = classnames(
+    'usa-select',
+    {
+      'usa-input--error': isError,
+      'usa-input--success': isSuccess,
+    },
+    className
+  )
 
   return (
     <select

src/components/forms/TextInput/TextInput.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { TextInput } from './TextInput'
+import { ValidationStatus } from '../../../types/validationStatus'
 
 describe('TextInput component', () => {
   it('renders without errors', () => {
@@ -40,13 +41,12 @@ describe('TextInput component', () => {
       jest.clearAllMocks()
     })
 
-    it.each([
+    it.each<[ValidationStatus, string]>([
       ['error', 'usa-input--error'],
       ['success', 'usa-input--success'],
     ])(
       'when validationStatus is %s should include class %s',
-      (validationString, uswdsClass) => {
-        const validationStatus = validationString as 'error' | 'success'
+      (validationStatus, uswdsClass) => {
         const { container } = render(
           <TextInput
             id="input-type-text"

src/components/forms/TextInput/TextInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
+import { ValidationStatus } from '../../../types/validationStatus'
 
 type TextInputRef =
   | string
@@ -16,7 +17,7 @@ type RequiredTextInputProps = {
 
 type CustomTextInputProps = {
   className?: string
-  validationStatus?: 'error' | 'success'
+  validationStatus?: ValidationStatus
   inputSize?: 'small' | 'medium'
   inputRef?: TextInputRef
   inputProps?: JSX.IntrinsicElements['input']

src/index.ts

@@ -69,6 +69,7 @@ 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'
+export type { ValidationStatus } from './types/validationStatus'
 
 /** Header Components */
 export { ExtendedNav } from './components/header/ExtendedNav/ExtendedNav'

src/types/validationStatus.ts

@@ -0,0 +1 @@
+export type ValidationStatus = 'error' | 'success'