@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

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

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

@@ -0,0 +1,84 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.dialog-menu-icon {
+  position: relative;
+  cursor: pointer;
+
+  &__image {
+    min-width: 1rem;
+    height: 1rem;
+    margin-left: 0.4rem;
+
+    @include laptop {
+      align-self: center;
+    }
+  }
+
+  &__message {
+    visibility: hidden;
+    background-color: get-color(neutral, neutral-1);
+    color: get-color(others, white);
+    padding: 1rem 1rem;
+    border-radius: 0.3rem;
+    font-size: 12px;
+    width: 19rem;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    position: absolute;
+    z-index: 1;
+    top: 1.5rem;
+    right: -5rem;
+
+    @media (max-width: #{$xs}) {
+      width: 15rem;
+    }
+
+    @include portrait-tablets {
+      right: -4rem;
+    }
+
+    @include landscape-tablets {
+      width: 19rem;
+    }
+
+    p {
+      margin-right: 0.5rem;
+    }
+  }
+
+  &--visible .dialog-menu-icon__message {
+    visibility: visible;
+  }
+
+  &--hidden .dialog-menu-icon__message {
+    visibility: hidden;
+  }
+
+  &--visible-on-hover:hover .dialog-menu-icon__message {
+    visibility: visible;
+  }
+
+  &::before {
+    content: '';
+    visibility: hidden;
+    position: absolute;
+    width: 0;
+    height: 0;
+    box-shadow: 0 0.25rem 0.5rem -0.5rem;
+    border-bottom: 0.5rem solid get-color(neutral, neutral-1);
+    -webkit-transform: translate(-100%, 0);
+    transform: translate(-100%, 0);
+    top: 1.1rem;
+    right: -1rem;
+    border-left: 0.5rem solid transparent;
+    border-right: 0.5rem solid transparent;
+    z-index: 20;
+  }
+
+  &--visible::before,
+  &--visible-on-hover:hover::before {
+    visibility: visible;
+  }
+}

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

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { type FC, useCallback, useEffect, useRef, useState } from 'react'
+import classNames from 'classnames'
+
+import { type DialogMenuIconProps } from './DialogMenuIconProps.types'
+import cross from '../../../../images/svg/icon-clear-24-px.svg'
+import shape from '../../../../images/svg/shape.svg'
+// import './DialogMenuIcon.scss'
+
+const DialogMenuIcon: FC<DialogMenuIconProps> = ({ onClose, onOpen, content }) => {
+  const [isVisible, setIsVisible] = useState(false)
+  const [onHoverVisible, setOnHoverVisible] = useState(true)
+  const iconContainer = useRef<HTMLInputElement>(null)
+  const messageContainer = useRef<HTMLInputElement>(null)
+
+  const classnames = classNames('dialog-menu-icon', {
+    'dialog-menu-icon--visible': isVisible,
+    'dialog-menu-icon--hidden': !isVisible,
+    'dialog-menu-icon--visible-on-hover': onHoverVisible
+  })
+
+  const handleClickOutside = useCallback(
+    (event) => {
+      const clickOutOfSelect = iconContainer.current && !iconContainer.current.contains(event.target)
+      if (clickOutOfSelect && onClose != null) {
+        onClose()
+      }
+    },
+    [iconContainer, onClose]
+  )
+
+  useEffect(() => {
+    if (iconContainer.current) {
+      iconContainer.current.addEventListener('mouseover', () => {
+        setOnHoverVisible(true)
+      })
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [handleClickOutside, onClose])
+
+  const onHandleChange = (visible = false, hoverVisible = false): void => {
+    setIsVisible(visible)
+    setOnHoverVisible(hoverVisible)
+    if (visible && onOpen != null) {
+      onOpen()
+    } else if (!visible && onClose != null) {
+      onClose()
+    }
+  }
+
+  return (
+    <div className={classnames} ref={iconContainer}>
+      <img
+        className='dialog-menu-icon__image'
+        onClick={() => {
+          onHandleChange(true, false)
+        }}
+        src={shape}
+        alt='shape'
+      />
+      <div className='dialog-menu-icon__message' ref={messageContainer}>
+        <p>{content}</p>
+        <img
+          onClick={() => {
+            onHandleChange()
+          }}
+          src={cross}
+          alt=''
+        ></img>
+      </div>
+    </div>
+  )
+}
+
+export default DialogMenuIcon

package/dist/src/components/atoms/DialogMenuIcon/DialogMenuIconProps.types.ts

@@ -0,0 +1,6 @@
+export interface DialogMenuIconProps {
+  title?: string
+  content?: string
+  onClose?: () => void
+  onOpen?: () => void
+}

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

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

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

@@ -0,0 +1,45 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.disclaimer {
+  padding: 1rem;
+
+  @include laptop {
+    padding: 1rem 0;
+  }
+
+  &__wrapper {
+    background-color: get-color(neutral, main);
+    color: get-color(neutral, neutral-4);
+
+    .standard {
+      color: get-color(neutral, neutral-4);
+      text-decoration: underline;
+    }
+  }
+}
+
+.grey-color {
+  color: get-color(neutral, neutral-1);
+  background-color: get-color(neutral, neutral-4);
+}
+
+.disclaimer__copy {
+  margin-bottom: 0.5rem;
+}
+
+.desktop_view {
+  display: block;
+
+  @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+    display: none;
+  }
+}
+
+.mobile_view {
+  display: none;
+
+  @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+    display: block;
+  }
+}

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

