Merged in feat/SW-185-implement-footer-navigation (pull request #437)

Feat/SW-185 implement footer navigation Approved-by: Erik Tiekstra Approved-by: Matilda Landström Approved-by: Simon.Emanuelsson
2024-08-30 06:36:31 +00:00
parent 1803e8e1fb b86d799fb1
commit 4274bdc220
26 changed files with 771 additions and 10 deletions
@@ -0,0 +1,69 @@
+.details {
+  background: var(--Base-Text-High-contrast);
+  color: var(--Primary-Dark-On-Surface-Text);
+  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x6);
+}
+
+.topContainer {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x2);
+}
+
+.bottomContainer {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column-reverse;
+}
+
+.socialNav {
+  display: flex;
+  gap: var(--Spacing-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);
+}
+
+.navigation {
+  display: flex;
+  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 {
+    padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4);
+  }
+  .bottomContainer {
+    border-top: 1px solid var(--Base-Text-Medium-contrast);
+    padding-top: var(--Spacing-x2);
+    flex-direction: row;
+  }
+  .navigationContainer {
+    border-bottom: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+}
@@ -0,0 +1,92 @@
+import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import { getLang } from "@/i18n/serverContext"
+
+import { footer } from "../mockedData"
+
+import styles from "./details.module.css"
+
+import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
+import { IconName } from "@/types/components/icon"
+
+function SocialIcon({ iconName }: SocialIconsProps) {
+  const SocialIcon = getIconByIconName(iconName as IconName)
+  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
+}
+
+export default function FooterDetails() {
+  const lang = getLang()
+  const currentYear = new Date().getFullYear()
+  const {
+    socialMedia,
+    copyrightCompany,
+    copyrightInfo,
+    tertiaryLinks,
+    languageSwitcher,
+  } = footer
+  return (
+    <section className={styles.details}>
+      <div className={styles.topContainer}>
+        <Link href={`/${lang}`}>
+          <Image
+            alt="Scandic Hotels logo"
+            className={styles.logo}
+            data-js="scandiclogoimg"
+            data-nosvgsrc="/_static/img/scandic-logotype.png"
+            itemProp="logo"
+            height={22}
+            src="/_static/img/scandic-logotype-white.svg"
+            width={103}
+          />
+        </Link>
+        <nav className={styles.socialNav}>
+          {socialMedia.links.map((link) => (
+            <a
+              className={styles.socialLink}
+              color="white"
+              href={link.href}
+              key={link.id}
+              target="_blank"
+              aria-label={link.title}
+            >
+              <SocialIcon iconName={link.title} />
+            </a>
+          ))}
+        </nav>
+      </div>
+      <div className={styles.bottomContainer}>
+        <div className={styles.copyrightContainer}>
+          <Footnote textTransform="uppercase">
+            © {currentYear} {copyrightCompany}
+          </Footnote>
+          <Footnote textTransform="uppercase" color="peach50">
+            {copyrightInfo}
+          </Footnote>
+        </div>
+        <div className={styles.navigationContainer}>
+          <nav className={styles.navigation}>
+            {tertiaryLinks.map((link) => (
+              <Footnote asChild textTransform="uppercase" key={link.id}>
+                <Link
+                  className={styles.link}
+                  color="peach50"
+                  href={link.href}
+                  target="_blank"
+                >
+                  {link.title}
+                </Link>
+              </Footnote>
+            ))}
+          </nav>
+          {
+            // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
+          }
+          <LanguageSwitcher urls={languageSwitcher.urls} />
+        </div>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,31 @@
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./mainnav.module.css"
+
+import type { 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}>
+            <Subtitle type="two" asChild>
+              <Link
+                color="burgundy"
+                href={link.href}
+                className={styles.mainNavigationLink}
+              >
+                {link.title}
+
+                <ArrowRightIcon color="peach80" />
+              </Link>
+            </Subtitle>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
@@ -0,0 +1,29 @@
+.mainNavigation {
+  width: 100%;
+}
+
+.mainNavigationList {
+  list-style: none;
+}
+
+.mainNavigationItem {
+  padding: var(--Spacing-x3) 0;
+  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider);
+  &:first-child {
+    padding-top: 0;
+  }
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.mainNavigationLink {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media screen and (min-width: 1367px) {
+  .mainNavigation {
+    max-width: 360px;
+  }
+}
@@ -0,0 +1,68 @@
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./secondarynav.module.css"
+
+import {
+  AppDownLoadLinks,
+  type FooterSecondaryNavProps,
+} from "@/types/components/footer/navigation"
+
+export default function FooterSecondaryNav({
+  secondaryLinks,
+  appDownloads,
+}: FooterSecondaryNavProps) {
+  return (
+    <div className={styles.secondaryNavigation}>
+      <nav className={styles.secondaryNavigationGroup}>
+        <Body color="peach80" textTransform="uppercase">
+          {appDownloads.title}
+        </Body>
+        <ul className={styles.secondaryNavigationList}>
+          {appDownloads.links.map((link) => (
+            <li key={link.id} className={styles.appDownloadItem}>
+              <a href={link.href} target="_blank" aria-label={link.title}>
+                <Image
+                  src={
+                    AppDownLoadLinks[link.id as keyof typeof AppDownLoadLinks]
+                  }
+                  alt={link.title}
+                  width={125}
+                  height={40}
+                />
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      {secondaryLinks.map((link) => (
+        <nav className={styles.secondaryNavigationGroup} key={link.title}>
+          <Body color="peach80" textTransform="uppercase">
+            {link.title}
+          </Body>
+          <ul className={styles.secondaryNavigationList}>
+            {link.links.map((link) => (
+              <li key={link.id} className={styles.secondaryNavigationItem}>
+                {link.isExternal ? (
+                  <a
+                    href={link.href}
+                    key={link.title}
+                    target={link.openInNewTab ? "_blank" : "_self"}
+                    aria-label={link.title}
+                  >
+                    {link.title}
+                  </a>
+                ) : (
+                  <Link href={link.href} key={link.title}>
+                    {link.title}
+                  </Link>
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,34 @@
+.secondaryNavigation {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x6);
+  margin-top: var(--Spacing-x6);
+}
+
+.secondaryNavigationList {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  gap: var(--Spacing-x3);
+}
+
+.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;
+}
+
+@media screen and (min-width: 1367px) {
+  .secondaryNavigation {
+    margin-top: 0;
+    gap: 80px;
+    flex-direction: row;
+  }
+}
@@ -0,0 +1,20 @@
+import { footer } from "../mockedData"
+import FooterMainNav from "./MainNav"
+import FooterSecondaryNav from "./SecondaryNav"
+
+import styles from "./navigation.module.css"
+
+export default function FooterNavigation() {
+  const { mainLinks, secondaryLinks, appDownloads } = footer
+  return (
+    <section className={styles.section}>
+      <div className={styles.maxWidth}>
+        <FooterMainNav mainLinks={mainLinks} />
+        <FooterSecondaryNav
+          secondaryLinks={secondaryLinks}
+          appDownloads={appDownloads}
+        />
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,21 @@
+.section {
+  background: var(--Primary-Light-Surface-Normal);
+  padding: var(--Spacing-x7) var(--Spacing-x2);
+}
+
+.maxWidth {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  max-width: var(--max-width-content);
+}
+
+@media screen and (min-width: 1367px) {
+  .section {
+    padding: var(--Spacing-x9) 0;
+  }
+  .maxWidth {
+    flex-direction: row;
+  }
+}
@@ -0,0 +1,11 @@
+import FooterDetails from "./Details"
+import FooterNavigation from "./Navigation"
+
+export default function Footer() {
+  return (
+    <footer>
+      <FooterNavigation />
+      <FooterDetails />
+    </footer>
+  )
+}
@@ -0,0 +1,192 @@
+export const footer = {
+  mainLinks: [
+    {
+      title: "Travel guides",
+      href: "/travel-guides",
+      id: "travel-guides",
+      openInNewTab: false,
+      isExternal: false,
+    },
+    {
+      title: "New hotels",
+      href: "/new-hotels",
+      id: "new-hotels",
+      openInNewTab: false,
+      isExternal: false,
+    },
+    {
+      title: "Accessibililty",
+      href: "/accessibility",
+      id: "accessibility",
+      openInNewTab: false,
+      isExternal: false,
+    },
+    {
+      title: "Sustanability",
+      href: "/sustainability",
+      id: "sustainability",
+      openInNewTab: false,
+      isExternal: false,
+    },
+  ],
+  appDownloads: {
+    title: "Scandic App",
+    links: [
+      {
+        title: "App Store",
+        href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712",
+        id: "apple",
+      },
+      {
+        title: "Google Play",
+        href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels",
+        id: "google",
+      },
+    ],
+  },
+
+  secondaryLinks: [
+    {
+      title: "Customer service",
+      links: [
+        {
+          title: "Contact us",
+          href: "/contact-us",
+          id: "contact-us",
+          openInNewTab: false,
+          isExternal: false,
+        },
+        {
+          title: "Frequntly asked questions",
+          href: "/frequently-asked-questions",
+          id: "frequently-asked-questions",
+          openInNewTab: false,
+          isExternal: false,
+        },
+        {
+          title: "Rates and policys",
+          href: "/rates-and-policies",
+          id: "rates-and-policies",
+          openInNewTab: false,
+          isExternal: false,
+        },
+        {
+          title: "Terms and conditions",
+          href: "/terms-and-conditions",
+          id: "terms-and-conditions",
+          openInNewTab: false,
+          isExternal: false,
+        },
+      ],
+    },
+    {
+      title: "About Scandic Hotels",
+      links: [
+        {
+          title: "Scandic Group",
+          href: "/scandic-group",
+          id: "scandic-group",
+          openInNewTab: false,
+          isExternal: false,
+        },
+        {
+          title: "Investors",
+          href: "/investors",
+          id: "investors",
+          openInNewTab: false,
+          isExternal: false,
+        },
+        {
+          title: "Press",
+          href: "/press",
+          id: "press",
+          openInNewTab: false,
+          isExternal: false,
+        },
+        {
+          title: "Sponsors",
+          href: "/sponsors",
+          id: "sponsors",
+          openInNewTab: false,
+          isExternal: false,
+        },
+        {
+          title: "Partners",
+          href: "/partners",
+          id: "partners",
+          openInNewTab: false,
+          isExternal: false,
+        },
+        {
+          title: "Career",
+          href: "/career",
+          id: "career",
+          openInNewTab: false,
+          isExternal: false,
+        },
+      ],
+    },
+  ],
+
+  copyrightCompany: "Scandic AB",
+  copyrightInfo: "All rights reserved.",
+  socialMedia: {
+    links: [
+      {
+        title: "Facebook",
+        href: "https://www.facebook.com/scandichotels/",
+        id: "facebook",
+      },
+      {
+        title: "Instagram",
+        href: "https://www.instagram.com/scandichotels/",
+        id: "instagram",
+      },
+      {
+        title: "Tripadvisor",
+        href: "https://www.tripadvisor.com/Hotel_Review-g297628-d1020208712-Reviews-Scandic_Hotels-Stockholm_Sweden.html",
+        id: "tripadvisor",
+      },
+    ],
+  },
+  tertiaryLinks: [
+    {
+      title: "Cookies",
+      href: "/cookies",
+      id: "cookies",
+    },
+    {
+      title: "Privacy policy",
+      href: "/privacy",
+      id: "privacy",
+    },
+  ],
+  languageSwitcher: {
+    urls: {
+      da: {
+        url: "https://www.scandichotels.com/da",
+        isExternal: true,
+      },
+      de: {
+        url: "https://www.scandichotels.com/de",
+        isExternal: true,
+      },
+      en: {
+        url: "https://www.scandichotels.com/en",
+        isExternal: true,
+      },
+      fi: {
+        url: "https://www.scandichotels.com/fi",
+        isExternal: true,
+      },
+      no: {
+        url: "https://www.scandichotels.com/no",
+        isExternal: true,
+      },
+      sv: {
+        url: "https://www.scandichotels.com/sv",
+        isExternal: true,
+      },
+    },
+  },
+}
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function FacebookIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18.25 2C19.283 2 20.1662 2.36675 20.8997 3.10026C21.6332 3.83377 22 4.71701 22 5.75V18.25C22 19.283 21.6332 20.1662 20.8997 20.8997C20.1662 21.6332 19.283 22 18.25 22H15.8021V14.2526H18.3932L18.7839 11.2318H15.8021V9.30469C15.8021 8.81858 15.9041 8.45399 16.1081 8.21094C16.3121 7.96788 16.7092 7.84635 17.2995 7.84635L18.888 7.83333V5.13802C18.3411 5.0599 17.5686 5.02083 16.5703 5.02083C15.3898 5.02083 14.4457 5.36806 13.7383 6.0625C13.0308 6.75694 12.6771 7.73785 12.6771 9.00521V11.2318H10.0729V14.2526H12.6771V22H5.75C4.71701 22 3.83377 21.6332 3.10026 20.8997C2.36675 20.1662 2 19.283 2 18.25V5.75C2 4.71701 2.36675 3.83377 3.10026 3.10026C3.83377 2.36675 4.71701 2 5.75 2H18.25Z"
+        fill="black"
+      />
+    </svg>
+  )
+}
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function InstagramIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M17.34 5.46C17.1027 5.46 16.8707 5.53038 16.6733 5.66224C16.476 5.79409 16.3222 5.98151 16.2313 6.20078C16.1405 6.42005 16.1168 6.66133 16.1631 6.89411C16.2094 7.12689 16.3236 7.34071 16.4915 7.50853C16.6593 7.67635 16.8731 7.79064 17.1059 7.83694C17.3387 7.88324 17.5799 7.85948 17.7992 7.76866C18.0185 7.67783 18.2059 7.52402 18.3378 7.32668C18.4696 7.12935 18.54 6.89734 18.54 6.66C18.54 6.34174 18.4136 6.03652 18.1885 5.81147C17.9635 5.58643 17.6583 5.46 17.34 5.46ZM21.94 7.88C21.9206 7.0503 21.7652 6.2294 21.48 5.45C21.2257 4.78313 20.83 4.17928 20.32 3.68C19.8248 3.16743 19.2196 2.77418 18.55 2.53C17.7727 2.23616 16.9508 2.07721 16.12 2.06C15.06 2 14.72 2 12 2C9.28 2 8.94 2 7.88 2.06C7.04915 2.07721 6.22734 2.23616 5.45 2.53C4.78168 2.77665 4.17693 3.16956 3.68 3.68C3.16743 4.17518 2.77418 4.78044 2.53 5.45C2.23616 6.22734 2.07721 7.04915 2.06 7.88C2 8.94 2 9.28 2 12C2 14.72 2 15.06 2.06 16.12C2.07721 16.9508 2.23616 17.7727 2.53 18.55C2.77418 19.2196 3.16743 19.8248 3.68 20.32C4.17693 20.8304 4.78168 21.2234 5.45 21.47C6.22734 21.7638 7.04915 21.9228 7.88 21.94C8.94 22 9.28 22 12 22C14.72 22 15.06 22 16.12 21.94C16.9508 21.9228 17.7727 21.7638 18.55 21.47C19.2196 21.2258 19.8248 20.8326 20.32 20.32C20.8322 19.8226 21.2283 19.2182 21.48 18.55C21.7652 17.7706 21.9206 16.9497 21.94 16.12C21.94 15.06 22 14.72 22 12C22 9.28 22 8.94 21.94 7.88ZM20.14 16C20.1327 16.6348 20.0178 17.2637 19.8 17.86C19.6403 18.2952 19.3839 18.6884 19.05 19.01C18.7256 19.3405 18.3332 19.5964 17.9 19.76C17.3037 19.9778 16.6748 20.0927 16.04 20.1C15.04 20.15 14.67 20.16 12.04 20.16C9.41 20.16 9.04 20.16 8.04 20.1C7.38089 20.1123 6.72459 20.0109 6.1 19.8C5.68578 19.6281 5.31136 19.3728 5 19.05C4.66809 18.7287 4.41484 18.3352 4.26 17.9C4.01586 17.2952 3.88044 16.6519 3.86 16C3.86 15 3.8 14.63 3.8 12C3.8 9.37 3.8 9 3.86 8C3.86448 7.35106 3.98295 6.70795 4.21 6.1C4.38605 5.67791 4.65627 5.30166 5 5C5.30381 4.65617 5.67929 4.3831 6.1 4.2C6.70955 3.98004 7.352 3.86508 8 3.86C9 3.86 9.37 3.8 12 3.8C14.63 3.8 15 3.8 16 3.86C16.6348 3.86728 17.2637 3.98225 17.86 4.2C18.3144 4.36865 18.7223 4.64285 19.05 5C19.3777 5.30718 19.6338 5.68273 19.8 6.1C20.0223 6.70893 20.1373 7.35178 20.14 8C20.19 9 20.2 9.37 20.2 12C20.2 14.63 20.19 15 20.14 16ZM12 6.87C10.9858 6.87198 9.99496 7.17453 9.15265 7.73942C8.31035 8.30431 7.65438 9.1062 7.26763 10.0438C6.88089 10.9813 6.78072 12.0125 6.97979 13.0069C7.17886 14.0014 7.66824 14.9145 8.38608 15.631C9.10392 16.3474 10.018 16.835 11.0129 17.0321C12.0077 17.2293 13.0387 17.1271 13.9755 16.7385C14.9123 16.35 15.7129 15.6924 16.2761 14.849C16.8394 14.0056 17.14 13.0142 17.14 12C17.1413 11.3251 17.0092 10.6566 16.7512 10.033C16.4933 9.40931 16.1146 8.84281 15.6369 8.36605C15.1592 7.88929 14.5919 7.51168 13.9678 7.25493C13.3436 6.99818 12.6749 6.86736 12 6.87ZM12 15.33C11.3414 15.33 10.6976 15.1347 10.15 14.7688C9.60234 14.4029 9.17552 13.8828 8.92348 13.2743C8.67144 12.6659 8.6055 11.9963 8.73398 11.3503C8.86247 10.7044 9.17963 10.111 9.64533 9.64533C10.111 9.17963 10.7044 8.86247 11.3503 8.73398C11.9963 8.6055 12.6659 8.67144 13.2743 8.92348C13.8828 9.17552 14.4029 9.60234 14.7688 10.15C15.1347 10.6976 15.33 11.3414 15.33 12C15.33 12.4373 15.2439 12.8703 15.0765 13.2743C14.9092 13.6784 14.6639 14.0454 14.3547 14.3547C14.0454 14.6639 13.6784 14.9092 13.2743 15.0765C12.8703 15.2439 12.4373 15.33 12 15.33Z"
+        fill="black"
+      />
+    </svg>
+  )
+}
@@ -1,5 +1,8 @@
 import { FC } from "react"

+import FacebookIcon from "./Facebook"
+import InstagramIcon from "./Instagram"
+import TripAdvisorIcon from "./TripAdvisor"
 import {
  AccessibilityIcon,
  AccountCircleIcon,
@@ -85,6 +88,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return ElectricBikeIcon
    case IconName.Email:
      return EmailIcon
+    case IconName.Facebook:
+      return FacebookIcon
    case IconName.Fitness:
      return FitnessIcon
    case IconName.Globe:
@@ -95,6 +100,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return ImageIcon
    case IconName.InfoCircle:
      return InfoCircleIcon
+    case IconName.Instagram:
+      return InstagramIcon
    case IconName.Location:
      return LocationIcon
    case IconName.Lock:
@@ -115,6 +122,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return RestaurantIcon
    case IconName.Sauna:
      return SaunaIcon
+    case IconName.Tripadvisor:
+      return TripAdvisorIcon
    case IconName.TshirtWash:
      return TshirtWashIcon
    case IconName.WarningTriangle:
@@ -126,6 +126,10 @@
  color: var(--Scandic-Brand-Pale-Peach);
 }

+.peach50 {
+  color: var(--Scandic-Peach-50);
+}
+
 .peach80 {
  color: var(--Primary-Light-On-Surface-Accent);
 }
@@ -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,
      red: styles.red,
@@ -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: var(--typography-Body-Bold-fontWeight);
+  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(--Base-Text-Medium-contrast);
+}
@@ -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} />
 }
@@ -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: {
@@ -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: var(--typography-Footnote-Bold-fontWeight);
+  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);
 }
@@ -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: {