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 = ({ />