@npm_leadtech/legal-lib-components 5.3.21 → 5.4.0

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

@@ -0,0 +1,57 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.features-ratafia-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+
+  width: 100%;
+
+  padding: 2rem 1.5rem;
+
+  @include laptop {
+    padding: 3rem 2rem;
+    gap: 1.5rem;
+  }
+  @include desktop-xl {
+    padding: 3rem 0;
+    gap: 5rem;
+  }
+
+  &__wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+
+    width: 100%;
+    max-width: 1200px;
+
+    @include laptop {
+      gap: 1.5rem;
+    }
+    @include desktop-xl {
+      gap: 5rem;
+    }
+    &__content {
+      width: 100%;
+    }
+
+    &__children {
+      display: none;
+      //TODO: Check again with the real container;
+      min-width: 50%;
+
+      @include desktop {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      img {
+        width: 100%;
+      }
+    }
+  }
+}

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

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { FeaturesRatafiaContent } from '../../organisms'
 import { type FeaturesRatafiaSectionProps } from './FeaturesRatafiaSectionProps.types'
-import { FeaturesRatafiaSectionStyled } from './FeaturesRatafiaSection.styled'
+// import './FeaturesRatafiaSection.scss'
 
 const FeaturesRatafiaSection: FC<FeaturesRatafiaSectionProps> = ({ content, children }) => {
   return (
-    <FeaturesRatafiaSectionStyled className='features-ratafia-section'>
+    <section className='features-ratafia-section'>
       <div className='features-ratafia-section__wrapper'>
         <div className='features-ratafia-section__wrapper__content'>
           <FeaturesRatafiaContent
@@ -18,7 +18,7 @@ const FeaturesRatafiaSection: FC<FeaturesRatafiaSectionProps> = ({ content, chil
         </div>
         <span className='features-ratafia-section__wrapper__children'>{children}</span>
       </div>
-    </FeaturesRatafiaSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CardFunctionality } from '../../organisms';
-import { FunctionalityCardsSectionStyled } from './FunctionalityCardsSection.styled';
 // import './FunctionalityCardsSection.scss'
 export const FunctionalityCardsSection = ({ cards = [] }) => {
     if (cards.length === 0)
         return null;
-    return (_jsx(FunctionalityCardsSectionStyled, { className: 'functionality-cards', children: cards.map((card) => (_jsx(CardFunctionality, { ...card }, card.id))) }));
+    return (_jsx("section", { className: 'functionality-cards', children: cards.map((card) => (_jsx(CardFunctionality, { ...card }, card.id))) }));
 };

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

@@ -0,0 +1,15 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.functionality-cards {
+  display: flex;
+  flex-direction: column;
+  gap: $global-gap;
+  margin-bottom: 2rem;
+  width: 100%;
+
+  @include laptop {
+    flex-direction: row;
+    width: 50%;
+  }
+}

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

@@ -2,17 +2,16 @@ import React from 'react'
 
 import { CardFunctionality } from '../../organisms'
 import { type FunctionalityCardsSectionProps } from './FunctionalityCardsSectionProps'
-import { FunctionalityCardsSectionStyled } from './FunctionalityCardsSection.styled'
 // import './FunctionalityCardsSection.scss'
 
 export const FunctionalityCardsSection: React.FC<FunctionalityCardsSectionProps> = ({ cards = [] }) => {
   if (cards.length === 0) return null
 
   return (
-    <FunctionalityCardsSectionStyled className='functionality-cards'>
+    <section className='functionality-cards'>
       {cards.map((card) => (
         <CardFunctionality key={card.id} {...card} />
       ))}
-    </FunctionalityCardsSectionStyled>
+    </section>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GuidelinesContent } from '../../organisms/GuidelinesContent';
-import { GuidelinesSectionStyled } from './GuidelinesSection.styled';
+// import './GuidelinesSection.scss'
 const GuidelinesSection = ({ contentGuidelines }) => {
-    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
+    return (_jsx("section", { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
 };
 export default GuidelinesSection;

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

@@ -0,0 +1,12 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.guidelines-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: get-color(neutral, neutral-6);
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
+}

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

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { GuidelinesContent } from '../../organisms/GuidelinesContent'
 import { type GuidelinesSectionProps } from './GuidelinesSectionProps.types'
-import { GuidelinesSectionStyled } from './GuidelinesSection.styled'
+// import './GuidelinesSection.scss'
 
 const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) => {
   return (
-    <GuidelinesSectionStyled className='guidelines-section'>
+    <section className='guidelines-section'>
       <GuidelinesContent
         title={contentGuidelines.title}
         image={contentGuidelines.image}
@@ -14,7 +14,7 @@ const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) =>
       >
         {contentGuidelines.children}
       </GuidelinesContent>
-    </GuidelinesSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HowGetYourFormsSectionStyled } from './HowGetYourFormsSection.styled';
 import { ListStepsGetForm } from '../../organisms';
 import imageFile from '../../../../images/png/graphics-grey-02.png';
+// import './HowGetYourFormsSection.scss'
 const HowGetYourFormsSection = ({ title = '', steps = [], hasBackgroundImage = true }) => {
     if (steps.length === 0)
         return null;
-    return (_jsxs(HowGetYourFormsSectionStyled, { className: 'how-it-works-wrapper', style: hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}, children: [_jsx("p", { className: 'works-title serif --super-large', children: title }), _jsx(ListStepsGetForm, { steps: steps })] }));
+    return (_jsxs("section", { className: 'how-it-works-wrapper', style: hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}, children: [_jsx("p", { className: 'works-title serif --super-large', children: title }), _jsx(ListStepsGetForm, { steps: steps })] }));
 };
 export default HowGetYourFormsSection;

package/dist/src/components/sections/HowGetYourFormsSection/{HowGetYourFormsSection.styled.ts → HowGetYourFormsSection.scss}

@@ -1,15 +1,16 @@
-import { device, size } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const HowGetYourFormsSectionStyled = styled.section`
+.how-it-works-wrapper {
   background-color: var(--neutral-neutral-6);
-  @media ${device.laptop} {
+
+  @include laptop {
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 21rem;
   }
 
-  @media only screen and (max-width: ${size.md}) {
+  @media only screen and (max-width: #{$md}) {
     background-image: none !important;
   }
 
@@ -18,8 +19,8 @@ export const HowGetYourFormsSectionStyled = styled.section`
     font-family: var(--font-serif);
     text-align: center;
     padding-top: 4rem;
-    @media only screen and (max-width: ${size.md}) {
+    @media only screen and (max-width: #{$md}) {
       padding-top: 2.5rem;
     }
   }
-`
+}

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

@@ -2,9 +2,9 @@
 import React from 'react'
 
 import { type HowGetYourFormsSectionProps } from './HowGetYourFormsSectionProps.types'
-import { HowGetYourFormsSectionStyled } from './HowGetYourFormsSection.styled'
 import { ListStepsGetForm } from '../../organisms'
 import imageFile from '../../../../images/png/graphics-grey-02.png'
+// import './HowGetYourFormsSection.scss'
 
 const HowGetYourFormsSection: React.FC<HowGetYourFormsSectionProps> = ({
   title = '',
@@ -13,13 +13,13 @@ const HowGetYourFormsSection: React.FC<HowGetYourFormsSectionProps> = ({
 }) => {
   if (steps.length === 0) return null
   return (
-    <HowGetYourFormsSectionStyled
+    <section
       className='how-it-works-wrapper'
       style={hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}}
     >
       <p className='works-title serif --super-large'>{title}</p>
       <ListStepsGetForm steps={steps} />
-    </HowGetYourFormsSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { JumbotronRatafiaContent } from '../../organisms/JumbotronRatafiaContent';
-import { JumbotronRatafiaSectionStyled } from './JumbotronRatafiaSection.styled';
+// import './JumbotronRatafiaSection.scss'
 const JumbotronRatafiaSection = ({ content, children }) => {
-    return (_jsx(JumbotronRatafiaSectionStyled, { className: 'jumbotron-ratafia-section background-ratafia-animation', id: 'ratafia-jumbotron', children: _jsxs("div", { className: 'jumbotron-ratafia-section__wrapper', children: [_jsx(JumbotronRatafiaContent, { title: content.title, tags: content.tags, body: content.body }), _jsx("span", { className: 'jumbotron-ratafia-section__wrapper__children', children: children })] }) }));
+    return (_jsx("section", { className: 'jumbotron-ratafia-section background-ratafia-animation', id: 'ratafia-jumbotron', children: _jsxs("div", { className: 'jumbotron-ratafia-section__wrapper', children: [_jsx(JumbotronRatafiaContent, { title: content.title, tags: content.tags, body: content.body }), _jsx("span", { className: 'jumbotron-ratafia-section__wrapper__children', children: children })] }) }));
 };
 export default JumbotronRatafiaSection;

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

@@ -0,0 +1,41 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.jumbotron-ratafia-section {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+
+  width: 100%;
+
+  padding: 2.5rem 1.5rem 6.5rem 1.5rem;
+
+  @include desktop {
+    padding: 5rem 2rem 6.5rem 2rem;
+  }
+  @include desktop-xl {
+    padding: 5rem 7.5rem 6.5rem 7.5rem;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+
+    gap: 2.5rem;
+
+    max-width: 1200px;
+
+    @include landscape-tablets {
+      flex-direction: row;
+    }
+    @include desktop-xl {
+      gap: 5rem;
+    }
+
+    &__children {
+      flex: none;
+    }
+  }
+}

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

@@ -2,19 +2,16 @@ import React, { type FC } from 'react'
 
 import { JumbotronRatafiaContent } from '../../organisms/JumbotronRatafiaContent'
 import { type JumbotronRatafiaSectionProps } from './JumbotronRatafiaSectionProps.types'
-import { JumbotronRatafiaSectionStyled } from './JumbotronRatafiaSection.styled'
+// import './JumbotronRatafiaSection.scss'
 
 const JumbotronRatafiaSection: FC<JumbotronRatafiaSectionProps> = ({ content, children }) => {
   return (
-    <JumbotronRatafiaSectionStyled
-      className='jumbotron-ratafia-section background-ratafia-animation'
-      id='ratafia-jumbotron'
-    >
+    <section className='jumbotron-ratafia-section background-ratafia-animation' id='ratafia-jumbotron'>
       <div className='jumbotron-ratafia-section__wrapper'>
         <JumbotronRatafiaContent title={content.title} tags={content.tags} body={content.body} />
         <span className='jumbotron-ratafia-section__wrapper__children'>{children}</span>
       </div>
-    </JumbotronRatafiaSectionStyled>
+    </section>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JumbotronSimplifiedSectionStyled } from './JumbotronSimplifiedSection.styled';
 import { Tagline } from '../../atoms';
+// import './JumbotronSimplifiedSection.scss'
 export const JumbotronSimplifiedSection = ({ wrapperClassName = '', taglineProps, title, children }) => {
-    return (_jsx(JumbotronSimplifiedSectionStyled, { className: `jumbotron--simplified ${wrapperClassName}`, children: _jsxs("div", { className: 'wrapper wrapper--responsive', children: [_jsx(Tagline, { ...taglineProps }), _jsx("h1", { className: 'serif jumbotron--simplified__title', children: title }), children] }) }));
+    return (_jsx("section", { className: `jumbotron--simplified ${wrapperClassName}`, children: _jsxs("div", { className: 'wrapper wrapper--responsive', children: [_jsx(Tagline, { ...taglineProps }), _jsx("h1", { className: 'serif jumbotron--simplified__title', children: title }), children] }) }));
 };

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

@@ -0,0 +1,41 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.jumbotron--simplified {
+  background: var(--primary-main-light-6);
+  margin-bottom: -12rem;
+  text-align: center;
+  padding-bottom: 13rem;
+
+  @include landscape-tablets {
+    padding: 1.125rem 0 14.875rem;
+  }
+}
+
+.jumbotron--simplified__title {
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+  margin-bottom: 0.5rem;
+
+  @include landscape-tablets {
+    font-size: 2.25rem;
+    line-height: 3rem;
+  }
+
+  @include desktop {
+    font-size: 3rem;
+    line-height: 3.375rem;
+  }
+}
+
+.jumbotron--simplified__subtitle {
+  color: var(--neutral-neutral-1);
+  font-size: 1rem;
+  line-height: 1.5rem;
+
+  @include desktop {
+    font-size: 1rem;
+    margin: 0 auto;
+    max-width: 49rem;
+  }
+}

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

@@ -1,8 +1,8 @@
 import React, { type FC } from 'react'
 
 import { type JumbotronSimplifiedSectionProps } from './JumbotronSimplifiedSectionProps.types'
-import { JumbotronSimplifiedSectionStyled } from './JumbotronSimplifiedSection.styled'
 import { Tagline } from '../../atoms'
+// import './JumbotronSimplifiedSection.scss'
 
 export const JumbotronSimplifiedSection: FC<JumbotronSimplifiedSectionProps> = ({
   wrapperClassName = '',
@@ -11,12 +11,12 @@ export const JumbotronSimplifiedSection: FC<JumbotronSimplifiedSectionProps> = (
   children
 }) => {
   return (
-    <JumbotronSimplifiedSectionStyled className={`jumbotron--simplified ${wrapperClassName}`}>
+    <section className={`jumbotron--simplified ${wrapperClassName}`}>
       <div className='wrapper wrapper--responsive'>
         <Tagline {...taglineProps} />
         <h1 className='serif jumbotron--simplified__title'>{title}</h1>
         {children}
       </div>
-    </JumbotronSimplifiedSectionStyled>
+    </section>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
-import { LearnMoreSectionStyled } from './LearnMoreSection.styled';
+// import './LearnMoreSection.scss'
 const LearnMoreSection = ({ title, description, cta, faqs }) => {
-    return (_jsx(LearnMoreSectionStyled, { className: 'learn-more__wrapper', children: _jsxs("div", { className: 'wrapper', children: [_jsxs("div", { className: 'learn-more__info', children: [_jsx("h2", { className: 'learn-more__title serif --super-large', children: title }), _jsx("p", { className: 'learn-more__description sans-serif --regular', children: description })] }), _jsxs("div", { className: 'learn-more__faqs', children: [_jsx("ul", { children: faqs }), _jsx(Button, { dataQa: '', color: 'primary3', label: cta, link: '/faqs/' })] })] }) }));
+    return (_jsx("section", { className: 'learn-more__wrapper', children: _jsxs("div", { className: 'wrapper', children: [_jsxs("div", { className: 'learn-more__info', children: [_jsx("h2", { className: 'learn-more__title serif --super-large', children: title }), _jsx("p", { className: 'learn-more__description sans-serif --regular', children: description })] }), _jsxs("div", { className: 'learn-more__faqs', children: [_jsx("ul", { children: faqs }), _jsx(Button, { dataQa: '', color: 'primary3', label: cta, link: '/faqs/' })] })] }) }));
 };
 export default LearnMoreSection;