aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/forms/ackee-toggle
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-30 12:44:11 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:15:27 +0100
commit0e52a59917406ad03c174e030c6c1c92ab23449d (patch)
tree693bbcc5edbe78ebd2f0050fddbc45c706e0ba61 /src/components/organisms/forms/ackee-toggle
parent84a679b0e48ed76eee2fa44d3caac83591aa3c8c (diff)
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.
Diffstat (limited to 'src/components/organisms/forms/ackee-toggle')
-rw-r--r--src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx43
-rw-r--r--src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx15
-rw-r--r--src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx99
-rw-r--r--src/components/organisms/forms/ackee-toggle/index.ts1
4 files changed, 0 insertions, 158 deletions
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
deleted file mode 100644
index 1b7b87b..0000000
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { AckeeToggle } from './ackee-toggle';
-
-/**
- * AckeeToggle - Storybook Meta
- */
-export default {
- title: 'Organisms/Forms/Toggle',
- component: AckeeToggle,
- argTypes: {
- defaultValue: {
- control: {
- type: 'select',
- },
- description: 'Set the default value.',
- options: ['full', 'partial'],
- type: {
- name: 'string',
- required: true,
- },
- },
- storageKey: {
- control: {
- type: 'text',
- },
- description: 'Set local storage key.',
- type: {
- name: 'string',
- required: true,
- },
- },
- },
-} as ComponentMeta<typeof AckeeToggle>;
-
-const Template: ComponentStory<typeof AckeeToggle> = (args) => (
- <AckeeToggle {...args} />
-);
-
-/**
- * Toggle Stories - Ackee
- */
-export const Ackee = Template.bind({});
-Ackee.args = {};
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
deleted file mode 100644
index 68f8d19..0000000
--- a/src/components/organisms/forms/ackee-toggle/ackee-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 { AckeeToggle } from './ackee-toggle';
-
-describe('AckeeToggle', () => {
- // toHaveValue received undefined. Maybe because of localStorage hook...
- it('renders a toggle component', () => {
- render(<AckeeToggle />);
- expect(
- rtlScreen.getByRole('radiogroup', {
- name: /Tracking:/i,
- })
- ).toBeInTheDocument();
- });
-});
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<TooltipProps, 'direction'>;
-
-/**
- * AckeeToggle component
- *
- * Render a Toggle component to set reduce motion.
- */
-export const AckeeToggle: FC<AckeeToggleProps> = ({ 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 (
- <Switch
- {...props}
- isInline
- items={options}
- legend={<Legend>{ackeeLabel}</Legend>}
- name="ackee"
- onSwitch={toggleTracking}
- tooltip={
- <Tooltip
- direction={direction}
- heading={tooltipTitle}
- isOpen={isTooltipOpened}
- onClickOutside={closeTooltip}
- onToggle={toggleTooltip}
- >
- <List>
- {options.map((option) => (
- <ListItem key={option.id}>
- {option.id === 'ackee-full' ? tooltipFull : tooltipPartial}
- </ListItem>
- ))}
- </List>
- </Tooltip>
- }
- value={tracking}
- />
- );
-};
diff --git a/src/components/organisms/forms/ackee-toggle/index.ts b/src/components/organisms/forms/ackee-toggle/index.ts
deleted file mode 100644
index 7f6313c..0000000
--- a/src/components/organisms/forms/ackee-toggle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ackee-toggle';