diff options
Diffstat (limited to 'src/components/organisms/modals')
8 files changed, 213 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..b35c841 --- /dev/null +++ b/src/components/organisms/modals/search-modal.stories.tsx @@ -0,0 +1,16 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import SearchModalComponent from './search-modal'; + +export default { + title: 'Organisms/Modals', + component: SearchModalComponent, +} as ComponentMeta<typeof SearchModalComponent>; + +const Template: ComponentStory<typeof SearchModalComponent> = (args) => ( + <IntlProvider locale="en"> + <SearchModalComponent {...args} /> + </IntlProvider> +); + +export const SearchModal = 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..249c523 --- /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 />); + 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..883b783 --- /dev/null +++ b/src/components/organisms/modals/search-modal.tsx @@ -0,0 +1,34 @@ +import Modal from '@components/molecules/modals/modal'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import SearchForm from '../forms/search-form'; +import styles from './search-modal.module.scss'; + +export type SearchModalProps = { + /** + * Set additional classnames to modal wrapper. + */ + className?: string; +}; + +/** + * SearchModal + * + * Render a search form modal. + */ +const SearchModal: VFC<SearchModalProps> = ({ className }) => { + 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} /> + </Modal> + ); +}; + +export default 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..ebae3da --- /dev/null +++ b/src/components/organisms/modals/settings-modal.module.scss @@ -0,0 +1,21 @@ +@use "@styles/abstracts/mixins" as mix; + +.wrapper { + .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 new file mode 100644 index 0000000..c19a6d7 --- /dev/null +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -0,0 +1,31 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import SettingsModal from './settings-modal'; + +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, + }, + }, + }, +} as ComponentMeta<typeof SettingsModal>; + +const Template: ComponentStory<typeof SettingsModal> = (args) => ( + <IntlProvider locale="en"> + <SettingsModal {...args} /> + </IntlProvider> +); + +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..6291e54 --- /dev/null +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -0,0 +1,32 @@ +import { render, screen } from '@test-utils'; +import SettingsModal from './settings-modal'; + +describe('SettingsModal', () => { + it('renders a theme toggle setting', () => { + 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(); + }); +}); diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx new file mode 100644 index 0000000..25d6f6f --- /dev/null +++ b/src/components/organisms/modals/settings-modal.tsx @@ -0,0 +1,59 @@ +import Form from '@components/atoms/forms/form'; +import AckeeSelect 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 Modal from '@components/molecules/modals/modal'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './settings-modal.module.scss'; + +export type SettingsModalProps = { + /** + * Set additional classnames to the modal wrapper. + */ + className?: string; + /** + * Set additional classnames to the tooltip wrapper. + */ + tooltipClassName?: string; +}; + +/** + * SettingsModal component + * + * Render a modal with settings options. + */ +const SettingsModal: VFC<SettingsModalProps> = ({ + className = '', + tooltipClassName = '', +}) => { + 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} + > + <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> + </Modal> + ); +}; + +export default SettingsModal; |