@npm_leadtech/legal-lib-components 5.2.7 → 5.2.9

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

@@ -0,0 +1,58 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PopularDocsItemStyled = styled.a `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 24px 16px 24px 24px;
+  gap: calc(1rem * 2);
+  height: 6rem;
+  background: var(--others-white);
+  box-shadow: var(--box-shadow-container);
+  border-radius: var(--global-border-radius);
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--neutral-neutral-5);
+    cursor: pointer;
+
+    .icon-left svg .main-fill {
+      fill: var(--primary-main);
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    margin-left: 0.5rem;
+  }
+
+  .category-icon svg {
+    fill: var(--primary-main-dark-1);
+  }
+
+  .category-icon i {
+    background-color: var(--primary-main-dark-1);
+  }
+
+  .texts {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    width: 100%;
+
+    .description {
+      color: var(--neutral-neutral-2);
+      font-size: 12px;
+      line-height: 1.33;
+      margin-top: 0.3rem;
+    }
+  }
+
+  .icon-left svg {
+    width: 40px;
+    height: 40px;
+
+    .main-fill {
+      fill: var(--neutral-neutral-4);
+    }
+  }
+`;

package/dist/src/components/atoms/PopularDocsItem/{PopularDocsItem.scss → PopularDocsItem.styled.ts}

