@npm_leadtech/legal-lib-components 5.2.8 → 5.2.10

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

@@ -0,0 +1,22 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.tag-ratafia-item {
+  background: get-color(primary, main-light-6);
+  border-radius: 4px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+
+  padding: 0.25rem 0.5rem;
+
+  &__icon {
+    height: 16px;
+    width: 16px;
+  }
+  &__description {
+    color: get-color(primary, main-dark-2);
+  }
+}

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

@@ -1,16 +1,16 @@
 import React from 'react'
 
 import { type TagRatafiaItemProps } from './TagRatafiaItemProps.types'
-import { TagRatafiaItemStyled } from './TagRatafiaItem.styled'
+// import './TagRatafiaItem.scss'
 
 export const TagRatafiaItem: React.FC<TagRatafiaItemProps> = ({ icon, description }) => {
   return (
-    <TagRatafiaItemStyled className={'tag-ratafia-item'}>
+    <div className={'tag-ratafia-item'}>
       {icon !== null && <div className={'tag-ratafia-item__icon'}>{icon}</div>}
       <span className='sans-serif --small tag-ratafia-item__description' itemProp='text'>
         {description}
       </span>
-    </TagRatafiaItemStyled>
+    </div>
   )
 }
 

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TaglineStyled } from './Tagline.styled';
+// import './Tagline.scss'
 export const Tagline = ({ text }) => {
-    return (_jsx(TaglineStyled, { className: 'tagline', children: _jsx("span", { className: 'sans-serif --small tagline__text', children: text }) }));
+    return (_jsx("div", { className: 'tagline', children: _jsx("span", { className: 'sans-serif --small tagline__text', children: text }) }));
 };

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

