@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBar.tsx

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+
+import { Button, RichTextStrapi } from '../../atoms'
+import { type CookiePolicyBarProps } from './CookiePolicyBarProps'
+// import './CookiePolicyBar.scss'
+
+export const CookiePolicyBar: FC<CookiePolicyBarProps> = ({ clickFunc, text }) => {
+  return (
+    <div className='cookie-policy-bar'>
+      <RichTextStrapi html={text} className='cookie-policy-bar__text sans-serif --extra-small' />
+      <div className='cookie-policy-bar__button-container'>
+        <Button
+          dataQa=''
+          givenClass='accept-cookies-button'
+          noLink
+          color='primary3'
+          label={'Accept Cookies'}
+          onClick={clickFunc}
+        />
+      </div>
+    </div>
+  )
+}

package/dist/src/components/organisms/CookiePolicyBar/CookiePolicyBarProps.ts

@@ -0,0 +1,4 @@
+export interface CookiePolicyBarProps {
+  clickFunc: () => void
+  text: string
+}

package/dist/src/components/organisms/CookiePolicyBar/index.ts

@@ -0,0 +1,2 @@
+export * from './CookiePolicyBar'
+export * from './CookiePolicyBarProps'

package/dist/src/components/organisms/ErrorContentRatafia/ErrorContentRatafia.scss

@@ -0,0 +1,18 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.error-content-ratafia {
+  width: 100%;
+  color: get-color(neutral, neutral-2);
+  &__title {
+    font-size: 1rem;
+    padding-bottom: 1rem;
+  }
+  &__message {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+  }
+}

package/dist/src/components/organisms/ErrorContentRatafia/ErrorContentRatafia.tsx

@@ -0,0 +1,13 @@
+import React, { type FC } from 'react'
+
+import { type ErrorContentRatafiaProps } from './ErrorContentRatafiaProps.types'
+// import './ErrorContentRatafia.scss'
+
+export const ErrorContentRatafia: FC<ErrorContentRatafiaProps> = ({ title, errorMessage }) => {
+  return (
+    <div className='error-content-ratafia'>
+      <h2 className='error-content-ratafia__title'>{title}</h2>
+      <div className='error-content-ratafia__message'>{errorMessage}</div>
+    </div>
+  )
+}

package/dist/src/components/organisms/ErrorContentRatafia/ErrorContentRatafiaProps.types.ts

@@ -0,0 +1,4 @@
+export interface ErrorContentRatafiaProps {
+  title: string
+  errorMessage: string
+}

package/dist/src/components/organisms/ErrorContentRatafia/index.ts

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

package/dist/src/components/organisms/FaqGroup/FaqGroup.scss

@@ -0,0 +1,22 @@
+@import '../../../globalStyles/variables.scss';
+
+.faqGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+
+  .title {
+    color: get-color(neutral, neutral-1);
+    font-size: 28px;
+    line-height: 32px;
+    letter-spacing: -0.3px;
+  }
+
+  .faqs {
+    display: flex;
+    flex-direction: column;
+    gap: $global-gap;
+    width: 100%;
+  }
+}

package/dist/src/components/organisms/FaqGroup/FaqGroup.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { type FaqGroupProps } from './FaqGroupProps'
+import { FaqItem } from '../../molecules'
+// import './FaqGroup.scss'
+
+export const FaqGroup: React.FC<FaqGroupProps> = ({ title, slug, faqs = [], hasAllClosed = false, children }) => {
+  return (
+    <div className='faqGroup' id={slug}>
+      <h2 className='title' id={`${slug}-faqs`}>
+        {title}
+      </h2>
+      {children}
+      <div className='faqs'>
+        {faqs.map((faq, index) => (
+          <FaqItem key={faq.id} {...faq} index={hasAllClosed ? index + 1 : index} />
+        ))}
+      </div>
+    </div>
+  )
+}

package/dist/src/components/organisms/FaqGroup/FaqGroupProps.ts

@@ -0,0 +1,10 @@
+import { type FaqItemProps } from '../../molecules'
+
+export interface FaqGroupProps {
+  id: string
+  title: string
+  slug: string
+  faqs: FaqItemProps[]
+  hasAllClosed?: boolean
+  children?: React.ReactNode
+}

package/dist/src/components/organisms/FaqGroup/index.ts

@@ -0,0 +1,2 @@
+export * from './FaqGroup'
+export * from './FaqGroupProps'

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.scss

