diff options
Diffstat (limited to 'src/components/organisms/forms')
4 files changed, 49 insertions, 41 deletions
diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss index 6174304..647f1b5 100644 --- a/src/components/organisms/forms/settings-form.module.scss +++ b/src/components/organisms/forms/settings-form.module.scss @@ -8,7 +8,8 @@ @include mix.media("screen") { @include mix.dimensions(null, "2xs", "height") { - gap: var(--spacing-md); + column-gap: var(--spacing-lg); + row-gap: var(--spacing-xs); font-size: var(--font-size-sm); } } @@ -16,28 +17,31 @@ .label { @include mix.media("screen") { @include mix.dimensions(null, "2xs", "height") { + margin: 0 auto; + float: none; font-size: var(--font-size-sm); - - &:not(.label--select) { - float: none; - margin: 0 auto; - } } - } - &.label--select { - @include mix.media("screen") { - @include mix.dimensions("2xs", null, "height") { - margin: 0 auto 0 0; - } + @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") { - font-size: var(--font-size-sm); + @include mix.dimensions(null, "2xs", "height") { + width: 250%; + transform-origin: bottom left; + } + + @include mix.dimensions("sm") { + font-size: var(--font-size-md); } } } @@ -50,28 +54,28 @@ @include mix.dimensions(null, "2xs", "height") { display: flex; flex-flow: column wrap; - width: fit-content; - - &:last-of-type { - flex: 0 0 100%; - margin: 0; - } + max-width: fit-content; + margin: 0; } } } -.setting { - &--select { - flex: 0 0 100%; +.group { + margin-left: auto; + + @include mix.media("screen") { + @include mix.dimensions(null, "2xs", "height") { + margin: auto; + } } } -.group { +.fieldset__body { margin-left: auto; @include mix.media("screen") { @include mix.dimensions(null, "2xs", "height") { - margin: auto; + margin: 0 auto; } } } diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx index ceb08c7..de9f769 100644 --- a/src/components/organisms/forms/settings-form.stories.tsx +++ b/src/components/organisms/forms/settings-form.stories.tsx @@ -1,4 +1,4 @@ -import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-select.fixture'; +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'; diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx index 90a2751..584261d 100644 --- a/src/components/organisms/forms/settings-form.test.tsx +++ b/src/components/organisms/forms/settings-form.test.tsx @@ -1,9 +1,8 @@ +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 '@test-utils'; import SettingsForm from './settings-form'; -const ackeeStorageKey = 'ackee-tracking'; -const motionStorageKey = 'reduce-motion'; - describe('SettingsForm', () => { it('renders a form', () => { render( @@ -17,7 +16,7 @@ describe('SettingsForm', () => { ).toBeInTheDocument(); }); - it('renders a theme toggle setting', () => { + it('renders a theme setting', () => { render( <SettingsForm ackeeStorageKey={ackeeStorageKey} @@ -29,7 +28,7 @@ describe('SettingsForm', () => { ).toBeInTheDocument(); }); - it('renders a code blocks toggle setting', () => { + it('renders a code blocks setting', () => { render( <SettingsForm ackeeStorageKey={ackeeStorageKey} @@ -61,7 +60,7 @@ describe('SettingsForm', () => { /> ); expect( - screen.getByRole('combobox', { name: /^Tracking:/i }) + 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 index 9dc0e90..5d915a8 100644 --- a/src/components/organisms/forms/settings-form.tsx +++ b/src/components/organisms/forms/settings-form.tsx @@ -1,7 +1,7 @@ import Form from '@components/atoms/forms/form'; -import AckeeSelect, { - type AckeeSelectProps, -} from '@components/molecules/forms/ackee-select'; +import AckeeToggle, { + type AckeeToggleProps, +} from '@components/molecules/forms/ackee-toggle'; import MotionToggle, { type MotionToggleProps, } from '@components/molecules/forms/motion-toggle'; @@ -11,11 +11,11 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './settings-form.module.scss'; -export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'> & { +export type SettingsFormProps = Pick<AckeeToggleProps, 'tooltipClassName'> & { /** * The local storage key for Ackee settings. */ - ackeeStorageKey: AckeeSelectProps['storageKey']; + ackeeStorageKey: AckeeToggleProps['storageKey']; /** * The local storage key for Reduce motion settings. */ @@ -42,24 +42,29 @@ const SettingsForm: FC<SettingsFormProps> = ({ onSubmit={() => null} > <ThemeToggle + bodyClassName={styles.fieldset__body} groupClassName={styles.group} legendClassName={styles.label} /> <PrismThemeToggle + bodyClassName={styles.fieldset__body} groupClassName={styles.group} legendClassName={styles.label} /> <MotionToggle defaultValue="on" + bodyClassName={styles.fieldset__body} groupClassName={styles.group} legendClassName={styles.label} storageKey={motionStorageKey} /> - <AckeeSelect - initialValue="full" - labelClassName={`${styles.label} ${styles['label--select']}`} - tooltipClassName={`${styles.tooltip} ${tooltipClassName}`} + <AckeeToggle + defaultValue="full" + bodyClassName={styles.fieldset__body} + groupClassName={`${styles.group} ${styles['group--ackee']}`} + legendClassName={`${styles.label} ${styles['label--ackee']}`} storageKey={ackeeStorageKey} + tooltipClassName={`${styles.tooltip} ${tooltipClassName}`} /> </Form> ); |