chore: handle settings change

7 files changed, 109 insertions, 25 deletions

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(<Settings isActive={false} setIsActive={() => null} />);
+    render(
+      <Settings
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        isActive={false}
+        setIsActive={() => null}
+      />
+    );
     expect(
       screen.getByRole('checkbox', { name: 'Open settings' })
     ).toBeInTheDocument();
   });
 
   it('renders a button to close settings modal', () => {
-    render(<Settings isActive={true} setIsActive={() => null} />);
+    render(
+      <Settings
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        isActive={true}
+        setIsActive={() => 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<HTMLDivElement, SettingsProps> = (
-  { className = '', isActive, setIsActive, tooltipClassName = '' },
+  {
+    ackeeStorageKey,
+    className = '',
+    isActive,
+    motionStorageKey,
+    setIsActive,
+    tooltipClassName = '',
+  },
   ref
 ) => {
   const intl = useIntl();
@@ -62,7 +68,9 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
         <Cog />
       </Label>
       <SettingsModal
+        ackeeStorageKey={ackeeStorageKey}
         className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`}
+        motionStorageKey={motionStorageKey}
         tooltipClassName={tooltipClassName}
       />
     </div>
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(<Toolbar nav={nav} searchPage="#" />);
+    render(
+      <Toolbar
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        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 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<SearchProps, 'searchPage'> & {
-  /**
-   * Set additional classnames to the toolbar wrapper.
-   */
-  className?: string;
-  /**
-   * The main nav items.
-   */
-  nav: MainNavProps['items'];
-};
+export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
+  Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & {
+    /**
+     * 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<ToolbarProps> = ({ className = '', nav, searchPage }) => {
+const Toolbar: FC<ToolbarProps> = ({
+  ackeeStorageKey,
+  className = '',
+  motionStorageKey,
+  nav,
+  searchPage,
+}) => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
   const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
@@ -53,11 +60,13 @@ const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
         ref={searchRef}
       />
       <Settings
+        ackeeStorageKey={ackeeStorageKey}
+        className={`${styles.modal} ${styles['modal--settings']}`}
         isActive={isSettingsOpened}
+        motionStorageKey={motionStorageKey}
+        ref={settingsRef}
         setIsActive={setIsSettingsOpened}
-        className={`${styles.modal} ${styles['modal--settings']}`}
         tooltipClassName={styles.tooltip}
-        ref={settingsRef}
       />
     </div>
   );