diff options
Diffstat (limited to 'src/components/organisms/forms/settings-form/ackee-toggle')
5 files changed, 176 insertions, 0 deletions
diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.module.scss b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.module.scss new file mode 100644 index 0000000..513c95c --- /dev/null +++ b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.module.scss @@ -0,0 +1,10 @@ +@use "../../../../../styles/abstracts/mixins" as mix; + +.tooltip { + @include mix.media("screen") { + @include mix.dimensions("sm") { + inset-inline: 0; + max-width: 100%; + } + } +} diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx new file mode 100644 index 0000000..abaf59f --- /dev/null +++ b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.stories.tsx @@ -0,0 +1,21 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { AckeeToggle } from './ackee-toggle'; + +/** + * AckeeToggle - Storybook Meta + */ +export default { + title: 'Organisms/Forms/Settings/Items', + component: AckeeToggle, + argTypes: {}, +} 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/settings-form/ackee-toggle/ackee-toggle.test.tsx b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.test.tsx new file mode 100644 index 0000000..30bbf3a --- /dev/null +++ b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.test.tsx @@ -0,0 +1,28 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '../../../../../../tests/utils'; +import { AckeeProvider } from '../../../../../utils/providers'; +import { AckeeToggle } from './ackee-toggle'; + +describe('AckeeToggle', () => { + it('renders a radio group of two radio buttons', () => { + const defaultValue = 'full'; + + render( + <AckeeProvider + domainId="any-id" + server="https://example.com" + storageKey="molestiae" + tracking={defaultValue} + > + <AckeeToggle /> + </AckeeProvider> + ); + + expect( + rtlScreen.getByRole('radiogroup', { + name: /Tracking:/i, + }) + ).toBeInTheDocument(); + expect(rtlScreen.getAllByRole('radio')).toHaveLength(2); + }); +}); diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.tsx b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.tsx new file mode 100644 index 0000000..0eee1fc --- /dev/null +++ b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.tsx @@ -0,0 +1,116 @@ +import { forwardRef, type ForwardRefRenderFunction } 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'; +import styles from './ackee-toggle.module.scss'; + +export type AckeeToggleProps = Omit< + SwitchProps, + 'isInline' | 'items' | 'legend' | 'name' | 'onSwitch' | 'value' +> & + Pick<TooltipProps, 'direction'>; + +const AckeeToggleWithRef: ForwardRefRenderFunction< + HTMLFieldSetElement, + AckeeToggleProps +> = ({ direction, ...props }, ref) => { + const intl = useIntl(); + const [tracking, toggleTracking] = useAckee(); + const { + deactivate: closeTooltip, + state: isTooltipOpened, + toggle: toggleTooltip, + } = useBoolean(false); + + const messages = { + legend: intl.formatMessage({ + defaultMessage: 'Tracking:', + description: 'AckeeToggle: select label', + id: '0gVlI3', + }), + options: { + full: intl.formatMessage({ + defaultMessage: 'Full', + description: 'AckeeToggle: full option name', + id: '5eD6y2', + }), + partial: intl.formatMessage({ + defaultMessage: 'Partial', + description: 'AckeeToggle: partial option name', + id: 'tIZYpD', + }), + }, + tooltip: { + heading: intl.formatMessage({ + defaultMessage: 'Ackee tracking (analytics)', + description: 'AckeeToggle: tooltip title', + id: 'nGss/j', + }), + contents: { + full: 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', + }), + partial: intl.formatMessage({ + defaultMessage: 'Partial includes only page url, views and duration.', + description: 'AckeeToggle: tooltip message', + id: 'ZB/Aw2', + }), + }, + }, + }; + + const options = [ + { id: 'ackee-full' as const, label: messages.options.full, value: 'full' }, + { + id: 'ackee-partial' as const, + label: messages.options.partial, + value: 'partial', + }, + ] satisfies [SwitchOption, SwitchOption]; + + return ( + <Switch + {...props} + isInline + items={options} + legend={<Legend>{messages.legend}</Legend>} + // eslint-disable-next-line react/jsx-no-literals + name="ackee" + onSwitch={toggleTracking} + ref={ref} + tooltip={ + <Tooltip + className={styles.tooltip} + direction={direction} + heading={messages.tooltip.heading} + isOpen={isTooltipOpened} + onClickOutside={closeTooltip} + onToggle={toggleTooltip} + > + <List> + <ListItem>{messages.tooltip.contents.full}</ListItem> + <ListItem>{messages.tooltip.contents.partial}</ListItem> + </List> + </Tooltip> + } + value={tracking} + /> + ); +}; + +/** + * AckeeToggle component + * + * Render a Toggle component to set tracking. + */ +export const AckeeToggle = forwardRef(AckeeToggleWithRef); diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/index.ts b/src/components/organisms/forms/settings-form/ackee-toggle/index.ts new file mode 100644 index 0000000..7f6313c --- /dev/null +++ b/src/components/organisms/forms/settings-form/ackee-toggle/index.ts @@ -0,0 +1 @@ +export * from './ackee-toggle'; |