From 235fe67d770f83131c9ec10b99012319440db690 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 15 May 2022 16:36:58 +0200
Subject: chore: add Search page

---
 src/components/organisms/toolbar/search.stories.tsx  | 10 +++-------
 src/components/organisms/toolbar/search.test.tsx     |  6 +++---
 src/components/organisms/toolbar/search.tsx          | 12 +++++++++++-
 src/components/organisms/toolbar/toolbar.stories.tsx | 11 +++--------
 src/components/organisms/toolbar/toolbar.test.tsx    |  2 +-
 src/components/organisms/toolbar/toolbar.tsx         |  7 ++++---
 6 files changed, 25 insertions(+), 23 deletions(-)

(limited to 'src/components/organisms/toolbar')

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
@@ -16,13 +16,22 @@ export type SearchProps = {
    * The button state.
    */
   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']}`}
-- 
cgit v1.2.3