foundry-component-library 0.2.16 → 0.2.18

package/lib/components/Footer/index.tsx

@@ -73,9 +73,9 @@ function Footer({
               <li className={styles.menuItem}>
                 <Link href="/cases">Case Studies</Link>
               </li>
-              <li className={styles.menuItem}>
+              {/* <li className={styles.menuItem}>
                 <Link href="/team">Team & Careers</Link>
-              </li>
+              </li> */}
               <li className={styles.menuItem}>
                 <Link href="/news">News & Insights</Link>
               </li>

package/lib/components/Header/Menu.tsx

@@ -20,8 +20,7 @@ function Menu({
         className={styles.close}
         onClick={() => {
           setMenuOpen(false);
-        }}
-      >
+        }}>
         <Close />
       </div>
       <div className={styles.menuWrapper}>

package/lib/components/HubsAccordion/Hub.tsx

@@ -1,11 +1,5 @@
 "use client";
-import {
-  useRef,
-  useState,
-  useLayoutEffect,
-  Dispatch,
-  SetStateAction,
-} from "react";
+import { useRef, useState, useLayoutEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { NextImage, NextLink, type Hub } from "../../types";
 import styles from "./styles.module.scss";
@@ -16,20 +10,17 @@ import Minus from "./minus.svg";
 
 const Hub = ({
   hub,
-  active,
-  setActive,
   Link,
   Image,
 }: {
   hub: Hub;
-  active: string;
-  setActive: Dispatch<SetStateAction<string>>;
   Link: NextLink;
   Image: NextImage;
 }) => {
   const casesRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | "auto">(0);
+  const [isActive, setIsActive] = useState(false);
 
   const {
     handleMouseDown,
@@ -39,7 +30,6 @@ const Hub = ({
     dragStyle,
   } = useDrag(casesRef);
 
-  const isActive = active === hub.slug;
   const customFields = hub.customFieldsHub;
 
   useLayoutEffect(() => {
@@ -53,9 +43,7 @@ const Hub = ({
       <div className={styles.top}>
         <div className={styles.title}>{hub.title}</div>
         <div className={styles.text}>{customFields.subheading}</div>
-        <button
-          className={styles.icon}
-          onClick={() => setActive(isActive ? "" : hub.slug)}>
+        <button className={styles.icon} onClick={() => setIsActive(!isActive)}>
           {isActive ? <Minus /> : <Plus />}
         </button>
       </div>

package/lib/components/HubsAccordion/index.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { useState } from "react";
 import Container from "../Container";
 import styles from "./styles.module.scss";
 import Hub from "./Hub";
@@ -14,23 +13,12 @@ const HubsAccordion = ({
   Link: NextLink;
   Image: NextImage;
 }) => {
-  const [active, setActive] = useState("");
-
   return (
     <div className={styles.hubsAccordion}>
       <Container noMobilePadding>
         <div className={styles.hubs}>
           {hubs.map((hub) => {
-            return (
-              <Hub
-                key={hub.id}
-                hub={hub}
-                active={active}
-                setActive={setActive}
-                Link={Link}
-                Image={Image}
-              />
-            );
+            return <Hub key={hub.id} hub={hub} Link={Link} Image={Image} />;
           })}
         </div>
       </Container>

package/lib/components/ServiceHubsTeaserEffects/TileBalls.tsx

@@ -9,7 +9,7 @@ const TileBalls = () => {
       shadows
       dpr={[1, 2]}
       gl={{ antialias: false }}
-      camera={{ fov: 15, position: [0, 0, 20] }}>
+      camera={{ position: [0, 0, 20], fov: 15 }}>
       <color attach="background" args={["#380de8"]} />
       <fog attach="fog" args={["red", 20, -5]} />
       <ambientLight intensity={1.5} />
@@ -24,8 +24,8 @@ const TileBalls = () => {
         position={[0, 0, 0]}
         fontSize={0.4}
         textAlign="center"
-        fontWeight={600}
-        color="#fff">
+        color="#fff"
+        font="/Karelia-Medium.otf">
         Content and{"\n"}Campaigning
       </Text>
     </Canvas>

package/lib/components/ServiceHubsTeaserEffects/TileFluid.tsx

@@ -15,8 +15,8 @@ const TileFluid = () => {
         position={[0, 0, 0]}
         fontSize={0.4}
         textAlign="center"
-        fontWeight={600}
-        color="#380de8">
+        color="#380de8"
+        font="/Karelia-Medium.otf">
         Branding &{"\n"}Corporate ID
       </Text>
       <EffectComposer>

package/lib/components/ServiceHubsTeaserEffects/TileGlass.tsx

@@ -10,8 +10,8 @@ const TileGlass = () => {
           position={[0, 0, 0]}
           fontSize={0.4}
           textAlign="center"
-          fontWeight={600}
-          color="#491b11">
+          color="#491b11"
+          font="/Karelia-Medium.otf">
           Strategy &{"\n"}
           Positioning
         </Text>

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

@@ -56,13 +56,13 @@
 
   &:first-child {
     @media #{$QUERY-sm} {
-      margin-left: 20px;
+      margin-left: 40px;
     }
   }
 
   &:last-child {
     @media #{$QUERY-sm} {
-      margin-right: 20px;
+      margin-right: 40px;
     }
   }
 }

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

@@ -9,7 +9,7 @@
   @media #{$QUERY-sm} {
     font-size: 28px;
     margin-bottom: 24px;
-    padding: 0 20px;
+    padding: 0 40px;
   }
 }
 
@@ -63,13 +63,13 @@
 
   &:first-child {
     @media #{$QUERY-sm} {
-      margin-left: 20px;
+      margin-left: 40px;
     }
   }
 
   &:last-child {
     @media #{$QUERY-sm} {
-      margin-right: 20px;
+      margin-right: 40px;
     }
   }
 }

package/lib/components/VideoTeaser/index.tsx

@@ -48,6 +48,7 @@ function VideoTeaser({ url }: { url: string }) {
               width="100%"
               height="100%"
               muted={isMuted}
+              loop={true}
               config={{
                 file: { attributes: { poster: "/video-poster.jpg" } },
               }}

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

@@ -56,6 +56,9 @@
   min-height: 350px;
   font-size: 18px;
   line-height: 1.4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .twoColumns {
@@ -70,6 +73,7 @@
 .threeColumns {
   display: flex;
   justify-content: space-between;
+  gap: 20px;
 
   @media #{$QUERY-sm} {
     display: block;

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

@@ -15,6 +15,11 @@
   background-color: transparent;
   font-size: 16px;
   border: none;
+  color: $color-black;
+
+  &:visited {
+    color: $color-black;
+  }
 
   &:not(span):hover {
     background-color: $color-gray-light;

package/package.json

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