feat(components): add Article, Aside, Footer, Header, Main & Nav

Some components have been renamed to be able to create Footer, Header
and Nav.

7 files changed, 41 insertions, 51 deletions

diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
index 786fca0..5f3b176 100644
--- a/src/components/molecules/layout/page-footer.tsx
+++ b/src/components/molecules/layout/page-footer.tsx
@@ -1,11 +1,8 @@
-import { FC } from 'react';
-import { Meta, MetaData } from './meta';
+import type { FC } from 'react';
+import { Footer, type FooterProps } from '../../atoms';
+import { Meta, type MetaData } from './meta';
 
-export type PageFooterProps = {
-  /**
-   * Set additional classnames to the footer element.
-   */
-  className?: string;
+export type PageFooterProps = Omit<FooterProps, 'children'> & {
   /**
    * The footer metadata.
    */
@@ -15,12 +12,10 @@ export type PageFooterProps = {
 /**
  * PageFooter component
  *
- * Render a footer element to display page meta.
+ * Render a footer to display page meta.
  */
-export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => {
-  return (
-    <footer {...props}>
-      {meta && <Meta data={meta} withSeparator={false} />}
-    </footer>
-  );
-};
+export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => (
+  <Footer {...props}>
+    {meta ? <Meta data={meta} withSeparator={false} /> : null}
+  </Footer>
+);
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 04f2966..92650c5 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { Heading } from '../../atoms';
+import { Header, Heading } from '../../atoms';
 import { Meta, type MetaData } from './meta';
 import styles from './page-header.module.scss';
 
@@ -50,7 +50,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
   };
 
   return (
-    <header className={headerClass}>
+    <Header className={headerClass}>
       <div className={styles.body}>
         <Heading className={styles.title} level={1}>
           {title}
@@ -67,6 +67,6 @@ export const PageHeader: FC<PageHeaderProps> = ({
         ) : null}
         {intro ? getIntro() : null}
       </div>
-    </header>
+    </Header>
   );
 };
diff --git a/src/components/molecules/nav/index.ts b/src/components/molecules/nav/index.ts
index 68efe4e..9c46050 100644
--- a/src/components/molecules/nav/index.ts
+++ b/src/components/molecules/nav/index.ts
@@ -1,3 +1,3 @@
 export * from './breadcrumb';
-export * from './nav';
+export * from './nav-list';
 export * from './pagination';
diff --git a/src/components/molecules/nav/nav.module.scss b/src/components/molecules/nav/nav-list.module.scss
index a6d43bc..a6d43bc 100644
--- a/src/components/molecules/nav/nav.module.scss
+++ b/src/components/molecules/nav/nav-list.module.scss
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav-list.stories.tsx
index d343528..110a6ca 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav-list.stories.tsx
@@ -1,13 +1,13 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Envelop, Home } from '../../atoms';
-import { Nav, type NavItem } from './nav';
+import { NavList, type NavItem } from './nav-list';
 
 /**
  * Nav - Storybook Meta
  */
 export default {
   title: 'Molecules/Navigation/Nav',
-  component: Nav,
+  component: NavList,
   argTypes: {
     'aria-label': {
       control: {
@@ -71,9 +71,11 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Nav>;
+} as ComponentMeta<typeof NavList>;
 
-const Template: ComponentStory<typeof Nav> = (args) => <Nav {...args} />;
+const Template: ComponentStory<typeof NavList> = (args) => (
+  <NavList {...args} />
+);
 
 const MainNavItems: NavItem[] = [
   { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
diff --git a/src/components/molecules/nav/nav.test.tsx b/src/components/molecules/nav/nav-list.test.tsx
index 2a6dc84..58437cb 100644
--- a/src/components/molecules/nav/nav.test.tsx
+++ b/src/components/molecules/nav/nav-list.test.tsx
@@ -1,7 +1,7 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
 import { Envelop, Home } from '../../atoms';
-import { Nav, type NavItem } from './nav';
+import { NavList, type NavItem } from './nav-list';
 
 const navItems: NavItem[] = [
   { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
@@ -10,19 +10,19 @@ const navItems: NavItem[] = [
 
 describe('Nav', () => {
   it('renders a main navigation', () => {
-    render(<Nav kind="main" items={navItems} />);
-    expect(screen.getByRole('navigation')).toHaveClass('nav--main');
+    render(<NavList kind="main" items={navItems} />);
+    expect(rtlScreen.getByRole('navigation')).toHaveClass('nav--main');
   });
 
   it('renders a footer navigation', () => {
-    render(<Nav kind="footer" items={navItems} />);
-    expect(screen.getByRole('navigation')).toHaveClass('nav--footer');
+    render(<NavList kind="footer" items={navItems} />);
+    expect(rtlScreen.getByRole('navigation')).toHaveClass('nav--footer');
   });
 
   it('renders navigation links', () => {
-    render(<Nav kind="main" items={navItems} />);
+    render(<NavList kind="main" items={navItems} />);
     expect(
-      screen.getByRole('link', { name: navItems[0].label })
+      rtlScreen.getByRole('link', { name: navItems[0].label })
     ).toHaveAttribute('href', navItems[0].href);
   });
 });
diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav-list.tsx
index 8214d94..59556ce 100644
--- a/src/components/molecules/nav/nav.tsx
+++ b/src/components/molecules/nav/nav-list.tsx
@@ -1,6 +1,6 @@
-import { FC, ReactNode } from 'react';
-import { Link, NavLink } from '../../atoms';
-import styles from './nav.module.scss';
+import type { FC, ReactNode } from 'react';
+import { Link, Nav, NavLink, type NavProps } from '../../atoms';
+import styles from './nav-list.module.scss';
 
 export type NavItem = {
   /**
@@ -21,15 +21,7 @@ export type NavItem = {
   logo?: ReactNode;
 };
 
-export type NavProps = {
-  /**
-   * An accessible name.
-   */
-  'aria-label'?: string;
-  /**
-   * Set additional classnames to the navigation wrapper.
-   */
-  className?: string;
+export type NavListProps = Omit<NavProps, 'children'> & {
   /**
    * The navigation items.
    */
@@ -49,7 +41,7 @@ export type NavProps = {
  *
  * Render the nav links.
  */
-export const Nav: FC<NavProps> = ({
+export const NavList: FC<NavListProps> = ({
   className = '',
   items,
   kind,
@@ -57,13 +49,15 @@ export const Nav: FC<NavProps> = ({
   ...props
 }) => {
   const kindClass = `nav--${kind}`;
+  const navClass = `${styles[kindClass]} ${className}`;
+  const listClass = `${styles.nav__list} ${listClassName}`;
 
   /**
    * Get the nav items.
    * @returns {JSX.Element[]} An array of nav items.
    */
-  const getItems = (): JSX.Element[] => {
-    return items.map(({ id, href, label, logo }) => (
+  const getItems = (): JSX.Element[] =>
+    items.map(({ id, href, label, logo }) => (
       <li key={id} className={styles.nav__item}>
         {kind === 'main' ? (
           <NavLink href={href} label={label} logo={logo} />
@@ -72,11 +66,10 @@ export const Nav: FC<NavProps> = ({
         )}
       </li>
     ));
-  };
 
   return (
-    <nav {...props} className={`${styles[kindClass]} ${className}`}>
-      <ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul>
-    </nav>
+    <Nav {...props} className={navClass}>
+      <ul className={listClass}>{getItems()}</ul>
+    </Nav>
   );
 };