summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/atoms/lists/list.module.scss12
-rw-r--r--src/components/atoms/lists/list.tsx18
-rw-r--r--src/components/molecules/buttons/main-nav-button.module.scss37
-rw-r--r--src/components/molecules/buttons/main-nav-button.stories.tsx80
-rw-r--r--src/components/molecules/buttons/main-nav-button.test.tsx11
-rw-r--r--src/components/molecules/buttons/main-nav-button.tsx75
-rw-r--r--src/components/molecules/nav/nav.tsx13
-rw-r--r--src/components/organisms/toolbar/main-nav.module.scss88
-rw-r--r--src/components/organisms/toolbar/main-nav.stories.tsx75
-rw-r--r--src/components/organisms/toolbar/main-nav.test.tsx33
-rw-r--r--src/components/organisms/toolbar/main-nav.tsx74
-rw-r--r--src/components/organisms/toolbar/toolbar-items.module.scss91
12 files changed, 393 insertions, 214 deletions
diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
index c6fbf53..df3b49c 100644
--- a/src/components/atoms/lists/list.module.scss
+++ b/src/components/atoms/lists/list.module.scss
@@ -9,12 +9,6 @@
margin-top: var(--spacing-2xs);
}
- &__item {
- &:not(:last-child) {
- margin-bottom: var(--spacing-2xs);
- }
- }
-
&--ordered {
padding: 0;
counter-reset: li;
@@ -36,4 +30,10 @@
&--unordered {
padding: 0 0 0 var(--spacing-sm);
}
+
+ &--has-margin &__item {
+ &:not(:last-child) {
+ margin-bottom: var(--spacing-2xs);
+ }
+ }
}
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index 7197c34..74ab8b0 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -29,6 +29,10 @@ export type ListProps = {
* The list kind (ordered or unordered).
*/
kind?: 'ordered' | 'unordered';
+ /**
+ * Set margin between list items. Default: true.
+ */
+ withMargin?: boolean;
};
/**
@@ -36,9 +40,15 @@ export type ListProps = {
*
* Render either an ordered or an unordered list.
*/
-const List: VFC<ListProps> = ({ className, items, kind = 'unordered' }) => {
+const List: VFC<ListProps> = ({
+ className,
+ items,
+ kind = 'unordered',
+ withMargin = true,
+}) => {
const ListTag = kind === 'ordered' ? 'ol' : 'ul';
const kindClass = `list--${kind}`;
+ const marginClass = withMargin ? 'list--has-margin' : 'list--no-margin';
/**
* Retrieve the list items.
@@ -51,7 +61,7 @@ const List: VFC<ListProps> = ({ className, items, kind = 'unordered' }) => {
{value}
{child && (
<ListTag
- className={`${styles.list} ${styles[kindClass]} ${className}`}
+ className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
>
{getItems(child)}
</ListTag>
@@ -61,7 +71,9 @@ const List: VFC<ListProps> = ({ className, items, kind = 'unordered' }) => {
};
return (
- <ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}>
+ <ListTag
+ className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
+ >
{getItems(items)}
</ListTag>
);
diff --git a/src/components/molecules/buttons/main-nav-button.module.scss b/src/components/molecules/buttons/main-nav-button.module.scss
deleted file mode 100644
index bc1ed19..0000000
--- a/src/components/molecules/buttons/main-nav-button.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.checkbox {
- position: absolute;
- top: calc(#{fun.convert-px(50)} / 2);
- left: calc(#{fun.convert-px(50)} / 2);
- opacity: 0;
- cursor: pointer;
-}
-
-.label {
- display: block;
- cursor: pointer;
-
- .icon {
- &__wrapper {
- --icon-size: #{fun.convert-px(50)};
- }
-
- &--active {
- background: transparent;
- border: transparent;
-
- &::before {
- top: 0;
- transform-origin: 50% 50%;
- transform: rotate(-45deg);
- }
-
- &::after {
- bottom: 0;
- transform-origin: 50% 50%;
- transform: rotate(45deg);
- }
- }
- }
-}
diff --git a/src/components/molecules/buttons/main-nav-button.stories.tsx b/src/components/molecules/buttons/main-nav-button.stories.tsx
deleted file mode 100644
index 39e495c..0000000
--- a/src/components/molecules/buttons/main-nav-button.stories.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { IntlProvider } from 'react-intl';
-import MainNavButtonComponent from './main-nav-button';
-
-export default {
- title: 'Molecules/Buttons',
- component: MainNavButtonComponent,
- argTypes: {
- checkboxClassName: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the checkbox.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- isActive: {
- control: {
- type: null,
- },
- description: 'The button state.',
- type: {
- name: 'boolean',
- required: true,
- },
- },
- labelClassName: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the label.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- setIsActive: {
- control: {
- type: null,
- },
- description: 'A callback function to set the button state.',
- type: {
- name: 'function',
- required: true,
- },
- },
- },
-} as ComponentMeta<typeof MainNavButtonComponent>;
-
-const Template: ComponentStory<typeof MainNavButtonComponent> = ({
- isActive,
- setIsActive: _setIsActive,
- ...args
-}) => {
- const [isChecked, setIsChecked] = useState<boolean>(isActive);
-
- return (
- <IntlProvider locale="en">
- <MainNavButtonComponent
- isActive={isChecked}
- setIsActive={setIsChecked}
- {...args}
- />
- </IntlProvider>
- );
-};
-
-export const MainNavButton = Template.bind({});
-MainNavButton.args = {
- isActive: false,
-};
diff --git a/src/components/molecules/buttons/main-nav-button.test.tsx b/src/components/molecules/buttons/main-nav-button.test.tsx
deleted file mode 100644
index e757305..0000000
--- a/src/components/molecules/buttons/main-nav-button.test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { render, screen } from '@test-utils';
-import MainNavButton from './main-nav-button';
-
-describe('MainNavButton', () => {
- it('renders a checkbox', () => {
- render(<MainNavButton isActive={false} setIsActive={() => null} />);
- expect(
- screen.getByRole('checkbox', { name: 'Open menu' })
- ).toBeInTheDocument();
- });
-});
diff --git a/src/components/molecules/buttons/main-nav-button.tsx b/src/components/molecules/buttons/main-nav-button.tsx
deleted file mode 100644
index 59407db..0000000
--- a/src/components/molecules/buttons/main-nav-button.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox';
-import Label from '@components/atoms/forms/label';
-import Hamburger from '@components/atoms/icons/hamburger';
-import { VFC } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './main-nav-button.module.scss';
-
-export type MainNavButtonProps = {
- /**
- * Set additional classnames to the checkbox.
- */
- checkboxClassName?: string;
- /**
- * The button state.
- */
- isActive: CheckboxProps['value'];
- /**
- * Set additional classnames to the label.
- */
- labelClassName?: string;
- /**
- * A callback function to handle button state.
- */
- setIsActive: CheckboxProps['setValue'];
-};
-
-/**
- * MainNavButton component
- *
- * Render a hamburger icon or a close icon depending on state.
- */
-const MainNavButton: VFC<MainNavButtonProps> = ({
- checkboxClassName = '',
- isActive,
- labelClassName = '',
- setIsActive,
-}) => {
- const intl = useIntl();
- const label = isActive
- ? intl.formatMessage({
- defaultMessage: 'Close menu',
- id: 'wT7YZb',
- description: 'MainNavButton: close menu label',
- })
- : intl.formatMessage({
- defaultMessage: 'Open menu',
- id: 'P7j8ZZ',
- description: 'MainNavButton: open menu label',
- });
- const hamburgerModifier = isActive ? 'icon--active' : '';
-
- return (
- <>
- <Checkbox
- id="main-nav-button"
- name="main-nav-button"
- value={isActive}
- setValue={setIsActive}
- className={`${styles.checkbox} ${checkboxClassName}`}
- />
- <Label
- htmlFor="main-nav-button"
- className={`${styles.label} ${labelClassName}`}
- aria-label={label}
- >
- <Hamburger
- className={styles.icon__wrapper}
- iconClassName={styles[hamburgerModifier]}
- />
- </Label>
- </>
- );
-};
-
-export default MainNavButton;
diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx
index 42e3843..6ef9158 100644
--- a/src/components/molecules/nav/nav.tsx
+++ b/src/components/molecules/nav/nav.tsx
@@ -35,6 +35,10 @@ export type NavProps = {
* The navigation kind.
*/
kind: 'main' | 'footer';
+ /**
+ * Set additional classnames to the navigation list.
+ */
+ listClassName?: string;
};
/**
@@ -42,7 +46,12 @@ export type NavProps = {
*
* Render the nav links.
*/
-const Nav: VFC<NavProps> = ({ className = '', items, kind }) => {
+const Nav: VFC<NavProps> = ({
+ className = '',
+ items,
+ kind,
+ listClassName = '',
+}) => {
const kindClass = `nav--${kind}`;
/**
@@ -63,7 +72,7 @@ const Nav: VFC<NavProps> = ({ className = '', items, kind }) => {
return (
<nav className={`${styles[kindClass]} ${className}`}>
- <ul className={styles.nav__list}>{getItems()}</ul>
+ <ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul>
</nav>
);
};
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%;
+ }
+ }
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 23:34:49 +0000