refactor(hooks,provider): move reduce motion setter

Since the local storage key is not meant to change between the
components, it should be set directly inside the app file. So
both the local storage and the data attribute should be handle
in a provider.
I also added a custom document because we need a script to
retrieve the stored value in local storage earlier to avoid
flashing on hydration.

6 files changed, 16 insertions, 63 deletions

diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index 66b4e0f..793c521 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -8,9 +8,6 @@ import { Settings } from './settings';
 export default {
   title: 'Organisms/Toolbar/Settings',
   component: Settings,
-  args: {
-    motionStorageKey: 'reduced-motion',
-  },
   argTypes: {
     className: {
       control: {
@@ -38,16 +35,6 @@ 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 66fa6a6..6dbed2b 100644
--- a/src/components/organisms/toolbar/settings.test.tsx
+++ b/src/components/organisms/toolbar/settings.test.tsx
@@ -8,26 +8,14 @@ const doNothing = () => {
 
 describe('Settings', () => {
   it('renders a button to open settings modal', () => {
-    render(
-      <Settings
-        motionStorageKey="reduced-motion"
-        isActive={false}
-        setIsActive={doNothing}
-      />
-    );
+    render(<Settings isActive={false} setIsActive={doNothing} />);
     expect(
       rtlScreen.getByRole('checkbox', { name: 'Open settings' })
     ).toBeInTheDocument();
   });
 
   it('renders a button to close settings modal', () => {
-    render(
-      <Settings
-        motionStorageKey="reduced-motion"
-        isActive={true}
-        setIsActive={doNothing}
-      />
-    );
+    render(<Settings isActive={true} setIsActive={doNothing} />);
     expect(
       rtlScreen.getByRole('checkbox', { name: 'Close settings' })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 124dd42..1b68db8 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -19,10 +19,7 @@ export type SettingsProps = SettingsModalProps & {
 const SettingsWithRef: ForwardRefRenderFunction<
   HTMLDivElement,
   SettingsProps
-> = (
-  { className = '', isActive = false, motionStorageKey, setIsActive },
-  ref
-) => {
+> = ({ className = '', isActive = false, setIsActive }, ref) => {
   const intl = useIntl();
   const label = isActive
     ? intl.formatMessage({
@@ -54,10 +51,7 @@ const SettingsWithRef: ForwardRefRenderFunction<
         isActive={isActive}
         label={label}
       />
-      <SettingsModal
-        className={`${styles.modal} ${className}`}
-        motionStorageKey={motionStorageKey}
-      />
+      <SettingsModal className={`${styles.modal} ${className}`} />
     </div>
   );
 };
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index 22bead9..19dc135 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -8,7 +8,6 @@ export default {
   title: 'Organisms/Toolbar',
   component: ToolbarComponent,
   args: {
-    motionStorageKey: 'reduced-motion',
     searchPage: '#',
   },
   argTypes: {
@@ -25,16 +24,6 @@ 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 e6b1022..23b13c1 100644
--- a/src/components/organisms/toolbar/toolbar.test.tsx
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -11,9 +11,7 @@ const nav = [
 
 describe('Toolbar', () => {
   it('renders a navigation menu', () => {
-    render(
-      <Toolbar motionStorageKey="reduced-motion" nav={nav} searchPage="#" />
-    );
+    render(<Toolbar nav={nav} searchPage="#" />);
     expect(rtlScreen.getByRole('navigation')).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index be46636..c400285 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -3,20 +3,19 @@ import { type FC, useState, useCallback } from 'react';
 import { useOnClickOutside, useRouteChange } from '../../../utils/hooks';
 import { MainNavItem, type MainNavItemProps } from './main-nav';
 import { Search, type SearchProps } from './search';
-import { Settings, type SettingsProps } from './settings';
+import { Settings } from './settings';
 import styles from './toolbar.module.scss';
 
-export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
-  Pick<SettingsProps, 'motionStorageKey'> & {
-    /**
-     * Set additional classnames to the toolbar wrapper.
-     */
-    className?: string;
-    /**
-     * The main nav items.
-     */
-    nav: MainNavItemProps['items'];
-  };
+export type ToolbarProps = Pick<SearchProps, 'searchPage'> & {
+  /**
+   * Set additional classnames to the toolbar wrapper.
+   */
+  className?: string;
+  /**
+   * The main nav items.
+   */
+  nav: MainNavItemProps['items'];
+};
 
 /**
  * Toolbar component
@@ -25,7 +24,6 @@ export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
  */
 export const Toolbar: FC<ToolbarProps> = ({
   className = '',
-  motionStorageKey,
   nav,
   searchPage,
 }) => {
@@ -77,7 +75,6 @@ export const Toolbar: FC<ToolbarProps> = ({
       <Settings
         className={`${styles.modal} ${styles['modal--settings']}`}
         isActive={isSettingsOpened}
-        motionStorageKey={motionStorageKey}
         ref={settingsRef}
         setIsActive={toggleSettings}
       />