@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

package/dist/src/components/molecules/TextInput/tests/Input.test.tsx

@@ -0,0 +1,45 @@
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import { Input } from '../Input'
+
+afterEach(cleanup)
+
+const testName = 'name'
+const testValue = 'value'
+
+describe('will return the component', () => {
+  test('without props', () => {
+    const { getByRole } = render(<Input />)
+    expect(getByRole('textbox')).toBeInTheDocument()
+    expect(getByRole('textbox')).toHaveAttribute('type', 'text')
+  })
+  test('of type password: with the eyeIcon rendered', async () => {
+    const { container, getByRole } = render(<Input type='password' value={testValue} />)
+    expect(container.firstChild).toHaveAttribute('type', 'password')
+
+    const img = getByRole('img')
+    expect(img).toHaveClass('input-icon-password')
+    fireEvent.click(img)
+
+    await waitFor(() => {
+      expect(container.firstChild).toHaveAttribute('type', 'text')
+    })
+  })
+  test('of type password: with the eyeIcon rendered but is not enabled without value', async () => {
+    const { container, getByRole } = render(<Input type='password' />)
+    expect(container.firstChild).toHaveAttribute('type', 'password')
+
+    const img = getByRole('img')
+    expect(img).toHaveClass('input-icon-password')
+    fireEvent.click(img)
+
+    await waitFor(() => {
+      expect(container.firstChild).toHaveAttribute('type', 'password')
+    })
+  })
+  test('of type password: with the eyeIcon rendered', () => {
+    const { container } = render(<Input name={testName} />)
+    expect(container.firstChild).toHaveAttribute('data-qa', testName)
+  })
+})

package/dist/src/components/molecules/TextInput/tests/TextInput.test.tsx

@@ -0,0 +1,68 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import TextInput from '../TextInput'
+
+afterEach(cleanup)
+
+const testFormat = '####'
+const testTooltip = 'tooltip'
+const testErrorMessage = 'Error message'
+const testLabel = 'Label'
+const testNotes = 'Notes'
+
+describe('will return the component', () => {
+  test('without props', () => {
+    const { getByRole, container } = render(<TextInput />)
+    expect(container.firstChild).toHaveClass('e-text')
+    expect(getByRole('textbox')).toHaveAttribute('type', 'text')
+  })
+
+  test('NumberFormat input if the format prop is passed', () => {
+    const { getByRole } = render(<TextInput format={testFormat} />)
+    expect(getByRole('textbox')).toHaveClass('e-text-input')
+    expect(getByRole('textbox')).toHaveAttribute('type', 'text')
+    expect(getByRole('textbox')).toHaveAttribute('inputmode', 'numeric')
+  })
+
+  test('with a tooltip', () => {
+    const { getByText } = render(<TextInput tooltip={testTooltip} />)
+    expect(getByText(testTooltip)).toHaveClass('tooltip-form')
+  })
+
+  test('with a error message', () => {
+    const { getByText } = render(<TextInput errorMessage={testErrorMessage} validate={false} />)
+    expect(getByText(testErrorMessage)).toHaveClass('e-text__error-label')
+  })
+
+  test('with a label', () => {
+    const { getByText } = render(<TextInput label={testLabel} />)
+    expect(getByText(testLabel)).toHaveClass('form-group__label')
+  })
+
+  test('with notes', () => {
+    const { getByText } = render(<TextInput notes={testNotes} />)
+    expect(getByText(testNotes)).toHaveClass('e-text__inner__notes')
+  })
+
+  test('should have children', () => {
+    const { getByText } = render(
+      <TextInput>
+        <span>test children</span>
+      </TextInput>
+    )
+    expect(getByText('test children')).toBeDefined()
+  })
+
+  test('should have id in input and for in label', () => {
+    const { getByText, getByLabelText } = render(<TextInput name='cvv' label='CVV' />)
+
+    const label = getByText('CVV')
+    const input = getByLabelText('CVV')
+
+    expect(label).toBeDefined()
+    expect(label).toHaveAttribute('for', 'cvv')
+    expect(input.id).toBe('cvv')
+    expect(input.name).toBe('cvv')
+  })
+})

package/dist/src/components/molecules/TextInput/tests/TextInputLabel.test.tsx

