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

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

5 files changed, 107 insertions, 0 deletions

diff --git a/src/components/atoms/sidebar/index.ts b/src/components/atoms/sidebar/index.ts
new file mode 100644
index 0000000..b2ba9a4
--- /dev/null
+++ b/src/components/atoms/sidebar/index.ts
@@ -0,0 +1 @@
+export * from './sidebar';
diff --git a/src/components/atoms/sidebar/sidebar.module.scss b/src/components/atoms/sidebar/sidebar.module.scss
new file mode 100644
index 0000000..31adb6f
--- /dev/null
+++ b/src/components/atoms/sidebar/sidebar.module.scss
@@ -0,0 +1,12 @@
+@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/sidebar/sidebar.stories.tsx b/src/components/atoms/sidebar/sidebar.stories.tsx
new file mode 100644
index 0000000..4debb41
--- /dev/null
+++ b/src/components/atoms/sidebar/sidebar.stories.tsx
@@ -0,0 +1,60 @@
+import type { 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/sidebar/sidebar.test.tsx b/src/components/atoms/sidebar/sidebar.test.tsx
new file mode 100644
index 0000000..13ee03a
--- /dev/null
+++ b/src/components/atoms/sidebar/sidebar.test.tsx
@@ -0,0 +1,12 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { Sidebar } from './sidebar';
+
+const children = 'A widget';
+
+describe('Sidebar', () => {
+  it('renders an aside element', () => {
+    render(<Sidebar>{children}</Sidebar>);
+    expect(rtlScreen.getByRole('complementary')).toHaveTextContent(children);
+  });
+});
diff --git a/src/components/atoms/sidebar/sidebar.tsx b/src/components/atoms/sidebar/sidebar.tsx
new file mode 100644
index 0000000..2ee53c6
--- /dev/null
+++ b/src/components/atoms/sidebar/sidebar.tsx
@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+import { Aside, type AsideProps } from '../layout';
+import styles from './sidebar.module.scss';
+
+export type SidebarProps = AsideProps;
+
+/**
+ * Sidebar component
+ */
+export const Sidebar: FC<SidebarProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
+  const sidebarClass = `${styles.wrapper} ${className}`;
+
+  return (
+    <Aside {...props} className={sidebarClass}>
+      <div className={styles.body}>{children}</div>
+    </Aside>
+  );
+};