@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/sections/BlogSection/BlogSectionProps.types.ts

@@ -0,0 +1,7 @@
+import { type ArticlesListProps } from '../../organisms'
+
+export interface BlogSectionProps {
+  blogTitle: string
+  blogCta: string
+  articles: ArticlesListProps
+}

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

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

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

@@ -0,0 +1,90 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.contact-container {
+  background-color: get-color(primary, main-light-6);
+
+  span > a {
+    text-decoration: underline;
+  }
+
+  .wrapper--contact {
+    padding-left: 0;
+    padding-right: 0;
+
+    @include portrait-tablets {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+
+  .contact__main {
+    display: flex;
+    flex-direction: column-reverse;
+
+    @include portrait-tablets {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  .contact-left-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    @include portrait-tablets {
+      padding-left: 0;
+      padding-right: 0;
+      width: 45%;
+    }
+  }
+
+  .contact-right-container {
+    display: flex;
+    justify-content: flex-start;
+    background-color: get-color(primary, main-light-6);
+    margin-bottom: 2.5rem;
+    width: 100%;
+
+    @include portrait-tablets {
+      background-size: 21rem;
+      background-repeat: no-repeat;
+      background-position: 100% 100%;
+      margin-bottom: 0;
+      padding-bottom: 0;
+      width: 45%;
+    }
+
+    @include laptop {
+      padding-bottom: 12rem;
+    }
+
+    .rec-text-container .rectangle-text__container {
+      margin-top: 1rem;
+      width: 100%;
+      background-color: gray;
+    }
+
+    .contact__form {
+      width: 100%;
+    }
+
+    .small-container {
+      margin: 1.5rem 0;
+
+      small {
+        text-align: center;
+      }
+    }
+
+    .sign-in-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import React, { type FC } from 'react'
+
+import { BoxForm } from '../../molecules'
+import { ContactJumbotron } from '../../organisms'
+import { type ContactSectionProps } from './ContactSectionProps'
+// import './ContactSection.scss'
+
+export const ContactSection: FC<ContactSectionProps> = ({ contactJumbotronProps, contactForm }) => {
+  return (
+    <section className='contact-container'>
+      <div className='wrapper wrapper--responsive wrapper--contact'>
+        <div className='contact__main'>
+          <div className='contact-left-container'>
+            <ContactJumbotron {...contactJumbotronProps} />
+          </div>
+          <div className='contact-right-container'>
+            <div className='contact__form'>
+              <BoxForm {...contactForm} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/src/components/sections/ContactSection/ContactSectionProps.ts

@@ -0,0 +1,7 @@
+import { type BoxFormProps } from '../../molecules'
+import { type ContactJumbotronProps } from '../../organisms'
+
+export interface ContactSectionProps {
+  contactJumbotronProps: ContactJumbotronProps
+  contactForm: BoxFormProps
+}

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

@@ -0,0 +1,2 @@
+export { ContactSection } from './ContactSection'
+export { type ContactSectionProps } from './ContactSectionProps'

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

@@ -0,0 +1,26 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.experts-section {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: get-color(neutral, neutral-6);
+  margin-bottom: 8rem;
+
+  &__title {
+    font-family: $font-serif;
+    font-size: 32px;
+    font-weight: 400;
+    line-height: 42px;
+    letter-spacing: -0.3px;
+    text-align: center;
+    margin: 0 auto 5rem;
+    width: 90%;
+    transform: translateY(50px);
+
+    @include landscape-tablets {
+      width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import React, { type FC } from 'react'
+
+import { ExpertCardList } from '../../molecules'
+import { type ExpertsSectionProps } from './ExpertsSectionProps.types'
+// import './ExpertsSection.scss'
+
+const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList }) => {
+  if (contentExpertCardList.contentExpertCard.length === 0) {
+    return null
+  }
+
+  return (
+    <div className='experts-section'>
+      <h2 className='experts-section__title'>{title}</h2>
+      <ExpertCardList contentExpertCard={contentExpertCardList.contentExpertCard} />
+    </div>
+  )
+}
+
+export default ExpertsSection

package/dist/src/components/sections/ExpertsSection/ExpertsSectionProps.types.ts

@@ -0,0 +1,6 @@
+import { type ExpertCardListProps } from '../../molecules/ExpertCardList'
+
+export interface ExpertsSectionProps {
+  title: string
+  contentExpertCardList: ExpertCardListProps
+}

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

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

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

@@ -0,0 +1,31 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.faqSection {
+  display: flex;
+  padding-bottom: 40px;
+  flex-direction: column;
+  gap: 40px;
+  max-width: 700px;
+  width: 100%;
+}
+
+.faq-ratafia-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 3rem 1.5rem 5rem 1.5rem;
+  max-width: none;
+  background: get-color(neutral, neutral-6);
+
+  @include laptop {
+    padding: 3rem 2rem 5rem 2rem;
+  }
+  @include desktop {
+    padding: 3rem 13.75rem 5rem 13.75rem;
+  }
+  @include desktop-xl {
+    padding: 3rem 28rem 5rem 28rem;
+  }
+}

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import { FaqGroup } from '../../organisms'
+import { type FaqSectionProps } from './FaqSectionProps'
+// import './FaqSection.scss'
+
+export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) => {
+  const classnames = classNames(`faqSection ${givenClass ?? ''}`)
+
+  return (
+    <section className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
+      {groups.map((group) => (
+        <FaqGroup key={group.id} {...group} />
+      ))}
+    </section>
+  )
+}

package/dist/src/components/sections/FaqSection/FaqSectionProps.ts

@@ -0,0 +1,6 @@
+import { type FaqGroupProps } from '../../organisms'
+
+export interface FaqSectionProps {
+  groups: FaqGroupProps[]
+  givenClass?: string
+}

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

@@ -0,0 +1,2 @@
+export * from './FaqSection'
+export * from './FaqSectionProps'

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

@@ -0,0 +1,25 @@
+import React, { type FC } from 'react'
+
+import { FeaturesRatafiaContent } from '../../organisms'
+import { type FeaturesRatafiaSectionProps } from './FeaturesRatafiaSectionProps.types'
+// import './FeaturesRatafiaSection.scss'
+
+const FeaturesRatafiaSection: FC<FeaturesRatafiaSectionProps> = ({ content, children }) => {
+  return (
+    <section className='features-ratafia-section'>
+      <div className='features-ratafia-section__wrapper'>
+        <div className='features-ratafia-section__wrapper__content'>
+          <FeaturesRatafiaContent
+            title={content.title}
+            description={content.description}
+            notReleasedText={content.notReleasedText}
+            features={content.features}
+          />
+        </div>
+        <span className='features-ratafia-section__wrapper__children'>{children}</span>
+      </div>
+    </section>
+  )
+}
+
+export default FeaturesRatafiaSection

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSectionProps.types.ts

@@ -0,0 +1,6 @@
+import { type FeaturesRatafiaContentProps } from '../../organisms'
+
+export interface FeaturesRatafiaSectionProps {
+  content: FeaturesRatafiaContentProps
+  children?: React.ReactNode
+}

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

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

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

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

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

@@ -0,0 +1,17 @@
+import React, { type FC } from 'react'
+
+import { GuidelinesContent } from '../../organisms/GuidelinesContent'
+import { type GuidelinesSectionProps } from './GuidelinesSectionProps.types'
+// import './GuidelinesSection.scss'
+
+const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) => {
+  return (
+    <section className='guidelines-section wrapper wrapper--responsive'>
+      <GuidelinesContent title={contentGuidelines.title} image={contentGuidelines.image}>
+        {contentGuidelines.children}
+      </GuidelinesContent>
+    </section>
+  )
+}
+
+export default GuidelinesSection

package/dist/src/components/sections/GuidelinesSection/GuidelinesSectionProps.types.ts

@@ -0,0 +1,5 @@
+import { type GuidelinesContentProps } from '../../organisms/GuidelinesContent'
+
+export interface GuidelinesSectionProps {
+  contentGuidelines: GuidelinesContentProps
+}

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

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

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

@@ -0,0 +1,26 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.how-it-works-wrapper {
+  background-color: get-color(neutral, neutral-6);
+
+  @include laptop {
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: 21rem;
+  }
+
+  @media only screen and (max-width: #{$md}) {
+    background-image: none !important;
+  }
+
+  .works-title {
+    width: auto;
+    font-family: $font-serif;
+    text-align: center;
+    padding-top: 4rem;
+    @media only screen and (max-width: #{$md}) {
+      padding-top: 2.5rem;
+    }
+  }
+}

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

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

package/dist/src/components/sections/HowGetYourFormsSection/HowGetYourFormsSectionProps.types.ts

@@ -0,0 +1,7 @@
+import { type StepGetFormProps } from '../../molecules'
+
+export interface HowGetYourFormsSectionProps {
+  title: string
+  steps: StepGetFormProps[]
+  hasBackgroundImage: boolean
+}

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

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

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { JumbotronRatafiaContent } from '../../organisms/JumbotronRatafiaContent'
+import { type JumbotronRatafiaSectionProps } from './JumbotronRatafiaSectionProps.types'
+// import './JumbotronRatafiaSection.scss'
+
+const JumbotronRatafiaSection: FC<JumbotronRatafiaSectionProps> = ({ content, children }) => {
+  return (
+    <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>
+    </section>
+  )
+}
+
+export default JumbotronRatafiaSection

package/dist/src/components/sections/JumbotronRatafiaSection/JumbotronRatafiaSectionProps.types.ts

@@ -0,0 +1,6 @@
+import { type JumbotronRatafiaContentProps } from '../../organisms'
+
+export interface JumbotronRatafiaSectionProps {
+  content: JumbotronRatafiaContentProps
+  children?: React.ReactNode
+}

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

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

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

@@ -0,0 +1,41 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.jumbotron--simplified {
+  background: get-color(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: get-color(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

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

package/dist/src/components/sections/JumbotronSimplifiedSection/JumbotronSimplifiedSectionProps.types.ts

@@ -0,0 +1,10 @@
+import type React from 'react'
+
+import { type TaglineProps } from '../../atoms'
+
+export interface JumbotronSimplifiedSectionProps {
+  title: string
+  wrapperClassName?: string
+  taglineProps: TaglineProps
+  children?: React.ReactNode
+}

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

@@ -0,0 +1,2 @@
+export { JumbotronSimplifiedSection } from './JumbotronSimplifiedSection'
+export type { JumbotronSimplifiedSectionProps } from './JumbotronSimplifiedSectionProps.types'