npm - foundry-component-library - Versions diffs - 0.2.0 → 0.2.2 - Mend

foundry-component-library 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/lib/components/AgencyNumbers/styles.module.scss CHANGED Viewed

@@ -25,6 +25,7 @@
   margin-bottom: 36px;
   white-space: pre-wrap;
   line-height: 1.2;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 28px;
@@ -82,6 +83,7 @@
 .number {
   font-size: 42px;
   margin-bottom: 5px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 36px;
@@ -90,6 +92,7 @@
 .description {
   font-size: 22px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 16px;

package/lib/components/Awards/styles.module.scss CHANGED Viewed

@@ -13,6 +13,7 @@
   color: $color-brown;
   margin-bottom: 64px;
   line-height: 1.3;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 28px;

package/lib/components/Capabilities/index.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ const Capabilities = ({
               key={item.heading}
               title={item.heading}
               text={item.text}
-              cases={item.cases}
+              cases={item.cases || []}
               active={active}
               setActive={setActive}
               Link={Link}

package/lib/components/Capabilities/styles.module.scss CHANGED Viewed

@@ -4,6 +4,7 @@
   font-size: 42px;
   margin-bottom: 64px;
   color: $color-brown;
+  font-family: $font-secondary;
 }
 .items {
@@ -38,6 +39,7 @@
 .title {
   font-size: 34px;
+  font-family: $font-secondary;
   @media #{$QUERY-md} {
     font-size: 18px;
@@ -170,6 +172,7 @@
   justify-content: space-between;
   align-items: baseline;
   gap: 10px;
+  font-family: $font-secondary;
   svg {
     flex-shrink: 0;

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

@@ -13,6 +13,7 @@
   font-size: 42px;
   color: $color-brown;
   margin-bottom: 64px;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-sm) {
     font-size: 28px;
@@ -82,6 +83,7 @@
 .caption {
   text-transform: uppercase;
   font-size: 20px;
+  font-family: $font-secondary;
 }
 .title {
@@ -89,6 +91,7 @@
   margin-bottom: 40px;
   line-height: 1.2;
   width: 300px;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-sm) {
     font-size: 31px;

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

@@ -26,6 +26,7 @@
   margin-bottom: 24px;
   white-space: pre-wrap;
   line-height: 1.1;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 32px;
@@ -43,6 +44,7 @@
 .text {
   font-size: 20px;
   margin-bottom: 48px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 16px;

package/lib/components/DoubleTiles/styles.module.scss CHANGED Viewed

@@ -78,6 +78,7 @@
 .heading {
   font-size: 42px;
   margin-bottom: 42px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 28px;

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

@@ -52,6 +52,7 @@
 .logoText {
   font-size: 24px;
   margin-bottom: 48px;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-sm) {
     display: none;

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

@@ -143,6 +143,7 @@
   a {
     display: inline-block;
     font-size: 42px;
+    font-family: $font-secondary;
     &.active,
     &:hover {
@@ -155,6 +156,7 @@
   font-weight: 500;
   font-size: 20px;
   color: $color-brown;
+  font-family: $font-secondary;
   a {
     border-bottom: solid 1px $color-yellow-shade;

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

@@ -69,7 +69,7 @@
   font-size: 200px;
   font-weight: 400;
   color: $color-white;
-  font-family: $font-secondary;
+  font-family: $font-special;
   @media screen and (max-width: $screen-md) {
     font-size: 120px;

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

@@ -55,6 +55,7 @@
 .title {
   font-size: 42px;
   width: 360px;
+  font-family: $font-secondary;
   @media #{$QUERY-md} {
     width: 320px;
@@ -71,6 +72,7 @@
 .text {
   font-size: 34px;
   width: 600px;
+  font-family: $font-secondary;
   @media #{$QUERY-md} {
     font-size: 18px;
@@ -150,6 +152,7 @@
   text-transform: uppercase;
   width: 544px;
   max-width: 100%;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     margin-bottom: 20px;
@@ -178,6 +181,7 @@
     border-radius: 30px;
     padding: 11px 24px;
     background-color: $color-gray-light;
+    font-family: $font-secondary;
     &:hover {
       background-color: $color-pink;
@@ -267,6 +271,7 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
+  font-family: $font-secondary;
   svg {
     flex-shrink: 0;

package/lib/components/ImageTitle/styles.module.scss CHANGED Viewed

@@ -43,6 +43,7 @@
   margin-bottom: 42px;
   line-height: 1.1;
   white-space: pre-wrap;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-md) {
     font-size: 31px;

package/lib/components/LargeText/styles.module.scss CHANGED Viewed

@@ -28,6 +28,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-sm) {
     font-size: 32px;

package/lib/components/Management/styles.module.scss CHANGED Viewed

@@ -37,6 +37,7 @@
   font-size: 42px;
   margin-bottom: 25px;
   line-height: 1.2;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-md) {
     font-size: 31px;

package/lib/components/MarketingStats/styles.module.scss CHANGED Viewed

@@ -46,6 +46,7 @@
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 16px;
+  font-family: $font-secondary;
 }
 .text {

package/lib/components/NewsTeaser/styles.module.scss CHANGED Viewed

@@ -40,6 +40,7 @@
   text-transform: uppercase;
   margin-bottom: 8px;
   color: $color-blue;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 16px;
@@ -50,6 +51,7 @@
   font-size: 42px;
   margin-bottom: 32px;
   line-height: 1.2;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 28px;
@@ -60,6 +62,7 @@
 .text {
   font-size: 22px;
   margin-bottom: 48px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 16px;
@@ -111,6 +114,7 @@
   font-size: 20px;
   margin-bottom: 16px;
   font-weight: 500;
+  font-family: $font-secondary;
 }
 .excerpt {
@@ -128,6 +132,7 @@
   font-weight: 500;
   color: $color-brown;
   line-height: 1;
+  font-family: $font-secondary;
   path {
     stroke: $color-brown;

package/lib/components/OfficesTeaser/styles.module.scss CHANGED Viewed

@@ -23,6 +23,7 @@
   font-size: 20px;
   color: $color-blue;
   margin-bottom: 5px;
+  font-family: $font-secondary;
 }
 .heading {
@@ -30,6 +31,7 @@
   line-height: 1.1;
   white-space: pre-wrap;
   color: $color-brown;
+  font-family: $font-secondary;
   @media #{$QUERY-xl} {
     margin-bottom: 32px;

package/lib/components/QuoteSection/styles.module.scss CHANGED Viewed

@@ -49,6 +49,7 @@
   margin-bottom: 5px;
   width: 211px;
   max-width: 100%;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 22px;
@@ -69,6 +70,7 @@
   font-size: 34px;
   width: 800px;
   max-width: 100%;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-md) {
     font-size: 25px;

package/lib/components/ServiceHubsTeaser/styles.module.scss CHANGED Viewed

@@ -63,6 +63,7 @@
   font-size: 34px;
   width: 100%;
   height: 100%;
+  font-family: $font-secondary;
   &.yellow {
     background-color: $color-yellow;
@@ -119,6 +120,7 @@
   padding-left: 30px;
   display: none;
   font-size: 34px;
+  font-family: $font-secondary;
 }
 .tailsText {

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

@@ -4,6 +4,7 @@
   font-size: 42px;
   margin-bottom: 55px;
   color: $color-brown;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 28px;

package/lib/components/TextSection/styles.module.scss CHANGED Viewed

@@ -51,6 +51,7 @@
   color: $color-brown;
   margin-bottom: 24px;
   white-space: pre-wrap;
+  font-family: $font-secondary;
   &.small {
     font-size: 42px;

package/lib/components/Tiles/styles.module.scss CHANGED Viewed

@@ -21,6 +21,7 @@
   color: $color-brown;
   font-size: 42px;
   flex-shrink: 0;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-sm) {
     max-width: 90%;
@@ -87,6 +88,7 @@
   padding: 30px;
   display: none;
   font-size: 34px;
+  font-family: $font-secondary;
   @media screen and (max-width: $screen-sm) {
     font-size: 25px;

package/lib/components/_variables.scss CHANGED Viewed

@@ -26,7 +26,8 @@ $QUERY-lg: "screen and (max-width: 1024px)";
 $QUERY-xl: "screen and (max-width: 1200px)";
 $font-primary: "Host Grotesk", sans-serif;
-$font-secondary: "kareliaOuttakes", sans-serif;
+$font-secondary: "kareliaFont", "kareliaFont Fallback", sans-serif;
+$font-special: "kareliaOuttakes", sans-serif;
 .button {
   border: solid 1px $color-blue;
@@ -35,6 +36,7 @@ $font-secondary: "kareliaOuttakes", sans-serif;
   padding: 10px 32px 12px;
   font-size: 22px;
   transition: 0.3s;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 16px;
@@ -143,6 +145,7 @@ $font-secondary: "kareliaOuttakes", sans-serif;
   font-weight: 500;
   transition: 0.3s;
   display: inline-block;
+  font-family: $font-secondary;
   &:hover {
     background-color: $color-pink;

package/lib/components/case/Content/Results/styles.module.scss CHANGED Viewed

@@ -30,4 +30,5 @@
 .heading {
   font-size: 34px;
   margin-bottom: 20px;
+  font-family: $font-secondary;
 }

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

@@ -50,6 +50,7 @@
     font-size: 42px;
     font-weight: 400;
     margin-bottom: 32px;
+    font-family: $font-secondary;
   }
   h3 {

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

@@ -35,6 +35,7 @@
   font-weight: 400;
   white-space: pre-wrap;
   margin-bottom: 56px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 28px;
@@ -116,6 +117,7 @@
 .title {
   font-size: 20px;
   margin-bottom: 16px;
+  font-family: $font-secondary;
 }
 .more {
@@ -127,6 +129,7 @@
   font-weight: 500;
   color: $color-blue;
   line-height: 1;
+  font-family: $font-secondary;
   path {
     stroke: $color-blue;

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

@@ -39,6 +39,7 @@
   color: $color-blue;
   text-transform: uppercase;
   margin-bottom: 5px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 16px;
@@ -65,7 +66,7 @@
   max-width: 100%;
   color: $color-brown;
   font-weight: 400;
-  font-family: $font-secondary;
+  font-family: $font-special;
   @media #{$QUERY-sm} {
     font-size: 32px;
@@ -77,6 +78,7 @@
   line-height: 1.2;
   font-weight: 400;
   margin-top: 30px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 24px;
@@ -112,6 +114,7 @@
   margin-bottom: 10px;
   font-size: 20px;
   text-transform: uppercase;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 14px;
@@ -157,6 +160,7 @@
   max-width: 100%;
   flex-shrink: 0;
   margin-right: 20px;
+  font-family: $font-secondary;
 }
 .awardImage {
@@ -177,6 +181,7 @@
 .awardHeading {
   font-weight: bold;
   margin-bottom: 10px;
+  font-family: $font-secondary;
 }
 .mainImage {

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

@@ -93,6 +93,7 @@
   transition: color 0.3s;
   margin-bottom: 10px;
   font-weight: 500;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 18px;
@@ -102,6 +103,7 @@
 .caption {
   font-size: 22px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 16px;

package/lib/components/cases/Top/styles.module.scss CHANGED Viewed

@@ -20,10 +20,16 @@
 .dropdown {
   position: relative;
-  width: 130px;
+  width: 150px;
+  transition: width 0.3s;
+  &:hover {
+    width: 200px;
+  }
   &.active {
     z-index: 3;
+    width: 200px;
   }
 }

package/lib/components/contact/Accounts/styles.module.scss CHANGED Viewed

@@ -14,6 +14,7 @@
   font-size: 42px;
   margin-bottom: 46px;
   font-weight: 400;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 24px;
@@ -56,6 +57,7 @@
   font-size: 20px;
   font-weight: 500px;
   margin-bottom: 16px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 18px;

package/lib/components/contact/Contacts/index.tsx CHANGED Viewed

@@ -1,6 +1,10 @@
+"use client";
 import Container from "../../Container";
 import styles from "./styles.module.scss";
 import Arrow from "../../../assets/svg/arrow.svg";
+import { useState } from "react";
+import Script from "next/script";
+import useClickOutside from "../../../hooks/useClickOutside";
 function Contacts({
   title,
@@ -13,6 +17,8 @@ function Contacts({
     email: string;
   }[];
 }) {
+  const [isTypeformOpen, setIsTypeformOpen] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => setIsTypeformOpen(false));
   if (!items) return;
   return (
@@ -21,7 +27,11 @@ function Contacts({
         <h2 className={styles.title}>{title}</h2>
         <div className={styles.boxes}>
           {items.map((item, i) => {
-            const { heading, subheading, email } = item;
+            const {
+              heading,
+              subheading,
+              // email
+            } = item;
             return (
               <div className={styles.box} key={heading}>
@@ -32,7 +42,10 @@ function Contacts({
                     dangerouslySetInnerHTML={{ __html: subheading }}
                   />
                 </div>
-                <a className={styles.buttonSecondary} href={`mailto:${email}`}>
+                <a
+                  className={styles.buttonSecondary}
+                  onClick={() => setIsTypeformOpen(true)}
+                >
                   {i === 0 && "Contact Account"}
                   {i === 1 && "General Contact"}
                   {i === 2 && "Contact HR"}
@@ -42,6 +55,21 @@ function Contacts({
             );
           })}
         </div>
+        <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' }} /> */}
+            <div
+              data-tf-widget="DJkseH"
+              data-tf-iframe-props="title=Foundry Website Contact Form"
+              data-tf-medium="snippet"
+              style={{ width: "100%", height: "400px" }}
+            />
+          </div>
+        </div>
       </Container>
     </section>
   );

package/lib/components/contact/Contacts/styles.module.scss CHANGED Viewed

@@ -14,6 +14,7 @@
   font-size: 42px;
   margin-bottom: 46px;
   font-weight: 400;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 28px;
@@ -62,6 +63,7 @@
   font-weight: 400;
   line-height: 1.2;
   margin-bottom: 24px;
+  font-family: $font-secondary;
   @media #{$QUERY-md} {
     font-size: 21px;
@@ -87,3 +89,25 @@
     stroke-width: 2px;
   }
 }
+.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/contact/Offices/styles.module.scss CHANGED Viewed

@@ -73,6 +73,7 @@
 .heading {
   font-size: 42px;
   color: $color-brown;
+  font-family: $font-secondary;
 }
 .phone {

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

@@ -69,6 +69,7 @@
   color: $color-blue;
   margin-bottom: 10px;
   display: inline-block;
+  font-family: $font-secondary;
 }
 .title {
@@ -79,6 +80,7 @@
     margin-bottom: 15px;
     color: $color-brown;
     display: block;
+    font-family: $font-secondary;
     @media #{$QUERY-md} {
       font-size: 31px;
@@ -94,6 +96,7 @@
   font-size: 22px;
   margin-bottom: 30px;
   color: $color-brown;
+  font-family: $font-secondary;
   @media #{$QUERY-md} {
     font-size: 18px;

package/lib/components/single/Other/styles.module.scss CHANGED Viewed

@@ -31,6 +31,7 @@
   font-size: 82px;
   font-weight: bold;
   margin-right: 20px;
+  font-family: $font-secondary;
   @media #{$QUERY-md} {
     font-size: 42px;

package/lib/components/single/Top/styles.module.scss CHANGED Viewed

@@ -83,7 +83,7 @@
   line-height: 1.2;
   font-weight: bold;
   margin-bottom: 0;
-  font-family: $font-secondary;
+  font-family: $font-special;
   &.isCase {
     margin-bottom: 50px;
@@ -99,6 +99,7 @@
   line-height: 1.2;
   font-weight: 400;
   margin-top: 30px;
+  font-family: $font-secondary;
   @media #{$QUERY-sm} {
     font-size: 24px;

package/package.json CHANGED Viewed

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