refactor(components): extract SettingsForm component form SettingsModal

We could use an array of items and map over it instead of repeating the
Switch component for each settings but with translations, it becomes
quickly unreadable. So I prefer to keep separate components.

4 files changed, 119 insertions, 0 deletions

diff --git a/src/components/organisms/forms/settings-form/motion-toggle/index.ts b/src/components/organisms/forms/settings-form/motion-toggle/index.ts
new file mode 100644
index 0000000..0e35578
--- /dev/null
+++ b/src/components/organisms/forms/settings-form/motion-toggle/index.ts
@@ -0,0 +1 @@
+export * from './motion-toggle';
diff --git a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx
new file mode 100644
index 0000000..67cea37
--- /dev/null
+++ b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.stories.tsx
@@ -0,0 +1,21 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { MotionToggle } from './motion-toggle';
+
+/**
+ * MotionToggle - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Forms/Settings/Items',
+  component: MotionToggle,
+  argTypes: {},
+} as ComponentMeta<typeof MotionToggle>;
+
+const Template: ComponentStory<typeof MotionToggle> = (args) => (
+  <MotionToggle {...args} />
+);
+
+/**
+ * Toggle Stories - Motion
+ */
+export const Motion = Template.bind({});
+Motion.args = {};
diff --git a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.test.tsx b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.test.tsx
new file mode 100644
index 0000000..48c7151
--- /dev/null
+++ b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.test.tsx
@@ -0,0 +1,21 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../../../tests/utils';
+import { MotionProvider } from '../../../../../utils/providers';
+import { MotionToggle } from './motion-toggle';
+
+describe('MotionToggle', () => {
+  it('renders a radio group of two radio buttons', () => {
+    render(
+      <MotionProvider attribute="enim" hasReducedMotion storageKey="autem">
+        <MotionToggle />
+      </MotionProvider>
+    );
+
+    expect(
+      rtlScreen.getByRole('radiogroup', {
+        name: /Animations:/i,
+      })
+    ).toBeInTheDocument();
+    expect(rtlScreen.getAllByRole('radio')).toHaveLength(2);
+  });
+});
diff --git a/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.tsx b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.tsx
new file mode 100644
index 0000000..9ee236a
--- /dev/null
+++ b/src/components/organisms/forms/settings-form/motion-toggle/motion-toggle.tsx
@@ -0,0 +1,76 @@
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import { useIntl } from 'react-intl';
+import { useReducedMotion } from '../../../../../utils/hooks';
+import { Legend } from '../../../../atoms';
+import {
+  Switch,
+  type SwitchOption,
+  type SwitchProps,
+} from '../../../../molecules';
+
+export type MotionToggleProps = Omit<
+  SwitchProps,
+  'isInline' | 'items' | 'legend' | 'name' | 'onSwitch' | 'value'
+>;
+
+const MotionToggleWithRef: ForwardRefRenderFunction<
+  HTMLFieldSetElement,
+  MotionToggleProps
+> = (props, ref) => {
+  const intl = useIntl();
+  const { isReduced, toggleReducedMotion } = useReducedMotion();
+
+  const messages = {
+    legend: intl.formatMessage({
+      defaultMessage: 'Animations:',
+      description: 'MotionToggle: reduce motion label',
+      id: '/q5csZ',
+    }),
+    options: {
+      on: intl.formatMessage({
+        defaultMessage: 'On',
+        description: 'MotionToggle: activate reduce motion label',
+        id: 'va65iw',
+      }),
+      off: intl.formatMessage({
+        defaultMessage: 'Off',
+        description: 'MotionToggle: deactivate reduce motion label',
+        id: 'pWKyyR',
+      }),
+    },
+  };
+
+  const options: [SwitchOption, SwitchOption] = [
+    {
+      id: 'reduced-motion-on',
+      label: messages.options.on,
+      value: 'on',
+    },
+    {
+      id: 'reduced-motion-off',
+      label: messages.options.off,
+      value: 'off',
+    },
+  ];
+
+  return (
+    <Switch
+      {...props}
+      isInline
+      items={options}
+      legend={<Legend>{messages.legend}</Legend>}
+      // eslint-disable-next-line react/jsx-no-literals
+      name="reduced-motion"
+      onSwitch={toggleReducedMotion}
+      ref={ref}
+      value={isReduced ? 'off' : 'on'}
+    />
+  );
+};
+
+/**
+ * MotionToggle component
+ *
+ * Render a Toggle component to set reduce motion.
+ */
+export const MotionToggle = forwardRef(MotionToggleWithRef);