diff options
Diffstat (limited to 'src/components/organisms/modals')
8 files changed, 247 insertions, 0 deletions
diff --git a/src/components/organisms/modals/search-modal.module.scss b/src/components/organisms/modals/search-modal.module.scss new file mode 100644 index 0000000..aba0593 --- /dev/null +++ b/src/components/organisms/modals/search-modal.module.scss @@ -0,0 +1,11 @@ +@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 new file mode 100644 index 0000000..5a607c6 --- /dev/null +++ b/src/components/organisms/modals/search-modal.stories.tsx @@ -0,0 +1,47 @@ +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 new file mode 100644 index 0000000..7ba08c0 --- /dev/null +++ b/src/components/organisms/modals/search-modal.test.tsx @@ -0,0 +1,9 @@ +import { render, screen } from '@test-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 new file mode 100644 index 0000000..ed6084a --- /dev/null +++ b/src/components/organisms/modals/search-modal.tsx @@ -0,0 +1,37 @@ +import Modal, { type ModalProps } from '@components/molecules/modals/modal'; +import { forwardRef, ForwardRefRenderFunction } from 'react'; +import { useIntl } from 'react-intl'; +import SearchForm, { type SearchFormProps } from '../forms/search-form'; +import styles from './search-modal.module.scss'; + +export type SearchModalProps = SearchFormProps & { + /** + * Set additional classnames to modal wrapper. + */ + className?: ModalProps['className']; +}; + +/** + * SearchModal + * + * Render a search form modal. + */ +const SearchModal: ForwardRefRenderFunction< + HTMLInputElement, + SearchModalProps +> = ({ className, searchPage }, ref) => { + const intl = useIntl(); + const modalTitle = intl.formatMessage({ + defaultMessage: 'Search', + description: 'SearchModal: modal title', + id: 'G+Twgm', + }); + + return ( + <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}> + <SearchForm hideLabel={true} ref={ref} searchPage={searchPage} /> + </Modal> + ); +}; + +export default forwardRef(SearchModal); diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss new file mode 100644 index 0000000..a6a2077 --- /dev/null +++ b/src/components/organisms/modals/settings-modal.module.scss @@ -0,0 +1,11 @@ +@use "@styles/abstracts/mixins" as mix; + +.label { + margin-right: auto; + + @include mix.media("screen") { + @include mix.dimensions(null, "2xs", "height") { + 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 new file mode 100644 index 0000000..d263e2b --- /dev/null +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -0,0 +1,67 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import SettingsModal from './settings-modal'; + +/** + * SettingsModal - Storybook Meta + */ +export default { + title: 'Organisms/Modals', + component: SettingsModal, + argTypes: { + ackeeStorageKey: { + control: { + type: 'text', + }, + description: 'A local storage key for Ackee.', + type: { + name: 'string', + required: true, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the modal wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + motionStorageKey: { + control: { + type: 'text', + }, + description: 'A local storage key for reduced motion setting..', + type: { + name: 'string', + required: true, + }, + }, + tooltipClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, +} as ComponentMeta<typeof SettingsModal>; + +const Template: ComponentStory<typeof SettingsModal> = (args) => ( + <SettingsModal {...args} /> +); + +/** + * Modals Stories - Settings + */ +export const Settings = Template.bind({}); diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx new file mode 100644 index 0000000..d6ed989 --- /dev/null +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -0,0 +1,14 @@ +import { render, screen } from '@test-utils'; +import SettingsModal from './settings-modal'; + +describe('SettingsModal', () => { + it('renders a fake heading', () => { + render( + <SettingsModal + ackeeStorageKey="ackee-tracking" + motionStorageKey="reduce-motion" + /> + ); + expect(screen.getByText(/Settings/i)).toBeInTheDocument(); + }); +}); diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx new file mode 100644 index 0000000..5d14836 --- /dev/null +++ b/src/components/organisms/modals/settings-modal.tsx @@ -0,0 +1,51 @@ +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'; + +const DynamicSettingsForm = dynamic( + () => import('@components/organisms/forms/settings-form'), + { + loading: () => <Spinner />, + ssr: false, + } +); + +export type SettingsModalProps = Pick<ModalProps, 'className'> & + Pick< + SettingsFormProps, + 'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName' + >; + +/** + * SettingsModal component + * + * Render a modal with settings options. + */ +const SettingsModal: FC<SettingsModalProps> = ({ + className = '', + ...props +}) => { + const intl = useIntl(); + const title = intl.formatMessage({ + defaultMessage: 'Settings', + description: 'SettingsModal: title', + id: 'gPfT/K', + }); + + return ( + <Modal + title={title} + icon="cogs" + className={`${styles.wrapper} ${className}`} + headingClassName={styles.heading} + > + <DynamicSettingsForm {...props} /> + </Modal> + ); +}; + +export default SettingsModal; |