refactor(components): rewrite NavList component

* extract NavItem from NavList
* remove `kind` and `listClassName` props (since the consumer has
control over NavList, NavItem and NavLink components these props are
obsolete)

2 files changed, 16 insertions, 12 deletions

diff --git a/src/components/organisms/layout/site-footer.module.scss b/src/components/organisms/layout/site-footer.module.scss
index a8bcd61..a502763 100644
--- a/src/components/organisms/layout/site-footer.module.scss
+++ b/src/components/organisms/layout/site-footer.module.scss
@@ -19,9 +19,6 @@
 }
 
 .nav {
-  display: flex;
-  flex-flow: row wrap;
-
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
       &::before {
diff --git a/src/components/organisms/layout/site-footer.tsx b/src/components/organisms/layout/site-footer.tsx
index 0866924..b4930d6 100644
--- a/src/components/organisms/layout/site-footer.tsx
+++ b/src/components/organisms/layout/site-footer.tsx
@@ -5,10 +5,17 @@ import {
   BackToTop,
   type BackToTopProps,
   NavList,
-  type NavItem,
+  NavItem,
+  NavLink,
 } 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.
@@ -25,7 +32,7 @@ export type SiteFooterProps = {
   /**
    * The footer nav items.
    */
-  navItems?: NavItem[];
+  navItems?: FooterLinks[];
   /**
    * An element id (without hashtag) used as anchor for back to top button.
    */
@@ -67,13 +74,13 @@ export const SiteFooter: FC<SiteFooterProps> = ({
         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"
-        />
+        <NavList aria-label={ariaLabel} className={styles.nav} isInline>
+          {navItems.map(({ id, ...link }) => (
+            <NavItem key={id}>
+              <NavLink {...link} />
+            </NavItem>
+          ))}
+        </NavList>
       ) : null}
       <BackToTop
         anchor={backToTopAnchor}