feat: add styling for new footer component (#916)

* feat: add styling for new footer component * feat: removed new footer from layout * chore: remove div for testing locally * chore: remove unused import * feat: hover states on footer links * chore: lint * feat: remove unused css * chore: import Children from react * chore: lint * feat: add illustrations on top of footer * Update footer with links from sanity * Add info regarding formatting of organization number * Fix footer preview --------- Co-authored-by: Ida Marie Andreassen <[email protected]>
varianter · Dec 12, 2024 · 319ca23 · 319ca23
1 parent 75e135f
commit 319ca23
Show file tree

Hide file tree

Showing 17 changed files with 480 additions and 98 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -64,5 +64,12 @@
   "job_posting": {
     "office": "Office",
     "all": "All"
+  },
+  "footer": {
+    "text": "We have multiple offices in Norway and Sweden. Feel free to drop by for a cup of coffee or just a friendly chat.",
+    "mainMenu": "Main menu",
+    "other": "Other",
+    "socialMedia": "Follow us",
+    "contact": "General contact"
   }
 }
diff --git a/messages/no.json b/messages/no.json
@@ -63,5 +63,12 @@
   "job_posting": {
     "office": "Kontor",
     "all": "Alle"
+  },
+  "footer": {
+    "text": "Vi har flere kontorer i Norge og Sverige. Kom gjerne innom for en kopp kaffe eller bare en hyggelig prat.",
+    "mainMenu": "Hovedmeny",
+    "other": "Annet",
+    "socialMedia": "Følg oss",
+    "contact": "Generell kontakt"
   }
 }
diff --git a/messages/se.json b/messages/se.json
@@ -63,5 +63,12 @@
   "job_posting": {
     "office": "Kontor",
     "all": "Alla"
+  },
+  "footer": {
+    "text": "Vi har flera kontor i Sverige och Norge. Du är välkommen att komma förbi för en kopp kaffe eller bara en trevlig pratstund.",
+    "mainMenu": "Huvudmeny",
+    "other": "Övrigt",
+    "socialMedia": "Följ oss",
+    "contact": "Kontakt"
   }
 }
diff --git a/src/app/(main)/[locale]/layout.tsx b/src/app/(main)/[locale]/layout.tsx
@@ -10,13 +10,17 @@ import SkipToMain from "src/components/skipToMain/SkipToMain";
 import { Locale, routing } from "src/i18n/routing";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
