Merge branch 'main' into release-1.17.0

trussworks · May 5, 2021 · 3eabe67 · 3eabe67
2 parents 1ce3ce9 + 5241d15
commit 3eabe67
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git 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} />
 )
@@ -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}
+  />
+)
diff --git 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()
@@ -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()

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