@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.tsx

@@ -0,0 +1,37 @@
+import React, { type FC } from 'react'
+
+import { type DocumentStatusProps } from './DocumentStatusProps.types'
+import { Done24px } from '../../../../images/componentsSvg/Done24px'
+import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
+import { Time24px } from '../../../../images/componentsSvg/Time24px'
+// import './DocumentStatus.scss'
+
+const DocumentStatus: FC<DocumentStatusProps> = ({
+  type,
+  statusCompletedText,
+  statusNewText,
+  statusInProgressText
+}) => {
+  if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
+    return (
+      <div data-testid='document-status' className={'document-status --is-completed'}>
+        <Done24px className='icon' /> <span className={'sans-serif --small'}>{statusCompletedText}</span>
+      </div>
+    )
+  }
+  if (type === 'new') {
+    return (
+      <div data-testid='document-status' className={'document-status --is-new'}>
+        <NewRelease24p className='icon' /> <span className={'sans-serif --small'}>{statusNewText}</span>
+      </div>
+    )
+  }
+  return (
+    <div data-testid='document-status' className={'document-status --in-progress'}>
+      <Time24px className='icon' />
+      <span className={'sans-serif --small'}>{statusInProgressText}</span>
+    </div>
+  )
+}
+
+export default DocumentStatus

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.ts

@@ -0,0 +1,6 @@
+export interface DocumentStatusProps {
+  type: string
+  statusCompletedText: string
+  statusNewText: string
+  statusInProgressText: string
+}

package/dist/src/components/atoms/DocumentStatus/index.ts

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

package/dist/src/components/atoms/DocumentTag/DocumentTag.d.ts

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

package/dist/src/components/atoms/DocumentTag/DocumentTag.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import './DocumentTag.scss';
+// import './DocumentTag.scss'
 export const DocumentTag = ({ text = '' }) => {
     if (text === '')
         return null;

package/dist/src/components/atoms/DocumentTag/DocumentTag.scss

@@ -0,0 +1,13 @@
+@import '../../../globalStyles/variables.scss';
+
+.document-tag {
+  background: get-color(others, white);
+  border: 1px solid get-color(neutral, neutral-4);
+  border-radius: $global-border-radius;
+  color: get-color(neutral, neutral-2);
+  font-size: 0.875rem;
+  letter-spacing: -0.3px;
+  line-height: 1.15rem;
+  padding: 4px 8px;
+  white-space: nowrap;
+}

package/dist/src/components/atoms/DocumentTag/DocumentTag.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { type DocumentTagProps } from './DocumentTagProps'
+// import './DocumentTag.scss'
+
+export const DocumentTag: React.FC<DocumentTagProps> = ({ text = '' }) => {
+  if (text === '') return null
+  return <p className='document-tag'>{text}</p>
+}

package/dist/src/components/atoms/DocumentTag/DocumentTagProps.ts

@@ -0,0 +1,3 @@
+export interface DocumentTagProps {
+  text: string
+}

package/dist/src/components/atoms/DocumentTag/index.ts

@@ -0,0 +1,2 @@
+export { DocumentTag } from './DocumentTag'
+export { type DocumentTagProps } from './DocumentTagProps'

package/dist/src/components/atoms/ExpertCard/ExpertCard.scss

@@ -0,0 +1,61 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.expert-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10rem;
+
+  &:first-child {
+    margin-top: 5rem;
+  }
+
+  @include landscape-tablets {
+    margin-top: 5rem;
+  }
+
+  &__box {
+    background-color: white;
+    border-radius: 0.3rem;
+    box-shadow: $box-shadow-container;
+    padding: 7rem 2rem 0 2rem;
+    min-height: 13rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: 17.625rem;
+    margin-left: 0;
+
+    @include landscape-tablets {
+      margin-left: 2rem;
+    }
+  }
+
+  &__image {
+    position: absolute;
+    transform: translateY(-115%);
+  }
+
+  &__title {
+    font-family: $font-sans;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+    text-align: center;
+    width: 75%;
+    text-decoration: none;
+  }
+
+  &__description {
+    font-family: $font-sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    text-align: center;
+    width: 75%;
+  }
+}

package/dist/src/components/atoms/ExpertCard/ExpertCard.tsx

