@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { type LanguageSelectorProps } from './LanguageSelectorProps'
+import { NavMenuItem } from '../../atoms'
+import { useLanguageOptions } from './useLanguageOptions'
+import { useLanguageSelected } from './useLanguageSelected'
+import { useLanguagesSelector } from './useLanguagesSelector'
+
+export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
+  languages = [
+    {
+      code: 'US',
+      url: '/'
+    }
+  ],
+  selected = 'GB'
+}) => {
+  const { languagesSelector } = useLanguagesSelector(languages)
+  const { languageSelected } = useLanguageSelected(languagesSelector, selected)
+  const { languageOptions } = useLanguageOptions(languagesSelector, selected)
+
+  if (languages.length <= 1) return null
+
+  return (
+    <NavMenuItem
+      mainButton={{
+        label: '',
+        dataQa: 'language-selector',
+        children: (
+          <>
+            {languageSelected.flag} {languageSelected.name}
+          </>
+        )
+      }}
+      items={languageOptions.map((lang) => {
+        return {
+          key: lang.code,
+          props: {
+            isExternal: true,
+            label: '',
+            dataQa: lang.code,
+            link: lang.url,
+            children: (
+              <>
+                {lang.flag} {lang.name}
+              </>
+            )
+          }
+        }
+      })}
+    />
+  )
+}

package/dist/src/components/organisms/LanguageSelector/LanguageSelectorProps.ts

@@ -0,0 +1,6 @@
+import { type LenguageSelectorItem } from './LenguageSelectorItem'
+
+export interface LanguageSelectorProps {
+  languages: LenguageSelectorItem[]
+  selected: string
+}

package/dist/src/components/organisms/LanguageSelector/LenguageSelectorItem.ts

@@ -0,0 +1,6 @@
+export interface LenguageSelectorItem {
+  code: string
+  url: string
+  flag?: React.ReactNode
+  name?: string
+}

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

@@ -0,0 +1,6 @@
+export * from './LanguageSelector'
+export * from './LanguageSelectorProps'
+export * from './LenguageSelectorItem'
+export * from './useLanguagesSelector'
+export * from './useLanguageSelected'
+export * from './useLanguageOptions'

package/dist/src/components/organisms/LanguageSelector/useLanguageOptions.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type LenguageSelectorItem } from './LenguageSelectorItem'
+
+export const useLanguageOptions = (
+  languagesSelector: LenguageSelectorItem[],
+  selected: string
+): { languageOptions: LenguageSelectorItem[] } => {
+  const [languageOptions, setLanguageOptions] = React.useState<LenguageSelectorItem[]>(
+    languagesSelector.filter((lang) => lang.code !== selected)
+  )
+
+  React.useEffect(() => {
+    setLanguageOptions(languagesSelector.filter((lang) => lang.code !== selected))
+  }, [selected, languagesSelector])
+
+  return { languageOptions }
+}

package/dist/src/components/organisms/LanguageSelector/useLanguageSelected.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type LenguageSelectorItem } from './LenguageSelectorItem'
+
+export const useLanguageSelected = (
+  languagesSelector: LenguageSelectorItem[],
+  selected: string
+): { languageSelected: LenguageSelectorItem } => {
+  const [languageSelected, setLanguageSelected] = React.useState<LenguageSelectorItem>(
+    languagesSelector.find((lang) => lang.code === selected) ?? languagesSelector[0]
+  )
+
+  React.useEffect(() => {
+    setLanguageSelected(languagesSelector.find((lang) => lang.code === selected) ?? languagesSelector[0])
+  }, [selected])
+
+  return { languageSelected }
+}

