chore: handle settings change

3 files changed, 56 insertions, 7 deletions

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(
       <Header
+        ackeeStorageKey="ackee-tracking"
+        isHome={true}
+        motionStorageKey="reduced-motion"
+        nav={nav}
+        photo={photo}
         searchPage="#"
         title={title}
-        photo={photo}
-        nav={nav}
-        isHome={true}
       />
     );
     expect(
@@ -29,7 +31,16 @@ describe('Header', () => {
   });
 
   it('renders the main nav', () => {
-    render(<Header searchPage="#" title={title} photo={photo} nav={nav} />);
+    render(
+      <Header
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        nav={nav}
+        photo={photo}
+        searchPage="#"
+        title={title}
+      />
+    );
     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<ToolbarProps, 'nav' | 'searchPage'> & {
+  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<HeaderProps> = ({ className, nav, searchPage, ...props }) => {
+const Header: FC<HeaderProps> = ({
+  ackeeStorageKey,
+  className,
+  motionStorageKey,
+  nav,
+  searchPage,
+  ...props
+}) => {
   return (
     <header className={`${styles.wrapper} ${className}`}>
       <div className={styles.body}>
         <Branding {...props} />
-        <Toolbar nav={nav} searchPage={searchPage} className={styles.toolbar} />
+        <Toolbar
+          ackeeStorageKey={ackeeStorageKey}
+          className={styles.toolbar}
+          motionStorageKey={motionStorageKey}
+          nav={nav}
+          searchPage={searchPage}
+        />
       </div>
     </header>
   );