foundry-component-library 0.0.0 → 0.0.2

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

@@ -0,0 +1,86 @@
+import FullWidthImage from "./FullWidthImage";
+import CenterColumn from "./CenterColumn";
+import TwoColumns from "./TwoColumns";
+import Video from "./Video";
+import Container from "../../Container";
+import styles from "./styles.module.scss";
+import { type Content, NextImage } from "../../../types";
+import Results from "./Results";
+import Numbers from "./Numbers";
+import QuoteSection from "../../QuoteSection";
+
+function CaseContent({
+  content,
+  Image,
+}: {
+  content: Content;
+  Image: NextImage;
+}) {
+  if (!content) return null;
+
+  return (
+    <div className={styles.content}>
+      {content.map((section, i) => {
+        if (section.fieldGroupName === "Case_Case_Content_Quote") {
+          return (
+            <QuoteSection
+              key={section.fieldGroupName + i}
+              items={[
+                {
+                  name: section.name,
+                  position: section.position,
+                  text: section.text,
+                },
+              ]}
+            />
+          );
+        }
+        if (section.fieldGroupName === "Case_Case_Content_Results") {
+          return <Results key={section.fieldGroupName + i} section={section} />;
+        }
+        if (section.fieldGroupName === "Case_Case_Content_Numbers") {
+          return <Numbers key={section.fieldGroupName + i} section={section} />;
+        }
+        if (section.fieldGroupName === "Case_Case_Content_FullWidthImage") {
+          return (
+            <FullWidthImage
+              key={section.fieldGroupName + i}
+              section={section}
+              Image={Image}
+            />
+          );
+        }
+        if (section.fieldGroupName === "Case_Case_Content_CenterColumn") {
+          return (
+            <CenterColumn key={section.fieldGroupName + i} section={section} />
+          );
+        }
+        if (section.fieldGroupName === "Case_Case_Content_Twocolumns") {
+          return (
+            <TwoColumns
+              key={section.fieldGroupName + i}
+              section={section}
+              Image={Image}
+            />
+          );
+        }
+        if (section.fieldGroupName === "Case_Case_Content_Video") {
+          return (
+            <section
+              className={styles.section}
+              key={section.fieldGroupName + i}
+            >
+              <Container>
+                <Video section={section} />
+              </Container>
+            </section>
+          );
+        }
+
+        return undefined;
+      })}
+    </div>
+  );
+}
+
+export default CaseContent;

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

@@ -0,0 +1,175 @@
+@use "../../variables" as *;
+
+.section {
+  padding: 32px 0;
+}
+
+.fullWidthImage {
+  width: 100%;
+
+  @media #{$QUERY-md} {
+    // height: 400px;
+  }
+
+  @media #{$QUERY-sm} {
+    // height: 300px;
+  }
+
+  .image {
+    width: 100%;
+    object-fit: cover;
+
+    & div:first-child {
+      max-width: 100% !important;
+    }
+
+    @media #{$QUERY-sm} {
+      min-height: 160px;
+    }
+  }
+}
+
+.wysywig {
+  width: 620px;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.text {
+  max-width: 100%;
+  min-height: 350px;
+  font-size: 18px;
+  line-height: 1.4;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $font-secondary;
+    font-size: 42px;
+    font-weight: 400;
+    margin-bottom: 32px;
+  }
+
+  h3 {
+    font-size: 30px;
+  }
+}
+
+.twoColumns {
+  display: flex;
+  justify-content: space-between;
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
+.column {
+  width: 600px;
+  max-width: calc(50% - 20px);
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  @media #{$QUERY-sm} {
+    max-width: 100%;
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  .image {
+    width: 100%;
+    object-fit: cover;
+  }
+}
+
+.columnContent {
+  width: 100%;
+}
+
+.video {
+  max-width: 100%;
+  margin: 0 auto;
+  position: relative;
+  background-color: #eee;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  &.playing {
+    cursor: url("/svg/pause.svg"), auto;
+  }
+
+  &:not(.playing) {
+    cursor: url("/svg/play.svg"), auto;
+  }
+
+  .player {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  iframe,
+  video {
+    width: 100%;
+    height: 100%;
+    display: block;
+    margin: auto;
+  }
+}
+
+.btnMobile {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-size: contain;
+  background-repeat: no-repeat;
+  z-index: 5;
+  display: none;
+  background: transparent;
+  border: none;
+
+  &.playing {
+    background-image: url("/svg/pause.svg");
+  }
+
+  &:not(.playing) {
+    background-image: url("/svg/play.svg");
+  }
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+
+  &.playing {
+    cursor: url("/svg/pause.svg"), auto;
+  }
+
+  &:not(.playing) {
+    cursor: url("/svg/play.svg"), auto;
+  }
+
+  @media #{$QUERY-sm} {
+    display: none;
+  }
+}
+
+.caption {
+  color: $color-gray;
+  margin: 1rem auto;
+}

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

