feat(SW-185): Fixing comments

2024-08-22 11:01:31 +02:00
parent 93a0b29075
commit 6f28aee349
18 changed files with 158 additions and 72 deletions
--- 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 {
--- 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>
          {
--- 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>
--- 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;
 }
--- 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}>
--- 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);
--- 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}>
--- 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;
--- 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 />
--- 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: [
--- 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);
 }
--- 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,
    },
--- 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);
+}
--- 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} />
 }
--- 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: {
--- 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);
 }
--- 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: {
--- a/types/components/footer/navigation.ts
+++ 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[]
+    }
+  >
+}