From d17d894f398650209c0ddd29502308de8c07bd93 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 27 Sep 2023 18:43:25 +0200
Subject: feat(components): add Article, Aside, Footer, Header, Main & Nav

Some components have been renamed to be able to create Footer, Header
and Nav.
---
 src/components/organisms/layout/footer.module.scss |  40 ------
 src/components/organisms/layout/footer.stories.tsx |  90 ------------
 src/components/organisms/layout/footer.test.tsx    |  34 -----
 src/components/organisms/layout/footer.tsx         |  75 ----------
 src/components/organisms/layout/header.module.scss |  50 -------
 src/components/organisms/layout/header.stories.tsx | 153 ---------------------
 src/components/organisms/layout/header.test.tsx    |  47 -------
 src/components/organisms/layout/header.tsx         |  44 ------
 src/components/organisms/layout/index.ts           |   4 +-
 .../organisms/layout/site-footer.module.scss       |  40 ++++++
 .../organisms/layout/site-footer.stories.tsx       |  90 ++++++++++++
 .../organisms/layout/site-footer.test.tsx          |  36 +++++
 src/components/organisms/layout/site-footer.tsx    |  75 ++++++++++
 .../organisms/layout/site-header.module.scss       |  50 +++++++
 .../organisms/layout/site-header.stories.tsx       | 153 +++++++++++++++++++++
 .../organisms/layout/site-header.test.tsx          |  47 +++++++
 src/components/organisms/layout/site-header.tsx    |  47 +++++++
 17 files changed, 540 insertions(+), 535 deletions(-)
 delete mode 100644 src/components/organisms/layout/footer.module.scss
 delete mode 100644 src/components/organisms/layout/footer.stories.tsx
 delete mode 100644 src/components/organisms/layout/footer.test.tsx
 delete mode 100644 src/components/organisms/layout/footer.tsx
 delete mode 100644 src/components/organisms/layout/header.module.scss
 delete mode 100644 src/components/organisms/layout/header.stories.tsx
 delete mode 100644 src/components/organisms/layout/header.test.tsx
 delete mode 100644 src/components/organisms/layout/header.tsx
 create mode 100644 src/components/organisms/layout/site-footer.module.scss
 create mode 100644 src/components/organisms/layout/site-footer.stories.tsx
 create mode 100644 src/components/organisms/layout/site-footer.test.tsx
 create mode 100644 src/components/organisms/layout/site-footer.tsx
 create mode 100644 src/components/organisms/layout/site-header.module.scss
 create mode 100644 src/components/organisms/layout/site-header.stories.tsx
 create mode 100644 src/components/organisms/layout/site-header.test.tsx
 create mode 100644 src/components/organisms/layout/site-header.tsx

(limited to 'src/components/organisms/layout')

