feat(SW-185): Refactor mocked data

2024-08-22 16:08:11 +02:00
parent 4ae1c390f2
commit d658e223e2
5 changed files with 92 additions and 76 deletions
--- a/components/Footer/Details/index.tsx
+++ b/components/Footer/Details/index.tsx
@@ -6,7 +6,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getLang } from "@/i18n/serverContext"

-import { detailsData } from "../mockedData"
+import { footer } from "../mockedData"

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

@@ -20,6 +20,13 @@ function socialIcon(iconName: string): JSX.Element | null {
 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}>
@@ -36,7 +43,7 @@ export default function FooterDetails() {
          />
        </Link>
        <nav className={styles.socialNav}>
-          {detailsData.social.links.map((link) => (
+          {socialMedia.links.map((link) => (
            <a
              className={styles.socialLink}
              color="white"
@@ -53,15 +60,15 @@ export default function FooterDetails() {
      <div className={styles.bottomContainer}>
        <div className={styles.copyrightContainer}>
          <Footnote textTransform="uppercase">
-            © {currentYear} {detailsData.copyrightCompany}
+            © {currentYear} {copyrightCompany}
          </Footnote>
          <Footnote textTransform="uppercase" color="peach50">
-            {detailsData.copyrightInfo}
+            {copyrightInfo}
          </Footnote>
        </div>
        <div className={styles.navigationContainer}>
          <nav className={styles.navigation}>
-            {detailsData.links.map((link) => (
+            {tertiaryLinks.map((link) => (
              <Footnote asChild textTransform="uppercase" key={link.id}>
                <Link
                  className={styles.link}
@@ -78,7 +85,7 @@ export default function FooterDetails() {
          {
            // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
          }
-          <LanguageSwitcher urls={detailsData.languageSwitcher.urls} />
+          <LanguageSwitcher urls={languageSwitcher.urls} />
        </div>
      </div>
    </section>
--- a/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/components/Footer/Navigation/SecondaryNav/index.tsx
@@ -1,4 +1,3 @@
-import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"

@@ -11,35 +10,27 @@ export default function FooterSecondaryNav({
 }: FooterSecondaryNavProps) {
  return (
    <div className={styles.secondaryNavigation}>
-      {Object.entries(secondaryLinks).map(([key, group]) => (
-        <nav key={key} className={styles.secondaryNavigationGroup}>
-          <Body
-            className={styles.secondaryNavigationGroupDescription}
-            color="peach80"
-            textTransform="uppercase"
-          >
-            {group.title}
+      {secondaryLinks.map((link) => (
+        <nav className={styles.secondaryNavigationGroup} key={link.title}>
+          <Body color="peach80" textTransform="uppercase">
+            {link.title}
          </Body>
-
          <ul className={styles.secondaryNavigationList}>
-            {group.links.map((link) => (
+            {link.links.map((link) => (
              <li key={link.id} className={styles.secondaryNavigationItem}>
-                <Link
-                  color="burgundy"
-                  href={link.href}
-                  className={styles.secondaryNavigationLink}
-                >
-                  {link.image ? (
-                    <Image
-                      src={link.image.src}
-                      alt={link.title}
-                      width={125}
-                      height={40}
-                    />
-                  ) : (
-                    link.title
-                  )}
-                </Link>
+                {link.isExternal ? (
+                  <a
+                    href={link.href}
+                    key={link.title}
+                    target={link.openInNewTab ? "_blank" : "_self"}
+                  >
+                    {link.title}
+                  </a>
+                ) : (
+                  <Link href={link.href} key={link.title}>
+                    {link.title}
+                  </Link>
+                )}
              </li>
            ))}
          </ul>
--- a/components/Footer/Navigation/index.tsx
+++ b/components/Footer/Navigation/index.tsx
@@ -1,13 +1,13 @@
 import MaxWidth from "@/components/MaxWidth"

-import { navigationData } from "../mockedData"
+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 } = navigationData
+  const { mainLinks, secondaryLinks } = footer
  return (
    <section className={styles.section}>
      <MaxWidth tag="div" className={styles.maxWidth}>
--- a/components/Footer/mockedData.ts
+++ b/components/Footer/mockedData.ts
@@ -1,116 +1,136 @@
-export const navigationData = {
+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,
    },
  ],
-  secondaryLinks: {
-    app: {
-      title: "Scandic App",
-      links: [
-        {
-          title: "App Store",
-          href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712",
-          id: "app-store",
-          image: {
-            src: "/_static/img/app-store-badge.svg",
-            alt: "Download on the App Store",
-          },
-        },
-        {
-          title: "Google Play",
-          href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels",
-          id: "google-play",
-          image: {
-            src: "/_static/img/google-play-badge.svg",
-          },
-        },
-      ],
-    },
-    customerService: {
+  appDownloads: {
+    title: "Scandic App",
+    links: [
+      {
+        title: "App Store",
+        href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712",
+        id: "app-store",
+      },
+      {
+        title: "Google Play",
+        href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels",
+        id: "google-play",
+      },
+    ],
+  },
+
+  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,
        },
      ],
    },
-    about: {
+    {
      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,
        },
      ],
    },
-  },
-}
+  ],

-export const detailsData = {
  copyrightCompany: "Scandic AB",
  copyrightInfo: "All rights reserved.",
-  social: {
+  socialMedia: {
    links: [
      {
        title: "Facebook",
@@ -129,7 +149,7 @@ export const detailsData = {
      },
    ],
  },
-  links: [
+  tertiaryLinks: [
    {
      title: "Cookies",
      href: "/cookies",
--- a/types/components/footer/navigation.ts
+++ b/types/components/footer/navigation.ts
@@ -2,6 +2,8 @@ export type FooterMainNav = {
  id: string
  href: string
  title: string
+  openInNewTab: boolean
+  isExternal: boolean
 }
 export type FooterMainNavProps = {
  mainLinks: FooterMainNav[]
@@ -11,16 +13,12 @@ export type FooterSecondaryNav = {
  id: string
  href: string
  title: string
-  image?: {
-    src: string
-  }
+  openInNewTab: boolean
+  isExternal: boolean
 }
 export type FooterSecondaryNavProps = {
-  secondaryLinks: Record<
-    string,
-    {
-      title: string
-      links: FooterSecondaryNav[]
-    }
-  >
+  secondaryLinks: {
+    title: string
+    links: FooterSecondaryNav[]
+  }[]
 }