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']}`} | 
