chore: add a MotionToggle component

3 files changed, 79 insertions, 0 deletions

diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx
new file mode 100644
index 0000000..4fc199a
--- /dev/null
+++ b/src/components/molecules/forms/motion-toggle.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import MotionToggleComponent from './motion-toggle';
+
+export default {
+  title: 'Molecules/Forms',
+  component: MotionToggleComponent,
+} as ComponentMeta<typeof MotionToggleComponent>;
+
+const Template: ComponentStory<typeof MotionToggleComponent> = (args) => (
+  <IntlProvider locale="en">
+    <MotionToggleComponent {...args} />
+  </IntlProvider>
+);
+
+export const MotionToggle = Template.bind({});
diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx
new file mode 100644
index 0000000..77bc17c
--- /dev/null
+++ b/src/components/molecules/forms/motion-toggle.test.tsx
@@ -0,0 +1,13 @@
+import { render, screen } from '@test-utils';
+import MotionToggle from './motion-toggle';
+
+describe('MotionToggle', () => {
+  it('renders a checked toggle (deactivate animations choice)', () => {
+    render(<MotionToggle value={true} />);
+    expect(
+      screen.getByRole('checkbox', {
+        name: `Animations: On Off`,
+      })
+    ).toBeChecked();
+  });
+});
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
new file mode 100644
index 0000000..77291ed
--- /dev/null
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -0,0 +1,50 @@
+import Toggle, {
+  ToggleChoices,
+  ToggleProps,
+} from '@components/atoms/forms/toggle';
+import { FC, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+export type MotionToggleProps = Pick<ToggleProps, 'value'>;
+
+/**
+ * MotionToggle component
+ *
+ * Render a Toggle component to set reduce motion.
+ */
+const MotionToggle: FC<MotionToggleProps> = ({ value }) => {
+  const intl = useIntl();
+  const [isDeactivated, setIsDeactivated] = useState<boolean>(value);
+  const reduceMotionLabel = intl.formatMessage({
+    defaultMessage: 'Animations:',
+    description: 'MotionToggle: reduce motion label',
+    id: '/q5csZ',
+  });
+  const onLabel = intl.formatMessage({
+    defaultMessage: 'On',
+    description: 'MotionToggle: activate reduce motion label',
+    id: 'va65iw',
+  });
+  const offLabel = intl.formatMessage({
+    defaultMessage: 'Off',
+    description: 'MotionToggle: deactivate reduce motion label',
+    id: 'pWKyyR',
+  });
+  const reduceMotionChoices: ToggleChoices = {
+    left: onLabel,
+    right: offLabel,
+  };
+
+  return (
+    <Toggle
+      id="reduce-motion-settings"
+      name="reduce-motion-settings"
+      label={reduceMotionLabel}
+      choices={reduceMotionChoices}
+      value={isDeactivated}
+      setValue={setIsDeactivated}
+    />
+  );
+};
+
+export default MotionToggle;