feat(SW-187): Added social media data and copyright label

components/Footer/Details/index.tsx

@@ -3,12 +3,14 @@ import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
 import { footer } from "../mockedData"
 
 import styles from "./details.module.css"
 
+import type { FooterDetailsProps } from "@/types/components/footer/navigation"
 import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
 import { IconName } from "@/types/components/icon"
 
@@ -17,16 +19,13 @@ function SocialIcon({ iconName }: SocialIconsProps) {
   return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
 }
 
-export default function FooterDetails() {
+export default async function FooterDetails({
+  socialMedia,
+}: FooterDetailsProps) {
   const lang = getLang()
+  const { formatMessage } = await getIntl()
   const currentYear = new Date().getFullYear()
-  const {
-    socialMedia,
-    copyrightCompany,
-    copyrightInfo,
-    tertiaryLinks,
-    languageSwitcher,
-  } = footer
+  const { tertiaryLinks, languageSwitcher } = footer
   return (
     <section className={styles.details}>
       <div className={styles.topContainer}>
@@ -43,27 +42,28 @@ export default function FooterDetails() {
           />
         </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>
-          ))}
+          {socialMedia?.links.map(
+            (link) =>
+              link.href && (
+                <a
+                  className={styles.socialLink}
+                  color="white"
+                  href={link.href.href}
+                  key={link.href.title}
+                  target="_blank"
+                  aria-label={link.href.title}
+                >
+                  <SocialIcon iconName={link.href.title} />
+                </a>
+              )
+          )}
         </nav>
       </div>
       <div className={styles.bottomContainer}>
         <div className={styles.copyrightContainer}>
           <Footnote textTransform="uppercase">
-            © {currentYear} {copyrightCompany}
-          </Footnote>
-          <Footnote textTransform="uppercase" color="peach50">
-            {copyrightInfo}
+            © {currentYear}{" "}
+            {formatMessage({ id: "Copyright all rights reserved" })}
           </Footnote>
         </div>
         <div className={styles.navigationContainer}>
@@ -81,9 +81,6 @@ export default function FooterDetails() {
               </Footnote>
             ))}
           </nav>
-          {
-            // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
-          }
           <LanguageSwitcher type="desktopFooter" urls={languageSwitcher.urls} />
         </div>
       </div>

components/Footer/Navigation/SecondaryNav/index.tsx

@@ -5,46 +5,49 @@ import { getLang } from "@/i18n/serverContext"
 
 import styles from "./secondarynav.module.css"
 
-import {
-  AppDownLoadLinks,
-  type FooterSecondaryNavProps,
-} from "@/types/components/footer/navigation"
+import { AppDownLoadLinks } from "@/types/components/footer/appDownloadIcons"
+import { type FooterSecondaryNavProps } from "@/types/components/footer/navigation"
 
 export default function FooterSecondaryNav({
   secondaryLinks,
   appDownloads,
 }: FooterSecondaryNavProps) {
   const lang = getLang()
-  console.log("hej", JSON.stringify(secondaryLinks, null, 4))
+
   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.type} className={styles.appDownloadItem}>
-              <a
-                href={link.href.href}
-                target="_blank"
-                aria-label={link.href.title}
-              >
-                <Image
-                  src={
-                    AppDownLoadLinks[
-                      `${link.type}_${lang}` as keyof typeof AppDownLoadLinks
-                    ]
-                  }
-                  alt={link.href.title}
-                  width={125}
-                  height={40}
-                />
-              </a>
-            </li>
-          ))}
-        </ul>
-      </nav>
+      {appDownloads && (
+        <nav className={styles.secondaryNavigationGroup}>
+          <Body color="peach80" textTransform="uppercase">
+            {appDownloads.title}
+          </Body>
+          <ul className={styles.secondaryNavigationList}>
+            {appDownloads.links.map(
+              (link) =>
+                link.href && (
+                  <li key={link.type} className={styles.appDownloadItem}>
+                    <a
+                      href={link.href.href}
+                      target="_blank"
+                      aria-label={link.href.title}
+                    >
+                      <Image
+                        src={
+                          AppDownLoadLinks[
+                            `${link.type}_${lang}` as keyof typeof AppDownLoadLinks
+                          ]
+                        }
+                        alt={link.href.title}
+                        width={125}
+                        height={40}
+                      />
+                    </a>
+                  </li>
+                )
+            )}
+          </ul>
+        </nav>
+      )}
       {secondaryLinks.map((link) => (
         <nav className={styles.secondaryNavigationGroup} key={link.title}>
           <Body color="peach80" textTransform="uppercase">
@@ -52,7 +55,7 @@ export default function FooterSecondaryNav({
           </Body>
           <ul className={styles.secondaryNavigationList}>
             {link?.links?.map((link) => (
-              <li key={link.id} className={styles.secondaryNavigationItem}>
+              <li key={link.title} className={styles.secondaryNavigationItem}>
                 {link.isExternal ? (
                   <a
                     href={link.url}

components/Footer/Navigation/index.tsx

@@ -3,9 +3,13 @@ import FooterSecondaryNav from "./SecondaryNav"
 
 import styles from "./navigation.module.css"
 
-export default function FooterNavigation({ ...props }) {
-  const { mainLinks, secondaryLinks, appDownloads } = props
+import type { FooterNavigationProps } from "@/types/components/footer/navigation"
 
+export default function FooterNavigation({
+  mainLinks,
+  secondaryLinks,
+  appDownloads,
+}: FooterNavigationProps) {
   return (
     <section className={styles.section}>
       <div className={styles.maxWidth}>

components/Footer/index.tsx

@@ -10,12 +10,16 @@ export default async function Footer() {
     lang: getLang(),
   })
   if (!footerData) {
-    return null
+    return <FooterDetails />
   }
   return (
     <footer>
-      <FooterNavigation {...footerData} />
-      <FooterDetails />
+      <FooterNavigation
+        mainLinks={footerData.mainLinks}
+        secondaryLinks={footerData.secondaryLinks}
+        appDownloads={footerData.appDownloads}
+      />
+      <FooterDetails socialMedia={footerData.socialMedia} />
     </footer>
   )
 }