@npm_leadtech/legal-lib-components 7.0.3 → 7.0.4

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

@@ -0,0 +1,33 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const CardBoxMinimalSectionStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 24px;
+  gap: 16px;
+  align-self: stretch;
+  background: var(--neutral-neutral-6);
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`;
+export const CardBoxFeaturedSectionStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px 24px;
+  gap: 16px;
+  background: var(--neutral-neutral-6);
+  border-radius: 16px;
+  margin-bottom: 80px;
+  margin-top: 32px;
+  @media ${device.desktop} {
+    min-width: 1200px;
+  }
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`;

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

@@ -0,0 +1,35 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const CardBoxMinimalSectionStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 24px;
+  gap: 16px;
+  align-self: stretch;
+  background: var(--neutral-neutral-6);
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`
+
+export const CardBoxFeaturedSectionStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px 24px;
+  gap: 16px;
+  background: var(--neutral-neutral-6);
+  border-radius: 16px;
+  margin-bottom: 80px;
+  margin-top: 32px;
+  @media ${device.desktop} {
+    min-width: 1200px;
+  }
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+`

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled'
+import { CardBox } from '../../atoms'
+import { type CardBoxSectionProps } from './CardBoxSectionProps'
+
+export const CardBoxMinimalSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
+  return (
+    <CardBoxMinimalSectionStyled>
+      {cards?.map(({ text, icon }, index) => <CardBox key={`${index}-${text}`} text={text} icon={icon} />)}
+    </CardBoxMinimalSectionStyled>
+  )
+}
+
+export const CardBoxFeaturedSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
+  return (
+    <CardBoxFeaturedSectionStyled>
+      {cards?.map(({ text, icon }, index) => (
+        <CardBox key={`${index}-${text}`} text={text} icon={icon} padding='16px' gap='0.5rem' borderRadius='8px' />
+      ))}
+    </CardBoxFeaturedSectionStyled>
+  )
+}

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.d.ts

@@ -0,0 +1,4 @@
+import { CardBoxProps } from 'src/components/atoms';
+export interface CardBoxSectionProps {
+    cards: CardBoxProps[];
+}

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.ts

@@ -0,0 +1,5 @@
+import { CardBoxProps } from 'src/components/atoms'
+
+export interface CardBoxSectionProps {
+  cards: CardBoxProps[]
+}

package/dist/src/components/sections/CardBoxSection/index.d.ts

@@ -0,0 +1,2 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection';
+export { type CardBoxSectionProps } from './CardBoxSectionProps';

package/dist/src/components/sections/CardBoxSection/index.js

@@ -0,0 +1 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection';

package/dist/src/components/sections/CardBoxSection/index.ts

@@ -0,0 +1,2 @@
+export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection'
+export { type CardBoxSectionProps } from './CardBoxSectionProps'

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

@@ -4,5 +4,5 @@ import { FaqGroup } from '../../organisms';
 import { FaqSectionStyled } from './FaqSection.styled';
 export const FaqSection = ({ groups, givenClass }) => {
     const classnames = classNames(`faqSection ${givenClass ?? ''}`);
-    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
+    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups?.map((group) => _jsx(FaqGroup, { ...group }, group.id)) }));
 };

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

@@ -10,9 +10,7 @@ export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) =>
 
   return (
     <FaqSectionStyled className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
-      {groups.map((group) => (
-        <FaqGroup key={group.id} {...group} />
-      ))}
+      {groups?.map((group) => <FaqGroup key={group.id} {...group} />)}
     </FaqSectionStyled>
   )
 }