@@ -0,0 +1,36 @@
+import React, { type FC } from 'react'
+
+import { type DisclaimerProps } from './DisclaimerProps.types'
+// import './Disclaimer.scss'
+
+const Disclaimer: FC<DisclaimerProps> = ({
+  givenClass,
+  text,
+  disclaimerLinks = false,
+  complexCopyRight,
+  complexCopyRightMobile,
+  simpleCopyRight
+}) => {
+  const showDisclaimerLinks = disclaimerLinks && <React.Fragment>{complexCopyRight}</React.Fragment>
+
+  const showDisclaimerLinkMobile = disclaimerLinks && (
+    <React.Fragment>
+      <div className='disclaimer__copy'>
+        {complexCopyRightMobile}
+        <p>{simpleCopyRight}</p>
+      </div>
+    </React.Fragment>
+  )
+
+  return (
+    <div className={`disclaimer__wrapper ${givenClass}`}>
+      <div className={'wrapper disclaimer sans-serif --extra-small'}>
+        <div className='disclaimer__copy'>{text}</div>
+        {disclaimerLinks ? <p className='desktop_view'>{showDisclaimerLinks}</p> : <p>{simpleCopyRight}</p>}
+        {disclaimerLinks && <div className='disclaimer__copy mobile_view'>{showDisclaimerLinkMobile}</div>}
+      </div>
+    </div>
+  )
+}
+
+export default Disclaimer

package/dist/src/components/atoms/Disclaimer/DisclaimerProps.types.ts

@@ -0,0 +1,10 @@
+export interface DisclaimerProps {
+  text?: string
+  disclaimerLinks?: boolean
+  linksUrl?: string
+  givenClass?: string
+  siteUrl?: string
+  simpleCopyRight?: string
+  complexCopyRight?: React.ReactNode
+  complexCopyRightMobile?: React.ReactNode
+}

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

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

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

