npm - @npm_leadtech/legal-lib-components - Versions diffs - 5.45.2 → 5.46.1 - Mend

@npm_leadtech/legal-lib-components 5.45.2 → 5.46.1

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 (200) hide show

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.styled.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+import backElementL from '../../../../images/svg/benefit-bckground-l.svg'
+import backElementS from '../../../../images/svg/benefit-bckground-s.svg'
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
@@ -25,7 +27,7 @@ export const BenefitsRatafiaSectionStyled = styled.section`
       align-self: stretch;
       padding: 1.5rem;
       gap: 2rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
       @media ${device['landscape-tablets']} {
@@ -41,7 +43,7 @@ export const BenefitsRatafiaSectionStyled = styled.section`
         justify-content: center;
         align-items: flex-start;
         align-self: stretch;
-        gap: 1rem;
+        gap: var(--global-gap);
         &__text {
           color: var(--others-white);
@@ -50,6 +52,45 @@ export const BenefitsRatafiaSectionStyled = styled.section`
           color: var(--others-white);
         }
       }
+      &.--is-esignature {
+        background-image: url(${backElementS});
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        animation: none;
+        @media ${device['landscape-tablets']} {
+          background-image: url(${backElementL});
+          background-size: cover, cover;
+          background-position: center, center;
+          background-repeat: no-repeat, no-repeat;
+        }
+      }
+      .benefit-ratafia-card {
+        box-shadow: none;
+      }
+    }
+  }
+  .--is-esignature {
+    .benefit-ratafia-section {
+      &__wrapper {
+        &__title {
+          &__text {
+            color: var(--primary-main-dark-2);
+          }
+          &__description {
+            color: var(--neutral-neutral-1);
+            a {
+              color: var(--primary-main);
+              text-decoration: underline;
+            }
+          }
+        }
+      }
     }
   }
 `

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSection.tsx CHANGED Viewed

@@ -3,17 +3,27 @@ import React, { type FC } from 'react'
 import { BenefitRatafiaCardList } from '../../molecules'
 import { type BenefitsRatafiaSectionProps } from './BenefitsRatafiaSectionProps.types'
 import { BenefitsRatafiaSectionStyled } from './BenefitsRatafiaSection.styled'
+import classNames from 'classnames'
-const BenefitsRatafiaSection: FC<BenefitsRatafiaSectionProps> = ({ title, description, benefits }) => {
+const BenefitsRatafiaSection: FC<BenefitsRatafiaSectionProps> = ({
+  title,
+  description,
+  benefits,
+  descriptionRichtext
+}) => {
+  const isEsignatureLanding = descriptionRichtext !== undefined
+  const classnames = classNames({
+    '--is-esignature': isEsignatureLanding
+  })
   return (
     <BenefitsRatafiaSectionStyled className='benefit-ratafia-section'>
-      <div className='benefit-ratafia-section__wrapper background-ratafia-animation'>
+      <div className={`benefit-ratafia-section__wrapper background-ratafia-animation ${classnames}`}>
         <div className='benefit-ratafia-section__wrapper__title'>
           <h2 className='sans-serif --super-large --bold-weight benefit-ratafia-section__wrapper__title__text'>
             {title}
           </h2>
           <p className='sans-serif --super-medium benefit-ratafia-section__wrapper__title__description'>
-            {description}
+            {isEsignatureLanding ? descriptionRichtext : description}
           </p>
         </div>
         <BenefitRatafiaCardList benefits={benefits} />

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSectionProps.types.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { type BenefitRatafiaCardProps } from '../../atoms';
+import React from 'react';
 export interface BenefitsRatafiaSectionProps {
     title: string;
     description: string;
+    descriptionRichtext: React.ReactNode;
     benefits: BenefitRatafiaCardProps[];
 }

package/dist/src/components/sections/BenefitsRatafiaSection/BenefitsRatafiaSectionProps.types.ts CHANGED Viewed

@@ -1,7 +1,9 @@
 import { type BenefitRatafiaCardProps } from '../../atoms'
+import React from 'react'
 export interface BenefitsRatafiaSectionProps {
   title: string
   description: string
+  descriptionRichtext: React.ReactNode
   benefits: BenefitRatafiaCardProps[]
 }

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.js CHANGED Viewed

@@ -24,7 +24,7 @@ export const LayoutRatafiaSectionStyled = styled.section `
       align-self: stretch;
       padding: 1.5rem;
       gap: 2.5rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
       @media ${device['landscape-tablets']} {
@@ -48,7 +48,7 @@ export const LayoutRatafiaSectionStyled = styled.section `
         &__paragraph {
           display: flex;
           flex-direction: column;
-          gap: 1rem;
+          gap: var(--global-gap);
           color: var(--others-white);
           p:not(:last-child) {

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.ts CHANGED Viewed

@@ -25,7 +25,7 @@ export const LayoutRatafiaSectionStyled = styled.section`
       align-self: stretch;
       padding: 1.5rem;
       gap: 2.5rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
       @media ${device['landscape-tablets']} {
@@ -49,7 +49,7 @@ export const LayoutRatafiaSectionStyled = styled.section`
         &__paragraph {
           display: flex;
           flex-direction: column;
-          gap: 1rem;
+          gap: var(--global-gap);
           color: var(--others-white);
           p:not(:last-child) {

package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.js CHANGED Viewed

@@ -47,7 +47,7 @@ export const LearnMoreSectionStyled = styled.section `
     width: 100%;
     margin: 0 1rem;
     background-color: var(--others-white);
-    border-radius: var(--global-border-radius);
+    border-radius: var(--s-border-radius);
     box-shadow: var(--box-shadow-medium);
     padding: 2rem;
     transform: translateY(2rem);
@@ -76,7 +76,7 @@ export const LearnMoreSectionStyled = styled.section `
       a {
         font-weight: bold;
         transition: all 0.3s ease;
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
         display: inline-block;
         padding: 0.5rem;
         position: relative;

package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.ts CHANGED Viewed

@@ -48,7 +48,7 @@ export const LearnMoreSectionStyled = styled.section`
     width: 100%;
     margin: 0 1rem;
     background-color: var(--others-white);
-    border-radius: var(--global-border-radius);
+    border-radius: var(--s-border-radius);
     box-shadow: var(--box-shadow-medium);
     padding: 2rem;
     transform: translateY(2rem);
@@ -77,7 +77,7 @@ export const LearnMoreSectionStyled = styled.section`
       a {
         font-weight: bold;
         transition: all 0.3s ease;
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
         display: inline-block;
         padding: 0.5rem;
         position: relative;

package/dist/src/components/sections/LegalSection/LegalSection.styled.js CHANGED Viewed

@@ -47,7 +47,7 @@ export const LegalSectionStyled = styled.section `
       table {
         margin: 2.5rem 0;
         width: 100%;
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
         text-align: center;
         border-collapse: collapse;
@@ -58,12 +58,12 @@ export const LegalSectionStyled = styled.section `
             border-right: 1px solid var(--neutral-neutral-4);
             &:first-child {
-              border-top-left-radius: var(--global-border-radius);
+              border-top-left-radius: var(--s-border-radius);
             }
             &:last-child {
               border-right: none;
-              border-top-right-radius: var(--global-border-radius);
+              border-top-right-radius: var(--s-border-radius);
             }
           }

package/dist/src/components/sections/LegalSection/LegalSection.styled.ts CHANGED Viewed

@@ -48,7 +48,7 @@ export const LegalSectionStyled = styled.section`
       table {
         margin: 2.5rem 0;
         width: 100%;
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
         text-align: center;
         border-collapse: collapse;
@@ -59,12 +59,12 @@ export const LegalSectionStyled = styled.section`
             border-right: 1px solid var(--neutral-neutral-4);
             &:first-child {
-              border-top-left-radius: var(--global-border-radius);
+              border-top-left-radius: var(--s-border-radius);
             }
             &:last-child {
               border-right: none;
-              border-top-right-radius: var(--global-border-radius);
+              border-top-right-radius: var(--s-border-radius);
             }
           }

package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSection.styled.js CHANGED Viewed

@@ -26,7 +26,7 @@ export const MidBannerRatafiaSectionStyled = styled.section `
       max-width: 1200px;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       background: var(--neutral-neutral-6);
       @media ${device.desktop} {

package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSection.styled.ts CHANGED Viewed

@@ -27,7 +27,7 @@ export const MidBannerRatafiaSectionStyled = styled.section`
       max-width: 1200px;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       background: var(--neutral-neutral-6);
       @media ${device.desktop} {

package/dist/src/components/sections/PeopleSayAboutUsSection/PeopleSayAboutUsSection.styled.js CHANGED Viewed

@@ -37,7 +37,7 @@ export const PeopleSayAboutUsSectionStyled = styled.section `
     blockquote {
       padding: 1rem;
       background: var(--neutral-neutral-6);
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
     }
   }
 `;

package/dist/src/components/sections/PeopleSayAboutUsSection/PeopleSayAboutUsSection.styled.ts CHANGED Viewed

@@ -38,7 +38,7 @@ export const PeopleSayAboutUsSectionStyled = styled.section`
     blockquote {
       padding: 1rem;
       background: var(--neutral-neutral-6);
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
     }
   }
 `

package/dist/src/components/sections/StepsRatafiaSection/StepsRatafiaSection.styled.js CHANGED Viewed

@@ -40,7 +40,7 @@ export const StepsRatafiaSectionStyled = styled.section `
           max-width: 720px;
         }
         img {
-          border-radius: 8px;
+          border-radius: var(--m-border-radius);
           box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
           width: 100%;
         }
@@ -55,7 +55,7 @@ export const StepsRatafiaSectionStyled = styled.section `
           max-width: 720px;
         }
         video {
-          border-radius: 8px;
+          border-radius: var(--m-border-radius);
           box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
           width: 100%;
         }

package/dist/src/components/sections/StepsRatafiaSection/StepsRatafiaSection.styled.ts CHANGED Viewed

@@ -41,7 +41,7 @@ export const StepsRatafiaSectionStyled = styled.section`
           max-width: 720px;
         }
         img {
-          border-radius: 8px;
+          border-radius: var(--m-border-radius);
           box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
           width: 100%;
         }
@@ -56,7 +56,7 @@ export const StepsRatafiaSectionStyled = styled.section`
           max-width: 720px;
         }
         video {
-          border-radius: 8px;
+          border-radius: var(--m-border-radius);
           box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
           width: 100%;
         }

package/dist/src/components/sections/TryItRatafiaSection/TryItRatafiaSection.styled.js CHANGED Viewed

@@ -25,7 +25,7 @@ export const TryItRatafiaSectionStyled = styled.section `
       padding: 1.5rem;
       gap: 1.5rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
@@ -46,7 +46,7 @@ export const TryItRatafiaSectionStyled = styled.section `
         flex: 1 0 0;
         align-self: stretch;
-        gap: 1rem;
+        gap: var(--global-gap);
         @media ${device['landscape-tablets']} {
           padding: 3rem 0;

package/dist/src/components/sections/TryItRatafiaSection/TryItRatafiaSection.styled.ts CHANGED Viewed

@@ -26,7 +26,7 @@ export const TryItRatafiaSectionStyled = styled.section`
       padding: 1.5rem;
       gap: 1.5rem;
-      border-radius: 16px;
+      border-radius: var(--l-border-radius);
       max-width: 1200px;
@@ -47,7 +47,7 @@ export const TryItRatafiaSectionStyled = styled.section`
         flex: 1 0 0;
         align-self: stretch;
-        gap: 1rem;
+        gap: var(--global-gap);
         @media ${device['landscape-tablets']} {
           padding: 3rem 0;

package/dist/src/globalStyles/functions.scss CHANGED Viewed

@@ -1,10 +1,5 @@
-@import 'variables';
 @import 'mediaqueries';
-@function space($times: 4) {
-  @return $vertical-rhythm * $times;
-}
 @mixin flex-row($columns, $margin, $breakpoint: null) {
   max-width: 100%;
   min-width: 100%;

package/dist/src/globalStyles/layout.scss CHANGED Viewed

@@ -19,8 +19,8 @@ body {
 }
 .wrapper--responsive {
-  padding-left: $lateral-spacing;
-  padding-right: $lateral-spacing;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   @include desktop {
     padding-left: 0;
@@ -29,8 +29,8 @@ body {
 }
 .wrapper--narrow {
-  padding-left: $lateral-spacing;
-  padding-right: $lateral-spacing;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   @include desktop {
     margin: 0 auto;

package/dist/src/globalStyles/variables.scss CHANGED Viewed

@@ -69,17 +69,8 @@ $box-shadow-container: var(--box-shadow-container);
 $font-sans: 'Inter', sans-serif;
 $font-serif: 'Lora', serif;
-// Special
-$global-border-radius: 4px;
 // Layout
 $max-width: $lg;
-$global-gap: var(--global-gap);
-$vertical-rhythm: math.div(1rem, 4);
-$lateral-spacing: 1.5rem;
-// header
-$private-area-header-height: 3.25rem;
 //menu
 $menu-height-mobile: 3.25rem;

package/dist/src/globalStyles/variablesCss.scss CHANGED Viewed

@@ -2,7 +2,9 @@ html {
   --font-sans: 'Inter', sans-serif;
   --font-serif: 'Lora', serif;
-  --global-border-radius: 4px;
+  --s-border-radius: 0.25rem;
+  --m-border-radius: 0.5rem;
+  --l-border-radius: 1rem;
   --box-shadow-small: 0 0.125rem 0.375rem 0 rgba(var(--primary-main-dark-1-rgb), 0.25);
   --box-shadow-medium: 0 0.25rem 0.5rem 0 rgba(var(--primary-main-dark-1-rgb), 0.2);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.45.2",
+  "version": "5.46.1",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",