feat(SW-185): Fixing comments

2024-08-22 11:01:31 +02:00
parent d72080ffe3
commit 72e28307de
18 changed files with 158 additions and 72 deletions
@@ -1,27 +1,28 @@
 import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import styles from "./mainnav.module.css"

-export default async function FooterMainNav({
-  mainLinks,
-}: {
-  mainLinks: Array<{ id: string; href: string; title: string }>
-}) {
+import { FooterMainNavProps } from "@/types/components/footer/navigation"
+
+export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
  return (
    <nav className={styles.mainNavigation}>
      <ul className={styles.mainNavigationList}>
        {mainLinks.map((link) => (
          <li key={link.id} className={styles.mainNavigationItem}>
-            <Link
-              color="burgundy"
-              href={link.href}
-              className={styles.mainNavigationLink}
-            >
-              {link.title}
+            <Subtitle type="two" asChild>
+              <Link
+                color="burgundy"
+                href={link.href}
+                className={styles.mainNavigationLink}
+              >
+                {link.title}

-              <ArrowRightIcon color="burgundy" />
-            </Link>
+                <ArrowRightIcon color="burgundy" />
+              </Link>
+            </Subtitle>
          </li>
        ))}
      </ul>
@@ -18,8 +18,6 @@
 }

 .mainNavigationLink {
-  font-size: 20px;
-  font-weight: 500;
  display: flex;
  justify-content: space-between;
 }
@@ -1,29 +1,26 @@
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"

 import styles from "./secondarynav.module.css"

-export default async function FooterSecondaryNav({
+import { FooterSecondaryNavProps } from "@/types/components/footer/navigation"
+
+export default function FooterSecondaryNav({
  secondaryLinks,
-}: {
-  secondaryLinks: Record<
-    string,
-    {
-      title: string
-      links: Array<{
-        id: string
-        href: string
-        title: string
-        image?: { src: string }
-      }>
-    }
-  >
-}) {
+}: FooterSecondaryNavProps) {
  return (
    <div className={styles.secondaryNavigation}>
      {Object.entries(secondaryLinks).map(([key, group]) => (
        <nav key={key} className={styles.secondaryNavigationGroup}>
-          <p className={styles.secondaryNavigationGroupTitle}>{group.title}</p>
+          <Body
+            className={styles.secondaryNavigationGroupDescription}
+            color="peach80"
+            textTransform="uppercase"
+          >
+            {group.title}
+          </Body>
+
          <ul className={styles.secondaryNavigationList}>
            {group.links.map((link) => (
              <li key={link.id} className={styles.secondaryNavigationItem}>
@@ -19,7 +19,6 @@
 }

 .secondaryNavigationGroupTitle {
-  font-size: 14px;
  color: var(--Scandic-Peach-80);
  font-weight: 500;
  font-family: var(--typography-Body-Bold-fontFamily);
@@ -6,7 +6,7 @@ import FooterSecondaryNav from "./SecondaryNav"

 import styles from "./navigation.module.css"

-export default async function FooterNavigation() {
+export default function FooterNavigation() {
  const { mainLinks, secondaryLinks } = navigationData
  return (
    <section className={styles.section}>
@@ -1,6 +1,6 @@
 .section {
  background: var(--Scandic-Brand-Pale-Peach);
-  padding: var(--Spacing-x9) var(--Spacing-x2);
+  padding: var(--Spacing-x7) var(--Spacing-x2);
  color: var(--Scandic-Brand-Burgundy);
 }

@@ -13,7 +13,7 @@

@media screen and (min-width: 1367px) {
  .section {
-    padding: 160px var(--Spacing-x9);
+    padding: var(--Spacing-x9) 0;
  }
  .maxWidth {
    flex-direction: row;