From 6f28aee349f0f4bba9cd6985ce7606ace614560a Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 22 Aug 2024 11:01:31 +0200
Subject: [PATCH] feat(SW-185): Fixing comments

---
 components/Footer/Details/details.module.css  | 33 ++++++++++----
 components/Footer/Details/index.tsx           | 45 +++++++++++--------
 .../Footer/Navigation/MainNav/index.tsx       | 27 +++++------
 .../Navigation/MainNav/mainnav.module.css     |  2 -
 .../Footer/Navigation/SecondaryNav/index.tsx  | 29 ++++++------
 .../SecondaryNav/secondarynav.module.css      |  1 -
 components/Footer/Navigation/index.tsx        |  2 +-
 .../Footer/Navigation/navigation.module.css   |  4 +-
 components/Footer/index.tsx                   |  2 +-
 components/Footer/mockedData.ts               |  2 +-
 .../TempDesignSystem/Link/link.module.css     |  4 ++
 components/TempDesignSystem/Link/variants.ts  |  1 +
 .../Text/Body/body.module.css                 | 14 ++++++
 .../TempDesignSystem/Text/Body/index.tsx      | 18 ++++----
 .../TempDesignSystem/Text/Body/variants.ts    |  3 ++
 .../Text/Footnote/footnote.module.css         | 14 ++++++
 .../Text/Footnote/variants.ts                 |  3 ++
 types/components/footer/navigation.ts         | 26 +++++++++++
 18 files changed, 158 insertions(+), 72 deletions(-)
 create mode 100644 types/components/footer/navigation.ts

diff --git a/components/Footer/Details/details.module.css b/components/Footer/Details/details.module.css
index a6b184ea2..d8bd17d93 100644
--- a/components/Footer/Details/details.module.css
+++ b/components/Footer/Details/details.module.css
@@ -1,13 +1,13 @@
 .details {
-  background: var(--Main-Grey-100);
-  color: var(--Main-Grey-White);
-  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7);
+  background: var(--Main-Red-100);
+  color: var(--Main-Brand-PalePeach);
+  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x6);
 }
 
 .topContainer {
   display: flex;
   justify-content: space-between;
-  padding: 0 0 var(--Spacing-x2) 0;
+  padding-bottom: var(--Spacing-x2);
   margin-bottom: var(--Spacing-x2);
 }
 
@@ -27,21 +27,38 @@
   justify-content: space-between;
   margin-bottom: var(--Spacing-x2);
   padding-bottom: var(--Spacing-x2);
-  border-bottom: 1px solid #e3d9d120;
+  border-bottom: 1px solid var(--Scandic-Peach-80);
 }
 
 .navigation {
   display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x1);