package/dist/src/components/sections/HeroSection/HeroSection.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type HeroSectionProps } from './HeroSectionProps.types';
+declare const HeroSection: FC<HeroSectionProps>;
+export default HeroSection;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeroContent } from '../../organisms/HeroContent';
+import { HeroSectionStyled } from './HeroSectionStyled.styled';
+const HeroSection = ({ title, subTitle, content }) => {
+    return (_jsx(HeroSectionStyled, { className: 'hero-section', children: _jsxs("div", { className: 'wrapper wrapper--responsive', children: [_jsx("div", { className: 'hero-section__title', children: _jsx("span", { className: 'hero-section__title__text', children: title }) }), Boolean(subTitle) && _jsx("h1", { className: 'hero-section__sub-title', children: subTitle }), _jsx(HeroContent, { image: content.image, button: content?.button, children: content.children })] }) }));
+};
+export default HeroSection;

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

@@ -0,0 +1,24 @@
+import React, { type FC } from 'react'
+
+import { HeroContent } from '../../organisms/HeroContent'
+import { type HeroSectionProps } from './HeroSectionProps.types'
+import { HeroSectionStyled } from './HeroSectionStyled.styled'
+
+const HeroSection: FC<HeroSectionProps> = ({ title, subTitle, content }) => {
+  return (
+    <HeroSectionStyled className='hero-section'>
+      <div className='wrapper wrapper--responsive'>
+        <div className='hero-section__title'>
+          <span className='hero-section__title__text'>{title}</span>
+        </div>
+        {Boolean(subTitle) && <h1 className='hero-section__sub-title'>{subTitle}</h1>}
+
+        <HeroContent image={content.image} button={content?.button}>
+          {content.children}
+        </HeroContent>
+      </div>
+    </HeroSectionStyled>
+  )
+}
+
+export default HeroSection

package/dist/src/components/sections/HeroSection/HeroSectionProps.types.d.ts

@@ -0,0 +1,6 @@
+import { type HeroContentProps } from '../../organisms/HeroContent';
+export interface HeroSectionProps {
+    title: string;
+    subTitle?: string;
+    content: HeroContentProps;
+}

package/dist/src/components/sections/HeroSection/HeroSectionProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/sections/HeroSection/HeroSectionProps.types.ts

@@ -0,0 +1,7 @@
+import { type HeroContentProps } from '../../organisms/HeroContent'
+
+export interface HeroSectionProps {
+  title: string
+  subTitle?: string
+  content: HeroContentProps
+}

package/dist/src/components/sections/HeroSection/HeroSectionStyled.styled.d.ts

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

package/dist/src/components/sections/{AboutUsSection/AboutUsSection.styled.js → HeroSection/HeroSectionStyled.styled.js}

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const AboutUsSectionStyled = styled.div `
+export const HeroSectionStyled = styled.div `
   padding-top: 1.125rem;
   background: var(--primary-main-light-6);
   padding-bottom: 2rem;
@@ -9,7 +9,7 @@ export const AboutUsSectionStyled = styled.div `
     padding-bottom: 4rem;
   }
 
-  .about-us-section {
+  .hero-section {
     &__title {
       text-align: center;
       margin-bottom: 1rem;

package/dist/src/components/sections/{AboutUsSection/AboutUsSection.styled.ts → HeroSection/HeroSectionStyled.styled.ts}

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
-export const AboutUsSectionStyled = styled.div`
+export const HeroSectionStyled = styled.div`
   padding-top: 1.125rem;
   background: var(--primary-main-light-6);
   padding-bottom: 2rem;
@@ -10,7 +10,7 @@ export const AboutUsSectionStyled = styled.div`
     padding-bottom: 4rem;
   }
 
