From 15fd9f4a6ecf947c7648c6b7865b97c40124fde1 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 14 Apr 2022 19:12:54 +0200
Subject: chore: add a MainNav component

---
 src/components/atoms/lists/list.module.scss        | 12 +--
 src/components/atoms/lists/list.tsx                | 18 ++++-
 .../molecules/buttons/main-nav-button.module.scss  | 37 ---------
 .../molecules/buttons/main-nav-button.stories.tsx  | 80 -------------------
 .../molecules/buttons/main-nav-button.test.tsx     | 11 ---
 .../molecules/buttons/main-nav-button.tsx          | 75 ------------------
 src/components/molecules/nav/nav.tsx               | 13 +++-
 .../organisms/toolbar/main-nav.module.scss         | 88 +++++++++++++++++++++
 .../organisms/toolbar/main-nav.stories.tsx         | 75 ++++++++++++++++++
 src/components/organisms/toolbar/main-nav.test.tsx | 33 ++++++++
 src/components/organisms/toolbar/main-nav.tsx      | 74 ++++++++++++++++++
 .../organisms/toolbar/toolbar-items.module.scss    | 91 ++++++++++++++++++++++
 12 files changed, 393 insertions(+), 214 deletions(-)
 delete mode 100644 src/components/molecules/buttons/main-nav-button.module.scss
 delete mode 100644 src/components/molecules/buttons/main-nav-button.stories.tsx
 delete mode 100644 src/components/molecules/buttons/main-nav-button.test.tsx
 delete mode 100644 src/components/molecules/buttons/main-nav-button.tsx
 create mode 100644 src/components/organisms/toolbar/main-nav.module.scss
 create mode 100644 src/components/organisms/toolbar/main-nav.stories.tsx
 create mode 100644 src/components/organisms/toolbar/main-nav.test.tsx
 create mode 100644 src/components/organisms/toolbar/main-nav.tsx
 create mode 100644 src/components/organisms/toolbar/toolbar-items.module.scss

(limited to 'src')

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%;
+        }
+      }
+    }
+  }
+}
-- 
cgit v1.2.3