From ebbc678a98a56c971e3c2e5ee4a20fc66d25c41a Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Mon, 26 Apr 2021 17:40:38 -0700
Subject: [PATCH 1/2] Update Search component to pass in label instead of
 hardcoded string as Button text, update with test checking for ability to
 pass label, update stories with Spanish examples to match USWDS

---
 src/components/Search/Search.stories.tsx | 17 +++++++++++++++++
 src/components/Search/Search.test.tsx    | 10 ++++++++++
 src/components/Search/Search.tsx         |  2 +-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/Search.stories.tsx b/src/components/Search/Search.stories.tsx
index 9c46428655..0ce07f48c0 100644
--- a/src/components/Search/Search.stories.tsx
+++ b/src/components/Search/Search.stories.tsx
@@ -36,3 +36,20 @@ export const smallSearch = (): React.ReactElement => (
     onSubmit={mockSubmit}
   />
 )
+
+export const defaultSpanishSearch = (): React.ReactElement => (
+  <Search onSubmit={mockSubmit} label="Buscar" />
+)
+
+export const bigSpanishSearch = (): React.ReactElement => (
+  <Search size="big" onSubmit={mockSubmit} label="Buscar" />
+)
+
+export const smallSpanishSearch = (): React.ReactElement => (
+  <Search
+    placeholder="(Optional) Spanish Placeholder Text"
+    size="small"
+    onSubmit={mockSubmit}
+    label="Buscar"
+  />
+)
diff --git a/src/components/Search/Search.test.tsx b/src/components/Search/Search.test.tsx
index 45d1a88abf..c4294aff7b 100644
--- a/src/components/Search/Search.test.tsx
+++ b/src/components/Search/Search.test.tsx
@@ -32,6 +32,16 @@ describe('Search component', () => {
     )
   })
 
+  it('renders a label', () => {
+    const mockSubmit = jest.fn()
+    const spanishLabel = 'Buscar'
+    const { queryByLabelText } = render(
+      <Search onSubmit={mockSubmit} label={spanishLabel}></Search>
+    )
+
+    expect(queryByLabelText('Buscar')).toBeInTheDocument()
+  })
+
   describe('renders size classes', () => {
     beforeEach(() => {
       jest.clearAllMocks()
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index c8f0cbc2c2..27dc101c74 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -73,7 +73,7 @@ export const Search = ({
       />
       <Button type="submit">
         <span className={isSmall ? 'usa-sr-only' : 'usa-search__submit-text'}>
-          Search
+          {label}
         </span>
       </Button>
     </Form>

From cdd22c7688ad1758d23a361561557901947eeac7 Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Thu, 29 Apr 2021 12:52:15 -0700
Subject: [PATCH 2/2] Simplify localization interface, update test, update
 Storybook examples

---
 src/components/Search/Search.stories.tsx | 10 +++++++---
 src/components/Search/Search.test.tsx    | 10 ++++++++--
 src/components/Search/Search.tsx         | 22 +++++++++++++++-------
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/Search/Search.stories.tsx b/src/components/Search/Search.stories.tsx
index 0ce07f48c0..4c900dbc55 100644
--- a/src/components/Search/Search.stories.tsx
+++ b/src/components/Search/Search.stories.tsx
@@ -21,6 +21,10 @@ const mockSubmit = (): void => {
   /* mock submit fn */
 }
 
+const sampleLocalization = {
+  buttonText: 'Buscar',
+}
+
 export const defaultSearch = (): React.ReactElement => (
   <Search onSubmit={mockSubmit} />
 )
@@ -38,11 +42,11 @@ export const smallSearch = (): React.ReactElement => (
 )
 
 export const defaultSpanishSearch = (): React.ReactElement => (
-  <Search onSubmit={mockSubmit} label="Buscar" />
+  <Search onSubmit={mockSubmit} i18n={sampleLocalization} />
 )
 
 export const bigSpanishSearch = (): React.ReactElement => (
-  <Search size="big" onSubmit={mockSubmit} label="Buscar" />
+  <Search size="big" onSubmit={mockSubmit} i18n={sampleLocalization} />
 )
 
 export const smallSpanishSearch = (): React.ReactElement => (
@@ -50,6 +54,6 @@ export const smallSpanishSearch = (): React.ReactElement => (
     placeholder="(Optional) Spanish Placeholder Text"
     size="small"
     onSubmit={mockSubmit}
-    label="Buscar"
+    i18n={sampleLocalization}
   />
 )
diff --git a/src/components/Search/Search.test.tsx b/src/components/Search/Search.test.tsx
index c4294aff7b..e0084293c7 100644
--- a/src/components/Search/Search.test.tsx
+++ b/src/components/Search/Search.test.tsx
@@ -5,6 +5,10 @@ jest.mock('../../deprecation')
 import { deprecationWarning } from '../../deprecation'
 import { Search } from './Search'
 
+const sampleLocalization = {
+  buttonText: 'Buscar',
+}
+
 describe('Search component', () => {
   it('renders without errors', () => {
     const mockSubmit = jest.fn()
@@ -34,9 +38,11 @@ describe('Search component', () => {
 
   it('renders a label', () => {
     const mockSubmit = jest.fn()
-    const spanishLabel = 'Buscar'
     const { queryByLabelText } = render(
-      <Search onSubmit={mockSubmit} label={spanishLabel}></Search>
+      <Search
+        onSubmit={mockSubmit}
+        label="Buscar"
+        i18n={sampleLocalization}></Search>
     )
 
     expect(queryByLabelText('Buscar')).toBeInTheDocument()
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 27dc101c74..cdc35f3f96 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -7,10 +7,12 @@ import { Form, OptionalFormProps } from '../forms/Form/Form'
 import { Label } from '../forms/Label/Label'
 import { TextInput } from '../forms/TextInput/TextInput'
 
+interface SearchLocalization {
+  buttonText: string
+}
+
 interface SearchInputProps {
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
-  inputId?: string
-  inputName?: string
   size?: 'big' | 'small'
   /**
    * @deprecated since 1.6.0, use size
@@ -20,21 +22,25 @@ interface SearchInputProps {
    * @deprecated since 1.6.0, use size
    */
   small?: boolean
-  label?: React.ReactNode
   className?: string
+  inputName?: string
+  inputId?: string
   placeholder?: string
+  label?: React.ReactNode
+  i18n?: SearchLocalization
 }
 
 export const Search = ({
   onSubmit,
-  inputId = 'search-field',
-  inputName = 'search',
   size,
   big,
   small,
-  label = 'Search',
   className,
   placeholder,
+  inputName = 'search',
+  label = 'Search',
+  inputId = 'search-field',
+  i18n,
   ...formProps
 }: SearchInputProps & OptionalFormProps): React.ReactElement => {
   if (big) {
@@ -44,6 +50,8 @@ export const Search = ({
     deprecationWarning('Search property small is deprecated.  Use size')
   }
 
+  const buttonText = i18n?.buttonText || 'Search'
+
   const isBig = size ? size === 'big' : big
   const isSmall = size ? size === 'small' : small
   const classes = classnames(
@@ -73,7 +81,7 @@ export const Search = ({
       />
       <Button type="submit">
         <span className={isSmall ? 'usa-sr-only' : 'usa-search__submit-text'}>
-          {label}
+          {buttonText}
         </span>
       </Button>
     </Form>