-  .about-us-section {
+  .hero-section {
     &__title {
       text-align: center;
       margin-bottom: 1rem;

package/dist/src/components/sections/HeroSection/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HeroSection } from './HeroSection';
+export { type HeroSectionProps } from './HeroSectionProps.types';

package/dist/src/components/sections/HeroSection/index.js

@@ -0,0 +1 @@
+export { default as HeroSection } from './HeroSection';

package/dist/src/components/sections/HeroSection/index.ts

@@ -0,0 +1,2 @@
+export { default as HeroSection } from './HeroSection'
+export { type HeroSectionProps } from './HeroSectionProps.types'

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

@@ -3,12 +3,10 @@ import { MidBannerRatafiaContent, MidBannerRatafiaSample } from '../../molecules
 import { MidBannerRatafiaSectionStyled } from './MidBannerRatafiaSection.styled';
 import classNames from 'classnames';
 const MidBannerRatafiaSection = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa, image, midBanner1Img, midBanner2Img, midBanner3Img }) => {
-    const isEsignature = ctaDataQa.includes('esignature');
-    const isAbout = ctaDataQa.includes('about');
+    const isEsignature = ctaDataQa.includes('esignature') && true;
     const classnames = classNames({
-        '--is-esignature': isEsignature,
-        '--is-about': isAbout
+        '--is-esignature': isEsignature
     });
-    return (_jsx(MidBannerRatafiaSectionStyled, { className: 'mid-banner-ratafia-section', children: _jsxs("div", { className: `mid-banner-ratafia-section__wrapper ${classnames}`, children: [_jsx(MidBannerRatafiaContent, { title: title, paragraph: paragraph, ctaLabel: ctaLabel, ctaLink: ctaLink, ctaDataQa: ctaDataQa }), _jsx("div", { className: `mid-banner-ratafia-section__wrapper__sample ${classnames}`, children: _jsx(MidBannerRatafiaSample, { image: image, isAbout: isAbout, isEsignatureImage: isEsignature, midBanner1Img: midBanner1Img, midBanner2Img: midBanner2Img, midBanner3Img: midBanner3Img }) })] }) }));
+    return (_jsx(MidBannerRatafiaSectionStyled, { className: 'mid-banner-ratafia-section', children: _jsxs("div", { className: `mid-banner-ratafia-section__wrapper ${classnames}`, children: [_jsx(MidBannerRatafiaContent, { title: title, paragraph: paragraph, ctaLabel: ctaLabel, ctaLink: ctaLink, ctaDataQa: ctaDataQa }), _jsx("div", { className: `mid-banner-ratafia-section__wrapper__sample ${classnames}`, children: _jsx(MidBannerRatafiaSample, { image: image, isEsignatureImage: isEsignature, midBanner1Img: midBanner1Img, midBanner2Img: midBanner2Img, midBanner3Img: midBanner3Img }) })] }) }));
 };
 export default MidBannerRatafiaSection;

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

@@ -51,16 +51,6 @@ export const MidBannerRatafiaSectionStyled = styled.section `
     }
   }
 
-  .mid-banner-ratafia-section__wrapper.--is-about {
-    @media ${device.desktop} {
-      padding: 3rem 5rem 0rem 4rem;
-    }
-
-    .mid-banner-ratafia-content {
-      padding-bottom: 3rem;
-    }
-  }
-
   .mid-banner-ratafia-section__wrapper__sample.--is-esignature {
     display: none;
 
@@ -83,39 +73,4 @@ export const MidBannerRatafiaSectionStyled = styled.section `
       }
     }
   }
-
-  .mid-banner-ratafia-section__wrapper.--is-about {
-    background-color: var(--primary-main-light-6);
-
-    .mid-banner-ratafia-content {
-      height: 100%;
-      justify-content: center;
-      &__header {
-        h2 {
-          color: var(--primary-main-dark-2);
-          font-family: var(--font-family-inter, Inter);
-          font-size: 28px;
-          font-style: normal;
-          font-weight: 700;
-          line-height: 32px;
-          letter-spacing: -0.3px;
-        }
-      }
-
-      .mid-banner-ratafia-content__cta {
-        height: auto;
-      }
-    }
-  }
-
-  .mid-banner-ratafia-section__wrapper__sample.--is-about {
-    .mid-banner-ratafia-sample {
-      &__image {
-        img {
-          max-width: 25rem;
-          max-height: 30rem;
-        }
-      }
-    }
-  }
 `;

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

@@ -52,16 +52,6 @@ export const MidBannerRatafiaSectionStyled = styled.section`
     }
   }
 