-import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
+import {
+  CompanyInfo,
+  CompanyLocation,
+} from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { Navigation } from "studio/lib/interfaces/navigation";
 import { SocialMediaProfiles } from "studio/lib/interfaces/socialMedia";
 import LiveVisualEditing from "studio/lib/loaders/AutomaticVisualEditing";
 import {
   COMPANY_INFO_QUERY,
+  COMPANY_LOCATIONS_QUERY,
   LEGAL_DOCUMENTS_BY_LANG_QUERY,
 } from "studio/lib/queries/admin";
 import {
@@ -57,6 +61,7 @@ export default async function Layout({
     initialSoMe,
     initialLegal,
     initialBrandAssets,
+    initialCompanyLocations,
   ] = await Promise.all([
     loadStudioQuery<Navigation>(
       NAV_QUERY,
@@ -75,6 +80,11 @@ export default async function Layout({
       { perspective },
     ),
     loadStudioQuery<BrandAssets>(BRAND_ASSETS_QUERY, {}, { perspective }),
+    loadStudioQuery<CompanyLocation[]>(
+      COMPANY_LOCATIONS_QUERY,
+      {},
+      { perspective },
+    ),
   ]);
 
   const hasNavData = hasValidData(initialNav.data);
@@ -95,13 +105,15 @@ export default async function Layout({
               initialSoMe={initialSoMe}
               initialLegal={initialLegal}
               language={params.locale}
+              initialCompanyLocations={initialCompanyLocations}
             />
           ) : (
             <Footer
               navigationData={initialNav.data}
               legalData={initialLegal.data}
               companyInfo={initialCompanyInfo.data}
-              brandAssets={initialBrandAssets.data}
+              companyLocations={initialCompanyLocations.data}
+              /* brandAssets={initialBrandAssets.data} */
               soMeData={initialSoMe.data}
             />
           )}

diff --git a/src/components/link/CustomLink.tsx b/src/components/link/CustomLink.tsx
@@ -6,7 +6,12 @@ import { ILink } from "studio/lib/interfaces/navigation";
 
 import styles from "./link.module.css";
 
-type ComponentLinkType = "link" | "headerLink" | "footerLink";
+type ComponentLinkType =
+  | "link"
+  | "headerLink"
+  | "footerLink"
+  | "footerLinkNew"
+  | "footerLinkGrey";
 
 interface ICustomLink {
   type?: ComponentLinkType;
@@ -83,7 +88,20 @@ const CustomLink = ({
             rel={rel}
             aria-label={link.ariaLabel}
           >
-            <span className={styles.dot}></span>
+            {link.linkTitle}
+          </Link>
+        )
+      );
+    case "footerLinkGrey":
+      return (
+        link.linkTitle && (
+          <Link
+            className={styles.footerLinkGrey}
+            href={href}
+            target={target}
+            rel={rel}
+            aria-label={link.ariaLabel}
+          >
             {link.linkTitle}
           </Link>
         )

diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
@@ -176,19 +176,30 @@
 }
 
 .footerLink {
-  color: var(--text-primary-light);
+  color: var(--stroke-primary);
   cursor: pointer;
   text-decoration: none;
-  font-family: var(--font-britti-sans);
-  font-size: 2rem;
-  font-weight: 400;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%;
 
   &:hover {
-    font-weight: 500;
+    text-decoration: underline;
   }
+}
 
-  &:active {
-    color: var(--background-bg-light-secondary);
+.footerLinkGrey {
+  color: var(--text-tertiary);
+  cursor: pointer;
+  font-family: var(--font-britti-sans);
+  font-size: 0.875rem;
+  font-weight: 400;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+
+  &:hover {
+    color: var(--text-primary);
   }
 }
 

diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx
@@ -1,90 +1,156 @@
-"use client";
-
+import Image from "next/image";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { ReactNode } from "react";
 
-import { SanityImage } from "src/components/image/SanityImage";
 import CustomLink from "src/components/link/CustomLink";
 import SoMeLink from "src/components/link/SoMeLink";
-import Text from "src/components/text/Text";
-import { BrandAssets } from "studio/lib/interfaces/brandAssets";
-import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
+import {
+  CompanyInfo,
+  CompanyLocation,
+} from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
-import { ILink, LinkType, Navigation } from "studio/lib/interfaces/navigation";
+import { ILink, Navigation } from "studio/lib/interfaces/navigation";
 import {
   SocialMediaLink,
   SocialMediaProfiles,
 } from "studio/lib/interfaces/socialMedia";
 
 import styles from "./footer.module.css";
+import { FooterIllustration } from "./footerIllustration/FooterIllustration";
+import { FooterSection } from "./footerSection/FooterSection";
+import { TextTertiary } from "./textTertiary/TextTertiary";
 
 export interface IFooter {
   navigationData: Navigation;
-  companyInfo: CompanyInfo;
-  brandAssets: BrandAssets;
   soMeData: SocialMediaProfiles | null;
   legalData: LegalDocument[];
+  companyInfo: CompanyInfo;
+  companyLocations: CompanyLocation[];
 }
 
 const Footer = ({
   navigationData,
-  companyInfo,
-  brandAssets,
   soMeData,
-  legalData,
+  /* legalData, */
+  companyInfo,
+  companyLocations,
 }: IFooter) => {
-  const currentYear = new Date().getFullYear();
+  const t = useTranslations("footer");
 
   return (
     <footer className={styles.footer}>
-      {brandAssets?.secondaryLogo && (
-        <div className={styles.logo}>
-          <SanityImage image={brandAssets.secondaryLogo} />
-        </div>
-      )}
-      <nav className={styles.nav}>
-        {renderLinks(navigationData)}
-        {soMeData && renderSoMe(navigationData, soMeData)}
-      </nav>
-      <ul className={styles.credits}>
-        <li key="credit-legal-key-1">
-          <Text className={styles.whiteColor}>
-            {`© ${currentYear} ${companyInfo.companyName}`}
-          </Text>
-        </li>
-        {legalData?.map((legal) => {
-          const link: ILink = {
-            _key: legal._id,
-            _type: legal._type,
-            linkTitle: legal.basicTitle,
-            linkType: LinkType.Internal,
-            internalLink: {
-              _ref: legal.slug.current,
-            },
-            language: legal.language,
-          };
-          return (
-            <li key={legal._id}>
-              <CustomLink link={link} type="footerLink" />
+      <FooterIllustration color={"#FFD02F"} />
+      <div className={styles.footerContent}>
+        <nav className={styles.nav}>
+          <div className={styles.flex_container_left}>
+            <div>
+              <TextTertiary>{t("text")}</TextTertiary>
+              {/*  TODO:: Get offices and map through. Should these link to something?  */}
+              <ul className={styles.offices}>
+                {companyLocations.map((location) => (
+                  <li
+                    key={location.companyLocationName}
+                    className={styles.dotSeparator}
+                  >
+                    {location.companyLocationName}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <FooterSection title={t("contact")}>
+                <Link
+                  href={`mailto:${companyInfo.companyEmail}`}
+                  className={styles.contactInfo}
+                >
+                  {companyInfo.companyEmail}
+                </Link>
+              </FooterSection>
+            </div>
+          </div>
+          <div className={styles.flex_container_right}>
+            {navigationData.main && (
+              <FooterSection title={t("mainMenu")}>
+                {renderPageLinks(navigationData)}
+              </FooterSection>
+            )}
+            {navigationData.footer && (
+              <FooterSection title={t("other")}>
+                {renderOtherLinks(navigationData)}
+              </FooterSection>
+            )}
+
+            {soMeData && (
+              <FooterSection title={t("socialMedia")}>
+                {renderSoMe(navigationData, soMeData)}
+              </FooterSection>
+            )}
+          </div>
+        </nav>
+        <Image
+          className={styles.logo}
+          src={"/_assets/variant-logo.svg"}
+          alt={"variant logo"}
+          width={310}
+          height={74}
+        />
+
+        <div className={styles.grey_links}>
+          {/* <ul className={styles.grey_links__language}>
+            <li>
+              <CustomLink link={dummyLink("English")} type="footerLink" />
             </li>
-          );
-        })}
-      </ul>
+          </ul> */}
+          {/* THERE ARE NO LEGAL DOCUMENTS FOR LAUNCH, REINSTATE WHEN WE HAVE LEGAL DOCUMENTS TO SHOW */}
+          {/* <ul className={styles.credits}>
+            {legalData?.map((legal) => {
+              const link: ILink = {
+                _key: legal._id,
+                _type: legal._type,
+                linkTitle: legal.basicTitle,
+                linkType: LinkType.Internal,
+                internalLink: {
+                  _ref: legal.slug.current,
+                },
+                language: legal.language,
+              };
+              return (
+                <li key={legal._id}>
+                  <CustomLink link={link} type="footerLink" />
+                </li>
+              );
+            })}
+          </ul> */}
+
+          <span className={styles.organisationNumber}>
+            Org. nr. {companyInfo.organizationNumber}
+          </span>
+        </div>
+      </div>
     </footer>
   );
 };
 
-const renderLinks = (data: Navigation) => {
-  const contentSections = filterSectionsByType(data, "content");
-  const links = contentSections?.[0]?.linksAndContent;
-  return (
-    links &&
-    renderList(
-      links.map((link: ILink) => (
+const renderOtherLinks = (data: Navigation) => {
+  return renderList(
+    data.footer?.map((footer) =>
+      footer.linksAndContent?.map((link: ILink) => (
         <li key={link._key}>
           <CustomLink link={link} type="footerLink" />
         </li>
       )),
-    )
+    ),
+  );
+};
+
+const renderPageLinks = (data: Navigation) => {
+  return renderList(
+    data.main.map((p: ILink) => (
+      <li key={p._key}>
+        <CustomLink link={p} type="footerLink" />
+      </li>
+    )),
   );
 };