foundry-component-library 0.1.0 → 0.1.2

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

@@ -54,7 +54,7 @@
     display: none;
 
     @media #{$QUERY-sm} {
-      display: block;
+      display: inline-block;
     }
   }
 }

package/lib/components/Awards/index.tsx

@@ -24,8 +24,6 @@ const Awards = ({
   const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
     useDrag(sectionRef);
 
-  console.log(awards);
-
   if (!awards) return;
 
   return (
@@ -49,7 +47,7 @@ const Awards = ({
             if (!image) return;
 
             return (
-              <div key={heading || "" + i} className={styles.award}>
+              <div key={image.sourceUrl + i} className={styles.award}>
                 <div className={styles.image}>
                   {image && <Image src={image?.sourceUrl} alt="" fill />}
                 </div>

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

@@ -8,6 +8,10 @@
 
 .items {
   padding-bottom: 64px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 34px;
+  }
 }
 
 .item {
@@ -35,6 +39,14 @@
 .title {
   font-size: 34px;
   font-family: $font-secondary;
+
+  @media #{$QUERY-md} {
+    font-size: 18px;
+  }
+
+  @media #{$QUERY-sm} {
+    font-size: 28px;
+  }
 }
 
 .text {
@@ -62,6 +74,15 @@
   cursor: pointer;
   color: $color-brown;
   flex-shrink: 0;
+  // pointer-events: painted;
+
+  @media #{$QUERY-sm} {
+    width: 24px;
+    height: 24px;
+    font-size: 21px;
+    position: relative;
+    top: 8px;
+  }
 
   span {
     position: relative;
@@ -84,6 +105,10 @@
   @media #{$QUERY-md} {
     display: block;
   }
+
+  @media #{$QUERY-sm} {
+    padding: 0;
+  }
 }
 
 .right {

package/lib/components/DoubleTiles/index.tsx

@@ -1,7 +1,10 @@
+"use client";
+import { useRef } from "react";
 import Container from "../Container";
 import TextSection from "../TextSection";
 import styles from "./styles.module.scss";
 import Tile from "./Tile";
+import useDrag from "../../hooks/useDrag";
 
 const DoubleTiles = ({
   heading,
@@ -13,12 +16,26 @@ const DoubleTiles = ({
     text?: string;
   }[];
 }) => {
+  const sectionRef = useRef(null);
+  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
+    useDrag(sectionRef);
+
+  if (!tiles) return;
+
   return (
     <div className={styles.doubleTiles}>
       <TextSection caption="PROCESS" heading={heading} />
-      <Container>
+      <Container noMobilePadding>
         <div className={styles.wrapper}>
-          <div className={styles.tiles}>
+          <div
+            ref={sectionRef}
+            className={styles.tiles}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            style={dragStyle as React.CSSProperties}
+          >
             {tiles.map((tile, i) => {
               let background: "pink" | "yellow" | "brown" | "gray" = "pink";
               if (i % 3 === 1) background = "gray";
@@ -26,7 +43,7 @@ const DoubleTiles = ({
 
               return (
                 <Tile
-                  key={tile.text}
+                  key={background + i}
                   heading={tile.heading || ""}
                   text={tile.text || ""}
                   background={background}

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

@@ -4,6 +4,11 @@
   padding-bottom: 64px;
   display: flex;
   gap: 20px;
+
+  @media #{$QUERY-sm} {
+    padding: 0 20px;
+    padding-bottom: 32px;
+  }
 }
 
 .tile {
@@ -63,13 +68,20 @@
       display: block;
     }
   }
+
+  svg {
+    @media #{$QUERY-sm} {
+      width: 36px;
+    }
+  }
 }
 
 .heading {
   font-size: 42px;
   margin-bottom: 42px;
 
-  @media screen and (max-width: $screen-sm) {
+  @media #{$QUERY-sm} {
+    font-size: 28px;
     margin-bottom: 20px;
   }
 
@@ -80,6 +92,10 @@
 
 .text {
   font-size: 32px;
+
+  @media #{$QUERY-sm} {
+    font-size: 21px;
+  }
 }
 
 .sideTwo {

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

@@ -85,7 +85,7 @@
 
 .city {
   font-size: 16px;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .email {
@@ -107,6 +107,7 @@
   }
 
   @media #{$QUERY-sm} {
+    width: 100%;
     display: block;
   }
 }
@@ -140,7 +141,9 @@
   font-size: 16px;
 
   @media #{$QUERY-sm} {
+    width: 100%;
     display: flex;
+    justify-content: space-between;
     gap: 24px;
   }
 
@@ -154,7 +157,7 @@
 }
 
 .socialHeading {
-  font-weight: 700;
+  font-weight: 500;
   margin-bottom: 26px;
 
   @media #{$QUERY-sm} {
@@ -177,12 +180,20 @@
 
 .bottomLinks {
   display: flex;
+  justify-content: space-between;
   gap: 24px;
   text-transform: none;
   font-size: 16px;
+  width: 335px;
+  max-width: 100%;
+
+  @media screen and (max-width: 1000px) {
+    width: 270px;
+  }
 
   @media #{$QUERY-sm} {
     margin-top: 10px;
+    width: 100%;
   }
 
   a {

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

@@ -127,8 +127,7 @@
   height: 100%;
   max-height: 600px;
   margin: auto 0;
-  padding-left: 60px;
-  padding-right: 30px;
+  padding: 0 40px;
 }
 
 .menuList {

package/lib/components/Hero/index.tsx

@@ -24,7 +24,6 @@ const Hero = ({
   Link: NextLink;
   Image: NextImage;
 }) => {
-  console.log(image);
   if (!image) return;
 
   if (isFullWidth) {

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

@@ -79,6 +79,7 @@
 
   @media screen and (max-width: $screen-sm) {
     font-size: 54px;
+    margin-bottom: 10px;
   }
 }
 

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

@@ -11,7 +11,7 @@
 
 .image {
   @media screen and (max-width: $screen-sm) {
-    height: 400px;
+    height: 300px;
   }
 
   img {
@@ -46,7 +46,7 @@
 
 .name {
   font-size: 18px;
-  font-weight: 700;
+  font-weight: 500;
   margin-bottom: 3px;
 }
 

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

@@ -104,7 +104,7 @@
 .title {
   font-size: 20px;
   margin-bottom: 16px;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .excerpt {
@@ -125,6 +125,7 @@
 
   path {
     stroke: $color-brown;
+    stroke-width: 2px;
   }
 
   &:hover {

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

@@ -98,7 +98,7 @@
 
 .name {
   font-size: 18px;
-  font-weight: 700;
+  font-weight: 500;
   margin-bottom: 3px;
   white-space: pre-wrap;
 

package/lib/components/Tiles/index.tsx

@@ -6,7 +6,13 @@ import TextSection from "../TextSection";
 import Tile from "./Tile";
 import useDrag from "../../hooks/useDrag";
 
-const Tiles = ({ tiles }: { tiles: string[] }) => {
+const Tiles = ({
+  tiles,
+}: {
+  tiles: {
+    heading?: string;
+  }[];
+}) => {
   const sectionRef = useRef(null);
   const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
     useDrag(sectionRef);
@@ -33,7 +39,13 @@ const Tiles = ({ tiles }: { tiles: string[] }) => {
           if (i % 3 === 1) background = "yellow";
           if (i % 3 === 2) background = "brown";
 
-          return <Tile key={tile} text={tile} background={background} />;
+          return (
+            <Tile
+              key={tile.heading}
+              text={tile.heading || ""}
+              background={background}
+            />
+          );
         })}
       </div>
     </Container>

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

@@ -3,8 +3,17 @@ import { useState, useRef, useEffect } from "react";
 import { useOnScreen } from "../../../hooks/useOnScreen";
 import ReactPlayer from "react-player/lazy";
 import styles from "./styles.module.scss";
+import { NextImage } from "../../../types";
 
-const Video = ({ url }: { url: string }) => {
+const Video = ({
+  url,
+  alt,
+  Image,
+}: {
+  url: string;
+  alt?: string;
+  Image: NextImage;
+}) => {
   const sectionRef = useRef(null);
   const onScreen = useOnScreen(sectionRef, "1000px");
   // const [playing, setPlaying] = useState(false);
@@ -27,6 +36,22 @@ const Video = ({ url }: { url: string }) => {
   //   setPlaying(true);
   // }, [videoLoaded]);
 
+  const extension = url.split(".").pop();
+
+  if (extension === "gif") {
+    return (
+      <div className={styles.imageWrapper}>
+        <Image
+          className={styles.image}
+          src={url}
+          alt={alt || ""}
+          width={720}
+          height={490}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className={styles.imageWrapper} ref={sectionRef}>
       {hasWindow && (

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

@@ -85,7 +85,11 @@ function Cases({
               <div key={item.id} className={styles.case}>
                 <Link href={item.uri}>
                   {thumbnailVideo && (
-                    <Video url={thumbnailVideo.mediaItemUrl} />
+                    <Video
+                      url={thumbnailVideo.mediaItemUrl}
+                      alt={item.title}
+                      Image={Image}
+                    />
                   )}
                   {!thumbnailVideo && mainImage && (
                     <div className={styles.imageWrapper}>

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

@@ -20,7 +20,7 @@
 
 .dropdown {
   position: relative;
-  width: 110px;
+  width: 130px;
 
   &.active {
     z-index: 3;

package/lib/components/contact/Accounts/styles.module.scss

@@ -4,6 +4,10 @@
   padding: 64px 0;
   background-color: $color-gray-light;
   color: $color-brown;
+
+  @media #{$QUERY-sm} {
+    padding: 32px 0;
+  }
 }
 
 .heading {
@@ -11,6 +15,11 @@
   margin-bottom: 46px;
   font-weight: 400;
   font-family: $font-secondary;
+
+  @media #{$QUERY-sm} {
+    font-size: 28px;
+    margin-bottom: 32px;
+  }
 }
 
 .wrapper {
@@ -31,6 +40,8 @@
   @media #{$QUERY-sm} {
     width: 100%;
     max-width: 100%;
+    padding: 16px 0;
+    margin-bottom: 32px;
   }
 
   &:last-child {
@@ -40,10 +51,6 @@
       margin-bottom: 0;
     }
   }
-
-  @media #{$QUERY-sm} {
-    margin-bottom: 64px;
-  }
 }
 
 .subheading {

package/lib/components/contact/Contacts/styles.module.scss

@@ -4,6 +4,10 @@
   padding: 64px 0;
   background-color: $color-yellow;
   color: $color-brown;
+
+  @media #{$QUERY-sm} {
+    padding: 32px 0;
+  }
 }
 
 .title {
@@ -11,6 +15,11 @@
   font-family: $font-secondary;
   margin-bottom: 46px;
   font-weight: 400;
+
+  @media #{$QUERY-sm} {
+    font-size: 28px;
+    margin-bottom: 24px;
+  }
 }
 
 .boxes {
@@ -37,8 +46,15 @@
   }
 
   @media #{$QUERY-sm} {
+    padding: 0;
     width: 100%;
-    margin-bottom: 1rem;
+    margin-bottom: 32px;
+  }
+
+  &:last-child {
+    @media #{$QUERY-sm} {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -58,10 +74,18 @@
 .subheading {
   font-size: 18px;
   margin-bottom: 36px;
+
+  @media #{$QUERY-sm} {
+    margin-bottom: 16px;
+  }
+
   a {
     text-decoration: underline;
   }
 }
 
-.button-secondary {
+.buttonSecondary {
+  path {
+    stroke-width: 2px;
+  }
 }

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

@@ -12,7 +12,7 @@ const index = ({
 }) => {
   return (
     <div className={styles.officesSection}>
-      <Container>
+      <Container noMobilePadding>
         <Offices details={details} Image={Image} />
       </Container>
     </div>

package/lib/components/contact/OfficesSection/styles.module.scss

@@ -4,6 +4,6 @@
   padding-bottom: 64px;
 
   @media #{$QUERY-sm} {
-    padding-bottom: 0;
+    padding-bottom: 32px;
   }
 }

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

@@ -27,6 +27,10 @@
   height: 600px;
   position: relative;
 
+  @media #{$QUERY-sm} {
+    height: 230px;
+  }
+
   img {
     object-fit: cover;
   }

package/lib/queries/getAboutPage.ts

@@ -3,7 +3,28 @@ import client from "./client";
 
 type AboutPage = {
   aboutPage: {
-    customFieldsAbout: {
+    customFieldsAboutBerlin: {
+      topImage?: {
+        sourceUrl: string;
+      };
+      topText?: string;
+      text1Caption?: string;
+      text1Heading?: string;
+      columnsHeading?: string;
+      columnsText?: string;
+      columnsImage?: {
+        sourceUrl: string;
+      };
+      tilesCaption?: string;
+      tilesHeading?: string;
+      tiles?: {
+        heading?: string;
+      }[];
+      quotes?: {
+        name?: string;
+        position?: string;
+        text?: string;
+      }[];
       partnersCaption?: string;
       partnersHeading?: string;
       partnersText?: string;
@@ -12,11 +33,6 @@ type AboutPage = {
           sourceUrl: string;
         };
       }[];
-      quotes: {
-        name: string;
-        position: string;
-        text: string;
-      }[];
     };
   };
   homePage: {
@@ -80,7 +96,28 @@ export default async function getContactPage({
   const query = gql`
     query GetPageBySlug($slug: ID!) {
       aboutPage: page(id: $slug, idType: URI) {
-        customFieldsAbout {
+        customFieldsAboutBerlin {
+          topImage {
+            sourceUrl
+          }
+          topText
+          text1Caption
+          text1Heading
+          columnsHeading
+          columnsText
+          columnsImage {
+            sourceUrl
+          }
+          tilesCaption
+          tilesHeading
+          tiles {
+            heading
+          }
+          quotes {
+            name
+            position
+            text
+          }
           partnersCaption
           partnersHeading
           partnersText
@@ -89,11 +126,6 @@ export default async function getContactPage({
               sourceUrl
             }
           }
-          quotes {
-            name
-            position
-            text
-          }
         }
       }
       homePage: page(id: "${

package/package.json

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