diff options
Diffstat (limited to 'src/components/organisms/forms')
4 files changed, 103 insertions, 35 deletions
diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss index a05c60c..647f1b5 100644 --- a/src/components/organisms/forms/settings-form.module.scss +++ b/src/components/organisms/forms/settings-form.module.scss @@ -1,26 +1,81 @@ @use "@styles/abstracts/mixins" as mix; -.label { - margin-right: auto; -} +.wrapper { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + align-content: flex-start; -.setting, -.label--select { @include mix.media("screen") { - @include mix.dimensions(null, "2xs") { + @include mix.dimensions(null, "2xs", "height") { + column-gap: var(--spacing-lg); + row-gap: var(--spacing-xs); font-size: var(--font-size-sm); } + } - @include mix.dimensions(null, "2xs", "height") { - 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: var(--spacing-2xs) 0; + margin: 0 auto; } } } diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx index 70e1844..de9f769 100644 --- a/src/components/organisms/forms/settings-form.stories.tsx +++ b/src/components/organisms/forms/settings-form.stories.tsx @@ -1,3 +1,5 @@ +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'; @@ -65,3 +67,7 @@ const Template: ComponentStory<typeof SettingsForm> = (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 index 43d546e..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} @@ -25,11 +24,11 @@ describe('SettingsForm', () => { /> ); expect( - screen.getByRole('checkbox', { name: /^Theme:/i }) + screen.getByRole('radiogroup', { name: /^Theme:/i }) ).toBeInTheDocument(); }); - it('renders a code blocks toggle setting', () => { + it('renders a code blocks setting', () => { render( <SettingsForm ackeeStorageKey={ackeeStorageKey} @@ -37,7 +36,7 @@ describe('SettingsForm', () => { /> ); expect( - screen.getByRole('checkbox', { name: /^Code blocks:/i }) + screen.getByRole('radiogroup', { name: /^Code blocks:/i }) ).toBeInTheDocument(); }); @@ -49,7 +48,7 @@ describe('SettingsForm', () => { /> ); expect( - screen.getByRole('checkbox', { name: /^Animations:/i }) + screen.getByRole('radiogroup', { name: /^Animations:/i }) ).toBeInTheDocument(); }); @@ -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 9c2cd2c..5d915a8 100644 --- a/src/components/organisms/forms/settings-form.tsx +++ b/src/components/organisms/forms/settings-form.tsx @@ -1,9 +1,9 @@ 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, { - MotionToggleProps, + 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'; @@ -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. */ @@ -37,26 +37,34 @@ const SettingsForm: FC<SettingsFormProps> = ({ return ( <Form aria-label={ariaLabel} + className={styles.wrapper} itemsClassName={styles.items} onSubmit={() => null} > - <ThemeToggle className={styles.setting} labelClassName={styles.label} /> + <ThemeToggle + bodyClassName={styles.fieldset__body} + groupClassName={styles.group} + legendClassName={styles.label} + /> <PrismThemeToggle - className={styles.setting} - labelClassName={styles.label} + bodyClassName={styles.fieldset__body} + groupClassName={styles.group} + legendClassName={styles.label} /> <MotionToggle - className={styles.setting} - labelClassName={styles.label} + defaultValue="on" + bodyClassName={styles.fieldset__body} + groupClassName={styles.group} + legendClassName={styles.label} storageKey={motionStorageKey} - value={false} /> - <AckeeSelect - className={styles.setting} - initialValue="full" - labelClassName={`${styles.label} ${styles['label--select']}`} - tooltipClassName={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> ); |