@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { type FC } from 'react'
+
+import { Button, type ButtonProps } from '../../atoms'
+import { type FreeDocModalContentProps } from './FreeDocModalContent.types'
+// import './FreeDocModalContent.scss'
+
+const FreeDocModalContent: FC<FreeDocModalContentProps> = ({
+  bodyTitle,
+  bodyText,
+  closeModal,
+  clickGoToFormInApp,
+  isActiveDocument
+}) => {
+  const onGoToApp = (): void => {
+    if (clickGoToFormInApp !== undefined) clickGoToFormInApp(null, '', true)
+  }
+
+  const onNavigateToTop = (): void => {
+    closeModal()
+  }
+
+  const buttonProps: ButtonProps = {
+    color: 'primary',
+    size: 'S',
+    label: 'Make Document',
+    dataQa: 'free-modal-doc-button',
+    ...(isActiveDocument ? { noLink: true } : { link: '#' }),
+    onClick: isActiveDocument ? onGoToApp : onNavigateToTop
+  }
+
+  return (
+    <div className='free-doc-modal-content'>
+      <div className='close-mobile' onClick={closeModal}>
+        &times;
+      </div>
+      <div className='left-container'></div>
+      <div className='right-container'>
+        <div className='info-box'>
+          <h1 className='info-box__title'>{bodyTitle}</h1>
+          <div className='info-box__text'>{bodyText}</div>
+          <div className='info-box__button-box'>
+            <div className='button'>
+              <Button {...buttonProps} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FreeDocModalContent

package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.types.ts

@@ -0,0 +1,7 @@
+export interface FreeDocModalContentProps {
+  bodyTitle: string
+  bodyText: string
+  closeModal: () => void
+  clickGoToFormInApp: (arg0: null, arg1: string, arg2?: boolean) => void
+  isActiveDocument: boolean
+}

package/dist/src/components/molecules/FreeDocModalContent/index.ts

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

package/dist/src/components/molecules/HeaderRatafia/HeaderRatafia.scss

@@ -0,0 +1,31 @@
+@import '../../../globalStyles/variables';
+@import '../../../globalStyles/mediaqueries';
+
+.header-ratafia {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+
+  &__title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+
+    &__icon {
+      width: 18px;
+      @include portrait-tablets {
+        width: 24px;
+      }
+    }
+    &__text {
+      font-family: 'Inter', sans-serif;
+      color: get-color(neutral, neutral-1);
+      font-size: 1.125rem;
+      @include portrait-tablets {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}

package/dist/src/components/molecules/HeaderRatafia/HeaderRatafia.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { ActionButtonHeaderRatafiaCardList } from '../ActionButtonHeaderRatafiaCardList'
+import { type HeaderRatafiaProps } from './HeaderRatafiaProps.types'
+// import './HeaderRatafia.scss'
+
+export const HeaderRatafia: React.FC<HeaderRatafiaProps> = ({
+  icon,
+  title,
+  actionButtons,
+  isHiddenActionButtons = false
+}) => {
+  return (
+    <div className='header-ratafia'>
+      <div className='header-ratafia__title'>
+        <div className='header-ratafia__title__icon'>{icon}</div>
+        <h1 className='sans-serif --bold-weight header-ratafia__title__text'>{title}</h1>
+      </div>
+      {actionButtons !== undefined && !isHiddenActionButtons && (
+        <ActionButtonHeaderRatafiaCardList actionButtons={actionButtons} />
+      )}
+    </div>
+  )
+}
+
+export default HeaderRatafia

package/dist/src/components/molecules/HeaderRatafia/HeaderRatafiaProps.types.ts

@@ -0,0 +1,8 @@
+import type { ActionButtonHeaderRatafiaCardProps } from '../../atoms'
+
+export interface HeaderRatafiaProps {
+  icon?: React.ReactNode
+  title: string
+  actionButtons?: ActionButtonHeaderRatafiaCardProps[]
+  isHiddenActionButtons: boolean
+}

package/dist/src/components/molecules/HeaderRatafia/index.ts

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

package/dist/src/components/molecules/KeyFactCardListRatafia/KeyFactCardListRatafia.scss

@@ -0,0 +1,21 @@
+@import '../../../globalStyles/variables.scss';
+
+.key-fact-card-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+
+  margin-bottom: 1rem;
+  padding: 0 2rem 1.5rem 1.5rem;
+  gap: 0.5rem;
+
+  border-radius: 4px;
+  border-top: 4px solid get-color(neutral, neutral-6);
+  border-bottom: 8px solid get-color(neutral, neutral-6);
+  background: get-color(neutral, neutral-6);
+
+  height: 490px;
+  overflow-y: auto;
+}

package/dist/src/components/molecules/KeyFactCardListRatafia/KeyFactCardListRatafia.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { type KeyFactCardListRatafiaProps } from './KeyFactCardListRatafiaProps.types'
+import { KeyFactRatafiaCard } from '../../atoms'
+// import './KeyFactCardListRatafia.scss'
+
+export const KeyFactCardListRatafia: React.FC<KeyFactCardListRatafiaProps> = ({ keyFacts }) => {
+  if (keyFacts.length === 0) return null
+
+  return (
+    <div className='key-fact-card-list'>
+      {keyFacts.map((keyFact) => (
+        <>
+          <KeyFactRatafiaCard key={keyFact.id} {...keyFact} />
+        </>
+      ))}
+    </div>
+  )
+}
+
+export default KeyFactCardListRatafia

package/dist/src/components/molecules/KeyFactCardListRatafia/KeyFactCardListRatafiaProps.types.ts

@@ -0,0 +1,5 @@
+import { type KeyFactRatafiaCardProps } from '../../atoms'
+
+export interface KeyFactCardListRatafiaProps {
+  keyFacts: KeyFactRatafiaCardProps[]
+}

package/dist/src/components/molecules/KeyFactCardListRatafia/index.ts

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

package/dist/src/components/molecules/MenuItemsSection/MenuItemsSection.scss

@@ -0,0 +1,32 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.menu-items-section {
+  display: flex;
+  flex-flow: column nowrap;
+
+  @include portrait-tablets {
+    max-width: 250px;
+  }
+
+  &__title-wrapper {
+    background-color: get-color(neutral, neutral-5);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+
+    @include portrait-tablets {
+      justify-content: left;
+    }
+
+    svg {
+      margin-right: 0.5rem;
+    }
+
+    &__title {
+      font-weight: bold;
+    }
+  }
+}

package/dist/src/components/molecules/MenuItemsSection/MenuItemsSection.tsx

@@ -0,0 +1,22 @@
+import React, { type FC } from 'react'
+
+import { MenuItems } from '../../atoms'
+import { type MenuItemsSectionProps } from './MenuItemsSectionProps.types'
+// import './MenuItemsSection.scss'
+
+const MenuItemsSection: FC<MenuItemsSectionProps> = ({ icon, title, list }) => {
+  const filteredList = title !== undefined && list !== undefined ? list.filter((item) => item.content) : null
+  if (filteredList === null || filteredList?.length === 0 || filteredList[0].content === undefined) return null
+
+  return (
+    <div className='menu-items-section'>
+      <div className='menu-items-section__title-wrapper'>
+        {icon ?? null}
+        <div className='menu-items-section__title-wrapper__title'>{title}</div>
+      </div>
+      {list && <MenuItems list={list} spacing />}
+    </div>
+  )
+}
+
+export default MenuItemsSection

package/dist/src/components/molecules/MenuItemsSection/MenuItemsSectionProps.types.ts

@@ -0,0 +1,7 @@
+import { type MenuListItem } from 'src/components/atoms/MenuItems/MenuItemProps.types'
+
+export interface MenuItemsSectionProps {
+  icon?: React.ReactNode
+  title?: string
+  list?: MenuListItem[]
+}

package/dist/src/components/molecules/MenuItemsSection/index.ts

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

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContent.scss

@@ -0,0 +1,29 @@
+@import '../../../globalStyles/variables.scss';
+
+.mid-banner-ratafia-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    align-self: stretch;
+    gap: 1rem;
+
+    &__title {
+      align-self: stretch;
+      color: get-color(primary, main-dark-2);
+    }
+    &__description {
+      align-self: stretch;
+      color: get-color(neutral, neutral-1);
+    }
+  }
+  &__cta {
+    align-self: start;
+    padding: 0.6875rem 1rem;
+  }
+}

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContent.tsx

@@ -0,0 +1,31 @@
+import React, { type FC } from 'react'
+
+import { Button } from '../../atoms'
+import { type MidBannerRatafiaContentProps } from './MidBannerRatafiaContentProps.types'
+// import './MidBannerRatafiaContent.scss'
+
+const MidBannerRatafiaContent: FC<MidBannerRatafiaContentProps> = ({
+  title,
+  paragraph,
+  ctaLabel,
+  ctaLink,
+  ctaDataQa
+}) => {
+  return (
+    <div className='mid-banner-ratafia-content'>
+      <div className='mid-banner-ratafia-content__header'>
+        <h2 className='sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title'>{title}</h2>
+        <div className='sans-serif --super-medium mid-banner-ratafia-content__header__description'>{paragraph}</div>
+      </div>
+      <Button
+        givenClass='mid-banner-ratafia-content__cta'
+        dataQa={ctaDataQa}
+        link={ctaLink}
+        color='primary'
+        label={ctaLabel}
+      />
+    </div>
+  )
+}
+
+export default MidBannerRatafiaContent

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContentProps.types.ts

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

package/dist/src/components/molecules/MidBannerRatafiaContent/index.ts

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

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.scss

@@ -0,0 +1,69 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.mid-banner-ratafia-sample {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+
+  &__image {
+    img {
+      border-radius: 8px 8px 0 0;
+      box-shadow: $box-shadow-small;
+      width: 727px;
+    }
+  }
+  &__sumarized-tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.25rem;
+    gap: 0.25rem;
+
+    position: absolute;
+    left: 85px;
+    top: -13px;
+
+    background: get-color(primary, main-light-5);
+    border-radius: $global-border-radius;
+    border: 1px solid get-color(primary, main-light-3);
+    box-shadow: $box-shadow-small;
+
+    &__icon {
+      width: 16px;
+      height: 16px;
+    }
+    &__text {
+      color: get-color(primary, main);
+    }
+  }
+  &__feature-tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem;
+    gap: 0.25rem;
+
+    background: get-color(neutral, neutral-6);
+    border-radius: $global-border-radius;
+    box-shadow: $box-shadow-small;
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+    }
+    &__text {
+      color: get-color(neutral, neutral-2);
+    }
+  }
+  &__feature-tag__key-facts {
+    position: absolute;
+    left: -16px;
+    bottom: 143px;
+  }
+  &__feature-tag__clauses {
+    position: absolute;
+    right: -16px;
+    top: 75px;
+  }
+}

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.tsx