package/dist/src/components/organisms/LanguageSelector/useLanguagesSelector.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { GBFlag } from '../../../../images/componentsSvg/flags/GBFlag'
+import { type LenguageSelectorItem } from './LenguageSelectorItem'
+import { USFlag } from '../../../../images/componentsSvg/flags/USFlag'
+
+export const useLanguagesSelector = (
+  languages: LenguageSelectorItem[]
+): { languagesSelector: LenguageSelectorItem[] } => {
+  const flags = new Map<string, React.ReactNode>([
+    ['en-US', <USFlag key='us-flag' />],
+    ['en-GB', <GBFlag key='gb-flag' />]
+  ])
+
+  const initSelector = (): LenguageSelectorItem[] => {
+    if (languages.length === 0) return []
+    return languages.map((lang) => ({
+      ...lang,
+      flag: lang.flag ?? flags.get(lang.code),
+      name: lang.name ?? lang.code.slice(-2)
+    }))
+  }
+
+  const [languagesSelector, setLanguagesSelector] = React.useState<LenguageSelectorItem[]>(initSelector())
+
+  React.useEffect(() => {
+    setLanguagesSelector(initSelector())
+  }, [languages])
+
+  return { languagesSelector }
+}

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

@@ -0,0 +1,65 @@
+@import '../../../globalStyles/variables.scss';
+
+.language-selector-mobile {
+  position: relative;
+
+  .selected-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: get-color(primary, main-dark-1);
+    border: 0;
+
+    .language {
+      color: get-color(others, white);
+    }
+
+    .chevron-expand-more {
+      transition: all 0.1s ease;
+    }
+  }
+
+  .language {
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
+    gap: 0.1rem;
+  }
+
+  .options {
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    width: 100%;
+    padding-top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    transition: all 0.1s ease;
+
+    .option {
+      display: flex;
+      padding: 0.5rem 1rem;
+      background-color: get-color(neutral, neutral-6);
+    }
+
+    .language {
+      color: get-color(neutral, neutral-1);
+    }
+  }
+
+  &.open {
+    .selected-option {
+      .chevron-expand-more {
+        transition: all 0.4s ease;
+        transform: rotate(180deg);
+      }
+    }
+
+    .options {
+      opacity: 1;
+      visibility: visible;
+      transition: all 0.4s ease;
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import {
+  type LanguageSelectorProps,
+  useLanguageOptions,
+  useLanguageSelected,
+  useLanguagesSelector
+} from '../LanguageSelector'
+import { Button } from '../../atoms'
+import { ChevronExpandMore } from '../../../../images/componentsSvg/ChevronExpandMore'
+// import './LanguageSelectorMobile.scss'
+
+export const LanguageSelectorMobile: React.FC<LanguageSelectorProps> = ({
+  languages = [
+    {
+      code: 'US',
+      url: '/'
+    }
+  ],
+  selected = 'GB'
+}) => {
+  const { languagesSelector } = useLanguagesSelector(languages)
+  const { languageSelected } = useLanguageSelected(languagesSelector, selected)
+  const { languageOptions } = useLanguageOptions(languagesSelector, selected)
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  if (languages.length <= 1) return null
+
+  return (
+    <div className={`language-selector-mobile ${isOpen ? 'open' : ''}`}>
+      <Button
+        color='transparent'
+        noLink
+        givenClass='selected-option'
+        label=''
+        dataQa='language-selector-mobile'
+        fluid
+        onClick={() => {
+          setIsOpen(!isOpen)
+        }}
+      >
+        <div className='language'>
+          {languageSelected.flag} {languageSelected.name}
+        </div>
+        <ChevronExpandMore fill='#DBE1E5' />
+      </Button>
+      <div className='options'>
+        {languageOptions.map((language) => (
+          <Button
+            key={language.code}
+            color='transparent'
+            isExternal
+            givenClass='option'
+            label=''
+            dataQa={`language-selector-mobile-option-${language.code}`}
+            link={language.url}
+            fluid
+          >
+            <div className='language'>
+              {language.flag} {language.name}
+            </div>
+          </Button>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+export * from './LanguageSelectorMobile'

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

@@ -0,0 +1,93 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.layout-ratafia {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  padding-top: 1rem;
+
+  @include portrait-tablets {
+    padding-top: 3.5rem;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 1.5rem 1.5rem 0 1.5rem;
+
+    width: 100%;
+    height: calc(100vh - 5.125rem);
+
+    border-radius: 16px 16px 0 0;
+    background: get-color(others, white);
+    box-shadow: $box-shadow-small;
+
+    @include portrait-tablets {
+      padding: 2.5rem 2.5rem 1.5rem 2.5rem;
+    }
+    @include portrait-tablets {
+      width: 800px;
+      height: 890px;
+    }
+
+    &__header {
+      width: 100%;
+      margin-bottom: 1.5rem;
+    }
+
+    &__content {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1 0 0;
+      align-self: stretch;
+
+      gap: 1.5rem;
+      margin-bottom: 1rem;
+      @include portrait-tablets {
+        margin-bottom: 2.5rem;
+      }
+    }
+    &__cta {
+      display: none;
+      @include portrait-tablets {
+        display: block;
+      }
+    }
+    &__footer-desktop {
+      width: 100%;
+      display: none;
+      @include portrait-tablets {
+        display: block;
+      }
+    }
+    &__footer-mobile {
+      display: flex;
+      flex-direction: column;
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      gap: 1rem;
+      padding: 1.5rem;
+
+      width: 100vw;
+      background: get-color(others, white);
+      @include portrait-tablets {
+        display: none;
+      }
+    }
+    .e-button.--primary-1 {
+      height: auto;
+      padding: 0.6875rem 1rem;
+      line-height: 22px;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { HeaderRatafia } from '../../molecules'
+import { type LayoutRatafiaProps } from './LayoutRatafiaProps.types'
+// import './LayoutRatafia.scss'
+
+export const LayoutRatafia: React.FC<LayoutRatafiaProps> = ({ header, content, cta, footerDesktop, footerMobile }) => {
+  return (
+    <div className='layout-ratafia'>
+      <div className='layout-ratafia__wrapper'>
+        <div className='layout-ratafia__wrapper__header'>
+          <HeaderRatafia {...header} />
+        </div>
+        <div className='layout-ratafia__wrapper__content'>
+          {content}
+          <div className='layout-ratafia__wrapper__cta'>{cta}</div>
+        </div>
+        <div className='layout-ratafia__wrapper__footer-desktop'>{footerDesktop}</div>
+        <div className='layout-ratafia__wrapper__footer-mobile'>{footerMobile}</div>
+      </div>
+    </div>
+  )
+}
+
+export default LayoutRatafia

package/dist/src/components/organisms/LayoutRatafia/LayoutRatafiaProps.types.ts

@@ -0,0 +1,9 @@
+import type { HeaderRatafiaProps } from '../../molecules'
+
+export interface LayoutRatafiaProps {
+  header: HeaderRatafiaProps
+  content?: React.ReactNode
+  cta?: React.ReactNode
+  footerDesktop?: React.ReactNode
+  footerMobile?: React.ReactNode
+}

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

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

package/dist/src/components/organisms/ListStepsGetForm/ListStepsGetForm.d.ts

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

package/dist/src/components/organisms/ListStepsGetForm/ListStepsGetForm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StepGetForm } from '../../molecules';
-import './ListStepsGetForm.scss';
+// import './ListStepsGetForm.scss'
 const ListStepsGetForm = ({ steps = [] }) => {
     if (steps.length === 0)
         return null;

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

@@ -0,0 +1,35 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.homeSteps__container {
+  transform: translateY(0%);
+  @include portrait-tablets {
+    transform: translateY(0%);
+  }
+  @include landscape-tablets {
+    transform: translateY(0%);
+  }
+
+  .homeSteps {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    position: relative;
+
+    .homeStepsItemsContainer {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      max-width: 888px;
+      flex-flow: row wrap;
+      padding: 0 1rem;
+
+      @include laptop {
+        flex-flow: row nowrap;
+        padding: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+
+import { type ListStepsGetFormProps } from './ListStepsGetFormProps.types'
+import { StepGetForm } from '../../molecules'
+// import './ListStepsGetForm.scss'
+
+const ListStepsGetForm: FC<ListStepsGetFormProps> = ({ steps = [] }) => {
+  if (steps.length === 0) return null
+
+  return (
+    <div className='homeSteps__container'>
+      <div className='homeSteps wrapper'>
+        <div className='homeStepsItemsContainer'>
+          {steps.map((step) => (
+            <StepGetForm key={step.id} {...step} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ListStepsGetForm

package/dist/src/components/organisms/ListStepsGetForm/ListStepsGetFormProps.types.ts

@@ -0,0 +1,5 @@
+import { type StepGetFormProps } from '../../molecules'
+
+export interface ListStepsGetFormProps {
+  steps: StepGetFormProps[]
+}

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

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

package/dist/src/components/organisms/LoginRatafiaContent/LoginRatafiaContent.d.ts

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

package/dist/src/components/organisms/LoginRatafiaContent/LoginRatafiaContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextInput } from '../../molecules';
-import './LoginRatafiaContent.scss';
+// import './LoginRatafiaContent.scss'
 const LoginRatafiaContent = ({ title, email }) => {
     return (_jsxs("div", { className: 'login-ratafia-content', children: [_jsx("h2", { className: 'login-ratafia-content__title', children: title }), _jsx("div", { className: 'login-ratafia-content__email', children: _jsx(TextInput, { ...email }) })] }));
 };

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

@@ -0,0 +1,16 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries';
+
+.login-ratafia-content {
+  width: 100%;
+  &__title {
+    font-size: 1rem;
+    color: get-color(neutral, neutral-2);
+    padding-bottom: 1rem;
+  }
+  &__email {
+    .e-text {
+      margin-bottom: 0.5rem;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { type LoginRatafiaContentProps } from './LoginRatafiaContentProps.types'
+import { TextInput } from '../../molecules'
+// import './LoginRatafiaContent.scss'
+
+const LoginRatafiaContent: FC<LoginRatafiaContentProps> = ({ title, email }) => {
+  return (
+    <div className='login-ratafia-content'>
+      <h2 className='login-ratafia-content__title'>{title}</h2>
+      <div className='login-ratafia-content__email'>
+        <TextInput {...email} />
+      </div>
+    </div>
+  )
+}
+
+export default LoginRatafiaContent

package/dist/src/components/organisms/LoginRatafiaContent/LoginRatafiaContentProps.types.ts

@@ -0,0 +1,8 @@
+import { type CheckboxProps } from '../../atoms'
+import { type TextInputProps } from '../../molecules'
+
+export interface LoginRatafiaContentProps {
+  title: string
+  email: TextInputProps
+  policy: CheckboxProps
+}

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

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

package/dist/src/components/organisms/MobileBottomBar/MobileBottomBar.d.ts

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

package/dist/src/components/organisms/MobileBottomBar/MobileBottomBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Button, SidemenuTab } from '../../atoms';
-import './MobileBottomBar.scss';
+// import './MobileBottomBar.scss'
 const MobileBottomBar = ({ children, list, active }) => {
     if (children === undefined && list?.length === 0)
         return null;

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

@@ -0,0 +1,46 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.mobile-bottom-bar {
+  background: get-color(others, white);
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  bottom: 0;
+  height: 3.25rem;
+  width: 100%;
+  box-shadow: $box-shadow-container;
+  z-index: 1;
+
+  @include portrait-tablets {
+    display: none;
+  }
+
+  &--active {
+    display: flex;
+  }
+
+  .e-button {
+    max-height: 2.8rem;
+    margin: 0 0.5rem;
+    width: 2.75rem;
+    min-width: 2.75rem;
+    padding: 0;
+    outline: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: get-color(primary);
+    border-color: get-color(primary);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    svg {
+      width: 24px;
+      margin: 0;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import React, { type FC } from 'react'
+import classNames from 'classnames'
+
+import { Button, SidemenuTab } from '../../atoms'
+import { type MobileBottomBarProps } from './MobileBottomBarProps.types'
+// import './MobileBottomBar.scss'
+
+const MobileBottomBar: FC<MobileBottomBarProps> = ({ children, list, active }) => {
+  if (children === undefined && list?.length === 0) return null
+
+  const classnames = classNames('mobile-bottom-bar', {
+    'mobile-bottom-bar--active': active
+  })
+
+  if (children !== undefined) return <div className={classnames}>{children}</div>
+  if (list === undefined) return null
+
+  return (
+    <div className={classnames}>
+      {list.map((tab, index) => {
+        if (tab.type === 'button') {
+          return (
+            <Button key={index} noLink color='primary' {...tab}>
+              {tab.image}
+            </Button>
+          )
+        }
+        return <SidemenuTab key={index} mobile={true} {...tab} />
+      })}
+    </div>
+  )
+}
+
+export default MobileBottomBar