@@ -0,0 +1,28 @@
+@import '../../../globalStyles/variables.scss';
+
+.features-ratafia-content__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+  gap: 1.5rem;
+
+  &__title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    gap: 1rem;
+
+    &__text {
+      align-self: stretch;
+      color: get-color(neutral, neutral-1);
+    }
+    &__description {
+      align-self: stretch;
+      color: get-color(neutral, neutral-1);
+    }
+  }
+}

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContent.tsx

@@ -0,0 +1,30 @@
+import React, { type FC } from 'react'
+
+import { FeatureRatafiaCardList } from '../../molecules'
+import { type FeaturesRatafiaContentProps } from './FeaturesRatafiaContentProps.types'
+// import './FeaturesRatafiaContent.scss'
+
+const FeaturesRatafiaContent: FC<FeaturesRatafiaContentProps> = ({
+  title,
+  description,
+  notReleasedText = 'Coming Soon',
+  features
+}) => {
+  return (
+    <div className='features-ratafia-content'>
+      <div className='features-ratafia-content__wrapper'>
+        <div className='features-ratafia-content__wrapper__title'>
+          <h2 className='sans-serif --super-large --bold-weight features-ratafia-content__wrapper__title__text'>
+            {title}
+          </h2>
+          <div className='sans-serif --super-medium features-ratafia-content__wrapper__title__description'>
+            {description}
+          </div>
+        </div>
+        <FeatureRatafiaCardList features={features} notReleasedText={notReleasedText} />
+      </div>
+    </div>
+  )
+}
+
+export default FeaturesRatafiaContent

package/dist/src/components/organisms/FeaturesRatafiaContent/FeaturesRatafiaContentProps.types.ts

@@ -0,0 +1,8 @@
+import { type FeatureRatafiaCardProps } from '../../atoms'
+
+export interface FeaturesRatafiaContentProps {
+  title: string
+  description: React.ReactNode
+  notReleasedText?: string
+  features: FeatureRatafiaCardProps[]
+}

package/dist/src/components/organisms/FeaturesRatafiaContent/index.ts

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

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.scss

@@ -0,0 +1,70 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.guidelines-section {
+  &__texts {
+    flex-basis: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 1rem;
+    margin-right: 0;
+    color: get-color(neutral, neutral-1);
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: -0.3px;
+
+    @include landscape-tablets {
+      margin-left: 3rem;
+      margin-bottom: 0;
+    }
+
+    &__title {
+      font-family: $font-serif;
+      margin-bottom: 2rem;
+      text-align: center;
+      color: get-color(neutral, neutral-2);
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 42px;
+      letter-spacing: -0.3px;
+
+      @include landscape-tablets {
+        text-align: left;
+      }
+    }
+
+    &__body {
+      font-family: $font-sans;
+      font-size: 16px;
+      line-height: 22px;
+
+      a {
+        color: get-color(primary, main-light-1);
+        font-weight: 400 !important;
+      }
+    }
+  }
+
+  &__image {
+    flex-basis: 50%;
+    margin-bottom: 2rem;
+
+    &.big-devices {
+      display: none;
+
+      @include landscape-tablets {
+        display: flex;
+      }
+    }
+
+    &.is-mobile {
+      display: flex;
+
+      @include landscape-tablets {
+        display: none;
+      }
+    }
+  }
+}

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.tsx

@@ -0,0 +1,20 @@
+import React, { type FC } from 'react'
+
+import { type GuidelinesContentProps } from './GuidelinesContentProps.types'
+import { RichTextInner } from '../../atoms'
+// import './GuidelinesContent.scss'
+
+const GuidelinesContent: FC<GuidelinesContentProps> = ({ title, image, children }) => {
+  return (
+    <>
+      <div className='guidelines-section__image big-devices'>{image}</div>
+      <div className='guidelines-section__texts'>
+        <h2 className='guidelines-section__texts__title'>{title}</h2>
+        <RichTextInner customClass='guidelines-section__texts__body'>{children}</RichTextInner>
+      </div>
+      <div className='guidelines-section__image is-mobile'>{image}</div>
+    </>
+  )
+}
+
+export default GuidelinesContent

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.ts

@@ -0,0 +1,5 @@
+export interface GuidelinesContentProps {
+  title: string
+  image: React.ReactNode
+  children: React.ReactNode
+}

