From 0a862c1bfce8ba7eb012a1b3c9d6bbc5bf10fe8e Mon Sep 17 00:00:00 2001
From: Jen Duong <duong.jenniferm@gmail.com>
Date: Thu, 21 Oct 2021 16:47:00 +0100
Subject: [PATCH 1/2] feat: Add IconPrefix and IconSuffix components (#1687)

Co-authored-by: jenbutongit <hi+git@jen.digital>
---
 .../forms/InputPrefix/InputPrefix.stories.tsx | 50 ++++++++++++++++
 .../forms/InputPrefix/InputPrefix.test.tsx    | 21 +++++++
 .../forms/InputPrefix/InputPrefix.tsx         | 20 +++++++
 .../forms/InputSuffix/InputSuffix.stories.tsx | 57 +++++++++++++++++++
 .../forms/InputSuffix/InputSuffix.test.tsx    | 19 +++++++
 .../forms/InputSuffix/InputSuffix.tsx         | 20 +++++++
 src/index.ts                                  |  2 +
 7 files changed, 189 insertions(+)
 create mode 100644 src/components/forms/InputPrefix/InputPrefix.stories.tsx
 create mode 100644 src/components/forms/InputPrefix/InputPrefix.test.tsx
 create mode 100644 src/components/forms/InputPrefix/InputPrefix.tsx
 create mode 100644 src/components/forms/InputSuffix/InputSuffix.stories.tsx
 create mode 100644 src/components/forms/InputSuffix/InputSuffix.test.tsx
 create mode 100644 src/components/forms/InputSuffix/InputSuffix.tsx

diff --git a/src/components/forms/InputPrefix/InputPrefix.stories.tsx b/src/components/forms/InputPrefix/InputPrefix.stories.tsx
new file mode 100644
index 0000000000..4d23fae3e6
--- /dev/null
+++ b/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>
+)
diff --git a/src/components/forms/InputPrefix/InputPrefix.test.tsx b/src/components/forms/InputPrefix/InputPrefix.test.tsx
new file mode 100644
index 0000000000..30d6238fd4
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/forms/InputPrefix/InputPrefix.tsx b/src/components/forms/InputPrefix/InputPrefix.tsx
new file mode 100644
index 0000000000..79dbeba58a
--- /dev/null
+++ b/src/components/forms/InputPrefix/InputPrefix.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type InputPrefixProps = {
+  className?: string
+  children: React.ReactNode
+} & JSX.IntrinsicElements['div']
+
+export const InputPrefix = ({
+  className,
+  children,
+}: InputPrefixProps): React.ReactElement => {
+  const classes = classnames('usa-input-prefix', className)
+
+  return (
+    <div className={classes} aria-hidden="true" data-testid="InputPrefix">
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/forms/InputSuffix/InputSuffix.stories.tsx b/src/components/forms/InputSuffix/InputSuffix.stories.tsx
new file mode 100644
index 0000000000..2874f2ec1a
--- /dev/null
+++ b/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>
+)
diff --git a/src/components/forms/InputSuffix/InputSuffix.test.tsx b/src/components/forms/InputSuffix/InputSuffix.test.tsx
new file mode 100644
index 0000000000..0829722ff7
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/forms/InputSuffix/InputSuffix.tsx b/src/components/forms/InputSuffix/InputSuffix.tsx
new file mode 100644
index 0000000000..ce6c68a191
--- /dev/null
+++ b/src/components/forms/InputSuffix/InputSuffix.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type InputSuffixProps = {
+  className?: string
+  children: React.ReactNode
+} & JSX.IntrinsicElements['div']
+
+export const InputSuffix = ({
+  className,
+  children,
+}: InputSuffixProps): React.ReactElement => {
+  const classes = classnames('usa-input-suffix', className)
+
+  return (
+    <div className={classes} aria-hidden="true" data-testid="InputSuffix">
+      {children}
+    </div>
+  )
+}
diff --git a/src/index.ts b/src/index.ts
index a1f9fc05fa..0c7350e28c 100644
--- a/src/index.ts
+++ b/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'

From 0a5d4d1e22136c41002014a78abc99176580a914 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 26 Oct 2021 12:40:35 -0400
Subject: [PATCH 2/2] Add ability to pass through intrinsic props

---
 src/components/forms/InputPrefix/InputPrefix.tsx | 8 +++++++-
 src/components/forms/InputSuffix/InputSuffix.tsx | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/InputPrefix/InputPrefix.tsx b/src/components/forms/InputPrefix/InputPrefix.tsx
index 79dbeba58a..7437c2c4dc 100644
--- a/src/components/forms/InputPrefix/InputPrefix.tsx
+++ b/src/components/forms/InputPrefix/InputPrefix.tsx
@@ -9,11 +9,17 @@ type InputPrefixProps = {
 export const InputPrefix = ({
   className,
   children,
+  ...divProps
 }: InputPrefixProps): React.ReactElement => {
   const classes = classnames('usa-input-prefix', className)
 
   return (
-    <div className={classes} aria-hidden="true" data-testid="InputPrefix">
+    <div
+      className={classes}
+      aria-hidden="true"
+      {...divProps}
+      data-testid="InputPrefix"
+    >
       {children}
     </div>
   )
diff --git a/src/components/forms/InputSuffix/InputSuffix.tsx b/src/components/forms/InputSuffix/InputSuffix.tsx
index ce6c68a191..94ee32b85e 100644
--- a/src/components/forms/InputSuffix/InputSuffix.tsx
+++ b/src/components/forms/InputSuffix/InputSuffix.tsx
@@ -9,11 +9,17 @@ type InputSuffixProps = {
 export const InputSuffix = ({
   className,
   children,
+  ...divProps
 }: InputSuffixProps): React.ReactElement => {
   const classes = classnames('usa-input-suffix', className)
 
   return (
-    <div className={classes} aria-hidden="true" data-testid="InputSuffix">
+    <div
+      className={classes}
+      aria-hidden="true"
+      {...divProps}
+      data-testid="InputSuffix"
+    >
       {children}
     </div>
   )