+}
+
+.link {
+  &::after {
+    content: "·";
+    margin-left: var(--Spacing-x1);
+  }
+  &:last-child {
+    &::after {
+      content: "";
+    }
+  }
+}
+
+.copyrightContainer {
+  display: flex;
+  gap: var(--Spacing-x1);
 }
 
 @media screen and (min-width: 1367px) {
   .details {
-    background: var(--Main-Grey-100);
     color: var(--Main-Grey-White);
-    padding: var(--Spacing-x5) var(--Spacing-x5) var(--Spacing-x9);
+    padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4);
   }
   .bottomContainer {
+    border-top: 1px solid var(--Scandic-Peach-80);
     flex-direction: row;
   }
   .navigationContainer {
diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx
index ac43a04d0..3768005d6 100644
--- a/components/Footer/Details/index.tsx
+++ b/components/Footer/Details/index.tsx
@@ -3,6 +3,8 @@ import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import { getLang } from "@/i18n/serverContext"
 
 import { detailsData } from "../mockedData"
 
@@ -15,11 +17,13 @@ function socialIcon(iconName: string): JSX.Element | null {
   return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
 }
 
-export default async function FooterDetails() {
+export default function FooterDetails() {
+  const lang = getLang()
+  const currentYear = new Date().getFullYear()
   return (
     <section className={styles.details}>
       <div className={styles.topContainer}>
-        <Link href="/">
+        <Link href={`/${lang}`}>
           <Image
             alt="Scandic Hotels logo"
             className={styles.logo}
@@ -33,7 +37,7 @@ export default async function FooterDetails() {
         </Link>
         <nav className={styles.socialNav}>
           {detailsData.social.links.map((link) => (
-            <Link
+            <a
               className={styles.socialLink}
               color="white"
               href={link.href}
@@ -42,28 +46,33 @@ export default async function FooterDetails() {
               title={link.title}
             >
               {socialIcon(link.title)}
-            </Link>
+            </a>
           ))}
         </nav>
       </div>
       <div className={styles.bottomContainer}>
-        <Body color="white">
-          <strong>{detailsData.copyrightCompany}</strong>{" "}
-          {detailsData.copyrightInfo}
-        </Body>
+        <div className={styles.copyrightContainer}>
+          <Footnote textTransform="uppercase">
+            © {currentYear} {detailsData.copyrightCompany}
+          </Footnote>
+          <Footnote textTransform="uppercase" color="peach50">
+            {detailsData.copyrightInfo}
+          </Footnote>
+        </div>
         <div className={styles.navigationContainer}>
           <nav className={styles.navigation}>
             {detailsData.links.map((link) => (
-              <Link
-                className={styles.link}
-                color="white"
-                href={link.href}
-                key={link.id}
-                target="_blank"
-                title={link.title}
-              >
-                {link.title}
-              </Link>
+              <Footnote asChild textTransform="uppercase" key={link.id}>
+                <Link
+                  className={styles.link}
+                  color="peach50"
+                  href={link.href}
+                  target="_blank"
+                  title={link.title}
+                >
+                  {link.title}
+                </Link>
+              </Footnote>
             ))}
           </nav>
           {
diff --git a/components/Footer/Navigation/MainNav/index.tsx b/components/Footer/Navigation/MainNav/index.tsx
index f3158ba4f..31fa31338 100644
--- a/components/Footer/Navigation/MainNav/index.tsx
+++ b/components/Footer/Navigation/MainNav/index.tsx
@@ -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>
diff --git a/components/Footer/Navigation/MainNav/mainnav.module.css b/components/Footer/Navigation/MainNav/mainnav.module.css
index f3c21e23e..aff66a524 100644
--- a/components/Footer/Navigation/MainNav/mainnav.module.css
+++ b/components/Footer/Navigation/MainNav/mainnav.module.css
@@ -18,8 +18,6 @@
 }
 
 .mainNavigationLink {
-  font-size: 20px;
-  font-weight: 500;
   display: flex;
   justify-content: space-between;
 }
diff --git a/components/Footer/Navigation/SecondaryNav/index.tsx b/components/Footer/Navigation/SecondaryNav/index.tsx
index a6df1ddee..ced733e79 100644
--- a/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/components/Footer/Navigation/SecondaryNav/index.tsx
@@ -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}>
diff --git a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
index 314f69c3e..0ef64b087 100644
--- a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
+++ b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
@@ -19,7 +19,6 @@
 }
 
 .secondaryNavigationGroupTitle {
-  font-size: 14px;
   color: var(--Scandic-Peach-80);
   font-weight: 500;
   font-family: var(--typography-Body-Bold-fontFamily);
diff --git a/components/Footer/Navigation/index.tsx b/components/Footer/Navigation/index.tsx
index 13b0e0f47..ba6ba8159 100644
--- a/components/Footer/Navigation/index.tsx
+++ b/components/Footer/Navigation/index.tsx
@@ -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}>
diff --git a/components/Footer/Navigation/navigation.module.css b/components/Footer/Navigation/navigation.module.css
index c37481cbd..1fb6b073f 100644
--- a/components/Footer/Navigation/navigation.module.css
+++ b/components/Footer/Navigation/navigation.module.css
@@ -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;
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index 4ce45da0f..66dded2d5 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -1,7 +1,7 @@
 import FooterDetails from "./Details"
 import FooterNavigation from "./Navigation"
 
-export default async function Footer() {
+export default function Footer() {
   return (
     <footer>
       <FooterNavigation />
diff --git a/components/Footer/mockedData.ts b/components/Footer/mockedData.ts
index a9ba3f248..2b9679b58 100644
--- a/components/Footer/mockedData.ts
+++ b/components/Footer/mockedData.ts
@@ -108,7 +108,7 @@ export const navigationData = {
 }
 
 export const detailsData = {
-  copyrightCompany: "© 2024 Scandic AB",
+  copyrightCompany: "Scandic AB",
   copyrightInfo: "All rights reserved.",
   social: {
     links: [
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index 0261002de..1356e489f 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -126,6 +126,10 @@
   color: var(--Scandic-Brand-Pale-Peach);
 }
 
+.peach50 {
+  color: var(--Scandic-Peach-50);
+}
+
 .peach80 {
   color: var(--Primary-Light-On-Surface-Accent);
 }
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
index fa0738c50..b49b34a3a 100644
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -12,6 +12,7 @@ export const linkVariants = cva(styles.link, {
       burgundy: styles.burgundy,
       none: "",
       pale: styles.pale,
+      peach50: styles.peach50,
       peach80: styles.peach80,
       white: styles.white,
     },
diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css
index 045e0886d..4f661bbd5 100644
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -34,6 +34,16 @@
   text-decoration: var(--typography-Body-Underline-textDecoration);
 }
 
+.uppercase {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: 450;
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  text-decoration: var(--typography-Body-Regular-textDecoration);
+  text-transform: uppercase;
+}
+
 .textAlignCenter {
   text-align: center;
 }
@@ -73,3 +83,7 @@
 .peach50 {
   color: var(--Primary-Dark-On-Surface-Accent);
 }
+
+.peach80 {
+  color: var(--Scandic-Peach-80);
+}
diff --git a/components/TempDesignSystem/Text/Body/index.tsx b/components/TempDesignSystem/Text/Body/index.tsx
index 0553375a5..61f71d19f 100644
--- a/components/TempDesignSystem/Text/Body/index.tsx
+++ b/components/TempDesignSystem/Text/Body/index.tsx
@@ -16,15 +16,15 @@ export default function Body({
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? bodyFontOnlyVariants({
-      className,
-      textAlign,
-      textTransform,
-    })
+        className,
+        textAlign,
+        textTransform,
+      })
     : bodyVariants({
-      className,
-      color,
-      textAlign,
-      textTransform,
-    })
+        className,
+        color,
+        textAlign,
+        textTransform,
+      })
   return <Comp className={classNames} {...props} />
 }
diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts
index d044b4286..034f1eeba 100644
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -13,6 +13,7 @@ const config = {
       textMediumContrast: styles.textMediumContrast,
       white: styles.white,
       peach50: styles.peach50,
+      peach80: styles.peach80,
     },
     textAlign: {
       center: styles.textAlignCenter,
@@ -22,6 +23,7 @@ const config = {
       bold: styles.bold,
       regular: styles.regular,
       underlined: styles.underlined,
+      uppercase: styles.uppercase,
     },
   },
   defaultVariants: {
@@ -43,6 +45,7 @@ const fontOnlyconfig = {
       bold: styles.bold,
       regular: styles.regular,
       underlined: styles.underlined,
+      uppercase: styles.uppercase,
     },
   },
   defaultVariants: {
diff --git a/components/TempDesignSystem/Text/Footnote/footnote.module.css b/components/TempDesignSystem/Text/Footnote/footnote.module.css
index a020842ae..20f73c04d 100644
--- a/components/TempDesignSystem/Text/Footnote/footnote.module.css
+++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css
@@ -25,6 +25,16 @@
   text-decoration: var(--typography-Footnote-Regular-textDecoration);
 }
 
+.uppercase {
+  font-family: var(--typography-Footnote-Regular-fontFamily);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: 450;
+  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
+  line-height: var(--typography-Footnote-Regular-lineHeight);
+  text-decoration: var(--typography-Footnote-Regular-textDecoration);
+  text-transform: uppercase;
+}
+
 .center {
   text-align: center;
 }
@@ -45,6 +55,10 @@
   color: var(--Scandic-Brand-Pale-Peach);
 }
 
+.peach50 {
+  color: var(--Scandic-Peach-50);
+}
+
 .textMediumContrast {
   color: var(--UI-Text-Medium-contrast);
 }
diff --git a/components/TempDesignSystem/Text/Footnote/variants.ts b/components/TempDesignSystem/Text/Footnote/variants.ts
index eb2040177..e07213e6d 100644
--- a/components/TempDesignSystem/Text/Footnote/variants.ts
+++ b/components/TempDesignSystem/Text/Footnote/variants.ts
@@ -8,6 +8,7 @@ const config = {
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      peach50: styles.peach50,
       textMediumContrast: styles.textMediumContrast,
     },
     textAlign: {
@@ -17,6 +18,7 @@ const config = {
     textTransform: {
       bold: styles.bold,
       regular: styles.regular,
+      uppercase: styles.uppercase,
     },
   },
   defaultVariants: {
@@ -35,6 +37,7 @@ const fontOnlyConfig = {
     textTransform: {
       bold: styles.bold,
       regular: styles.regular,
+      uppercase: styles.uppercase,
     },
   },
   defaultVariants: {
diff --git a/types/components/footer/navigation.ts b/types/components/footer/navigation.ts
new file mode 100644
index 000000000..58b458055
--- /dev/null
+++ b/types/components/footer/navigation.ts
@@ -0,0 +1,26 @@
+export type FooterMainNav = {
+  id: string
+  href: string
+  title: string
+}
+export type FooterMainNavProps = {
+  mainLinks: FooterMainNav[]
+}
+
+export type FooterSecondaryNav = {
+  id: string
+  href: string
+  title: string
+  image?: {
+    src: string
+  }
+}
+export type FooterSecondaryNavProps = {
+  secondaryLinks: Record<
+    string,
+    {
+      title: string
+      links: FooterSecondaryNav[]
+    }
+  >
+}