feat: Add IconPrefix and IconSuffix components (#1713)

Authored-by: jenbutongit <hi+git@jen.digital>

src/components/forms/InputPrefix/InputPrefix.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { InputPrefix } from './InputPrefix'
+import { IconCreditCard } from '../../Icon/Icons'
+import { TextInput } from '../TextInput/TextInput'
+import { FormGroup } from '../FormGroup/FormGroup'
+
+export default {
+  title: 'Components/Input prefix or suffix/InputPrefix',
+  component: InputPrefix,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 InputPrefix component
+
+Source: https://designsystem.digital.gov/components/input-prefix-suffix/
+`,
+      },
+    },
+  },
+}
+
+export const InputWithTextInputPrefix = (): React.ReactElement => (
+  <FormGroup>
+    <div className="usa-input-group">
+      <InputPrefix>cvc</InputPrefix>
+      <TextInput id="cvc" name="cvc" type="text" />
+    </div>
+  </FormGroup>
+)
+
+export const InputWithTextInputPrefixError = (): React.ReactElement => (
+  <FormGroup>
+    <div className="usa-input-group usa-input-group--error">
+      <InputPrefix>cvc</InputPrefix>
+      <TextInput id="cvc" name="cvc" type="text" validationStatus="error" />
+    </div>
+  </FormGroup>
+)
+
+export const InputWithIconInputPrefix = (): React.ReactElement => (
+  <FormGroup>
+    <div className="usa-input-group">
+      <InputPrefix>
+        <IconCreditCard />
+      </InputPrefix>
+      <TextInput id="card" name="card" type="text" />
+    </div>
+  </FormGroup>
+)

src/components/forms/InputPrefix/InputPrefix.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { InputPrefix } from './InputPrefix'
+
+describe('InputPrefix component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(
+      <InputPrefix className={'test-class'}>
+        <svg data-testid="svg-test" />
+      </InputPrefix>
+    )
+
+    const inputPrefix = queryByTestId('InputPrefix')
+    expect(inputPrefix).toBeInTheDocument()
+    expect(inputPrefix).toHaveClass('usa-input-prefix')
+    expect(inputPrefix).toHaveClass('test-class')
+    expect(inputPrefix).toHaveAttribute('aria-hidden')
+    expect(queryByTestId('svg-test')).toBeInTheDocument()
+  })
+})

src/components/forms/InputPrefix/InputPrefix.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type InputPrefixProps = {
+  className?: string
+  children: React.ReactNode
+} & JSX.IntrinsicElements['div']
+
+export const InputPrefix = ({
+  className,
+  children,
+  ...divProps
+}: InputPrefixProps): React.ReactElement => {
+  const classes = classnames('usa-input-prefix', className)
+
+  return (
+    <div
+      className={classes}
+      aria-hidden="true"
+      {...divProps}
+      data-testid="InputPrefix"
+    >
+      {children}
+    </div>
+  )
+}

src/components/forms/InputSuffix/InputSuffix.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { InputSuffix } from './InputSuffix'
+import { FormGroup } from '../FormGroup/FormGroup'
+import { TextInput } from '../TextInput/TextInput'
+import { IconSearch } from '../../Icon/Icons'
+
+export default {
+  title: 'Components/Input prefix or suffix/InputSuffix',
+  component: InputSuffix,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 InputSuffix component
+
+Source: https://designsystem.digital.gov/components/input-prefix-suffix/
+`,
+      },
+    },
+  },
+}
+
+export const InputWithIconInputSuffix = (): React.ReactElement => (
+  <FormGroup>
+    <div className="usa-input-group">
+      <TextInput id="search" name="search" type="search" />
+      <InputSuffix>
+        <IconSearch />
+      </InputSuffix>
+    </div>
+  </FormGroup>
+)
+
+export const InputWithIconInputSuffixError = (): React.ReactElement => (
+  <FormGroup>
+    <div className="usa-input-group usa-input-group--error">
+      <TextInput
+        id="search"
+        name="search"
+        type="search"
+        validationStatus="error"
+      />
+      <InputSuffix>
+        <IconSearch />
+      </InputSuffix>
+    </div>
+  </FormGroup>
+)
+
+export const InputWithTextInputSuffix = (): React.ReactElement => (
+  <FormGroup>
+    <div className="usa-input-group usa-input-group--sm">
+      <TextInput id="weight" name="weight" type="text" />
+      <InputSuffix>lbs.</InputSuffix>
+    </div>
+  </FormGroup>
+)

src/components/forms/InputSuffix/InputSuffix.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { InputSuffix } from './InputSuffix'
+
+describe('InputSuffix component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId, getByText } = render(
+      <InputSuffix className={'test-class'}>lbs.</InputSuffix>
+    )
+
+    const inputSuffix = queryByTestId('InputSuffix')
+    expect(inputSuffix).toBeInTheDocument()
+    expect(inputSuffix).toHaveClass('usa-input-suffix')
+    expect(inputSuffix).toHaveClass('test-class')
+    expect(inputSuffix).toHaveAttribute('aria-hidden')
+
+    expect(getByText('lbs.')).toBeInTheDocument()
+  })
+})

src/components/forms/InputSuffix/InputSuffix.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type InputSuffixProps = {
+  className?: string
+  children: React.ReactNode
+} & JSX.IntrinsicElements['div']
+
+export const InputSuffix = ({
+  className,
+  children,
+  ...divProps
+}: InputSuffixProps): React.ReactElement => {
+  const classes = classnames('usa-input-suffix', className)
+
+  return (
+    <div
+      className={classes}
+      aria-hidden="true"
+      {...divProps}
+      data-testid="InputSuffix"
+    >
+      {children}
+    </div>
+  )
+}

src/index.ts

@@ -42,6 +42,8 @@ export { Fieldset } from './components/forms/Fieldset/Fieldset'
 export { FileInput } from './components/forms/FileInput/FileInput'
 export { Form } from './components/forms/Form/Form'
 export { FormGroup } from './components/forms/FormGroup/FormGroup'
+export { InputPrefix } from './components/forms/InputPrefix/InputPrefix'
+export { InputSuffix } from './components/forms/InputSuffix/InputSuffix'
 export { Label } from './components/forms/Label/Label'
 export { Radio } from './components/forms/Radio/Radio'
 export { RangeInput } from './components/forms/RangeInput/RangeInput'