diff --git a/src/components/organisms/layout/footer.module.scss b/src/components/organisms/layout/footer.module.scss
deleted file mode 100644
index a8bcd61..0000000
--- a/src/components/organisms/layout/footer.module.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@use "../../../styles/abstracts/mixins" as mix;
-
-.wrapper {
-  display: flex;
-  flex-flow: column wrap;
-  gap: var(--spacing-xs);
-  place-items: center;
-  place-content: center;
-  padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      --toolbar-size: 0px;
-
-      flex-flow: row wrap;
-      font-size: var(--font-size-sm);
-    }
-  }
-}
-
-.nav {
-  display: flex;
-  flex-flow: row wrap;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      &::before {
-        content: "\2022";
-        margin-right: var(--spacing-2xs);
-      }
-    }
-  }
-}
-
-.back-to-top {
-  position: fixed;
-  bottom: calc(var(--toolbar-size, 0px) + var(--spacing-md));
-  right: var(--spacing-md);
-  transition: all 0.4s ease-in 0s;
-}
diff --git a/src/components/organisms/layout/footer.stories.tsx b/src/components/organisms/layout/footer.stories.tsx
deleted file mode 100644
index b5097dd..0000000
--- a/src/components/organisms/layout/footer.stories.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Footer as FooterComponent } from './footer';
-
-/**
- * Footer - Storybook Meta
- */
-export default {
-  title: 'Organisms/Layout',
-  component: FooterComponent,
-  argTypes: {
-    backToTopClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the back to top button.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the footer element.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    copyright: {
-      description: 'The copyright information.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    navItems: {
-      description: 'The footer nav items.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'object',
-        required: false,
-        value: {},
-      },
-    },
-    topId: {
-      control: {
-        type: 'text',
-      },
-      description:
-        'An element id (without hashtag) used as target by back to top button.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof FooterComponent>;
-
-const Template: ComponentStory<typeof FooterComponent> = (args) => (
-  <FooterComponent {...args} />
-);
-
-const copyright = {
-  dates: { start: '2017', end: '2022' },
-  owner: 'Lorem ipsum',
-  icon: 'CC',
-};
-
-const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }];
-
-/**
- * Layout Stories - Footer
- */
-export const Footer = Template.bind({});
-Footer.args = {
-  copyright,
-  navItems,
-  topId: 'top',
-};
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/footer.tsx b/src/components/organisms/layout/footer.tsx
deleted file mode 100644
index 36e85a7..0000000
--- a/src/components/organisms/layout/footer.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { FC } from 'react';
-import { useIntl } from 'react-intl';
-import { Copyright, type CopyrightProps } from '../../atoms';
-import {
-  BackToTop,
-  type BackToTopProps,
-  Nav,
-  type NavItem,
-} from '../../molecules';
-import styles from './footer.module.scss';
-
-export type FooterProps = {
-  /**
-   * Set additional classnames to the back to top button.
-   */
-  backToTopClassName?: BackToTopProps['className'];
-  /**
-   * Set additional classnames to the footer element.
-   */
-  className?: string;
-  /**
-   * Set the copyright information.
-   */
-  copyright: CopyrightProps;
-  /**
-   * The footer nav items.
-   */
-  navItems?: NavItem[];
-  /**
-   * An element id (without hashtag) used as anchor for back to top button.
-   */
-  topId: string;
-};
-
-/**
- * Footer component
- *
- * Renders a footer with copyright and nav;
- */
-export const Footer: FC<FooterProps> = ({
-  backToTopClassName,
-  className = '',
-  copyright,
-  navItems,
-  topId,
-}) => {
-  const intl = useIntl();
-  const ariaLabel = intl.formatMessage({
-    defaultMessage: 'Footer',
-    description: 'Footer: an accessible name for footer nav',
-    id: 'd4N8nD',
-  });
-  const footerClass = `${styles.wrapper} ${className}`;
-  const btnClass = `${styles['back-to-top']} ${backToTopClassName}`;
-
-  return (
-    <footer className={footerClass}>
-      <Copyright
-        dates={copyright.dates}
-        icon={copyright.icon}
-        owner={copyright.owner}
-      />
-      {navItems ? (
-        <Nav
-          aria-label={ariaLabel}
-          className={styles.nav}
-          items={navItems}
-          // eslint-disable-next-line react/jsx-no-literals -- Hardcoded config
-          kind="footer"
-        />
-      ) : null}
-      <BackToTop className={btnClass} to={topId} />
-    </footer>
-  );
-};
diff --git a/src/components/organisms/layout/header.module.scss b/src/components/organisms/layout/header.module.scss
deleted file mode 100644
index 573d455..0000000
--- a/src/components/organisms/layout/header.module.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-.wrapper {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 100ch)
-    minmax(0, 1fr);
-  align-items: center;
-  padding: var(--spacing-md) 0 var(--spacing-lg);
-
-  .toolbar {
-    justify-content: space-around;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 5;
-    background: var(--color-bg);
-    border-top: fun.convert-px(4) solid;
-    border-image: radial-gradient(
-        ellipse at top,
-        var(--color-primary-lighter) 20%,
-        var(--color-primary) 100%
-      )
-      1;
-    box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
-      var(--color-shadow-dark);
-
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        justify-content: flex-end;
-        width: auto;
-        position: relative;
-        left: unset;
-        background: inherit;
-        border: none;
-        box-shadow: none;
-      }
-    }
-  }
-}
-
-.body {
-  grid-column: 2;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-}
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
deleted file mode 100644
index 31fb0ca..0000000
--- a/src/components/organisms/layout/header.stories.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Header as HeaderComponent } from './header';
-
-/**
- * Header - Storybook Meta
- */
-export default {
-  title: 'Organisms/Layout',
-  component: HeaderComponent,
-  args: {
-    ackeeStorageKey: 'ackee-tracking',
-    isHome: false,
-    motionStorageKey: 'reduced-motion',
-    searchPage: '#',
-    withLink: false,
-  },
-  argTypes: {
-    ackeeStorageKey: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set Ackee settings local storage key.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    baseline: {
-      control: {
-        type: 'text',
-      },
-      description: 'The branding baseline.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the header wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    isHome: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the current page is homepage or not.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    motionStorageKey: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set Reduced motion settings local storage key.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    nav: {
-      description: 'The main navigation items.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    photo: {
-      control: {
-        type: 'text',
-      },
-      description: 'The branding photo.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    searchPage: {
-      control: {
-        type: 'text',
-      },
-      description: 'The search results page url.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The website title.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    withLink: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Wrap the website title with a link to homepage.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-  },
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof HeaderComponent>;
-
-const Template: ComponentStory<typeof HeaderComponent> = (args) => (
-  <HeaderComponent {...args} />
-);
-
-const nav = [
-  { id: 'home-link', href: '#', label: 'Home' },
-  { id: 'blog-link', href: '#', label: 'Blog' },
-  { id: 'cv-link', href: '#', label: 'CV' },
-  { id: 'contact-link', href: '#', label: 'Contact' },
-];
-
-/**
- * Layout Stories - Header
- */
-export const Header = Template.bind({});
-Header.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/header.test.tsx
deleted file mode 100644
index 7f72f24..0000000
--- a/src/components/organisms/layout/header.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Header } from './header';
-
-const nav = [
-  { id: 'home-link', href: '#', label: 'Home' },
-  { id: 'blog-link', href: '#', label: 'Blog' },
-  { id: 'cv-link', href: '#', label: 'CV' },
-  { id: 'contact-link', href: '#', label: 'Contact' },
-];
-
-const photo = 'http://placeimg.com/640/480/nightlife';
-
-const title = 'Assumenda quis quod';
-
-describe('Header', () => {
-  it('renders the website title', () => {
-    render(
-      <Header
-        ackeeStorageKey="ackee-tracking"
-        isHome={true}
-        motionStorageKey="reduced-motion"
-        nav={nav}
-        photo={photo}
-        searchPage="#"
-        title={title}
-      />
-    );
-    expect(
-      screen.getByRole('heading', { level: 1, name: title })
-    ).toBeInTheDocument();
-  });
-
-  it('renders the main nav', () => {
-    render(
-      <Header
-        ackeeStorageKey="ackee-tracking"
-        motionStorageKey="reduced-motion"
-        nav={nav}
-        photo={photo}
-        searchPage="#"
-        title={title}
-      />
-    );
-    expect(screen.getByRole('navigation')).toBeInTheDocument();
-  });
-});
diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx
deleted file mode 100644
index d2f7620..0000000
--- a/src/components/organisms/layout/header.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FC } from 'react';
-import { Branding, type BrandingProps } from '../../molecules';
-import { Toolbar, type ToolbarProps } from '../toolbar';
-import styles from './header.module.scss';
-
-export type HeaderProps = BrandingProps &
-  Pick<
-    ToolbarProps,
-    'ackeeStorageKey' | 'motionStorageKey' | 'nav' | 'searchPage'
-  > & {
-    /**
-     * Set additional classnames to the header element.
-     */
-    className?: string;
-  };
-
-/**
- * Header component
- *
- * Render the website header.
- */
-export const Header: FC<HeaderProps> = ({
-  ackeeStorageKey,
-  className,
-  motionStorageKey,
-  nav,
-  searchPage,
-  ...props
-}) => {
-  return (
-    <header className={`${styles.wrapper} ${className}`}>
-      <div className={styles.body}>
-        <Branding {...props} />
-        <Toolbar
-          ackeeStorageKey={ackeeStorageKey}
-          className={styles.toolbar}
-          motionStorageKey={motionStorageKey}
-          nav={nav}
-          searchPage={searchPage}
-        />
-      </div>
-    </header>
-  );
-};
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/site-footer.module.scss b/src/components/organisms/layout/site-footer.module.scss
new file mode 100644
index 0000000..a8bcd61
--- /dev/null
+++ b/src/components/organisms/layout/site-footer.module.scss
@@ -0,0 +1,40 @@
+@use "../../../styles/abstracts/mixins" as mix;
+
+.wrapper {
+  display: flex;
+  flex-flow: column wrap;
+  gap: var(--spacing-xs);
+  place-items: center;
+  place-content: center;
+  padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      --toolbar-size: 0px;
+
+      flex-flow: row wrap;
+      font-size: var(--font-size-sm);
+    }
+  }
+}
+
+.nav {
+  display: flex;
+  flex-flow: row wrap;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      &::before {
+        content: "\2022";
+        margin-right: var(--spacing-2xs);
+      }
+    }
+  }
+}
+
+.back-to-top {
+  position: fixed;
+  bottom: calc(var(--toolbar-size, 0px) + var(--spacing-md));
+  right: var(--spacing-md);
+  transition: all 0.4s ease-in 0s;
+}
diff --git a/src/components/organisms/layout/site-footer.stories.tsx b/src/components/organisms/layout/site-footer.stories.tsx
new file mode 100644
index 0000000..59a378f
--- /dev/null
+++ b/src/components/organisms/layout/site-footer.stories.tsx
@@ -0,0 +1,90 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { SiteFooter as SiteFooterComponent } from './site-footer';
+
+/**
+ * SiteFooter - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Layout',
+  component: SiteFooterComponent,
+  argTypes: {
+    backToTopClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the back to top button.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the footer element.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    copyright: {
+      description: 'The copyright information.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    navItems: {
+      description: 'The footer nav items.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    topId: {
+      control: {
+        type: 'text',
+      },
+      description:
+        'An element id (without hashtag) used as target by back to top button.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof SiteFooterComponent>;
+
+const Template: ComponentStory<typeof SiteFooterComponent> = (args) => (
+  <SiteFooterComponent {...args} />
+);
+
+const copyright = {
+  dates: { start: '2017', end: '2022' },
+  owner: 'Lorem ipsum',
+  icon: 'CC',
+};
+
+const navItems = [{ id: 'legal-notice', href: '#', label: 'Legal notice' }];
+
+/**
+ * Layout Stories - SiteFooter
+ */
+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/site-footer.tsx b/src/components/organisms/layout/site-footer.tsx
new file mode 100644
index 0000000..c1fe9d0
--- /dev/null
+++ b/src/components/organisms/layout/site-footer.tsx
@@ -0,0 +1,75 @@
+import type { FC } from 'react';
+import { useIntl } from 'react-intl';
+import { Copyright, Footer, type CopyrightProps } from '../../atoms';
+import {
+  BackToTop,
+  type BackToTopProps,
+  NavList,
+  type NavItem,
+} from '../../molecules';
+import styles from './site-footer.module.scss';
+
+export type SiteFooterProps = {
+  /**
+   * Set additional classnames to the back to top button.
+   */
+  backToTopClassName?: BackToTopProps['className'];
+  /**
+   * Set additional classnames to the footer element.
+   */
+  className?: string;
+  /**
+   * Set the copyright information.
+   */
+  copyright: CopyrightProps;
+  /**
+   * The footer nav items.
+   */
+  navItems?: NavItem[];
+  /**
+   * An element id (without hashtag) used as anchor for back to top button.
+   */
+  topId: string;
+};
+
+/**
+ * SiteFooter component
+ *
+ * Renders a footer with copyright and nav;
+ */
+export const SiteFooter: FC<SiteFooterProps> = ({
+  backToTopClassName,
+  className = '',
+  copyright,
+  navItems,
+  topId,
+}) => {
+  const intl = useIntl();
+  const ariaLabel = intl.formatMessage({
+    defaultMessage: 'Footer',
+    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}>
+      <Copyright
+        dates={copyright.dates}
+        icon={copyright.icon}
+        owner={copyright.owner}
+      />
+      {navItems ? (
+        <NavList
+          aria-label={ariaLabel}
+          className={styles.nav}
+          items={navItems}
+          // eslint-disable-next-line react/jsx-no-literals -- Kind allowed
+          kind="footer"
+        />
+      ) : null}
+      <BackToTop className={btnClass} to={topId} />
+    </Footer>
+  );
+};
diff --git a/src/components/organisms/layout/site-header.module.scss b/src/components/organisms/layout/site-header.module.scss
new file mode 100644
index 0000000..573d455
--- /dev/null
+++ b/src/components/organisms/layout/site-header.module.scss
@@ -0,0 +1,50 @@
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+
+.wrapper {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 100ch)
+    minmax(0, 1fr);
+  align-items: center;
+  padding: var(--spacing-md) 0 var(--spacing-lg);
+
+  .toolbar {
+    justify-content: space-around;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+    background: var(--color-bg);
+    border-top: fun.convert-px(4) solid;
+    border-image: radial-gradient(
+        ellipse at top,
+        var(--color-primary-lighter) 20%,
+        var(--color-primary) 100%
+      )
+      1;
+    box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
+      var(--color-shadow-dark);
+
+    @include mix.media("screen") {
+      @include mix.dimensions("sm") {
+        justify-content: flex-end;
+        width: auto;
+        position: relative;
+        left: unset;
+        background: inherit;
+        border: none;
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.body {
+  grid-column: 2;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
diff --git a/src/components/organisms/layout/site-header.stories.tsx b/src/components/organisms/layout/site-header.stories.tsx
new file mode 100644
index 0000000..56f1689
--- /dev/null
+++ b/src/components/organisms/layout/site-header.stories.tsx
@@ -0,0 +1,153 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { SiteHeader as SiteHeaderComponent } from './site-header';
+
+/**
+ * SiteHeader - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Layout',
+  component: SiteHeaderComponent,
+  args: {
+    ackeeStorageKey: 'ackee-tracking',
+    isHome: false,
+    motionStorageKey: 'reduced-motion',
+    searchPage: '#',
+    withLink: false,
+  },
+  argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Ackee settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    baseline: {
+      control: {
+        type: 'text',
+      },
+      description: 'The branding baseline.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the header wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    isHome: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the current page is homepage or not.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Reduced motion settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    nav: {
+      description: 'The main navigation items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    photo: {
+      control: {
+        type: 'text',
+      },
+      description: 'The branding photo.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The website title.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    withLink: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Wrap the website title with a link to homepage.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof SiteHeaderComponent>;
+
+const Template: ComponentStory<typeof SiteHeaderComponent> = (args) => (
+  <SiteHeaderComponent {...args} />
+);
+
+const nav = [
+  { id: 'home-link', href: '#', label: 'Home' },
+  { id: 'blog-link', href: '#', label: 'Blog' },
+  { id: 'cv-link', href: '#', label: 'CV' },
+  { id: 'contact-link', href: '#', label: 'Contact' },
+];
+
+/**
+ * Layout Stories - SiteHeader
+ */
+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/site-header.test.tsx b/src/components/organisms/layout/site-header.test.tsx
new file mode 100644
index 0000000..e75f99f
--- /dev/null
+++ b/src/components/organisms/layout/site-header.test.tsx
@@ -0,0 +1,47 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { SiteHeader } from './site-header';
+
+const nav = [
+  { id: 'home-link', href: '#', label: 'Home' },
+  { id: 'blog-link', href: '#', label: 'Blog' },
+  { id: 'cv-link', href: '#', label: 'CV' },
+  { id: 'contact-link', href: '#', label: 'Contact' },
+];
+
+const photo = 'http://placeimg.com/640/480/nightlife';
+
+const title = 'Assumenda quis quod';
+
+describe('SiteHeader', () => {
+  it('renders the website title', () => {
+    render(
+      <SiteHeader
+        ackeeStorageKey="ackee-tracking"
+        isHome={true}
+        motionStorageKey="reduced-motion"
+        nav={nav}
+        photo={photo}
+        searchPage="#"
+        title={title}
+      />
+    );
+    expect(
+      rtlScreen.getByRole('heading', { level: 1, name: title })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the main nav', () => {
+    render(
+      <SiteHeader
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        nav={nav}
+        photo={photo}
+        searchPage="#"
+        title={title}
+      />
+    );
+    expect(rtlScreen.getByRole('navigation')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/layout/site-header.tsx b/src/components/organisms/layout/site-header.tsx
new file mode 100644
index 0000000..e8953c0
--- /dev/null
+++ b/src/components/organisms/layout/site-header.tsx
@@ -0,0 +1,47 @@
+import type { FC } from 'react';
+import { Header } from '../../atoms';
+import { Branding, type BrandingProps } from '../../molecules';
+import { Toolbar, type ToolbarProps } from '../toolbar';
+import styles from './site-header.module.scss';
+
+export type SiteHeaderProps = BrandingProps &
+  Pick<
+    ToolbarProps,
+    'ackeeStorageKey' | 'motionStorageKey' | 'nav' | 'searchPage'
+  > & {
+    /**
+     * Set additional classnames to the header element.
+     */
+    className?: string;
+  };
+
+/**
+ * SiteHeader component
+ *
+ * Render the website header.
+ */
+export const SiteHeader: FC<SiteHeaderProps> = ({
+  ackeeStorageKey,
+  className,
+  motionStorageKey,
+  nav,
+  searchPage,
+  ...props
+}) => {
+  const headerClass = `${styles.wrapper} ${className}`;
+
+  return (
+    <Header className={headerClass}>
+      <div className={styles.body}>
+        <Branding {...props} />
+        <Toolbar
+          ackeeStorageKey={ackeeStorageKey}
+          className={styles.toolbar}
+          motionStorageKey={motionStorageKey}
+          nav={nav}
+          searchPage={searchPage}
+        />
+      </div>
+    </Header>
+  );
+};
-- 
cgit v1.2.3