@@ -0,0 +1,149 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.disclaimer-ratafia {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+
+  gap: 1rem;
+
+  &__text-desktop {
+    display: none;
+    @include portrait-tablets {
+      display: block;
+    }
+  }
+
+  &__text-mobile {
+    width: 100%;
+    @include portrait-tablets {
+      display: none;
+    }
+  }
+
+  &__text {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+
+    padding: 0.5rem;
+    gap: 0.25rem;
+
+    border-radius: 4px;
+    background: get-color(neutral, neutral-6);
+
+    @include portrait-tablets {
+      margin-bottom: 1rem;
+    }
+
+    &__icon {
+      width: 14px;
+      margin-right: 5px;
+    }
+    &__arrow {
+      position: absolute;
+      top: 10px;
+      right: 6px;
+      fill: get-color(neutral, neutral-2);
+      svg {
+        display: block;
+        width: 16px;
+        height: 16px;
+      }
+    }
+    &__text {
+      display: flex;
+      width: 100%;
+      position: relative;
+      color: get-color(neutral, neutral-2);
+      border: none;
+      padding: 8px;
+      border-radius: 4px;
+      @include portrait-tablets {
+        margin-bottom: 0;
+        padding: 0;
+      }
+    }
+  }
+  &__copyright,
+  &__legal-advice {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+
+    &__text {
+      color: get-color(neutral, neutral-2);
+      a {
+        color: get-color(neutral, neutral-2);
+      }
+    }
+  }
+
+  &__legal-advice {
+    margin-bottom: 16px;
+  }
+
+  &__disclaimer-fixed {
+    border-radius: 5px 5px 0 0;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    background: get-color(others, white);
+    border-top: 1px solid get-color(neutral, neutral-5);
+    &:after {
+      content: '';
+      position: absolute;
+      top: 8px;
+      left: calc(50% - 17px);
+      border: 2px solid get-color(neutral, neutral-3);
+      border-radius: 6px;
+      width: 34px;
+    }
+
+    &__title {
+      padding-top: 2rem;
+      font-size: 1.15rem;
+      font-weight: 700;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid get-color(neutral, neutral-4);
+      color: get-color(neutral, neutral-1);
+    }
+    &__subTitle {
+      padding-top: 1.5rem;
+      font-size: 0.9rem;
+      color: get-color(neutral, neutral-2);
+      padding-bottom: 1.5rem;
+    }
+    &__text {
+      padding-bottom: 1.5rem;
+      p {
+        font-size: 12px;
+        color: get-color(neutral, neutral-2);
+      }
+      a {
+        color: get-color(neutral, neutral-2);
+      }
+    }
+    &__cta {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  &__disclaimer-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: get-color(neutral, neutral-2);
+    opacity: 30%;
+  }
+}

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

@@ -0,0 +1,88 @@
+import React from 'react'
+
+import { Button } from '../Button'
+import { ChevronRight } from '../../../../images/componentsSvg/ChevronRight'
+import { type DisclaimerRatafiaProps } from './DisclaimerRatafiaProps'
+// import './DisclaimerRatafia.scss'
+
+export const DisclaimerRatafia: React.FC<DisclaimerRatafiaProps> = ({
+  icon,
+  text,
+  ctaTextShowDisclaimer,
+  ctaTextCloseDisclaimer,
+  legalAdviceText,
+  copyrightText
+}) => {
+  const [disclaimer, toggleDisclaimer] = React.useState(false)
+
+  const handleShowDisclaimer = (): void => {
+    toggleDisclaimer(true)
+    if (ctaTextShowDisclaimer.onClick != null) ctaTextShowDisclaimer.onClick()
+  }
+
+  const handleCloseDisclaimer = (): void => {
+    toggleDisclaimer(false)
+    if (ctaTextCloseDisclaimer.onClick != null) ctaTextCloseDisclaimer.onClick()
+  }
+
+  const existLegalAdviceText = Boolean(legalAdviceText)
+
+  return (
+    <div className='disclaimer-ratafia'>
+      <div className='disclaimer-ratafia__text-desktop'>
+        <div className='disclaimer-ratafia__text'>
+          <div className='disclaimer-ratafia__text__icon'>{icon}</div>
+          <p className='sans-serif --small disclaimer-ratafia__text__text'>{text}</p>
+        </div>
+        {existLegalAdviceText && (
+          <div className='disclaimer-ratafia__legal-advice'>
+            <span className='sans-serif --extra-small disclaimer-ratafia__copyright__text'>{legalAdviceText}</span>
+          </div>
+        )}
+        <div className='disclaimer-ratafia__copyright'>
+          <span className='sans-serif --extra-small disclaimer-ratafia__copyright__text'>{copyrightText}</span>
+        </div>
+      </div>
+
+      <div className='disclaimer-ratafia__text-mobile'>
+        <div className='disclaimer-ratafia__text-mobile-text'>
+          <button
+            data-qa={ctaTextShowDisclaimer.dataQa}
+            className='sans-serif --small disclaimer-ratafia__text__text'
+            onClick={handleShowDisclaimer}
+          >
+            <div className='disclaimer-ratafia__text__icon'>{icon}</div>
+            {ctaTextShowDisclaimer.text}
+            <div className='disclaimer-ratafia__text__arrow'>
+              <ChevronRight />
+            </div>
+          </button>
+        </div>
+
+        {disclaimer && (
+          <>
+            <div className='disclaimer-ratafia__disclaimer-background' />
+            <div className='disclaimer-ratafia__disclaimer-fixed'>
+              <p className='disclaimer-ratafia__disclaimer-fixed__title'>{ctaTextShowDisclaimer.text}</p>
+              <p className='sans-serif --small disclaimer-ratafia__disclaimer-fixed__subTitle'>{text}</p>
+              {existLegalAdviceText && (
+                <div className='sans-serif --small disclaimer-ratafia__disclaimer-fixed__text'>{legalAdviceText}</div>
+              )}
+              <div className='sans-serif --small disclaimer-ratafia__disclaimer-fixed__text'>{copyrightText}</div>
+              <Button
+                color='primary'
+                label={ctaTextCloseDisclaimer.text}
+                givenClass='disclaimer-ratafia__disclaimer-fixed__cta'
+                onClick={handleCloseDisclaimer}
+                noLink
+                dataQa={ctaTextCloseDisclaimer.dataQa}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DisclaimerRatafia

package/dist/src/components/atoms/DisclaimerRatafia/DisclaimerRatafiaProps.ts

@@ -0,0 +1,17 @@
+export interface DisclaimerRatafiaProps {
+  icon?: React.ReactNode
+  text: string
+  legalAdviceText?: React.ReactNode
+  copyrightText: React.ReactNode
+  ctaIcon?: React.ReactNode
+  ctaTextShowDisclaimer: {
+    text: string
+    dataQa: string
+    onClick: () => void
+  }
+  ctaTextCloseDisclaimer: {
+    text: string
+    dataQa: string
+    onClick: () => void
+  }
+}

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

@@ -0,0 +1,2 @@
+export { default as DisclaimerKeyFactsResultRatafia } from './DisclaimerRatafia'
+export { type DisclaimerRatafiaProps } from './DisclaimerRatafiaProps'

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

@@ -0,0 +1,20 @@
+@import '../../../globalStyles/variables.scss';
+
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+
+  &__line {
+    width: 45%;
+    height: 0px;
+    border-bottom: 1px solid get-color(neutral, neutral-4);
+  }
+
+  &__word,
+  &__image {
+    width: fit-content;
+    text-align: center;
+    margin: 0 0.75rem;
+  }
+}

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

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react'
+
+import { type DividerProps } from './DividerProps.types'
+// import './Divider.scss'
+
+const Divider: FC<DividerProps> = ({ containerClass, lineClass, text, image }) => {
+  if (text?.length === 0 || image?.length === 0) return null
+
+  return (
+    <div className={`divider ${containerClass ?? ''}`}>
+      <div className={`divider__line ${lineClass ?? ''}`}></div>
+      {text !== undefined && <p className='divider__word'>{text}</p>}
+      {image !== undefined && <img className='divider__image' src={image} alt='' role='img'></img>}
+      <div className={`divider__line ${lineClass ?? ''}`}></div>
+    </div>
+  )
+}
+
+export default Divider

package/dist/src/components/atoms/Divider/DividerProps.types.ts

@@ -0,0 +1,6 @@
+export interface DividerProps {
+  text?: string
+  image?: any
+  containerClass?: string
+  lineClass?: string
+}

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

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

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

@@ -0,0 +1,91 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+html[data-theme='lawdistrict'] {
+  .document-status {
+    &.--in-progress {
+      background-color: get-color(secondary, main-light-4);
+      border-color: get-color(secondary, main-dark-1);
+      color: get-color(secondary, main-dark-2);
+
+      svg {
+        g > g {
+          fill: get-color(secondary, main-dark-2);
+        }
+      }
+    }
+
+    &.--is-new {
+      background-color: get-color(secondary, main-dark-2);
+      border-color: get-color(secondary);
+      color: get-color(secondary, main-light-4);
+
+      .icon {
+        margin-right: 1.4rem;
+      }
+    }
+  }
+}
+
+.document-status {
+  font-family: $font-sans;
+  border-radius: $global-border-radius;
+  border: 1px solid;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  align-self: center;
+  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
+  margin-right: 0.5rem;
+  width: 7.36rem;
+
+  @include laptop {
+    align-self: flex-start;
+  }
+
+  @include landscape-tablets {
+    position: inherit;
+  }
+
+  span {
+    font-weight: bold;
+  }
+
+  .icon {
+    margin-right: 0.25rem;
+  }
+
+  &.--is-completed {
+    background-color: get-color(primary, main-light-5);
+    border-color: get-color(primary, main-light-3);
+    color: get-color(primary);
+
+    svg {
+      path {
+        fill: get-color(primary);
+      }
+    }
+  }
+
+  &.--in-progress {
+    background-color: get-color(neutral, neutral-5);
+    border-color: get-color(neutral, neutral-3);
+    color: get-color(neutral, neutral-1);
+
+    svg {
+      g > g {
+        fill: get-color(neutral, neutral-1);
+      }
+    }
+  }
+
+  &.--is-new {
+    background-color: get-color(primary, main-light-1);
+    border-color: get-color(primary);
+    color: get-color(secondary, main-light-4);
+
+    .icon {
+      margin-right: 1.4rem;
+    }
+  }
+}