diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-15 16:36:58 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-15 16:36:58 +0200 |
| commit | 235fe67d770f83131c9ec10b99012319440db690 (patch) | |
| tree | 3b96e2c8a5877fe15a9cfa6bff46130fa7a04a65 /src/components/organisms/layout | |
| parent | fe2252ced2bb895e26179640553b5a6c02957d54 (diff) | |
chore: add Search page
Diffstat (limited to 'src/components/organisms/layout')
| -rw-r--r-- | src/components/organisms/layout/header.stories.tsx | 9 | ||||
| -rw-r--r-- | src/components/organisms/layout/header.test.tsx | 12 | ||||
| -rw-r--r-- | src/components/organisms/layout/header.tsx | 21 |
3 files changed, 20 insertions, 22 deletions
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx index c58c344..98d6377 100644 --- a/src/components/organisms/layout/header.stories.tsx +++ b/src/components/organisms/layout/header.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import HeaderComponent from './header'; /** @@ -10,6 +9,7 @@ export default { component: HeaderComponent, args: { isHome: false, + searchPage: '#', withLink: false, }, argTypes: { @@ -95,13 +95,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], parameters: { layout: 'fullscreen', }, diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx index 05baaec..a9896f8 100644 --- a/src/components/organisms/layout/header.test.tsx +++ b/src/components/organisms/layout/header.test.tsx @@ -14,14 +14,22 @@ const title = 'Assumenda quis quod'; describe('Header', () => { it('renders the website title', () => { - render(<Header title={title} photo={photo} nav={nav} isHome={true} />); + render( + <Header + searchPage="#" + title={title} + photo={photo} + nav={nav} + isHome={true} + /> + ); expect( screen.getByRole('heading', { level: 1, name: title }) ).toBeInTheDocument(); }); it('renders the main nav', () => { - render(<Header title={title} photo={photo} nav={nav} />); + render(<Header searchPage="#" title={title} photo={photo} nav={nav} />); expect(screen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx index f6ebc9c..18ebb31 100644 --- a/src/components/organisms/layout/header.tsx +++ b/src/components/organisms/layout/header.tsx @@ -5,28 +5,25 @@ import { FC } from 'react'; import Toolbar, { type ToolbarProps } from '../toolbar/toolbar'; import styles from './header.module.scss'; -export type HeaderProps = BrandingProps & { - /** - * Set additional classnames to the header element. - */ - className?: string; - /** - * The main nav items. - */ - nav: ToolbarProps['nav']; -}; +export type HeaderProps = BrandingProps & + Pick<ToolbarProps, 'nav' | 'searchPage'> & { + /** + * Set additional classnames to the header element. + */ + className?: string; + }; /** * Header component * * Render the website header. */ -const Header: FC<HeaderProps> = ({ className, nav, ...props }) => { +const Header: FC<HeaderProps> = ({ className, nav, searchPage, ...props }) => { return ( <header className={`${styles.wrapper} ${className}`}> <div className={styles.body}> <Branding {...props} /> - <Toolbar nav={nav} className={styles.toolbar} /> + <Toolbar nav={nav} searchPage={searchPage} className={styles.toolbar} /> </div> </header> ); |
