chore: add a MainNav component

5 files changed, 11 insertions, 205 deletions

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>
   );
 };