foundry-component-library 0.2.14 → 0.2.16

package/lib/components/Awards/index.tsx

@@ -38,7 +38,7 @@ const Awards = ({
   if (!awards) return null;
 
   // Duplicate awards to create seamless looping
-  const marqueeItems = [...awards, ...awards];
+  const marqueeItems = awards.length < 5 ? awards : [...awards, ...awards];
 
   return (
     <motion.div
@@ -52,9 +52,9 @@ const Awards = ({
       <Container noMobilePadding>
         <div className={styles.marqueeWrapper}>
           <motion.div
-            className={styles.marquee}
+            className={`${styles.marquee} ${awards.length < 5 ? styles.noAnimation : ""}`}
             variants={marqueeVariants}
-            animate="animate">
+            animate={awards.length < 5 ? "" : "animate"}>
             {marqueeItems.map((award, i) => {
               const { image, heading, text } = award;
               if (!image) return null;

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

@@ -34,11 +34,17 @@
   gap: 48px;
   width: max-content;
   animation: marquee 20s linear infinite;
+  min-width: 100%;
 
   @media #{$QUERY-sm} {
     gap: 24px;
     animation-duration: 16s;
   }
+
+  &.noAnimation {
+    animation: none;
+    gap: 0;
+  }
 }
 
 /* Remove if using marquee (track should scroll) */

package/lib/components/Footer/index.tsx

@@ -87,13 +87,19 @@ function Footer({
               <div className={styles.socialHeading}>Follow Us</div>
               <ul className={styles.menuSocial}>
                 <li className={styles.menuItem}>
-                  <Link href={instagram}>Instagram</Link>
+                  <Link href={instagram} target="_blank">
+                    Instagram
+                  </Link>
                 </li>
                 <li className={styles.menuItem}>
-                  <Link href={facebook}>Facebook</Link>
+                  <Link href={facebook} target="_blank">
+                    Facebook
+                  </Link>
                 </li>
                 <li className={styles.menuItem}>
-                  <Link href={linkedin}>LinkedIn</Link>
+                  <Link href={linkedin} target="_blank">
+                    LinkedIn
+                  </Link>
                 </li>
               </ul>
             </div>

package/lib/components/Header/index.tsx

@@ -21,7 +21,9 @@ function Header({ Link }: { Link: NextLink }) {
                   autoPlay
                   muted
                   playsInline
-                  {...{ "webkit-playsinline": "true" }}
+                  {...{
+                    "webkit-playsinline": "true",
+                  }}
                 />
                 Foundry
               </Link>

package/lib/components/PartnerNetwork/index.tsx

@@ -1,14 +1,12 @@
 import TextSection from "../TextSection";
 import styles from "./styles.module.scss";
 import Container from "../Container";
-import { NextImage } from "../../types";
 
 const PartnerNetwork = ({
   caption,
   heading,
   text,
   partners,
-  Image,
 }: {
   caption?: string;
   heading?: string;
@@ -18,7 +16,6 @@ const PartnerNetwork = ({
       sourceUrl: string;
     };
   }[];
-  Image: NextImage;
 }) => {
   if (!partners) return;
 
@@ -31,9 +28,7 @@ const PartnerNetwork = ({
             {partners.map((partner) => {
               return (
                 <div key={partner.image?.sourceUrl} className={styles.partner}>
-                  <div className={styles.image}>
-                    <Image src={partner.image?.sourceUrl || ""} alt="" fill />
-                  </div>
+                  <img src={partner.image?.sourceUrl || ""} alt="" />
                 </div>
               );
             })}

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

@@ -28,6 +28,9 @@
 }
 .partner {
   width: 33.333%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   @media #{$QUERY-sm} {
     width: calc(50% - 12px);
@@ -35,19 +38,9 @@
     align-items: center;
     justify-content: center;
   }
-}
-
-.image {
-  position: relative;
-  width: 200px;
-  height: 40px;
-  max-width: 100%;
-
-  @media #{$QUERY-sm} {
-    width: 120px;
-  }
 
   img {
-    object-fit: contain;
+    max-width: 100%;
+    max-height: 75px;
   }
 }

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

@@ -18,6 +18,7 @@
 
   @media #{$QUERY-sm} {
     padding-bottom: 32px;
+    gap: 0;
   }
 }
 
@@ -32,21 +33,15 @@
     z-index: 1;
   }
 
-  @media screen and (max-width: $screen-sm) {
-    max-width: 80%;
+  @media #{$QUERY-md} {
+    width: calc(50% - 12px);
     height: 300px;
   }
 
-  &:first-child {
-    @media #{$QUERY-sm} {
-      margin-left: 20px;
-    }
-  }
-
-  &:last-child {
-    @media #{$QUERY-sm} {
-      margin-right: 20px;
-    }
+  @media #{$QUERY-sm} {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
   }
 }
 

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

@@ -97,4 +97,5 @@
 
 .tailsText {
   margin-bottom: 30px;
+  text-align: center;
 }

package/lib/components/case/Other/index.tsx

@@ -38,9 +38,9 @@ function Other({
           onMouseMove={handleMouseMove}
           onMouseUp={handleMouseUp}
           onMouseLeave={handleMouseUp}
-          style={dragStyle as React.CSSProperties}
-        >
+          style={dragStyle as React.CSSProperties}>
           {cases.map((item) => {
+            if (!item) return;
             const { thumbnailImage, mainImage } = item.case;
 
             return (

package/lib/components/case/Top/styles.module.scss

@@ -137,17 +137,14 @@
 }
 
 .awards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 40px;
-
-  @media #{$QUERY-sm} {
-    gap: 16px;
-  }
+  width: 300px;
+  position: relative;
+  top: -2px;
 }
 
 .award {
   display: flex;
+  align-items: center;
 
   @media #{$QUERY-sm} {
     max-width: 106px;
@@ -164,12 +161,10 @@
 }
 
 .awardImage {
-  // width: 100px;
-  // height: 100px;
+  width: 100px;
+  height: 100px;
   flex-shrink: 0;
   position: relative;
-  max-height: 100px;
-  max-width: 100%;
 
   img {
     width: 100%;
@@ -179,11 +174,14 @@
 }
 
 .awardHeading {
-  font-weight: bold;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   font-family: $font-secondary;
 }
 
+.awardText {
+  font-size: 14px;
+}
+
 .mainImage {
   position: relative;
   width: 100%;

package/lib/components/cases/Top/Dropdown.tsx

@@ -6,6 +6,31 @@ import CaretDown from "../../../assets/svg/caret-down.svg";
 import useClickOutside from "../../../hooks/useClickOutside";
 import { NextRouter } from "../../../types";
 
+const servicesDisplayLabels: Record<string, string> = {
+  "Brand Identity": "Brand Identity",
+  "Advertising & Campaigning": "Advertising & Campaigning",
+  "Strategy & Growth": "Strategy & Growth",
+  "Social Media & Influencer Marketing": "Social Media & Influencer Marketing",
+  "Media & Performance": "Media & Performance",
+  "Content Creation & Production": "Content Creation & Production",
+  "B2B & Thought-Leadership": "B2B & Thought-Leadership",
+};
+
+const industriesDisplayLabels: Record<string, string> = {
+  "Banken & Versicherungen": "Banking & Insurance",
+  FMCG: "FMCG",
+  "Gesundheit & Wellness": "Health & Wellness",
+  "Handel & E-Commerce": "Retail & E-Commerce",
+  Lifestyle: "Lifestyle",
+  "Mobilität & Transport": "Mobility & Transport",
+  "Forschung & Bildung": "Research & Education",
+  "Hospitality & Real Estate": "Hospitality & Real Estate",
+  "Öffentlicher Sektor & Non-Profit": "Public Sector & Non-Profit",
+  Versorgungsunternehmen: "Utilities",
+  "Konsumgüter & Technologie": "Consumer Goods & Technology",
+  Dienstleister: "Service Providers",
+};
+
 const Dropdown = ({
   heading,
   items,
@@ -47,12 +72,10 @@ const Dropdown = ({
   return (
     <div
       className={`${styles.dropdown} ${isOpen ? styles.active : ""}`}
-      ref={ref}
-    >
+      ref={ref}>
       <button
         onClick={toggleOpen}
-        className={`${styles.dropdownHeading} ${isOpen ? styles.active : ""}`}
-      >
+        className={`${styles.dropdownHeading} ${isOpen ? styles.active : ""}`}>
         <span>{items.includes(selected.tag) ? selected.tag : heading}</span>
         <CaretDown />
       </button>
@@ -64,8 +87,7 @@ const Dropdown = ({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -5 }}
             transition={{ duration: 0.2 }}
-            className={styles.dropdownInner}
-          >
+            className={styles.dropdownInner}>
             {items.map((option) => (
               <motion.li
                 key={option}
@@ -79,9 +101,10 @@ const Dropdown = ({
                 }}
                 className={`${styles.option} ${
                   selected.tag === option ? styles.active : ""
-                }`}
-              >
-                {option}
+                }`}>
+                {heading === "Industry"
+                  ? industriesDisplayLabels[option]
+                  : servicesDisplayLabels[option]}
               </motion.li>
             ))}
           </motion.ul>

package/lib/components/contact/Accounts/index.tsx

@@ -27,13 +27,6 @@ function Accounts({
       <Container>
         <h2 className={styles.heading}>{bankTitle}</h2>
         <div className={styles.wrapper}>
-          <div className={styles.column}>
-            <div className={`${styles.subheading}`}>{berlinHeading}</div>
-            <div
-              className={styles.text}
-              dangerouslySetInnerHTML={{ __html: berlinDetails }}
-            />
-          </div>
           <div className={styles.column}>
             <div className={`${styles.subheading}`}>{swissHeading}</div>
             <div

package/lib/queries/client.ts

@@ -8,13 +8,14 @@ const headers: Record<string, string> = {
 
 if (process.env.WP_PREVIEW_USER && process.env.WP_PREVIEW_PASS) {
   const auth = Buffer.from(`admin:${process.env.WP_PREVIEW_PASS}`).toString(
-    "base64"
+    "base64",
   );
   headers["Authorization"] = `Basic ${auth}`;
 }
 
 const graphqlClient = new GraphQLClient(`${baseUrl}/graphql`, {
   headers,
+  errorPolicy: "all",
 });
 
 export default graphqlClient;

package/lib/queries/getCases.ts

@@ -49,6 +49,7 @@ export default async function getCases({
     hasCategoryTerm ? "caseCategory: $categorySlug" : "",
     exclude ? "notIn: $exclude" : "",
     "language: $language",
+    "orderby: { field: MENU_ORDER, order: ASC }",
   ].filter(Boolean);
 
   const whereClause =

package/lib/queries/getCasesPage.ts

@@ -95,6 +95,7 @@ export default async function getCasesPage({
     hasCategoryTerm ? "caseCategory: $categorySlug" : "",
     exclude ? "notIn: $exclude" : "",
     "language: $language",
+    "orderby: { field: MENU_ORDER, order: ASC }",
     page
       ? `offsetPagination:{ offset: ${(page - 1) * perPage}, size: ${perPage} }`
       : "",

package/package.json

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