diff options
Diffstat (limited to 'src/components/organisms/toolbar')
| -rw-r--r-- | src/components/organisms/toolbar/search.stories.tsx | 10 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/search.test.tsx | 6 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/search.tsx | 12 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.stories.tsx | 11 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.test.tsx | 2 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.tsx | 7 |
6 files changed, 25 insertions, 23 deletions
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx index 0421c8c..c6063a0 100644 --- a/src/components/organisms/toolbar/search.stories.tsx +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -9,6 +9,9 @@ import Search from './search'; export default { title: 'Organisms/Toolbar/Search', component: Search, + args: { + searchPage: '#', + }, argTypes: { className: { control: { @@ -44,13 +47,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof Search>; const Template: ComponentStory<typeof Search> = ({ diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx index 0ce09d8..a18b679 100644 --- a/src/components/organisms/toolbar/search.test.tsx +++ b/src/components/organisms/toolbar/search.test.tsx @@ -3,17 +3,17 @@ import Search from './search'; describe('Search', () => { it('renders a button to open search modal', () => { - render(<Search isActive={false} setIsActive={() => null} />); + render(<Search searchPage="#" isActive={false} setIsActive={() => null} />); expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open search'); }); it('renders a button to close search modal', () => { - render(<Search isActive={true} setIsActive={() => null} />); + render(<Search searchPage="#" isActive={true} setIsActive={() => null} />); expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close search'); }); it('renders a search form', () => { - render(<Search isActive={true} setIsActive={() => null} />); + render(<Search searchPage="#" isActive={true} setIsActive={() => null} />); expect(screen.getByRole('searchbox')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index 72cd576..a1471ef 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -17,12 +17,21 @@ export type SearchProps = { */ isActive: CheckboxProps['value']; /** + * A callback function to execute search. + */ + searchPage: SearchModalProps['searchPage']; + /** * A callback function to handle button state. */ setIsActive: CheckboxProps['setValue']; }; -const Search: FC<SearchProps> = ({ className = '', isActive, setIsActive }) => { +const Search: FC<SearchProps> = ({ + className = '', + isActive, + searchPage, + setIsActive, +}) => { const intl = useIntl(); const label = isActive ? intl.formatMessage({ @@ -53,6 +62,7 @@ const Search: FC<SearchProps> = ({ className = '', isActive, setIsActive }) => { <MagnifyingGlass /> </Label> <SearchModal + searchPage={searchPage} className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`} /> </div> diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 4f9a3de..477cb55 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import ToolbarComponent from './toolbar'; /** @@ -8,6 +7,9 @@ import ToolbarComponent from './toolbar'; export default { title: 'Organisms/Toolbar', component: ToolbarComponent, + args: { + searchPage: '#', + }, argTypes: { className: { control: { @@ -31,13 +33,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], parameters: { layout: 'fullscreen', }, diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx index 4bfe8a8..05e84ff 100644 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ b/src/components/organisms/toolbar/toolbar.test.tsx @@ -10,7 +10,7 @@ const nav = [ describe('Toolbar', () => { it('renders a navigation menu', () => { - render(<Toolbar nav={nav} />); + render(<Toolbar nav={nav} searchPage="#" />); expect(screen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index f1ce530..6593055 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -1,10 +1,10 @@ import { FC, useState } from 'react'; import MainNav, { type MainNavProps } from '../toolbar/main-nav'; -import Search from '../toolbar/search'; +import Search, { type SearchProps } from '../toolbar/search'; import Settings from '../toolbar/settings'; import styles from './toolbar.module.scss'; -export type ToolbarProps = { +export type ToolbarProps = Pick<SearchProps, 'searchPage'> & { /** * Set additional classnames to the toolbar wrapper. */ @@ -20,7 +20,7 @@ export type ToolbarProps = { * * Render the website toolbar. */ -const Toolbar: FC<ToolbarProps> = ({ className = '', nav }) => { +const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => { const [isNavOpened, setIsNavOpened] = useState<boolean>(false); const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false); const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false); @@ -34,6 +34,7 @@ const Toolbar: FC<ToolbarProps> = ({ className = '', nav }) => { className={styles.modal} /> <Search + searchPage={searchPage} isActive={isSearchOpened} setIsActive={setIsSearchOpened} className={`${styles.modal} ${styles['modal--search']}`} |
