feat(SW-185): Footer mobile adjustments

2024-08-21 14:08:15 +02:00
parent 5277f3c786
commit 9eabde71c9
10 changed files with 269 additions and 20 deletions
--- a/components/Footer/Details/details.module.css
+++ b/components/Footer/Details/details.module.css
@@ -1,13 +1,52 @@
 .details {
  background: var(--Main-Grey-100);
  color: var(--Main-Grey-White);
-  padding: var(--Spacing-x5) var(--Spacing-x5) var(--Spacing-x9)
-    var(--Spacing-x5);
+  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7);
 }

-.imageContainer {
+.topContainer {
  display: flex;
  justify-content: space-between;
-  border-bottom: 1px solid rgba(227, 217, 209, 0.2);
  padding: 0 0 var(--Spacing-x2) 0;
+  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 #e3d9d120;
+}
+
+.navigation {
+  display: flex;
+  gap: var(--Spacing-x2);
+}
+
+@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);
+  }
+  .bottomContainer {
+    flex-direction: row;
+  }
+  .navigationContainer {
+    border-bottom: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
 }
--- a/components/Footer/Details/index.tsx
+++ b/components/Footer/Details/index.tsx
@@ -1,23 +1,75 @@
+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 Body from "@/components/TempDesignSystem/Text/Body"
+
+import { detailsData } from "../mockedData"

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

+import { IconName } from "@/types/components/icon"
+
+function socialIcon(iconName: string): JSX.Element | null {
+  const SocialIcon = getIconByIconName(iconName as IconName)
+  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
+}
+
 export default async function FooterDetails() {
  return (
    <section className={styles.details}>
-      <div className={styles.imageContainer}>
-        <Image
-          alt="Scandic Hotels logo"
-          className={styles.logo}
-          data-js="scandiclogoimg"
-          data-nosvgsrc="/_static/img/scandic-logotype.png"
-          itemProp="logo"
-          height={30}
-          src="/_static/img/scandic-logotype-white.svg"
-          width={138}
-        />
-        <div className={styles.socialLinks}>
-          <nav></nav>
+      <div className={styles.topContainer}>
+        <Link href="/">
+          <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}>
+          {detailsData.social.links.map((link) => (
+            <Link
+              className={styles.socialLink}
+              color="white"
+              href={link.href}
+              key={link.id}
+              target="_blank"
+              title={link.title}
+            >
+              {socialIcon(link.title)}
+            </Link>
+          ))}
+        </nav>
+      </div>
+      <div className={styles.bottomContainer}>
+        <Body color="white">
+          <strong>{detailsData.copyrightCompany}</strong>{" "}
+          {detailsData.copyrightInfo}
+        </Body>
+        <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>
+            ))}
+            {
+              // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
+            }
+          </nav>
+          <LanguageSwitcher urls={detailsData.languageSwitcher.urls} />
        </div>
      </div>
    </section>
--- a/components/Footer/Navigation/MainNav/mainnav.module.css
+++ b/components/Footer/Navigation/MainNav/mainnav.module.css
@@ -1,5 +1,4 @@
 .mainNavigation {
-  max-width: 360px;
  width: 100%;
 }

@@ -10,6 +9,9 @@
 .mainNavigationItem {
  padding: var(--Spacing-x3) 0;
  border-bottom: 1px solid var(--Scandic-Peach-20);
+  &:first-child {
+    padding-top: 0;
+  }
  &:last-child {
    border-bottom: 0;
  }
@@ -21,3 +23,9 @@
  display: flex;
  justify-content: space-between;
 }
+
+@media screen and (min-width: 1367px) {
+  .mainNavigation {
+    max-width: 360px;
+  }
+}
--- a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
+++ b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
@@ -1,6 +1,8 @@
 .secondaryNavigation {
  display: flex;
-  gap: 80px;
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x6);
+  margin-top: var(--Spacing-x6);
 }

 .secondaryNavigationList {
@@ -23,3 +25,11 @@
  font-family: var(--typography-Body-Bold-fontFamily);
  margin: 0;
 }
+
+@media screen and (min-width: 1367px) {
+  .secondaryNavigation {
+    margin-top: 0;
+    gap: 80px;
+    flex-direction: row;
+  }
+}
--- 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: 160px var(--Spacing-x9);
+  padding: var(--Spacing-x9) var(--Spacing-x2);
  color: var(--Scandic-Brand-Burgundy);
 }

@@ -8,4 +8,14 @@
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
+  flex-direction: column;
+}
+
+@media screen and (min-width: 1367px) {
+  .section {
+    padding: 160px var(--Spacing-x9);
+  }
+  .maxWidth {
+    flex-direction: row;
+  }
 }
--- a/components/Footer/mockedData.ts
+++ b/components/Footer/mockedData.ts
@@ -99,3 +99,67 @@ export const navigationData = {
    },
  },
 }
+
+export const detailsData = {
+  copyrightCompany: "© 2024 Scandic AB",
+  copyrightInfo: "All rights reserved.",
+  social: {
+    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",
+      },
+    ],
+  },
+  links: [
+    {
+      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,
+      },
+    },
+  },
+}