@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

@@ -0,0 +1,66 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.article {
+  display: flex;
+  flex-flow: row wrap;
+  flex: 1 1 0;
+  border-radius: $global-border-radius;
+  box-shadow: $box-shadow-small;
+  max-width: $md;
+  margin: 1rem 0;
+
+  @include laptop {
+    margin: 0 0.5rem;
+  }
+
+  .image {
+    object-fit: cover;
+    object-position: 25%;
+    height: 13em;
+    width: 100%;
+
+    @include landscape-tablets {
+      width: 35%;
+      height: auto;
+    }
+  }
+
+  .information {
+    width: 100%;
+    padding: 1rem 1.5rem 0;
+    text-align: left;
+    max-width: 100%;
+
+    @include landscape-tablets {
+      width: 65%;
+      height: 100%;
+    }
+
+    .title {
+      font-weight: bold;
+    }
+
+    .summary {
+      color: #6d7275;
+      margin: 0.5rem 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 5;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      @include landscape-tablets {
+        margin: 0;
+        padding: 0.5rem 0;
+      }
+    }
+
+    .e-button {
+      margin: 2.5rem 0 1rem -1rem;
+      @include laptop {
+        margin-top: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import React, { type FC } from 'react'
+
+import { type ArticleProps } from './ArticleProps.types'
+import { Button } from '../../atoms'
+// import './Article.scss'
+
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) => {
+  return (
+    <div className='article'>
+      <img src={imageUrl} className='image' loading='lazy' alt={title} />
+      <div className='information'>
+        <a href={articleUrl} target='_blank' rel='noreferrer'>
+          <p className='title sans-serif --big'>{title} </p>
+        </a>
+        <div className='summary'>{summary}</div>
+        <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
+      </div>
+    </div>
+  )
+}
+
+export default Article

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -0,0 +1,7 @@
+export interface ArticleProps {
+  imageUrl: string
+  title: string
+  articleUrl: string
+  summary: string
+  id: string
+}

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

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

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

@@ -0,0 +1,26 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.base-box-group {
+  display: block;
+  .base-box {
+    &:first-child:not(:last-child) {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &:not(:last-child):not(:first-child) {
+      border-top: none;
+      border-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+    }
+  }
+  &--padded {
+    .base-box {
+      padding: 2rem;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+import classNames from 'classnames'
+
+import { BaseBox } from '../../atoms'
+import { type BaseBoxListProps } from './BaseBoxListProps.types'
+// import './BaseBoxList.scss'
+
+const BaseBoxList: FC<BaseBoxListProps> = ({ list, padded, children, givenClass = '' }) => {
+  if (children === undefined && list?.length === 0) return null
+
+  const classes = classNames(`base-box-group ${givenClass}`, {
+    'base-box-group--padded': padded
+  })
+
+  return <div className={classes}>{children ?? list?.map((box, index) => <BaseBox key={index} {...box} />)}</div>
+}
+
+export default BaseBoxList

package/dist/src/components/molecules/BaseBoxList/BaseBoxListProps.types.ts

@@ -0,0 +1,6 @@
+export interface BaseBoxListProps {
+  givenClass?: string
+  padded?: boolean
+  list?: any[]
+  children?: React.ReactNode
+}

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

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

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

@@ -0,0 +1,16 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.benefit-ratafia-card-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+
+  gap: 1rem;
+
+  @include laptop {
+    flex-direction: row;
+    gap: 2rem;
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { BenefitRatafiaCard } from '../../atoms'
+import { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types'
+// import './BenefitRatafiaCardList.scss'
+
+const BenefitRatafiaCardList: FC<BenefitRatafiaCardListProps> = ({ benefits = [] }) => {
+  if (benefits.length === 0) return null
+
+  return (
+    <div className='benefit-ratafia-card-list'>
+      {benefits.map((benefit) => (
+        <BenefitRatafiaCard key={benefit.id} {...benefit} />
+      ))}
+    </div>
+  )
+}
+export default BenefitRatafiaCardList

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.ts

@@ -0,0 +1,5 @@
+import { type BenefitRatafiaCardProps } from '../../atoms'
+
+export interface BenefitRatafiaCardListProps {
+  benefits: BenefitRatafiaCardProps[]
+}

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

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

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

@@ -0,0 +1,49 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.bottom-fixed-bar {
+  padding: 0 1.5rem 1rem;
+  display: flex;
+  z-index: 3;
+  bottom: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: black;
+  color: get-color(others, white);
+
+  @include portrait-tablets {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+  }
+
+  &__text {
+    margin-top: 1rem;
+    margin-bottom: 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);
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  &__button-container > .e-button {
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,20 @@
+import React, { type FC } from 'react'
+
+import { Button, RichTextInner } from '../../atoms'
+import { type BottomFixedBarProps } from './BottomFixedBarProps.types'
+// import './BottomFixedBar.scss'
+
+const BottomFixedBar: FC<BottomFixedBarProps> = ({ text, button }) => {
+  if (text === undefined || button === undefined) return null
+
+  return (
+    <div className='bottom-fixed-bar'>
+      <RichTextInner customClass='bottom-fixed-bar__text sans-serif --extra-small'>{text}</RichTextInner>
+      <div className='bottom-fixed-bar__button-container'>
+        <Button noLink color='primary3' {...button} />
+      </div>
+    </div>
+  )
+}
+
+export default BottomFixedBar

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBarProps.types.ts

@@ -0,0 +1,6 @@
+import { type ButtonProps } from '../../atoms'
+
+export interface BottomFixedBarProps {
+  text: string | React.ReactNode
+  button: ButtonProps
+}

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

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

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

@@ -1,5 +1,4 @@
 import { type FC } from 'react';
 import { type BottomOverlayProps } from './BottomOverlayProps.types';
-import './BottomOverlay.scss';
 declare const BottomOverlay: FC<BottomOverlayProps>;
 export default BottomOverlay;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
-import './BottomOverlay.scss';
+// import './BottomOverlay.scss'
 const BottomOverlay = ({ givenClass, header, body, open = false, onClose, footer }) => {
     const [scrollingDown, setScrollingDown] = useState(false);
     const scrollingShadow = scrollingDown ? 'overlay__delimiter__scrolling' : '';

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

@@ -0,0 +1,93 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.bottom-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  visibility: hidden;
+
+  &.show {
+    visibility: visible;
+
+    .bottom-overlay__background {
+      opacity: 0.8;
+    }
+
+    .bottom-overlay__nav {
+      transform: translateY(0);
+    }
+  }
+
+  &__background {
+    background-color: get-color(primary, main-dark-2);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity ease-out 0.3s;
+  }
+
+  &__nav {
+    background: get-color(others, white);
+    border-top-left-radius: $global-border-radius;
+    border-top-right-radius: $global-border-radius;
+    bottom: 0;
+    position: absolute;
+    transform: translateY(100%);
+    transition: transform 0.5s ease-in-out;
+    width: 100%;
+    z-index: 2;
+
+    @include landscape-tablets {
+      display: block;
+      transform: translateY(0);
+    }
+
+    .overlay__delimiter {
+      padding: 0.5rem 0 1.5rem;
+
+      &:after {
+        content: '';
+        background: get-color(neutral, neutral-3);
+        border-radius: $global-border-radius;
+        display: block;
+        height: 0.25rem;
+        margin: 0 auto;
+        width: 7.5rem;
+      }
+
+      &.overlay__delimiter__scrolling {
+        box-shadow: $box-shadow-small;
+        position: relative;
+        z-index: 1;
+      }
+
+      @include landscape-tablets {
+        display: none;
+      }
+    }
+
+    .overlay__scrollable-section {
+      position: sticky;
+      max-height: 21rem;
+      min-height: 8.5rem;
+      display: flex;
+      overflow-y: scroll;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      width: 100%;
+    }
+
+    .overlay__footer {
+      border-top: solid 1px get-color(neutral, neutral-4);
+      padding: 1.5rem 1.5rem 2rem;
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+import React, { type FC, useEffect, useRef, useState } from 'react'
+import { useSwipeable } from 'react-swipeable'
+
+import { type BottomOverlayProps } from './BottomOverlayProps.types'
+// import './BottomOverlay.scss'
+
+const BottomOverlay: FC<BottomOverlayProps> = ({ givenClass, header, body, open = false, onClose, footer }) => {
+  const [scrollingDown, setScrollingDown] = useState<boolean>(false)
+  const scrollingShadow = scrollingDown ? 'overlay__delimiter__scrolling' : ''
+  const overlayBackground = useRef<HTMLDivElement | null>(null)
+  const overlayMessage = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (open) {
+      const backgroundElement = overlayBackground.current as HTMLElement
+      backgroundElement.addEventListener('mousedown', handleCloseModal)
+      return () => {
+        backgroundElement.removeEventListener('mousedown', handleCloseModal)
+      }
+    }
+  }, [open])
+
+  const handleCloseModal = (event: MouseEvent): void => {
+    if (onClose != null) onClose()
+  }
+
+  const handleScroll: React.UIEventHandler<HTMLDivElement> = (event) => {
+    setScrollingDown(true)
+
+    const targetElement = event.target as HTMLElement
+    if (targetElement?.scrollTop === 0) {
+      setScrollingDown(false)
+    }
+  }
+
+  const swipeableConfig = {
+    trackMouse: true
+  }
+  const handlers = useSwipeable({
+    onSwipedDown: (eventData) => {
+      swipeEventHandler(eventData)
+    },
+    ...swipeableConfig
+  })
+
+  interface SwipeData {
+    initial: number[]
+  }
+
+  const swipeEventHandler = (data: SwipeData): void => {
+    const messageElement = overlayMessage.current as HTMLElement
+    const mouseYPosition = data.initial
+    if (mouseYPosition[1] < messageElement.offsetTop) {
+      if (onClose != null) onClose()
+    }
+  }
+
+  return (
+    <div className={`bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`} {...handlers}>
+      <div ref={overlayBackground} className='bottom-overlay__background'></div>
+      <nav ref={overlayMessage} className='bottom-overlay__nav'>
+        <div className={`overlay__delimiter ${scrollingShadow}`} />
+        {header}
+        <div className='overlay__scrollable-section' onScroll={handleScroll}>
+          {body}
+        </div>
+        {footer !== undefined && <div className='overlay__footer'>{footer}</div>}
+      </nav>
+    </div>
+  )
+}
+
+export default BottomOverlay

package/dist/src/components/molecules/BottomOverlay/BottomOverlayProps.types.ts

@@ -0,0 +1,8 @@
+export interface BottomOverlayProps {
+  givenClass?: string
+  header?: any
+  body?: any
+  footer?: React.ReactNode
+  open?: boolean
+  onClose?: () => void
+}

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

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

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

@@ -0,0 +1,129 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.box--form {
+  background: get-color(others, white);
+  border-radius: $global-border-radius;
+  box-shadow: $box-shadow-container;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+
+  @include desktop {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .box--form__title {
+    color: get-color(neutral, neutral-1);
+    font-family: $font-sans;
+    font-weight: bold;
+    width: 95%;
+
+    @media (max-width: 369px) {
+      font-size: 1rem;
+    }
+  }
+
+  .box--form__close {
+    display: flex;
+    line-height: 1rem;
+    color: get-color(neutral, neutral-1);
+    font-size: 35px;
+    font-weight: lighter;
+    justify-content: flex-end;
+
+    &:hover,
+    &:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+}
+
+.box--form__header {
+  display: flex;
+  border-bottom: solid 1px get-color(neutral, neutral-4);
+  padding: 1.5rem 0 1rem;
+}
+
+.box--form__main {
+  padding: 2rem 0;
+
+  @media (max-width: 369px) {
+    padding: 0.5rem 0;
+  }
+}
+
+.box--form__body:not(:last-child) {
+  padding-bottom: 1.5rem;
+
+  @media (max-width: 369px) {
+    padding-bottom: 0.5rem;
+  }
+}
+
+.box--form__body__footer {
+  text-align: center;
+}
+
+.box--form__button--main {
+  margin-bottom: 1rem;
+}
+
+.box--form__button-annotation {
+  color: get-color(neutral, neutral-1);
+}
+
+.box--form__footer {
+  align-items: center;
+  border-top: solid 1px get-color(neutral, neutral-4);
+  display: flex;
+  justify-content: space-between;
+  padding: 1.5rem 0 1rem 0;
+
+  @include portrait-tablets {
+    .e-button {
+      white-space: nowrap;
+    }
+  }
+
+  @media (max-width: 369px) {
+    padding: 0.5rem 0 1rem 0;
+  }
+}
+
+.box--form__footer__text {
+  margin-right: 5px;
+  width: 60%;
+
+  @include portrait-tablets {
+    white-space: nowrap;
+  }
+}
+
+.box--form__link {
+  color: var(--primary-main);
+}
+
+.body-container {
+  display: flex;
+  flex-direction: column;
+
+  .label {
+    font-weight: 900;
+    margin-top: 10px;
+  }
+
+  .input {
+    margin-top: 10px;
+  }
+
+  .input.password {
+    margin-bottom: 15px;
+  }
+
+  .body-button {
+    margin-top: 90px;
+  }
+}

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

@@ -0,0 +1,57 @@
+/* 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 BoxFormProps } from './BoxFormProps.types'
+// import './BoxForm.scss'
+
+const BoxForm: FC<BoxFormProps> = ({
+  title,
+  body,
+  footer,
+  closeInsideModal,
+  closeModalAndReloadPage,
+  hideHeader = false
+}) => {
+  const [buttonProps] = React.useState<ButtonProps | undefined>(() => {
+    if (footer == null) return undefined
+    const { onClick, link } = footer.button
+    return {
+      ...footer.button,
+      color: 'secondary',
+      size: 'S',
+      ...(onClick != null ? { onClick, noLink: true } : { link })
+    }
+  })
+
+  return (
+    <div className='box--form'>
+      {!hideHeader && (
+        <div className='box--form__header'>
+          {closeInsideModal === true ? (
+            <>
+              <h3 className='box--form__title sans-serif --big'>{title}</h3>
+              <div className='box--form__close' onClick={closeModalAndReloadPage}>
+                &times;
+              </div>
+            </>
+          ) : (
+            <h3 className='box--form__title sans-serif --big'>{title}</h3>
+          )}
+        </div>
+      )}
+      <div className='box--form__main'>
+        <div className='box--form__body'>{body}</div>
+        {footer !== undefined && (
+          <div className='box--form__footer'>
+            <span className='box--form__footer__text'>{footer.text}</span>
+            {buttonProps !== undefined && <Button {...buttonProps} />}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default BoxForm

package/dist/src/components/molecules/BoxForm/BoxFormProps.types.ts

@@ -0,0 +1,13 @@
+import { type ButtonProps } from '../../atoms'
+
+export interface BoxFormProps {
+  title: string
+  body: any
+  footer?: {
+    text: string
+    button: ButtonProps
+  }
+  closeInsideModal?: boolean
+  closeModalAndReloadPage?: () => void
+  hideHeader?: boolean
+}