diff options
Diffstat (limited to 'src/components/organisms/toolbar')
| -rw-r--r-- | src/components/organisms/toolbar/settings.stories.tsx | 29 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/settings.test.tsx | 16 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/settings.tsx | 9 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.stories.tsx | 13 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.test.tsx | 11 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.tsx | 4 |
6 files changed, 22 insertions, 60 deletions
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index bea0d9e..66b4e0f 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useCallback, useState } from 'react'; import { Settings } from './settings'; /** @@ -9,20 +9,9 @@ export default { title: 'Organisms/Toolbar/Settings', component: Settings, args: { - ackeeStorageKey: 'ackee-tracking', motionStorageKey: 'reduced-motion', }, argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'Set Ackee settings local storage key.', - type: { - name: 'string', - required: true, - }, - }, className: { control: { type: 'text', @@ -92,15 +81,11 @@ const Template: ComponentStory<typeof Settings> = ({ }) => { const [isOpen, setIsOpen] = useState<boolean>(isActive); - return ( - <Settings - isActive={isOpen} - setIsActive={() => { - setIsOpen(!isOpen); - }} - {...args} - /> - ); + const toggle = useCallback(() => { + setIsOpen((prevState) => !prevState); + }, []); + + return <Settings isActive={isOpen} setIsActive={toggle} {...args} />; }; /** diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx index 9dab407..66fa6a6 100644 --- a/src/components/organisms/toolbar/settings.test.tsx +++ b/src/components/organisms/toolbar/settings.test.tsx @@ -1,33 +1,35 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { Settings } from './settings'; +const doNothing = () => { + // do nothing +}; + describe('Settings', () => { it('renders a button to open settings modal', () => { render( <Settings - ackeeStorageKey="ackee-tracking" motionStorageKey="reduced-motion" isActive={false} - setIsActive={() => null} + setIsActive={doNothing} /> ); expect( - screen.getByRole('checkbox', { name: 'Open settings' }) + rtlScreen.getByRole('checkbox', { name: 'Open settings' }) ).toBeInTheDocument(); }); it('renders a button to close settings modal', () => { render( <Settings - ackeeStorageKey="ackee-tracking" motionStorageKey="reduced-motion" isActive={true} - setIsActive={() => null} + setIsActive={doNothing} /> ); expect( - screen.getByRole('checkbox', { name: 'Close settings' }) + rtlScreen.getByRole('checkbox', { name: 'Close settings' }) ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index b7625aa..124dd42 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -20,13 +20,7 @@ const SettingsWithRef: ForwardRefRenderFunction< HTMLDivElement, SettingsProps > = ( - { - ackeeStorageKey, - className = '', - isActive = false, - motionStorageKey, - setIsActive, - }, + { className = '', isActive = false, motionStorageKey, setIsActive }, ref ) => { const intl = useIntl(); @@ -61,7 +55,6 @@ const SettingsWithRef: ForwardRefRenderFunction< label={label} /> <SettingsModal - ackeeStorageKey={ackeeStorageKey} className={`${styles.modal} ${className}`} motionStorageKey={motionStorageKey} /> diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 7bf545b..22bead9 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Toolbar as ToolbarComponent } from './toolbar'; /** @@ -8,21 +8,10 @@ export default { title: 'Organisms/Toolbar', component: ToolbarComponent, args: { - ackeeStorageKey: 'ackee-tracking', motionStorageKey: 'reduced-motion', searchPage: '#', }, argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'Set Ackee settings local storage key.', - type: { - name: 'string', - required: true, - }, - }, className: { control: { type: 'text', diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx index 8fb06b0..e6b1022 100644 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ b/src/components/organisms/toolbar/toolbar.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { Toolbar } from './toolbar'; const nav = [ @@ -12,13 +12,8 @@ const nav = [ describe('Toolbar', () => { it('renders a navigation menu', () => { render( - <Toolbar - ackeeStorageKey="ackee-tracking" - motionStorageKey="reduced-motion" - nav={nav} - searchPage="#" - /> + <Toolbar motionStorageKey="reduced-motion" nav={nav} searchPage="#" /> ); - expect(screen.getByRole('navigation')).toBeInTheDocument(); + expect(rtlScreen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index 999a29a..be46636 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -7,7 +7,7 @@ import { Settings, type SettingsProps } from './settings'; import styles from './toolbar.module.scss'; export type ToolbarProps = Pick<SearchProps, 'searchPage'> & - Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & { + Pick<SettingsProps, 'motionStorageKey'> & { /** * Set additional classnames to the toolbar wrapper. */ @@ -24,7 +24,6 @@ export type ToolbarProps = Pick<SearchProps, 'searchPage'> & * Render the website toolbar. */ export const Toolbar: FC<ToolbarProps> = ({ - ackeeStorageKey, className = '', motionStorageKey, nav, @@ -76,7 +75,6 @@ export const Toolbar: FC<ToolbarProps> = ({ setIsActive={toggleSearch} /> <Settings - ackeeStorageKey={ackeeStorageKey} className={`${styles.modal} ${styles['modal--settings']}`} isActive={isSettingsOpened} motionStorageKey={motionStorageKey} |
