@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

@@ -0,0 +1,41 @@
+export * from './AccordionItem'
+export * from './ActionButtonHeaderRatafiaCardList'
+export * from './AlsoKnownAs'
+export * from './Article'
+export * from './BaseBoxList'
+export * from './BenefitRatafiaCardList'
+export * from './BottomFixedBar'
+export * from './BottomOverlay'
+export * from './BoxForm'
+export * from './Breadcrumb'
+export * from './ContactBox'
+export * from './ContinueEditingBanner'
+export * from './CountDownMessage'
+export * from './EmailContactBox'
+export * from './ExpertCardList'
+export * from './FaqItem'
+export * from './FeatureRatafiaCardList'
+export * from './Feedback'
+export * from './FreeDocModalContent'
+export * from './HeaderRatafia'
+export * from './KeyFactCardListRatafia'
+export * from './MenuItemsSection'
+export * from './MidBannerRatafiaContent'
+export * from './MidBannerRatafiaSample'
+export * from './MoreDocsDesktop'
+export * from './MoreDocsMobile'
+export * from './NavBarDropDown'
+export * from './Pagination'
+export * from './PhoneContactBoxDesktop'
+export * from './PhoneContactBoxMobile'
+export * from './PopularDocs'
+export * from './PricingCard'
+export * from './Snackbar'
+export * from './StepGetForm'
+export * from './StepRatafiaCardList'
+export * from './TagsRatafiaList'
+export * from './TextInput'
+export * from './TooltipMenu'
+export * from './TrustworthyWebsites'
+export * from './TypeModulesList'
+export * from './UploadRatafiaZone'

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