@@ -0,0 +1,24 @@
+import React, { type FC } from 'react'
+
+import { type ExpertCardProps } from './ExpertCardProps.types'
+// import './ExpertCard.scss'
+
+const ExpertCard: FC<ExpertCardProps> = ({ title, url, description, image }) => {
+  return (
+    <div className='expert-card'>
+      <div className='expert-card__box'>
+        <div className='expert-card__image'>{image}</div>
+        {url != null && (
+          <a className='expert-card__title' href={url}>
+            {title}
+          </a>
+        )}
+        {url == null && <p className='expert-card__title'>{title}</p>}
+
+        <p className='expert-card__description'>{description}</p>
+      </div>
+    </div>
+  )
+}
+
+export default ExpertCard

package/dist/src/components/atoms/ExpertCard/ExpertCardProps.types.ts

@@ -0,0 +1,6 @@
+export interface ExpertCardProps {
+  title: string
+  description: string
+  url?: string | null
+  image: React.ReactNode
+}

package/dist/src/components/atoms/ExpertCard/index.ts

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

package/dist/src/components/atoms/FeatureRatafiaCard/FeatureRatafiaCard.scss

@@ -0,0 +1,79 @@
+@import '../../../globalStyles/variables.scss';
+
+.feature-ratafia-card__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  gap: 1rem;
+  padding: 1.5rem;
+
+  border-radius: 4px;
+  background: get-color(neutral, neutral-6);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+
+    &__title {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem 1rem;
+      gap: 0.5rem;
+
+      border-radius: 4px;
+      background: get-color(primary, main-dark-1);
+
+      &__icon {
+        img {
+          width: 24px;
+          height: 24px;
+        }
+      }
+      &__text {
+        color: get-color(others, white);
+      }
+    }
+  }
+
+  &__description {
+    color: get-color(neutral, neutral-1);
+  }
+}
+
+.feature-ratafia-card-not-released {
+  .feature-ratafia-card__wrapper {
+    &__header {
+      &__title {
+        opacity: 0.5;
+        background: get-color(others, white);
+
+        &__text {
+          color: get-color(primary, main-dark-1);
+        }
+      }
+      &__not-released {
+        display: flex;
+        align-items: center;
+
+        padding: 0.25rem;
+        gap: 0.25rem;
+
+        border-radius: 4px;
+        background: get-color(neutral, neutral-4);
+
+        color: get-color(primary, main-dark-1);
+      }
+    }
+    &__description {
+      opacity: 0.5;
+    }
+  }
+}
+
+.feature-ratafia-card {
+  width: 100%;
+}

