diff options
Diffstat (limited to 'src/components/organisms/modals')
5 files changed, 29 insertions, 75 deletions
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx index 866bc25..e92bf1b 100644 --- a/src/components/organisms/modals/search-modal.tsx +++ b/src/components/organisms/modals/search-modal.tsx @@ -1,9 +1,18 @@ +import Spinner from '@components/atoms/loaders/spinner'; import Modal, { type ModalProps } from '@components/molecules/modals/modal'; +import dynamic from 'next/dynamic'; import { FC } from 'react'; import { useIntl } from 'react-intl'; -import SearchForm, { SearchFormProps } from '../forms/search-form'; +import { type SearchFormProps } from '../forms/search-form'; import styles from './search-modal.module.scss'; +const DynamicSearchForm = dynamic( + () => import('@components/organisms/forms/search-form'), + { + loading: () => <Spinner />, + } +); + export type SearchModalProps = Pick<SearchFormProps, 'searchPage'> & { /** * Set additional classnames to modal wrapper. @@ -26,7 +35,7 @@ const SearchModal: FC<SearchModalProps> = ({ className, searchPage }) => { return ( <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}> - <SearchForm hideLabel={true} searchPage={searchPage} /> + <DynamicSearchForm hideLabel={true} searchPage={searchPage} /> </Modal> ); }; diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss index ebae3da..a6a2077 100644 --- a/src/components/organisms/modals/settings-modal.module.scss +++ b/src/components/organisms/modals/settings-modal.module.scss @@ -1,21 +1,11 @@ @use "@styles/abstracts/mixins" as mix; -.wrapper { - .label { - margin-right: auto; - } +.label { + margin-right: auto; @include mix.media("screen") { @include mix.dimensions(null, "2xs", "height") { font-size: var(--font-size-sm); - - .heading { - font-size: var(--font-size-lg); - } - - .label { - font-size: var(--font-size-sm); - } } } } diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx index 0abe004..0fe8c18 100644 --- a/src/components/organisms/modals/settings-modal.stories.tsx +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import SettingsModal from './settings-modal'; /** @@ -36,13 +35,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof SettingsModal>; const Template: ComponentStory<typeof SettingsModal> = (args) => ( diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx index 6291e54..acbf7d1 100644 --- a/src/components/organisms/modals/settings-modal.test.tsx +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -2,31 +2,8 @@ import { render, screen } from '@test-utils'; import SettingsModal from './settings-modal'; describe('SettingsModal', () => { - it('renders a theme toggle setting', () => { + it('renders a fake heading', () => { render(<SettingsModal />); - expect( - screen.getByRole('checkbox', { name: /^Theme:/i }) - ).toBeInTheDocument(); - }); - - it('renders a code blocks toggle setting', () => { - render(<SettingsModal />); - expect( - screen.getByRole('checkbox', { name: /^Code blocks:/i }) - ).toBeInTheDocument(); - }); - - it('renders a motion setting', () => { - render(<SettingsModal />); - expect( - screen.getByRole('checkbox', { name: /^Animations:/i }) - ).toBeInTheDocument(); - }); - - it('renders a Ackee setting', () => { - render(<SettingsModal />); - expect( - screen.getByRole('combobox', { name: /^Tracking:/i }) - ).toBeInTheDocument(); + expect(screen.getByText(/Settings/i)).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index 20d2605..e724076 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -1,25 +1,20 @@ -import Form from '@components/atoms/forms/form'; -import AckeeSelect, { - type AckeeSelectProps, -} from '@components/molecules/forms/ackee-select'; -import MotionToggle from '@components/molecules/forms/motion-toggle'; -import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle'; -import ThemeToggle from '@components/molecules/forms/theme-toggle'; +import Spinner from '@components/atoms/loaders/spinner'; import Modal, { type ModalProps } from '@components/molecules/modals/modal'; +import dynamic from 'next/dynamic'; import { FC } from 'react'; import { useIntl } from 'react-intl'; +import { type SettingsFormProps } from '../forms/settings-form'; import styles from './settings-modal.module.scss'; -export type SettingsModalProps = { - /** - * Set additional classnames to the modal wrapper. - */ - className?: ModalProps['className']; - /** - * Set additional classnames to the tooltip wrapper. - */ - tooltipClassName?: AckeeSelectProps['tooltipClassName']; -}; +const DynamicSettingsForm = dynamic( + () => import('@components/organisms/forms/settings-form'), + { + loading: () => <Spinner />, + } +); + +export type SettingsModalProps = Pick<ModalProps, 'className'> & + Pick<SettingsFormProps, 'tooltipClassName'>; /** * SettingsModal component @@ -28,7 +23,7 @@ export type SettingsModalProps = { */ const SettingsModal: FC<SettingsModalProps> = ({ className = '', - tooltipClassName = '', + ...props }) => { const intl = useIntl(); const title = intl.formatMessage({ @@ -44,16 +39,7 @@ const SettingsModal: FC<SettingsModalProps> = ({ className={`${styles.wrapper} ${className}`} headingClassName={styles.heading} > - <Form onSubmit={() => null}> - <ThemeToggle labelClassName={styles.label} value={false} /> - <PrismThemeToggle labelClassName={styles.label} value={false} /> - <MotionToggle labelClassName={styles.label} value={false} /> - <AckeeSelect - initialValue="full" - labelClassName={styles.label} - tooltipClassName={tooltipClassName} - /> - </Form> + <DynamicSettingsForm {...props} /> </Modal> ); }; |