feat: Add validationStatus prop to Dropdown

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.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

@@ -70,6 +70,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'