feat(components): add a Colophon component

3 files changed, 10 insertions, 39 deletions

diff --git a/src/components/organisms/layout/site-footer.module.scss b/src/components/organisms/layout/site-footer.module.scss
index a502763..158c419 100644
--- a/src/components/organisms/layout/site-footer.module.scss
+++ b/src/components/organisms/layout/site-footer.module.scss
@@ -18,17 +18,6 @@
   }
 }
 
-.nav {
-  @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));
diff --git a/src/components/organisms/layout/site-footer.test.tsx b/src/components/organisms/layout/site-footer.test.tsx
index 11ddd7f..3ad4022 100644
--- a/src/components/organisms/layout/site-footer.test.tsx
+++ b/src/components/organisms/layout/site-footer.test.tsx
@@ -7,9 +7,9 @@ const copyright: SiteFooterProps['copyright'] = {
   owner: 'Lorem ipsum',
 };
 
-const navItems: SiteFooterProps['navItems'] = [
+const navItems = [
   { id: 'legal-notice', href: '#', label: 'Legal notice' },
-];
+] satisfies SiteFooterProps['navItems'];
 
 describe('SiteFooter', () => {
   it('renders the website copyright', () => {
diff --git a/src/components/organisms/layout/site-footer.tsx b/src/components/organisms/layout/site-footer.tsx
index 9ed5ce6..ccab051 100644
--- a/src/components/organisms/layout/site-footer.tsx
+++ b/src/components/organisms/layout/site-footer.tsx
@@ -4,20 +4,13 @@ import { Footer } from '../../atoms';
 import {
   BackToTop,
   type BackToTopProps,
-  NavList,
-  NavItem,
-  NavLink,
+  Colophon,
+  type ColophonLink,
   type CopyrightProps,
   Copyright,
 } from '../../molecules';
 import styles from './site-footer.module.scss';
 
-export type FooterLinks = {
-  id: string;
-  href: string;
-  label: string;
-};
-
 export type SiteFooterProps = {
   /**
    * Set additional classnames to the back to top button.
@@ -38,7 +31,7 @@ export type SiteFooterProps = {
   /**
    * The footer nav items.
    */
-  navItems?: FooterLinks[];
+  navItems?: ColophonLink[];
   /**
    * An element id (without hashtag) used as anchor for back to top button.
    */
@@ -59,11 +52,6 @@ export const SiteFooter: FC<SiteFooterProps> = ({
   topId,
 }) => {
   const intl = useIntl();
-  const ariaLabel = intl.formatMessage({
-    defaultMessage: 'Footer',
-    description: 'SiteFooter: an accessible name for the footer nav',
-    id: 'pRzkFR',
-  });
   const backToTop = intl.formatMessage({
     defaultMessage: 'Back to top',
     description: 'SiteFooter: an accessible name for the back to top button',
@@ -75,17 +63,11 @@ export const SiteFooter: FC<SiteFooterProps> = ({
 
   return (
     <Footer className={footerClass}>
-      <Copyright {...copyright} />
-      {license}
-      {navItems ? (
-        <NavList aria-label={ariaLabel} className={styles.nav} isInline>
-          {navItems.map(({ id, ...link }) => (
-            <NavItem key={id}>
-              <NavLink {...link} />
-            </NavItem>
-          ))}
-        </NavList>
-      ) : null}
+      <Colophon
+        copyright={<Copyright {...copyright} />}
+        license={license}
+        links={navItems}
+      />
       <BackToTop
         anchor={backToTopAnchor}
         className={btnClass}