From 757201fdc5c04a3f15504f74bf8ab85bb6018c2b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 27 Oct 2023 11:09:38 +0200
Subject: 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.
---
 .../organisms/modals/settings-modal.stories.tsx       | 15 +--------------
 .../organisms/modals/settings-modal.test.tsx          |  5 ++---
 src/components/organisms/modals/settings-modal.tsx    | 19 +++----------------
 3 files changed, 6 insertions(+), 33 deletions(-)

(limited to 'src/components/organisms/modals')

diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index 57ce00f..7c56f27 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -1,5 +1,4 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { storageKey as motionStorageKey } from '../forms/motion-toggle/motion-toggle.fixture';
 import { SettingsModal } from './settings-modal';
 
 /**
@@ -22,16 +21,6 @@ export default {
         required: false,
       },
     },
-    motionStorageKey: {
-      control: {
-        type: 'text',
-      },
-      description: 'A local storage key for reduced motion setting..',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
     tooltipClassName: {
       control: {
         type: 'text',
@@ -59,6 +48,4 @@ const Template: ComponentStory<typeof SettingsModal> = (args) => (
  * Modals Stories - Settings
  */
 export const Settings = Template.bind({});
-Settings.args = {
-  motionStorageKey,
-};
+Settings.args = {};
diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx
index 26d046a..af2b6e9 100644
--- a/src/components/organisms/modals/settings-modal.test.tsx
+++ b/src/components/organisms/modals/settings-modal.test.tsx
@@ -1,16 +1,15 @@
 import { describe, expect, it } from '@jest/globals';
 import { render, screen as rtlScreen } from '../../../../tests/utils';
-import { storageKey as motionStorageKey } from '../forms/motion-toggle/motion-toggle.fixture';
 import { SettingsModal } from './settings-modal';
 
 describe('SettingsModal', () => {
   it('renders the modal heading', () => {
-    render(<SettingsModal motionStorageKey={motionStorageKey} />);
+    render(<SettingsModal />);
     expect(rtlScreen.getByText(/Settings/i)).toBeInTheDocument();
   });
 
   it('renders a settings form', () => {
-    render(<SettingsModal motionStorageKey={motionStorageKey} />);
+    render(<SettingsModal />);
     expect(
       rtlScreen.getByRole('form', { name: /^Settings form/i })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index f62312b..5fea491 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -4,28 +4,19 @@ import { Form, Heading, Icon, Modal, type ModalProps } from '../../atoms';
 import {
   AckeeToggle,
   MotionToggle,
-  type MotionToggleProps,
   PrismThemeToggle,
   ThemeToggle,
 } from '../forms';
 import styles from './settings-modal.module.scss';
 
-export type SettingsModalProps = Pick<ModalProps, 'className'> & {
-  /**
-   * The local storage key for Reduce motion settings.
-   */
-  motionStorageKey: MotionToggleProps['storageKey'];
-};
+export type SettingsModalProps = Pick<ModalProps, 'className'>;
 
 /**
  * SettingsModal component
  *
  * Render a modal with settings options.
  */
-export const SettingsModal: FC<SettingsModalProps> = ({
-  className = '',
-  motionStorageKey,
-}) => {
+export const SettingsModal: FC<SettingsModalProps> = ({ className = '' }) => {
   const intl = useIntl();
   const title = intl.formatMessage({
     defaultMessage: 'Settings',
@@ -59,11 +50,7 @@ export const SettingsModal: FC<SettingsModalProps> = ({
       >
         <ThemeToggle className={styles.item} />
         <PrismThemeToggle className={styles.item} />
-        <MotionToggle
-          className={styles.item}
-          defaultValue="on"
-          storageKey={motionStorageKey}
-        />
+        <MotionToggle className={styles.item} />
         <AckeeToggle className={styles.item} direction="upwards" />
       </Form>
     </Modal>
-- 
cgit v1.2.3