@@ -5,10 +5,10 @@
 }
 
 .tagline__text {
-  border-bottom: solid 1px var(--neutral-neutral-3);
-  color: var(--neutral-neutral-2);
+  border-bottom: solid 1px get-color(neutral, neutral-3);
+  color: get-color(neutral, neutral-2);
   display: inline-block;
-  font-family: var(--font-sans);
+  font-family: $font-sans;
   font-weight: bold;
   letter-spacing: 0;
   padding-bottom: 0.5rem;

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

@@ -1,12 +1,12 @@
 import React, { type FC } from 'react'
 
 import { type TaglineProps } from './TaglineProps.types'
-import { TaglineStyled } from './Tagline.styled'
+// import './Tagline.scss'
 
 export const Tagline: FC<TaglineProps> = ({ text }) => {
   return (
-    <TaglineStyled className='tagline'>
+    <div className='tagline'>
       <span className='sans-serif --small tagline__text'>{text}</span>
-    </TaglineStyled>
+    </div>
   )
 }

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextAreaStyled } from './TextArea.styled';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
+// import './TextArea.scss'
 const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa }) => {
     const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`;
-    return (_jsxs(TextAreaStyled, { className: classNames, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), errorMessage !== undefined && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), label !== undefined && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
+    return (_jsxs("div", { className: classNames, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), errorMessage !== undefined && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), label !== undefined && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
 };
 export default TextArea;

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

@@ -0,0 +1,103 @@
+@import '../../../globalStyles/variables';
+
+.e-textarea {
+  display: flex;
+  flex-direction: column-reverse;
+
+  textarea {
+    color: get-color(neutral, neutral-2);
+    background-color: get-color(neutral, neutral-6);
+    border-radius: 4px;
+    padding: 0.75rem 0 0.75rem 0.75rem;
+    font-size: 0.875rem;
+    height: 10rem;
+    border: none;
+    text-overflow: ellipsis;
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 0 0 1px get-color(neutral, neutral-3);
+    margin: 0.0005em;
+    outline: none;
+    resize: vertical;
+
+    &::placeholder {
+      color: get-color(neutral, neutral-2);
+    }
+
+    &:-ms-input-placeholder {
+      color: get-color(neutral, neutral-2);
+    }
+
+    &::-ms-input-placeholder {
+      color: get-color(neutral, neutral-2);
+    }
+
+    &:hover {
+      box-shadow: 0 0 0 1px get-color(neutral, neutral-2);
+    }
+
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 2px get-color(primary);
+      outline: none;
+    }
+  }
+
+  &.--group-invalid {
+    input {
+      box-shadow: 0 0 0 2px get-color(error);
+      background-color: get-color(error, error-3);
+
+      &:active,
+      &:focus {
+        box-shadow: 0 0 0 2px get-color(primary);
+        outline: none;
+        background-color: get-color(neutral, neutral-6);
+      }
+    }
+  }
+
+  &.--is-invalid {
+    .e-text--error {
+      display: flex;
+      align-content: center;
+      bottom: -1.5rem;
+      margin-top: 0.5rem;
+      color: get-color(error);
+
+      img {
+        max-width: 20px;
+        margin-right: 0.25rem;
+      }
+    }
+
+    textarea {
+      box-shadow: 0 0 0 2px get-color(error);
+      background-color: get-color(error, error-3);
+
+      &:active,
+      &:focus {
+        box-shadow: 0 0 0 2px get-color(primary);
+        outline: none;
+        background-color: get-color(neutral, neutral-6);
+      }
+    }
+  }
+
+  .input-icon {
+    position: absolute;
+    transform: translate(-15%, -65%);
+    right: 0;
+    bottom: 0;
+  }
+
+  &__inner {
+    margin-bottom: 0;
+  }
+
+  .inputLabel {
+    font-weight: bold;
+  }
+  .tooltip-form {
+    margin-top: 0;
+  }
+}

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

@@ -2,8 +2,8 @@
 import React, { type FC } from 'react'
 
 import { type TextAreaProps } from './TextAreaProps.types'
-import { TextAreaStyled } from './TextArea.styled'
 import error from '../../../../images/svg/info-error_24px_outlined.svg'
+// import './TextArea.scss'
 
 const TextArea: FC<TextAreaProps> = ({
   customClass = '',
@@ -22,7 +22,7 @@ const TextArea: FC<TextAreaProps> = ({
     ${customClass}`
 
   return (
-    <TextAreaStyled className={classNames}>
+    <div className={classNames}>
       {tooltip !== undefined && <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
       {errorMessage !== undefined && !validate && (
         <span className='e-text--error sans-serif --small'>
@@ -44,7 +44,7 @@ const TextArea: FC<TextAreaProps> = ({
           <div className='inputLabel'>{label}</div>
         </div>
       )}
-    </TextAreaStyled>
+    </div>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToggleStyled } from './Toggle.styled';
+// import './Toggle.scss'
 const Toggle = ({ toggleAction, toggleCheck, label }) => {
-    return (_jsxs(ToggleStyled, { className: 'e-toggle', children: [_jsxs("label", { className: 'switch', children: [_jsx("input", { type: 'checkbox', className: `toggle-checkbox ${toggleCheck ? 'isOn' : ''}`, checked: toggleCheck, onChange: toggleAction }), _jsx("div", { className: 'slider' })] }), _jsx("span", { children: label })] }));
+    return (_jsxs("div", { className: 'e-toggle', children: [_jsxs("label", { className: 'switch', children: [_jsx("input", { type: 'checkbox', className: `toggle-checkbox ${toggleCheck ? 'isOn' : ''}`, checked: toggleCheck, onChange: toggleAction }), _jsx("div", { className: 'slider' })] }), _jsx("span", { children: label })] }));
 };
 export default Toggle;

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

@@ -0,0 +1,59 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-toggle {
+  display: flex;
+  align-items: center;
+  color: get-color(others, black);
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+    outline: none;
+  }
+
+  .switch input {
+    position: absolute;
+    top: -99999px;
+    left: -99999px;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: get-color(others, white);
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: green;
+  }
+
+  input:focus + .slider {
+    box-shadow: 0 0 1px green;
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(26px);
+  }
+}

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

@@ -2,11 +2,11 @@
 import React, { type FC } from 'react'
 
 import { type ToggleProps } from './ToggleProps.types'
-import { ToggleStyled } from './Toggle.styled'
+// import './Toggle.scss'
 
 const Toggle: FC<ToggleProps> = ({ toggleAction, toggleCheck, label }) => {
   return (
-    <ToggleStyled className={'e-toggle'}>
+    <div className={'e-toggle'}>
       <label className='switch'>
         <input
           type='checkbox'
@@ -17,7 +17,7 @@ const Toggle: FC<ToggleProps> = ({ toggleAction, toggleCheck, label }) => {
         <div className='slider' />
       </label>
       <span>{label}</span>
-    </ToggleStyled>
+    </div>
   )
 }
 

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

@@ -2,21 +2,21 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .tippy-box {
-  background-color: var(--others-white);
-  border-radius: var(--global-border-radius);
+  background-color: get-color(others, white);
+  border-radius: $global-border-radius;
   font-size: 16px;
   line-height: 1.4;
   white-space: normal;
   outline: 0;
   transition: all 0.3s ease;
-  box-shadow: var(--box-shadow-tippy-box);
+  box-shadow: $box-shadow-tippy-box;
   z-index: 1000;
   color: inherit;
   cursor: pointer;
 
   &--inverted {
-    background-color: var(--neutral-neutral-1);
-    color: var(--others-white);
+    background-color: get-color(neutral, neutral-1);
+    color: get-color(others, white);
     border-radius: 0.3rem;
     font-size: 12px;
     box-shadow: none;
@@ -27,7 +27,7 @@
     }
 
     .tippy-arrow {
-      color: var(--neutral-neutral-1);
+      color: get-color(neutral, neutral-1);
     }
   }
 
@@ -48,7 +48,7 @@
     }
 
     & > svg g g {
-      fill: var(--neutral-neutral-1);
+      fill: get-color(neutral, neutral-1);
     }
   }
 }
@@ -58,5 +58,5 @@
 }
 
 .tippy-arrow {
-  color: var(--others-white);
+  color: get-color(others, white);
 }

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { TopBarStyled } from './TopBar.styled';
+// import './TopBar.scss'
 const TopBar = ({ hide, children }) => {
     if (children === undefined)
         return null;
     const classnames = classNames({
         '--is-hidden': hide
     });
-    return (_jsx(TopBarStyled, { className: `top-bar-wrapper ${classnames}`, children: _jsx("div", { className: 'top-bar', children: _jsx("div", { className: 'top-bar-content', children: children }) }) }));
+    return (_jsx("div", { className: `top-bar-wrapper ${classnames}`, children: _jsx("div", { className: 'top-bar', children: _jsx("div", { className: 'top-bar-content', children: children }) }) }));
 };
 export default TopBar;

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

