-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Make search component extendable (#2230)
* add base SearchField component * update SearchField to have correct props, structure * incorporated SearchField into Search component * create base storybook story for SearchField component * add unit test for SearchField * moved SearchField into new shared Search directory * remove inline Label addition in Search component * created SearchButton component * incorporate SearchButton into Search component * keep track of button size in SearchButton component * add stories for SearchButton * add test for SearchButton * pass size fields and styling into SearchField and SearchButton components * Add test for passing usa-search--big class when isBig is set on SearchField * Add addtional test to Search * update import for Search in index.ts * fix additional import errors for Search * update import for Search in Header story * add test for passing input props to searchField component * revert changes to inputref * Add @pearl-truss as a contributor * push with updated ssh key
- Loading branch information
1 parent
2905d34
commit 9bd9137
Showing
16 changed files
with
322 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
src/components/Search/SearchButton/SearchButton.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React from 'react' | ||
| import { SearchButton } from './SearchButton' | ||
|
|
||
| export default { | ||
| title: 'Components/Search/SearchButton', | ||
| component: SearchButton, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: ` | ||
| ### USWDS 2.0 Search component | ||
| Source: https://designsystem.digital.gov/components/search/ | ||
| `, | ||
| }, | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| const sampleLocalization = { | ||
| buttonText: 'Buscar', | ||
| } | ||
|
|
||
| export const defaultSearchButton = (): React.ReactElement => ( | ||
| <SearchButton /> | ||
| ) | ||
|
|
||
| export const bigSearchButton = (): React.ReactElement => ( | ||
| <SearchButton size="big" /> | ||
| ) | ||
|
|
||
| export const smallSearch = (): React.ReactElement => ( | ||
| <SearchButton size="small" /> | ||
| ) | ||
|
|
||
| export const defaultSpanishSearchButton = (): React.ReactElement => ( | ||
| <SearchButton i18n={sampleLocalization} /> | ||
| ) | ||
|
|
||
| export const bigSpanishSearchButton = (): React.ReactElement => ( | ||
| <SearchButton size="big" i18n={sampleLocalization} /> | ||
| ) | ||
|
|
||
| export const smallSpanishSearch = (): React.ReactElement => ( | ||
| <SearchButton size="small" i18n={sampleLocalization} /> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React from 'react' | ||
| import { render } from '@testing-library/react' | ||
| import { SearchButton } from './SearchButton' | ||
|
|
||
| const sampleLocalization = { | ||
| buttonText: 'Buscar', | ||
| } | ||
|
|
||
| describe('SearchButton component', () => { | ||
| it('renders without errors', () => { | ||
| const { queryByRole } = render( | ||
| <SearchButton /> | ||
| ) | ||
| expect(queryByRole('button')).toHaveTextContent('Search') | ||
| }) | ||
|
|
||
| it('does not render button text when small', () => { | ||
| const { queryByRole } = render( | ||
| <SearchButton size="small" /> | ||
| ) | ||
|
|
||
| expect(queryByRole('button')).not.toHaveTextContent('Search') | ||
| }) | ||
|
|
||
| it('internationalization', () => { | ||
| const { queryByText } = render( | ||
| <SearchButton i18n={sampleLocalization} /> | ||
| ) | ||
|
|
||
| expect(queryByText('Buscar')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| describe('renders size classes', () => { | ||
| beforeEach(() => { | ||
| jest.clearAllMocks() | ||
| }) | ||
| it.each([ | ||
| ['big', 'usa-search--big'], | ||
| ['small', 'usa-search--small'], | ||
| ])('when size is %s should include class %s', (sizeString, uswdsClass) => { | ||
| const size = sizeString as 'big' | 'small' | ||
| const { container } = render(<SearchButton size={size} />) | ||
| expect(container.querySelector('div')).toHaveClass(uswdsClass) | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from 'react' | ||
| import classnames from 'classnames' | ||
|
|
||
| import searchImg from '@uswds/uswds/src/img/usa-icons-bg/search--white.svg' | ||
|
|
||
| import { Button } from '../../Button/Button' | ||
|
|
||
| type SearchLocalization = { | ||
| buttonText: string | ||
| } | ||
|
|
||
| type SearchButtonProps = { | ||
| size?: 'big' | 'small' | ||
| className?: string | ||
| i18n?: SearchLocalization | ||
| } | ||
|
|
||
| export const SearchButton = ({ | ||
| size, | ||
| className, | ||
| i18n | ||
| }: SearchButtonProps): React.ReactElement => { | ||
| const buttonText = i18n?.buttonText || 'Search' | ||
| const isSmall = size === 'small' | ||
| const isBig = size === 'big' | ||
|
|
||
| const classes = classnames( | ||
| { | ||
| 'usa-search--small': isSmall, | ||
| 'usa-search--big': isBig, | ||
| }, | ||
| className | ||
| ) | ||
| return ( | ||
| <div className={classes}> | ||
| <Button type="submit"> | ||
| {!isSmall && ( | ||
| <span className="usa-search__submit-text">{buttonText}</span> | ||
| )} | ||
| <img | ||
| src={searchImg} | ||
| className="usa-search__submit-icon" | ||
| alt={buttonText} | ||
| /> | ||
| </Button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default SearchButton |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from 'react' | ||
| import { SearchField } from './SearchField' | ||
|
|
||
| export default { | ||
| title: 'Components/Search/SearchField', | ||
| component: SearchField, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: ` | ||
| ### USWDS 2.0 Search Field component | ||
| Source: https://designsystem.digital.gov/components/search/ | ||
| `, | ||
| }, | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
|
|
||
| export const defaultSearchField = (): React.ReactElement => ( | ||
| <SearchField placeholder='Search...' /> | ||
| ) | ||
|
|
||
| export const bigSearchField = (): React.ReactElement => ( | ||
| <SearchField placeholder='Type something here...' isBig /> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react' | ||
| import { render } from '@testing-library/react' | ||
| import { SearchField } from './SearchField' | ||
|
|
||
| describe('SearchField component', () => { | ||
| it('renders without errors', () => { | ||
| const { queryByTestId } = render( | ||
| <SearchField /> | ||
| ) | ||
| expect(queryByTestId('textInput')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('renders a placeholder', () => { | ||
| const placeholder = 'SearchFieldhere' | ||
| const { queryByTestId } = render( | ||
| <SearchField placeholder={placeholder} /> | ||
| ) | ||
| expect(queryByTestId('textInput')).toHaveAttribute( | ||
| 'placeholder', | ||
| placeholder | ||
| ) | ||
| }) | ||
|
|
||
| it('renders a default value', () => { | ||
| const defaultValue = 'SearchFieldhere' | ||
| const { queryByTestId } = render( | ||
| <SearchField defaultValue={defaultValue} /> | ||
| ) | ||
| expect(queryByTestId('textInput')).toHaveAttribute( | ||
| 'value', | ||
| defaultValue | ||
| ) | ||
| }) | ||
|
|
||
| it('passes input props', () => { | ||
| const { getByTestId } = render( | ||
| <SearchField inputProps={{ required: true, minLength: 6 }} /> | ||
| ) | ||
| const input = getByTestId('textInput') | ||
|
|
||
| expect(input).toHaveAttribute('required') | ||
| expect(input).toHaveAttribute('minLength', "6") | ||
| }) | ||
|
|
||
| it('renders a label', () => { | ||
| const { queryByLabelText } = render( | ||
| <SearchField label="Buscar" /> | ||
| ) | ||
|
|
||
| expect(queryByLabelText('Buscar')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('adds big class when isBig is true', () => { | ||
| const uswdsClass = 'usa-search--big' | ||
| const { container } = render(<SearchField isBig />) | ||
| expect(container.querySelector('div')).toHaveClass(uswdsClass) | ||
| }) | ||
| }) |
Oops, something went wrong.