diff options
Diffstat (limited to 'src/components/organisms/modals')
9 files changed, 0 insertions, 259 deletions
diff --git a/src/components/organisms/modals/index.ts b/src/components/organisms/modals/index.ts deleted file mode 100644 index 9385fb2..0000000 --- a/src/components/organisms/modals/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './search-modal'; -export * from './settings-modal'; diff --git a/src/components/organisms/modals/search-modal.module.scss b/src/components/organisms/modals/search-modal.module.scss deleted file mode 100644 index 449aa91..0000000 --- a/src/components/organisms/modals/search-modal.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "../../../styles/abstracts/mixins" as mix; - -.wrapper { - padding-bottom: var(--spacing-md); - - @include mix.media("screen") { - @include mix.dimensions("sm") { - max-width: 40ch; - } - } -} diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx deleted file mode 100644 index a9cf064..0000000 --- a/src/components/organisms/modals/search-modal.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { SearchModal } from './search-modal'; - -/** - * SearchModal - Storybook Meta - */ -export default { - title: 'Organisms/Modals', - component: SearchModal, - args: { - searchPage: '#', - }, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the search modal wrapper.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - searchPage: { - control: { - type: 'text', - }, - description: 'The search results page url.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof SearchModal>; - -const Template: ComponentStory<typeof SearchModal> = (args) => ( - <SearchModal {...args} /> -); - -/** - * Modals Stories - Search - */ -export const Search = Template.bind({}); diff --git a/src/components/organisms/modals/search-modal.test.tsx b/src/components/organisms/modals/search-modal.test.tsx deleted file mode 100644 index a9e1ece..0000000 --- a/src/components/organisms/modals/search-modal.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { SearchModal } from './search-modal'; - -describe('SearchModal', () => { - it('renders a search modal', () => { - render(<SearchModal searchPage="#" />); - expect(screen.getByText('Search')).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx deleted file mode 100644 index be9d489..0000000 --- a/src/components/organisms/modals/search-modal.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { forwardRef, type ForwardRefRenderFunction } from 'react'; -import { useIntl } from 'react-intl'; -import { Heading } from '../../atoms'; -import { Modal, type ModalProps } from '../../molecules'; -import { SearchForm, type SearchFormProps } from '../forms'; -import styles from './search-modal.module.scss'; - -export type SearchModalProps = SearchFormProps & { - /** - * Set additional classnames to modal wrapper. - */ - className?: ModalProps['className']; -}; - -const SearchModalWithRef: ForwardRefRenderFunction< - HTMLInputElement, - SearchModalProps -> = ({ className, searchPage }, ref) => { - const intl = useIntl(); - const modalTitle = intl.formatMessage({ - defaultMessage: 'Search', - description: 'SearchModal: modal title', - id: 'G+Twgm', - }); - - return ( - <Modal - className={`${styles.wrapper} ${className}`} - heading={ - <Heading isFake level={3}> - {modalTitle} - </Heading> - } - > - <SearchForm isLabelHidden ref={ref} searchPage={searchPage} /> - </Modal> - ); -}; - -/** - * SearchModal - * - * Render a search form modal. - */ -export const SearchModal = forwardRef(SearchModalWithRef); diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss deleted file mode 100644 index 68bce98..0000000 --- a/src/components/organisms/modals/settings-modal.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/variables" as var; - -.wrapper { - width: 100%; - - @media screen and (max-height: #{var.get-breakpoint("2xs")}) and (max-width: #{var.get-breakpoint("sm")}) { - --first-col-width: #{fun.convert-px(140)}; - --col-gap: var(--spacing-xl); - - display: grid; - grid-template-columns: var(--first-col-width) 1fr; - gap: var(--spacing-xl); - } -} - -.icon { - 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 deleted file mode 100644 index 7c56f27..0000000 --- a/src/components/organisms/modals/settings-modal.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { SettingsModal } from './settings-modal'; - -/** - * SettingsModal - Storybook Meta - */ -export default { - title: 'Organisms/Modals', - component: SettingsModal, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the modal wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - tooltipClassName: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the tooltip wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, - parameters: { - layout: 'fullscreen', - }, -} as ComponentMeta<typeof SettingsModal>; - -const Template: ComponentStory<typeof SettingsModal> = (args) => ( - <SettingsModal {...args} /> -); - -/** - * Modals Stories - Settings - */ -export const Settings = Template.bind({}); -Settings.args = {}; diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx deleted file mode 100644 index af2b6e9..0000000 --- a/src/components/organisms/modals/settings-modal.test.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { SettingsModal } from './settings-modal'; - -describe('SettingsModal', () => { - it('renders the modal heading', () => { - render(<SettingsModal />); - expect(rtlScreen.getByText(/Settings/i)).toBeInTheDocument(); - }); - - it('renders a settings form', () => { - render(<SettingsModal />); - expect( - rtlScreen.getByRole('form', { name: /^Settings form/i }) - ).toBeInTheDocument(); - expect( - rtlScreen.getByRole('radiogroup', { name: /^Theme:/i }) - ).toBeInTheDocument(); - expect( - rtlScreen.getByRole('radiogroup', { name: /^Code blocks:/i }) - ).toBeInTheDocument(); - expect( - rtlScreen.getByRole('radiogroup', { name: /^Animations:/i }) - ).toBeInTheDocument(); - expect( - rtlScreen.getByRole('radiogroup', { name: /^Tracking:/i }) - ).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx deleted file mode 100644 index 36c5977..0000000 --- a/src/components/organisms/modals/settings-modal.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { useCallback, type FC, type FormEvent } from 'react'; -import { useIntl } from 'react-intl'; -import { Heading, Icon } from '../../atoms'; -import { Modal, type ModalProps } from '../../molecules'; -import { SettingsForm } from '../forms'; -import styles from './settings-modal.module.scss'; - -export type SettingsModalProps = Pick<ModalProps, 'className'>; - -/** - * SettingsModal component - * - * Render a modal with settings options. - */ -export const SettingsModal: FC<SettingsModalProps> = ({ className = '' }) => { - const intl = useIntl(); - const title = intl.formatMessage({ - defaultMessage: 'Settings', - description: 'SettingsModal: title', - id: 'gPfT/K', - }); - const ariaLabel = intl.formatMessage({ - defaultMessage: 'Settings form', - id: 'xYNeKX', - description: 'SettingsModal: an accessible form name', - }); - - const submitHandler = useCallback((e: FormEvent) => { - e.preventDefault(); - }, []); - - return ( - <Modal - className={`${styles.wrapper} ${className}`} - icon={<Icon className={styles.icon} shape="cog" />} - heading={ - <Heading isFake level={3}> - {title} - </Heading> - } - > - <SettingsForm aria-label={ariaLabel} onSubmit={submitHandler} /> - </Modal> - ); -}; |