aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/toolbar
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/toolbar')
-rw-r--r--src/components/organisms/toolbar/search.stories.tsx10
-rw-r--r--src/components/organisms/toolbar/search.test.tsx6
-rw-r--r--src/components/organisms/toolbar/search.tsx12
-rw-r--r--src/components/organisms/toolbar/toolbar.stories.tsx11
-rw-r--r--src/components/organisms/toolbar/toolbar.test.tsx2
-rw-r--r--src/components/organisms/toolbar/toolbar.tsx7
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']}`}