foundry-component-library 0.2.35 → 0.2.37

package/lib/components/Header/Menu.tsx

@@ -8,10 +8,16 @@ import Close from "../../assets/svg/close.svg";
 import { NextLink } from "../../types";
 
 function Menu({
+  translationsSlug,
+  translationsCode,
+  isCasePage,
   isOpen,
   setMenuOpen,
   Link,
 }: {
+  translationsSlug: string;
+  translationsCode: string;
+  isCasePage: boolean;
   isOpen: string;
   setMenuOpen: Dispatch<SetStateAction<boolean>>;
   Link: NextLink;
@@ -34,7 +40,9 @@ function Menu({
       <div className={styles.menuWrapper}>
         <ul className={styles.menuList}>
           <li className={styles.menuListItem}>
-            <Link href={`${langPrefix}`}>{translate("Home", currentLang)}</Link>
+            <Link href={`${langPrefix}/`}>
+              {translate("Home", currentLang)}
+            </Link>
           </li>
           <li className={styles.menuListItem}>
             <Link href={`${langPrefix}/hubs`}>
@@ -88,17 +96,44 @@ function Menu({
           </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>
+          {!isCasePage && (
+            <>
+              <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>
+            </>
+          )}
+          {isCasePage && translationsCode && (
+            <>
+              <a
+                href={
+                  translationsCode === "en"
+                    ? `/cases/${translationsSlug}`
+                    : path
+                }
+                className={`${styles.langBtn} ${currentLang === "EN" ? styles.active : ""}`}>
+                EN
+              </a>
+              <div className={styles.divider} />
+              <a
+                href={
+                  translationsCode === "de"
+                    ? `/de/cases/${translationsSlug}`
+                    : path
+                }
+                className={`${styles.langBtn} ${currentLang === "DE" ? styles.active : ""}`}>
+                DE
+              </a>
+            </>
+          )}
         </div>
       </div>
     </div>

package/lib/components/Header/index.tsx

@@ -7,7 +7,20 @@ import { NextLink } from "../../types";
 import lottie from "lottie-web";
 import logo from "../../assets/logo.json";
 
-function Header({ Link }: { Link: NextLink }) {
+function Header({
+  translations,
+  isCasePage,
+  Link,
+}: {
+  translations?: {
+    language: {
+      code: string;
+    };
+    slug: string;
+  }[];
+  isCasePage?: boolean;
+  Link: NextLink;
+}) {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const isOpen = isMenuOpen ? styles.isMenuOpen : "";
 
@@ -67,7 +80,18 @@ function Header({ Link }: { Link: NextLink }) {
           </div>
         </Container>
       </header>
-      <Menu isOpen={isOpen} setMenuOpen={setMenuOpen} Link={Link} />
+      <Menu
+        isOpen={isOpen}
+        setMenuOpen={setMenuOpen}
+        Link={Link}
+        translationsCode={
+          translations?.length
+            ? translations[0].language?.code?.toLowerCase()
+            : ""
+        }
+        translationsSlug={translations?.length ? translations[0].slug : ""}
+        isCasePage={isCasePage || false}
+      />
     </>
   );
 }

package/lib/components/Management/index.tsx

@@ -61,8 +61,7 @@ const Management = ({
           // animate={{ height }}
           // transition={{ duration: 0.4 }}
           className={styles.wrapper}
-          style={{ overflow: "hidden" }}
-        >
+          style={{ overflow: "hidden" }}>
           <div ref={contentRef}>
             <motion.div
               key={items[activePerson]?.name}
@@ -70,8 +69,7 @@ const Management = ({
               // animate={{ opacity: 1, y: 0 }}
               // exit={{ opacity: 0, y: -20 }}
               // transition={{ duration: 0.4 }}
-              className={styles.person}
-            >
+              className={styles.person}>
               <div className={styles.image}>
                 <Image
                   src={items[activePerson]?.image?.sourceUrl || ""}
@@ -81,9 +79,7 @@ const Management = ({
                 />
               </div>
               <div className={styles.texts}>
-                <div className={styles.quote}>
-                  &quot;{items[activePerson]?.quote}&quot;
-                </div>
+                <div className={styles.quote}>{items[activePerson]?.quote}</div>
                 <div className={styles.name}>{items[activePerson]?.name}</div>
                 <div className={styles.position}>
                   {items[activePerson]?.position}

package/lib/components/TeamPhotos/index.tsx

@@ -20,7 +20,7 @@ const TheamPhotos = ({
 
   return (
     <Container noMobilePadding>
-      <div className={styles.heading}>{translate("Our Lovely Team")}</div>
+      <div className={styles.heading}>{translate("Our Lovely Team", "DE")}</div>
       <div
         ref={sectionRef}
         className={styles.people}
@@ -28,8 +28,7 @@ const TheamPhotos = ({
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
         onMouseLeave={handleMouseUp}
-        style={dragStyle as React.CSSProperties}
-      >
+        style={dragStyle as React.CSSProperties}>
         {people.map((person) => {
           return <Item key={person.name} person={person} Image={Image} />;
         })}

package/lib/queries/getCaseBySlug.ts

@@ -35,6 +35,12 @@ export default async function getCaseBySlug({
       nodes {
         id
         title
+        translations {
+          language {
+            code
+          }
+          slug
+        }
         case {
           caption
           mainImage {

package/lib/types/index.ts

@@ -225,6 +225,12 @@ export type PostPreview = {
 export type Case = {
   id: string;
   title: string;
+  translations?: {
+    language: {
+      code: string;
+    };
+    slug: string;
+  }[];
   slug?: string;
   uri: string;
   link?: string;

package/lib/utils.ts

@@ -49,8 +49,8 @@ const strings: Translations = {
   "News & Insights": {
     DE: "News & Insights",
   },
-  "": {
-    DE: "",
+  "Our Lovely Team": {
+    DE: "Unser nettes Team",
   },
   "": {
     DE: "",

package/package.json

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