foundry-component-library 0.2.4 → 0.2.6

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

@@ -44,7 +44,7 @@
   box-sizing: border-box;
 
   @media screen and (max-width: $screen-sm) {
-    max-width: 90%;
+    max-width: 80vw;
     height: 500px;
     padding: 40px 33px;
   }

package/lib/components/ContactTeaser/index.tsx

@@ -1,9 +1,13 @@
+"use client";
+import { useState } from "react";
 import styles from "./styles.module.scss";
 import Container from "../Container";
 import { translate } from "../../utils";
 import { NextLink } from "../../types";
 import WavyText from "../TextAnimations/WavyText";
 import FadeInText from "../TextAnimations/FadeInText";
+import useClickOutside from "../../hooks/useClickOutside";
+import Script from "next/script";
 
 const ContactTeaser = ({
   heading,
@@ -22,24 +26,57 @@ const ContactTeaser = ({
   alternate?: boolean;
   Link: NextLink;
 }) => {
+  const [isTypeformOpen, setIsTypeformOpen] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => {
+    setIsTypeformOpen(false);
+  });
+
   return (
-    <div className={`${styles.contactTeaser} ${styles[theme]}`}>
-      <Container>
-        <div className={styles.wrapper}>
-          {heading && (
-            <WavyText
-              className={`${styles.heading} ${!text ? styles.margin : ""}`}
-              text={heading}
-              alternate={alternate}
+    <>
+      <div className={`${styles.contactTeaser} ${styles[theme]}`}>
+        <Container>
+          <div className={styles.wrapper}>
+            {heading && (
+              <WavyText
+                className={`${styles.heading} ${!text ? styles.margin : ""}`}
+                text={heading}
+                alternate={alternate}
+              />
+            )}
+            {text && <FadeInText className={styles.text} text={text} />}
+            {buttonHref !== "typeform" && (
+              <Link href={buttonHref} className={styles.button}>
+                {translate(buttonText)}
+              </Link>
+            )}
+            {buttonHref == "typeform" && (
+              <button
+                className={styles.button}
+                onClick={() => {
+                  setIsTypeformOpen(true);
+                }}>
+                {translate(buttonText)}
+              </button>
+            )}
+          </div>
+        </Container>
+      </div>
+      {buttonHref === "typeform" && (
+        <div
+          className={styles.typeform}
+          style={{ display: isTypeformOpen ? "flex" : "none" }}>
+          <Script src="//embed.typeform.com/next/embed.js" />
+          <div ref={ref} className={styles.typeformWrapper}>
+            <div
+              data-tf-widget="qmv6Yk"
+              data-tf-iframe-props="title=Foundry Website Contact Form"
+              data-tf-medium="snippet"
+              style={{ width: "100%", height: "400px" }}
             />
-          )}
-          {text && <FadeInText className={styles.text} text={text} />}
-          <Link href={buttonHref} className={styles.button}>
-            {translate(buttonText)}
-          </Link>
+          </div>
         </div>
-      </Container>
-    </div>
+      )}
+    </>
   );
 };
 

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

@@ -54,4 +54,27 @@
 .button {
   @extend .button--brown;
   display: inline-block;
+  cursor: pointer;
+}
+
+.typeform {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9;
+  display: none;
+}
+
+.typeformWrapper {
+  background-color: $color-white;
+  width: 800px;
+  max-width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
 }

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

@@ -17,7 +17,7 @@
 
   @media #{$QUERY-sm} {
     width: 100%;
-    padding: 0 20px;
+    padding: 0 40px;
   }
 
   &.noMobilePadding {

package/lib/components/Footer/index.tsx

@@ -7,6 +7,9 @@ import { NextLink } from "../../types";
 function Footer({
   details,
   Link,
+  facebook,
+  linkedin,
+  instagram,
 }: {
   details: {
     berlinEmail: string;
@@ -14,6 +17,9 @@ function Footer({
     newyorkEmail: string;
   };
   Link: NextLink;
+  facebook: string;
+  linkedin: string;
+  instagram: string;
 }) {
   const { berlinEmail, zurichEmail, newyorkEmail } = details;
   const year = new Date().getFullYear();
@@ -81,13 +87,13 @@ function Footer({
               <div className={styles.socialHeading}>Follow Us</div>
               <ul className={styles.menuSocial}>
                 <li className={styles.menuItem}>
-                  <Link href="https://instagram.com">Instagram</Link>
+                  <Link href={instagram}>Instagram</Link>
                 </li>
                 <li className={styles.menuItem}>
-                  <Link href="https://facebook.com">Facebook</Link>
+                  <Link href={facebook}>Facebook</Link>
                 </li>
                 <li className={styles.menuItem}>
-                  <Link href="https://linkedin.com">Linked-In</Link>
+                  <Link href={linkedin}>LinkedIn</Link>
                 </li>
               </ul>
             </div>

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

@@ -45,7 +45,7 @@
   max-width: 100%;
 
   @media screen and (max-width: $screen-sm) {
-    margin-bottom: 2rem;
+    margin-bottom: 40px;
   }
 }
 
@@ -118,6 +118,7 @@
 .menu {
   font-size: 18px;
   font-weight: 500;
+  font-family: $font-secondary;
 
   @media #{$QUERY-sm} {
     width: 100%;
@@ -147,7 +148,7 @@
   @media #{$QUERY-sm} {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     gap: 24px;
   }
 
@@ -196,8 +197,10 @@
   }
 
   @media #{$QUERY-sm} {
-    margin-top: 10px;
+    margin-top: 20px;
     width: 100%;
+    justify-content: flex-start;
+    gap: 40px;
   }
 
   a {

package/lib/components/Header/index.tsx

@@ -16,7 +16,13 @@ function Header({ Link }: { Link: NextLink }) {
           <div className={styles.wrapper}>
             <div className={styles.left}>
               <Link href="/">
-                <video src="/logo.mp4" autoPlay muted />
+                <video
+                  src="/logo.mp4"
+                  autoPlay
+                  muted
+                  playsInline
+                  {...{ "webkit-playsinline": "true" }}
+                />
                 Foundry
               </Link>
             </div>
@@ -28,8 +34,7 @@ function Header({ Link }: { Link: NextLink }) {
                 onClick={() => {
                   setMenuOpen(!isMenuOpen);
                 }}
-                aria-label="Toggle menu"
-              >
+                aria-label="Toggle menu">
                 Menu
                 <div className={styles.hamburger}>
                   <span className={styles.line}></span>

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

@@ -19,7 +19,7 @@
 
 .left {
   font-size: 0;
-  margin-left: -50px;
+  margin-left: -65px;
 
   @media #{$QUERY-sm} {
     margin-left: -68px;
@@ -98,9 +98,6 @@
   display: flex;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
-  @media #{$QUERY-sm} {
-  }
-
   &.isMenuOpen {
     // display: flex;
     transform: translateX(0);
@@ -132,6 +129,10 @@
   max-height: 600px;
   margin: auto 0;
   padding: 0 40px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 60px;
+  }
 }
 
 .menuList {

package/lib/components/Hero/Video.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { useOnScreen } from "../../hooks/useOnScreen";
+import ReactPlayer from "react-player/lazy";
+import styles from "./styles.module.scss";
+
+const Video = ({ url }: { url: string }) => {
+  const sectionRef = useRef(null);
+  const onScreen = useOnScreen(sectionRef, "1000px");
+  // const [playing, setPlaying] = useState(false);
+  const [videoLoaded, setVideoLoaded] = useState(false);
+  const [hasWindow, setHasWindow] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setHasWindow(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!videoLoaded && onScreen) {
+      setVideoLoaded(true);
+    }
+  }, [videoLoaded, onScreen]);
+
+  return (
+    <div className={styles.videoWrapper} ref={sectionRef}>
+      {hasWindow && (
+        <ReactPlayer
+          playing
+          url={url}
+          width="100%"
+          height="100%"
+          loop
+          muted
+          playsinline
+        />
+      )}
+    </div>
+  );
+};
+
+export default Video;

package/lib/components/Hero/index.tsx

@@ -4,9 +4,11 @@ import styles from "./styles.module.scss";
 import Container from "../Container";
 import { NextImage, NextLink } from "../../types";
 import { useOnScreen } from "../../hooks/useOnScreen";
+import Video from "./Video";
 
 const Hero = ({
   image,
+  video,
   text,
   isFullWidth,
   isFirst,
@@ -16,6 +18,7 @@ const Hero = ({
   Image,
 }: {
   image: string;
+  video?: string;
   text: string;
   isFullWidth?: boolean;
   isFirst?: boolean;
@@ -30,7 +33,9 @@ const Hero = ({
   const sectionRef = useRef(null);
   const onScreen = useOnScreen(sectionRef, "-50%");
 
-  if (!image) return;
+  console.log("pop", video);
+
+  if (!image && !video) return;
 
   if (isFullWidth) {
     return (
@@ -38,15 +43,17 @@ const Hero = ({
         ref={sectionRef}
         className={`${styles.hero} ${styles.isFullWidth} ${
           noMarginBottom ? styles.noMarginBottom : ""
-        }`}
-      >
-        <Image
-          className={`${styles.background} ${onScreen ? styles.active : ""}`}
-          src={image}
-          width="1280"
-          height="600"
-          alt={text}
-        />
+        }`}>
+        {image && !video && (
+          <Image
+            className={`${styles.background} ${onScreen ? styles.active : ""}`}
+            src={image}
+            width="1280"
+            height="600"
+            alt={text}
+          />
+        )}
+        {video && <Video url={video} />}
         <div className={styles.texts}>
           {text && <div className={styles.heading}>{text}</div>}
           {btn && (
@@ -64,15 +71,17 @@ const Hero = ({
       <div
         className={`${styles.hero} ${isFirst ? styles.first : ""} ${
           noMarginBottom ? styles.noMarginBottom : ""
-        }`}
-      >
-        <Image
-          className={`${styles.background} ${onScreen ? styles.active : ""}`}
-          src={image}
-          width="1280"
-          height="600"
-          alt={text}
-        />
+        }`}>
+        {image && !video && (
+          <Image
+            className={`${styles.background} ${onScreen ? styles.active : ""}`}
+            src={image}
+            width="1280"
+            height="600"
+            alt={text}
+          />
+        )}
+        {video && <Video url={video} />}
         <div className={styles.texts}>
           {text && <div className={styles.heading}>{text}</div>}
           {btn && (

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

@@ -103,3 +103,15 @@
     background-color: $color-white;
   }
 }
+
+.videoWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  video {
+    object-fit: cover;
+  }
+}

package/lib/components/HubsAccordion/Hub.tsx

@@ -1,5 +1,12 @@
 "use client";
-import { useRef, Dispatch, SetStateAction } from "react";
+import {
+  useRef,
+  useState,
+  useLayoutEffect,
+  Dispatch,
+  SetStateAction,
+} from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { NextImage, NextLink, type Hub } from "../../types";
 import styles from "./styles.module.scss";
 import Arrow from "../../assets/svg/arrow.svg";
@@ -21,6 +28,8 @@ const Hub = ({
   Image: NextImage;
 }) => {
   const casesRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | "auto">(0);
 
   const {
     handleMouseDown,
@@ -33,6 +42,12 @@ const Hub = ({
   const isActive = active === hub.slug;
   const customFields = hub.customFieldsHub;
 
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      setHeight(contentRef.current.scrollHeight);
+    }
+  }, [isActive, customFields]);
+
   return (
     <div className={`${styles.hub} ${isActive ? styles.active : ""}`}>
       <div className={styles.top}>
@@ -40,94 +55,95 @@ const Hub = ({
         <div className={styles.text}>{customFields.subheading}</div>
         <button
           className={styles.icon}
-          onClick={() => {
-            if (isActive) {
-              setActive("");
-            } else {
-              setActive(hub.slug);
-            }
-          }}
-        >
-          {isActive && <Minus />}
-          {!isActive && <Plus />}
+          onClick={() => setActive(isActive ? "" : hub.slug)}>
+          {isActive ? <Minus /> : <Plus />}
         </button>
       </div>
-      <div className={styles.rows}>
-        <div className={styles.row}>
-          <div className={styles.rowWrapper}>
-            <div className={styles.subheading}>SERVICE</div>
-            <div className={styles.right}>
-              {customFields.tags && (
-                <div className={styles.tags}>
-                  {customFields.tags.map((tag) => `${tag.tag} // `)}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        <div className={styles.row}>
-          <div className={styles.rowWrapper}>
-            <div className={styles.subheading}>APPROACH</div>
-            <div className={styles.right}>
-              <div className={styles.paragraph}>{customFields.approach}</div>
-            </div>
-          </div>
-        </div>
-        <div className={styles.row}>
-          <div className={styles.rowWrapper}>
-            <div className={styles.subheading}>RELATED WORK</div>
-            <div className={styles.right}>
-              {customFields.relatedWork && (
-                <div
-                  className={styles.cases}
-                  ref={casesRef}
-                  onMouseDown={handleMouseDown}
-                  onMouseMove={handleMouseMove}
-                  onMouseUp={handleMouseUp}
-                  onMouseLeave={handleMouseUp}
-                  style={{
-                    ...(dragStyle as React.CSSProperties),
-                  }}
-                >
-                  {customFields.relatedWork.map((item) => {
-                    const { thumbnailImage, mainImage } = item.case;
 
-                    return (
-                      <Link
-                        href={item.uri}
-                        key={item.id}
-                        className={styles.case}
-                        draggable={false}
-                        onClick={preventedClick}
-                      >
-                        <div className={styles.caseImage}>
-                          <Image
-                            src={
-                              thumbnailImage?.sourceUrl ||
-                              mainImage?.sourceUrl ||
-                              ""
-                            }
-                            alt={item.title}
-                            fill
-                          />
+      <AnimatePresence initial={false}>
+        {(isActive || height !== 0) && (
+          <motion.div
+            key="content"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{
+              height: isActive ? height : 0,
+              opacity: isActive ? 1 : 0,
+            }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
+            style={{ overflow: "hidden" }}>
+            <div ref={contentRef}>
+              <div className={styles.rows}>
+                <div className={styles.row}>
+                  <div className={styles.rowWrapper}>
+                    <div className={styles.subheading}>SERVICE</div>
+                    <div className={styles.right}>
+                      {customFields.tags && (
+                        <div className={styles.tags}>
+                          {customFields.tags.map((tag) => `${tag.tag} // `)}
                         </div>
-                        <div className={styles.caseTitle}>
-                          {item.title} <Arrow />
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div className={styles.row}>
+                  <div className={styles.rowWrapper}>
+                    <div className={styles.subheading}>RELATED WORK</div>
+                    <div className={styles.right}>
+                      {customFields.relatedWork && (
+                        <div
+                          className={styles.cases}
+                          ref={casesRef}
+                          onMouseDown={handleMouseDown}
+                          onMouseMove={handleMouseMove}
+                          onMouseUp={handleMouseUp}
+                          onMouseLeave={handleMouseUp}
+                          style={{
+                            ...(dragStyle as React.CSSProperties),
+                          }}>
+                          {customFields.relatedWork.map((item) => {
+                            const { thumbnailImage, mainImage } = item.case;
+
+                            return (
+                              <Link
+                                href={item.uri}
+                                key={item.id}
+                                className={styles.case}
+                                draggable={false}
+                                onClick={preventedClick}>
+                                <div className={styles.caseImage}>
+                                  <Image
+                                    src={
+                                      thumbnailImage?.sourceUrl ||
+                                      mainImage?.sourceUrl ||
+                                      ""
+                                    }
+                                    alt={item.title}
+                                    fill
+                                  />
+                                </div>
+                                <div className={styles.caseTitle}>
+                                  {item.title} <Arrow />
+                                </div>
+                              </Link>
+                            );
+                          })}
                         </div>
-                      </Link>
-                    );
-                  })}
+                      )}
+                    </div>
+                  </div>
+                  <div className={styles.more}>
+                    <Link href={hub.uri}>
+                      Learn More <Arrow />
+                    </Link>
+                  </div>
                 </div>
-              )}
+              </div>
             </div>
-          </div>
-          <div className={styles.more}>
-            <Link href={hub.uri}>
-              Learn More <Arrow />
-            </Link>
-          </div>
-        </div>
-      </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };

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

@@ -12,10 +12,8 @@
   color: $color-brown;
   position: relative;
 
-  &.active {
-    .rows {
-      display: block;
-    }
+  @media #{$QUERY-sm} {
+    padding-bottom: 32px;
   }
 
   &:before {
@@ -48,7 +46,7 @@
 
   @media #{$QUERY-sm} {
     flex-wrap: wrap;
-    padding: 16px 20px;
+    padding: 16px 40px;
   }
 }
 
@@ -105,10 +103,6 @@
   }
 }
 
-.rows {
-  display: none;
-}
-
 .row {
   padding-bottom: 64px;
   position: relative;
@@ -131,7 +125,7 @@
 
   @media #{$QUERY-sm} {
     padding-bottom: 0;
-    padding-left: 20px;
+    padding-left: 40px;
     padding-right: 20px;
   }
 }