feat: InputGroup component (#2383)

Author: jcbcapps

src/components/forms/InputGroup/InputGroup.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { InputGroup } from './InputGroup'
+
+describe('InputGroup component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(<InputGroup>My Input Group</InputGroup>)
+    expect(queryByTestId('inputGroup')).toBeInTheDocument()
+    expect(queryByTestId('inputGroup')).toHaveClass('usa-input-group')
+  })
+
+  it('renders its children', () => {
+    const { queryByText } = render(<InputGroup>My Input Group</InputGroup>)
+    expect(queryByText('My Input Group')).toBeInTheDocument()
+  })
+
+  it('adds the error class when error is true', () => {
+    const { queryByTestId } = render(
+      <InputGroup error>My Input Group</InputGroup>
+    )
+    expect(queryByTestId('inputGroup')).toHaveClass('usa-input-group--error')
+  })
+
+  it('adds the provided className', () => {
+    const { queryByTestId } = render(
+      <InputGroup className="my-class">My Input Group</InputGroup>
+    )
+    expect(queryByTestId('inputGroup')).toHaveClass('my-class')
+  })
+})

src/components/forms/InputGroup/InputGroup.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export interface InputGroupProps {
+  children: React.ReactNode
+  className?: string
+  error?: boolean
+}
+
+export const InputGroup = ({
+  children,
+  className,
+  error,
+}: InputGroupProps): React.ReactElement => {
+  const classes = classnames(
+    'usa-input-group',
+    { 'usa-input-group--error': error },
+    className
+  )
+
+  return (
+    <div data-testid="inputGroup" className={classes}>
+      {children}
+    </div>
+  )
+}

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

@@ -2,6 +2,7 @@ import React from 'react'
 import { InputPrefix } from './InputPrefix'
 import { Icon } from '../../Icon/Icons'
 import { TextInput } from '../TextInput/TextInput'
+import { InputGroup } from '../InputGroup/InputGroup'
 import { FormGroup } from '../FormGroup/FormGroup'
 
 export default {
@@ -22,29 +23,29 @@ Source: https://designsystem.digital.gov/components/input-prefix-suffix/
 
 export const InputWithTextInputPrefix = (): React.ReactElement => (
   <FormGroup>
-    <div className="usa-input-group">
+    <InputGroup>
       <InputPrefix>cvc</InputPrefix>
       <TextInput id="cvc" name="cvc" type="text" />
-    </div>
+    </InputGroup>
   </FormGroup>
 )
 
 export const InputWithTextInputPrefixError = (): React.ReactElement => (
   <FormGroup>
-    <div className="usa-input-group usa-input-group--error">
+    <InputGroup error>
       <InputPrefix>cvc</InputPrefix>
       <TextInput id="cvc" name="cvc" type="text" validationStatus="error" />
-    </div>
+    </InputGroup>
   </FormGroup>
 )
 
 export const InputWithIconInputPrefix = (): React.ReactElement => (
   <FormGroup>
-    <div className="usa-input-group">
+    <InputGroup>
       <InputPrefix>
         <Icon.CreditCard />
       </InputPrefix>
       <TextInput id="card" name="card" type="text" />
-    </div>
+    </InputGroup>
   </FormGroup>
 )

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { InputSuffix } from './InputSuffix'
+import { InputGroup } from '../InputGroup/InputGroup'
 import { FormGroup } from '../FormGroup/FormGroup'
 import { TextInput } from '../TextInput/TextInput'
 import { Icon } from '../../Icon/Icons'
@@ -22,18 +23,18 @@ Source: https://designsystem.digital.gov/components/input-prefix-suffix/
 
 export const InputWithIconInputSuffix = (): React.ReactElement => (
   <FormGroup>
-    <div className="usa-input-group">
+    <InputGroup>
       <TextInput id="search" name="search" type="search" />
       <InputSuffix>
         <Icon.Search />
       </InputSuffix>
-    </div>
+    </InputGroup>
   </FormGroup>
 )
 
 export const InputWithIconInputSuffixError = (): React.ReactElement => (
   <FormGroup>
-    <div className="usa-input-group usa-input-group--error">
+    <InputGroup error>
       <TextInput
         id="search"
         name="search"
@@ -43,15 +44,15 @@ export const InputWithIconInputSuffixError = (): React.ReactElement => (
       <InputSuffix>
         <Icon.Search />
       </InputSuffix>
-    </div>
+    </InputGroup>
   </FormGroup>
 )
 
 export const InputWithTextInputSuffix = (): React.ReactElement => (
   <FormGroup>
-    <div className="usa-input-group usa-input-group--sm">
+    <InputGroup>
       <TextInput id="weight" name="weight" type="text" />
       <InputSuffix>lbs.</InputSuffix>
-    </div>
+    </InputGroup>
   </FormGroup>
 )

src/index.ts

@@ -59,6 +59,7 @@ export { FileInput } from './components/forms/FileInput/FileInput'
 export type { FileInputRef } from './components/forms/FileInput/FileInput'
 export { Form } from './components/forms/Form/Form'
 export { FormGroup } from './components/forms/FormGroup/FormGroup'
+export { InputGroup } from './components/forms/InputGroup/InputGroup'
 export { InputPrefix } from './components/forms/InputPrefix/InputPrefix'
 export { InputSuffix } from './components/forms/InputSuffix/InputSuffix'
 export { Label } from './components/forms/Label/Label'