package/dist/src/components/atoms/FeatureRatafiaCard/FeatureRatafiaCard.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { type FeatureRatafiaCardProps } from './FeatureRatafiaCardProps.types'
+// import './FeatureRatafiaCard.scss'
+
+export const FeatureRatafiaCard: React.FC<FeatureRatafiaCardProps> = ({
+  title,
+  icon,
+  description,
+  isReleased = true,
+  notReleasedText
+}) => {
+  return (
+    <div className='feature-ratafia-card'>
+      <div className={isReleased ? 'feature-ratafia-card-released' : 'feature-ratafia-card-not-released'}>
+        <div className='feature-ratafia-card__wrapper'>
+          <div className='feature-ratafia-card__wrapper__header'>
+            <div className='feature-ratafia-card__wrapper__header__title'>
+              {icon !== null && <div className='feature-ratafia-card__wrapper__header__title__icon'>{icon}</div>}
+              <h3 className='sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text'>
+                {title}
+              </h3>
+            </div>
+            {!isReleased && (
+              <p className='sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released'>
+                {notReleasedText}
+              </p>
+            )}
+          </div>
+          <p className='sans-serif --medium feature-ratafia-card__wrapper__description'>{description}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FeatureRatafiaCard

package/dist/src/components/atoms/FeatureRatafiaCard/FeatureRatafiaCardProps.types.ts

@@ -0,0 +1,8 @@
+export interface FeatureRatafiaCardProps {
+  id: string
+  title: string
+  icon?: React.ReactNode
+  description: string
+  isReleased: boolean
+  notReleasedText: string
+}

package/dist/src/components/atoms/FeatureRatafiaCard/index.ts

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

package/dist/src/components/atoms/FormFaq/FormFaq.scss

@@ -0,0 +1,72 @@
+@import '../../../globalStyles/variables.scss';
+
+.form-faq {
+  display: flex;
+  position: relative;
+  cursor: default;
+
+  &::before {
+    content: '\2022';
+    color: get-color(secondary, main-dark-2);
+    margin-right: 0.25rem;
+    margin-top: 0.2rem;
+  }
+
+  &__container {
+    padding-top: 0.25rem;
+    @media (hover: hover) {
+      &:hover > .form-faq__answer {
+        display: flex;
+      }
+    }
+
+    &:hover,
+    &.active {
+      .form-faq__answer {
+        display: block;
+      }
+    }
+  }
+
+  &__title {
+    display: inline-block;
+    color: get-color(neutral, neutral-1);
+    padding: 0.25rem;
+    transition: background-color 0.3s ease;
+    &:hover {
+      background-color: get-color(secondary, main-light-4);
+    }
+  }
+
+  &__answer {
+    display: none;
+    background: get-color(neutral, neutral-1);
+    position: absolute;
+    border-radius: $global-border-radius;
+    top: 0;
+    transform: translateY(-100%);
+    color: get-color(others, white);
+    padding: 0.75rem;
+    width: 100%;
+    max-width: 600px;
+    white-space: pre-wrap;
+    &:hover {
+      display: flex;
+    }
+
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      left: 2rem;
+    }
+
+    &:before {
+      position: absolute;
+      content: '';
+      width: 0;
+      height: 0;
+      border-left: 1rem solid transparent;
+      border-right: 1rem solid transparent;
+      bottom: -0.35rem;
+      border-top: 1rem solid get-color(neutral, neutral-1);
+    }
+  }
+}

package/dist/src/components/atoms/FormFaq/FormFaq.tsx

@@ -0,0 +1,17 @@
+import React, { type FC } from 'react'
+
+import { type FormFaqProps } from './FormFaqProps.types'
+// import './FormFaq.scss'
+
+const FormFaq: FC<FormFaqProps> = ({ title, answer }) => {
+  return (
+    <li className={'form-faq'}>
+      <div className={'form-faq__container'}>
+        <p className={'form-faq__title sans-serif --small'}>{title}</p>
+        <div className={'form-faq__answer sans-serif --extra-small'}>{answer}</div>
+      </div>
+    </li>
+  )
+}
+
+export default FormFaq

package/dist/src/components/atoms/FormFaq/FormFaqProps.types.ts

@@ -0,0 +1,4 @@
+export interface FormFaqProps {
+  title: string
+  answer: string
+}

package/dist/src/components/atoms/FormFaq/index.ts

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

package/dist/src/components/atoms/GoogleButton/GoogleButton.scss

@@ -0,0 +1,22 @@
+@import '../../../globalStyles/variables';
+
+.google-button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid get-color(neutral, neutral-3);
+  padding: 0.5rem 0;
+  background-color: get-color(others, white);
+  border-radius: 2px;
+  font-family: Roboto, sans-serif;
+  color: rgba(0, 0, 0, 0.54);
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .google-logo {
+    margin-right: 1rem;
+  }
+}

package/dist/src/components/atoms/GoogleButton/GoogleButton.tsx

@@ -0,0 +1,16 @@
+import React, { type FC } from 'react'
+
+import { type GoogleButtonProps } from './GoogleButtonProps.types'
+import logoGoogle from '../../../../images/svg/logo-google.svg'
+// import './GoogleButton.scss'
+
+const GoogleButton: FC<GoogleButtonProps> = ({ onClick, label = 'Log In with Google' }) => {
+  return (
+    <button type='button' className='google-button' onClick={onClick}>
+      <img className='google-logo' src={logoGoogle} alt=''></img>
+      <span>{label}</span>
+    </button>
+  )
+}
+
+export default GoogleButton

package/dist/src/components/atoms/GoogleButton/GoogleButtonProps.types.ts

@@ -0,0 +1,4 @@
+export interface GoogleButtonProps {
+  label?: string
+  onClick?: () => void
+}

package/dist/src/components/atoms/GoogleButton/index.ts

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

package/dist/src/components/atoms/IconImage/IconImage.tsx

@@ -0,0 +1,14 @@
+import React, { type FC } from 'react'
+
+import { type IconImageProps } from './IconImageProps.types'
+
+const IconImage: FC<IconImageProps> = ({ iconName, baseSrcUrl = undefined, givenClass, iconFormat = 'svg' }) => {
+  if (baseSrcUrl === undefined) {
+    baseSrcUrl = `${process.env.ASSETS_URL}/`
+  }
+  const iconUrl = `${baseSrcUrl}${iconName}.${iconFormat}`
+
+  return <img className={givenClass} src={iconUrl} alt='' role='img' />
+}
+
+export default IconImage

package/dist/src/components/atoms/IconImage/IconImageProps.types.ts

@@ -0,0 +1,6 @@
+export interface IconImageProps {
+  iconName: string
+  baseSrcUrl?: string
+  givenClass?: string
+  iconFormat?: string
+}

