@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+import classNames from 'classnames'
+
+import { type TopBarProps } from './TopBarProps.types'
+// import './TopBar.scss'
+
+const TopBar: FC<TopBarProps> = ({ hide, children }) => {
+  if (children === undefined) return null
+
+  const classnames = classNames({
+    '--is-hidden': hide
+  })
+
+  return (
+    <div className={`top-bar-wrapper ${classnames}`}>
+      <div className={'top-bar'}>
+        <div className={'top-bar-content'}>{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export default TopBar

package/dist/src/components/atoms/TopBar/TopBarProps.types.ts

@@ -0,0 +1,4 @@
+export interface TopBarProps {
+  hide?: boolean
+  children?: React.ReactNode
+}

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

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

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

@@ -0,0 +1,48 @@
+@import '../../../globalStyles/variables.scss';
+
+.top-bar-mobile {
+  background-color: get-color(neutral, neutral-5);
+  display: flex;
+  padding: 8px 16px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: $box-shadow-container;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: -0.3px;
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+
+  &.fade-In {
+    visibility: visible;
+    opacity: 1;
+    transition:
+      visibility 0s linear 0s,
+      opacity 300ms;
+  }
+
+  &.fade-Out {
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      visibility 0s linear 300ms,
+      opacity 300ms;
+  }
+
+  > b {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    a {
+      display: contents;
+    }
+
+    img {
+      margin-right: 8px;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react'
+
+// import './TopBarMobile.scss'
+
+interface TopBarMobileProps {
+  children: React.ReactNode
+  isVisible: boolean
+}
+
+export const TopBarMobile: React.FC<TopBarMobileProps> = ({
+  children,
+  isVisible = false
+}): React.ReactElement | null => {
+  const [isSSR, setIsSSR] = useState(false)
+  useEffect(() => {
+    setIsSSR(true)
+  }, [])
+  return isSSR ? <div className={`top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`}>{children}</div> : null
+}

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

@@ -0,0 +1 @@
+export { TopBarMobile } from './TopBarMobile'

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

@@ -0,0 +1,11 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries';
+
+.trustpilot {
+  margin: auto;
+  padding: 0 1rem;
+
+  @include landscape-tablets {
+    margin: 3rem auto;
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { type FC } from 'react'
+import { type TrustPilotProps } from './TrustPilotProps.types'
+
+// import './TrustPilot.scss'
+
+const Trustpilot: FC<TrustPilotProps> = ({ children }) => {
+  return <div className='trustpilot'>{children}</div>
+}
+
+export default Trustpilot

package/dist/src/components/atoms/TrustPilot/TrustPilotProps.types.ts

@@ -0,0 +1,3 @@
+export interface TrustPilotProps {
+  children: React.ReactNode
+}

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { type VideoProps } from './VideoProps.types'
+
+const Video = ({
+  videoSrcURL,
+  videoMimeType = 'video/webm',
+  title = '',
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  track
+}: VideoProps): React.JSX.Element | null => {
+  if (!videoSrcURL) return null
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    <video data-testid='video' title={title} controls={controls} autoPlay={autoPlay} loop={loop} muted={muted}>
+      <source src={videoSrcURL} type={videoMimeType} />
+      {track && <track src={track.src} kind={track.kind} srcLang={track.srclang} label={track.label} />}
+      Your browser does not support the video tag.
+    </video>
+  )
+}
+
+export default Video

package/dist/src/components/atoms/Video/VideoProps.types.ts

@@ -0,0 +1,17 @@
+export interface VideoProps {
+  videoSrcURL: string
+  videoMimeType?: string
+  title?: string
+  controls?: boolean
+  autoPlay?: boolean
+  loop?: boolean
+  muted?: boolean
+  width?: string
+  height?: string
+  track?: {
+    src: string
+    kind: string
+    srclang: string
+    label: string
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.whyLawDistrictItems {
+  max-width: $md;
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  flex-flow: row wrap;
+  padding: 0 0 1.5rem 0;
+
+  @include landscape-tablets {
+    justify-content: space-between;
+    padding: 0 1rem;
+  }
+
+  &__item {
+    max-width: 100%;
+    color: get-color(neutral, neutral-2);
+    margin-bottom: 1rem;
+    padding: 0 1rem;
+
+    @include landscape-tablets {
+      padding: 2rem 0;
+      max-width: calc(100% / 3 - 1.5rem);
+    }
+
+    &:first-child {
+      margin-top: 2rem;
+
+      @include landscape-tablets {
+        margin-top: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { type WhyLawDistrictItemsProps } from './WhyLawDistrictItemsProps.types'
+
+// import './WhyLawDistrictItems.scss'
+
+export const WhyLawDistrictItems: React.FC<WhyLawDistrictItemsProps> = ({ items }) => {
+  if (items.length === 0) return null
+
+  return (
+    <ul className={'whyLawDistrictItems'}>
+      {items.map((item) => (
+        <li className={'whyLawDistrictItems__item'} key={item.id}>
+          {item.reasons}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default WhyLawDistrictItems

package/dist/src/components/atoms/WhyLawDistrictItems/WhyLawDistrictItemsProps.types.ts

@@ -0,0 +1,8 @@
+export interface WhyLawDistrictItemsProps {
+  items: WhyLawDistrictItem[]
+}
+
+export interface WhyLawDistrictItem {
+  reasons: string
+  id: string
+}

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

@@ -0,0 +1,3 @@
+export { default as WhyLawDistrictItems } from './WhyLawDistrictItems'
+export { type WhyLawDistrictItemsProps } from './WhyLawDistrictItemsProps.types'
+export { type WhyLawDistrictItem } from './WhyLawDistrictItemsProps.types'

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

@@ -0,0 +1,32 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.wide-info-bar {
+  background-color: get-color(neutral, neutral-6);
+  font-family: $font-sans;
+  color: get-color(neutral, neutral-1);
+
+  &.green {
+    background-color: get-color(primary, main-light-6);
+    color: get-color(primary, main-dark-1);
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    max-width: 1200px;
+    margin: auto;
+    padding: 0.5rem 3.5rem 0.5rem 1.5rem;
+
+    @include landscape-tablets {
+      flex-flow: row;
+      font-size: 0.9rem;
+      padding: 1rem 1.5rem;
+    }
+
+    @include desktop {
+      padding: 0.5rem 2rem;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react'
+
+// import './WideInfoBar.scss'
+
+interface WideInfoBarProps {
+  children?: React.ReactElement<any>
+  color?: 'green'
+}
+
+const WideInfoBar: FC<WideInfoBarProps> = ({ children, color }) => {
+  if (children === undefined) return null
+  return (
+    <div className={`wide-info-bar ${color ?? ''}`}>
+      <div className='wide-info-bar__wrapper'>{children}</div>
+    </div>
+  )
+}
+
+export default WideInfoBar

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

@@ -0,0 +1 @@
+export { default as WideInfoBar } from './WideInfoBar'

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

@@ -0,0 +1,60 @@
+export * from './ActionButtonHeaderRatafiaCard'
+export * from './AddButton'
+export * from './BaseBox'
+export * from './BenefitRatafiaCard'
+export * from './BillCard'
+export * from './BottomOverlayMenu'
+export * from './BreadcrumItem'
+export * from './Button'
+export * from './ButtonIcon'
+export * from './CardPane'
+export * from './Checkbox'
+export * from './DatePickerCustom'
+export * from './DialogMenuIcon'
+export * from './Disclaimer'
+export * from './DisclaimerRatafia'
+export * from './Divider'
+export * from './DocumentStatus'
+export * from './DocumentTag'
+export * from './ExpertCard'
+export * from './FeatureRatafiaCard'
+export * from './FormFaq'
+export * from './GoogleButton'
+export * from './IconImage'
+export * from './IconSvgURLWithThemeColor'
+export * from './IconTextInfoSection'
+export * from './InfoBox'
+export * from './JumbotronStatic'
+export * from './KeyFactRatafiaCard'
+export * from './Logo'
+export * from './LogoText'
+export * from './MenuItems'
+export * from './Message'
+export * from './MessageInformation'
+export * from './MoreDocsItem'
+export * from './NavMenuItem'
+export * from './PaypalButton'
+export * from './PopularDocsItem'
+export * from './ProgressBar'
+export * from './Radio'
+export * from './RemoveButton'
+export * from './ReviewKeyFactsResultRatafia'
+export * from './RichTextInner'
+export * from './RichTextStrapi'
+export * from './SearchSelect'
+export * from './ShowMoreBox'
+export * from './SidemenuTab'
+export * from './Spinner'
+export * from './StepRatafiaCard'
+export * from './Tag'
+export * from './Tagline'
+export * from './TagRatafiaItem'
+export * from './TextArea'
+export * from './Toggle'
+export * from './Tooltip'
+export * from './TopBar'
+export * from './TopBarMobile'
+export * from './TrustPilot'
+export * from './Video'
+export * from './WhyLawDistrictItems'
+export * from './WideInfoBar'

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

@@ -0,0 +1,70 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.accordion__container {
+  overflow: hidden;
+  border-bottom: 1px solid get-color(neutral, neutral-4);
+
+  &:first-child {
+    border-top: 1px solid get-color(neutral, neutral-4);
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .accordion__button {
+    border-right: 1px solid get-color(neutral, neutral-4);
+    border-left: 1px solid get-color(neutral, neutral-4);
+    width: 100%;
+    text-align: left;
+    padding: 1rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: get-color(neutral, neutral-6);
+    border-bottom: none;
+    border-top: none;
+    cursor: pointer;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+
+    &.--success {
+      background: #eff7f5;
+    }
+
+    &.--locked {
+      cursor: not-allowed;
+    }
+
+    &:not(.--locked):hover {
+      background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
+    }
+  }
+
+  .accordion__title {
+    color: get-color(primary, main-dark-1);
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+
+    &.--locked {
+      color: get-color(neutral, neutral-2);
+    }
+  }
+
+  .accordion__content {
+    padding: 0 1.5rem;
+    transition: height 0.7s ease-in-out;
+    border-right: 1px solid get-color(neutral, neutral-4);
+    border-left: 1px solid get-color(neutral, neutral-4);
+    border-bottom: none;
+  }
+}

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

@@ -0,0 +1,54 @@
+/* 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, { useEffect, useRef } from 'react'
+import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context'
+
+import { type AccordionItemProps } from './AccordionItemProps.types'
+
+// import './AccordionItem.scss'
+
+export const AccordionItem = ({
+  accordionRightContent,
+  children,
+  defaultHeightItem = 416,
+  index,
+  isOpen,
+  onClick,
+  title
+}: AccordionItemProps): JSX.Element => {
+  const contenReftHeight = useRef<HTMLInputElement>(null)
+  const { state } = useStateDataAccordionItem(index)
+  const { dispatch } = useDispatchDataAccordionItem()
+
+  useEffect(() => {
+    if (state.locked.actionType === 'unlocked') {
+      onClick()
+      dispatch({ type: 'unlocked', accordionItem: index, resetAction: 'default' })
+    }
+  }, [state.locked.actionType])
+
+  return (
+    <div className='accordion__container'>
+      <button
+        className={`accordion__button 
+          ${state.handler === 'success' ? '--success' : ''}
+          ${state.locked.isLocked ? '--locked' : ''}`}
+        onClick={(): void => {
+          !state.locked.isLocked && onClick()
+        }}
+      >
+        <p className={`accordion__title ${state.locked.isLocked ? '--locked' : ''}`}>{title}</p>
+        {accordionRightContent}
+      </button>
+
+      <div
+        ref={contenReftHeight}
+        className={`accordion__content ${!isOpen ? '--closed' : ''}`}
+        style={isOpen ? { height: contenReftHeight?.current?.scrollHeight ?? defaultHeightItem } : { height: '0px' }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.ts

@@ -0,0 +1,9 @@
+export interface AccordionItemProps {
+  accordionRightContent?: React.ReactNode
+  children?: React.ReactNode
+  defaultHeightItem?: number
+  index: number
+  isOpen?: boolean
+  onClick: () => void
+  title?: string
+}

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

@@ -0,0 +1 @@
+export { AccordionItem } from './AccordionItem'

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

@@ -0,0 +1,7 @@
+.action-button-header-ratafia-card-list {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  border-radius: 4px 4px 0 0;
+}

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { ActionButtonHeaderRatafiaCard } from '../../atoms'
+import { type ActionButtonHeaderRatafiaCardListProps } from './ActionButtonHeaderRatafiaCardListProps.types'
+// import './ActionButtonHeaderRatafiaCardList.scss'
+
+const ActionButtonHeaderRatafiaCardList: FC<ActionButtonHeaderRatafiaCardListProps> = ({ actionButtons }) => {
+  if (actionButtons.length === 0) return null
+
+  return (
+    <div className='action-button-header-ratafia-card-list'>
+      {actionButtons.map((actionButton) => (
+        <ActionButtonHeaderRatafiaCard key={actionButton.id} {...actionButton} />
+      ))}
+    </div>
+  )
+}
+export default ActionButtonHeaderRatafiaCardList

package/dist/src/components/molecules/ActionButtonHeaderRatafiaCardList/ActionButtonHeaderRatafiaCardListProps.types.ts

@@ -0,0 +1,5 @@
+import { type ActionButtonHeaderRatafiaCardProps } from '../../atoms'
+
+export interface ActionButtonHeaderRatafiaCardListProps {
+  actionButtons: ActionButtonHeaderRatafiaCardProps[]
+}

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

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

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

@@ -0,0 +1,29 @@
+@import '../../../globalStyles/variables.scss';
+
+.also-known-as {
+  display: flex;
+  align-items: center;
+  gap: calc($global-gap / 2);
+  flex-wrap: wrap;
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: calc($global-gap / 4);
+    flex-wrap: nowrap;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: get-color('secondary', 'main-dark-1');
+    }
+
+    .text {
+      color: var(--Neutral-600, #6d7275);
+      font-size: 0.875rem;
+      line-height: 18px;
+      letter-spacing: -0.3px;
+      white-space: nowrap;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import React, { type FC } from 'react'
+
+import { type AlsoKnownAsProps } from './AlsoKnownAsProps.types'
+import { DocumentTag } from '../../atoms'
+import { SymbolDoc } from '../../../../images/componentsSvg/SymbolDoc'
+// import './AlsoKnownAs.scss'
+
+const AlsoKnownAs: FC<AlsoKnownAsProps> = ({ title = '', documents = [] }) => {
+  if (documents?.length === 0) return null
+
+  return (
+    <div className='also-known-as'>
+      <p className='title'>
+        <SymbolDoc />
+        <span className='text'>{title}</span>
+      </p>
+      {documents.map((item) => (
+        <DocumentTag key={item} text={item} />
+      ))}
+    </div>
+  )
+}
+
+export default AlsoKnownAs

package/dist/src/components/molecules/AlsoKnownAs/AlsoKnownAsProps.types.ts

@@ -0,0 +1,4 @@
+export interface AlsoKnownAsProps {
+  title: string
+  documents: string[]
+}

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

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