@@ -0,0 +1,41 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { TextInputLabel } from '../TextInputLabel'
+
+afterEach(cleanup)
+
+const testLabel = 'Label'
+const testNotes = 'Notes'
+const dialogMenuTipTest = 'dialogMenuTip'
+
+describe('will return null', () => {
+  test('if no prop is passed', () => {
+    const { container } = render(<TextInputLabel />)
+    expect(container.firstChild).toBe(null)
+  })
+})
+
+describe('will return the component', () => {
+  test('if the label is passed', () => {
+    const { container, getByText } = render(<TextInputLabel label={testLabel} />)
+    expect(container.firstChild).toHaveClass('e-text__inner')
+    expect(getByText(testLabel)).toHaveClass('form-group__label')
+  })
+  test('if the notes are passed', () => {
+    const { container, getByText } = render(<TextInputLabel notes={testNotes} />)
+    expect(container.firstChild).toHaveClass('e-text__inner')
+    expect(getByText(testNotes)).toHaveClass('e-text__inner__notes')
+  })
+  test('if the label and the notes are passed', () => {
+    const { getByText } = render(<TextInputLabel label={testLabel} notes={testNotes} />)
+    expect(getByText(testLabel)).toHaveClass('form-group__label')
+    expect(getByText(testNotes)).toHaveClass('e-text__inner__notes')
+  })
+  test('and the dialogMenu prop is also passed', () => {
+    const { getByText } = render(
+      <TextInputLabel label={testLabel} notes={testNotes} dialogMenuTip={dialogMenuTipTest} />
+    )
+    expect(getByText(dialogMenuTipTest)).toBeInTheDocument()
+  })
+})

package/dist/src/components/molecules/TextInput/tests/TextInputMessage.test.tsx

@@ -0,0 +1,27 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { TextInputMessage } from '../TextInputMessage'
+
+afterEach(cleanup)
+
+const testErrorMessage = 'Error message'
+
+describe('will return null', () => {
+  test('if no prop is passed', () => {
+    const { container } = render(<TextInputMessage />)
+    expect(container.firstChild).toBe(null)
+  })
+  test('if errorMessage is passed and validate is true', () => {
+    const { container } = render(<TextInputMessage errorMessage={testErrorMessage} />)
+    expect(container.firstChild).toBe(null)
+  })
+})
+
+describe('will return the component', () => {
+  test('if errorMessage is passed and validate is false', () => {
+    const { container, getByText } = render(<TextInputMessage errorMessage={testErrorMessage} validate={false} />)
+    expect(container.querySelector('img')).toBeInTheDocument()
+    expect(getByText(testErrorMessage)).toHaveClass('e-text__error-label')
+  })
+})

package/dist/src/components/molecules/TextInput/tests/TextInputTooltip.test.tsx

@@ -0,0 +1,22 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { TextInputTooltip } from '../TextInputTooltip'
+
+afterEach(cleanup)
+
+const testTooltip = 'Tooltip'
+
+describe('will return null', () => {
+  test('if no prop is passed', () => {
+    const { container } = render(<TextInputTooltip />)
+    expect(container.firstChild).toBe(null)
+  })
+})
+
+describe('will return the component', () => {
+  test('if the tooltip prop is passed', () => {
+    const { getByText } = render(<TextInputTooltip tooltip={testTooltip} />)
+    expect(getByText(testTooltip)).toHaveClass('tooltip-form')
+  })
+})

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

