@npm_leadtech/legal-lib-components 5.2.24 → 5.2.32

package/dist/src/components/atoms/IconTextInfoSection/IconTextInfoSection.styled.ts

@@ -0,0 +1,77 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const IconTextInfoSectionStyled = styled.div`
+  .icon-text-info-section {
+    &__separator {
+      background-color: var(--neutral-neutral-3);
+      border-bottom: 1px get-color(neutral, neutral-3) solid;
+      display: none;
+      height: 70px;
+      padding-bottom: 40px;
+      width: 1px;
+
+      @media ${device.laptop} {
+        margin: 0 32px;
+      }
+      @media ${device['portrait-tablets']} {
+        display: flex;
+      }
+      @media ${device.mobile} {
+        margin: 19.2px 32px;
+      }
+    }
+  }
+
+  &.icon-text-info-section.bottom-side {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--neutral-neutral-4);
+    justify-content: center;
+    padding: 1rem 3rem;
+
+    @media ${device['portrait-tablets']} {
+      padding: 0;
+      flex-direction: row;
+      padding: 1rem 1rem;
+    }
+
+    .box {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin: 0;
+
+      @media ${device.mobile} {
+        margin: 0.4rem;
+      }
+
+      @media ${device['portrait-tablets']} {
+        margin: 0 1rem;
+      }
+    }
+
+    .item-image {
+      width: 2.5rem;
+      margin-right: 1rem;
+
+      @media ${device.mobile} {
+        width: 1.5rem;
+      }
+
+      .image {
+        width: 40px;
+        height: 40px;
+
+        @media ${device.mobile} {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+
+    .item-text {
+      font-size: 16px;
+    }
+  }
+`

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

@@ -2,12 +2,11 @@
 import React from 'react'
 
 import { type IconTextInfoSectionProps } from './IconTextInfoSection.types'