package/dist/src/components/organisms/GuidelinesContent/index.ts

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

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContent.scss

@@ -0,0 +1,28 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.jumbotron-ratafia-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+
+  &__title {
+    &__text {
+      line-height: 2.25rem;
+      font-size: 2rem;
+      font-family: 'Inter', sans-serif;
+      color: get-color(others, white);
+
+      &__icon {
+        padding: 0 0.6rem;
+        border-radius: 4px;
+        color: get-color(primary, main-dark-2);
+        background: get-color(secondary, main-light-2);
+      }
+    }
+  }
+  &__description {
+    color: get-color(others, white);
+  }
+}

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContent.tsx

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react'
+
+import { type JumbotronRatafiaContentProps } from './JumbotronRatafiaContentProps.types'
+import { TagsRatafiaList } from '../../molecules'
+// import './JumbotronRatafiaContent.scss'
+
+const JumbotronRatafiaContent: FC<JumbotronRatafiaContentProps> = ({ title, body, tags }) => {
+  return (
+    <div className='jumbotron-ratafia-content'>
+      <div className='jumbotron-ratafia-content__title'>{title}</div>
+      <span className='sans-serif --medium jumbotron-ratafia-content__description' itemProp='text'>
+        {body}
+      </span>
+      <TagsRatafiaList tags={tags} />
+    </div>
+  )
+}
+
+export default JumbotronRatafiaContent

package/dist/src/components/organisms/JumbotronRatafiaContent/JumbotronRatafiaContentProps.types.ts

@@ -0,0 +1,7 @@
+import { type TagRatafiaItemProps } from '../../atoms'
+
+export interface JumbotronRatafiaContentProps {
+  title: React.ReactNode
+  body: React.ReactNode
+  tags: TagRatafiaItemProps[]
+}

package/dist/src/components/organisms/JumbotronRatafiaContent/index.ts

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

package/dist/src/components/organisms/KeyFactsLoadingContentRatafia/KeyFactsLoadingContentRatafia.scss