package/dist/src/components/atoms/IconImage/index.ts

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

package/dist/src/components/atoms/IconSvgURLWithThemeColor/IconSvgURLWithThemeColor.scss

@@ -0,0 +1,6 @@
+@import '../../../globalStyles/variables.scss';
+
+.icon-svg-with-theme-color {
+  display: block;
+  background-color: get-color(primary);
+}

package/dist/src/components/atoms/IconSvgURLWithThemeColor/IconSvgURLWithThemeColor.tsx

@@ -0,0 +1,29 @@
+import React, { type FC } from 'react'
+
+import { type IconSvgURLWithThemeColorProps } from './IconSvgURLWithThemeColorProps.types'
+
+// import './IconSvgURLWithThemeColor.scss'
+
+export const IconSvgURLWithThemeColor: FC<IconSvgURLWithThemeColorProps> = ({
+  color = '',
+  url,
+  width = '30',
+  height = '30'
+}): React.ReactElement => {
+  let backgroundColor
+  if (color.length > 0) {
+    backgroundColor = color
+  }
+  return (
+    <i
+      className='icon-svg-with-theme-color'
+      style={{
+        width: `${width}px`,
+        height: `${height}px`,
+        mask: `url(${url}) no-repeat center / contain`,
+        WebkitMask: `url(${url}) no-repeat center / contain`,
+        backgroundColor
+      }}
+    />
+  )
+}

package/dist/src/components/atoms/IconSvgURLWithThemeColor/IconSvgURLWithThemeColorProps.types.ts

@@ -0,0 +1,6 @@
+export interface IconSvgURLWithThemeColorProps {
+  url: string
+  width?: string
+  height?: string
+  color?: string
+}

package/dist/src/components/atoms/IconSvgURLWithThemeColor/index.ts

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

package/dist/src/components/atoms/IconTextInfoSection/IconTextInfoSection.scss

@@ -0,0 +1,80 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.icon-text-info-section {
+  &__separator {
+    background-color: get-color(neutral, neutral-3);
+    border-bottom: 1px get-color(neutral, neutral-3) solid;
+    display: none;
+    height: 70px;
+    padding-bottom: 40px;
+    width: 1px;
+
+    @include laptop {
+      margin: 0 32px;
+    }
+
+    @include portrait-tablets {
+      display: flex;
+    }
+
+    @include mobile {
+      margin: 19.2px 32px;
+    }
+  }
+}
+
+.icon-text-info-section.bottom-side {
+  display: flex;
+  flex-direction: column;
+  background-color: get-color(neutral, neutral-4);
+  justify-content: center;
+  padding: 1rem 3rem;
+
+  @include portrait-tablets {
+    padding: 0;
+    flex-direction: row;
+  }
+
+  @include portrait-tablets {
+    padding: 1rem 1rem;
+  }
+
+  .box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+
+    @include mobile {
+      margin: 0.4rem;
+    }
+
+    @include portrait-tablets {
+      margin: 0 1rem;
+    }
+  }
+
+  .item-image {
+    width: 2.5rem;
+    margin-right: 1rem;
+
+    @include mobile {
+      width: 1.5rem;
+    }
+
+    .image {
+      width: 40px;
+      height: 40px;
+
+      @include mobile {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  .item-text {
+    font-size: 16px;
+  }
+}

package/dist/src/components/atoms/IconTextInfoSection/IconTextInfoSection.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { type IconTextInfoSectionProps } from './IconTextInfoSection.types'
+
+// import './IconTextInfoSection.scss'
+
+export const IconTextInfoSection: React.FC<IconTextInfoSectionProps> = ({ items, classnames = '' }) => {
+  return (
+    <div className={`icon-text-info-section bottom-side ${classnames}`}>
+      {items.map(({ text, src }, index) => (
+        <React.Fragment key={`${src}-${index}`}>
+          <div className='box'>
+            <div className='item-image'>
+              <img className='image' src={src} alt='create'></img>
+            </div>
+            <div className='item-text'>
+              <p className='no-margin'>{text}</p>
+            </div>
+          </div>
+          {items.length - 1 !== index && <div className='icon-text-info-section__separator'></div>}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}

package/dist/src/components/atoms/IconTextInfoSection/IconTextInfoSection.types.ts

@@ -0,0 +1,9 @@
+interface Items {
+  text: string
+  src: string
+}
+
+export interface IconTextInfoSectionProps {
+  items: Items[]
+  classnames?: string
+}