foundry-component-library 0.1.13 → 0.2.0

package/lib/components/OfficesTeaser/index.tsx

@@ -21,7 +21,7 @@ const OfficesTeaser = ({
           <PopInText className={styles.caption} text="Our Offices" />
           <WavyText
             className={styles.heading}
-            text={`We operate all\nover the world`}
+            text={`We operate all\nover the world.`}
             alternate
           />
         </div>

package/lib/components/case/Content/Numbers/styles.module.scss

@@ -12,7 +12,7 @@
 
 .wrapper {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
 
   @media #{$QUERY-sm} {
     display: block;

package/lib/components/case/Content/ThreeColumns/Center.tsx

@@ -0,0 +1,49 @@
+import styles from "../styles.module.scss";
+import Video from "../Video";
+import { ColumnOption, NextImage } from "../../../../types";
+
+const Center = ({
+  section,
+  Image,
+}: {
+  section: ColumnOption;
+  Image: NextImage;
+}) => {
+  if (!section) return null;
+
+  return (
+    <div className={styles.columnContent}>
+      {/* case */}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Center_Text" && (
+        <div
+          className={styles.text}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Center_Image" &&
+        section.image && (
+          <>
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Center_Video" && (
+        <Video section={section} defaultRatio="150%" />
+      )}
+    </div>
+  );
+};
+
+export default Center;

package/lib/components/case/Content/ThreeColumns/Left.tsx

@@ -0,0 +1,48 @@
+import styles from "../styles.module.scss";
+import Video from "../Video";
+import { ColumnOption, NextImage } from "../../../../types";
+
+const Left = ({
+  section,
+  Image,
+}: {
+  section: ColumnOption;
+  Image: NextImage;
+}) => {
+  if (!section) return null;
+
+  return (
+    <div className={styles.columnContent}>
+      {/* case */}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Left_Text" && (
+        <div
+          className={styles.text}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName === "Case_Case_Content_Threecolumns_Left_Image" &&
+        section.image && (
+          <>
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Left_Video" && (
+        <Video section={section} defaultRatio="150%" />
+      )}
+    </div>
+  );
+};
+
+export default Left;

package/lib/components/case/Content/ThreeColumns/Right.tsx

@@ -0,0 +1,49 @@
+import styles from "../styles.module.scss";
+import Video from "../Video";
+import { ColumnOption, NextImage } from "../../../../types";
+
+const Right = ({
+  section,
+  Image,
+}: {
+  section: ColumnOption;
+  Image: NextImage;
+}) => {
+  if (!section) return null;
+
+  return (
+    <div className={styles.columnContent}>
+      {/* case */}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Right_Text" && (
+        <div
+          className={`${styles.text}`}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Right_Image" &&
+        section.image && (
+          <>
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Right_Video" && (
+        <Video section={section} defaultRatio="150%" />
+      )}
+    </div>
+  );
+};
+
+export default Right;

package/lib/components/case/Content/ThreeColumns/index.tsx

