@npm_leadtech/legal-lib-components 5.3.14 → 5.3.21

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 (
-    <section
+    <HowGetYourFormsSectionStyled
       className='how-it-works-wrapper'
       style={hasBackgroundImage ? { backgroundImage: `url(${imageFile})` } : {}}
     >
       <p className='works-title serif --super-large'>{title}</p>
       <ListStepsGetForm steps={steps} />
-    </section>
+    </HowGetYourFormsSectionStyled>
   )
 }
 

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 './JumbotronRatafiaSection.scss'
+import { JumbotronRatafiaSectionStyled } from './JumbotronRatafiaSection.styled';
 const JumbotronRatafiaSection = ({ content, 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 })] }) }));
+    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 })] }) }));
 };
 export default JumbotronRatafiaSection;

package/dist/src/components/sections/JumbotronRatafiaSection/JumbotronRatafiaSection.styled.d.ts

@@ -0,0 +1 @@
+export declare const JumbotronRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

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

@@ -0,0 +1,39 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const JumbotronRatafiaSectionStyled = styled.section `
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2.5rem 1.5rem 6.5rem 1.5rem;
+
+  @media ${device.desktop} {
+    padding: 5rem 2rem 6.5rem 2rem;
+  }
+  @media ${device['desktop-xl']} {
+    padding: 5rem 7.5rem 6.5rem 7.5rem;
+  }
+
+  .jumbotron-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      gap: 2.5rem;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+      }
+      @media ${device['desktop-xl']} {
+        gap: 5rem;
+      }
+
+      &__children {
+        flex: none;
+      }
+    }
+  }
+`;

package/dist/src/components/sections/JumbotronRatafiaSection/JumbotronRatafiaSection.styled.ts

@@ -0,0 +1,40 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const JumbotronRatafiaSectionStyled = styled.section`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  padding: 2.5rem 1.5rem 6.5rem 1.5rem;
+
+  @media ${device.desktop} {
+    padding: 5rem 2rem 6.5rem 2rem;
+  }
+  @media ${device['desktop-xl']} {
+    padding: 5rem 7.5rem 6.5rem 7.5rem;
+  }
+
+  .jumbotron-ratafia-section {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      align-self: stretch;
+      gap: 2.5rem;
+      max-width: 1200px;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+      }
+      @media ${device['desktop-xl']} {
+        gap: 5rem;
+      }
+
+      &__children {
+        flex: none;
+      }
+    }
+  }
+`

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

@@ -2,16 +2,19 @@ import React, { type FC } from 'react'
 
 import { JumbotronRatafiaContent } from '../../organisms/JumbotronRatafiaContent'
 import { type JumbotronRatafiaSectionProps } from './JumbotronRatafiaSectionProps.types'
-// import './JumbotronRatafiaSection.scss'
+import { JumbotronRatafiaSectionStyled } from './JumbotronRatafiaSection.styled'
 
 const JumbotronRatafiaSection: FC<JumbotronRatafiaSectionProps> = ({ content, children }) => {
   return (
-    <section className='jumbotron-ratafia-section background-ratafia-animation' id='ratafia-jumbotron'>
+    <JumbotronRatafiaSectionStyled
+      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>
-    </section>
+    </JumbotronRatafiaSectionStyled>
   )
 }
 

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("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] }) }));
+    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] }) }));
 };

package/dist/src/components/sections/JumbotronSimplifiedSection/JumbotronSimplifiedSection.styled.d.ts

@@ -0,0 +1 @@
+export declare const JumbotronSimplifiedSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

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

@@ -0,0 +1,40 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const JumbotronSimplifiedSectionStyled = styled.section `
+  background: var(--primary-main-light-6);
+  margin-bottom: -12rem;
+  text-align: center;
+  padding-bottom: 13rem;
+
+  @media ${device['landscape-tablets']} {
+    padding: 1.125rem 0 14.875rem;
+  }
+
+  .jumbotron--simplified__title {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+    margin-bottom: 0.5rem;
+
+    @media ${device['landscape-tablets']} {
+      font-size: 2.25rem;
+      line-height: 3rem;
+    }
+
+    @media ${device.desktop} {
+      font-size: 3rem;
+      line-height: 3.375rem;
+    }
+  }
+
+  .jumbotron--simplified__subtitle {
+    color: var(--neutral-neutral-1);
+    font-size: 1rem;
+    line-height: 1.5rem;
+
+    @media ${device.desktop} {
+      font-size: 1rem;
+      margin: 0 auto;
+      max-width: 49rem;
+    }
+  }
+`;

package/dist/src/components/sections/JumbotronSimplifiedSection/JumbotronSimplifiedSection.styled.ts

@@ -0,0 +1,41 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const JumbotronSimplifiedSectionStyled = styled.section`
+  background: var(--primary-main-light-6);
+  margin-bottom: -12rem;
+  text-align: center;
+  padding-bottom: 13rem;
+
+  @media ${device['landscape-tablets']} {
+    padding: 1.125rem 0 14.875rem;
+  }
+
+  .jumbotron--simplified__title {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+    margin-bottom: 0.5rem;
+
+    @media ${device['landscape-tablets']} {
+      font-size: 2.25rem;
+      line-height: 3rem;
+    }
+
+    @media ${device.desktop} {
+      font-size: 3rem;
+      line-height: 3.375rem;
+    }
+  }
+
+  .jumbotron--simplified__subtitle {
+    color: var(--neutral-neutral-1);
+    font-size: 1rem;
+    line-height: 1.5rem;
+
+    @media ${device.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 (
-    <section className={`jumbotron--simplified ${wrapperClassName}`}>
+    <JumbotronSimplifiedSectionStyled className={`jumbotron--simplified ${wrapperClassName}`}>
       <div className='wrapper wrapper--responsive'>
         <Tagline {...taglineProps} />
         <h1 className='serif jumbotron--simplified__title'>{title}</h1>
         {children}
       </div>
-    </section>
+    </JumbotronSimplifiedSectionStyled>
   )
 }

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 './LearnMoreSection.scss'
+import { LearnMoreSectionStyled } from './LearnMoreSection.styled';
 const LearnMoreSection = ({ title, description, cta, 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/' })] })] }) }));
+    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/' })] })] }) }));
 };
 export default LearnMoreSection;

package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.d.ts

@@ -0,0 +1 @@
+export declare const LearnMoreSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;