@@ -0,0 +1,41 @@
+import React, { type FC } from 'react'
+
+import { type MidBannerRatafiaSampleProps } from './MidBannerRatafiaSampleProps.types'
+// import './MidBannerRatafiaSample.scss'
+
+const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({ image }) => {
+  return (
+    <div className='mid-banner-ratafia-sample'>
+      <div className='mid-banner-ratafia-sample__image'>{image}</div>
+      <div className='mid-banner-ratafia-sample__sumarized-tag'>
+        <img
+          className='mid-banner-ratafia-sample__sumarized-tag__icon'
+          src='https://cdn.stage.strapi.lawdistrict.com/mid-banner-1.svg'
+          alt=''
+          role='img'
+        />
+        <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text'>Summarized</p>
+      </div>
+      <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts'>
+        <img
+          className='mid-banner-ratafia-sample__feature-tag__icon'
+          src='https://cdn.stage.strapi.lawdistrict.com/mid-banner-2.svg'
+          alt=''
+          role='img'
+        />
+        <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>Key facts</p>
+      </div>
+      <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses'>
+        <img
+          className='mid-banner-ratafia-sample__feature-tag__icon'
+          src='https://cdn.stage.strapi.lawdistrict.com/mid-banner-3.svg'
+          alt=''
+          role='img'
+        />
+        <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>Clauses</p>
+      </div>
+    </div>
+  )
+}
+
+export default MidBannerRatafiaSample

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.ts

