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/ackee-toggle/ackee-toggle.tsx | 99 ---------------------- 1 file changed, 99 deletions(-) delete mode 100644 src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx (limited to 'src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx') diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx deleted file mode 100644 index 2fea0a7..0000000 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx +++ /dev/null @@ -1,99 +0,0 @@ -/* eslint-disable max-statements */ -import type { FC } from 'react'; -import { useIntl } from 'react-intl'; -import { useAckee, useBoolean } from '../../../../utils/hooks'; -import { Legend, List, ListItem } from '../../../atoms'; -import { - Switch, - type SwitchOption, - type SwitchProps, - Tooltip, - type TooltipProps, -} from '../../../molecules'; - -export type AckeeToggleProps = Omit< - SwitchProps, - 'defaultValue' | 'isInline' | 'items' | 'name' | 'onSwitch' | 'value' -> & - Pick; - -/** - * AckeeToggle component - * - * Render a Toggle component to set reduce motion. - */ -export const AckeeToggle: FC = ({ direction, ...props }) => { - const intl = useIntl(); - const [tracking, toggleTracking] = useAckee(); - const { - deactivate: closeTooltip, - state: isTooltipOpened, - toggle: toggleTooltip, - } = useBoolean(false); - - const ackeeLabel = intl.formatMessage({ - defaultMessage: 'Tracking:', - description: 'AckeeToggle: select label', - id: '0gVlI3', - }); - const partialLabel = intl.formatMessage({ - defaultMessage: 'Partial', - description: 'AckeeToggle: partial option name', - id: 'tIZYpD', - }); - const fullLabel = intl.formatMessage({ - defaultMessage: 'Full', - description: 'AckeeToggle: full option name', - id: '5eD6y2', - }); - const tooltipTitle = intl.formatMessage({ - defaultMessage: 'Ackee tracking (analytics)', - description: 'AckeeToggle: tooltip title', - id: 'nGss/j', - }); - const tooltipPartial = intl.formatMessage({ - defaultMessage: 'Partial includes only page url, views and duration.', - description: 'AckeeToggle: tooltip message', - id: 'ZB/Aw2', - }); - const tooltipFull = intl.formatMessage({ - defaultMessage: - 'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.', - description: 'AckeeToggle: tooltip message', - id: '7zDlQo', - }); - - const options = [ - { id: 'ackee-full' as const, label: fullLabel, value: 'full' }, - { id: 'ackee-partial' as const, label: partialLabel, value: 'partial' }, - ] satisfies [SwitchOption, SwitchOption]; - - return ( - {ackeeLabel}} - name="ackee" - onSwitch={toggleTracking} - tooltip={ - - - {options.map((option) => ( - - {option.id === 'ackee-full' ? tooltipFull : tooltipPartial} - - ))} - - - } - value={tracking} - /> - ); -}; -- cgit v1.2.3