diff options
Diffstat (limited to 'src/components/organisms')
5 files changed, 361 insertions, 0 deletions
diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss new file mode 100644 index 0000000..2aac85d --- /dev/null +++ b/src/components/organisms/toolbar/main-nav.module.scss @@ -0,0 +1,88 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.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; + } + } +} + +.modal__list { + display: flex; + + @include mix.media("screen") { + @include mix.dimensions("sm", "md") { + flex-flow: column; + } + } +} + +.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; + } + } + } + } +} + +.item { + @include mix.media("screen") { + @include mix.dimensions("md") { + .checkbox, + .label { + display: none; + } + + .modal { + position: relative; + } + } + } +} diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx new file mode 100644 index 0000000..27387c0 --- /dev/null +++ b/src/components/organisms/toolbar/main-nav.stories.tsx @@ -0,0 +1,75 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import { IntlProvider } from 'react-intl'; +import MainNavComponent from './main-nav'; + +export default { + title: 'Organisms/Toolbar', + component: MainNavComponent, + 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.', + type: { + name: 'function', + required: true, + }, + }, + }, +} as ComponentMeta<typeof MainNavComponent>; + +const Template: ComponentStory<typeof MainNavComponent> = ({ + isActive, + setIsActive: _setIsActive, + ...args +}) => { + const [isOpen, setIsOpen] = useState<boolean>(isActive); + + return ( + <IntlProvider locale="en"> + <MainNavComponent isActive={isOpen} setIsActive={setIsOpen} {...args} /> + </IntlProvider> + ); +}; + +export const MainNav = Template.bind({}); +MainNav.args = { + isActive: false, + 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 new file mode 100644 index 0000000..6e50562 --- /dev/null +++ b/src/components/organisms/toolbar/main-nav.test.tsx @@ -0,0 +1,33 @@ +import { render, screen } from '@test-utils'; +import MainNav from './main-nav'; + +const items = [ + { id: 'home', label: 'Home', href: '/' }, + { id: 'blog', label: 'Blog', href: '/blog' }, + { id: 'contact', label: 'Contact', href: '/contact' }, +]; + +describe('MainNav', () => { + it('renders a checkbox to open main nav', () => { + render(<MainNav items={items} isActive={false} setIsActive={() => null} />); + expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open menu'); + }); + + it('renders a checkbox to close main nav', () => { + render(<MainNav items={items} isActive={true} setIsActive={() => null} />); + expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close menu'); + }); + + it('renders the correct number of items', () => { + render(<MainNav items={items} isActive={true} setIsActive={() => null} />); + expect(screen.getAllByRole('listitem')).toHaveLength(items.length); + }); + + it('renders some links with the right label', () => { + render(<MainNav items={items} isActive={true} setIsActive={() => null} />); + expect(screen.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 new file mode 100644 index 0000000..50bbe8b --- /dev/null +++ b/src/components/organisms/toolbar/main-nav.tsx @@ -0,0 +1,74 @@ +import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; +import Label from '@components/atoms/forms/label'; +import Hamburger from '@components/atoms/icons/hamburger'; +import Nav, { type NavItem } from '@components/molecules/nav/nav'; +import { VFC } from 'react'; +import { useIntl } from 'react-intl'; +import sharedStyles from './toolbar-items.module.scss'; +import mainNavStyles from './main-nav.module.scss'; + +export type MainNavProps = { + /** + * Set additional classnames to the nav element. + */ + className?: string; + /** + * The button state. + */ + isActive: CheckboxProps['value']; + /** + * The main nav items. + */ + items: NavItem[]; + /** + * A callback function to handle button state. + */ + setIsActive: CheckboxProps['setValue']; +}; + +const MainNav: VFC<MainNavProps> = ({ + className = '', + isActive, + items, + setIsActive, +}) => { + 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}`}> + <Checkbox + id="main-nav-button" + name="main-nav-button" + value={isActive} + setValue={setIsActive} + className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`} + /> + <Label + htmlFor="main-nav-button" + aria-label={label} + className={`${sharedStyles.label} ${mainNavStyles.label}`} + > + <Hamburger iconClassName={mainNavStyles.icon} /> + </Label> + <Nav + kind="main" + items={items} + className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`} + listClassName={mainNavStyles.modal__list} + /> + </div> + ); +}; + +export default MainNav; diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss new file mode 100644 index 0000000..86ff48e --- /dev/null +++ b/src/components/organisms/toolbar/toolbar-items.module.scss @@ -0,0 +1,91 @@ +@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; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + justify-content: center; + } + } +} + +.modal { + position: absolute; + top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs))); + transition: all 0.8s ease-in-out 0s; + + @include mix.media("screen") { + @include mix.dimensions(null, "sm") { + 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); + + display: flex; + place-content: center; + place-items: center; + width: var(--btn-size); + height: var(--btn-size); + padding: var(--spacing-2xs); + + &:hover, + &:focus { + @extend %draw-borders; + } + + &:focus { + color: var(--color-primary-light); + } + + &: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: 50% -50%; + } + } + } + } +} |