@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

@@ -0,0 +1,33 @@
+import React, { type FC } from 'react'
+
+import { MidBannerRatafiaContent, MidBannerRatafiaSample } from '../../molecules'
+import { type MidBannerRatafiaSectionProps } from './MidBannerRatafiaSectionProps.types'
+// import './MidBannerRatafiaSection.scss'
+
+const MidBannerRatafiaSection: FC<MidBannerRatafiaSectionProps> = ({
+  title,
+  paragraph,
+  ctaLabel,
+  ctaLink,
+  ctaDataQa,
+  image
+}) => {
+  return (
+    <section className='mid-banner-ratafia-section'>
+      <div className='mid-banner-ratafia-section__wrapper'>
+        <MidBannerRatafiaContent
+          title={title}
+          paragraph={paragraph}
+          ctaLabel={ctaLabel}
+          ctaLink={ctaLink}
+          ctaDataQa={ctaDataQa}
+        />
+        <div className='mid-banner-ratafia-section__wrapper__sample'>
+          <MidBannerRatafiaSample image={image} />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default MidBannerRatafiaSection

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

@@ -0,0 +1,8 @@
+export interface MidBannerRatafiaSectionProps {
+  title: string
+  paragraph: React.ReactNode
+  ctaLabel: string
+  ctaLink: string
+  ctaDataQa: string
+  image: React.ReactNode
+}

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { MoreDocsDesktop, MoreDocsMobile } from '../../molecules'
+import { type MoreDocsSectionProps } from './MoreDocsSectionProps'
+import { useIsMobileOrTable } from '../../../hooks'
+
+export const MoreDocsSection: React.FC<MoreDocsSectionProps> = ({ title, documents }) => {
+  const { isGtLandscapeTablets } = useIsMobileOrTable()
+  const [body, setBody] = React.useState<React.ReactNode | null>(
+    <MoreDocsDesktop title={title} documents={documents} />
+  )
+
+  React.useEffect(() => {
+    setBody(
+      isGtLandscapeTablets ? (
+        <MoreDocsDesktop title={title} documents={documents} />
+      ) : (
+        <MoreDocsMobile title={title} documents={documents} />
+      )
+    )
+  }, [isGtLandscapeTablets, title, documents])
+
+  return <section className='more-docs-section'>{body}</section>
+}

package/dist/src/components/sections/MoreDocsSection/MoreDocsSectionProps.ts

@@ -0,0 +1,6 @@
+import { type MoreDocsItemProps } from '../../atoms'
+
+export interface MoreDocsSectionProps {
+  title: string
+  documents: MoreDocsItemProps[]
+}

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

@@ -0,0 +1,2 @@
+export * from './MoreDocsSection'
+export * from './MoreDocsSectionProps'

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

@@ -0,0 +1,17 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.people-say {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+
+  &__title {
+    font-family: $font-serif;
+    font-size: 32px;
+    font-weight: 400;
+    line-height: 42px;
+    letter-spacing: -0.3px;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,16 @@
+import React, { type FC } from 'react'
+
+import { type PeopleSayAboutUsSectionProps } from './PeopleSayAboutUsSectionProps.types'
+import { TrustPilot } from '../../atoms'
+// import './PeopleSayAboutUsSection.scss'
+
+const PeopleSayAboutUsSection: FC<PeopleSayAboutUsSectionProps> = ({ title, contentTrustPilot }) => {
+  return (
+    <section className='people-say'>
+      {Boolean(title) && <h2 className='people-say__title'>{title}</h2>}
+      <TrustPilot>{contentTrustPilot.children}</TrustPilot>
+    </section>
+  )
+}
+
+export default PeopleSayAboutUsSection

package/dist/src/components/sections/PeopleSayAboutUsSection/PeopleSayAboutUsSectionProps.types.ts

@@ -0,0 +1,6 @@
+import { type TrustPilotProps } from '../../atoms/TrustPilot'
+
+export interface PeopleSayAboutUsSectionProps {
+  title?: string
+  contentTrustPilot: TrustPilotProps
+}

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

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

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

@@ -0,0 +1,53 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.steps-ratafia-section {
+  z-index: 999;
+  width: 100%;
+
+  @include desktop {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+
+    gap: 3rem;
+    padding: 2rem 1.5rem 3rem 1.5rem;
+
+    max-width: 1200px;
+
+    @include desktop {
+      padding: 3rem 0 3rem 0;
+    }
+    @include desktop-xl {
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &__video {
+      display: flex;
+      justify-content: center;
+
+      max-width: 1024px;
+      @include desktop-xl {
+        max-width: 720px;
+      }
+      video {
+        border-radius: 8px;
+        box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
+        width: 100%;
+      }
+    }
+    &__content {
+      flex: 1;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import React, { type FC } from 'react'
+
+import { StepsRatafiaContent } from '../../organisms'
+import { type StepsRatafiaSectionProps } from './StepsRatafiaSectionProps.types'
+import { Video } from '../../atoms'
+
+// import './StepsRatafiaSection.scss'
+
+const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({ title, steps, videoUrl }) => {
+  return (
+    <section className='steps-ratafia-section'>
+      <div className='steps-ratafia-section__wrapper'>
+        <div className='steps-ratafia-section__wrapper__video'>
+          <Video videoSrcURL={videoUrl} autoPlay loop />
+        </div>
+        <div className='steps-ratafia-section__wrapper__content'>
+          <StepsRatafiaContent title={title} steps={steps} />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default StepsRatafiaSection

package/dist/src/components/sections/StepsRatafiaSection/StepsRatafiaSectionProps.types.ts

@@ -0,0 +1,7 @@
+import type { StepRatafiaCardProps } from '../../atoms'
+
+export interface StepsRatafiaSectionProps {
+  title: string
+  steps: StepRatafiaCardProps[]
+  videoUrl: string
+}

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

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

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

@@ -0,0 +1,69 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.try-it-ratafia-section {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+
+  width: 100%;
+  padding: 2rem 1.5rem;
+
+  @include laptop {
+    padding: 3rem 2rem;
+  }
+  @include desktop-xl {
+    padding: 3rem 7.5rem;
+  }
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+
+    padding: 1.5rem;
+    gap: 1.5rem;
+
+    border-radius: 16px;
+
+    max-width: 1200px;
+
+    @include landscape-tablets {
+      padding: 2rem;
+      gap: 2.5rem;
+      flex-direction: row;
+    }
+    @include laptop {
+      padding: 2.5rem 2.5rem 2.5rem 4rem;
+      gap: 5rem;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1 0 0;
+      align-self: stretch;
+
+      gap: 1rem;
+
+      @include landscape-tablets {
+        padding: 3rem 0;
+      }
+
+      &__icon {
+        width: 48px;
+        height: 48px;
+      }
+      &__title {
+        align-self: stretch;
+        color: get-color(others, white);
+      }
+    }
+
+    &__children {
+      max-width: 460px;
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import React, { type FC } from 'react'
+
+import { type TryItRatafiaSectionProps } from './TryItRatafiaSectionProps.types'
+// import './TryItRatafiaSection.scss'
+
+const TryItRatafiaSection: FC<TryItRatafiaSectionProps> = ({ icon, paragraph, children }) => {
+  return (
+    <section className='try-it-ratafia-section'>
+      <div className='try-it-ratafia-section__wrapper background-ratafia-animation'>
+        <div className='try-it-ratafia-section__wrapper__content'>
+          {icon !== null && <div className={'try-it-ratafia-section__wrapper__content__icon'}>{icon}</div>}
+          <h2 className='sans-serif --extra-large --bold-weight try-it-ratafia-section__wrapper__content__title'>
+            {paragraph}
+          </h2>
+        </div>
+        <span className='try-it-ratafia-section__wrapper__children'>{children}</span>
+      </div>
+    </section>
+  )
+}
+
+export default TryItRatafiaSection

package/dist/src/components/sections/TryItRatafiaSection/TryItRatafiaSectionProps.types.ts

@@ -0,0 +1,5 @@
+export interface TryItRatafiaSectionProps {
+  icon?: React.ReactNode
+  paragraph: string
+  children?: React.ReactNode
+}

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

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

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

@@ -0,0 +1,11 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.try-our-free-legal-blogs-section {
+  display: flex;
+  flex-direction: column;
+
+  @include landscape-tablets {
+    flex-flow: row nowrap;
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, { type FC } from 'react'
+
+import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent'
+import { type TryOurFreeLegalBlogsSectionProps } from './TryOurFreeLegalBlogsSectionProps.types'
+// import './TryOurFreeLegalBlogsSection.scss'
+
+const TryOurFreeLegalBlogsSection: FC<TryOurFreeLegalBlogsSectionProps> = ({ contentTryOurFreeLegalBlogs }) => {
+  return (
+    <section className='try-our-free-legal-blogs-section wrapper wrapper--responsive'>
+      <TryOurFreeLegalBlogsContent title={contentTryOurFreeLegalBlogs.title} image={contentTryOurFreeLegalBlogs.image}>
+        {contentTryOurFreeLegalBlogs.children}
+      </TryOurFreeLegalBlogsContent>
+    </section>
+  )
+}
+
+export default TryOurFreeLegalBlogsSection

package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSectionProps.types.ts

@@ -0,0 +1,5 @@
+import { type TryOurFreeLegalBlogsContentProps } from '../../organisms'
+
+export interface TryOurFreeLegalBlogsSectionProps {
+  contentTryOurFreeLegalBlogs: TryOurFreeLegalBlogsContentProps
+}

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

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

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

@@ -0,0 +1,24 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.try-us-section {
+  padding: 2rem;
+  text-align: center;
+  background-color: get-color(neutral, neutral-6);
+  color: get-color(neutral, neutral-1);
+
+  .m-richText {
+    max-width: 50rem;
+    margin: 0 auto;
+  }
+
+  .e-button {
+    display: inline-block;
+    margin-top: 1.5rem;
+    width: 100%;
+
+    @include landscape-tablets {
+      width: auto;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, { type FC } from 'react'
+import { Button } from '../../atoms'
+
+import { type TryUsSectionProps } from './TryUsSectionProps'
+// import './TryUsSection.scss'
+
+export const TryUsSection: FC<TryUsSectionProps> = ({ children, hasUserToken = false, cta }) => {
+  return (
+    <section className='try-us-section'>
+      {children}
+      {!hasUserToken && <Button {...cta} />}
+    </section>
+  )
+}

package/dist/src/components/sections/TryUsSection/TryUsSectionProps.ts

@@ -0,0 +1,8 @@
+import { type ButtonProps } from '../../atoms'
+import { type ReactNode } from 'react'
+
+export interface TryUsSectionProps {
+  children?: ReactNode
+  hasUserToken?: boolean
+  cta: ButtonProps
+}

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

@@ -0,0 +1,2 @@
+export { TryUsSection } from './TryUsSection'
+export type { TryUsSectionProps } from './TryUsSectionProps'

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

@@ -0,0 +1,62 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.unsubscribe {
+  div:first-child {
+    background: get-color(neutral, neutral-6);
+    display: flex;
+    flex-flow: row wrap;
+    margin-bottom: 4rem;
+    @include landscape-tablets {
+      margin: 0 3rem 3rem 3rem;
+    }
+  }
+
+  .m-richText p + h2 {
+    margin-top: 0;
+  }
+
+  h2 {
+    color: get-color(neutral, neutral-1);
+    background: get-color(others, white);
+    width: 100%;
+    font-size: 1.75rem;
+    padding: 2rem 1rem 1rem 1rem;
+
+    @include landscape-tablets {
+      font-size: 2rem;
+      padding: 2.7rem 0 1rem 0;
+    }
+  }
+
+  .m-richText h2 + p {
+    padding-top: 1.5rem;
+  }
+
+  .m-richText p {
+    padding: 0 2rem 1.5rem 2rem;
+    width: 100%;
+    margin: 0;
+
+    @include laptop {
+      padding: 0 8rem 1.5rem 8rem;
+    }
+    @include desktop {
+      padding: 0 15rem 1.5rem 15rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    display: block;
+    margin: 0;
+  }
+
+  .image-preview {
+    margin: 0 auto;
+    padding: 0.5rem 0;
+    border: none;
+    width: auto;
+    height: auto;
+  }
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { RichTextStrapi } from '../../atoms'
+import { type UnsubscribeSectionProps } from './UnsubscribeSectionProps'
+// import './UnsubscribeSection.scss'
+
+export const UnsubscribeSection: React.FC<UnsubscribeSectionProps> = ({ text }) => {
+  return (
+    <section className='wrapper'>
+      <div className='unsubscribe'>
+        <RichTextStrapi {...text} />
+      </div>
+    </section>
+  )
+}

package/dist/src/components/sections/UnsubscribeSection/UnsubscribeSectionProps.ts

@@ -0,0 +1,5 @@
+import { type RichTextStrapiProps } from '../../atoms'
+
+export interface UnsubscribeSectionProps {
+  text: RichTextStrapiProps
+}

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

@@ -0,0 +1,2 @@
+export { UnsubscribeSection } from './UnsubscribeSection'
+export { type UnsubscribeSectionProps } from './UnsubscribeSectionProps'

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

@@ -0,0 +1,36 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.whyLawDistrictSection {
+  text-align: center;
+  background-color: get-color(neutral, neutral-6);
+  margin-bottom: 3rem;
+  width: 100%;
+  padding-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+
+  @include landscape-tablets {
+    padding-bottom: 0rem;
+    display: block;
+  }
+
+  &__title {
+    @include laptop {
+      padding: 0;
+    }
+  }
+
+  &__button {
+    display: flex;
+    justify-content: center;
+    width: 80%;
+    margin-bottom: 1rem;
+
+    @include landscape-tablets {
+      margin-bottom: 3.5rem;
+      display: inline-block;
+      width: auto;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { Button } from '../../atoms/Button'
+import { WhyLawDistrictItems } from '../../atoms/WhyLawDistrictItems'
+import { type WhyLawDistrictSectionProps } from './WhyLawDistrictSectionProps.types'
+
+// import './WhyLawDistrictSection.scss'
+
+export const WhyLawDistrictSection: React.FC<WhyLawDistrictSectionProps> = ({ title, items, userActive, link }) => {
+  if (items.length === 0) return null
+
+  return (
+    <section className={'whyLawDistrictSection'}>
+      <h2 className={'why-lawDistrict__title serif --hero'}>{title}</h2>
+      <WhyLawDistrictItems items={items} />
+
+      {!userActive && (
+        <Button
+          givenClass='whyLawDistrictSection__button'
+          label={link.cta}
+          link={link.url}
+          onClick={link.onClick}
+          dataQa={link.dataQa}
+          isExternal
+          hasNoFollow
+        />
+      )}
+    </section>
+  )
+}
+
+export default WhyLawDistrictSection

package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSectionProps.types.ts

@@ -0,0 +1,13 @@
+import { type WhyLawDistrictItem } from '../../atoms'
+
+export interface WhyLawDistrictSectionProps {
+  title: string
+  items: WhyLawDistrictItem[]
+  userActive: boolean
+  link: {
+    cta: string
+    url: string
+    onClick: () => void
+    dataQa: string
+  }
+}

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

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

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

@@ -0,0 +1,24 @@
+export * from './AboutUsSection'
+export * from './AsideMenuSection'
+export * from './AsSeeInSection'
+export * from './BenefitsRatafiaSection'
+export * from './BlogSection'
+export * from './ContactSection'
+export * from './ExpertsSection'
+export * from './FaqSection'
+export * from './FeaturesRatafiaSection'
+export * from './GuidelinesSection'
+export * from './HowGetYourFormsSection'
+export * from './JumbotronRatafiaSection'
+export * from './JumbotronSimplifiedSection'
+export * from './LegalSection'
+export * from './MidBannerRatafiaSection'
+export * from './MoreDocsSection'
+export * from './PeopleSayAboutUsSection'
+export * from './StepsRatafiaSection'
+export * from './TryItRatafiaSection'
+export * from './TryOurFreeLegalBlogsSection'
+export * from './TryUsSection'
+export * from './UnsubscribeSection'
+export * from './WhyLawDistrictSection'
+export * from './LearnMoreSection'

package/dist/src/custom.d.ts

@@ -0,0 +1,13 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}
+
+declare module '*.jpg'
+declare module '*.png'
+declare module '*.webp'
+
+interface Window {
+  gtag: (...args: any[]) => void
+  dataLayer: any[]
+}