@@ -0,0 +1,66 @@
+import React from "react";
+import Container from "../../Container";
+import styles from "./styles.module.scss";
+import Arrow from "../../../assets/svg/arrow.svg?react";
+import { translate } from "../../../utils";
+import { Case, NextImage, NextLink } from "../../../types";
+
+function Other({
+  cases,
+  Link,
+  Image,
+}: {
+  cases: Case[];
+  Link: NextLink;
+  Image: NextImage;
+}) {
+  if (!cases) return;
+
+  return (
+    <Container>
+      <div className={styles.other}>
+        <div className={styles.caption}>{translate("Case Studies")}</div>
+        <h3 className={styles.heading}>
+          {translate("Success stories.\nWith proven results.")}
+        </h3>
+
+        <div className={styles.cases}>
+          {cases.map((item) => (
+            <div key={item.id} className={styles.case}>
+              <Link href={item.uri}>
+                <div className={styles.image}>
+                  {item.case.mainImage && (
+                    <Image
+                      className={styles.image}
+                      src={item.case.mainImage.sourceUrl}
+                      alt={item.title || ""}
+                      width={308}
+                      height={220}
+                    />
+                  )}
+                </div>
+                <div className={styles.texts}>
+                  <div>
+                    <div className={styles.title}>{item.title}</div>
+                    {item.case.excerpt && <div>{item.case.excerpt}</div>}
+                  </div>
+                  <div className={styles.more}>
+                    {translate("See More")}
+                    <Arrow />
+                  </div>
+                </div>
+              </Link>
+            </div>
+          ))}
+        </div>
+        <div className={styles.buttonWrapper}>
+          <Link className={styles.button} href="/cases">
+            {translate("See All")}
+          </Link>
+        </div>
+      </div>
+    </Container>
+  );
+}
+
+export default Other;

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

