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

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

31 files changed, 404 insertions, 143 deletions

diff --git a/src/components/atoms/layout/article/article.stories.tsx b/src/components/atoms/layout/article/article.stories.tsx
new file mode 100644
index 0000000..4c5b158
--- /dev/null
+++ b/src/components/atoms/layout/article/article.stories.tsx
@@ -0,0 +1,34 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Article as ArticleComponent } from './article';
+
+/**
+ * Article - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Layout',
+  component: ArticleComponent,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The contents.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof ArticleComponent>;
+
+const Template: ComponentStory<typeof ArticleComponent> = (args) => (
+  <ArticleComponent {...args} />
+);
+
+/**
+ * Layout Stories - Article
+ */
+export const Article = Template.bind({});
+Article.args = {
+  children: 'The article content.',
+};
diff --git a/src/components/atoms/layout/article/article.test.tsx b/src/components/atoms/layout/article/article.test.tsx
new file mode 100644
index 0000000..2412fe3
--- /dev/null
+++ b/src/components/atoms/layout/article/article.test.tsx
@@ -0,0 +1,13 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Article } from './article';
+
+describe('Article', () => {
+  it('renders the contents of an article', () => {
+    const children = 'The article content.';
+
+    render(<Article>{children}</Article>);
+
+    expect(rtlScreen.getByRole('article')).toHaveTextContent(children);
+  });
+});
diff --git a/src/components/atoms/layout/article/article.tsx b/src/components/atoms/layout/article/article.tsx
new file mode 100644
index 0000000..8611e20
--- /dev/null
+++ b/src/components/atoms/layout/article/article.tsx
@@ -0,0 +1,23 @@
+import {
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+
+export type ArticleProps = HTMLAttributes<HTMLElement> & {
+  /**
+   * The article contents.
+   */
+  children: ReactNode;
+};
+
+const ArticleWithRef: ForwardRefRenderFunction<HTMLElement, ArticleProps> = (
+  props,
+  ref
+) => <article {...props} ref={ref} />;
+
+/**
+ * Article component.
+ */
+export const Article = forwardRef(ArticleWithRef);
diff --git a/src/components/atoms/layout/article/index.ts b/src/components/atoms/layout/article/index.ts
new file mode 100644
index 0000000..a8e7c14
--- /dev/null
+++ b/src/components/atoms/layout/article/index.ts
@@ -0,0 +1 @@
+export * from './article';
diff --git a/src/components/atoms/layout/aside/aside.stories.tsx b/src/components/atoms/layout/aside/aside.stories.tsx
new file mode 100644
index 0000000..a394d1b
--- /dev/null
+++ b/src/components/atoms/layout/aside/aside.stories.tsx
@@ -0,0 +1,34 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Aside as AsideComponent } from './aside';
+
+/**
+ * Aside - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Layout',
+  component: AsideComponent,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The contents.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof AsideComponent>;
+
+const Template: ComponentStory<typeof AsideComponent> = (args) => (
+  <AsideComponent {...args} />
+);
+
+/**
+ * Layout Stories - Aside
+ */
+export const Aside = Template.bind({});
+Aside.args = {
+  children: 'The aside content.',
+};
diff --git a/src/components/atoms/layout/aside/aside.test.tsx b/src/components/atoms/layout/aside/aside.test.tsx
new file mode 100644
index 0000000..5c55589
--- /dev/null
+++ b/src/components/atoms/layout/aside/aside.test.tsx
@@ -0,0 +1,13 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Aside } from './aside';
+
+describe('Aside', () => {
+  it('renders the contents of an aside', () => {
+    const children = 'The aside content.';
+
+    render(<Aside>{children}</Aside>);
+
+    expect(rtlScreen.getByRole('complementary')).toHaveTextContent(children);
+  });
+});
diff --git a/src/components/atoms/layout/aside/aside.tsx b/src/components/atoms/layout/aside/aside.tsx
new file mode 100644
index 0000000..92a9bf2
--- /dev/null
+++ b/src/components/atoms/layout/aside/aside.tsx
@@ -0,0 +1,23 @@
+import {
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+
+export type AsideProps = HTMLAttributes<HTMLElement> & {
+  /**
+   * The aside contents.
+   */
+  children: ReactNode;
+};
+
+const AsideWithRef: ForwardRefRenderFunction<HTMLElement, AsideProps> = (
+  props,
+  ref
+) => <aside {...props} ref={ref} />;
+
+/**
+ * Aside component.
+ */
+export const Aside = forwardRef(AsideWithRef);
diff --git a/src/components/atoms/layout/aside/index.ts b/src/components/atoms/layout/aside/index.ts
new file mode 100644
index 0000000..dc3bc0b
--- /dev/null
+++ b/src/components/atoms/layout/aside/index.ts
@@ -0,0 +1 @@
+export * from './aside';
diff --git a/src/components/atoms/layout/footer/footer.stories.tsx b/src/components/atoms/layout/footer/footer.stories.tsx
new file mode 100644
index 0000000..0df1647
--- /dev/null
+++ b/src/components/atoms/layout/footer/footer.stories.tsx
@@ -0,0 +1,34 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Footer as FooterComponent } from './footer';
+
+/**
+ * Footer - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Layout',
+  component: FooterComponent,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The contents.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof FooterComponent>;
+
+const Template: ComponentStory<typeof FooterComponent> = (args) => (
+  <FooterComponent {...args} />
+);
+
+/**
+ * Layout Stories - Footer
+ */
+export const Footer = Template.bind({});
+Footer.args = {
+  children: 'The footer content.',
+};
diff --git a/src/components/atoms/layout/footer/footer.test.tsx b/src/components/atoms/layout/footer/footer.test.tsx
new file mode 100644
index 0000000..15c6e6d
--- /dev/null
+++ b/src/components/atoms/layout/footer/footer.test.tsx
@@ -0,0 +1,13 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Footer } from './footer';
+
+describe('Footer', () => {
+  it('renders the contents of a footer', () => {
+    const children = 'The footer content.';
+
+    render(<Footer>{children}</Footer>);
+
+    expect(rtlScreen.getByRole('contentinfo')).toHaveTextContent(children);
+  });
+});
diff --git a/src/components/atoms/layout/footer/footer.tsx b/src/components/atoms/layout/footer/footer.tsx
new file mode 100644
index 0000000..deb3956
--- /dev/null
+++ b/src/components/atoms/layout/footer/footer.tsx
@@ -0,0 +1,23 @@
+import {
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+
+export type FooterProps = HTMLAttributes<HTMLElement> & {
+  /**
+   * The footer contents.
+   */
+  children: ReactNode;
+};
+
+const FooterWithRef: ForwardRefRenderFunction<HTMLElement, FooterProps> = (
+  props,
+  ref
+) => <footer {...props} ref={ref} />;
+
+/**
+ * Footer component.
+ */
+export const Footer = forwardRef(FooterWithRef);
diff --git a/src/components/atoms/layout/footer/index.ts b/src/components/atoms/layout/footer/index.ts
new file mode 100644
index 0000000..a058eae
--- /dev/null
+++ b/src/components/atoms/layout/footer/index.ts
@@ -0,0 +1 @@
+export * from './footer';
diff --git a/src/components/atoms/layout/header/header.stories.tsx b/src/components/atoms/layout/header/header.stories.tsx
new file mode 100644
index 0000000..3d98263
--- /dev/null
+++ b/src/components/atoms/layout/header/header.stories.tsx
@@ -0,0 +1,34 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Header as HeaderComponent } from './header';
+
+/**
+ * Header - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Layout',
+  component: HeaderComponent,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The contents.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof HeaderComponent>;
+
+const Template: ComponentStory<typeof HeaderComponent> = (args) => (
+  <HeaderComponent {...args} />
+);
+
+/**
+ * Layout Stories - Header
+ */
+export const Header = Template.bind({});
+Header.args = {
+  children: 'The header content.',
+};
diff --git a/src/components/atoms/layout/header/header.test.tsx b/src/components/atoms/layout/header/header.test.tsx
new file mode 100644
index 0000000..412073f
--- /dev/null
+++ b/src/components/atoms/layout/header/header.test.tsx
@@ -0,0 +1,13 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Header } from './header';
+
+describe('Header', () => {
+  it('renders the contents of a header', () => {
+    const children = 'The header content.';
+
+    render(<Header>{children}</Header>);
+
+    expect(rtlScreen.getByRole('banner')).toHaveTextContent(children);
+  });
+});
diff --git a/src/components/atoms/layout/header/header.tsx b/src/components/atoms/layout/header/header.tsx
new file mode 100644
index 0000000..e4837a6
--- /dev/null
+++ b/src/components/atoms/layout/header/header.tsx
@@ -0,0 +1,23 @@
+import {
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+
+export type HeaderProps = HTMLAttributes<HTMLElement> & {
+  /**
+   * The header contents.
+   */
+  children: ReactNode;
+};
+
+const HeaderWithRef: ForwardRefRenderFunction<HTMLElement, HeaderProps> = (
+  props,
+  ref
+) => <header {...props} ref={ref} />;
+
+/**
+ * Header component.
+ */
+export const Header = forwardRef(HeaderWithRef);
diff --git a/src/components/atoms/layout/header/index.ts b/src/components/atoms/layout/header/index.ts
new file mode 100644
index 0000000..677ca79
--- /dev/null
+++ b/src/components/atoms/layout/header/index.ts
@@ -0,0 +1 @@
+export * from './header';
diff --git a/src/components/atoms/layout/index.ts b/src/components/atoms/layout/index.ts
index 8cbc597..c53671a 100644
--- a/src/components/atoms/layout/index.ts
+++ b/src/components/atoms/layout/index.ts
@@ -1,7 +1,11 @@
+export * from './article';
+export * from './aside';
 export * from './column';
 export * from './copyright';
+export * from './footer';
+export * from './header';
 export * from './main';
+export * from './nav';
 export * from './no-script';
 export * from './notice';
 export * from './section';
-export * from './sidebar';
diff --git a/src/components/atoms/layout/main.test.tsx b/src/components/atoms/layout/main.test.tsx
deleted file mode 100644
index 58dc660..0000000
--- a/src/components/atoms/layout/main.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Main } from './main';
-
-const id = 'main';
-const children = 'The main content.';
-
-describe('Main', () => {
-  it('renders the content of main element', () => {
-    render(<Main id={id}>{children}</Main>);
-    expect(screen.getByRole('main')).toHaveTextContent(children);
-  });
-});
diff --git a/src/components/atoms/layout/main.tsx b/src/components/atoms/layout/main.tsx
deleted file mode 100644
index 919b25a..0000000
--- a/src/components/atoms/layout/main.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
-
-export type MainProps = HTMLAttributes<HTMLElement> & {
-  /**
-   * The main body.
-   */
-  children: ReactNode;
-};
-
-/**
- * Main component
- *
- * Render a main element.
- */
-export const Main: FC<MainProps> = ({ children, ...props }) => {
-  return <main {...props}>{children}</main>;
-};
diff --git a/src/components/atoms/layout/main/index.ts b/src/components/atoms/layout/main/index.ts
new file mode 100644
index 0000000..aad1ca8
--- /dev/null
+++ b/src/components/atoms/layout/main/index.ts
@@ -0,0 +1 @@
+export * from './main';
diff --git a/src/components/atoms/layout/main.stories.tsx b/src/components/atoms/layout/main/main.stories.tsx
index ef4d728..6a22ed5 100644
--- a/src/components/atoms/layout/main.stories.tsx
+++ b/src/components/atoms/layout/main/main.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Main as MainComponent } from './main';
 
 /**
@@ -54,5 +54,4 @@ const Template: ComponentStory<typeof MainComponent> = (args) => (
 export const Main = Template.bind({});
 Main.args = {
   children: 'The main content.',
-  id: '#main',
 };
diff --git a/src/components/atoms/layout/main/main.test.tsx b/src/components/atoms/layout/main/main.test.tsx
new file mode 100644
index 0000000..ffd4e2d
--- /dev/null
+++ b/src/components/atoms/layout/main/main.test.tsx
@@ -0,0 +1,13 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Main } from './main';
+
+describe('Main', () => {
+  it('renders the contents of the main element', () => {
+    const children = 'The main content.';
+
+    render(<Main>{children}</Main>);
+
+    expect(rtlScreen.getByRole('main')).toHaveTextContent(children);
+  });
+});
diff --git a/src/components/atoms/layout/main/main.tsx b/src/components/atoms/layout/main/main.tsx
new file mode 100644
index 0000000..5854900
--- /dev/null
+++ b/src/components/atoms/layout/main/main.tsx
@@ -0,0 +1,29 @@
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type ReactNode,
+  type ForwardRefRenderFunction,
+} from 'react';
+
+export type MainProps = HTMLAttributes<HTMLElement> & {
+  /**
+   * The main body.
+   */
+  children: ReactNode;
+};
+
+const MainWithRef: ForwardRefRenderFunction<HTMLElement, MainProps> = (
+  { children, ...props },
+  ref
+) => (
+  <main {...props} ref={ref}>
+    {children}
+  </main>
+);
+
+/**
+ * Main component
+ *
+ * Render a main element.
+ */
+export const Main = forwardRef(MainWithRef);
diff --git a/src/components/atoms/layout/nav/index.ts b/src/components/atoms/layout/nav/index.ts
new file mode 100644
index 0000000..38d6745
--- /dev/null
+++ b/src/components/atoms/layout/nav/index.ts
@@ -0,0 +1 @@
+export * from './nav';
diff --git a/src/components/atoms/layout/nav/nav.stories.tsx b/src/components/atoms/layout/nav/nav.stories.tsx
new file mode 100644
index 0000000..5649abf
--- /dev/null
+++ b/src/components/atoms/layout/nav/nav.stories.tsx
@@ -0,0 +1,34 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Nav as NavComponent } from './nav';
+
+/**
+ * Nav - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Layout',
+  component: NavComponent,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The contents.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof NavComponent>;
+
+const Template: ComponentStory<typeof NavComponent> = (args) => (
+  <NavComponent {...args} />
+);
+
+/**
+ * Layout Stories - Nav
+ */
+export const Nav = Template.bind({});
+Nav.args = {
+  children: 'The nav content.',
+};
diff --git a/src/components/atoms/layout/nav/nav.test.tsx b/src/components/atoms/layout/nav/nav.test.tsx
new file mode 100644
index 0000000..4d8c942
--- /dev/null
+++ b/src/components/atoms/layout/nav/nav.test.tsx
@@ -0,0 +1,13 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Nav } from './nav';
+
+describe('Nav', () => {
+  it('renders the contents of a nav', () => {
+    const children = 'The nav content.';
+
+    render(<Nav>{children}</Nav>);
+
+    expect(rtlScreen.getByRole('navigation')).toHaveTextContent(children);
+  });
+});
diff --git a/src/components/atoms/layout/nav/nav.tsx b/src/components/atoms/layout/nav/nav.tsx
new file mode 100644
index 0000000..38969de
--- /dev/null
+++ b/src/components/atoms/layout/nav/nav.tsx
@@ -0,0 +1,23 @@
+import {
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+
+export type NavProps = HTMLAttributes<HTMLElement> & {
+  /**
+   * The nav contents.
+   */
+  children: ReactNode;
+};
+
+const NavWithRef: ForwardRefRenderFunction<HTMLElement, NavProps> = (
+  props,
+  ref
+) => <nav {...props} ref={ref} />;
+
+/**
+ * Nav component.
+ */
+export const Nav = forwardRef(NavWithRef);
diff --git a/src/components/atoms/layout/sidebar.module.scss b/src/components/atoms/layout/sidebar.module.scss
deleted file mode 100644
index 31adb6f..0000000
--- a/src/components/atoms/layout/sidebar.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.wrapper {
-  > *:not(:first-child) {
-    margin-top: fun.convert-px(-2);
-  }
-}
-
-.body {
-  position: sticky;
-  top: var(--spacing-xs);
-}
diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
deleted file mode 100644
index f85e468..0000000
--- a/src/components/atoms/layout/sidebar.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Sidebar as SidebarComponent } from './sidebar';
-
-/**
- * Sidebar - Storybook Meta
- */
-export default {
-  title: 'Atoms/Layout',
-  component: SidebarComponent,
-  argTypes: {
-    'aria-label': {
-      control: {
-        type: 'text',
-      },
-      description: 'An accessible name for the sidebar.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The sidebar content.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the aside element.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof SidebarComponent>;
-
-const Template: ComponentStory<typeof SidebarComponent> = (args) => (
-  <SidebarComponent {...args} />
-);
-
-/**
- * Layout Stories - Sidebar
- */
-export const Sidebar = Template.bind({});
-Sidebar.args = {
-  children: 'Some widgets.',
-};
diff --git a/src/components/atoms/layout/sidebar.test.tsx b/src/components/atoms/layout/sidebar.test.tsx
deleted file mode 100644
index 12b2f61..0000000
--- a/src/components/atoms/layout/sidebar.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Sidebar } from './sidebar';
-
-const children = 'A widget';
-
-describe('Sidebar', () => {
-  it('renders an aside element', () => {
-    render(<Sidebar>{children}</Sidebar>);
-    expect(screen.getByRole('complementary')).toHaveTextContent(children);
-  });
-});
diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx
deleted file mode 100644
index d290069..0000000
--- a/src/components/atoms/layout/sidebar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
-import styles from './sidebar.module.scss';
-
-export type SidebarProps = HTMLAttributes<HTMLElement> & {
-  /**
-   * The sidebar body.
-   */
-  children: ReactNode;
-};
-
-/**
- * Sidebar component
- *
- * Render an aside element.
- */
-export const Sidebar: FC<SidebarProps> = ({
-  children,
-  className = '',
-  ...props
-}) => {
-  return (
-    <aside {...props} className={`${styles.wrapper} ${className}`}>
-      <div className={styles.body}>{children}</div>
-    </aside>
-  );
-};