@@ -0,0 +1,58 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.about-us-content {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+
+  @include landscape-tablets {
+    flex-flow: row nowrap;
+  }
+
+  &__body {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-family: $font-sans;
+
+    @include landscape-tablets {
+      flex-basis: 50%;
+      margin-top: 0;
+      margin-bottom: 3rem;
+    }
+
+    .m-richText {
+      a {
+        color: get-color(primary, main);
+      }
+    }
+
+    &__button {
+      margin-top: 2rem;
+      font-family: $font-sans;
+      .e-button {
+        display: block;
+        @include landscape-tablets {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  &__image {
+    margin-bottom: 1rem;
+
+    @include landscape-tablets {
+      margin-bottom: 0;
+      margin-right: 1rem;
+      flex-basis: 50%;
+    }
+
+    @include laptop {
+      margin-bottom: -3rem;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+
+import { type AboutUsContentProps } from './AboutUsContentProps.types'
+import { Button } from '../../atoms'
+// import './AboutUsContent.scss'
+
+const AboutUsContent: FC<AboutUsContentProps> = ({ children, image, button }) => {
+  return (
+    <div className='about-us-content'>
+      <div className={'about-us-content__image'}>{image}</div>
+      <div className={'about-us-content__body'}>
+        {children}
+        {button != null && (
+          <div className={'about-us-content__body__button'}>
+            <Button {...button} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AboutUsContent

package/dist/src/components/organisms/AboutUsContent/AboutUsContentProps.types.ts

@@ -0,0 +1,7 @@
+import { type ButtonProps } from '../../atoms'
+
+export interface AboutUsContentProps {
+  children: React.ReactNode
+  image: React.ReactNode
+  button?: ButtonProps
+}

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

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

package/dist/src/components/organisms/Accordion/Accordion.context.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import React from 'react'
+
+type Handler = 'error' | 'warning' | 'success' | 'default'
+
+type Action =
+  | { type: 'message'; accordionItem: number; message: string; resetAction?: string }
+  | { type: 'loading'; accordionItem: number; resetAction?: string }
+  | { type: 'locked'; accordionItem: number; resetAction?: string }
+  | { type: 'unlocked'; accordionItem: number; resetAction?: string }
+  | { type: 'handler'; accordionItem: number; handlerMessage: Handler; resetAction?: string }
+type Dispatch = (action: Action) => void
+
+interface ItemDataAccordion {
+  handler: string
+  isLoading: boolean
+  message: string
+  locked: {
+    actionType: string
+    isLocked: boolean
+  }
+}
+interface State {
+  itemsDataAccordion: ItemDataAccordion[]
+}
+
+interface AccordionProviderProps {
+  children: React.ReactNode
+  elements: number
+}
+
+const AccordionContext = React.createContext<{ state: State; dispatch: Dispatch } | undefined>(undefined)
+
+const changeError = (state: State, action: Action): State | undefined => {
+  if (action.type !== 'handler') return
+  const itemsDataAccordion: ItemDataAccordion[] = state.itemsDataAccordion.map((item, index) =>
+    index === action.accordionItem ? { ...item, handler: action.handlerMessage } : item
+  )
+  return { itemsDataAccordion }
+}
+
+const changeLoading = (state: State, action: Action): State => {
+  const itemsDataAccordion = state.itemsDataAccordion.map((item, index) =>
+    index === action.accordionItem ? { ...item, isLoading: !item.isLoading } : item
+  )
+  return { itemsDataAccordion }
+}
+
+const changeLocked = (state: State, action: Action): State => {
+  const itemsDataAccordion = state.itemsDataAccordion.map((item, index) =>
+    index === action.accordionItem
+      ? {
+          ...item,
+          locked: {
+            actionType: action.resetAction ?? action.type,
+            isLocked: !action.resetAction && !item.locked.isLocked
+          }
+        }
+      : item
+  )
+  return { itemsDataAccordion }
+}
+
+const changeMessage = (state: State, action: Action): State | undefined => {
+  if (action.type !== 'message') return
+  const itemsDataAccordion = state.itemsDataAccordion.map((item, index) =>
+    index === action.accordionItem ? { ...item, message: action.message } : item
+  )
+  return { itemsDataAccordion }
+}
+
+const actions = {
+  handler: changeError,
+  loading: changeLoading,
+  locked: changeLocked,
+  message: changeMessage,
+  unlocked: changeLocked
+}
+
+function accordionDataReducer(state: State, action: Action): State {
+  if (actions[action.type]) {
+    return actions[action.type](state, action) as State
+  }
+  throw new Error(`Unhandled action type: ${action.type}`)
+}
+
+function AccordionProvider({ children, elements }: AccordionProviderProps): JSX.Element {
+  const itemsDataAccordion = {
+    itemsDataAccordion: Array.from(Array(elements).keys()).map(() => ({
+      isLoading: false,
+      message: '',
+      locked: {
+        actionType: 'default',
+        isLocked: false
+      },
+      handler: 'default'
+    }))
+  }
+  const [state, dispatch] = React.useReducer(accordionDataReducer, itemsDataAccordion)
+  const value = { state, dispatch }
+  return <AccordionContext.Provider value={value}>{children}</AccordionContext.Provider>
+}
+
+function useDispatchDataAccordionItem(): { dispatch: Dispatch } {
+  const context = React.useContext(AccordionContext)
+  if (context === undefined) {
+    throw new Error('useAccordionLoadingItem must be used within a AccordionProvider')
+  }
+  return {
+    dispatch: context.dispatch
+  }
+}
+
+function useStateDataAccordionItem(accordionLoadingItem = 0): { state: ItemDataAccordion } {
+  const context = React.useContext(AccordionContext)
+  if (context === undefined) {
+    throw new Error('useAccordionLoadingItem must be used within a AccordionProvider')
+  }
+  return {
+    state: context.state.itemsDataAccordion[accordionLoadingItem]
+  }
+}
+
+export { AccordionProvider, useDispatchDataAccordionItem, useStateDataAccordionItem }

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

@@ -0,0 +1,4 @@
+.accordion {
+  width: 100%;
+  padding-bottom: 2rem;
+}

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

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { AccordionItem } from '../../molecules'
+import { type AccordionProps } from './AccordionProps.types'
+import { AccordionProvider } from './Accordion.context'
+
+// import './Accordion.scss'
+
+export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: AccordionProps): JSX.Element => {
+  const [activeIndex, setActiveIndex] = useState(defaultActiveIndex)
+
+  const handleItemClick = (index: number): void => {
+    setActiveIndex((prevIndex) => (prevIndex === index ? -1 : index))
+  }
+
+  return (
+    <AccordionProvider elements={data.length}>
+      <div className='accordion'>
+        {data.map((item, index) => (
+          <AccordionItem
+            accordionRightContent={item?.accordionRightContent}
+            defaultHeightItem={defaultHeightItem}
+            index={index}
+            isOpen={activeIndex === index}
+            key={index}
+            onClick={(): void => {
+              handleItemClick(index)
+            }}
+            title={item.title}
+          >
+            {item.children}
+          </AccordionItem>
+        ))}
+      </div>
+    </AccordionProvider>
+  )
+}

package/dist/src/components/organisms/Accordion/AccordionProps.types.ts

@@ -0,0 +1,12 @@
+interface AccordionItem {
+  accordionRightContent?: React.ReactNode
+  children?: React.ReactNode
+  onClick?: () => void
+  title?: string
+}
+
+export interface AccordionProps {
+  data: AccordionItem[]
+  defaultActiveIndex?: number
+  defaultHeightItem?: number
+}

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

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion'
+export { useDispatchDataAccordionItem, useStateDataAccordionItem } from './Accordion.context'

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

@@ -0,0 +1,12 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.articles_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  @include laptop {
+    flex-direction: row;
+  }
+}

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

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react'
+
+import { Article, type ArticleProps } from '../../molecules'
+import { type ArticlesListProps } from './ArticlesListProps.types'
+// import './ArticlesList.scss'
+
+const ArticlesList: FC<ArticlesListProps> = ({ articles = [] }) => {
+  if (articles?.length === 0) return null
+
+  return (
+    <div className='articles_wrapper'>
+      {articles.map((article: ArticleProps) => (
+        <Article key={`article_${article?.id}`} {...article} />
+      ))}
+    </div>
+  )
+}
+
+export default ArticlesList

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.ts

@@ -0,0 +1,5 @@
+import { type ArticleProps } from '../../molecules'
+
+export interface ArticlesListProps {
+  articles: ArticleProps[]
+}

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

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

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

@@ -0,0 +1,22 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.as-see-in-content {
+  display: flex;
+
+  &__text {
+    justify-content: center;
+    text-align: center;
+
+    #articles,
+    #legal-documents {
+      color: get-color(primary, main-light-1);
+      font-weight: 400;
+    }
+
+    a {
+      color: get-color(primary, main-light-1);
+      font-weight: 400 !important;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import React, { type FC } from 'react'
+
+import { type AsSeeInContentProps } from './AsSeeInContentProps.types'
+import { RichTextInner } from '../../atoms'
+import { TrustworthyWebsites } from '../../molecules/TrustworthyWebsites'
+// import './AsSeeInContent.scss'
+
+const AsSeeInContent: FC<AsSeeInContentProps> = ({ children, trustWorthyImages }) => {
+  if (trustWorthyImages.images.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      <RichTextInner customClass='as-see-in-content__text'>{children}</RichTextInner>
+      <TrustworthyWebsites images={trustWorthyImages.images} />
+    </>
+  )
+}
+
+export default AsSeeInContent

package/dist/src/components/organisms/AsSeeInContent/AsSeeInContentProps.types.ts

@@ -0,0 +1,6 @@
+import { type TrustworthyWebsitesProps } from '../../molecules/TrustworthyWebsites'
+
+export interface AsSeeInContentProps {
+  children: React.ReactNode
+  trustWorthyImages: TrustworthyWebsitesProps
+}

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

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

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

@@ -0,0 +1,60 @@
+@import '../../../globalStyles/variables.scss';
+
+.card-funcionality {
+  border-radius: $global-border-radius;
+  box-shadow: $box-shadow-medium;
+  display: flex;
+  flex-direction: column;
+  gap: $global-gap;
+  padding: 1em;
+
+  .content-tags {
+    display: flex;
+    flex-direction: column;
+    gap: $global-gap;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: calc($global-gap/2);
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .icon {
+          padding: 2px;
+          border-radius: $global-border-radius;
+          background: get-color(primary, main-light-5);
+        }
+
+        .title {
+          color: get-color(neutral, neutral-1);
+          font-weight: 700;
+        }
+      }
+
+      .text {
+        overflow: hidden;
+        color: get-color(neutral, neutral-1);
+        font-size: 14px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .tags {
+      display: flex;
+      gap: $global-gap * 2;
+      flex-wrap: wrap;
+    }
+  }
+
+  .cta-card {
+    align-self: flex-start;
+    margin-top: 0;
+  }
+}

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

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { Button, Tag } from '../../atoms'
+import { type CardFuncionalityProps } from './CardFuncionalityProps'
+// import './CardFuncionality.scss'
+
+export const CardFuncionality: React.FC<CardFuncionalityProps> = ({ icon, title, text, tags, cta }) => {
+  return (
+    <article className='card-funcionality'>
+      <div className='content-tags'>
+        <div className='content'>
+          <div className='header'>
+            <div className='icon'>{icon}</div>
+            <p className='title'>{title}</p>
+          </div>
+          <div title={text} className='text'>
+            {text}
+          </div>
+        </div>
+        <div className='tags'>
+          {tags.map((tag) => (
+            <Tag key={tag.id} {...tag} />
+          ))}
+        </div>
+      </div>
+      <Button {...cta} givenClass='cta-card' />
+    </article>
+  )
+}

package/dist/src/components/organisms/CardFuncionality/CardFuncionalityProps.ts

@@ -0,0 +1,9 @@
+import { type ButtonProps, type TagProps } from '../../atoms'
+
+export interface CardFuncionalityProps {
+  icon: React.ReactNode
+  title: string
+  text: string
+  tags: TagProps[]
+  cta: ButtonProps
+}

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

@@ -0,0 +1,2 @@
+export * from './CardFuncionality'
+export * from './CardFuncionalityProps'

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

@@ -0,0 +1,45 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+@import '../../../globalStyles/functions.scss';
+
+.contact__text {
+  .contact__text__title {
+    color: get-color(primary, main-dark-1);
+    margin-bottom: space(8);
+    font-size: 1.5rem;
+    font-weight: 500;
+    line-height: 2rem;
+  }
+
+  .contact__text__subtitle {
+    color: get-color(neutral, neutral-1);
+    font-size: 1rem;
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .contact__text .logo-text {
+    color: get-color(neutral, neutral-2);
+  }
+
+  .logo-text {
+    margin-top: 3.25rem;
+    @include portrait-tablets {
+      margin-top: 4rem;
+    }
+  }
+
+  .logo-text img {
+    min-width: 52px;
+  }
+
+  .faq-button {
+    display: inline-block;
+    margin-top: space(4);
+    width: 100%;
+    @include portrait-tablets {
+      width: 10rem;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules'
+import { Button } from '../../atoms'
+import { type ContactJumbotronProps } from './ContactJumbotronProps.types'
+// import './ContactJumbotron.scss'
+
+export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
+  phoneBoxDesktopProps,
+  emailContactBoxProps,
+  faqsTitle,
+  children,
+  isJonSnow = false
+}) => {
+  return (
+    <div className='contact__text'>
+      {!isJonSnow && <PhoneContactBoxDesktop {...phoneBoxDesktopProps} />}
+      <h2 className='contact__text__title sans-serif'>{faqsTitle}</h2>
+      <div className='contact__text__subtitle sans-serif'>{children}</div>
+      {!isJonSnow && (
+        <Button
+          givenClass='faq-button'
+          color='secondary'
+          label={'Visit FAQ Page'}
+          link={'/faqs/'}
+          dataQa={'visitFaq'}
+        />
+      )}
+      <EmailContactBox {...emailContactBoxProps} />
+    </div>
+  )
+}

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.ts

@@ -0,0 +1,11 @@
+import type React from 'react'
+
+import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules'
+
+export interface ContactJumbotronProps {
+  phoneBoxDesktopProps: PhoneContactBoxDesktopProps
+  emailContactBoxProps: EmailContactBoxProps
+  faqsTitle: string
+  children: React.ReactNode
+  isJonSnow?: boolean
+}

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

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

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

@@ -0,0 +1,54 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.fixed-container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  z-index: 3;
+  width: 100%;
+}
+.cookie-policy-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 0 1.5rem 1rem;
+  background-color: black;
+  color: get-color(others, white);
+
+  @include portrait-tablets {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+    justify-content: center;
+  }
+}
+
+.cookie-policy-bar__text {
+  margin: 1rem 0 0.5rem;
+  max-width: 48rem;
+
+  @include portrait-tablets {
+    margin-bottom: 1rem;
+    margin-right: 1.5rem;
+  }
+
+  @include laptop {
+    margin-right: 2.5rem;
+  }
+
+  a {
+    text-decoration: underline;
+    color: get-color(others, white);
+  }
+
+  &.m-richText p {
+    margin-bottom: 0;
+  }
+}
+
+.accept-cookies-button {
+  white-space: nowrap;
+}