-  .mid-banner-ratafia-section__wrapper.--is-about {
-    @media ${device.desktop} {
-      padding: 3rem 5rem 0rem 4rem;
-    }
-
-    .mid-banner-ratafia-content {
-      padding-bottom: 3rem;
-    }
-  }
-
   .mid-banner-ratafia-section__wrapper__sample.--is-esignature {
     display: none;
 
@@ -84,39 +74,4 @@ export const MidBannerRatafiaSectionStyled = styled.section`
       }
     }
   }
-
-  .mid-banner-ratafia-section__wrapper.--is-about {
-    background-color: var(--primary-main-light-6);
-
-    .mid-banner-ratafia-content {
-      height: 100%;
-      justify-content: center;
-      &__header {
-        h2 {
-          color: var(--primary-main-dark-2);
-          font-family: var(--font-family-inter, Inter);
-          font-size: 28px;
-          font-style: normal;
-          font-weight: 700;
-          line-height: 32px;
-          letter-spacing: -0.3px;
-        }
-      }
-
-      .mid-banner-ratafia-content__cta {
-        height: auto;
-      }
-    }
-  }
-
-  .mid-banner-ratafia-section__wrapper__sample.--is-about {
-    .mid-banner-ratafia-sample {
-      &__image {
-        img {
-          max-width: 25rem;
-          max-height: 30rem;
-        }
-      }
-    }
-  }
 `

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

@@ -16,11 +16,9 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
   midBanner2Img,
   midBanner3Img
 }) => {
-  const isEsignature = ctaDataQa.includes('esignature')
-  const isAbout = ctaDataQa.includes('about')
+  const isEsignature = ctaDataQa.includes('esignature') && true
   const classnames = classNames({
-    '--is-esignature': isEsignature,
-    '--is-about': isAbout
+    '--is-esignature': isEsignature
   })
   return (
     <MidBannerRatafiaSectionStyled className='mid-banner-ratafia-section'>
@@ -35,7 +33,6 @@ const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
         <div className={`mid-banner-ratafia-section__wrapper__sample ${classnames}`}>
           <MidBannerRatafiaSample
             image={image}
-            isAbout={isAbout}
             isEsignatureImage={isEsignature}
             midBanner1Img={midBanner1Img}
             midBanner2Img={midBanner2Img}

package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSectionProps.types.d.ts

@@ -1,6 +1,6 @@
 export interface MidBannerRatafiaSectionProps {
     title: string;
-    paragraph?: React.ReactNode;
+    paragraph: React.ReactNode;
     ctaLabel: string;
     ctaLink: string;
     ctaDataQa: string;

package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSectionProps.types.ts

@@ -1,6 +1,6 @@
 export interface MidBannerRatafiaSectionProps {
   title: string
-  paragraph?: React.ReactNode
+  paragraph: React.ReactNode
   ctaLabel: string
   ctaLink: string
   ctaDataQa: string

package/dist/src/components/sections/index.d.ts

@@ -1,8 +1,9 @@
-export * from './AboutUsSection';
+export * from './HeroSection';
 export * from './AsideMenuSection';
 export * from './AsSeeInSection';
 export * from './BenefitsRatafiaSection';
 export * from './BlogSection';
+export * from './CardBoxSection';
 export * from './ContactSection';
 export * from './ExpertsSection';
 export * from './FaqSection';

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

@@ -1,8 +1,9 @@
-export * from './AboutUsSection';
+export * from './HeroSection';
 export * from './AsideMenuSection';
 export * from './AsSeeInSection';
 export * from './BenefitsRatafiaSection';
 export * from './BlogSection';
+export * from './CardBoxSection';
 export * from './ContactSection';
 export * from './ExpertsSection';
 export * from './FaqSection';

package/dist/src/components/sections/index.ts

@@ -1,8 +1,9 @@
-export * from './AboutUsSection'
+export * from './HeroSection'
 export * from './AsideMenuSection'
 export * from './AsSeeInSection'
 export * from './BenefitsRatafiaSection'
 export * from './BlogSection'
+export * from './CardBoxSection'
 export * from './ContactSection'
 export * from './ExpertsSection'
 export * from './FaqSection'