@@ -0,0 +1,54 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.top-bar-wrapper {
+  display: none;
+  height: 35px;
+  overflow: hidden;
+  transition: all 0.6s ease;
+
+  &.--is-hidden {
+    height: 0;
+  }
+
+  @include landscape-tablets {
+    display: block;
+  }
+
+  @include mobile {
+    display: block;
+  }
+
+  .top-bar {
+    display: flex;
+    background-color: get-color(neutral, neutral-6);
+    font-size: 0.9rem;
+    letter-spacing: -0.3px;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: flex-end;
+    border: 1px solid get-color(neutral, neutral-4);
+
+    @include mobile {
+      align-items: center;
+    }
+
+    &-content {
+      margin: 0 1rem 5px;
+      @include mobile {
+        margin: 0;
+      }
+
+      svg,
+      img {
+        vertical-align: middle;
+      }
+
+      img {
+        margin-right: 8px;
+        display: inherit;
+      }
+    }
+  }
+}

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 import classNames from 'classnames'
 
 import { type TopBarProps } from './TopBarProps.types'
-import { TopBarStyled } from './TopBar.styled'
+// import './TopBar.scss'
 
 const TopBar: FC<TopBarProps> = ({ hide, children }) => {
   if (children === undefined) return null
@@ -12,11 +12,11 @@ const TopBar: FC<TopBarProps> = ({ hide, children }) => {
   })
 
   return (
-    <TopBarStyled className={`top-bar-wrapper ${classnames}`}>
+    <div className={`top-bar-wrapper ${classnames}`}>
       <div className={'top-bar'}>
         <div className={'top-bar-content'}>{children}</div>
       </div>
-    </TopBarStyled>
+    </div>
   )
 }
 

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

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { TopBarMobileStyled } from './TopBarMobile.styled';
 export const TopBarMobile = ({ children, isVisible = false }) => {
     const [isSSR, setIsSSR] = useState(false);
     useEffect(() => {
         setIsSSR(true);
     }, []);
-    return isSSR ? (_jsx(TopBarMobileStyled, { className: `top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`, children: children })) : null;
+    return isSSR ? _jsx("div", { className: `top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`, children: children }) : null;
 };

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { TopBarMobileStyled } from './TopBarMobile.styled'
+
+// import './TopBarMobile.scss'
 
 interface TopBarMobileProps {
   children: React.ReactNode
@@ -14,9 +15,5 @@ export const TopBarMobile: React.FC<TopBarMobileProps> = ({
   useEffect(() => {
     setIsSSR(true)
   }, [])
-  return isSSR ? (
-    <TopBarMobileStyled className={`top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`}>
-      {children}
-    </TopBarMobileStyled>
-  ) : null
+  return isSSR ? <div className={`top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`}>{children}</div> : null
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TrustPilotStyled } from './TrustPilot.styled';
+// import './TrustPilot.scss'
 const Trustpilot = ({ children }) => {
-    return _jsx(TrustPilotStyled, { className: 'trustpilot', children: children });
+    return _jsx("div", { className: 'trustpilot', children: children });
 };
 export default Trustpilot;

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

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

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { WhyLawDistrictItemsStyled } from './WhyLawDistrictItems.styled';
+// import './WhyLawDistrictItems.scss'
 export const WhyLawDistrictItems = ({ items }) => {
     if (items.length === 0)
         return null;
-    return (_jsx(WhyLawDistrictItemsStyled, { className: 'whyLawDistrictItems', children: items.map((item) => (_jsx("li", { className: 'whyLawDistrictItems__item', children: item.reasons }, item.id))) }));
+    return (_jsx("ul", { className: 'whyLawDistrictItems', children: items.map((item) => (_jsx("li", { className: 'whyLawDistrictItems__item', children: item.reasons }, item.id))) }));
 };
 export default WhyLawDistrictItems;

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

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

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { WideInfoBarStyled } from './WideInfoBar.styled';
 const WideInfoBar = ({ children, color }) => {
     if (children === undefined)
         return null;
-    return (_jsx(WideInfoBarStyled, { className: `wide-info-bar ${color ?? ''}`, children: _jsx("div", { className: 'wide-info-bar__wrapper', children: children }) }));
+    return (_jsx("div", { className: `wide-info-bar ${color ?? ''}`, children: _jsx("div", { className: 'wide-info-bar__wrapper', children: children }) }));
 };
 export default WideInfoBar;