@npm_leadtech/legal-lib-components 5.2.40 → 5.3.1

package/dist/src/components/pages/LoginRatafiaPage/LoginPageRatafia.scss

@@ -2,7 +2,7 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .login-ratafia-page {
-  background-color: get-color(neutral, neutral-6);
+  background-color: var(--neutral-neutral-6);
   &__ctas {
     text-align: center;
     &__button {
@@ -14,7 +14,7 @@
       &__button {
         background: none;
         border: none;
-        color: get-color(primary, main);
+        color: var(--primary-main);
         text-decoration: underline;
         cursor: pointer;
       }

package/dist/src/components/sections/AboutUsSection/AboutUsSection.scss

@@ -3,7 +3,7 @@
 
 .about-us-section {
   padding-top: 1.125rem;
-  background: get-color(primary, main-light-6);
+  background: var(--primary-main-light-6);
   margin-bottom: 3rem;
 
   @include laptop {
@@ -18,10 +18,10 @@
       font-size: 0.8rem;
       line-height: 1.2;
       font-weight: 700;
-      font-family: $font-sans;
-      color: get-color(neutral, neutral-2);
+      font-family: var(--font-sans);
+      color: var(--neutral-neutral-2);
       padding-bottom: 0.5rem;
-      border-bottom: 1px solid get-color(neutral, neutral-3);
+      border-bottom: 1px solid var(--neutral-neutral-3);
     }
   }
 
@@ -32,8 +32,8 @@
     line-height: 1.2;
     letter-spacing: -0.4px;
     font-weight: 400;
-    font-family: $font-serif;
-    color: get-color(neutral, neutral-1);
+    font-family: var(--font-serif);
+    color: var(--neutral-neutral-1);
 
     @include landscape-tablets {
       font-size: 2.3rem;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AsSeeInContent } from '../../organisms';
+import { AsSeeInContent, ContactContent } from '../../organisms';
 // import './AsSeeInSection.scss'
 const AsSeeInSection = ({ title, contentAsSeeIn, contactSectionTitle, contactSectionText, contactSectionBlocks }) => {
     if (contentAsSeeIn.trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsxs("section", { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (_jsxs("div", { className: 'contact-us-section', children: [_jsx("h2", { className: 'contact-us-section__title', children: contactSectionTitle }), _jsx("p", { className: 'contact-us-section__text', children: contactSectionText }), Array.isArray(contactSectionBlocks) && (_jsx("div", { className: 'contact-us-section-blocks', children: contactSectionBlocks.map((item, index) => (_jsxs("div", { className: 'contact-us-section-blocks__item', children: [_jsx("div", { className: 'contact-us-section-blocks__item__image', children: item.image }), _jsx("div", { className: 'contact-us-section-blocks__item__title', children: item.title }), _jsx("p", { className: 'contact-us-section-blocks__item__text', children: item.body })] }, index))) }))] }))] }));
+    return (_jsxs("section", { className: 'as-seen-in-section-box', children: [_jsxs("div", { className: 'as-seen-in-section wrapper', children: [_jsx("h2", { className: 'as-seen-in-section__title', children: title }), _jsx(AsSeeInContent, { trustWorthyImages: contentAsSeeIn.trustWorthyImages, children: contentAsSeeIn.children })] }), _jsx(ContactContent, { title: contactSectionTitle, text: contactSectionText, contactCards: contactSectionBlocks })] }));
 };
 export default AsSeeInSection;

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.scss

@@ -12,7 +12,7 @@
   .as-seen-in-section {
     display: flex;
     flex-direction: column;
-    box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
     background: get-color(others, white);
     transform: translateY(-5rem);
     padding: 1.5rem 0;
@@ -22,9 +22,10 @@
     }
 
     &__title {
+      color: var(--neutral-neutral-2);
       text-align: center;
       font-size: 32px;
-      font-family: $font-serif;
+      font-family: var(--font-serif);
       font-style: normal;
       font-weight: 400;
       line-height: 42px;
@@ -33,65 +34,3 @@
     }
   }
 }
