diff options
Diffstat (limited to 'src/components/organisms/toolbar')
18 files changed, 0 insertions, 996 deletions
diff --git a/src/components/organisms/toolbar/index.ts b/src/components/organisms/toolbar/index.ts deleted file mode 100644 index 316a52a..0000000 --- a/src/components/organisms/toolbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './toolbar'; diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss deleted file mode 100644 index bedf38e..0000000 --- a/src/components/organisms/toolbar/main-nav.module.scss +++ /dev/null @@ -1,86 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; - -.item { - @include mix.media("screen") { - @include mix.dimensions("md") { - .checkbox, - .label { - display: none; - } - - .modal { - position: relative; - } - } - } - - .modal { - @include mix.media("screen") { - @include mix.dimensions(null, "md") { - padding: var(--spacing-2xs); - background: var(--color-bg-secondary); - border-top: fun.convert-px(4) solid; - border-bottom: fun.convert-px(4) solid; - border-image: radial-gradient( - ellipse at top, - var(--color-primary-lighter) 20%, - var(--color-primary) 100% - ) - 1; - box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3) - fun.convert-px(-1) var(--color-shadow-dark); - } - - @include mix.dimensions("sm", "md") { - border-left: fun.convert-px(4) solid; - border-right: fun.convert-px(4) solid; - } - - @include mix.dimensions("md") { - top: unset; - } - } - } - - .checkbox { - &:checked { - ~ .label .icon { - background: transparent; - border: transparent; - - &::before { - top: 0; - transform-origin: 50% 50%; - transform: rotate(-45deg); - } - - &::after { - bottom: 0; - transform-origin: 50% 50%; - transform: rotate(45deg); - } - } - } - - &:not(:checked) { - @include mix.media("screen") { - @include mix.dimensions("md") { - ~ .modal { - opacity: 1; - visibility: visible; - transform: none; - } - } - } - } - } -} - -.label { - display: flex; - place-content: center; - place-items: center; - width: var(--btn-size, #{fun.convert-px(60)}); - height: var(--btn-size, #{fun.convert-px(60)}); -} diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx deleted file mode 100644 index 31e2b65..0000000 --- a/src/components/organisms/toolbar/main-nav.stories.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useToggle } from '../../../utils/hooks'; -import { MainNavItem } from './main-nav'; - -/** - * MainNavItem - Storybook Meta - */ -export default { - title: 'Organisms/Toolbar/MainNavItem', - component: MainNavItem, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the main nav wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - isActive: { - control: { - type: null, - }, - description: 'Determine if the main nav is open or not.', - type: { - name: 'boolean', - required: true, - }, - }, - items: { - description: 'The main nav items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - setIsActive: { - control: { - type: null, - }, - description: 'A callback function to change main nav state.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: true, - }, - }, - }, -} as ComponentMeta<typeof MainNavItem>; - -const Template: ComponentStory<typeof MainNavItem> = ({ - isActive = false, - setIsActive: _setIsActive, - ...args -}) => { - const [isOpen, toggle] = useToggle(isActive); - - return <MainNavItem isActive={isOpen} setIsActive={toggle} {...args} />; -}; - -/** - * MainNavItem Stories - Inactive - */ -export const Inactive = Template.bind({}); -Inactive.args = { - isActive: false, - items: [ - { id: 'home', label: 'Home', href: '#' }, - { id: 'contact', label: 'Contact', href: '#' }, - ], -}; - -/** - * MainNavItem Stories - Active - */ -export const Active = Template.bind({}); -Active.args = { - isActive: true, - items: [ - { id: 'home', label: 'Home', href: '#' }, - { id: 'contact', label: 'Contact', href: '#' }, - ], -}; diff --git a/src/components/organisms/toolbar/main-nav.test.tsx b/src/components/organisms/toolbar/main-nav.test.tsx deleted file mode 100644 index 177e692..0000000 --- a/src/components/organisms/toolbar/main-nav.test.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { MainNavItem } from './main-nav'; - -const doNothing = () => { - // do nothing -}; - -const items = [ - { id: 'home', label: 'Home', href: '/' }, - { id: 'blog', label: 'Blog', href: '/blog' }, - { id: 'contact', label: 'Contact', href: '/contact' }, -]; - -describe('MainNavItem', () => { - it('renders a checkbox to open main nav', () => { - render( - <MainNavItem items={items} isActive={false} setIsActive={doNothing} /> - ); - expect(rtlScreen.getByRole('checkbox')).toHaveAccessibleName('Open menu'); - }); - - it('renders a checkbox to close main nav', () => { - render( - <MainNavItem items={items} isActive={true} setIsActive={doNothing} /> - ); - expect(rtlScreen.getByRole('checkbox')).toHaveAccessibleName('Close menu'); - }); - - it('renders the correct number of items', () => { - render( - <MainNavItem items={items} isActive={true} setIsActive={doNothing} /> - ); - expect(rtlScreen.getAllByRole('listitem')).toHaveLength(items.length); - }); - - it('renders some links with the right label', () => { - render( - <MainNavItem items={items} isActive={true} setIsActive={doNothing} /> - ); - expect( - rtlScreen.getByRole('link', { name: items[0].label }) - ).toHaveAttribute('href', items[0].href); - }); -}); diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx deleted file mode 100644 index ee799f5..0000000 --- a/src/components/organisms/toolbar/main-nav.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { forwardRef, type ForwardRefRenderFunction } from 'react'; -import { useIntl } from 'react-intl'; -import { BooleanField, type BooleanFieldProps, Icon, Label } from '../../atoms'; -import { type MainNavItem as Item, MainNav } from '../nav'; -import mainNavStyles from './main-nav.module.scss'; -import sharedStyles from './toolbar-items.module.scss'; - -export type MainNavItemProps = { - /** - * Set additional classnames to the nav element. - */ - className?: string; - /** - * The button state. - */ - isActive: BooleanFieldProps['isChecked']; - /** - * The main nav items. - */ - items: Item[]; - /** - * A callback function to handle button state. - */ - setIsActive: BooleanFieldProps['onChange']; -}; - -const MainNavItemWithRef: ForwardRefRenderFunction< - HTMLDivElement, - MainNavItemProps -> = ({ className = '', isActive = false, items, setIsActive }, ref) => { - const intl = useIntl(); - const label = isActive - ? intl.formatMessage({ - defaultMessage: 'Close menu', - description: 'MainNav: Close label', - id: 'aJC7D2', - }) - : intl.formatMessage({ - defaultMessage: 'Open menu', - description: 'MainNav: Open label', - id: 'GTbGMy', - }); - - return ( - <div className={`${sharedStyles.item} ${mainNavStyles.item}`} ref={ref}> - <BooleanField - className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`} - id="main-nav-button" - isChecked={isActive} - name="main-nav-button" - onChange={setIsActive} - type="checkbox" - value="open" - /> - <Label - aria-label={label} - className={`${sharedStyles.label} ${mainNavStyles.label}`} - htmlFor="main-nav-button" - > - <Icon shape="hamburger" /> - </Label> - <MainNav - className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`} - items={items} - /> - </div> - ); -}; - -/** - * MainNavItem component - * - * Render the main navigation as toolbar item. - */ -export const MainNavItem = forwardRef(MainNavItemWithRef); diff --git a/src/components/organisms/toolbar/search.module.scss b/src/components/organisms/toolbar/search.module.scss deleted file mode 100644 index 0dc36de..0000000 --- a/src/components/organisms/toolbar/search.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "../../../styles/abstracts/mixins" as mix; - -.modal { - padding-bottom: var(--spacing-md); - - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - border-inline: 0; - } - } -} diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx deleted file mode 100644 index 0f211bd..0000000 --- a/src/components/organisms/toolbar/search.stories.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useToggle } from '../../../utils/hooks'; -import { Search } from './search'; - -/** - * Search - Storybook Meta - */ -export default { - title: 'Organisms/Toolbar/Search', - component: Search, - args: { - searchPage: '#', - }, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the modal wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - isActive: { - control: { - type: null, - }, - description: 'Define the modal state: either opened or closed.', - type: { - name: 'boolean', - required: true, - }, - }, - searchPage: { - control: { - type: 'text', - }, - description: 'The search results page url.', - type: { - name: 'string', - required: true, - }, - }, - setIsActive: { - control: { - type: null, - }, - description: 'A callback function to update modal state.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: true, - }, - }, - }, -} as ComponentMeta<typeof Search>; - -const Template: ComponentStory<typeof Search> = ({ - isActive = false, - setIsActive: _setIsActive, - ...args -}) => { - const [isOpen, toggle] = useToggle(isActive); - - return <Search isActive={isOpen} setIsActive={toggle} {...args} />; -}; - -/** - * Search Stories - Inactive - */ -export const Inactive = Template.bind({}); -Inactive.args = { - isActive: false, -}; - -/** - * Search Stories - Active - */ -export const Active = Template.bind({}); -Active.args = { - isActive: true, -}; diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx deleted file mode 100644 index 6f5ed7e..0000000 --- a/src/components/organisms/toolbar/search.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { Search } from './search'; - -describe('Search', () => { - it('renders a button to open search modal', () => { - render(<Search searchPage="#" isActive={false} setIsActive={() => null} />); - expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open search'); - }); - - it('renders a button to close search modal', () => { - render(<Search searchPage="#" isActive={true} setIsActive={() => null} />); - expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close search'); - }); -}); diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx deleted file mode 100644 index 4429770..0000000 --- a/src/components/organisms/toolbar/search.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { forwardRef, type ForwardRefRenderFunction } from 'react'; -import { useIntl } from 'react-intl'; -import { useAutofocus } from '../../../utils/hooks'; -import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms'; -import { SearchModal, type SearchModalProps } from '../modals'; -import searchStyles from './search.module.scss'; -import sharedStyles from './toolbar-items.module.scss'; - -export type SearchProps = { - /** - * Set additional classnames to the modal wrapper. - */ - className?: SearchModalProps['className']; - /** - * The button state. - */ - isActive: BooleanFieldProps['isChecked']; - /** - * A callback function to execute search. - */ - searchPage: SearchModalProps['searchPage']; - /** - * A callback function to handle button state. - */ - setIsActive: BooleanFieldProps['onChange']; -}; - -const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( - { className = '', isActive = false, searchPage, setIsActive }, - ref -) => { - const intl = useIntl(); - const label = isActive - ? intl.formatMessage({ - defaultMessage: 'Close search', - id: 'LDDUNO', - description: 'Search: Close label', - }) - : intl.formatMessage({ - defaultMessage: 'Open search', - id: 'Xj+WXB', - description: 'Search: Open label', - }); - - const searchInputRef = useAutofocus<HTMLInputElement>({ - condition: () => isActive, - delay: 360, - }); - - return ( - <div className={`${sharedStyles.item} ${searchStyles.item}`} ref={ref}> - <BooleanField - className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`} - id="search-button" - isChecked={isActive} - name="search-button" - onChange={setIsActive} - type="checkbox" - value="open" - /> - <FlippingLabel - className={sharedStyles.label} - htmlFor="search-button" - icon={<Icon aria-hidden={true} shape="magnifying-glass" size="lg" />} - isActive={isActive} - label={label} - /> - <SearchModal - className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`} - ref={searchInputRef} - searchPage={searchPage} - /> - </div> - ); -}; - -export const Search = forwardRef(SearchWithRef); diff --git a/src/components/organisms/toolbar/settings.module.scss b/src/components/organisms/toolbar/settings.module.scss deleted file mode 100644 index 2c473b7..0000000 --- a/src/components/organisms/toolbar/settings.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use "../../../styles/abstracts/mixins" as mix; - -.modal { - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - border-inline: 0; - } - } -} diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx deleted file mode 100644 index c1fe37d..0000000 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useToggle } from '../../../utils/hooks'; -import { Settings } from './settings'; - -/** - * Settings - Storybook Meta - */ -export default { - title: 'Organisms/Toolbar/Settings', - component: Settings, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the modal wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - isActive: { - control: { - type: null, - }, - description: 'Define the modal state: either opened or closed.', - table: { - category: 'Events', - }, - type: { - name: 'boolean', - required: true, - }, - }, - setIsActive: { - control: { - type: null, - }, - description: 'A callback function to update modal state.', - type: { - name: 'function', - 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 Settings>; - -const Template: ComponentStory<typeof Settings> = ({ - isActive = false, - setIsActive: _setIsActive, - ...args -}) => { - const [isOpen, toggle] = useToggle(isActive); - - return <Settings isActive={isOpen} setIsActive={toggle} {...args} />; -}; - -/** - * Settings Stories - Inactive - */ -export const Inactive = Template.bind({}); -Inactive.args = { - isActive: false, -}; - -/** - * Settings Stories - Active - */ -export const Active = Template.bind({}); -Active.args = { - isActive: true, -}; diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx deleted file mode 100644 index 6dbed2b..0000000 --- a/src/components/organisms/toolbar/settings.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { Settings } from './settings'; - -const doNothing = () => { - // do nothing -}; - -describe('Settings', () => { - it('renders a button to open settings modal', () => { - render(<Settings isActive={false} setIsActive={doNothing} />); - expect( - rtlScreen.getByRole('checkbox', { name: 'Open settings' }) - ).toBeInTheDocument(); - }); - - it('renders a button to close settings modal', () => { - render(<Settings isActive={true} setIsActive={doNothing} />); - expect( - rtlScreen.getByRole('checkbox', { name: 'Close settings' }) - ).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx deleted file mode 100644 index a0aad8c..0000000 --- a/src/components/organisms/toolbar/settings.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { forwardRef, type ForwardRefRenderFunction } from 'react'; -import { useIntl } from 'react-intl'; -import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms'; -import { FlippingLabel } from '../../molecules'; -import { SettingsModal, type SettingsModalProps } from '../modals'; -import styles from './settings.module.scss'; -import sharedStyles from './toolbar-items.module.scss'; - -export type SettingsProps = SettingsModalProps & { - /** - * The button state. - */ - isActive: BooleanFieldProps['isChecked']; - /** - * A callback function to handle button state. - */ - setIsActive: BooleanFieldProps['onChange']; -}; - -const SettingsWithRef: ForwardRefRenderFunction< - HTMLDivElement, - SettingsProps -> = ({ className = '', isActive = false, setIsActive }, ref) => { - const intl = useIntl(); - const label = isActive - ? intl.formatMessage({ - defaultMessage: 'Close settings', - id: '+viX9b', - description: 'Settings: Close label', - }) - : intl.formatMessage({ - defaultMessage: 'Open settings', - id: 'QCW3cy', - description: 'Settings: Open label', - }); - - return ( - <div className={sharedStyles.item} ref={ref}> - <BooleanField - className={sharedStyles.checkbox} - id="settings-button" - isChecked={isActive} - name="settings-button" - onChange={setIsActive} - type="checkbox" - value="open" - /> - <FlippingLabel - className={sharedStyles.label} - htmlFor="settings-button" - icon={<Icon aria-hidden={true} shape="cog" size="lg" />} - isActive={isActive} - label={label} - /> - <SettingsModal - className={`${sharedStyles.modal} ${styles.modal} ${className}`} - /> - </div> - ); -}; - -export const Settings = forwardRef(SettingsWithRef); diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss deleted file mode 100644 index 540844b..0000000 --- a/src/components/organisms/toolbar/toolbar-items.module.scss +++ /dev/null @@ -1,91 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; -@use "../../../styles/abstracts/placeholders"; - -.item { - --btn-size: #{fun.convert-px(65)}; - - display: flex; - position: relative; - - @include mix.media("screen") { - @include mix.dimensions("sm") { - justify-content: flex-end; - } - - @include mix.dimensions("md") { - justify-content: flex-end; - } - } -} - -.modal { - position: absolute; - top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs))); - transition: all 0.8s ease-in-out 0s, background 0s; - - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - position: fixed; - left: 0; - right: 0; - } - } -} - -.label { - --draw-border-thickness: #{fun.convert-px(4)}; - --draw-border-color1: var(--color-primary-light); - --draw-border-color2: var(--color-primary-lighter); - - @include mix.media("screen") { - @include mix.dimensions("sm") { - border-radius: fun.convert-px(5); - } - } - - &:hover { - @extend %draw-borders; - } - - &:active { - --draw-border-color1: var(--color-primary-dark); - --draw-border-color2: var(--color-primary-light); - - @extend %draw-borders; - } -} - -.checkbox { - position: absolute; - top: calc(var(--btn-size) / 2); - left: calc(var(--btn-size) / 2); - opacity: 0; - cursor: pointer; - - &:hover, - &:focus { - ~ .label { - @extend %draw-borders; - } - } - - &:not(:checked) { - ~ .modal { - opacity: 0; - visibility: hidden; - - @include mix.media("screen") { - @include mix.dimensions(null, "sm") { - transform: translateX(-100vw); - } - - @include mix.dimensions("sm") { - transform: perspective(#{fun.convert-px(400)}) - translate3d(0, 0, #{fun.convert-px(-400)}); - transform-origin: 100% -50%; - } - } - } - } -} diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss deleted file mode 100644 index 6c138a3..0000000 --- a/src/components/organisms/toolbar/toolbar.module.scss +++ /dev/null @@ -1,63 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/variables" as var; -@use "../../../styles/abstracts/placeholders"; - -.wrapper { - --toolbar-size: #{fun.convert-px(75)}; - - display: flex; - flex-flow: row wrap; - align-items: center; - gap: var(--spacing-sm); - width: 100%; - height: var(--toolbar-size); - position: relative; - background: var(--color-bg); - border-top: fun.convert-px(4) solid; - border-image: radial-gradient( - ellipse at top, - var(--color-primary-lighter) 20%, - var(--color-primary) 100% - ) - 1; - box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1) - var(--color-shadow-dark); - - :global { - animation: slide-in-from-bottom 0.8s ease-in-out 0s 1; - - @media screen and (min-width: #{var.get-breakpoint("sm")}) { - animation: slide-in-from-top 0.8s ease-in-out 0s 1; - } - } - - @media screen and (max-width: #{var.get-breakpoint("sm")}) { - justify-content: space-around; - position: fixed; - bottom: 0; - left: 0; - z-index: 5; - - .modal { - width: 100%; - position: fixed; - top: unset; - left: 0; - bottom: calc(var(--toolbar-size) - #{fun.convert-px(4)}); - max-height: calc(100vh - var(--toolbar-size)); - } - } - - @media screen and (max-height: #{var.get-breakpoint("2xs")}) { - --toolbar-size: #{fun.convert-px(70)}; - } - - @media screen and (min-width: #{var.get-breakpoint("sm")}) { - .modal { - &--search, - &--settings { - min-width: fun.convert-px(420); - } - } - } -} diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx deleted file mode 100644 index 19dc135..0000000 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Toolbar as ToolbarComponent } from './toolbar'; - -/** - * Toolbar - Storybook Meta - */ -export default { - title: 'Organisms/Toolbar', - component: ToolbarComponent, - args: { - searchPage: '#', - }, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the toolbar wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - nav: { - description: 'The main nav items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - searchPage: { - control: { - type: 'text', - }, - description: 'The search results page url.', - type: { - name: 'string', - required: true, - }, - }, - }, - parameters: { - layout: 'fullscreen', - }, -} as ComponentMeta<typeof ToolbarComponent>; - -const Template: ComponentStory<typeof ToolbarComponent> = (args) => ( - <ToolbarComponent {...args} /> -); - -const nav = [ - { id: 'home-link', href: '#', label: 'Home' }, - { id: 'blog-link', href: '#', label: 'Blog' }, - { id: 'cv-link', href: '#', label: 'CV' }, - { id: 'contact-link', href: '#', label: 'Contact' }, -]; - -/** - * Toolbar Story - */ -export const Toolbar = Template.bind({}); -Toolbar.args = { - nav, -}; diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx deleted file mode 100644 index 23b13c1..0000000 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '../../../../tests/utils'; -import { Toolbar } from './toolbar'; - -const nav = [ - { id: 'home-link', href: '/', label: 'Home' }, - { id: 'blog-link', href: '/blog', label: 'Blog' }, - { id: 'cv-link', href: '/cv', label: 'CV' }, - { id: 'contact-link', href: '/contact', label: 'Contact' }, -]; - -describe('Toolbar', () => { - it('renders a navigation menu', () => { - render(<Toolbar nav={nav} searchPage="#" />); - expect(rtlScreen.getByRole('navigation')).toBeInTheDocument(); - }); -}); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx deleted file mode 100644 index c0be464..0000000 --- a/src/components/organisms/toolbar/toolbar.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/* eslint-disable max-statements */ -import type { FC } from 'react'; -import { - useBoolean, - useOnClickOutside, - useRouteChange, -} from '../../../utils/hooks'; -import { MainNavItem, type MainNavItemProps } from './main-nav'; -import { Search, type SearchProps } from './search'; -import { Settings } from './settings'; -import styles from './toolbar.module.scss'; - -export type ToolbarProps = Pick<SearchProps, 'searchPage'> & { - /** - * Set additional classnames to the toolbar wrapper. - */ - className?: string; - /** - * The main nav items. - */ - nav: MainNavItemProps['items']; -}; - -/** - * Toolbar component - * - * Render the website toolbar. - */ -export const Toolbar: FC<ToolbarProps> = ({ - className = '', - nav, - searchPage, -}) => { - const { - deactivate: deactivateMainNav, - state: isMainNavOpen, - toggle: toggleMainNav, - } = useBoolean(false); - const { - deactivate: deactivateSearch, - state: isSearchOpen, - toggle: toggleSearch, - } = useBoolean(false); - const { - deactivate: deactivateSettings, - state: isSettingsOpen, - toggle: toggleSettings, - } = useBoolean(false); - - const mainNavRef = useOnClickOutside<HTMLDivElement>( - () => isMainNavOpen && deactivateMainNav() - ); - const searchRef = useOnClickOutside<HTMLDivElement>( - () => isSearchOpen && deactivateSearch() - ); - const settingsRef = useOnClickOutside<HTMLDivElement>( - () => isSettingsOpen && deactivateSettings() - ); - - useRouteChange(deactivateSearch); - - return ( - <div className={`${styles.wrapper} ${className}`}> - <MainNavItem - className={styles.modal} - isActive={isMainNavOpen} - items={nav} - ref={mainNavRef} - setIsActive={toggleMainNav} - /> - <Search - className={`${styles.modal} ${styles['modal--search']}`} - isActive={isSearchOpen} - ref={searchRef} - searchPage={searchPage} - setIsActive={toggleSearch} - /> - <Settings - className={`${styles.modal} ${styles['modal--settings']}`} - isActive={isSettingsOpen} - ref={settingsRef} - setIsActive={toggleSettings} - /> - </div> - ); -}; |