foundry-component-library 0.0.0 → 0.0.2

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

@@ -0,0 +1,79 @@
+@use "../../variables" as *;
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
+.office {
+  width: calc(33.333% - 16px);
+  margin: 0 8px;
+
+  @media #{$QUERY-sm} {
+    width: 100%;
+    margin: 0 0 70px;
+  }
+}
+
+.image {
+  width: 100%;
+  padding-top: 144%;
+  position: relative;
+  background: $color-gray;
+  margin-bottom: 30px;
+
+  @media #{$QUERY-sm} {
+    margin-bottom: 15px;
+  }
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.text {
+  font-size: 16px;
+  line-height: 1.5;
+  color: $color-brown;
+
+  &.hasMargin {
+    margin-bottom: 1rem;
+  }
+
+  a {
+    &:hover {
+      color: $color-blue;
+    }
+  }
+}
+
+.heading {
+  font-size: 42px;
+  font-family: $font-secondary;
+  color: $color-brown;
+}
+
+.phone {
+  font-size: 16px;
+  color: $color-brown;
+  margin-top: 16px;
+  margin-bottom: 24px;
+}
+
+.address {
+  font-size: 16px;
+  color: $color-brown;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,15 @@
+import Container from "../../Container";
+import Offices from "../Offices/Loading";
+import styles from "./styles.module.scss";
+
+const index = () => {
+  return (
+    <div className={styles.officesSection}>
+      <Container>
+        <Offices />
+      </Container>
+    </div>
+  );
+};
+
+export default index;

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

@@ -0,0 +1,22 @@
+import Container from "../../Container";
+import Offices from "../Offices";
+import styles from "./styles.module.scss";
+import { NextImage, OfficeDetails } from "../../../types";
+
+const index = ({
+  details,
+  Image,
+}: {
+  details: OfficeDetails;
+  Image: NextImage;
+}) => {
+  return (
+    <div className={styles.officesSection}>
+      <Container>
+        <Offices details={details} Image={Image} />
+      </Container>
+    </div>
+  );
+};
+
+export default index;

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

@@ -0,0 +1,9 @@
+@use "../../variables" as *;
+
+.officesSection {
+  padding-bottom: 64px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 0;
+  }
+}

package/lib/components/news/Posts/Loading.tsx

