From b214baab3e17d92f784b4f782863deafc5558ee4 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 18 May 2022 14:27:11 +0200 Subject: chore: close toolbar modals on click/focus outside --- src/components/organisms/forms/settings-form.tsx | 36 ++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/components/organisms/forms/settings-form.tsx (limited to 'src/components/organisms/forms/settings-form.tsx') diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx new file mode 100644 index 0000000..0a34601 --- /dev/null +++ b/src/components/organisms/forms/settings-form.tsx @@ -0,0 +1,36 @@ +import Form from '@components/atoms/forms/form'; +import AckeeSelect, { + type AckeeSelectProps, +} from '@components/molecules/forms/ackee-select'; +import MotionToggle from '@components/molecules/forms/motion-toggle'; +import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle'; +import ThemeToggle from '@components/molecules/forms/theme-toggle'; +import { FC } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './settings-form.module.scss'; + +export type SettingsFormProps = Pick; + +const SettingsForm: FC = ({ tooltipClassName }) => { + const intl = useIntl(); + const ariaLabel = intl.formatMessage({ + defaultMessage: 'Settings form', + id: 'gX+YVy', + description: 'SettingsForm: an accessible form name', + }); + + return ( +
null}> + + + + + + ); +}; + +export default SettingsForm; -- cgit v1.2.3 From 584bd42f871d2e1618ca414749f09c38f0143a44 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 18 May 2022 22:40:59 +0200 Subject: chore: handle settings change --- .../molecules/forms/ackee-select.stories.tsx | 18 +++++----- .../molecules/forms/ackee-select.test.tsx | 4 +-- src/components/molecules/forms/ackee-select.tsx | 26 +++++++++++---- .../molecules/forms/motion-toggle.stories.tsx | 18 +++++----- .../molecules/forms/motion-toggle.test.tsx | 2 +- src/components/molecules/forms/motion-toggle.tsx | 34 +++++++++++++++---- .../molecules/forms/prism-theme-toggle.stories.tsx | 21 ------------ .../molecules/forms/prism-theme-toggle.test.tsx | 2 +- .../molecules/forms/prism-theme-toggle.tsx | 34 ++++++++++++++----- .../molecules/forms/theme-toggle.stories.tsx | 21 ------------ .../molecules/forms/theme-toggle.test.tsx | 2 +- src/components/molecules/forms/theme-toggle.tsx | 20 +++++++++--- .../organisms/forms/settings-form.test.tsx | 38 +++++++++++++++++++--- src/components/organisms/forms/settings-form.tsx | 32 ++++++++++++++---- src/components/organisms/layout/header.stories.tsx | 22 +++++++++++++ src/components/organisms/layout/header.test.tsx | 19 ++++++++--- src/components/organisms/layout/header.tsx | 22 +++++++++++-- src/components/organisms/modals/search-modal.tsx | 1 + .../organisms/modals/settings-modal.test.tsx | 7 +++- src/components/organisms/modals/settings-modal.tsx | 6 +++- .../organisms/toolbar/settings.stories.tsx | 24 ++++++++++++++ src/components/organisms/toolbar/settings.test.tsx | 18 ++++++++-- src/components/organisms/toolbar/settings.tsx | 22 +++++++++---- .../organisms/toolbar/toolbar-items.module.scss | 2 +- .../organisms/toolbar/toolbar.stories.tsx | 22 +++++++++++++ src/components/organisms/toolbar/toolbar.test.tsx | 9 ++++- src/components/organisms/toolbar/toolbar.tsx | 37 +++++++++++++-------- src/components/templates/layout/layout.tsx | 10 +++--- src/components/templates/page/page-layout.tsx | 3 ++ src/services/local-storage/index.ts | 6 ++-- src/utils/hooks/use-attributes.tsx | 33 +++++++++++++++++++ src/utils/hooks/use-code-blocks-theme.tsx | 22 +++++++++++++ src/utils/hooks/use-local-storage.tsx | 35 ++++++++++++++++++++ src/utils/hooks/use-query-selector-all.tsx | 16 +++++++++ src/utils/hooks/use-update-ackee-options.tsx | 19 +++++++++++ src/utils/providers/prism-theme.tsx | 2 +- 36 files changed, 487 insertions(+), 142 deletions(-) create mode 100644 src/utils/hooks/use-attributes.tsx create mode 100644 src/utils/hooks/use-code-blocks-theme.tsx create mode 100644 src/utils/hooks/use-local-storage.tsx create mode 100644 src/utils/hooks/use-query-selector-all.tsx create mode 100644 src/utils/hooks/use-update-ackee-options.tsx (limited to 'src/components/organisms/forms/settings-form.tsx') diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx index 4e6adf1..6b42b71 100644 --- a/src/components/molecules/forms/ackee-select.stories.tsx +++ b/src/components/molecules/forms/ackee-select.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import AckeeSelect from './ackee-select'; /** @@ -33,6 +32,16 @@ export default { required: false, }, }, + storageKey: { + control: { + type: 'text', + }, + description: 'Set Ackee settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, tooltipClassName: { control: { type: 'text', @@ -47,13 +56,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - - - - ), - ], } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx index ec27922..0089c06 100644 --- a/src/components/molecules/forms/ackee-select.test.tsx +++ b/src/components/molecules/forms/ackee-select.test.tsx @@ -4,13 +4,13 @@ import AckeeSelect from './ackee-select'; describe('Select', () => { it('should correctly set default option', () => { - render(); + render(); expect(screen.getByRole('combobox')).toHaveValue('full'); expect(screen.queryByRole('combobox')).not.toHaveValue('partial'); }); it('should correctly change value when user choose another option', async () => { - render(); + render(); await act(async () => { await user.selectOptions( diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx index 101e5b5..34850fb 100644 --- a/src/components/molecules/forms/ackee-select.tsx +++ b/src/components/molecules/forms/ackee-select.tsx @@ -1,12 +1,14 @@ -import { SelectOptions } from '@components/atoms/forms/select'; -import { Dispatch, FC, SetStateAction, useState } from 'react'; +import { type SelectOptions } from '@components/atoms/forms/select'; +import useLocalStorage from '@utils/hooks/use-local-storage'; +import useUpdateAckeeOptions, { + type AckeeOptions, +} from '@utils/hooks/use-update-ackee-options'; +import { Dispatch, FC, SetStateAction } from 'react'; import { useIntl } from 'react-intl'; import SelectWithTooltip, { type SelectWithTooltipProps, } from './select-with-tooltip'; -export type AckeeOptions = 'full' | 'partial'; - export type AckeeSelectProps = Pick< SelectWithTooltipProps, 'labelClassName' | 'tooltipClassName' @@ -15,6 +17,10 @@ export type AckeeSelectProps = Pick< * A default value for Ackee settings. */ initialValue: AckeeOptions; + /** + * The local storage key to save preference. + */ + storageKey: string; }; /** @@ -22,9 +28,17 @@ export type AckeeSelectProps = Pick< * * Render a select to set Ackee settings. */ -const AckeeSelect: FC = ({ initialValue, ...props }) => { +const AckeeSelect: FC = ({ + initialValue, + storageKey, + ...props +}) => { const intl = useIntl(); - const [value, setValue] = useState(initialValue); + const { value, setValue } = useLocalStorage( + storageKey, + initialValue + ); + useUpdateAckeeOptions(value); const ackeeLabel = intl.formatMessage({ defaultMessage: 'Tracking:', diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx index dcfc68d..60430d5 100644 --- a/src/components/molecules/forms/motion-toggle.stories.tsx +++ b/src/components/molecules/forms/motion-toggle.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import MotionToggleComponent from './motion-toggle'; /** @@ -22,6 +21,16 @@ export default { required: false, }, }, + storageKey: { + control: { + type: 'text', + }, + description: 'Set local storage key.', + type: { + name: 'string', + required: true, + }, + }, value: { control: { type: null, @@ -33,13 +42,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - - - - ), - ], } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx index 77bc17c..4fd6b31 100644 --- a/src/components/molecules/forms/motion-toggle.test.tsx +++ b/src/components/molecules/forms/motion-toggle.test.tsx @@ -3,7 +3,7 @@ import MotionToggle from './motion-toggle'; describe('MotionToggle', () => { it('renders a checked toggle (deactivate animations choice)', () => { - render(); + render(); expect( screen.getByRole('checkbox', { name: `Animations: On Off`, diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx index 24b54ae..e3bb11a 100644 --- a/src/components/molecules/forms/motion-toggle.tsx +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -2,19 +2,41 @@ import Toggle, { type ToggleChoices, type ToggleProps, } from '@components/molecules/forms/toggle'; -import { FC, useState } from 'react'; +import useAttributes from '@utils/hooks/use-attributes'; +import useLocalStorage from '@utils/hooks/use-local-storage'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -export type MotionToggleProps = Pick; +export type MotionToggleProps = Pick< + ToggleProps, + 'labelClassName' | 'value' +> & { + /** + * The local storage key to save preference. + */ + storageKey: string; +}; /** * MotionToggle component * * Render a Toggle component to set reduce motion. */ -const MotionToggle: FC = ({ value, ...props }) => { +const MotionToggle: FC = ({ + storageKey, + value, + ...props +}) => { const intl = useIntl(); - const [isDeactivated, setIsDeactivated] = useState(value); + const { value: isReduced, setValue: setIsReduced } = useLocalStorage( + storageKey, + value + ); + useAttributes({ + attribute: 'reducedMotion', + value: `${isReduced}`, + }); + const reduceMotionLabel = intl.formatMessage({ defaultMessage: 'Animations:', description: 'MotionToggle: reduce motion label', @@ -42,8 +64,8 @@ const MotionToggle: FC = ({ value, ...props }) => { label={reduceMotionLabel} labelSize="medium" choices={reduceMotionChoices} - value={isDeactivated} - setValue={setIsDeactivated} + value={isReduced} + setValue={setIsReduced} {...props} /> ); diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx index 513ebfc..ef4ed6e 100644 --- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import PrismThemeToggle from './prism-theme-toggle'; /** @@ -22,24 +21,7 @@ export default { required: false, }, }, - value: { - control: { - type: null, - }, - description: 'The prism theme value.', - type: { - name: 'boolean', - required: true, - }, - }, }, - decorators: [ - (Story) => ( - - - - ), - ], } as ComponentMeta; const Template: ComponentStory = (args) => ( @@ -50,6 +32,3 @@ const Template: ComponentStory = (args) => ( * Toggle Stories - Prism theme */ export const PrismTheme = Template.bind({}); -PrismTheme.args = { - value: false, -}; diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx index 0dceb92..d831b82 100644 --- a/src/components/molecules/forms/prism-theme-toggle.test.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.test.tsx @@ -3,7 +3,7 @@ import PrismThemeToggle from './prism-theme-toggle'; describe('PrismThemeToggle', () => { it('renders a checked toggle (dark theme choice)', () => { - render(); + render(); expect( screen.getByRole('checkbox', { name: `Code blocks: Light theme Dark theme`, diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx index 0b9c447..3320722 100644 --- a/src/components/molecules/forms/prism-theme-toggle.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.tsx @@ -4,22 +4,38 @@ import Toggle, { type ToggleChoices, type ToggleProps, } from '@components/molecules/forms/toggle'; -import { FC, useState } from 'react'; +import { usePrismTheme } from '@utils/providers/prism-theme'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -export type PrismThemeToggleProps = Pick< - ToggleProps, - 'labelClassName' | 'value' ->; +export type PrismThemeToggleProps = Pick; /** * PrismThemeToggle component * * Render a Toggle component to set code blocks theme. */ -const PrismThemeToggle: FC = ({ value, ...props }) => { +const PrismThemeToggle: FC = ({ ...props }) => { const intl = useIntl(); - const [isDarkTheme, setIsDarkTheme] = useState(value); + const { theme, setTheme, resolvedTheme } = usePrismTheme(); + + /** + * Check if the resolved or chosen theme is dark theme. + * + * @returns {boolean} True if it is dark theme. + */ + const isDarkTheme = (): boolean => { + if (theme === 'system') return resolvedTheme === 'dark'; + return theme === 'dark'; + }; + + /** + * Update the theme. + */ + const updateTheme = () => { + setTheme(isDarkTheme() ? 'light' : 'dark'); + }; + const themeLabel = intl.formatMessage({ defaultMessage: 'Code blocks:', description: 'PrismThemeToggle: theme label', @@ -47,8 +63,8 @@ const PrismThemeToggle: FC = ({ value, ...props }) => { label={themeLabel} labelSize="medium" choices={themeChoices} - value={isDarkTheme} - setValue={setIsDarkTheme} + value={isDarkTheme()} + setValue={updateTheme} {...props} /> ); diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx index 05d94b9..5ebf5a2 100644 --- a/src/components/molecules/forms/theme-toggle.stories.tsx +++ b/src/components/molecules/forms/theme-toggle.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import ThemeToggle from './theme-toggle'; /** @@ -22,24 +21,7 @@ export default { required: false, }, }, - value: { - control: { - type: null, - }, - description: 'The theme value.', - type: { - name: 'boolean', - required: true, - }, - }, }, - decorators: [ - (Story) => ( - - - - ), - ], } as ComponentMeta; const Template: ComponentStory = (args) => ( @@ -50,6 +32,3 @@ const Template: ComponentStory = (args) => ( * Toggle Stories - Theme */ export const Theme = Template.bind({}); -Theme.args = { - value: false, -}; diff --git a/src/components/molecules/forms/theme-toggle.test.tsx b/src/components/molecules/forms/theme-toggle.test.tsx index 5cd3209..89b4f6f 100644 --- a/src/components/molecules/forms/theme-toggle.test.tsx +++ b/src/components/molecules/forms/theme-toggle.test.tsx @@ -3,7 +3,7 @@ import ThemeToggle from './theme-toggle'; describe('ThemeToggle', () => { it('renders a checked toggle (dark theme choice)', () => { - render(); + render(); expect( screen.getByRole('checkbox', { name: `Theme: Light theme Dark theme`, diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx index 10c6c47..61ee4c6 100644 --- a/src/components/molecules/forms/theme-toggle.tsx +++ b/src/components/molecules/forms/theme-toggle.tsx @@ -4,19 +4,29 @@ import Toggle, { type ToggleChoices, type ToggleProps, } from '@components/molecules/forms/toggle'; -import { FC, useState } from 'react'; +import { useTheme } from 'next-themes'; +import { FC } from 'react'; import { useIntl } from 'react-intl'; -export type ThemeToggleProps = Pick; +export type ThemeToggleProps = Pick; /** * ThemeToggle component * * Render a Toggle component to set theme. */ -const ThemeToggle: FC = ({ value, ...props }) => { +const ThemeToggle: FC = ({ ...props }) => { const intl = useIntl(); - const [isDarkTheme, setIsDarkTheme] = useState(value); + const { resolvedTheme, setTheme } = useTheme(); + const isDarkTheme = resolvedTheme === 'dark'; + + /** + * Update the theme. + */ + const updateTheme = () => { + setTheme(isDarkTheme ? 'light' : 'dark'); + }; + const themeLabel = intl.formatMessage({ defaultMessage: 'Theme:', description: 'ThemeToggle: theme label', @@ -45,7 +55,7 @@ const ThemeToggle: FC = ({ value, ...props }) => { labelSize="medium" choices={themeChoices} value={isDarkTheme} - setValue={setIsDarkTheme} + setValue={updateTheme} {...props} /> ); diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx index beb65ec..43d546e 100644 --- a/src/components/organisms/forms/settings-form.test.tsx +++ b/src/components/organisms/forms/settings-form.test.tsx @@ -1,37 +1,65 @@ import { render, screen } from '@test-utils'; import SettingsForm from './settings-form'; +const ackeeStorageKey = 'ackee-tracking'; +const motionStorageKey = 'reduce-motion'; + describe('SettingsForm', () => { it('renders a form', () => { - render(); + render( + + ); expect( screen.getByRole('form', { name: /^Settings form/i }) ).toBeInTheDocument(); }); it('renders a theme toggle setting', () => { - render(); + render( + + ); expect( screen.getByRole('checkbox', { name: /^Theme:/i }) ).toBeInTheDocument(); }); it('renders a code blocks toggle setting', () => { - render(); + render( + + ); expect( screen.getByRole('checkbox', { name: /^Code blocks:/i }) ).toBeInTheDocument(); }); it('renders a motion setting', () => { - render(); + render( + + ); expect( screen.getByRole('checkbox', { name: /^Animations:/i }) ).toBeInTheDocument(); }); it('renders a Ackee setting', () => { - render(); + render( + + ); expect( screen.getByRole('combobox', { name: /^Tracking:/i }) ).toBeInTheDocument(); diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx index 0a34601..c897fa5 100644 --- a/src/components/organisms/forms/settings-form.tsx +++ b/src/components/organisms/forms/settings-form.tsx @@ -2,16 +2,31 @@ import Form from '@components/atoms/forms/form'; import AckeeSelect, { type AckeeSelectProps, } from '@components/molecules/forms/ackee-select'; -import MotionToggle from '@components/molecules/forms/motion-toggle'; +import MotionToggle, { + MotionToggleProps, +} from '@components/molecules/forms/motion-toggle'; import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle'; import ThemeToggle from '@components/molecules/forms/theme-toggle'; import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './settings-form.module.scss'; -export type SettingsFormProps = Pick; +export type SettingsFormProps = Pick & { + /** + * The local storage key for Ackee settings. + */ + ackeeStorageKey: AckeeSelectProps['storageKey']; + /** + * The local storage key for Reduce motion settings. + */ + motionStorageKey: MotionToggleProps['storageKey']; +}; -const SettingsForm: FC = ({ tooltipClassName }) => { +const SettingsForm: FC = ({ + ackeeStorageKey, + motionStorageKey, + tooltipClassName, +}) => { const intl = useIntl(); const ariaLabel = intl.formatMessage({ defaultMessage: 'Settings form', @@ -21,13 +36,18 @@ const SettingsForm: FC = ({ tooltipClassName }) => { return (
null}> - - - + + + ); diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx index 98d6377..3ceb337 100644 --- a/src/components/organisms/layout/header.stories.tsx +++ b/src/components/organisms/layout/header.stories.tsx @@ -8,11 +8,23 @@ export default { title: 'Organisms/Layout', component: HeaderComponent, args: { + ackeeStorageKey: 'ackee-tracking', isHome: false, + motionStorageKey: 'reduced-motion', searchPage: '#', withLink: false, }, argTypes: { + ackeeStorageKey: { + control: { + type: 'text', + }, + description: 'Set Ackee settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, baseline: { control: { type: 'text', @@ -52,6 +64,16 @@ export default { required: false, }, }, + motionStorageKey: { + control: { + type: 'text', + }, + description: 'Set Reduced motion settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, nav: { description: 'The main navigation items.', type: { diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx index a9896f8..414d96f 100644 --- a/src/components/organisms/layout/header.test.tsx +++ b/src/components/organisms/layout/header.test.tsx @@ -16,11 +16,13 @@ describe('Header', () => { it('renders the website title', () => { render(
); expect( @@ -29,7 +31,16 @@ describe('Header', () => { }); it('renders the main nav', () => { - render(
); + render( +
+ ); expect(screen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx index 18ebb31..f6212c3 100644 --- a/src/components/organisms/layout/header.tsx +++ b/src/components/organisms/layout/header.tsx @@ -6,7 +6,10 @@ import Toolbar, { type ToolbarProps } from '../toolbar/toolbar'; import styles from './header.module.scss'; export type HeaderProps = BrandingProps & - Pick & { + Pick< + ToolbarProps, + 'ackeeStorageKey' | 'motionStorageKey' | 'nav' | 'searchPage' + > & { /** * Set additional classnames to the header element. */ @@ -18,12 +21,25 @@ export type HeaderProps = BrandingProps & * * Render the website header. */ -const Header: FC = ({ className, nav, searchPage, ...props }) => { +const Header: FC = ({ + ackeeStorageKey, + className, + motionStorageKey, + nav, + searchPage, + ...props +}) => { return (
- +
); diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx index e92bf1b..c731048 100644 --- a/src/components/organisms/modals/search-modal.tsx +++ b/src/components/organisms/modals/search-modal.tsx @@ -10,6 +10,7 @@ const DynamicSearchForm = dynamic( () => import('@components/organisms/forms/search-form'), { loading: () => , + ssr: false, } ); diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx index acbf7d1..d6ed989 100644 --- a/src/components/organisms/modals/settings-modal.test.tsx +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -3,7 +3,12 @@ import SettingsModal from './settings-modal'; describe('SettingsModal', () => { it('renders a fake heading', () => { - render(); + render( + + ); expect(screen.getByText(/Settings/i)).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index e724076..5d14836 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -10,11 +10,15 @@ const DynamicSettingsForm = dynamic( () => import('@components/organisms/forms/settings-form'), { loading: () => , + ssr: false, } ); export type SettingsModalProps = Pick & - Pick; + Pick< + SettingsFormProps, + 'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName' + >; /** * SettingsModal component diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index aab4b9e..9d04932 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -8,7 +8,21 @@ import Settings from './settings'; 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', @@ -32,6 +46,16 @@ export default { required: true, }, }, + motionStorageKey: { + control: { + type: 'text', + }, + description: 'Set Reduced motion settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, setIsActive: { control: { type: null, diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx index 96a32c9..7ccb234 100644 --- a/src/components/organisms/toolbar/settings.test.tsx +++ b/src/components/organisms/toolbar/settings.test.tsx @@ -3,14 +3,28 @@ import Settings from './settings'; describe('Settings', () => { it('renders a button to open settings modal', () => { - render( null} />); + render( + null} + /> + ); expect( screen.getByRole('checkbox', { name: 'Open settings' }) ).toBeInTheDocument(); }); it('renders a button to close settings modal', () => { - render( null} />); + render( + null} + /> + ); expect( screen.getByRole('checkbox', { name: 'Close settings' }) ).toBeInTheDocument(); diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index 43d3190..9985ba0 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -1,7 +1,7 @@ import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; import Label from '@components/atoms/forms/label'; import Cog from '@components/atoms/icons/cog'; -import { FC, forwardRef, ForwardRefRenderFunction } from 'react'; +import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; import SettingsModal, { type SettingsModalProps, @@ -9,7 +9,10 @@ import SettingsModal, { import settingsStyles from './settings.module.scss'; import sharedStyles from './toolbar-items.module.scss'; -export type SettingsProps = { +export type SettingsProps = Pick< + SettingsModalProps, + 'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName' +> & { /** * Set additional classnames to the modal wrapper. */ @@ -22,14 +25,17 @@ export type SettingsProps = { * A callback function to handle button state. */ setIsActive: CheckboxProps['setValue']; - /** - * Set additional classnames to the tooltip wrapper. - */ - tooltipClassName?: SettingsModalProps['tooltipClassName']; }; const Settings: ForwardRefRenderFunction = ( - { className = '', isActive, setIsActive, tooltipClassName = '' }, + { + ackeeStorageKey, + className = '', + isActive, + motionStorageKey, + setIsActive, + tooltipClassName = '', + }, ref ) => { const intl = useIntl(); @@ -62,7 +68,9 @@ const Settings: ForwardRefRenderFunction = ( diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss index c970b71..20abe01 100644 --- a/src/components/organisms/toolbar/toolbar-items.module.scss +++ b/src/components/organisms/toolbar/toolbar-items.module.scss @@ -22,7 +22,7 @@ .modal { position: absolute; top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs))); - transition: all 0.8s ease-in-out 0s; + transition: all 0.8s ease-in-out 0s, background 0s; @include mix.media("screen") { @include mix.dimensions(null, "sm") { diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 477cb55..1f07e79 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -8,9 +8,21 @@ 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', @@ -24,6 +36,16 @@ export default { required: false, }, }, + motionStorageKey: { + control: { + type: 'text', + }, + description: 'Set Reduced motion settings local storage key.', + type: { + name: 'string', + required: true, + }, + }, nav: { description: 'The main nav items.', type: { diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx index 05e84ff..72965e8 100644 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ b/src/components/organisms/toolbar/toolbar.test.tsx @@ -10,7 +10,14 @@ const nav = [ describe('Toolbar', () => { it('renders a navigation menu', () => { - render(); + render( + + ); expect(screen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index e4188fe..e196c09 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -2,26 +2,33 @@ import useClickOutside from '@utils/hooks/use-click-outside'; import { FC, useRef, useState } from 'react'; import MainNav, { type MainNavProps } from '../toolbar/main-nav'; import Search, { type SearchProps } from '../toolbar/search'; -import Settings from '../toolbar/settings'; +import Settings, { SettingsProps } from '../toolbar/settings'; import styles from './toolbar.module.scss'; -export type ToolbarProps = Pick & { - /** - * Set additional classnames to the toolbar wrapper. - */ - className?: string; - /** - * The main nav items. - */ - nav: MainNavProps['items']; -}; +export type ToolbarProps = Pick & + Pick & { + /** + * Set additional classnames to the toolbar wrapper. + */ + className?: string; + /** + * The main nav items. + */ + nav: MainNavProps['items']; + }; /** * Toolbar component * * Render the website toolbar. */ -const Toolbar: FC = ({ className = '', nav, searchPage }) => { +const Toolbar: FC = ({ + ackeeStorageKey, + className = '', + motionStorageKey, + nav, + searchPage, +}) => { const [isNavOpened, setIsNavOpened] = useState(false); const [isSearchOpened, setIsSearchOpened] = useState(false); const [isSettingsOpened, setIsSettingsOpened] = useState(false); @@ -53,11 +60,13 @@ const Toolbar: FC = ({ className = '', nav, searchPage }) => { ref={searchRef} /> ); diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx index 559eaed..8f0d4e7 100644 --- a/src/components/templates/layout/layout.tsx +++ b/src/components/templates/layout/layout.tsx @@ -193,14 +193,16 @@ const Layout: FC = ({ {skipToContent}
= ({ return Object.values(meta).every((value) => value === null); }; + useCodeBlocksTheme(bodyRef); + return ( <>