@@ -0,0 +1,38 @@
+import styles from "../styles.module.scss";
+import Container from "../../../Container";
+import { type ThreeColumns, NextImage } from "../../../../types";
+import Left from "./Left";
+import Center from "./Center";
+import Right from "./Right";
+
+function ThreeColumns({
+  section,
+  Image,
+}: {
+  section: ThreeColumns;
+  Image: NextImage;
+}) {
+  return (
+    <section className={styles.section}>
+      <Container>
+        <div className={styles.threeColumns}>
+          <div className={styles.column}>
+            {section.left && <Left section={section.left[0]} Image={Image} />}
+          </div>
+          <div className={styles.column}>
+            {section.center && (
+              <Center section={section.center[0]} Image={Image} />
+            )}
+          </div>
+          <div className={styles.column}>
+            {section.right && (
+              <Right section={section.right[0]} Image={Image} />
+            )}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}
+
+export default ThreeColumns;

package/lib/components/case/Content/Video.tsx

@@ -5,7 +5,13 @@ import styles from "./styles.module.scss";
 import { useOnScreen } from "../../../hooks/useOnScreen";
 import { type Video } from "../../../types";
 
-function Video({ section }: { section: Video }) {
+function Video({
+  section,
+  defaultRatio = "56.25%",
+}: {
+  section: Video;
+  defaultRatio?: string;
+}) {
   const sectionRef = useRef(null);
   const onScreen = useOnScreen(sectionRef, "1000px");
   const [playing, setPlaying] = useState(false);
@@ -50,7 +56,7 @@ function Video({ section }: { section: Video }) {
           backgroundImage: section.poster
             ? `url(${section.poster.sourceUrl})`
             : "none",
-          paddingTop: section.ratio ? section.ratio : "56.25%",
+          paddingTop: section.ratio ? section.ratio : defaultRatio,
         }}
       >
         <div>

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

@@ -1,6 +1,7 @@
 import FullWidthImage from "./FullWidthImage";
 import CenterColumn from "./CenterColumn";
 import TwoColumns from "./TwoColumns";
+import ThreeColumns from "./ThreeColumns";
 import Video from "./Video";
 import Container from "../../Container";
 import styles from "./styles.module.scss";
@@ -64,6 +65,15 @@ function CaseContent({
             />
           );
         }
+        if (section.fieldGroupName === "Case_Case_Content_Threecolumns") {
+          return (
+            <ThreeColumns
+              key={section.fieldGroupName + i}
+              section={section}
+              Image={Image}
+            />
+          );
+        }
         if (section.fieldGroupName === "Case_Case_Content_Video") {
           return (
             <section

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

@@ -66,6 +66,15 @@
   }
 }
 
+.threeColumns {
+  display: flex;
+  justify-content: space-between;
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
 .column {
   width: 600px;
   max-width: calc(50% - 20px);
@@ -93,7 +102,6 @@
   max-width: 100%;
   margin: 0 auto;
   position: relative;
-  background-color: #eee;
   background-position: center;
   background-repeat: no-repeat;
 

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

@@ -83,7 +83,11 @@ function Cases({
 
             return (
               <div key={item.id} className={styles.case}>
-                <Link href={item.uri}>
+                <Link
+                  href={`/cases/${
+                    item.status !== "draft" ? item.slug : `preview/${item.id}`
+                  }`}
+                >
                   {thumbnailVideo && (
                     <Video
                       url={thumbnailVideo.mediaItemUrl}
@@ -109,6 +113,7 @@ function Cases({
                   <div className={styles.texts}>
                     <div>
                       <h3 className={styles.title}>{item.title}</h3>
+                      {item.status === "draft" && <div>DRAFT</div>}
                       <div className={styles.caption}>{item.case.caption}</div>
                     </div>
                     <div className={styles.arrowWrapper}>

package/lib/components/single/Content/styles.module.scss

@@ -130,7 +130,6 @@
   max-width: 100%;
   margin: 0 auto;
   position: relative;
-  background-color: #eee;
   background-position: center;
   background-repeat: no-repeat;
 

package/lib/queries/client.ts

@@ -1,6 +1,20 @@
 import { GraphQLClient } from "graphql-request";
 
 const baseUrl = process.env.WORDPRESS_URL || "https://data.foundry.ch";
-const graphqlClient = new GraphQLClient(`${baseUrl}/graphql`);
+
+const headers: Record<string, string> = {
+  "Content-Type": "application/json",
+};
+
+if (process.env.WP_PREVIEW_USER && process.env.WP_PREVIEW_PASS) {
+  const auth = Buffer.from(`admin:${process.env.WP_PREVIEW_PASS}`).toString(
+    "base64"
+  );
+  headers["Authorization"] = `Basic ${auth}`;
+}
+
+const graphqlClient = new GraphQLClient(`${baseUrl}/graphql`, {
+  headers,
+});
 
 export default graphqlClient;

package/lib/queries/getCaseById.ts

@@ -0,0 +1,284 @@
+import { gql } from "graphql-request";
+import { Case } from "../../lib/types";
+import client from "./client";
+import { type ContactPage } from "./getContactPage";
+
+type HomePage = {
+  customFieldsBerlin: {
+    awardsHeading?: string;
+    awards?: Array<{
+      image: {
+        sourceUrl: string;
+      };
+      heading: string;
+      text: string;
+    }>;
+  };
+};
+
+export default async function getCaseBySlug({
+  id,
+  language,
+}: {
+  id: string;
+  language: string;
+}): Promise<{
+  case: Case;
+  contactPage: ContactPage;
+  homePage: HomePage;
+}> {
+  const homePage = language === "DE" ? "home-berlin-de" : "home-berlin";
+  const contactPage = language === "DE" ? "contact-de" : "contact";
+
+  const query = gql`
+    query GetCaseBySlug($id: ID!) {
+      case(id: $id, idType: ID) {
+        id
+        title
+        status
+        case {
+          caption
+          mainImage {
+            sourceUrl
+          }
+          details {
+            heading
+            text
+          }
+          awards {
+            heading
+            text
+            image {
+              sourceUrl
+            }
+          }
+          relatedCases {
+            __typename
+            ... on Case {
+              id
+              title
+              uri
+              case {
+                thumbnailImage{
+                  sourceUrl
+                }
+                mainImage {
+                  sourceUrl
+                }
+              }
+            }
+          }
+          content {
+            ... on Case_Case_Content_Quote {
+              fieldGroupName
+              name
+              position
+              text
+            }
+            ... on Case_Case_Content_Results {
+              fieldGroupName
+              context
+              approach
+              outcome
+            }
+            ... on Case_Case_Content_Numbers {
+              fieldGroupName
+              number1
+              text1
+              number2
+              text2
+              number3
+              text3
+            }
+            ... on Case_Case_Content_Video {
+              fieldGroupName
+              autoplay
+              poster {
+                sourceUrl
+              }
+              caption
+              video
+              ratio
+            }
+            ... on Case_Case_Content_FullWidthImage {
+              fieldGroupName
+              fullWidth
+              image {
+                sourceUrl
+              }
+            }
+            ... on Case_Case_Content_CenterColumn {
+              fieldGroupName
+              text
+            }
+            ... on Case_Case_Content_Twocolumns {
+              fieldGroupName
+              left {
+                ... on Case_Case_Content_Twocolumns_Left_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Twocolumns_Left_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Twocolumns_Left_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              right {
+                ... on Case_Case_Content_Twocolumns_Right_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Twocolumns_Right_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Twocolumns_Right_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+            }
+            ... on Case_Case_Content_Threecolumns {
+              fieldGroupName
+              left {
+                ... on Case_Case_Content_Threecolumns_Left_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Left_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Left_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              center {
+                ... on Case_Case_Content_Threecolumns_Center_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Center_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Center_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              right {
+                ... on Case_Case_Content_Threecolumns_Right_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Right_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Right_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+            }
+          }
+        }
+      }
+      contactPage: page(id: "${contactPage}", idType: URI) {
+        customFieldsContact {
+          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
+          }
+        }
+      }
+    }
+  `;
+
+  const variables = { id };
+  const data: {
+    case: Case;
+    contactPage: ContactPage;
+    homePage: HomePage;
+  } = await client.request(query, variables);
+
+  return {
+    case: data.case,
+    contactPage: data.contactPage,
+    homePage: data.homePage,
+  };
+}

package/lib/queries/getCaseBySlug.ts

@@ -51,6 +51,22 @@ export default async function getCaseBySlug({
               sourceUrl
             }
           }
+          relatedCases {
+            __typename
+            ... on Case {
+              id
+              title
+              uri
+              case {
+                thumbnailImage{
+                  sourceUrl
+                }
+                mainImage {
+                  sourceUrl
+                }
+              }
+            }
+          }
           content {
             ... on Case_Case_Content_Quote {
               fieldGroupName
@@ -141,6 +157,75 @@ export default async function getCaseBySlug({
                 }
               }
             }
+            ... on Case_Case_Content_Threecolumns {
+              fieldGroupName
+              left {
+                ... on Case_Case_Content_Threecolumns_Left_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Left_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Left_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              center {
+                ... on Case_Case_Content_Threecolumns_Center_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Center_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Center_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              right {
+                ... on Case_Case_Content_Threecolumns_Right_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Right_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Right_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+            }
           }
         }
       }

package/lib/queries/getCasesPage.ts

@@ -38,6 +38,7 @@ type Params = {
   page?: number;
   service?: string;
   industry?: string;
+  isPreview?: boolean;
 };
 
 export default async function getCasesPage({
@@ -50,6 +51,7 @@ export default async function getCasesPage({
   page = 1,
   service = "",
   industry = "",
+  isPreview = false,
 }: Params): Promise<{
   casesPage: CasesPage;
   cases: Case[];
@@ -88,6 +90,7 @@ export default async function getCasesPage({
 
   // Where Clause
   const whereConditions = [
+    isPreview ? "status: DRAFT" : "status: PUBLISH",
     hasSearchTerm ? "search: $search" : "",
     hasCategoryTerm ? "caseCategory: $categorySlug" : "",
     exclude ? "notIn: $exclude" : "",
@@ -130,6 +133,7 @@ export default async function getCasesPage({
           title
           slug
           uri
+          status
           case {
             featured
             service

package/lib/queries/getHubBySlug.ts

@@ -23,7 +23,7 @@ type HubFields = {
   homePage: HomePage;
 };
 
-export default async function getCaseBySlug({
+export default async function getHubBySlug({
   slug,
   language,
 }: {

package/lib/queries/index.ts

@@ -5,6 +5,7 @@ import getMetadataBySlug from "./getMetadataBySlug";
 import getPageBySlug from "./getPageBySlug";
 import getPostBySlug from "./getPostBySlug";
 import getCaseBySlug from "./getCaseBySlug";
+import getCaseById from "./getCaseById";
 import getContactPage from "./getContactPage";
 import getBrands from "./getBrands";
 import getPeoplePage from "./getPeoplePage";
@@ -25,6 +26,7 @@ export {
   getPageBySlug,
   getPostBySlug,
   getCaseBySlug,
+  getCaseById,
   getContactPage,
   getBrands,
   getPeoplePage,

package/lib/types/index.ts

@@ -34,7 +34,10 @@ type ColumnImage = {
     | "Post_Customfieldsposts_Content_Twocolumns_Left_Image"
     | "Post_Customfieldsposts_Content_Twocolumns_Right_Image"
     | "Case_Case_Content_Twocolumns_Left_Image"
-    | "Case_Case_Content_Twocolumns_Right_Image";
+    | "Case_Case_Content_Twocolumns_Right_Image"
+    | "Case_Case_Content_Threecolumns_Left_Image"
+    | "Case_Case_Content_Threecolumns_Center_Image"
+    | "Case_Case_Content_Threecolumns_Right_Image";
   image: { sourceUrl: string };
   caption?: string;
 };
@@ -44,7 +47,10 @@ type ColumnText = {
     | "Post_Customfieldsposts_Content_Twocolumns_Left_Text"
     | "Post_Customfieldsposts_Content_Twocolumns_Right_Text"
     | "Case_Case_Content_Twocolumns_Left_Text"
-    | "Case_Case_Content_Twocolumns_Right_Text";
+    | "Case_Case_Content_Twocolumns_Right_Text"
+    | "Case_Case_Content_Threecolumns_Left_Text"
+    | "Case_Case_Content_Threecolumns_Center_Text"
+    | "Case_Case_Content_Threecolumns_Right_Text";
   text: string;
 };
 
@@ -74,6 +80,13 @@ export type TwoColumns = {
   right?: ColumnOption[];
 };
 
+export type ThreeColumns = {
+  fieldGroupName: "Case_Case_Content_Threecolumns";
+  left?: ColumnOption[];
+  center?: ColumnOption[];
+  right?: ColumnOption[];
+};
+
 export type Video = {
   fieldGroupName:
     | "Post_Customfieldsposts_Content_Video"
@@ -81,7 +94,10 @@ export type Video = {
     | "Post_Customfieldsposts_Content_Twocolumns_Left_Video"
     | "Post_Customfieldsposts_Content_Twocolumns_Right_Video"
     | "Case_Case_Content_Twocolumns_Left_Video"
-    | "Case_Case_Content_Twocolumns_Right_Video";
+    | "Case_Case_Content_Twocolumns_Right_Video"
+    | "Case_Case_Content_Threecolumns_Left_Video"
+    | "Case_Case_Content_Threecolumns_Center_Video"
+    | "Case_Case_Content_Threecolumns_Right_Video";
   autoplay: boolean;
   poster: { sourceUrl: string };
   caption: string;
@@ -124,6 +140,7 @@ export type Content = (
   | FullWidthImage
   | CenterColumn
   | TwoColumns
+  | ThreeColumns
   | Video
   | Results
   | Numbers
@@ -209,8 +226,10 @@ export type Case = {
   title: string;
   slug?: string;
   uri: string;
+  link?: string;
   date?: string;
   content?: string;
+  status?: string;
   author?: {
     node: {
       name: string;
@@ -227,6 +246,19 @@ export type Case = {
     featured?: boolean;
     service?: string[];
     industry?: string[];
+    relatedCases?: {
+      id: string;
+      title: string;
+      uri: string;
+      case: {
+        thumbnailImage?: {
+          sourceUrl: string;
+        };
+        mainImage?: {
+          sourceUrl: string;
+        };
+      };
+    }[];
     thumbnailVideo?: {
       mediaItemUrl: string;
     };

package/package.json

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