@@ -0,0 +1,118 @@
+@use "../../variables" as *;
+
+.other {
+  padding: 64px 0 80px;
+
+  @media #{$QUERY-md} {
+    padding: 60px 0 120px;
+  }
+
+  @media #{$QUERY-sm} {
+    padding: 60px 0;
+  }
+}
+
+.caption {
+  font-size: 18px;
+  color: $color-blue;
+  text-transform: uppercase;
+  margin-bottom: 5px;
+}
+
+.heading {
+  color: $color-brown;
+  font-size: 42px;
+  font-weight: 400;
+  white-space: pre-wrap;
+  margin-bottom: 56px;
+}
+
+.buttonWrapper {
+  text-align: center;
+  padding: 32px;
+}
+
+.button {
+  display: inline-block;
+}
+
+.cases {
+  display: flex;
+  margin: 0 -10px;
+
+  @media #{$QUERY-sm} {
+    display: block;
+    margin: 0;
+  }
+}
+
+.case {
+  width: calc(33.333% - 20px);
+  margin: 0 10px;
+
+  @media #{$QUERY-sm} {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 50px;
+  }
+
+  a {
+    color: $color-black;
+    text-decoration: none;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &:hover {
+      .more {
+        color: $color-pink;
+      }
+
+      path {
+        stroke: $color-pink;
+      }
+    }
+  }
+}
+
+.image {
+  width: 100%;
+  height: 220px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.texts {
+  border-left: solid 1px $color-gray-light;
+  border-right: solid 1px $color-gray-light;
+  border-bottom: solid 1px $color-gray-light;
+  padding: 24px 16px;
+  flex-grow: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: 20px;
+  margin-bottom: 16px;
+}
+
+.more {
+  padding-top: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 20px;
+  font-weight: 700;
+  color: $color-blue;
+  line-height: 1;
+
+  path {
+    stroke: $color-blue;
+  }
+}

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

@@ -0,0 +1,27 @@
+"use client";
+import { useState, useEffect } from "react";
+import styles from "./styles.module.scss";
+import { translate } from "../../../utils";
+
+function ShareButton() {
+  const [url, setUrl] = useState("https://foundry.berlin");
+
+  useEffect(() => {
+    if (document && document.URL) {
+      setUrl(document.URL);
+    }
+  }, []);
+
+  return (
+    <a
+      className={styles.button}
+      href={`http://www.facebook.com/share.php?u=${url}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {translate("Share")}
+    </a>
+  );
+}
+
+export default ShareButton;

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

@@ -0,0 +1,5 @@
+@use "../../variables" as *;
+
+.button {
+  @extend .button--pink;
+}

package/lib/components/case/Top/Loading.tsx

@@ -0,0 +1,51 @@
+import styles from "./styles.module.scss";
+import Container from "../../Container";
+import ShareButton from "../ShareButton";
+
+function Top() {
+  const details = [
+    {
+      heading: "lorem ipsum",
+      text: "lorem ipsum",
+    },
+    {
+      heading: "lorem ipsum",
+      text: "lorem ipsum",
+    },
+    {
+      heading: "lorem ipsum",
+      text: "lorem ipsum",
+    },
+  ];
+  return (
+    <div className={styles.top}>
+      <div className={`${styles.mainImage} ${styles.loading}`} />
+      <Container>
+        <div className={styles.wrapper}>
+          <div className={styles.titleWrapper}>
+            <div>
+              <div className={styles.caption}>Loading caption...</div>
+              <h1 className={styles.title}>Loading title...</h1>
+            </div>
+            <ShareButton />
+          </div>
+
+          <div className={styles.details}>
+            {details.map((detail, i) => {
+              const { heading, text } = detail;
+
+              return (
+                <div key={heading + i} className={styles.detail}>
+                  <div className={styles.heading}>{heading}</div>
+                  <div className={styles.paragraph}>{text}</div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default Top;

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

@@ -0,0 +1,94 @@
+import styles from "./styles.module.scss";
+import Container from "../../Container";
+import { translate } from "../../../utils";
+import { Case, NextImage } from "../../../types";
+import ShareButton from "../../case/ShareButton";
+
+function Top({
+  data,
+  title,
+  isCase,
+  Image,
+}: {
+  data?: Case;
+  title: string;
+  subtitle?: string;
+  isCase?: boolean;
+  Image: NextImage;
+}) {
+  if (!data) return;
+  const { caption, details, awards } = data.case;
+
+  return (
+    <div className={styles.top}>
+      {data.case.mainImage && (
+        <div className={styles.mainImage}>
+          <Image src={data.case.mainImage.sourceUrl} alt={title} fill />
+        </div>
+      )}
+      <Container>
+        <div className={styles.wrapper}>
+          <div className={styles.titleWrapper}>
+            <div>
+              {caption && <div className={styles.caption}>{caption}</div>}
+              <h1 className={`${styles.title} ${isCase ? styles.isCase : ""}`}>
+                {title}
+              </h1>
+            </div>
+            <ShareButton />
+          </div>
+
+          <div className={styles.details}>
+            {details &&
+              details.map((detail, i) => {
+                const { heading, text } = detail;
+
+                return (
+                  <div key={heading + i} className={styles.detail}>
+                    {heading && <div className={styles.heading}>{heading}</div>}
+                    {text && <div className={styles.paragraph}>{text}</div>}
+                  </div>
+                );
+              })}
+            {awards && (
+              <div className={styles.awardsWrapper}>
+                <div className={styles.heading}>{translate("Awards")}</div>
+                <div className={styles.awards}>
+                  {awards.map((award, i) => {
+                    const { heading, text, image } = award;
+
+                    return (
+                      <div key={i} className={styles.award}>
+                        {(heading || text) && (
+                          <div className={styles.awardTexts}>
+                            {heading && (
+                              <h3
+                                className={styles.awardHeading}
+                                dangerouslySetInnerHTML={{ __html: heading }}
+                              />
+                            )}
+                            {text && (
+                              <h4
+                                className={styles.awardText}
+                                dangerouslySetInnerHTML={{ __html: text }}
+                              />
+                            )}
+                          </div>
+                        )}
+                        <div className={styles.awardImage}>
+                          <img src={image.sourceUrl} alt={heading} />
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default Top;