@@ -0,0 +1,146 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.key-facts-loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  gap: 1rem;
+
+  &__document-name {
+    color: get-color(neutral, neutral-2);
+    font-size: 1rem;
+    @include portrait-tablets {
+      font-size: 1.125rem;
+    }
+  }
+
+  &__animation-wrapper {
+    height: calc(0.54 * 100vh);
+
+    align-self: stretch;
+
+    padding: 0 2rem 1.5rem 1.5rem;
+
+    overflow: hidden;
+
+    border-radius: 4px;
+    border-top: 4px solid get-color(neutral, neutral-6);
+    border-bottom: 4px solid get-color(neutral, neutral-6);
+    background: get-color(neutral, neutral-6);
+
+    @include portrait-tablets {
+      height: 490px;
+    }
+
+    &__animation {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+
+      gap: 0.8rem;
+
+      padding: 2rem 0;
+
+      border-bottom: 1px solid get-color(neutral, neutral-4);
+      &__loader {
+        background: get-color(neutral, neutral-4);
+        border-radius: 16px;
+      }
+      .item-1 {
+        height: 10px;
+        width: 45%;
+      }
+      .item-2 {
+        height: 7px;
+        width: 30%;
+      }
+      .item-3 {
+        height: 10px;
+        width: 25%;
+      }
+      .item-4 {
+        height: 7px;
+        width: 70%;
+      }
+      .item-5 {
+        height: 7px;
+        width: 55%;
+      }
+      .item-6 {
+        height: 7px;
+        width: 65%;
+      }
+      .item-7 {
+        height: 7px;
+        width: 90%;
+      }
+      .item-8 {
+        height: 7px;
+        width: 90%;
+      }
+    }
+    .animation-1 {
+      animation:
+        appear 4s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-2 {
+      animation:
+        appear 5s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-3 {
+      animation:
+        appear 6s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-4 {
+      animation:
+        appear 6s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+  }
+
+  &__message {
+    display: flex;
+    justify-content: start;
+    align-items: flex-start;
+    align-self: stretch;
+
+    padding: 1rem;
+    gap: 0.5rem;
+
+    border-radius: 4px;
+    background: get-color(secondary, main-light-4);
+
+    &__icon img {
+      width: 24px;
+    }
+    &__text {
+      color: get-color(neutral, neutral-1);
+    }
+  }
+}
+
+@keyframes fadeInOut {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/src/components/organisms/KeyFactsLoadingContentRatafia/KeyFactsLoadingContentRatafia.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { type KeyFactsLoadingContentRatafiaProps } from './KeyFactsLoadingContentRatafiaProps.types'
+// import './KeyFactsLoadingContentRatafia.scss'
+
+export const KeyFactsLoadingContentRatafia: React.FC<KeyFactsLoadingContentRatafiaProps> = ({
+  documentName,
+  icon,
+  text
+}) => {
+  return (
+    <div className='key-facts-loading-content'>
+      <h2 className='sans-serif --bold-weight key-facts-loading-content__document-name'>{documentName}</h2>
+      <div className='key-facts-loading-content__animation-wrapper'>
+        <div className='key-facts-loading-content__animation-wrapper__animation animation-1'>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-1'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-6'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-2'></div>
+        </div>
+        <div className='key-facts-loading-content__animation-wrapper__animation animation-2'>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-3'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-4'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-5'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-6'></div>
+        </div>
+        <div className='key-facts-loading-content__animation-wrapper__animation animation-3'>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-1'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-7'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-4'></div>
+        </div>
+        <div className='key-facts-loading-content__animation-wrapper__animation animation-4'>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-3'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-8'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-2'></div>
+          <div className='key-facts-loading-content__animation-wrapper__animation__loader item-6'></div>
+        </div>
+      </div>
+      <div className='key-facts-loading-content__message'>
+        <div className='key-facts-loading-content__message__icon'>{icon}</div>
+        <span className='sans-serif --medium key-facts-loading-content__message__text'>{text}</span>
+      </div>
+    </div>
+  )
+}
+
+export default KeyFactsLoadingContentRatafia

package/dist/src/components/organisms/KeyFactsLoadingContentRatafia/KeyFactsLoadingContentRatafiaProps.types.ts

@@ -0,0 +1,5 @@
+export interface KeyFactsLoadingContentRatafiaProps {
+  documentName: string
+  icon?: React.ReactNode
+  text?: React.ReactNode
+}

package/dist/src/components/organisms/KeyFactsLoadingContentRatafia/index.ts

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

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.scss

@@ -0,0 +1,23 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.key-facts-result-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+
+  gap: 1rem;
+
+  &__document-name {
+    color: get-color(neutral, neutral-2);
+    font-size: 1rem;
+    @include portrait-tablets {
+      font-size: 1.125rem;
+    }
+  }
+  &__content {
+    overflow: hidden;
+  }
+}

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { KeyFactCardListRatafia } from '../../molecules'
+import { type KeyFactsResultContentRatafiaProps } from './KeyFactsResultContentRatafiaProps.types'
+import { ReviewKeyFactsResultRatafia } from '../../atoms'
+// import './KeyFactsResultContentRatafia.scss'
+
+export const KeyFactsResultContentRatafia: React.FC<KeyFactsResultContentRatafiaProps> = ({ result, review }) => {
+  return (
+    <div className='key-facts-result-content'>
+      <h2 className='sans-serif --bold-weight key-facts-result-content__document-name'>{result?.documentName}</h2>
+      <div className='key-facts-result-content__content'>
+        {result !== null && <KeyFactCardListRatafia keyFacts={result.keyFacts} />}
+        <ReviewKeyFactsResultRatafia {...review} />
+      </div>
+    </div>
+  )
+}
+
+export default KeyFactsResultContentRatafia

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafiaProps.types.ts

@@ -0,0 +1,11 @@
+import type { KeyFactRatafiaCardProps, ReviewKeyFactsResultRatafiaProps } from '../../atoms'
+
+export interface KeyFactsResultContentRatafiaProps {
+  result: KeyFactsResultProps | null
+  review: ReviewKeyFactsResultRatafiaProps
+}
+
+export interface KeyFactsResultProps {
+  documentName: string
+  keyFacts: KeyFactRatafiaCardProps[]
+}

package/dist/src/components/organisms/KeyFactsResultContentRatafia/index.ts

@@ -0,0 +1,3 @@
+export { default as KeyFactsResultContentRatafia } from './KeyFactsResultContentRatafia'
+export { type KeyFactsResultContentRatafiaProps } from './KeyFactsResultContentRatafiaProps.types'
+export { type KeyFactsResultProps } from './KeyFactsResultContentRatafiaProps.types'