foundry-component-library 0.2.19 → 0.2.21

package/lib/components/CaseStudyTeaser/index.tsx

@@ -42,9 +42,10 @@ const CaseStudyTeaser = ({
               setTimeout(() => {
                 dragStarted.current = false;
               }, 0);
-            }}
-          >
+            }}>
             {cases.map((el) => {
+              if (!el) return;
+
               const { thumbnailImage, mainImage } = el.case;
 
               return (
@@ -68,8 +69,7 @@ const CaseStudyTeaser = ({
                           e.preventDefault();
                           e.stopPropagation();
                         }
-                      }}
-                    >
+                      }}>
                       {translate("See More")}
                     </a>
                   </div>

package/lib/components/Header/Menu.tsx

@@ -1,4 +1,6 @@
+"use client";
 import { Dispatch, SetStateAction } from "react";
+import { usePathname } from "next/navigation";
 import styles from "./styles.module.scss";
 import { translate } from "../../utils";
 import Arrow from "../../assets/svg/arrow.svg";
@@ -14,6 +16,12 @@ function Menu({
   setMenuOpen: Dispatch<SetStateAction<boolean>>;
   Link: NextLink;
 }) {
+  const path = usePathname();
+  const currentLang = path.startsWith("/de") ? "DE" : "EN";
+
+  const langPrefix =
+    currentLang === "EN" ? "" : `/${currentLang.toLowerCase()}`;
+
   return (
     <div className={`${styles.menu} ${isOpen}`}>
       <div
@@ -26,16 +34,18 @@ function Menu({
       <div className={styles.menuWrapper}>
         <ul className={styles.menuList}>
           <li className={styles.menuListItem}>
-            <Link href="/hubs">{translate("Service Hubs")}</Link>
+            <Link href={`${langPrefix}/hubs`}>{translate("Service Hubs")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/cases">{translate("Work")}</Link>
+            <Link href={`${langPrefix}/cases`}>{translate("Work")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/about-us">{translate("About Us")}</Link>
+            <Link href={`${langPrefix}/about-us`}>{translate("About Us")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/contact">{translate("Contact Us")}</Link>
+            <Link href={`${langPrefix}/contact`}>
+              {translate("Contact Us")}
+            </Link>
           </li>
         </ul>
         <ul className={styles.menuSecondary}>
@@ -56,18 +66,31 @@ function Menu({
             </Container>
           </li> */}
           <li className={styles.secondaryMenuItem}>
-            <Link href="/team">
+            <Link href={`${langPrefix}/team`}>
               {translate("Team & Careers")}
               <Arrow />
             </Link>
           </li>
           <li className={styles.secondaryMenuItem}>
-            <Link href="/news">
+            <Link href={`${langPrefix}/news`}>
               {translate("News & Insights")}
               <Arrow />
             </Link>
           </li>
         </ul>
+        <div className={styles.languageSwitcher} aria-label="Language switcher">
+          <a
+            href={path.replace(`${langPrefix}`, "")}
+            className={`${styles.langBtn} ${currentLang === "EN" ? styles.active : ""}`}>
+            EN
+          </a>
+          <div className={styles.divider} />
+          <a
+            href={currentLang === "DE" ? "" : ` /de${path}`}
+            className={`${styles.langBtn} ${currentLang === "DE" ? styles.active : ""}`}>
+            DE
+          </a>
+        </div>
       </div>
     </div>
   );

package/lib/components/Header/styles.module.scss

@@ -172,3 +172,25 @@
     color: $color-pink;
   }
 }
+
+.languageSwitcher {
+  display: flex;
+  gap: 8px;
+  padding: 8px 0 0;
+}
+
+.langBtn {
+  text-transform: uppercase;
+  opacity: 0.6;
+}
+.divider {
+  margin: 3px 1px;
+  width: 2px;
+  height: calc(100% - 6px);
+  background-color: $color-text;
+  opacity: 0.6;
+}
+
+.langBtn.active {
+  opacity: 1;
+}

package/lib/components/cases/Items/index.tsx

@@ -6,6 +6,7 @@ import styles from "./styles.module.scss";
 import Arrow from "../../../assets/svg/arrow.svg";
 import { Case, NextImage, NextLink, NextRouter } from "../../../types";
 import Top from "../Top";
+import { usePathname } from "next/navigation";
 
 function Cases({
   cases,
@@ -42,6 +43,13 @@ function Cases({
   }
 
   const [selected, setSelected] = useState(defaultValue);
+
+  const path = usePathname();
+  const currentLang = path.startsWith("/de") ? "DE" : "EN";
+
+  const langPrefix =
+    currentLang === "EN" ? "" : `/${currentLang.toLowerCase()}`;
+
   const services = [
     "Brand Identity",
     "Advertising & Campaigning",
@@ -84,10 +92,9 @@ function Cases({
             return (
               <div key={item.id} className={styles.case}>
                 <Link
-                  href={`/cases/${
+                  href={`${langPrefix}/cases/${
                     item.status !== "draft" ? item.slug : `preview/${item.id}`
-                  }`}
-                >
+                  }`}>
                   {thumbnailVideo && (
                     <Video
                       url={thumbnailVideo.mediaItemUrl}

package/lib/queries/getCaseBySlug.ts

@@ -18,7 +18,7 @@ type HomePage = {
 
 export default async function getCaseBySlug({
   slug,
-  language,
+  language = "EN",
 }: {
   slug: string;
   language: string;
@@ -31,8 +31,9 @@ export default async function getCaseBySlug({
   const contactPage = language === "DE" ? "contact-de" : "contact";
 
   const query = gql`
-    query GetCaseBySlug($slug: ID!) {
-      case(id: $slug, idType: SLUG) {
+  query GetCaseBySlug($slug: String, $language: LanguageCodeFilterEnum!) {
+    cases(where: { name: $slug, language: $language }) {
+      nodes {
         id
         title
         case {
@@ -229,58 +230,61 @@ export default async function getCaseBySlug({
           }
         }
       }
-      contactPage: page(id: "${contactPage}", idType: URI) {
-        customFieldsContact {
-          facebook
-          instagram
-          linkedin
-          berlinImage {
-            sourceUrl
-          }
-          berlinText
-          berlinEmail
-          berlinPhone
-          zurichImage {
-            sourceUrl
-          }
-          zurichText
-          zurichEmail
-          zurichPhone
-          newyorkImage {
-            sourceUrl
-          }
-          newyorkText
-          newyorkEmail
-          newyorkPhone
-          contactTeaserHeading
-          contactTeaserText
+    }
+    contactPage: page(id: "${contactPage}", idType: URI) {
+      customFieldsContact {
+        facebook
+        instagram
+        linkedin
+        berlinImage {
+          sourceUrl
+        }
+        berlinText
+        berlinEmail
+        berlinPhone
+        zurichImage {
+          sourceUrl
+        }
+        zurichText
+        zurichEmail
+        zurichPhone
+        newyorkImage {
+          sourceUrl
         }
+        newyorkText
+        newyorkEmail
+        newyorkPhone
+        contactTeaserHeading
+        contactTeaserText
       }
-      homePage: page(id: "${homePage}", idType: URI) {
-        customFieldsBerlin {
-          awardsHeading
-          awards {
-            image {
-              sourceUrl
-            }
-            heading
-            text
+    }
+    homePage: page(id: "${homePage}", idType: URI) {
+      customFieldsBerlin {
+        awardsHeading
+        awards {
+          image {
+            sourceUrl
           }
+          heading
+          text
         }
       }
     }
-  `;
+  }
+`;
 
-  const variables = { slug };
+  const variables = { slug, language };
   const data: {
-    case: Case;
+    cases: {
+      nodes: Case[];
+    };
     contactPage: ContactPage;
     homePage: HomePage;
   } = await client.request(query, variables);
 
   return {
-    case: data.case,
-    contactPage: data.contactPage,
-    homePage: data.homePage,
+    case: data?.cases.nodes[0],
+    contactPage: data?.contactPage,
+    homePage: data?.homePage,
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foundry-component-library",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",