From 0e52a59917406ad03c174e030c6c1c92ab23449d Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 30 Oct 2023 12:44:11 +0100 Subject: 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. --- .../organisms/forms/motion-toggle/index.ts | 1 - .../forms/motion-toggle/motion-toggle.stories.tsx | 21 ------- .../forms/motion-toggle/motion-toggle.test.tsx | 15 ----- .../forms/motion-toggle/motion-toggle.tsx | 65 ---------------------- 4 files changed, 102 deletions(-) delete mode 100644 src/components/organisms/forms/motion-toggle/index.ts delete mode 100644 src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx delete mode 100644 src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx delete mode 100644 src/components/organisms/forms/motion-toggle/motion-toggle.tsx (limited to 'src/components/organisms/forms/motion-toggle') diff --git a/src/components/organisms/forms/motion-toggle/index.ts b/src/components/organisms/forms/motion-toggle/index.ts deleted file mode 100644 index 0e35578..0000000 --- a/src/components/organisms/forms/motion-toggle/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './motion-toggle'; diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx deleted file mode 100644 index 7adef1b..0000000 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { MotionToggle } from './motion-toggle'; - -/** - * MotionToggle - Storybook Meta - */ -export default { - title: 'Organisms/Forms/Toggle', - component: MotionToggle, - argTypes: {}, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Toggle Stories - Motion - */ -export const Motion = Template.bind({}); -Motion.args = {}; diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx deleted file mode 100644 index d20057e..0000000 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../../tests/utils'; -import { MotionToggle } from './motion-toggle'; - -describe('MotionToggle', () => { - // toHaveValue received undefined. Maybe because of localStorage hook... - it('renders a toggle component', () => { - render(); - expect( - rtlScreen.getByRole('radiogroup', { - name: /Animations:/i, - }) - ).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx deleted file mode 100644 index 33527c3..0000000 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import type { FC } 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' | 'name' | 'onSwitch' | 'value' ->; - -/** - * MotionToggle component - * - * Render a Toggle component to set reduce motion. - */ -export const MotionToggle: FC = ({ ...props }) => { - const intl = useIntl(); - const { isReduced, toggleReducedMotion } = useReducedMotion(); - - 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 options: [SwitchOption, SwitchOption] = [ - { - id: 'reduced-motion-on', - label: onLabel, - value: 'on', - }, - { - id: 'reduced-motion-off', - label: offLabel, - value: 'off', - }, - ]; - - return ( - {reduceMotionLabel}} - name="reduced-motion" - onSwitch={toggleReducedMotion} - value={isReduced ? 'off' : 'on'} - /> - ); -}; -- cgit v1.2.3