@@ -0,0 +1,3 @@
+export interface MidBannerRatafiaSampleProps {
+  image: React.ReactNode
+}

package/dist/src/components/molecules/MidBannerRatafiaSample/index.ts

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

package/dist/src/components/molecules/MoreDocsDesktop/MoreDocsDesktop.scss

@@ -0,0 +1,74 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.more-docs-desktop {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+
+  .container {
+    padding: 1rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    min-height: 20rem;
+    align-items: center;
+
+    @include landscape-tablets {
+      padding: 1rem 1rem 2rem 2rem;
+    }
+    @include desktop {
+      padding: 1rem 6rem 2rem 6rem;
+    }
+
+    .section-title {
+      text-align: left;
+      font-family: $font-serif;
+      font-size: 32px;
+      font-weight: normal;
+      line-height: 1.31;
+      letter-spacing: -0.3px;
+      padding: 0 0 1.5rem 0;
+      width: 100%;
+
+      @media only screen and (max-width: #{$md}) {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .docs-container {
+      display: flex;
+      flex-direction: row;
+
+      .docs-column {
+        display: flex;
+        flex-direction: column;
+        min-width: 17rem;
+        margin: 0 2rem 0 1rem;
+        cursor: pointer;
+
+        &:first-child {
+          margin-left: 0;
+        }
+        &:last-child {
+          margin-right: 0;
+          @media only screen and (max-width: #{$md}) {
+            display: none;
+          }
+        }
+      }
+
+      .separation-line {
+        width: 1px;
+        height: 196px;
+        background-color: get-color(primary, main-dark-1);
+      }
+
+      .last-line {
+        @media only screen and (max-width: #{$md}) {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/dist/src/components/molecules/MoreDocsDesktop/MoreDocsDesktop.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { type MoreDocsDesktopProps } from './MoreDocsDesktopProps'
+import { MoreDocsItem } from '../../atoms'
+// import './MoreDocsDesktop.scss'
+
+export const MoreDocsDesktop: React.FC<MoreDocsDesktopProps> = ({ title, documents }) => {
+  return (
+    <div className={'more-docs-desktop'}>
+      <div className='container'>
+        <h2 className='section-title'>{title}</h2>
+        <div className='docs-container'>
+          <div className='docs-column'>
+            {documents.slice(0, 3).map((document) => (
+              <MoreDocsItem key={document.id} {...document} />
+            ))}
+          </div>
+          <div className='separation-line'></div>
+          <div className='docs-column'>
+            {documents.slice(3, 6).map((document) => (
+              <MoreDocsItem key={document.id} {...document} />
+            ))}
+          </div>
+          <div className='separation-line last-line'></div>
+          <div className='docs-column'>
+            {documents.slice(6, 9).map((document) => (
+              <MoreDocsItem key={document.id} {...document} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/src/components/molecules/MoreDocsDesktop/MoreDocsDesktopProps.ts

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

package/dist/src/components/molecules/MoreDocsDesktop/index.ts

@@ -0,0 +1,2 @@
+export * from './MoreDocsDesktop'
+export * from './MoreDocsDesktopProps'

package/dist/src/components/molecules/MoreDocsMobile/MoreDocsMobile.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { type MoreDocsMobileProps } from './MoreDocsMobileProps';
-import './MoreDocsMobile.scss';
 export declare const MoreDocsMobile: React.FC<MoreDocsMobileProps>;

package/dist/src/components/molecules/MoreDocsMobile/MoreDocsMobile.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px';
 import { MoreDocsItem } from '../../atoms';
-import './MoreDocsMobile.scss';
+// import './MoreDocsMobile.scss'
 export const MoreDocsMobile = ({ title, documents }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'more-docs-mobile', onClick: () => {

package/dist/src/components/molecules/MoreDocsMobile/MoreDocsMobile.scss

@@ -0,0 +1,71 @@
+@import '../../../globalStyles/variables.scss';
+
+.more-docs-mobile {
+  margin: 0px 24px 40px 24px;
+  padding: 5px 0;
+  border-radius: 4px;
+  border: solid 2px #dfe5e8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  .box-closed {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .icon-see-more {
+      transform: rotate(-90deg);
+
+      &:before,
+      &:after {
+        background-color: get-color(others, black);
+      }
+
+      &.open {
+        transform: rotate(90deg);
+      }
+
+      svg {
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+    .box-title {
+      align-self: center;
+      margin-right: 4rem;
+    }
+  }
+}
+
+.more-docs-list {
+  margin: -40px 24px 40px 24px;
+  padding: 16px 8px 16px 8px;
+  border-radius: 4px;
+  border: solid 2px #dfe5e8;
+  display: flex;
+  flex-direction: column;
+
+  .docs-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .separation-line {
+      width: calc(100% - 20px);
+      height: 1px;
+      margin: 16px 10px;
+      background-color: get-color(neutral, neutral-3);
+    }
+
+    &:last-child {
+      margin-bottom: 1rem;
+      .separation-line {
+        display: none;
+      }
+    }
+  }
+}