-
-.contact-us-section {
-  display: flex;
-  flex-direction: column;
-  transform: translateY(-5rem);
-  color: var(--neutral-neutral-1);
-  margin-top: 1rem;
-
-  &__title {
-    text-align: center;
-    font-size: 32px;
-    font-family: $font-serif;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 42px;
-    letter-spacing: -0.3px;
-    margin: 1rem 0;
-  }
-
-  &__text {
-    text-align: center;
-    font-style: normal;
-    font-weight: 400;
-    margin: 0 0 2rem 0;
-  }
-
-  &-blocks {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: 1rem;
-
-    @include laptop {
-      flex-direction: row;
-      gap: 2.5rem;
-    }
-
-    &__item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      background-color: white;
-      box-shadow: 0px 2px 6px 0px rgba(2, 55, 74, 0.25);
-      border-radius: 0.25rem;
-      min-width: 200px;
-      padding: 1rem;
-
-      &__image {
-        width: 2rem;
-      }
-
-      &__title {
-        margin-top: 1rem;
-        line-height: 1rem;
-      }
-
-      &__text {
-        font-size: 14px;
-      }
-    }
-  }
-}

package/dist/src/components/sections/AsSeeInSection/AsSeeInSection.tsx

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 
-import { AsSeeInContent } from '../../organisms'
+import { AsSeeInContent, ContactContent } from '../../organisms'
 import { type AsSeeInSectionProps } from './AsSeeInSectionProps.types'
 // import './AsSeeInSection.scss'
 
