aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/forms/motion-toggle.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/forms/motion-toggle.tsx')
-rw-r--r--src/components/molecules/forms/motion-toggle.tsx118
1 files changed, 0 insertions, 118 deletions
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
deleted file mode 100644
index c1a55f0..0000000
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { FC } from 'react';
-import { useIntl } from 'react-intl';
-import { useAttributes, useLocalStorage } from '../../../utils/hooks';
-import {
- RadioGroup,
- type RadioGroupCallback,
- type RadioGroupCallbackProps,
- type RadioGroupOption,
- type RadioGroupProps,
-} from './radio-group';
-
-export type MotionToggleValue = 'on' | 'off';
-
-export type MotionToggleProps = Pick<
- RadioGroupProps,
- 'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition'
-> & {
- /**
- * True if motion should be reduced by default.
- */
- defaultValue: 'on' | 'off';
- /**
- * The local storage key to save preference.
- */
- storageKey: string;
-};
-
-/**
- * MotionToggle component
- *
- * Render a Toggle component to set reduce motion.
- */
-export const MotionToggle: FC<MotionToggleProps> = ({
- defaultValue,
- storageKey,
- ...props
-}) => {
- const intl = useIntl();
- const { value: isReduced, setValue: setIsReduced } = useLocalStorage<boolean>(
- storageKey,
- defaultValue === 'on' ? false : true
- );
- useAttributes({
- element:
- typeof window !== 'undefined' ? document.documentElement : undefined,
- attribute: 'reduced-motion',
- value: `${isReduced}`,
- });
-
- 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: RadioGroupOption[] = [
- {
- id: 'reduced-motion-on',
- label: onLabel,
- name: 'reduced-motion',
- value: 'on',
- },
- {
- id: 'reduced-motion-off',
- label: offLabel,
- name: 'reduced-motion',
- value: 'off',
- },
- ];
-
- /**
- * Update the current setting.
- *
- * @param {string} newValue - A boolean as string.
- */
- const updateSetting = (newValue: MotionToggleValue) => {
- setIsReduced(newValue === 'on' ? false : true);
- };
-
- /**
- * Handle change events.
- *
- * @param {RadioGroupCallbackProps} props - An object with choices.
- */
- const handleChange: RadioGroupCallback = ({
- choices,
- updateChoice,
- }: RadioGroupCallbackProps) => {
- if (choices.new === choices.prev) {
- const newChoice = choices.new === 'on' ? 'off' : 'on';
- updateChoice(newChoice);
- updateSetting(newChoice);
- } else {
- updateSetting(choices.new as MotionToggleValue);
- }
- };
-
- return (
- <RadioGroup
- {...props}
- initialChoice={defaultValue}
- kind="toggle"
- legend={reduceMotionLabel}
- onChange={handleChange}
- options={options}
- />
- );
-};