foundry-component-library 0.0.0 → 0.0.2

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

@@ -0,0 +1,162 @@
+@use "../../variables" as *;
+
+.wrapper {
+  padding: 64px 0;
+  color: $color-brown;
+}
+
+.link {
+  font-size: 14px;
+  color: $color-gray;
+
+  a {
+    font-size: 14px;
+    color: $color-black;
+    text-decoration: none;
+
+    &:hover {
+      color: $color-blue;
+    }
+  }
+
+  &:after {
+    content: " / ";
+    display: inline-block;
+    margin: 0 10px;
+  }
+
+  &:last-child:after {
+    display: none;
+  }
+}
+
+.caption {
+  font-size: 20px;
+  color: $color-blue;
+  text-transform: uppercase;
+  margin-bottom: 5px;
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media #{$QUERY-md} {
+    display: block;
+    margin-bottom: 30px;
+  }
+}
+
+.title {
+  font-size: 54px;
+  line-height: 1.15;
+  font-weight: bold;
+  margin-bottom: 50px;
+  width: 800px;
+  max-width: 100%;
+  color: $color-brown;
+  font-weight: 400;
+
+  @media #{$QUERY-sm} {
+    font-size: 42px;
+  }
+}
+
+.subtitle {
+  font-size: 36px;
+  line-height: 1.2;
+  font-weight: 400;
+  margin-top: 30px;
+
+  @media #{$QUERY-sm} {
+    font-size: 24px;
+  }
+}
+
+.details {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 26px;
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
+.detail {
+  font-size: 14px;
+  width: 200px;
+  font-size: 18px;
+
+  @media #{$QUERY-md} {
+    width: calc(33.333% - 18px);
+  }
+
+  @media #{$QUERY-sm} {
+    margin-bottom: 30px;
+    width: 100%;
+  }
+}
+
+.heading {
+  margin-bottom: 10px;
+  font-size: 20px;
+  text-transform: uppercase;
+}
+
+.awardsWrapper {
+  @media #{$QUERY-md} {
+    margin-top: 30px;
+  }
+}
+
+.awards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+
+.award {
+  display: flex;
+}
+
+.awardTexts {
+  width: auto;
+  max-width: 200px;
+  flex-shrink: 0;
+  margin-right: 20px;
+}
+
+.awardImage {
+  // width: 100px;
+  // height: 100px;
+  flex-shrink: 0;
+  position: relative;
+  max-height: 100px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.awardHeading {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.mainImage {
+  position: relative;
+  width: 100%;
+  height: 534px;
+
+  img {
+    object-fit: cover;
+  }
+
+  &.loading {
+    background-color: $color-gray-light;
+  }
+}

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

@@ -0,0 +1,103 @@
+"use client";
+import { useState, useEffect } from "react";
+import styles from "./styles.module.scss";
+import Hourglass from "../../../assets/svg/hourglass.svg?react";
+import { translate } from "../../../utils";
+import { getCases } from "../../../queries";
+import { Case, NextImage, NextLink } from "../../../types";
+import Video from "./Video";
+import Arrow from "../../../assets/svg/caret-right.svg?react";
+
+const More = ({
+  endCursor,
+  currentCategory,
+  Image,
+  Link,
+}: {
+  endCursor: string;
+  currentCategory: string;
+  Image: NextImage;
+  Link: NextLink;
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [cases, setCases] = useState<Case[]>([]);
+  const [end, setEnd] = useState<string | null>(endCursor);
+  const [finished, setFinished] = useState(false);
+
+  const handleMore = async () => {
+    setLoading(true);
+
+    const { cases: newCases, pageInfo } = await getCases({
+      category: currentCategory,
+      params: {
+        after: end,
+      },
+    });
+
+    if (!pageInfo.hasNextPage) {
+      setFinished(true);
+    }
+
+    setCases([...cases, ...newCases]);
+    setEnd(pageInfo.endCursor);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    setCases([]);
+  }, [currentCategory]);
+
+  if (!cases) return null;
+
+  return (
+    <>
+      {cases.map((item) => {
+        if (!item.case) return null;
+        const { thumbnailVideo, mainImage } = item.case;
+
+        return (
+          <div key={item.id} className={styles.case}>
+            <Link href={item.uri}>
+              {thumbnailVideo && <Video url={thumbnailVideo.mediaItemUrl} />}
+              {!thumbnailVideo && mainImage && mainImage.sourceUrl && (
+                <div className={styles.imageWrapper}>
+                  <Image
+                    className={styles.image}
+                    src={mainImage.sourceUrl}
+                    alt={item.title || ""}
+                    width={720}
+                    height={490}
+                  />
+                </div>
+              )}
+              <div className={styles.texts}>
+                <h3 className={styles.title}>{item.title}</h3>
+                <div className={styles.arrowWrapper}>
+                  <Arrow />
+                </div>
+              </div>
+            </Link>
+          </div>
+        );
+      })}
+      <div className={styles.bottom}>
+        {loading && (
+          <div className={styles.loading}>
+            <Hourglass />
+          </div>
+        )}
+        {!loading && !finished && (
+          <button
+            type="button"
+            className={styles.loadMore}
+            onClick={handleMore}
+          >
+            {translate("Load more")}
+          </button>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default More;

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

@@ -0,0 +1,47 @@
+"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]);
+
+  // useEffect(() => {
+  //   setPlaying(true);
+  // }, [videoLoaded]);
+
+  return (
+    <div className={styles.imageWrapper} ref={sectionRef}>
+      {hasWindow && (
+        <ReactPlayer
+          playing
+          url={url}
+          width="100%"
+          height="100%"
+          loop
+          muted
+          playsinline
+        />
+      )}
+    </div>
+  );
+};
+
+export default Video;

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

@@ -0,0 +1,123 @@
+"use client";
+import { useState } from "react";
+import Container from "../../Container";
+import Video from "./Video";
+import styles from "./styles.module.scss";
+import Arrow from "../../../assets/svg/arrow.svg?react";
+import { Case, NextImage, NextLink, NextRouter } from "../../../types";
+import Top from "../Top";
+
+function Cases({
+  cases,
+  currentService,
+  currentIndustry,
+  Link,
+  Image,
+  useRouter,
+}: {
+  cases: Case[];
+  currentService?: string;
+  currentIndustry?: string;
+  Link: NextLink;
+  Image: NextImage;
+  useRouter: () => NextRouter;
+}) {
+  let defaultValue = {
+    category: "featured",
+    tag: "featured",
+  };
+
+  if (currentService) {
+    defaultValue = {
+      category: "service",
+      tag: currentService,
+    };
+  }
+
+  if (currentIndustry) {
+    defaultValue = {
+      category: "industry",
+      tag: currentIndustry,
+    };
+  }
+
+  const [selected, setSelected] = useState(defaultValue);
+  const services = [
+    "Brand Identity",
+    "Advertising & Campaigning",
+    "Strategy & Growth",
+    "Social Media & Influencer Marketing",
+    "Media & Performance",
+    "Content Creation & Production",
+    "B2B & Thought-Leadership",
+  ];
+  const industries = [
+    "Banken & Versicherungen",
+    "FMCG",
+    "Gesundheit & Wellness",
+    "Handel & E-Commerce",
+    "Lifestyle",
+    "Mobilität & Transport",
+    "Forschung & Bildung",
+    "Hospitality & Real Estate",
+    "Öffentlicher Sektor & Non-Profit",
+    "Versorgungsunternehmen",
+    "Konsumgüter & Technologie",
+    "Dienstleister",
+  ];
+
+  return (
+    <>
+      <Top
+        services={Array.from(services)}
+        industries={Array.from(industries)}
+        selected={selected}
+        setSelected={setSelected}
+        useRouter={useRouter}
+      />
+      <Container>
+        <div className={styles.wrapper}>
+          {cases.map((item) => {
+            if (!item.case) return null;
+            const { thumbnailVideo, mainImage } = item.case;
+
+            return (
+              <div key={item.id} className={styles.case}>
+                <Link href={item.uri}>
+                  {thumbnailVideo && (
+                    <Video url={thumbnailVideo.mediaItemUrl} />
+                  )}
+                  {!thumbnailVideo && mainImage && (
+                    <div className={styles.imageWrapper}>
+                      {mainImage.sourceUrl && (
+                        <Image
+                          className={styles.image}
+                          src={mainImage.sourceUrl}
+                          alt={item.title || ""}
+                          width={720}
+                          height={490}
+                        />
+                      )}
+                    </div>
+                  )}
+                  <div className={styles.texts}>
+                    <div>
+                      <h3 className={styles.title}>{item.title}</h3>
+                      <div className={styles.caption}>{item.case.caption}</div>
+                    </div>
+                    <div className={styles.arrowWrapper}>
+                      <Arrow />
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            );
+          })}
+        </div>
+        {cases.length < 1 && <div>no cases in this category</div>}
+      </Container>
+    </>
+  );
+}
+
+export default Cases;

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

@@ -0,0 +1,165 @@
+@use "../../variables" as *;
+
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
+.case {
+  width: 720px;
+  max-width: calc(60% - 32px);
+  margin-bottom: 64px;
+  position: relative;
+
+  &:hover {
+    .image {
+      transform: scale(1.1);
+    }
+
+    .title {
+      color: $color-blue;
+    }
+
+    path {
+      stroke: $color-blue;
+    }
+  }
+
+  @media #{$QUERY-lg} {
+    width: 56%;
+  }
+
+  @media #{$QUERY-sm} {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  &:nth-child(4n),
+  &:nth-child(4n + 1) {
+    width: 480px;
+    max-width: calc(40% - 32px);
+
+    @media #{$QUERY-lg} {
+      width: 40%;
+    }
+
+    @media #{$QUERY-sm} {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}
+
+.imageWrapper {
+  width: 100%;
+  height: 490px;
+  overflow: hidden;
+  background-color: $color-gray-light;
+
+  @media #{$QUERY-md} {
+    height: 300px;
+  }
+
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s;
+  }
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.texts {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 25px;
+  align-items: baseline;
+}
+
+.title {
+  font-size: 20px;
+  color: $color-brown;
+  transition: color 0.3s;
+  margin-bottom: 10px;
+  font-weight: 500;
+}
+
+.caption {
+  font-size: 22px;
+}
+
+.arrowWrapper {
+  path {
+    stroke: $color-brown;
+    stroke-width: 2px;
+  }
+}
+
+.loadMore {
+  background: none;
+  border: solid 1px $color-black;
+  width: 150px;
+  text-align: center;
+  padding: 15px;
+  margin: 0 auto;
+  cursor: pointer;
+  display: block;
+
+  &:hover {
+    background-color: $color-black;
+    color: $color-white;
+  }
+}
+
+.loading {
+  margin: 0 auto;
+  width: 180px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -65%);
+
+  @media #{$QUERY-lg} {
+    width: 100px;
+  }
+
+  svg {
+    max-width: 100%;
+  }
+}
+
+.rotateRight {
+  animation: rotate 8s linear infinite;
+  transform-origin: center;
+}
+
+.rotateLeft {
+  animation: rotate 8s linear infinite reverse;
+  transform-origin: center;
+}
+
+.bottom {
+  position: relative;
+  margin-bottom: 120px;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,61 @@
+"use client";
+import Container from "../../Container";
+import styles from "./styles.module.scss";
+import { casesPerPage } from "../../../queries/getCasesPage";
+import { NextRouter, NextSearchParams } from "../../../types";
+
+const Pagination = ({
+  total,
+  currentPage,
+  useRouter,
+  useSearchParams,
+}: {
+  total: number;
+  currentPage: number;
+  useRouter: () => NextRouter;
+  useSearchParams: () => NextSearchParams;
+}) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const numberOfPages = Math.ceil(total / casesPerPage);
+  const array = [...Array(numberOfPages).keys()];
+
+  const handleClick = (page: number) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("page", String(page));
+    router.push(`?${params.toString()}`, undefined, { scroll: false });
+  };
+
+  return (
+    <Container>
+      <div className={styles.pagination}>
+        {array.map((page) => {
+          if (currentPage === page + 1) {
+            return (
+              <span
+                key={page + 1}
+                className={`${styles.indicator} ${styles.current}`}
+              >
+                {page + 1}
+              </span>
+            );
+          }
+
+          return (
+            <button
+              key={page + 1}
+              className={styles.indicator}
+              onClick={() => {
+                handleClick(page + 1);
+              }}
+            >
+              {page + 1}
+            </button>
+          );
+        })}
+      </div>
+    </Container>
+  );
+};
+
+export default Pagination;

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

@@ -0,0 +1,27 @@
+@use "../../variables" as *;
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.indicator {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  font-size: 16px;
+  border: none;
+
+  &:not(span):hover {
+    background-color: $color-gray-light;
+    cursor: pointer;
+  }
+
+  &.current {
+    background-color: $color-gray-light;
+  }
+}