@@ -21,23 +21,7 @@ const AsSeeInSection: FC<AsSeeInSectionProps> = ({
         <h2 className='as-seen-in-section__title'>{title}</h2>
         <AsSeeInContent trustWorthyImages={contentAsSeeIn.trustWorthyImages}>{contentAsSeeIn.children}</AsSeeInContent>
       </div>
-      {Array.isArray(contactSectionBlocks) && contactSectionBlocks.length > 0 && (
-        <div className='contact-us-section'>
-          <h2 className='contact-us-section__title'>{contactSectionTitle}</h2>
-          <p className='contact-us-section__text'>{contactSectionText}</p>
-          {Array.isArray(contactSectionBlocks) && (
-            <div className='contact-us-section-blocks'>
-              {contactSectionBlocks.map((item, index) => (
-                <div className='contact-us-section-blocks__item' key={index}>
-                  <div className='contact-us-section-blocks__item__image'>{item.image}</div>
-                  <div className='contact-us-section-blocks__item__title'>{item.title}</div>
-                  <p className='contact-us-section-blocks__item__text'>{item.body}</p>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
+      <ContactContent title={contactSectionTitle} text={contactSectionText} contactCards={contactSectionBlocks} />
     </section>
   )
 }

package/dist/src/components/sections/AsSeeInSection/AsSeeInSectionProps.types.d.ts

@@ -1,12 +1,9 @@
-import { type AsSeeInContentProps } from '../../organisms/AsSeeInContent';
+import { type AsSeeInContentProps } from '../../organisms';
+import { ContactCardProps } from '../../atoms';
 export interface AsSeeInSectionProps {
     title: string;
     contentAsSeeIn: AsSeeInContentProps;
     contactSectionTitle: string;
     contactSectionText: string;
-    contactSectionBlocks?: {
-        image: React.ReactNode;
-        title: string;
-        body: string;
-    }[];
+    contactSectionBlocks?: ContactCardProps[];
 }

package/dist/src/components/sections/AsSeeInSection/AsSeeInSectionProps.types.ts

@@ -1,13 +1,10 @@
-import { type AsSeeInContentProps } from '../../organisms/AsSeeInContent'
+import { type AsSeeInContentProps } from '../../organisms'
+import { ContactCardProps } from '../../atoms'
 
 export interface AsSeeInSectionProps {
   title: string
   contentAsSeeIn: AsSeeInContentProps
   contactSectionTitle: string
   contactSectionText: string
-  contactSectionBlocks?: {
-    image: React.ReactNode
-    title: string
-    body: string
-  }[]
+  contactSectionBlocks?: ContactCardProps[]
 }

package/dist/src/components/sections/AsideMenuSection/AsideMenuSection.scss

@@ -2,7 +2,7 @@
 
 .asideMenu {
   .title {
-    color: get-color(neutral, neutral-1);
+    color: var(--neutral-neutral-1);
     font-weight: bold;
     padding-bottom: 1rem;
     border-bottom: get-color(neutral, neutral-4) 1px solid;
@@ -17,7 +17,7 @@
   }
 
   .navItem {
-    color: get-color(neutral, neutral-1);
+    color: var(--neutral-neutral-1);
     font-size: 14px;
     line-height: 18px;
     letter-spacing: -0.3px;
@@ -32,7 +32,7 @@
     &.inView {
       span,
       a {
-        color: get-color(primary, main);
+        color: var(--primary-main);
         font-weight: 700;
       }
     }

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.scss

@@ -47,10 +47,10 @@
       gap: 1rem;
 
       &__text {
-        color: get-color(others, white);
+        color: var(--others-white);
       }
       &__description {
-        color: get-color(others, white);
+        color: var(--others-white);
       }
     }
   }

package/dist/src/components/sections/BlogSection/BlogSection.scss

@@ -15,7 +15,7 @@
   }
 
   .blog__title {
-    color: get-color(primary, main-dark-1);
+    color: var(--primary-main-dark-1);
 
     @include laptop {
       margin-bottom: 3rem;

package/dist/src/components/sections/ContactSection/ContactSection.scss

@@ -2,7 +2,7 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .contact-container {
-  background-color: get-color(primary, main-light-6);
+  background-color: var(--primary-main-light-6);
 
   span > a {
     text-decoration: underline;
@@ -42,7 +42,7 @@
   .contact-right-container {
     display: flex;
     justify-content: flex-start;
-    background-color: get-color(primary, main-light-6);
+    background-color: var(--primary-main-light-6);
     margin-bottom: 2.5rem;
     width: 100%;
 

package/dist/src/components/sections/ExpertsSection/ExpertsSection.scss

@@ -5,16 +5,17 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: get-color(primary, main-light-6);
+  background-color: var(--neutral-neutral-6);
   margin-bottom: 4rem;
 
   &__title {
-    font-family: $font-serif;
+    font-family: var(--font-serif);
     font-size: 32px;
     font-weight: 400;
     line-height: 42px;
     letter-spacing: -0.3px;
     text-align: center;
+    margin: 0 auto 5rem;
     width: 90%;
     transform: translateY(50px);
 

package/dist/src/components/sections/FaqSection/FaqSection.scss

@@ -17,7 +17,7 @@
 
   padding: 3rem 1.5rem 5rem 1.5rem;
   max-width: none;
-  background: get-color(neutral, neutral-6);
+  background: var(--neutral-neutral-6);
 
   @include laptop {
     padding: 3rem 2rem 5rem 2rem;

package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSection.scss

@@ -2,7 +2,7 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .how-it-works-wrapper {
-  background-color: get-color(neutral, neutral-6);
+  background-color: var(--neutral-neutral-6);
 
   @include laptop {
     background-repeat: no-repeat;
@@ -16,7 +16,7 @@
 
   .works-title {
     width: auto;
-    font-family: $font-serif;
+    font-family: var(--font-serif);
     text-align: center;
     padding-top: 4rem;
     @media only screen and (max-width: #{$md}) {

package/dist/src/components/sections/JumbotronSimplifiedSection/JumbotronSimplifiedSection.scss

@@ -2,7 +2,7 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .jumbotron--simplified {
-  background: get-color(primary, main-light-6);
+  background: var(--primary-main-light-6);
   margin-bottom: -12rem;
   text-align: center;
   padding-bottom: 13rem;
@@ -29,7 +29,7 @@
 }
 
 .jumbotron--simplified__subtitle {
-  color: get-color(neutral, neutral-1);
+  color: var(--neutral-neutral-1);
   font-size: 1rem;
   line-height: 1.5rem;