@@ -0,0 +1,40 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.tooltip-menu__item {
+  border-radius: $global-border-radius;
+  border: 1px solid get-color(neutral, neutral-4);
+  display: flex;
+  padding: 0.1875rem;
+  margin-right: 0.5rem;
+  transition: all 0.3s ease;
+  position: relative;
+  cursor: pointer;
+
+  span {
+    position: absolute;
+    color: get-color(neutral, neutral-2);
+    bottom: -1.25rem;
+    left: -0.25rem;
+    right: 0;
+    margin: 0 auto;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(1rem);
+    transition: all 0.3s ease;
+  }
+
+  &.--is-open {
+    background-color: get-color(primary, main-light-5);
+  }
+
+  &:hover {
+    background-color: get-color(primary, main-light-5);
+
+    span {
+      transform: translate(0);
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { type FC } from 'react'
+
+import { MenuItems, Tooltip } from '../../atoms'
+import { MenuCollapse24p } from '../../../../images/componentsSvg/MenuCollapse24p'
+import { type TooltipMenuProps } from './TooltipMenuProps.types'
+// import './TooltipMenu.scss'
+
+const TooltipMenu: FC<TooltipMenuProps> = ({ options, onClick, label }: TooltipMenuProps) => {
+  const menu = <MenuItems list={options}></MenuItems>
+
+  return (
+    <Tooltip content={menu} allowHTML={true} interactive={true} position='bottom' trigger='click'>
+      <div className='tooltip-menu__item' onClick={onClick}>
+        <MenuCollapse24p />
+        <span className={'actions-span sans-serif --extra-small'}>{label}</span>
+      </div>
+    </Tooltip>
+  )
+}
+
+export default TooltipMenu

package/dist/src/components/molecules/TooltipMenu/TooltipMenuProps.types.ts

@@ -0,0 +1,9 @@
+export interface TooltipMenuProps {
+  options: Array<{
+    content: string
+    image: React.FC
+    onClick: () => void
+  }>
+  onClick: () => void
+  label: string
+}

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

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

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

@@ -0,0 +1,12 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.trustworthy-websites {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  &__image {
+    margin: 1.5rem;
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { type TrustworthyWebsitesProps } from './TrustworthyWebsitesProps.types'
+// import './TrustworthyWebsites.scss'
+
+const TrustworthyWebsites: FC<TrustworthyWebsitesProps> = ({ images }) => {
+  return (
+    <div className='trustworthy-websites'>
+      {images.map((item) => (
+        <div className='trustworthy-websites__image' key={item.id}>
+          {item.src}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default TrustworthyWebsites

package/dist/src/components/molecules/TrustworthyWebsites/TrustworthyWebsitesProps.types.ts

@@ -0,0 +1,8 @@
+export interface TrustworthyWebsitesProps {
+  images: ImageStructure[]
+}
+
+export interface ImageStructure {
+  id: string
+  src: React.ReactNode
+}

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

@@ -0,0 +1,2 @@
+export { default as TrustworthyWebsites } from './TrustworthyWebsites'
+export { type TrustworthyWebsitesProps, type ImageStructure } from './TrustworthyWebsitesProps.types'

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

@@ -0,0 +1,108 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.type-modules-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  max-width: 400px;
+
+  @include laptop {
+    max-width: none;
+  }
+
+  .module-item {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    background-color: get-color(neutral, neutral-6);
+    padding: 24px;
+    box-shadow: 0px 2px 6px 0px #02374a3f;
+
+    @include laptop {
+      flex-direction: row;
+    }
+  }
+
+  .module-title {
+    font-family: $font-sans;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+    text-align: left;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+
+    @include laptop {
+      margin-top: 0;
+    }
+  }
+
+  .module-description {
+    font-family: $font-sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+    text-align: left;
+    margin-bottom: 1rem;
+  }
+
+  .module-image {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    @include laptop {
+      justify-content: flex-start;
+      width: 25%;
+      margin-right: 20px;
+    }
+  }
+
+  .module-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    @include laptop {
+      width: 65%;
+    }
+  }
+
+  .module-buttons {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+
+    @include laptop {
+      width: max-content;
+      gap: 0;
+    }
+
+    .e-button {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      margin-top: 0;
+      padding-top: 0.6rem;
+      padding-bottom: 0.6rem;
+      background: get-color(others, white);
+
+      @include laptop {
+        margin: 0 0.5rem;
+      }
+
+      &.download-icon {
+        &::before {
+          content: '';
+          width: 1rem;
+          height: 1rem;
+          background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjg2MjUgOC40NzA1NEMxMy4xMjIyIDguMjEwODUgMTMuMTIyMiA3Ljc4OTggMTIuODYyNSA3LjUzMDEyQzEyLjYwMjkgNy4yNzA1OSAxMi4xODIyIDcuMjcwNCAxMS45MjI1IDcuNTI5NjlMOC42NjYwMiAxMC43ODAzVjMuMzMzNjZDOC42NjYwMiAyLjk2NTQ3IDguMzY3NTQgMi42NjY5OSA3Ljk5OTM1IDIuNjY2OTlDNy42MzExNiAyLjY2Njk5IDcuMzMyNjggMi45NjU0NyA3LjMzMjY4IDMuMzMzNjZWMTAuNzgwM0w0LjA4NTggNy41Mjc2M0MzLjgyNDU3IDcuMjY1OTMgMy40MDA2IDcuMjY1NzQgMy4xMzkxNCA3LjUyNzJDMi44Nzc4NCA3Ljc4ODUgMi44Nzc4NCA4LjIxMjE1IDMuMTM5MTQgOC40NzM0NUw3LjI5MjI0IDEyLjYyNjZDNy42ODI3NyAxMy4wMTcxIDguMzE1OTMgMTMuMDE3MSA4LjcwNjQ2IDEyLjYyNjZMMTIuODYyNSA4LjQ3MDU0WiIgZmlsbD0iIzNENDA0MiIvPgo8L3N2Zz4K);
+          margin-right: 0.5rem;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+import React, { type FC } from 'react'
+
+import { Button, RichTextStrapi } from '../../atoms'
+import { type TypeModulesListProps } from './TypeModulesListProps.types'
+// import './TypeModulesList.scss'
+
+const TypeModulesList: FC<TypeModulesListProps> = ({ typeModules }) => {
+  return (
+    <div className='type-modules-list'>
+      {typeModules.map((module) => (
+        <div className='module-item' key={module.id}>
+          <div className='module-image'>{module.image}</div>
+          <div className='module-content'>
+            <h2 className='module-title'>{module.title}</h2>
+            <div className='module-description'>
+              <RichTextStrapi {...module.description} />
+            </div>
+            <div className='module-buttons'>
+              <Button
+                dataQa=''
+                color='secondary3'
+                givenClass='download-icon'
+                label={module.buttonPdfCta}
+                link={module.buttonPdfUrl ?? undefined}
+                isExternal
+                target='_blank'
+              />
+              <Button
+                dataQa=''
+                color='secondary3'
+                givenClass='download-icon'
+                label={module.buttonWordCta}
+                link={module.buttonWordUrl ?? undefined}
+                isExternal
+                target='_blank'
+              />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default TypeModulesList

package/dist/src/components/molecules/TypeModulesList/TypeModulesListProps.types.ts

@@ -0,0 +1,16 @@
+import { type RichTextStrapiProps } from '../../atoms'
+
+export interface TypeModulesListProps {
+  typeModules: TypeModule[]
+}
+
+export interface TypeModule {
+  id: string
+  title: string
+  description: RichTextStrapiProps
+  buttonPdfCta: string
+  buttonPdfUrl: string
+  buttonWordCta: string
+  buttonWordUrl: string
+  image: React.ReactNode
+}

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

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

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

@@ -0,0 +1,63 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.upload-ratafia-zone {
+  padding: 1rem;
+
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @include landscape-tablets {
+    max-width: 340px;
+  }
+  @include laptop {
+    max-width: 560px;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    flex: 1 0 0;
+    align-self: stretch;
+
+    padding: 3.5rem 2rem 1rem 2rem;
+
+    border-radius: 16px;
+    background: get-color(neutral, neutral-6);
+    color: get-color(neutral, neutral-3);
+
+    &__title {
+      margin-bottom: 2.5rem;
+    }
+    &__cta {
+      display: flex;
+      padding: 0.75rem 1rem;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
+
+      &__icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+    &__description {
+      margin-top: 3.5rem;
+      margin-bottom: 1rem;
+    }
+    &__service-terms {
+      a {
+        color: get-color(neutral, neutral-3);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &:hover .upload-ratafia-zone__content__title {
+    color: get-color(neutral, main);
+  }
+}

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

@@ -0,0 +1,40 @@
+import React, { type FC } from 'react'
+
+import { Button } from '../../atoms'
+import { type UploadRatafiaZoneProps } from './UploadRatafiaZoneProps.types'
+// import './UploadRatafiaZone.scss'
+
+const UploadRatafiaZone: FC<UploadRatafiaZoneProps> = ({
+  content,
+  handleDragOver,
+  handleDragOut,
+  handleDrop,
+  documentUploadFileDialog,
+  ctaDataQa
+}) => {
+  return (
+    <div className='upload-ratafia-zone' onDrop={handleDrop} onDragOver={handleDragOver} onDragLeave={handleDragOut}>
+      <div className='upload-ratafia-zone__content'>
+        <p className='sans-serif --medium upload-ratafia-zone__content__title'>{content.title}</p>
+        <Button
+          givenClass='upload-ratafia-zone__content__cta'
+          dataQa={ctaDataQa}
+          noLink
+          onClick={documentUploadFileDialog}
+          color='primary'
+          label={content.ctaLabel}
+        >
+          {content.ctaIcon != null && (
+            <div className={'upload-ratafia-zone__content__cta__icon'}>{content.ctaIcon}</div>
+          )}
+        </Button>
+        <p className='sans-serif --extra-small upload-ratafia-zone__content__description'>{content.description}</p>
+        <span className='sans-serif --extra-small upload-ratafia-zone__content__service-terms' itemProp='text'>
+          {content.serviceTerms}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default UploadRatafiaZone

package/dist/src/components/molecules/UploadRatafiaZone/UploadRatafiaZoneProps.types.ts

@@ -0,0 +1,19 @@
+import { type DragEventHandler } from 'react'
+
+export interface UploadRatafiaZoneProps {
+  content: UploadRatafiaZoneContent
+  handleDrop?: DragEventHandler<HTMLDivElement>
+  handleDragOver?: DragEventHandler<HTMLDivElement>
+  handleDragOut?: DragEventHandler<HTMLDivElement>
+  documentUploadFileDialog?: () => void
+  ctaDataQa: string
+}
+
+interface UploadRatafiaZoneContent {
+  title: string
+  description: string
+  serviceTerms: React.ReactNode
+  ctaLabel: string
+  ctaIcon?: React.ReactNode
+  ctaLink?: string
+}

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

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