-
-// import './IconTextInfoSection.scss'
+import { IconTextInfoSectionStyled } from './IconTextInfoSection.styled'
 
 export const IconTextInfoSection: React.FC<IconTextInfoSectionProps> = ({ items, classnames = '' }) => {
   return (
-    <div className={`icon-text-info-section bottom-side ${classnames}`}>
+    <IconTextInfoSectionStyled className={`icon-text-info-section bottom-side ${classnames}`}>
       {items.map(({ text, src }, index) => (
         <React.Fragment key={`${src}-${index}`}>
           <div className='box'>
@@ -21,6 +20,6 @@ export const IconTextInfoSection: React.FC<IconTextInfoSectionProps> = ({ items,
           {items.length - 1 !== index && <div className='icon-text-info-section__separator'></div>}
         </React.Fragment>
       ))}
-    </div>
+    </IconTextInfoSectionStyled>
   )
 }

package/dist/src/components/atoms/InfoBox/InfoBox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoBoxStyled } from './InfoBox.styled';
 import { InfoError24pxOutlined } from '../../../../images/componentsSvg/InfoError24pxOutlined';
-// import './InfoBox.scss'
 const InfoBox = ({ children, type, noIcon }) => {
-    return (_jsxs("div", { className: `info-box ${type}`, children: [!noIcon && (_jsx("div", { className: 'info-box__img', children: _jsx(InfoError24pxOutlined, { fill: 'blue' }) })), _jsx("div", { className: 'info-box__text-container', children: children })] }));
+    return (_jsxs(InfoBoxStyled, { className: `info-box ${type}`, children: [!noIcon && (_jsx("div", { className: 'info-box__img', children: _jsx(InfoError24pxOutlined, { fill: 'blue' }) })), _jsx("div", { className: 'info-box__text-container', children: children })] }));
 };
 export default InfoBox;

package/dist/src/components/atoms/InfoBox/InfoBox.styled.d.ts

@@ -0,0 +1 @@
+export declare const InfoBoxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/InfoBox/InfoBox.styled.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+export const InfoBoxStyled = styled.div `
+  border-radius: var(--global-border-radius);
+  border: 1px solid;
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+
+  &.error {
+    border-color: var(--error-main);
+    color: var(--error-main);
+    background-color: var(--error-error-3);
+    use {
+      fill: var(--error-main);
+    }
+  }
+
+  &.warning {
+    border-color: var(--secondary-main-dark-1);
+    color: var(--secondary-main-dark-2);
+    background-color: var(--secondary-main-light-4);
+    use {
+      fill: var(--secondary-main-dark-1);
+    }
+  }
+
+  .info-box {
+    &__img {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &__text-container {
+      margin-left: 0.5rem;
+
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        margin-left: 1.5rem;
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/InfoBox/InfoBox.styled.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components'
+
+export const InfoBoxStyled = styled.div`
+  border-radius: var(--global-border-radius);
+  border: 1px solid;
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+
+  &.error {
+    border-color: var(--error-main);
+    color: var(--error-main);
+    background-color: var(--error-error-3);
+    use {
+      fill: var(--error-main);
+    }
+  }
+
+  &.warning {
+    border-color: var(--secondary-main-dark-1);
+    color: var(--secondary-main-dark-2);
+    background-color: var(--secondary-main-light-4);
+    use {
+      fill: var(--secondary-main-dark-1);
+    }
+  }
+
+  .info-box {
+    &__img {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &__text-container {
+      margin-left: 0.5rem;
+
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        margin-left: 1.5rem;
+      }
+    }
+  }
+`

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

@@ -3,19 +3,19 @@
 import React, { type FC } from 'react'
 
 import { type InfoBoxProps } from './InfoBoxProps.types'
+import { InfoBoxStyled } from './InfoBox.styled'
 import { InfoError24pxOutlined } from '../../../../images/componentsSvg/InfoError24pxOutlined'
-// import './InfoBox.scss'
 
 const InfoBox: FC<InfoBoxProps> = ({ children, type, noIcon }) => {
   return (
-    <div className={`info-box ${type}`}>
+    <InfoBoxStyled className={`info-box ${type}`}>
       {!noIcon && (
         <div className='info-box__img'>
           <InfoError24pxOutlined fill='blue' />
         </div>
       )}
       <div className='info-box__text-container'>{children}</div>
-    </div>
+    </InfoBoxStyled>
   )
 }
 

package/dist/src/components/atoms/JumbotronStatic/JumbotronStatic.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// import './JumbotronStatic.scss'
+import { JumbotronStaticStyled } from './JumbotronStatic.styled';
 export const JumbotronStatic = ({ title }) => {
-    return (_jsx("section", { className: 'jumbotron--static', children: _jsx("h1", { className: 'serif --super-hero', children: title }) }));
+    return (_jsx(JumbotronStaticStyled, { className: 'jumbotron--static', children: _jsx("h1", { className: 'serif --super-hero', children: title }) }));
 };

package/dist/src/components/atoms/JumbotronStatic/JumbotronStatic.styled.d.ts

@@ -0,0 +1 @@
+export declare const JumbotronStaticStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/src/components/atoms/JumbotronStatic/JumbotronStatic.styled.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const JumbotronStaticStyled = styled.section `
+  text-align: center;
+  margin: 0 auto;
+  background-color: var(--primary-main-light-6);
+  padding: 2.5rem 1rem 4rem;
+`;

package/dist/src/components/atoms/JumbotronStatic/JumbotronStatic.styled.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const JumbotronStaticStyled = styled.section`
+  text-align: center;
+  margin: 0 auto;
+  background-color: var(--primary-main-light-6);
+  padding: 2.5rem 1rem 4rem;
+`

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

@@ -1,12 +1,12 @@
 import React, { type FC } from 'react'
 
 import { type JumbotronStaticProps } from './JumbotronStaticProps.types'
-// import './JumbotronStatic.scss'
+import { JumbotronStaticStyled } from './JumbotronStatic.styled'
 
 export const JumbotronStatic: FC<JumbotronStaticProps> = ({ title }) => {
   return (
-    <section className={'jumbotron--static'}>
+    <JumbotronStaticStyled className={'jumbotron--static'}>
       <h1 className='serif --super-hero'>{title}</h1>
-    </section>
+    </JumbotronStaticStyled>
   )
 }

package/dist/src/components/atoms/KeyFactRatafiaCard/KeyFactRatafiaCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './KeyFactRatafiaCard.scss'
+import { KeyFactRatafiaCardStyled } from './KeyFactRatafiaCard.styled';
 export const KeyFactRatafiaCard = ({ title, content }) => {
-    return (_jsxs("div", { className: 'key-fact-item', children: [_jsxs("div", { className: 'key-fact-item__wrapper', children: [_jsx("p", { className: 'sans-serif --medium --bold-weight key-fact-item__wrapper__title', children: title }), _jsx("p", { className: 'sans-serif --medium key-fact-item__wrapper__content', children: content })] }), _jsx("span", { className: 'key-fact-item__divider' })] }));
+    return (_jsxs(KeyFactRatafiaCardStyled, { className: 'key-fact-item', children: [_jsxs("div", { className: 'key-fact-item__wrapper', children: [_jsx("p", { className: 'sans-serif --medium --bold-weight key-fact-item__wrapper__title', children: title }), _jsx("p", { className: 'sans-serif --medium key-fact-item__wrapper__content', children: content })] }), _jsx("span", { className: 'key-fact-item__divider' })] }));
 };
 export default KeyFactRatafiaCard;

package/dist/src/components/atoms/KeyFactRatafiaCard/KeyFactRatafiaCard.styled.d.ts

@@ -0,0 +1 @@
+export declare const KeyFactRatafiaCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/KeyFactRatafiaCard/KeyFactRatafiaCard.styled.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+export const KeyFactRatafiaCardStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+
+  background: var(--neutral-neutral-6);
+
+  .key-fact-item {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+
+      margin-bottom: 1rem;
+      gap: 1rem;
+
+      &__title {
+        color: var(--neutral-neutral-1);
+        background: var(--neutral-neutral-6);
+        position: sticky;
+        top: 0;
+
+        margin-top: 1rem;
+      }
+
+      &__content {
+        color: var(--neutral-neutral-1);
+        overflow-y: auto;
+      }
+    }
+    &__divider {
+      height: 1px;
+      align-self: stretch;
+      background: var(--neutral-neutral-4);
+    }
+  }
+`;

package/dist/src/components/atoms/KeyFactRatafiaCard/KeyFactRatafiaCard.styled.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+export const KeyFactRatafiaCardStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+
+  background: var(--neutral-neutral-6);
+
+  .key-fact-item {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+
+      margin-bottom: 1rem;
+      gap: 1rem;
+
+      &__title {
+        color: var(--neutral-neutral-1);
+        background: var(--neutral-neutral-6);
+        position: sticky;
+        top: 0;
+
+        margin-top: 1rem;
+      }
+
+      &__content {
+        color: var(--neutral-neutral-1);
+        overflow-y: auto;
+      }
+    }
+    &__divider {
+      height: 1px;
+      align-self: stretch;
+      background: var(--neutral-neutral-4);
+    }
+  }
+`

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

@@ -1,17 +1,17 @@
 import React from 'react'
 
 import { type KeyFactRatafiaCardProps } from './KeyFactRatafiaCardProps.types'
-// import './KeyFactRatafiaCard.scss'
+import { KeyFactRatafiaCardStyled } from './KeyFactRatafiaCard.styled'
 
 export const KeyFactRatafiaCard: React.FC<KeyFactRatafiaCardProps> = ({ title, content }) => {
   return (
-    <div className='key-fact-item'>
+    <KeyFactRatafiaCardStyled className='key-fact-item'>
       <div className='key-fact-item__wrapper'>
         <p className='sans-serif --medium --bold-weight key-fact-item__wrapper__title'>{title}</p>
         <p className='sans-serif --medium key-fact-item__wrapper__content'>{content}</p>
       </div>
       <span className='key-fact-item__divider'></span>
-    </div>
+    </KeyFactRatafiaCardStyled>
   )
 }
 

package/dist/src/components/atoms/LogoText/LogoText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './LogoText.scss'
+import { LogoTextStyled } from './LogoText.styled';
 const LogoText = ({ logo, children, description }) => {
-    return (_jsxs("div", { "data-testid": 'logo-text', className: 'logo-text', children: [_jsx("img", { "data-testid": 'img-logo-text', alt: '', src: logo }), description !== undefined ? (_jsx("p", { children: _jsx("span", { children: description }) })) : (children)] }));
+    return (_jsxs(LogoTextStyled, { "data-testid": 'logo-text', className: 'logo-text', children: [_jsx("img", { "data-testid": 'img-logo-text', alt: '', src: logo, className: 'logo-text__img' }), description !== undefined ? (_jsx("p", { className: 'logo-text__text', children: _jsx("span", { children: description }) })) : (children)] }));
 };
 export default LogoText;

package/dist/src/components/atoms/LogoText/LogoText.styled.d.ts

@@ -0,0 +1 @@
+export declare const LogoTextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/LogoText/LogoText.styled.js

@@ -0,0 +1,36 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const LogoTextStyled = styled.div `
+  display: flex;
+  align-items: flex-start;
+
+  .logo-text {
+    &__img {
+      align-items: center;
+      margin-right: 1.5rem;
+      margin-bottom: 0;
+    }
+
+    &__text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-bottom: 0;
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        width: 17rem;
+
+        @media ${device.mobile} {
+          width: 17rem;
+        }
+
+        @media ${device['portrait-tablets']} {
+          width: 10rem;
+        }
+
+        @media ${device['landscape-tablets']} {
+          width: 17rem;
+        }
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/LogoText/LogoText.styled.ts

@@ -0,0 +1,37 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const LogoTextStyled = styled.div`
+  display: flex;
+  align-items: flex-start;
+
+  .logo-text {
+    &__img {
+      align-items: center;
+      margin-right: 1.5rem;
+      margin-bottom: 0;
+    }
+
+    &__text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-bottom: 0;
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        width: 17rem;
+
+        @media ${device.mobile} {
+          width: 17rem;
+        }
+
+        @media ${device['portrait-tablets']} {
+          width: 10rem;
+        }
+
+        @media ${device['landscape-tablets']} {
+          width: 17rem;
+        }
+      }
+    }
+  }
+`

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

@@ -1,20 +1,20 @@
 import React, { type FC } from 'react'
 
 import { type LogoTextProps } from './LogoTextProps.types'
-// import './LogoText.scss'
+import { LogoTextStyled } from './LogoText.styled'
 
 const LogoText: FC<LogoTextProps> = ({ logo, children, description }) => {
   return (
-    <div data-testid='logo-text' className='logo-text'>
-      <img data-testid='img-logo-text' alt='' src={logo} />
+    <LogoTextStyled data-testid='logo-text' className='logo-text'>
+      <img data-testid='img-logo-text' alt='' src={logo} className='logo-text__img' />
       {description !== undefined ? (
-        <p>
+        <p className='logo-text__text'>
           <span>{description}</span>
         </p>
       ) : (
         children
       )}
-    </div>
+    </LogoTextStyled>
   )
 }
 

package/dist/src/components/atoms/MenuItems/MenuItems.js

@@ -7,6 +7,7 @@ import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-run
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import { useState } from 'react';
 import classNames from 'classnames';
+import { MenuItemsStyled } from './MenuItems.styled';
 import { stringSlugify } from '../../../utils/stringSlugify';
 // import './MenuItems.scss'
 const MenuItems = ({ spacing, list, hasBullets = false, initialActiveContent = '', ...rest }) => {
@@ -40,6 +41,6 @@ const MenuItems = ({ spacing, list, hasBullets = false, initialActiveContent = '
                 initialActiveContent && handleActiveListElement(content);
             }, ...props, children: href ? (_jsxs("a", { href: href, "data-qa": dataQA ?? slugifiedContent, children: [image, content] })) : (_jsxs(_Fragment, { children: [image, content] })) }, listKey));
     };
