feat: Update Search component to support i18n (#1192)

* 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

* Simplify localization interface, update test, update Storybook examples

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} />
 )
@@ -36,3 +40,20 @@ export const smallSearch = (): React.ReactElement => (
     onSubmit={mockSubmit}
   />
 )
+
+export const defaultSpanishSearch = (): React.ReactElement => (
+  <Search onSubmit={mockSubmit} i18n={sampleLocalization} />
+)
+
+export const bigSpanishSearch = (): React.ReactElement => (
+  <Search size="big" onSubmit={mockSubmit} i18n={sampleLocalization} />
+)
+
+export const smallSpanishSearch = (): React.ReactElement => (
+  <Search
+    placeholder="(Optional) Spanish Placeholder Text"
+    size="small"
+    onSubmit={mockSubmit}
+    i18n={sampleLocalization}
+  />
+)

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()
@@ -32,6 +36,18 @@ describe('Search component', () => {
     )
   })
 
+  it('renders a label', () => {
+    const mockSubmit = jest.fn()
+    const { queryByLabelText } = render(
+      <Search
+        onSubmit={mockSubmit}
+        label="Buscar"
+        i18n={sampleLocalization}></Search>
+    )
+
+    expect(queryByLabelText('Buscar')).toBeInTheDocument()
+  })
+
   describe('renders size classes', () => {
     beforeEach(() => {
       jest.clearAllMocks()

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'}>
-          Search
+          {buttonText}
         </span>
       </Button>
     </Form>