@@ -0,0 +1,52 @@
+import styles from "./styles.module.scss";
+import Container from "../../Container";
+
+const Posts = () => {
+  const posts = [
+    {
+      id: "post1",
+    },
+    {
+      id: "post2",
+    },
+    {
+      id: "post3",
+    },
+    {
+      id: "post4",
+    },
+    {
+      id: "post5",
+    },
+    {
+      id: "post6",
+    },
+  ];
+  return (
+    <section className={styles.section}>
+      <Container>
+        {posts.map((item) => {
+          return (
+            <div key={item.id} className={styles.item}>
+              <div className={styles.wrapper}>
+                <div className={`${styles.image} ${styles.imageloading}`} />
+                <div className={styles.texts}>
+                  <span className={styles.date}>date...</span>
+                  <h2 className={styles.title}>
+                    <a>Loading title...</a>
+                  </h2>
+                  <div className={styles.excerpt}>Loading excerpt...</div>
+                  <div className={styles.button}>
+                    <a>Read more</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </Container>
+    </section>
+  );
+};
+
+export default Posts;

package/lib/components/news/Posts/More.tsx

@@ -0,0 +1,94 @@
+"use client";
+import { useState } from "react";
+import styles from "./styles.module.scss";
+import Hourglass from "../../../assets/svg/hourglass.svg?react";
+import { translate } from "../../../utils";
+import { getPosts } from "../../../queries";
+import { NextImage, NextLink, Post } from "../../../types";
+
+const More = ({
+  endCursor,
+  Link,
+  Image,
+}: {
+  endCursor: string;
+  Link: NextLink;
+  Image: NextImage;
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [news, setNews] = useState<Post[]>([]);
+  const [end, setEnd] = useState<string | null>(endCursor);
+  const [finished, setFinished] = useState(false);
+
+  const handleMore = async () => {
+    setLoading(true);
+
+    const { posts, pageInfo } = await getPosts({ params: { after: end } });
+
+    if (!pageInfo.hasNextPage) {
+      setFinished(true);
+    }
+
+    setNews([...news, ...posts]);
+    setEnd(pageInfo.endCursor);
+    setLoading(false);
+  };
+
+  return (
+    <>
+      {news &&
+        news.map((item) => {
+          const date = new Date(item.date).toLocaleDateString("de-DE");
+
+          return (
+            <div key={item.id} className={styles.item}>
+              <div className={styles.wrapper}>
+                <div className={styles.image}>
+                  {item.CustomFieldsPosts.thumbnailImage && (
+                    <Image
+                      src={item.CustomFieldsPosts.thumbnailImage.sourceUrl}
+                      alt={item.title || ""}
+                      width={626}
+                      height={375}
+                    />
+                  )}
+                </div>
+                <div className={styles.texts}>
+                  {date && <span className={styles.date}>{date}</span>}
+                  <h2 className={styles.title}>
+                    <Link href={`/news/${item.uri}`}>{item.title}</Link>
+                  </h2>
+                  <div className={styles.excerpt}>
+                    {item.CustomFieldsPosts.excerpt}
+                  </div>
+                  <div className={styles.btn}>
+                    <Link href={`/news/${item.uri}`}>
+                      {translate("Read more")}
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </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/news/Posts/index.tsx

@@ -0,0 +1,61 @@
+import styles from "./styles.module.scss";
+import Container from "../../Container";
+import { translate } from "../../../utils";
+import { NextImage, NextLink, Post } from "../../../types";
+import More from "./More";
+
+const Posts = ({
+  posts,
+  endCursor,
+  Link,
+  Image,
+}: {
+  posts: Post[];
+  endCursor: string;
+  Link: NextLink;
+  Image: NextImage;
+}) => {
+  return (
+    <section className={styles.section}>
+      <Container>
+        {posts.map((item) => {
+          const date = new Date(item.date).toLocaleDateString("de-DE");
+
+          return (
+            <div key={item.id} className={styles.item}>
+              <div className={styles.wrapper}>
+                <div className={styles.image}>
+                  {item.CustomFieldsPosts.thumbnailImage && (
+                    <Image
+                      src={item.CustomFieldsPosts.thumbnailImage.sourceUrl}
+                      alt={item.title || ""}
+                      width={626}
+                      height={375}
+                    />
+                  )}
+                </div>
+                <div className={styles.texts}>
+                  {date && <span className={styles.date}>{date}</span>}
+                  <h2 className={styles.title}>
+                    <Link href={`/news/${item.uri}`}>{item.title}</Link>
+                  </h2>
+                  <div className={styles.excerpt}>
+                    {item.CustomFieldsPosts.excerpt}
+                  </div>
+                  <div className={styles.buttonWrapper}>
+                    <Link className={styles.button} href={`/news/${item.uri}`}>
+                      {translate("Read more")}
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        <More endCursor={endCursor} Link={Link} Image={Image} />
+      </Container>
+    </section>
+  );
+};
+
+export default Posts;

package/lib/components/news/Posts/styles.module.scss

@@ -0,0 +1,171 @@
+@use "../../variables" as *;
+
+.section {
+  // Add any section specific styles
+}
+
+.item {
+  margin-bottom: 70px;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+
+  @media #{$QUERY-md} {
+    display: block;
+  }
+}
+
+.image {
+  height: 375px;
+  width: 600px;
+  max-width: 50%;
+  flex-shrink: 0;
+  background-color: $color-gray-light;
+  margin-right: 100px;
+
+  @media #{$QUERY-lg} {
+    margin-right: 0;
+  }
+
+  @media #{$QUERY-md} {
+    width: 100%;
+    max-width: 100%;
+    height: 350px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &.imageloading {
+    background-color: $color-gray-light;
+  }
+}
+
+.texts {
+  width: 600px;
+  max-width: 50%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  @media #{$QUERY-lg} {
+    padding-left: 50px;
+  }
+
+  @media #{$QUERY-md} {
+    width: 100%;
+    max-width: 100%;
+    padding: 30px 0 0;
+  }
+}
+
+.date {
+  font-size: 20px;
+  font-weight: 500;
+  color: $color-blue;
+  margin-bottom: 10px;
+  display: inline-block;
+}
+
+.title {
+  a {
+    font-size: 42px;
+    line-height: 1.2;
+    font-family: $font-secondary;
+    font-weight: 400;
+    margin-bottom: 15px;
+    color: $color-brown;
+    display: block;
+
+    @media #{$QUERY-md} {
+      font-size: 31px;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.excerpt {
+  font-size: 22px;
+  margin-bottom: 30px;
+  color: $color-brown;
+
+  @media #{$QUERY-md} {
+    font-size: 18px;
+  }
+}
+
+.buttonWrapper {
+}
+
+.button {
+  display: inline-block;
+}
+
+.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 {
+  min-height: 130px;
+  margin-top: 120px;
+  position: relative;
+
+  @media #{$QUERY-lg} {
+    min-height: 100px;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/components/single/Content/CenterColumn.tsx

@@ -0,0 +1,18 @@
+import Container from "../../Container";
+import styles from "./styles.module.scss";
+import { type CenterColumn } from "../../../types";
+
+function CenterColumn({ section }: { section: CenterColumn }) {
+  return (
+    <section className={styles.section}>
+      <Container>
+        <div
+          className={styles.content}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      </Container>
+    </section>
+  );
+}
+
+export default CenterColumn;

package/lib/components/single/Content/FullWidthImage.tsx

@@ -0,0 +1,60 @@
+import styles from "./styles.module.scss";
+import Container from "../../Container";
+import { NextImage, type FullWidthImage } from "../../../types";
+
+function FullWidthImage({
+  section,
+  Image,
+}: {
+  section: FullWidthImage;
+  Image: NextImage;
+}) {
+  if (!section || !section.image) return null;
+
+  const {
+    image: { sourceUrl },
+    caption,
+  } = section;
+
+  return (
+    <section className={styles.section}>
+      {!section.fullWidth && (
+        <Container>
+          <div className={styles.fullWidthImage}>
+            {sourceUrl && (
+              <Image
+                className={styles.image}
+                src={sourceUrl}
+                alt={caption ? caption : "foundry digital agency"}
+                layout="intrinsic"
+                width={1252}
+                height={600}
+              />
+            )}
+          </div>
+        </Container>
+      )}
+      {section.fullWidth && (
+        <div className={styles.fullWidthImage}>
+          {sourceUrl && (
+            <Image
+              className={styles.image}
+              src={sourceUrl}
+              alt={caption ? caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={1400}
+              height={600}
+            />
+          )}
+        </div>
+      )}
+      {caption && (
+        <Container>
+          <div className={styles.caption}>{caption}</div>
+        </Container>
+      )}
+    </section>
+  );
+}
+
+export default FullWidthImage;

package/lib/components/single/Content/Loading.tsx

@@ -0,0 +1,12 @@
+import Container from "../../Container";
+import styles from "./styles.module.scss";
+
+function Content() {
+  return (
+    <div className={styles.wrapper}>
+      <Container>loading content...</Container>
+    </div>
+  );
+}
+
+export default Content;

package/lib/components/single/Content/TwoColumns/Left.tsx

@@ -0,0 +1,80 @@
+import styles from "../styles.module.scss";
+import Video from "../Video";
+import { ColumnOption, NextImage } from "../../../../types";
+
+const Left = ({
+  section,
+  Image,
+}: {
+  section: ColumnOption;
+  Image: NextImage;
+}) => {
+  if (!section) return null;
+
+  return (
+    <div className={styles.columnContent}>
+      {/* case */}
+      {section.fieldGroupName === "Case_Case_Content_Twocolumns_Left_Text" && (
+        <div
+          className={styles.text}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName === "Case_Case_Content_Twocolumns_Left_Image" &&
+        section.image && (
+          <>
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName === "Case_Case_Content_Twocolumns_Left_Video" && (
+        <Video section={section} />
+      )}
+
+      {/* post */}
+      {section.fieldGroupName ===
+        "Post_Customfieldsposts_Content_Twocolumns_Left_Text" && (
+        <div
+          className={styles.text}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName ===
+        "Post_Customfieldsposts_Content_Twocolumns_Left_Image" &&
+        section.image && (
+          <>
+            {section.image.sourceUrl && (
+              <Image
+                className={styles.image}
+                src={section.image.sourceUrl}
+                alt={
+                  section.caption ? section.caption : "foundry digital agency"
+                }
+                layout="intrinsic"
+                width={600}
+                height={600}
+              />
+            )}
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName ===
+        "Post_Customfieldsposts_Content_Twocolumns_Left_Video" && (
+        <Video section={section} />
+      )}
+    </div>
+  );
+};
+
+export default Left;