From 5d3e8a4d0c2ce2ad8f22df857ab3ce54fcfc38ac Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 3 Nov 2023 12:22:47 +0100 Subject: refactor(components): replace Toolbar with Navbar component * remove SearchModal and SettingsModal components * add a generic NavbarItem component (instead of the previous toolbar items to avoid unreadable styles...) * move FlippingLabel component logic into NavbarItem since it is only used here --- src/components/organisms/modals/index.ts | 2 - .../organisms/modals/search-modal.module.scss | 11 ----- .../organisms/modals/search-modal.stories.tsx | 47 -------------------- .../organisms/modals/search-modal.test.tsx | 10 ----- src/components/organisms/modals/search-modal.tsx | 45 ------------------- .../organisms/modals/settings-modal.module.scss | 19 -------- .../organisms/modals/settings-modal.stories.tsx | 51 ---------------------- .../organisms/modals/settings-modal.test.tsx | 29 ------------ src/components/organisms/modals/settings-modal.tsx | 45 ------------------- 9 files changed, 259 deletions(-) delete mode 100644 src/components/organisms/modals/index.ts delete mode 100644 src/components/organisms/modals/search-modal.module.scss delete mode 100644 src/components/organisms/modals/search-modal.stories.tsx delete mode 100644 src/components/organisms/modals/search-modal.test.tsx delete mode 100644 src/components/organisms/modals/search-modal.tsx delete mode 100644 src/components/organisms/modals/settings-modal.module.scss delete mode 100644 src/components/organisms/modals/settings-modal.stories.tsx delete mode 100644 src/components/organisms/modals/settings-modal.test.tsx delete mode 100644 src/components/organisms/modals/settings-modal.tsx (limited to 'src/components/organisms/modals') 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; - -const Template: ComponentStory = (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(); - 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 ( - - {modalTitle} - - } - > - - - ); -}; - -/** - * 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; - -const Template: ComponentStory = (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(); - expect(rtlScreen.getByText(/Settings/i)).toBeInTheDocument(); - }); - - it('renders a settings form', () => { - render(); - 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; - -/** - * SettingsModal component - * - * Render a modal with settings options. - */ -export const SettingsModal: FC = ({ 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 ( - } - heading={ - - {title} - - } - > - - - ); -}; -- cgit v1.2.3