From cfdddac43f10d06a8b0e9bcf69dc0ce77ce16649 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 8 Jun 2022 19:06:27 +0200 Subject: fix(settings): avoid cropped tooltip on small devices I changed the settings disposition to make tooltip positioning easier. Jest complains about ref passed but everything seems to work as expected so I'm not sure it is relevant. Maybe a bug with cloneElement. --- .../organisms/forms/settings-form.module.scss | 81 ---------------------- .../organisms/forms/settings-form.stories.tsx | 73 ------------------- .../organisms/forms/settings-form.test.tsx | 66 ------------------ src/components/organisms/forms/settings-form.tsx | 73 ------------------- 4 files changed, 293 deletions(-) delete mode 100644 src/components/organisms/forms/settings-form.module.scss delete mode 100644 src/components/organisms/forms/settings-form.stories.tsx delete mode 100644 src/components/organisms/forms/settings-form.test.tsx delete mode 100644 src/components/organisms/forms/settings-form.tsx (limited to 'src/components/organisms/forms') diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss deleted file mode 100644 index 647f1b5..0000000 --- a/src/components/organisms/forms/settings-form.module.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use "@styles/abstracts/mixins" as mix; - -.wrapper { - display: flex; - flex-flow: row wrap; - align-items: flex-start; - align-content: flex-start; - - @include mix.media("screen") { - @include mix.dimensions(null, "2xs", "height") { - column-gap: var(--spacing-lg); - row-gap: var(--spacing-xs); - font-size: var(--font-size-sm); - } - } - - .label { - @include mix.media("screen") { - @include mix.dimensions(null, "2xs", "height") { - margin: 0 auto; - float: none; - font-size: var(--font-size-sm); - } - - @include mix.dimensions(null, "2xs") { - //font-size: var(--font-size-sm); - } - } - } - - .tooltip { - top: unset; - bottom: calc(100% + var(--spacing-2xs)); - font-size: var(--font-size-sm); - transform-origin: bottom center; - - @include mix.media("screen") { - @include mix.dimensions(null, "2xs", "height") { - width: 250%; - transform-origin: bottom left; - } - - @include mix.dimensions("sm") { - font-size: var(--font-size-md); - } - } - } -} - -.items { - margin: var(--spacing-2xs) 0; - - @include mix.media("screen") { - @include mix.dimensions(null, "2xs", "height") { - display: flex; - flex-flow: column wrap; - max-width: fit-content; - margin: 0; - } - } -} - -.group { - margin-left: auto; - - @include mix.media("screen") { - @include mix.dimensions(null, "2xs", "height") { - margin: auto; - } - } -} - -.fieldset__body { - margin-left: auto; - - @include mix.media("screen") { - @include mix.dimensions(null, "2xs", "height") { - margin: 0 auto; - } - } -} diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx deleted file mode 100644 index de9f769..0000000 --- a/src/components/organisms/forms/settings-form.stories.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture'; -import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SettingsForm from './settings-form'; - -/** - * SettingsModal - Storybook Meta - */ -export default { - title: 'Organisms/Forms', - component: SettingsForm, - argTypes: { - ackeeStorageKey: { - control: { - type: 'text', - }, - description: 'The local storage key for Ackee setting.', - type: { - name: 'string', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the modal wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - motionStorageKey: { - control: { - type: 'text', - }, - description: 'The local storage key for reduced motion setting.', - type: { - name: 'string', - required: true, - }, - }, - tooltipClassName: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the tooltip wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Form Stories - Settings - */ -export const Settings = Template.bind({}); -Settings.args = { - ackeeStorageKey, - motionStorageKey, -}; diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx deleted file mode 100644 index de2d4c9..0000000 --- a/src/components/organisms/forms/settings-form.test.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture'; -import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture'; -import { render, screen } from '@tests/utils'; -import SettingsForm from './settings-form'; - -describe('SettingsForm', () => { - it('renders a form', () => { - render( - - ); - expect( - screen.getByRole('form', { name: /^Settings form/i }) - ).toBeInTheDocument(); - }); - - it('renders a theme setting', () => { - render( - - ); - expect( - screen.getByRole('radiogroup', { name: /^Theme:/i }) - ).toBeInTheDocument(); - }); - - it('renders a code blocks setting', () => { - render( - - ); - expect( - screen.getByRole('radiogroup', { name: /^Code blocks:/i }) - ).toBeInTheDocument(); - }); - - it('renders a motion setting', () => { - render( - - ); - expect( - screen.getByRole('radiogroup', { name: /^Animations:/i }) - ).toBeInTheDocument(); - }); - - it('renders a Ackee setting', () => { - render( - - ); - expect( - screen.getByRole('radiogroup', { name: /^Tracking:/i }) - ).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx deleted file mode 100644 index 5d915a8..0000000 --- a/src/components/organisms/forms/settings-form.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import Form from '@components/atoms/forms/form'; -import AckeeToggle, { - type AckeeToggleProps, -} from '@components/molecules/forms/ackee-toggle'; -import MotionToggle, { - type MotionToggleProps, -} from '@components/molecules/forms/motion-toggle'; -import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle'; -import ThemeToggle from '@components/molecules/forms/theme-toggle'; -import { FC } from 'react'; -import { useIntl } from 'react-intl'; -import styles from './settings-form.module.scss'; - -export type SettingsFormProps = Pick & { - /** - * The local storage key for Ackee settings. - */ - ackeeStorageKey: AckeeToggleProps['storageKey']; - /** - * The local storage key for Reduce motion settings. - */ - motionStorageKey: MotionToggleProps['storageKey']; -}; - -const SettingsForm: FC = ({ - ackeeStorageKey, - motionStorageKey, - tooltipClassName, -}) => { - const intl = useIntl(); - const ariaLabel = intl.formatMessage({ - defaultMessage: 'Settings form', - id: 'gX+YVy', - description: 'SettingsForm: an accessible form name', - }); - - return ( -
null} - > - - - - - - ); -}; - -export default SettingsForm; -- cgit v1.2.3