diff options
Diffstat (limited to 'src/components/organisms/modals')
5 files changed, 45 insertions, 62 deletions
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx index 7ba770f..7d772df 100644 --- a/src/components/organisms/modals/search-modal.tsx +++ b/src/components/organisms/modals/search-modal.tsx @@ -1,6 +1,6 @@ import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; -import { Modal, type ModalProps } from '../../molecules'; +import { Heading, Modal, type ModalProps } from '../../atoms'; import { SearchForm, type SearchFormProps } from '../forms'; import styles from './search-modal.module.scss'; @@ -23,8 +23,15 @@ const SearchModalWithRef: ForwardRefRenderFunction< }); return ( - <Modal className={`${styles.wrapper} ${className}`} title={modalTitle}> - <SearchForm hideLabel={true} ref={ref} searchPage={searchPage} /> + <Modal + className={`${styles.wrapper} ${className}`} + heading={ + <Heading isFake level={3}> + {modalTitle} + </Heading> + } + > + <SearchForm isLabelHidden ref={ref} searchPage={searchPage} /> </Modal> ); }; diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss index e9b3b85..95626ab 100644 --- a/src/components/organisms/modals/settings-modal.module.scss +++ b/src/components/organisms/modals/settings-modal.module.scss @@ -20,27 +20,17 @@ column-gap: var(--spacing-lg); } -.items { +.item { + width: 100%; margin: 0 0 var(--spacing-2xs); - max-width: unset; -} -.fieldset__body { - margin-left: auto; + > *:last-child { + margin-left: auto; + } } -.tooltip { - font-size: var(--font-size-sm); - z-index: 2; +.icon { + --icon-size: #{fun.convert-px(30)}; - @media screen and (max-height: #{var.get-breakpoint("2xs")}) { - width: calc(100vw - var(--spacing-md)); - padding: var(--spacing-md) var(--spacing-2xs) var(--spacing-2xs) - var(--spacing-2xs); - right: 0; - } - - @media screen and (min-width: #{var.get-breakpoint("sm")}) { - width: 100%; - } + margin-right: var(--spacing-2xs); } diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx index 093922d..7af0d60 100644 --- a/src/components/organisms/modals/settings-modal.stories.tsx +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture'; -import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture'; +import { storageKey as ackeeStorageKey } from '../../organisms/forms/ackee-toggle/ackee-toggle.fixture'; +import { storageKey as motionStorageKey } from '../../organisms/forms/motion-toggle/motion-toggle.fixture'; import { SettingsModal } from './settings-modal'; /** diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx index ec14719..3cd64f6 100644 --- a/src/components/organisms/modals/settings-modal.test.tsx +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '../../../../tests/utils'; -import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture'; -import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture'; +import { storageKey as ackeeStorageKey } from '../../organisms/forms/ackee-toggle/ackee-toggle.fixture'; +import { storageKey as motionStorageKey } from '../../organisms/forms/motion-toggle/motion-toggle.fixture'; import { SettingsModal } from './settings-modal'; describe('SettingsModal', () => { diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index d4a3a49..bb3d886 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -1,29 +1,26 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import { Form } from '../../atoms'; +import { Cog, Form, Heading, Modal, type ModalProps } from '../../atoms'; import { AckeeToggle, type AckeeToggleProps, - Modal, - type ModalProps, MotionToggle, type MotionToggleProps, PrismThemeToggle, ThemeToggle, -} from '../../molecules'; +} from '../../organisms'; import styles from './settings-modal.module.scss'; -export type SettingsModalProps = Pick<ModalProps, 'className'> & - Pick<AckeeToggleProps, 'tooltipClassName'> & { - /** - * The local storage key for Ackee settings. - */ - ackeeStorageKey: AckeeToggleProps['storageKey']; - /** - * The local storage key for Reduce motion settings. - */ - motionStorageKey: MotionToggleProps['storageKey']; - }; +export type SettingsModalProps = Pick<ModalProps, 'className'> & { + /** + * The local storage key for Ackee settings. + */ + ackeeStorageKey: AckeeToggleProps['storageKey']; + /** + * The local storage key for Reduce motion settings. + */ + motionStorageKey: MotionToggleProps['storageKey']; +}; /** * SettingsModal component @@ -34,7 +31,6 @@ export const SettingsModal: FC<SettingsModalProps> = ({ className = '', ackeeStorageKey, motionStorageKey, - tooltipClassName, }) => { const intl = useIntl(); const title = intl.formatMessage({ @@ -51,40 +47,30 @@ export const SettingsModal: FC<SettingsModalProps> = ({ return ( <Modal className={`${styles.wrapper} ${className}`} - icon="cogs" - title={title} + heading={ + <Heading isFake level={3}> + <Cog className={styles.icon} /> + {title} + </Heading> + } > <Form aria-label={ariaLabel} className={styles.form} - itemsClassName={styles.items} onSubmit={() => null} > - <ThemeToggle - bodyClassName={styles.fieldset__body} - groupClassName={styles.group} - legendClassName={styles.label} - /> - <PrismThemeToggle - bodyClassName={styles.fieldset__body} - groupClassName={styles.group} - legendClassName={styles.label} - /> + <ThemeToggle className={styles.item} /> + <PrismThemeToggle className={styles.item} /> <MotionToggle - bodyClassName={styles.fieldset__body} + className={styles.item} defaultValue="on" - groupClassName={styles.group} - legendClassName={styles.label} storageKey={motionStorageKey} /> <AckeeToggle - bodyClassName={styles.fieldset__body} - buttonClassName={styles.btn} + className={styles.item} + direction="upwards" defaultValue="full" - groupClassName={`${styles.group} ${styles['group--ackee']}`} - legendClassName={`${styles.label} ${styles['label--ackee']}`} storageKey={ackeeStorageKey} - tooltipClassName={`${styles.tooltip} ${tooltipClassName}`} /> </Form> </Modal> |