-    return (_jsx("ul", { className: classes, ...rest, children: filteredList.map((item, index) => renderItem(item, index)) }));
+    return (_jsx(MenuItemsStyled, { className: classes, ...rest, children: filteredList.map((item, index) => renderItem(item, index)) }));
 };
 export default MenuItems;

package/dist/src/components/atoms/MenuItems/MenuItems.styled.d.ts

@@ -0,0 +1 @@
+export declare const MenuItemsStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;

package/dist/src/components/atoms/MenuItems/MenuItems.styled.js

@@ -0,0 +1,71 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const MenuItemsStyled = styled.ul `
+  .menu-items {
+    &__spacing {
+      .menu-items__item:not(:last-child) {
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    &__bullets {
+      list-style-position: inside;
+      list-style-type: disc;
+    }
+
+    &__item {
+      transition: background-color 0.3s ease;
+      border-radius: var(--global-border-radius);
+      padding: 0.25rem 0.5rem;
+
+      svg {
+        vertical-align: bottom;
+        width: 1.5rem;
+        margin-right: 0.5rem;
+
+        @media ${device['portrait-tablets']} {
+          width: 1rem;
+        }
+
+        > g > g {
+          fill: var(--neutral-neutral-1);
+        }
+
+        #color-bin {
+          fill: var(--neutral-neutral-1);
+        }
+      }
+
+      &.active {
+        color: var(--primary-main-light-1);
+        font-weight: 700;
+        background-color: var(--primary-main-light-5);
+      }
+
+      &.inactive {
+        color: var(--neutral-neutral-2);
+        font-weight: 400;
+      }
+
+      &.disabled {
+        color: var(--neutral-neutral-3);
+        svg > g > g {
+          fill: var(--neutral-neutral-3);
+        }
+      }
+
+      &:not(.disabled):hover {
+        background-color: var(--primary-main-light-5);
+        cursor: pointer;
+        svg > g > g {
+          transition: all 0.3s ease;
+          fill: var(--primary-main);
+        }
+      }
+
+      a {
+        display: flex;
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/MenuItems/MenuItems.styled.ts

@@ -0,0 +1,72 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const MenuItemsStyled = styled.ul`
+  .menu-items {
+    &__spacing {
+      .menu-items__item:not(:last-child) {
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    &__bullets {
+      list-style-position: inside;
+      list-style-type: disc;
+    }
+
+    &__item {
+      transition: background-color 0.3s ease;
+      border-radius: var(--global-border-radius);
+      padding: 0.25rem 0.5rem;
+
+      svg {
+        vertical-align: bottom;
+        width: 1.5rem;
+        margin-right: 0.5rem;
+
+        @media ${device['portrait-tablets']} {
+          width: 1rem;
+        }
+
+        > g > g {
+          fill: var(--neutral-neutral-1);
+        }
+
+        #color-bin {
+          fill: var(--neutral-neutral-1);
+        }
+      }
+
+      &.active {
+        color: var(--primary-main-light-1);
+        font-weight: 700;
+        background-color: var(--primary-main-light-5);
+      }
+
+      &.inactive {
+        color: var(--neutral-neutral-2);
+        font-weight: 400;
+      }
+
+      &.disabled {
+        color: var(--neutral-neutral-3);
+        svg > g > g {
+          fill: var(--neutral-neutral-3);
+        }
+      }
+
+      &:not(.disabled):hover {
+        background-color: var(--primary-main-light-5);
+        cursor: pointer;
+        svg > g > g {
+          transition: all 0.3s ease;
+          fill: var(--primary-main);
+        }
+      }
+
+      a {
+        display: flex;
+      }
+    }
+  }
+`