Merged in fix/update-footer-variables (pull request #2239)

fix: match footer to design documents with typography and colors Approved-by: Erik Tiekstra
2025-05-27 13:44:44 +00:00
parent 528fbbce4a ade0279c8d
commit 76e377d5d5
7 changed files with 100 additions and 138 deletions
--- a/apps/scandic-web/components/Footer/Details/details.module.css
+++ b/apps/scandic-web/components/Footer/Details/details.module.css
@@ -1,15 +1,15 @@
 .details {
-  background: var(--Base-Text-High-contrast);
+  background: var(--Primary-Dark-Surface-Normal);
  color: var(--Primary-Dark-On-Surface-Text);
-  padding: var(--Spacing-x3) 0 var(--Spacing-x6);
+  padding: var(--Space-x3) 0 var(--Space-x6);
 }

 .topContainer {
  display: flex;
  justify-content: space-between;
-  padding-bottom: var(--Spacing-x2);
+  padding-bottom: var(--Space-x2);
  max-width: var(--max-width-page);
-  margin: 0 auto var(--Spacing-x2);
+  margin: 0 auto var(--Space-x2);
 }

 .bottomContainer {
@@ -22,26 +22,26 @@

 .socialNav {
  display: flex;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }

 .navigationContainer {
  display: flex;
  justify-content: space-between;
-  margin-bottom: var(--Spacing-x2);
-  padding-bottom: var(--Spacing-x2);
-  border-bottom: 1px solid var(--Base-Text-Medium-contrast);
+  margin-bottom: var(--Space-x2);
+  padding-bottom: var(--Space-x2);
+  border-bottom: 1px solid var(--Primary-Dim-On-Surface-Accent);
 }

 .navigation {
  display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }

 .link {
  &::after {
    content: "·";
-    margin-left: var(--Spacing-x1);
+    margin-left: var(--Space-x1);
  }

  &:last-child {
@@ -51,19 +51,14 @@
  }
 }

-.copyrightContainer {
-  display: flex;
-  gap: var(--Spacing-x1);
-}
-
@media screen and (min-width: 768px) {
  .details {
-    padding: var(--Spacing-x6) 0 var(--Spacing-x4);
+    padding: var(--Space-x6) 0 var(--Space-x4);
  }

  .bottomContainer {
-    border-top: 1px solid var(--Base-Text-Medium-contrast);
-    padding-top: var(--Spacing-x2);
+    border-top: 1px solid var(--Primary-Dark-On-Surface-Divider);
+    padding-top: var(--Space-x2);
    flex-direction: row;
    align-items: center;
  }
@@ -72,7 +67,7 @@
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
-    gap: var(--Spacing-x4);
+    gap: var(--Space-x4);
    align-items: center;
  }
 }
--- a/apps/scandic-web/components/Footer/Details/index.tsx
+++ b/apps/scandic-web/components/Footer/Details/index.tsx
@@ -1,10 +1,11 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { getFooter } from "@/lib/trpc/memoizedRequests"

 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

@@ -20,7 +21,7 @@ export default async function FooterDetails() {
  const currentYear = new Date().getFullYear()

  return (
-    <section className={styles.details}>
+    <div className={styles.details}>
      <div className={styles.topContainer}>
        <Link href={`/${lang}`}>
          <Image
@@ -37,8 +38,8 @@ export default async function FooterDetails() {
        </nav>
      </div>
      <div className={styles.bottomContainer}>
-        <div className={styles.copyrightContainer}>
-          <Footnote type="label" textTransform="uppercase">
+        <Typography variant="Tag/sm">
+          <p>
            {intl.formatMessage(
              {
                defaultMessage:
@@ -46,35 +47,27 @@ export default async function FooterDetails() {
              },
              { currentYear }
            )}
-          </Footnote>
-        </div>
+          </p>
+        </Typography>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
-            {footer?.tertiaryLinks.map(
-              (link) =>
-                link.url && (
-                  <Footnote
-                    asChild
-                    type="label"
-                    textTransform="uppercase"
-                    key={link.title}
-                  >
-                    <Link
-                      className={styles.link}
-                      color="peach50"
-                      href={link.url}
-                      target="_blank"
-                    >
-                      {link.title}
-                    </Link>
-                  </Footnote>
-                )
-            )}
+            {footer?.tertiaryLinks.map((link) => (
+              <Typography key={link.title} variant="Tag/sm">
+                <Link
+                  className={styles.link}
+                  color="peach50"
+                  href={link.url}
+                  target="_blank"
+                >
+                  {link.title}
+                </Link>
+              </Typography>
+            ))}
          </nav>
          <LanguageSwitcher type="footer" />
        </div>
      </div>
-    </section>
+    </div>
  )
 }

@@ -99,8 +92,8 @@ export async function FooterDetailsSkeleton() {
        </nav>
      </div>
      <div className={styles.bottomContainer}>
-        <div className={styles.copyrightContainer}>
-          <Footnote type="label" textTransform="uppercase">
+        <Typography variant="Tag/sm">
+          <p>
            {intl.formatMessage(
              {
                defaultMessage:
@@ -108,8 +101,8 @@ export async function FooterDetailsSkeleton() {
              },
              { currentYear }
            )}
-          </Footnote>
-        </div>
+          </p>
+        </Typography>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
            <SkeletonShimmer width="40ch" height="20px" contrast="dark" />
--- a/apps/scandic-web/components/Footer/Navigation/MainNav/mainnav.module.css
+++ b/apps/scandic-web/components/Footer/Navigation/MainNav/mainnav.module.css
@@ -7,16 +7,12 @@
 }

 .mainNavigationItem {
-  padding: var(--Spacing-x3) 0;
+  padding: var(--Space-x3) 0;
  border-bottom: 1px solid var(--Base-Border-Normal);

  &:first-child {
    padding-top: 0;
  }
-
-  &:last-child {
-    border-bottom: 0;
-  }
 }

 .mainNavigationLink {
--- a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
@@ -1,9 +1,10 @@
 "use client"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"

@@ -20,58 +21,49 @@ export default function FooterSecondaryNav({

  return (
    <div className={styles.secondaryNavigation}>
-      {appDownloads && (
-        <nav className={styles.secondaryNavigationGroup}>
-          <Caption
-            color="textMediumContrast"
-            textTransform="uppercase"
-            type="label"
-          >
-            {appDownloads.title}
-          </Caption>
-          {appDownloads.links.length ? (
-            <ul className={styles.secondaryNavigationList}>
-              {appDownloads.links.map(
-                ({ href, type }) =>
-                  href && (
-                    <li key={type} className={styles.appDownloadItem}>
-                      <a
-                        href={href.href}
-                        target="_blank"
-                        aria-label={href.title}
-                        onClick={() => trackSocialMediaClick(href.title)}
-                      >
-                        <Image
-                          src={
-                            AppDownLoadLinks[
-                              `${type}_${lang}` as keyof typeof AppDownLoadLinks
-                            ]
-                          }
-                          alt=""
-                          width={125}
-                          height={40}
-                        />
-                      </a>
-                    </li>
-                  )
-              )}
-            </ul>
-          ) : null}
-        </nav>
-      )}
+      <nav className={styles.secondaryNavigationGroup}>
+        <Typography variant="Title/Overline/sm">
+          <h3>{appDownloads.title}</h3>
+        </Typography>
+        {appDownloads.links.length ? (
+          <ul className={styles.secondaryNavigationList}>
+            {appDownloads.links.map(
+              ({ href, type }) =>
+                href && (
+                  <li key={type}>
+                    <a
+                      href={href.href}
+                      target="_blank"
+                      aria-label={href.title}
+                      onClick={() => trackSocialMediaClick(href.title)}
+                    >
+                      <Image
+                        src={
+                          AppDownLoadLinks[
+                            `${type}_${lang}` as keyof typeof AppDownLoadLinks
+                          ]
+                        }
+                        alt={href.title}
+                        width={125}
+                        height={40}
+                      />
+                    </a>
+                  </li>
+                )
+            )}
+          </ul>
+        ) : null}
+      </nav>
+
      {secondaryLinks.map((group) => (
        <nav className={styles.secondaryNavigationGroup} key={group.title}>
-          <Caption
-            color="textMediumContrast"
-            textTransform="uppercase"
-            type="label"
-          >
-            {group.title}
-          </Caption>
-          {group?.links.length ? (
+          <Typography variant="Title/Overline/sm">
+            <h3>{group.title}</h3>
+          </Typography>
+          {group.links.length ? (
            <ul className={styles.secondaryNavigationList}>
              {group.links.map((link) => (
-                <li key={link.title} className={styles.secondaryNavigationItem}>
+                <li key={link.title}>
                  <Link
                    href={link.url}
                    target={link.openInNewTab ? "_blank" : undefined}
@@ -96,10 +88,10 @@ export function FooterSecondaryNavSkeleton() {
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="10ch" />
        <ul className={styles.secondaryNavigationList}>
-          <li className={styles.appDownloadItem}>
+          <li>
            <SkeletonShimmer width="16ch" />
          </li>
-          <li className={styles.appDownloadItem}>
+          <li>
            <SkeletonShimmer width="16ch" />
          </li>
        </ul>
@@ -107,7 +99,7 @@ export function FooterSecondaryNavSkeleton() {
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="20ch" />
        <ul className={styles.secondaryNavigationList}>
-          <li className={styles.secondaryNavigationItem}>
+          <li>
            <SkeletonShimmer width="25ch" />
          </li>
        </ul>
@@ -115,16 +107,16 @@ export function FooterSecondaryNavSkeleton() {
      <nav className={styles.secondaryNavigationGroup}>
        <SkeletonShimmer width="15ch" />
        <ul className={styles.secondaryNavigationList}>
-          <li className={styles.secondaryNavigationItem}>
+          <li>
            <SkeletonShimmer width="30ch" />
          </li>
-          <li className={styles.secondaryNavigationItem}>
+          <li>
            <SkeletonShimmer width="36ch" />
          </li>
-          <li className={styles.secondaryNavigationItem}>
+          <li>
            <SkeletonShimmer width="12ch" />
          </li>
-          <li className={styles.secondaryNavigationItem}>
+          <li>
            <SkeletonShimmer width="20ch" />
          </li>
        </ul>
--- a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
+++ b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
@@ -1,35 +1,21 @@
 .secondaryNavigation {
  display: flex;
  flex-direction: column-reverse;
-  gap: var(--Spacing-x6);
+  gap: var(--Space-x6);
 }

 .secondaryNavigationList {
  display: flex;
  flex-direction: column;
  list-style: none;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x2);
 }

 .secondaryNavigationGroup {
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x3);
-}
-
-.secondaryNavigationGroupTitle {
-  color: var(--Base-Text-Medium-contrast);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  font-family: var(--typography-Body-Bold-fontFamily);
-  margin: 0;
-}
-
-.secondaryNavigationLink {
-  color: var(--Base-Text-High-contrast);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  font-family: var(--typography-Body-Bold-fontFamily);
-  margin: 0;
-  text-decoration: none;
+  gap: var(--Space-x3);
+  color: var(--Primary-Dim-On-Surface-Accent);
 }

@media screen and (min-width: 768px) {
--- a/apps/scandic-web/components/Footer/Navigation/index.tsx
+++ b/apps/scandic-web/components/Footer/Navigation/index.tsx
@@ -12,7 +12,7 @@ export default async function FooterNavigation() {
  }

  return (
-    <section className={styles.section}>
+    <div className={styles.section}>
      <div className={styles.maxWidth}>
        <FooterMainNav mainLinks={footer.mainLinks} />
        <FooterSecondaryNav
@@ -20,17 +20,17 @@ export default async function FooterNavigation() {
          appDownloads={footer.appDownloads}
        />
      </div>
-    </section>
+    </div>
  )
 }

 export function FooterNavigationSkeleton() {
  return (
-    <section className={styles.section}>
+    <div className={styles.section}>
      <div className={styles.maxWidth}>
        <FooterMainNavSkeleton />
        <FooterSecondaryNavSkeleton />
      </div>
-    </section>
+    </div>
  )
 }
--- a/apps/scandic-web/components/Footer/Navigation/navigation.module.css
+++ b/apps/scandic-web/components/Footer/Navigation/navigation.module.css
@@ -1,28 +1,28 @@
 .section {
  background: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x7) 0;
+  padding: var(--Space-x7) 0;
 }

 .maxWidth {
  display: grid;
-  gap: var(--Spacing-x6);
+  gap: var(--Space-x6);
  margin: 0 auto;
  max-width: var(--max-width-page);
 }

@media screen and (min-width: 768px) {
  .section {
-    padding: var(--Spacing-x9) 0;
+    padding: var(--Space-x8) 0;
  }

  .maxWidth {
-    gap: var(--Spacing-x4);
+    gap: var(--Space-x4);
  }
 }

@media screen and (min-width: 1367px) {
  .maxWidth {
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
    grid-template-columns: 1fr 1fr;
  }
 }