diff --git a/src/components/Search/Search.stories.tsx b/src/components/Search/Search.stories.tsx
index 9c46428655..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 => (
)
@@ -36,3 +40,20 @@ export const smallSearch = (): React.ReactElement => (
onSubmit={mockSubmit}
/>
)
+
+export const defaultSpanishSearch = (): React.ReactElement => (
+
+)
+
+export const bigSpanishSearch = (): React.ReactElement => (
+
+)
+
+export const smallSpanishSearch = (): React.ReactElement => (
+
+)
diff --git a/src/components/Search/Search.test.tsx b/src/components/Search/Search.test.tsx
index 45d1a88abf..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()
@@ -32,6 +36,18 @@ describe('Search component', () => {
)
})
+ it('renders a label', () => {
+ const mockSubmit = jest.fn()
+ const { queryByLabelText } = render(
+
+ )
+
+ 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..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) => 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 = ({
/>