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

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

11 files changed, 91 insertions, 86 deletions

diff --git a/src/components/organisms/layout/footer.test.tsx b/src/components/organisms/layout/footer.test.tsx
deleted file mode 100644
index 51f21fb..0000000
--- a/src/components/organisms/layout/footer.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Footer, type FooterProps } from './footer';
-
-const copyright: FooterProps['copyright'] = {
-  dates: { start: '2017', end: '2022' },
-  owner: 'Lorem ipsum',
-  icon: 'CC',
-};
-
-const navItems: FooterProps['navItems'] = [
-  { id: 'legal-notice', href: '#', label: 'Legal notice' },
-];
-
-describe('Footer', () => {
-  it('renders the website copyright', () => {
-    render(<Footer copyright={copyright} topId="top" />);
-    expect(screen.getByText(copyright.owner)).toBeInTheDocument();
-  });
-
-  it('renders a back to top link', () => {
-    render(<Footer copyright={copyright} topId="top" />);
-    expect(
-      screen.getByRole('link', { name: 'Back to top' })
-    ).toBeInTheDocument();
-  });
-
-  it('renders some nav items', () => {
-    render(<Footer copyright={copyright} navItems={navItems} topId="top" />);
-    expect(
-      screen.getByRole('link', { name: navItems[0].label })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts
index 35061cb..1351537 100644
--- a/src/components/organisms/layout/index.ts
+++ b/src/components/organisms/layout/index.ts
@@ -1,9 +1,9 @@
 export * from './cards-list';
 export * from './comment';
 export * from './comments-list';
-export * from './footer';
-export * from './header';
 export * from './no-results';
 export * from './overview';
 export * from './posts-list';
+export * from './site-footer';
+export * from './site-header';
 export * from './summary';
diff --git a/src/components/organisms/layout/footer.module.scss b/src/components/organisms/layout/site-footer.module.scss
index a8bcd61..a8bcd61 100644
--- a/src/components/organisms/layout/footer.module.scss
+++ b/src/components/organisms/layout/site-footer.module.scss
diff --git a/src/components/organisms/layout/footer.stories.tsx b/src/components/organisms/layout/site-footer.stories.tsx
index b5097dd..59a378f 100644
--- a/src/components/organisms/layout/footer.stories.tsx
+++ b/src/components/organisms/layout/site-footer.stories.tsx
@@ -1,12 +1,12 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Footer as FooterComponent } from './footer';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { SiteFooter as SiteFooterComponent } from './site-footer';
 
 /**
- * Footer - Storybook Meta
+ * SiteFooter - Storybook Meta
  */
 export default {
   title: 'Organisms/Layout',
-  component: FooterComponent,
+  component: SiteFooterComponent,
   argTypes: {
     backToTopClassName: {
       control: {
@@ -65,10 +65,10 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof FooterComponent>;
+} as ComponentMeta<typeof SiteFooterComponent>;
 
-const Template: ComponentStory<typeof FooterComponent> = (args) => (
-  <FooterComponent {...args} />
+const Template: ComponentStory<typeof SiteFooterComponent> = (args) => (
+  <SiteFooterComponent {...args} />
 );
 
 const copyright = {
@@ -80,10 +80,10 @@ const copyright = {
 const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }];
 
 /**
- * Layout Stories - Footer
+ * Layout Stories - SiteFooter
  */
-export const Footer = Template.bind({});
-Footer.args = {
+export const SiteFooter = Template.bind({});
+SiteFooter.args = {
   copyright,
   navItems,
   topId: 'top',
diff --git a/src/components/organisms/layout/site-footer.test.tsx b/src/components/organisms/layout/site-footer.test.tsx
new file mode 100644
index 0000000..ffdeb7a
--- /dev/null
+++ b/src/components/organisms/layout/site-footer.test.tsx
@@ -0,0 +1,36 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { SiteFooter, type SiteFooterProps } from './site-footer';
+
+const copyright: SiteFooterProps['copyright'] = {
+  dates: { start: '2017', end: '2022' },
+  owner: 'Lorem ipsum',
+  icon: 'CC',
+};
+
+const navItems: SiteFooterProps['navItems'] = [
+  { id: 'legal-notice', href: '#', label: 'Legal notice' },
+];
+
+describe('SiteFooter', () => {
+  it('renders the website copyright', () => {
+    render(<SiteFooter copyright={copyright} topId="top" />);
+    expect(rtlScreen.getByText(copyright.owner)).toBeInTheDocument();
+  });
+
+  it('renders a back to top link', () => {
+    render(<SiteFooter copyright={copyright} topId="top" />);
+    expect(
+      rtlScreen.getByRole('link', { name: 'Back to top' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders some nav items', () => {
+    render(
+      <SiteFooter copyright={copyright} navItems={navItems} topId="top" />
+    );
+    expect(
+      rtlScreen.getByRole('link', { name: navItems[0].label })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/site-footer.tsx
index 36e85a7..c1fe9d0 100644
--- a/src/components/organisms/layout/footer.tsx
+++ b/src/components/organisms/layout/site-footer.tsx
@@ -1,15 +1,15 @@
 import type { FC } from 'react';
 import { useIntl } from 'react-intl';
-import { Copyright, type CopyrightProps } from '../../atoms';
+import { Copyright, Footer, type CopyrightProps } from '../../atoms';
 import {
   BackToTop,
   type BackToTopProps,
-  Nav,
+  NavList,
   type NavItem,
 } from '../../molecules';
-import styles from './footer.module.scss';
+import styles from './site-footer.module.scss';
 
-export type FooterProps = {
+export type SiteFooterProps = {
   /**
    * Set additional classnames to the back to top button.
    */
@@ -33,11 +33,11 @@ export type FooterProps = {
 };
 
 /**
- * Footer component
+ * SiteFooter component
  *
  * Renders a footer with copyright and nav;
  */
-export const Footer: FC<FooterProps> = ({
+export const SiteFooter: FC<SiteFooterProps> = ({
   backToTopClassName,
   className = '',
   copyright,
@@ -47,29 +47,29 @@ export const Footer: FC<FooterProps> = ({
   const intl = useIntl();
   const ariaLabel = intl.formatMessage({
     defaultMessage: 'Footer',
-    description: 'Footer: an accessible name for footer nav',
-    id: 'd4N8nD',
+    description: 'SiteFooter: an accessible name for the footer nav',
+    id: 'pRzkFR',
   });
   const footerClass = `${styles.wrapper} ${className}`;
   const btnClass = `${styles['back-to-top']} ${backToTopClassName}`;
 
   return (
-    <footer className={footerClass}>
+    <Footer className={footerClass}>
       <Copyright
         dates={copyright.dates}
         icon={copyright.icon}
         owner={copyright.owner}
       />
       {navItems ? (
-        <Nav
+        <NavList
           aria-label={ariaLabel}
           className={styles.nav}
           items={navItems}
-          // eslint-disable-next-line react/jsx-no-literals -- Hardcoded config
+          // eslint-disable-next-line react/jsx-no-literals -- Kind allowed
           kind="footer"
         />
       ) : null}
       <BackToTop className={btnClass} to={topId} />
-    </footer>
+    </Footer>
   );
 };
diff --git a/src/components/organisms/layout/header.module.scss b/src/components/organisms/layout/site-header.module.scss
index 573d455..573d455 100644
--- a/src/components/organisms/layout/header.module.scss
+++ b/src/components/organisms/layout/site-header.module.scss
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/site-header.stories.tsx
index 31fb0ca..56f1689 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/site-header.stories.tsx
@@ -1,12 +1,12 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Header as HeaderComponent } from './header';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { SiteHeader as SiteHeaderComponent } from './site-header';
 
 /**
- * Header - Storybook Meta
+ * SiteHeader - Storybook Meta
  */
 export default {
   title: 'Organisms/Layout',
-  component: HeaderComponent,
+  component: SiteHeaderComponent,
   args: {
     ackeeStorageKey: 'ackee-tracking',
     isHome: false,
@@ -129,10 +129,10 @@ export default {
   parameters: {
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof HeaderComponent>;
+} as ComponentMeta<typeof SiteHeaderComponent>;
 
-const Template: ComponentStory<typeof HeaderComponent> = (args) => (
-  <HeaderComponent {...args} />
+const Template: ComponentStory<typeof SiteHeaderComponent> = (args) => (
+  <SiteHeaderComponent {...args} />
 );
 
 const nav = [
@@ -143,10 +143,10 @@ const nav = [
 ];
 
 /**
- * Layout Stories - Header
+ * Layout Stories - SiteHeader
  */
-export const Header = Template.bind({});
-Header.args = {
+export const SiteHeader = Template.bind({});
+SiteHeader.args = {
   nav,
   photo: 'http://placeimg.com/640/480/people',
   title: 'Website title',
diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/site-header.test.tsx
index 7f72f24..e75f99f 100644
--- a/src/components/organisms/layout/header.test.tsx
+++ b/src/components/organisms/layout/site-header.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Header } from './header';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { SiteHeader } from './site-header';
 
 const nav = [
   { id: 'home-link', href: '#', label: 'Home' },
@@ -13,10 +13,10 @@ const photo = 'http://placeimg.com/640/480/nightlife';
 
 const title = 'Assumenda quis quod';
 
-describe('Header', () => {
+describe('SiteHeader', () => {
   it('renders the website title', () => {
     render(
-      <Header
+      <SiteHeader
         ackeeStorageKey="ackee-tracking"
         isHome={true}
         motionStorageKey="reduced-motion"
@@ -27,13 +27,13 @@ describe('Header', () => {
       />
     );
     expect(
-      screen.getByRole('heading', { level: 1, name: title })
+      rtlScreen.getByRole('heading', { level: 1, name: title })
     ).toBeInTheDocument();
   });
 
   it('renders the main nav', () => {
     render(
-      <Header
+      <SiteHeader
         ackeeStorageKey="ackee-tracking"
         motionStorageKey="reduced-motion"
         nav={nav}
@@ -42,6 +42,6 @@ describe('Header', () => {
         title={title}
       />
     );
-    expect(screen.getByRole('navigation')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('navigation')).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/site-header.tsx
index d2f7620..e8953c0 100644
--- a/src/components/organisms/layout/header.tsx
+++ b/src/components/organisms/layout/site-header.tsx
@@ -1,9 +1,10 @@
-import { FC } from 'react';
+import type { FC } from 'react';
+import { Header } from '../../atoms';
 import { Branding, type BrandingProps } from '../../molecules';
 import { Toolbar, type ToolbarProps } from '../toolbar';
-import styles from './header.module.scss';
+import styles from './site-header.module.scss';
 
-export type HeaderProps = BrandingProps &
+export type SiteHeaderProps = BrandingProps &
   Pick<
     ToolbarProps,
     'ackeeStorageKey' | 'motionStorageKey' | 'nav' | 'searchPage'
@@ -15,11 +16,11 @@ export type HeaderProps = BrandingProps &
   };
 
 /**
- * Header component
+ * SiteHeader component
  *
  * Render the website header.
  */
-export const Header: FC<HeaderProps> = ({
+export const SiteHeader: FC<SiteHeaderProps> = ({
   ackeeStorageKey,
   className,
   motionStorageKey,
@@ -27,8 +28,10 @@ export const Header: FC<HeaderProps> = ({
   searchPage,
   ...props
 }) => {
+  const headerClass = `${styles.wrapper} ${className}`;
+
   return (
-    <header className={`${styles.wrapper} ${className}`}>
+    <Header className={headerClass}>
       <div className={styles.body}>
         <Branding {...props} />
         <Toolbar
@@ -39,6 +42,6 @@ export const Header: FC<HeaderProps> = ({
           searchPage={searchPage}
         />
       </div>
-    </header>
+    </Header>
   );
 };
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 4182b4c..6933c44 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ForwardRefRenderFunction } from 'react';
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import {
   BooleanField,
@@ -6,7 +6,7 @@ import {
   Hamburger,
   Label,
 } from '../../atoms';
-import { Nav, type NavProps, type NavItem } from '../../molecules';
+import { NavList, type NavListProps, type NavItem } from '../../molecules';
 import mainNavStyles from './main-nav.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
@@ -14,7 +14,7 @@ export type MainNavProps = {
   /**
    * Set additional classnames to the nav element.
    */
-  className?: NavProps['className'];
+  className?: NavListProps['className'];
   /**
    * The button state.
    */
@@ -64,7 +64,7 @@ const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
       >
         <Hamburger iconClassName={mainNavStyles.icon} />
       </Label>
-      <Nav
+      <NavList
         className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`}
         items={items}
         kind="main"