@@ -1,20 +1,33 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.popular-docs-item {
+export const PopularDocsItemStyled = styled.a`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 24px 16px 24px 24px;
-  gap: $global-gap * 2;
+  gap: calc(1rem * 2);
   height: 6rem;
-  background: get-color(others, white);
-  box-shadow: $box-shadow-container;
-  border-radius: $global-border-radius;
+  background: var(--others-white);
+  box-shadow: var(--box-shadow-container);
+  border-radius: var(--global-border-radius);
   text-decoration: none;
 
+  &:hover {
+    background-color: var(--neutral-neutral-5);
+    cursor: pointer;
+
+    .icon-left svg .main-fill {
+      fill: var(--primary-main);
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    margin-left: 0.5rem;
+  }
+
   .category-icon svg {
-    fill: get-color(primary, main-dark-1);
+    fill: var(--primary-main-dark-1);
   }
 
   .category-icon i {
@@ -28,7 +41,7 @@
     width: 100%;
 
     .description {
-      color: get-color(neutral, neutral-2);
+      color: var(--neutral-neutral-2);
       font-size: 12px;
       line-height: 1.33;
       margin-top: 0.3rem;
@@ -40,20 +53,7 @@
     height: 40px;
 
     .main-fill {
-      fill: get-color(neutral, neutral-4);
+      fill: var(--neutral-neutral-4);
     }
   }
-
-  &:hover {
-    background-color: get-color(neutral, neutral-5);
-    cursor: pointer;
-
-    .icon-left svg .main-fill {
-      fill: get-color(primary, main);
-    }
-  }
-
-  @include landscape-tablets {
-    margin-left: 0.5rem;
-  }
-}
+`

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

@@ -2,12 +2,12 @@ import React from 'react'
 
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px'
 import { type PopularDocsItemProps } from './PopularDocsItemProps'
+import { PopularDocsItemStyled } from './PopularDocsItem.styled'
 import { getCategoryIcons } from '../../../utils/getCategoryIcons'
-// import './PopularDocsItem.scss'
 
 export const PopularDocsItem: React.FC<PopularDocsItemProps> = ({ title, description, slug, icon = null }) => {
   return (
-    <a className='popular-docs-item' href={slug} data-qa={title.replace(/\s/g, '_')}>
+    <PopularDocsItemStyled className='popular-docs-item' href={slug} data-qa={title.replace(/\s/g, '_')}>
       <div className='category-icon'>{icon ?? getCategoryIcons(description, 35, 30)}</div>
       <div className='texts'>
         <div>
@@ -18,6 +18,6 @@ export const PopularDocsItem: React.FC<PopularDocsItemProps> = ({ title, descrip
       <div className='icon-left'>
         <ChevronRight24px />
       </div>
-    </a>
+    </PopularDocsItemStyled>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './ProgressBar.scss'
+import { ProgressBarStyled } from './ProgressBar.styled';
 const ProgressBar = ({ currentStep, allSteps }) => {
     const currentProgress = (100 * currentStep) / allSteps.length;
-    return (_jsxs("section", { className: 'progress__wrapper', children: [_jsx("div", { className: 'progressbar', style: { width: `${currentProgress}%` } }), _jsx("div", { className: 'progressbar__remain' })] }));
+    return (_jsxs(ProgressBarStyled, { className: 'progress__wrapper', children: [_jsx("div", { className: 'progressbar', style: { width: `${currentProgress}%` } }), _jsx("div", { className: 'progressbar__remain' })] }));
 };
 export default ProgressBar;

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

@@ -0,0 +1 @@
+export declare const ProgressBarStyled: 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/ProgressBar/ProgressBar.styled.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export const ProgressBarStyled = styled.section `
+  position: absolute;
+  width: 100%;
+  top: 5.25rem;
+  left: 0;
+  height: 0.25rem;
+
+  .progressbar {
+    height: 100%;
+    background: var(--primary-main);
+    transition: width 0.3s ease;
+    will-change: width;
+  }
+  .progressbar__remain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--primary-main-light-5);
+    z-index: -1;
+    transform: translateY(-100%);
+  }
+`;

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+export const ProgressBarStyled = styled.section`
+  position: absolute;
+  width: 100%;
+  top: 5.25rem;
+  left: 0;
+  height: 0.25rem;
+
+  .progressbar {
+    height: 100%;
+    background: var(--primary-main);
+    transition: width 0.3s ease;
+    will-change: width;
+  }
+  .progressbar__remain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--primary-main-light-5);
+    z-index: -1;
+    transform: translateY(-100%);
+  }
+`

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

@@ -2,16 +2,16 @@
 import React, { type FC } from 'react'
 
 import { type ProgressBarProps } from './ProgressBarProps.types'
-// import './ProgressBar.scss'
+import { ProgressBarStyled } from './ProgressBar.styled'
 
 const ProgressBar: FC<ProgressBarProps> = ({ currentStep, allSteps }) => {
   const currentProgress = (100 * currentStep) / allSteps.length
 
   return (
-    <section className={'progress__wrapper'}>
+    <ProgressBarStyled className={'progress__wrapper'}>
       <div className={'progressbar'} style={{ width: `${currentProgress}%` }} />
       <div className={'progressbar__remain'} />
-    </section>
+    </ProgressBarStyled>
   )
 }
 

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

@@ -15,7 +15,7 @@
       flex-basis: 100%;
       display: flex;
       align-items: center;
-      color: get-color(neutral);
+      color: var(--neutral-main);
       font-size: 16px;
       position: relative;
       cursor: pointer;
@@ -29,21 +29,21 @@
 
     &:not(:checked):hover + label {
       &:before {
-        background-color: get-color(primary, main-light-5);
+        background-color: var(--primary-main-light-5);
       }
     }
 
     &:checked:hover + label {
       &:before {
-        background-color: get-color(primary);
+        background-color: var(--primary-main);
       }
     }
 
     &:checked + label {
-      color: get-color(primary);
+      color: var(--primary-main);
       text-shadow:
         -0.02ex 0 get-color(primary),
-        0.02ex 0 get-color(primary);
+        0.02ex 0 var(--primary-main);
 
       &:before {
         content: '';
@@ -52,8 +52,8 @@
         left: -23px;
         height: 1.25rem;
         width: 1.25rem;
-        background-color: get-color(primary);
-        border: 1px solid get-color(primary);
+        background-color: var(--primary-main);
+        border: 1px solid var(--primary-main);
         border-radius: 50%;
         box-sizing: border-box;
       }
@@ -88,7 +88,7 @@
         width: 1.25rem;
         border-radius: 50%;
         background-color: transparent;
-        border: 1px solid get-color(neutral);
+        border: 1px solid var(--neutral-main);
         box-sizing: border-box;
       }
 
@@ -101,7 +101,7 @@
         width: 0.5rem;
         opacity: 0;
         transform: scale(0);
-        color: get-color(others, white);
+        color: var(--others-white);
         transition: all 0.1s;
         content: '';
         bottom: 0.5rem;
@@ -118,17 +118,17 @@
     margin-bottom: 2rem;
     width: 10rem;
     margin-top: 1rem;
-    border: 1px solid get-color(neutral, neutral-3);
-    background: get-color(neutral, neutral-6);
-    border-radius: $global-border-radius;
+    border: 1px solid var(--neutral-neutral-3);
+    background: var(--neutral-neutral-6);
+    border-radius: var(--global-border-radius);
     transition: all 0.3s ease;
 
     .e-radio-label {
       width: 100%;
       display: flex;
-      border-right: 1px solid get-color(neutral, neutral-3);
-      border-top-left-radius: $global-border-radius;
-      border-bottom-left-radius: $global-border-radius;
+      border-right: 1px solid var(--neutral-neutral-3);
+      border-top-left-radius: var(--global-border-radius);
+      border-bottom-left-radius: var(--global-border-radius);
 
       &:last-child {
         border-right: none;
@@ -146,29 +146,29 @@
       transition: all 0.3s ease;
 
       &:hover {
-        background: get-color(neutral, neutral-4);
+        background: var(--neutral-neutral-4);
       }
     }
 
     &:checked + label {
       font-weight: bold;
-      color: get-color(others, white);
+      color: var(--others-white);
       width: 100%;
       cursor: pointer;
       transition: all 0.3s ease;
-      background-color: get-color(primary);
+      background-color: var(--primary-main);
       text-align: center;
       padding: 10px;
 
       &:hover {
-        background-color: get-color(primary);
+        background-color: var(--primary-main);
       }
     }
 
     &:not(:checked) + label {
       text-align: center;
       width: 100%;
-      color: get-color(neutral, neutral-1);
+      color: var(--neutral-neutral-1);
       font-weight: bold;
       padding: 10px;
     }
@@ -197,8 +197,8 @@
       min-width: 80px;
       min-height: 3.5rem;
       margin-bottom: 0.5rem;
-      border-radius: $global-border-radius;
-      border-color: get-color(neutral, neutral-4);
+      border-radius: var(--global-border-radius);
+      border-color: var(--neutral-neutral-4);
       cursor: pointer;
     }
 
@@ -212,12 +212,12 @@
     }
 
     .radio-item-container.active {
-      border: 2px solid get-color(primary, main-dark-1);
-      background-color: get-color(neutral, neutral-5);
+      border: 2px solid var(--primary-main-dark-1);
+      background-color: var(--neutral-neutral-5);
     }
 
     .radio-item-container:hover {
-      background-color: get-color(neutral, neutral-5);
+      background-color: var(--neutral-neutral-5);
       font-weight: bold;
     }
 
@@ -276,7 +276,7 @@
       input {
         & + label {
           &:before {
-            border-color: get-color(error);
+            border-color: var(--error-main);
           }
         }
       }
@@ -285,11 +285,11 @@
     &.--tabs,
     &.--group-invalid {
       .e-radio__inner {
-        border: 1px solid get-color(error);
+        border: 1px solid var(--error-main);
 
         label {
           label {
-            border-right: 1px solid get-color(error);
+            border-right: 1px solid var(--error-main);
           }
 
           &:last-child {
@@ -304,7 +304,7 @@
 }
 
 .radio-group__label {
-  color: get-color(neutral, neutral-1);
+  color: var(--neutral-neutral-1);
 }
 
 .e-radio.radio--small.--tabs {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './RemoveButton.scss'
+import { RemoveButtonStyled } from './RemoveButton.styled';
 const RemoveButton = ({ label = '', className = '', items, name = '', onChange = () => { }, value, disabled = false, tooltip = undefined }) => {
     const fieldLabel = label;
-    return (_jsxs("div", { className: `e-removeButton ${className}`, children: [items.removeButton.value !== '' && (_jsxs("div", { className: 'e-removeButton__inner', children: [_jsx("input", { type: 'radio', id: `${name}_${items.removeButton.value}`, name: name, onChange: onChange, value: items.removeButton.value, checked: items.removeButton.value === value, disabled: disabled, "data-qa": `${name}_${items.removeButton.value}` }), _jsx("label", { htmlFor: `${name}_${items.removeButton.value}`, children: fieldLabel })] })), tooltip !== undefined && _jsx("p", { className: 'tooltip sans-serif --extra-small', children: tooltip })] }));
+    return (_jsxs(RemoveButtonStyled, { className: `e-removeButton ${className}`, children: [items.removeButton.value !== '' && (_jsxs("div", { className: 'e-removeButton__inner', children: [_jsx("input", { type: 'radio', id: `${name}_${items.removeButton.value}`, name: name, onChange: onChange, value: items.removeButton.value, checked: items.removeButton.value === value, disabled: disabled, "data-qa": `${name}_${items.removeButton.value}` }), _jsx("label", { htmlFor: `${name}_${items.removeButton.value}`, children: fieldLabel })] })), tooltip !== undefined && _jsx("p", { className: 'tooltip sans-serif --extra-small', children: tooltip })] }));
 };
 export default RemoveButton;

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

@@ -0,0 +1 @@
+export declare const RemoveButtonStyled: 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/RemoveButton/RemoveButton.styled.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+export const RemoveButtonStyled = styled.section `
+  display: inline-block;
+
+  .e-removeButton {
+    &__inner {
+      display: inline-block;
+      margin-top: 1rem;
+      color: var(--error-main);
+
+      border-radius: var(--global-border-radius);
+      transition: all 0.3s ease;
+
+      label {
+        display: flex;
+        flex-basis: 100%;
+        align-items: center;
+        position: relative;
+        border: 1px solid var(--error-main);
+        border-radius: 4px;
+        cursor: pointer;
+        padding: 0.75rem 1rem;
+      }
+
+      &:hover {
+        background-color: var(--error-error-3);
+      }
+    }
+  }
+
+  input {
+    position: absolute;
+    left: -9999px;
+
+    &:checked + label {
+      border-radius: var(--global-border-radius);
+    }
+
+    & + label {
+      font-weight: bold;
+    }
+  }
+`;

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

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+export const RemoveButtonStyled = styled.section`
+  display: inline-block;
+
+  .e-removeButton {
+    &__inner {
+      display: inline-block;
+      margin-top: 1rem;
+      color: var(--error-main);
+
+      border-radius: var(--global-border-radius);
+      transition: all 0.3s ease;
+
+      label {
+        display: flex;
+        flex-basis: 100%;
+        align-items: center;
+        position: relative;
+        border: 1px solid var(--error-main);
+        border-radius: 4px;
+        cursor: pointer;
+        padding: 0.75rem 1rem;
+      }
+
+      &:hover {
+        background-color: var(--error-error-3);
+      }
+    }
+  }
+
+  input {
+    position: absolute;
+    left: -9999px;
+
+    &:checked + label {
+      border-radius: var(--global-border-radius);
+    }
+
+    & + label {
+      font-weight: bold;
+    }
+  }
+`

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

@@ -2,7 +2,7 @@
 import React, { type FC } from 'react'
 
 import { type RemoveButtonProps } from './RemoveButtonProps.types'
-// import './RemoveButton.scss'
+import { RemoveButtonStyled } from './RemoveButton.styled'
 
 const RemoveButton: FC<RemoveButtonProps> = ({
   label = '',
@@ -17,7 +17,7 @@ const RemoveButton: FC<RemoveButtonProps> = ({
   const fieldLabel = label
 
   return (
-    <div className={`e-removeButton ${className}`}>
+    <RemoveButtonStyled className={`e-removeButton ${className}`}>
       {items.removeButton.value !== '' && (
         <div className={'e-removeButton__inner'}>
           <input
@@ -34,7 +34,7 @@ const RemoveButton: FC<RemoveButtonProps> = ({
         </div>
       )}
       {tooltip !== undefined && <p className={'tooltip sans-serif --extra-small'}>{tooltip}</p>}
-    </div>
+    </RemoveButtonStyled>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './ReviewKeyFactsResultRatafia.scss'
+import { ReviewKeyFactsResultRatafiaStyled } from './ReviewKeyFactsResultRatafia.styled';
 export const ReviewKeyFactsResultRatafia = ({ reviewQuestion, reviewPositiveIcon, reviewPositiveText, handleOnClickReviewPositive, reviewPositiveDataQa = true, reviewNegativeIcon, reviewNegativeText, handleOnClickReviewNegative, reviewNegativeDataQa, reviewFeedbackText, review }) => {
-    return (_jsx("div", { className: 'review-key-facts-result', children: review === null ? (_jsxs("div", { className: 'review-key-facts-result__review', children: [_jsx("p", { className: 'sans-serif review-key-facts-result__review__question', children: reviewQuestion }), _jsxs("div", { className: 'review-key-facts-result__review__buttons', children: [_jsxs("button", { className: 'review-key-facts-result__review__buttons__item', onClick: handleOnClickReviewPositive, "data-qa": reviewPositiveDataQa, children: [_jsx("div", { className: 'review-key-facts-result__review__buttons__item__icon', children: reviewPositiveIcon }), _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__buttons__item__text positive', children: reviewPositiveText })] }), _jsxs("button", { className: 'review-key-facts-result__review__buttons__item', onClick: handleOnClickReviewNegative, "data-qa": reviewNegativeDataQa, children: [_jsx("div", { className: 'review-key-facts-result__review__buttons__item__icon', children: reviewNegativeIcon }), _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__buttons__item__text negative', children: reviewNegativeText })] })] })] })) : (_jsx("div", { className: 'review-key-facts-result__review', children: _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__question', children: reviewFeedbackText }) })) }));
+    return (_jsx(ReviewKeyFactsResultRatafiaStyled, { className: 'review-key-facts-result', children: review === null ? (_jsxs("div", { className: 'review-key-facts-result__review', children: [_jsx("p", { className: 'sans-serif review-key-facts-result__review__question', children: reviewQuestion }), _jsxs("div", { className: 'review-key-facts-result__review__buttons', children: [_jsxs("button", { className: 'review-key-facts-result__review__buttons__item', onClick: handleOnClickReviewPositive, "data-qa": reviewPositiveDataQa, children: [_jsx("div", { className: 'review-key-facts-result__review__buttons__item__icon', children: reviewPositiveIcon }), _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__buttons__item__text positive', children: reviewPositiveText })] }), _jsxs("button", { className: 'review-key-facts-result__review__buttons__item', onClick: handleOnClickReviewNegative, "data-qa": reviewNegativeDataQa, children: [_jsx("div", { className: 'review-key-facts-result__review__buttons__item__icon', children: reviewNegativeIcon }), _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__buttons__item__text negative', children: reviewNegativeText })] })] })] })) : (_jsx("div", { className: 'review-key-facts-result__review', children: _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__question', children: reviewFeedbackText }) })) }));
 };
 export default ReviewKeyFactsResultRatafia;

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

@@ -0,0 +1 @@
+export declare const ReviewKeyFactsResultRatafiaStyled: 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/ReviewKeyFactsResultRatafia/ReviewKeyFactsResultRatafia.styled.js

@@ -0,0 +1,55 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ReviewKeyFactsResultRatafiaStyled = styled.section `
+  .review-key-facts-result {
+    &__review {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      gap: 1rem;
+
+      border-radius: 4px;
+      background: var(--others-white);
+
+      &__question {
+        color: var(--neutral-neutral-1);
+        font-size: 0.75rem;
+        @media ${device['portrait-tablets']} {
+          font-size: 0.875rem;
+        }
+      }
+
+      &__buttons {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        &__item {
+          display: flex;
+          padding: 0.25rem 0.5rem;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          flex: 1 0 0;
+
+          border: none;
+          border-radius: 4px;
+          background: var(--neutral-neutral-6);
+
+          cursor: pointer;
+
+          &__icon {
+            width: 14px;
+          }
+          .positive {
+            color: var(--primary-main);
+          }
+          .negative {
+            color: var(--error-main);
+          }
+        }
+      }
+    }
+  }
+`;