@npm_leadtech/legal-lib-components 5.39.11 → 5.40.0

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

@@ -1,59 +1,110 @@
 @import '../../../globalStyles/variables.scss';
 @import '../../../globalStyles/mediaqueries.scss';
 
-@mixin defaultStyles {
+@mixin regularStyles {
   .e-radio__inner {
     display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    .radio-item-container {
-      .e-radio-label {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-
-        input[type='radio']:after {
-          width: 16px;
-          height: 16px;
-          border-radius: 16px;
-          top: -4px;
-          left: -2px;
-          position: relative;
-          background-color: var(--others-white);
-          content: '';
-          display: inline-block;
-          visibility: visible;
-          border: 1px solid var(--neutral-neutral-1);
-          cursor: pointer;
-        }
+    flex-flow: row wrap;
+    width: 100%;
+    margin-left: 1.5rem;
 
-        .e-radio-label__label {
-          cursor: pointer;
-        }
+    label {
+      margin-bottom: 0.25rem;
+      flex-basis: 100%;
+      display: flex;
+      align-items: center;
+      color: var(--neutral-main);
+      font-size: 16px;
+      position: relative;
+      cursor: pointer;
+      width: 100%;
+    }
+  }
+
+  input {
+    position: absolute;
+    left: -9999px;
+
+    &:not(:checked):hover + label {
+      &:before {
+        background-color: var(--primary-main-light-5);
       }
+    }
 
-      &.active {
-        .e-radio-label {
-          input[type='radio']:after {
-            border: 5px solid var(--primary-main);
-          }
-          .e-radio-label__label {
-            color: var(--primary-main);
-          }
-        }
+    &:checked:hover + label {
+      &:before {
+        background-color: var(--primary-main);
       }
+    }
 
-      &:hover {
-        .e-radio-label {
-          input[type='radio']:after {
-            background-color: var(--primary-main-light-5);
-          }
-        }
+    &:checked + label {
+      color: var(--primary-main);
+      text-shadow:
+        -0.02ex 0 get-color(primary),
+        0.02ex 0 var(--primary-main);
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: -23px;
+        height: 1.25rem;
+        width: 1.25rem;
+        background-color: var(--primary-main);
+        border: 1px solid var(--primary-main);
+        border-radius: 50%;
+        box-sizing: border-box;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0.5rem;
+        left: -17px;
+        display: block;
+        height: 0.5rem;
+        width: 0.5rem;
+        background: currentColor;
+        border-radius: 50%;
+        opacity: 1;
+        transform: scale(1);
+        color: #fff;
+        transition: all 0.1s;
       }
     }
 
-    @include portrait-tablets {
-      gap: 0.5rem;
+    + label {
+      cursor: pointer;
+      font-size: 16px;
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: -23px;
+        top: 2px;
+        height: 1.25rem;
+        width: 1.25rem;
+        border-radius: 50%;
+        background-color: transparent;
+        border: 1px solid var(--neutral-main);
+        box-sizing: border-box;
+      }
+
+      &:after {
+        position: absolute;
+        top: 0.5rem;
+        left: -17px;
+        display: block;
+        height: 0.5rem;
+        width: 0.5rem;
+        opacity: 0;
+        transform: scale(0);
+        color: var(--others-white);
+        transition: all 0.1s;
+        content: '';
+        bottom: 0.5rem;
+        border-radius: 50%;
+      }
     }
   }
 }
@@ -127,69 +178,62 @@
 }
 
 @mixin iconStyles {
-  .e-radio__inner {
-    display: flex;
-    flex-flow: row wrap;
-    margin-top: 1.5rem;
+  .radio-icon {
+    display: none;
   }
+  @include portrait-tablets {
+    .e-radio__inner {
+      display: flex;
+      flex-flow: row wrap;
+      margin-top: 1.5rem;
+    }
 
-  .radio-item-container {
-    display: flex;
-    width: 47%;
-    border: 1px solid black;
-    min-width: 80px;
-    min-height: 3.5rem;
-    margin-bottom: 0.5rem;
-    border-radius: var(--global-border-radius);
-    border-color: var(--neutral-neutral-4);
-    cursor: pointer;
-  }
+    .radio-item-container {
+      display: flex;
+      width: 47%;
+      border: 1px solid black;
+      min-width: 80px;
+      min-height: 3.5rem;
+      margin-bottom: 0.5rem;
+      border-radius: var(--global-border-radius);
+      border-color: var(--neutral-neutral-4);
+      cursor: pointer;
+    }
 
-  .radio-item-container:not(:nth-child(2n + 0)) {
-    margin-right: 0.5rem;
-  }
+    .radio-item-container:not(:nth-child(2n + 0)) {
+      margin-right: 0.5rem;
+    }
 
-  .radio-item-input {
-    position: absolute;
-    visibility: hidden;
-  }
+    .radio-item-input {
+      position: absolute;
+      visibility: hidden;
+    }
 
-  .radio-item-container.active {
-    border: 2px solid var(--primary-main-dark-1);
-    background-color: var(--neutral-neutral-5);
-  }
+    .radio-item-container.active {
+      border: 2px solid var(--primary-main-dark-1);
+      background-color: var(--neutral-neutral-5);
+    }
 
-  .radio-item-container:hover {
-    background-color: var(--neutral-neutral-5);
-    font-weight: bold;
-  }
+    .radio-item-container:hover {
+      background-color: var(--neutral-neutral-5);
+      font-weight: bold;
+    }
 
-  .e-radio-label {
-    display: flex;
-    align-items: center;
-    padding: 0.25rem 1rem;
-    width: 100%;
-  }
+    .e-radio-label {
+      display: flex;
+      align-items: center;
+      padding: 0.25rem 1rem;
+      width: 100%;
+    }
 
-  .radio-icon {
-    display: block;
-    margin-right: 1rem;
+    .radio-icon {
+      display: block;
+      margin-right: 1rem;
+    }
   }
 }
 
 .e-radio {
-  .label {
-    color: var(--neutral-neutral-1);
-    margin-bottom: 1rem;
-    display: block;
-  }
-
-  &.default {
-    @include defaultStyles;
-  }
-
-  // por aqui
-
   label:first-child:not(.e-radio-label) {
     font-weight: bold;
   }
@@ -198,6 +242,17 @@
     width: 100%;
   }
 
+  &.--regular {
+    @media (max-width: #{$xs}) {
+      @include regularStyles;
+    }
+    &:not(.--icons) {
+      @media (min-width: #{$xs}) {
+        @include regularStyles;
+      }
+    }
+  }
+
   &.--tabs {
     @media (max-width: #{$xs}) {
       @include tabsStyles;
@@ -210,19 +265,21 @@
   }
 
   &.--icons {
-    @include mobile {
-      @include defaultStyles();
-    }
-    .radio-icon {
-      display: none;
-    }
-    @include portrait-tablets {
-      @include iconStyles;
-    }
+    @include iconStyles;
   }
 
   &.--is-invalid,
   &.--group-invalid {
+    &.--regular {
+      input {
+        & + label {
+          &:before {
+            border-color: var(--error-main);
+          }
+        }
+      }
+    }
+
     &.--tabs,
     &.--group-invalid {
       .e-radio__inner {
@@ -244,6 +301,10 @@
   }
 }
 
+.radio-group__label {
+  color: var(--neutral-neutral-1);
+}
+
 .e-radio.radio--small.--tabs {
   input + label {
     font-size: 0.875rem;
@@ -255,3 +316,24 @@
     margin-bottom: 0;
   }
 }
+
+.e-radio.radio--narrow.--regular {
+  .e-radio__inner {
+    margin-top: 0.5rem;
+  }
+}
+
+.e-radio.--regular.radio--regular--bare {
+  .e-radio__inner {
+    display: inline-block;
+    margin-right: auto;
+    text-align: left;
+    width: auto;
+  }
+
+  .e-radio-label,
+  .e-radio-label__label {
+    display: block;
+    margin-bottom: 0.75rem;
+  }
+}

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

@@ -1,39 +1,35 @@
-import React from 'react'
+import React, { type FC } from 'react'
 
-import { RadioFormat, type RadioProps } from './RadioProps.types'
 import IconImage from '../IconImage/IconImage'
+import { type RadioProps } from './RadioProps.types'
 // import './Radio.scss'
 
-const Radio: React.FC<RadioProps> = ({
-  class: className,
-  format = RadioFormat.Default,
-  validate = false,
-  isValidGroup = false,
-  tooltip,
-  name,
-  label,
-  items,
-  value,
-  disabled = false,
-  help,
-  onChange
-}) => {
-  const [classNameValue] = React.useState<string>(() => {
-    let value = `e-radio ${format}`
-    if (className) value += ` ${className}`
-    if (!validate) value += ' --is-invalid'
-    if (!isValidGroup) value += ' --group-invalid'
-    return value
-  })
+const Radio: FC<RadioProps> = (props) => {
+  const optionalClassNames = {
+    small: 'radio--small',
+    narrow: 'radio--narrow',
+    regularBare: 'radio--regular--bare'
+  }
+
+  const additionalClassNames = Object.keys(optionalClassNames)
+    .filter((attribute) => props[attribute])
+    .map((key) => optionalClassNames[key])
+    .join(' ')
+
+  const classNames = `e-radio ${props.class} ${!props.validate ? '--is-invalid' : ''} ${
+    !props.isValidGroup ? '--group-invalid' : ''
+  } ${additionalClassNames}`
+  const TooltipObject = props.tooltip ? <p className='tooltip-form sans-serif --small'>{props.tooltip}</p> : ''
+
   return (
-    <div className={classNameValue}>
-      <label htmlFor={name} className='sans-serif --medium --bold-weight label'>
-        {label}
+    <div className={classNames}>
+      <label htmlFor={props.name} className='radio-group__label'>
+        {props.label}
       </label>
       <div className={'e-radio__inner'}>
-        {items.map((radio) => {
+        {props.items?.map((radio) => {
           return (
-            <div className={`radio-item-container ${radio.value === value ? 'active' : ''}`} key={radio.value}>
+            <div className={`radio-item-container ${radio.value === props.value ? 'active' : ''}`} key={radio.value}>
               <label className='e-radio-label' key={radio.value}>
                 {radio.iconName !== undefined && radio.iconName !== '' && (
                   <IconImage givenClass='radio-icon' iconName={radio.iconName} />
@@ -41,27 +37,27 @@ const Radio: React.FC<RadioProps> = ({
                 <input
                   type='radio'
                   className='radio-item-input'
-                  id={`${name}_${radio.value}`}
-                  name={name}
-                  onChange={onChange}
+                  id={`${props.name}_${radio.value}`}
+                  name={props.name}
+                  onChange={props.onChange}
                   value={radio.value}
-                  checked={radio.value === value}
-                  disabled={disabled}
+                  checked={radio.value === props.value}
+                  disabled={props.disabled}
                 />
                 <label
-                  className='e-radio-label__label sans-serif --medium'
-                  htmlFor={`${name}_${radio.value}`}
-                  data-qa={`${name}_${radio.value}`}
+                  className='e-radio-label__label'
+                  htmlFor={`${props.name}_${radio.value}`}
+                  data-qa={`${props.name}_${radio.value}`}
                 >
                   {radio.label}
                 </label>
-                {help && <div>{help}</div>}
+                <div>{props.help}</div>
               </label>
             </div>
           )
         })}
       </div>
-      {tooltip ?? <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
+      {TooltipObject}
     </div>
   )
 }

package/dist/src/components/atoms/Radio/RadioProps.types.d.ts

@@ -1,24 +1,18 @@
 export interface RadioProps {
     id?: string;
-    name: string;
+    name?: string;
     class?: string;
-    format?: RadioFormat;
     value?: string;
     tooltip?: string;
-    label: string;
+    label?: string;
     help?: string;
     validate?: boolean;
     isValidGroup?: boolean;
     disabled?: boolean;
-    items: {
+    items?: {
         value: string;
         label: string;
         iconName?: string;
     }[];
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare enum RadioFormat {
-    Default = "default",
-    Tabs = "--tabs",
-    Icons = "--icons"
-}

package/dist/src/components/atoms/Radio/RadioProps.types.js

@@ -1,6 +1 @@
-export var RadioFormat;
-(function (RadioFormat) {
-    RadioFormat["Default"] = "default";
-    RadioFormat["Tabs"] = "--tabs";
-    RadioFormat["Icons"] = "--icons";
-})(RadioFormat || (RadioFormat = {}));
+export {};

package/dist/src/components/atoms/Radio/RadioProps.types.ts

@@ -1,21 +1,14 @@
 export interface RadioProps {
   id?: string
-  name: string
+  name?: string
   class?: string
-  format?: RadioFormat
   value?: string
   tooltip?: string
-  label: string
+  label?: string
   help?: string
   validate?: boolean
   isValidGroup?: boolean
   disabled?: boolean
-  items: { value: string; label: string; iconName?: string }[]
+  items?: { value: string; label: string; iconName?: string }[]
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
-
-export enum RadioFormat {
-  Default = 'default',
-  Tabs = '--tabs',
-  Icons = '--icons'
-}

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

@@ -1,2 +1,2 @@
 export { default as Radio } from './Radio';
-export * from './RadioProps.types';
+export { type RadioProps } from './RadioProps.types';

package/dist/src/components/atoms/Radio/index.js

@@ -1,2 +1 @@
 export { default as Radio } from './Radio';
-export * from './RadioProps.types';

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

@@ -1,2 +1,2 @@
 export { default as Radio } from './Radio'
-export * from './RadioProps.types'
+export { type RadioProps } from './RadioProps.types'

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

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TagRatafiaItemStyled } from './TagRatafiaItem.styled';
-export const TagRatafiaItem = ({ icon, description }) => {
-    return (_jsxs(TagRatafiaItemStyled, { className: 'tag-ratafia-item', children: [icon !== null && _jsx("div", { className: 'tag-ratafia-item__icon', children: icon }), _jsx("span", { className: 'sans-serif --small tag-ratafia-item__description', itemProp: 'text', children: description })] }));
+export const TagRatafiaItem = ({ icon, description, type = 'ratafia' }) => {
+    const typeClasses = {
+        esignature: 'tag-esignature-item',
+        ratafia: 'tag-ratafia-item'
+    };
+    const styleClasses = typeClasses[type];
+    return (_jsxs(TagRatafiaItemStyled, { className: styleClasses, children: [icon !== null && _jsx("div", { className: `${styleClasses}__icon'`, children: icon }), _jsx("span", { className: `sans-serif --small ${styleClasses}__description`, itemProp: 'text', children: description })] }));
 };
 export default TagRatafiaItem;

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

@@ -9,6 +9,10 @@ export const TagRatafiaItemStyled = styled.div `
   gap: 0.25rem;
   padding: 0.25rem 0.5rem;
 
+  &.tag-esignature-item {
+    background: var(--primary-main-dark-1);
+  }
+
   .tag-ratafia-item {
     &__icon {
       height: 16px;
@@ -19,4 +23,15 @@ export const TagRatafiaItemStyled = styled.div `
       color: var(--primary-main-dark-2);
     }
   }
+
+  .tag-esignature-item {
+    &__icon {
+      height: 16px;
+      width: 16px;
+    }
+    &__description {
+      font-weight: 700;
+      color: var(--primary-main-light-6);
+    }
+  }
 `;

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

@@ -10,6 +10,10 @@ export const TagRatafiaItemStyled = styled.div`
   gap: 0.25rem;
   padding: 0.25rem 0.5rem;
 
+  &.tag-esignature-item {
+    background: var(--primary-main-dark-1);
+  }
+
   .tag-ratafia-item {
     &__icon {
       height: 16px;
@@ -20,4 +24,15 @@ export const TagRatafiaItemStyled = styled.div`
       color: var(--primary-main-dark-2);
     }
   }
+
+  .tag-esignature-item {
+    &__icon {
+      height: 16px;
+      width: 16px;
+    }
+    &__description {
+      font-weight: 700;
+      color: var(--primary-main-light-6);
+    }
+  }
 `

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

@@ -3,11 +3,18 @@ import React from 'react'
 import { type TagRatafiaItemProps } from './TagRatafiaItemProps.types'
 import { TagRatafiaItemStyled } from './TagRatafiaItem.styled'
 
-export const TagRatafiaItem: React.FC<TagRatafiaItemProps> = ({ icon, description }) => {
+export const TagRatafiaItem: React.FC<TagRatafiaItemProps> = ({ icon, description, type = 'ratafia' }) => {
+  const typeClasses = {
+    esignature: 'tag-esignature-item',
+    ratafia: 'tag-ratafia-item'
+  }
+
+  const styleClasses = typeClasses[type]
+
   return (
-    <TagRatafiaItemStyled 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'>
+    <TagRatafiaItemStyled className={styleClasses}>
+      {icon !== null && <div className={`${styleClasses}__icon'`}>{icon}</div>}
+      <span className={`sans-serif --small ${styleClasses}__description`} itemProp='text'>
         {description}
       </span>
     </TagRatafiaItemStyled>

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItemProps.types.d.ts

@@ -2,4 +2,5 @@ export interface TagRatafiaItemProps {
     id: string;
     description: React.ReactNode;
     icon?: React.ReactNode;
+    type?: string;
 }

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItemProps.types.ts

@@ -2,4 +2,5 @@ export interface TagRatafiaItemProps {
   id: string
   description: React.ReactNode
   icon?: React.ReactNode
+  type?: string
 }

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms';
 import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled';
 import { stringSlugify } from '../../../utils/stringSlugify';
-const RatafiaSubscriptionCard = ({ cardStyle = 'primary', iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, handleClick }) => {
+const RatafiaSubscriptionCard = ({ cardStyle, iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, linkText }) => {
     if (!title)
         return null;
     const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary';
     const renderFeatures = (features, className) => features.map((feature) => (_jsxs("div", { className: `ratafia-card__feature ${className ?? ''}`, children: [feature.image?.url && _jsx(IconSvgURLWithThemeColor, { url: feature.image.url, height: '16', width: '16' }), _jsx(RichTextStrapi, { html: feature.title })] }, feature.title)));
-    return (_jsxs(RatafiaSubscriptionCardStyled, { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ratafia-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: 'ratafia-card-button', givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, noLink: true, onClick: handleClick }) }))] }));
+    return (_jsxs(RatafiaSubscriptionCardStyled, { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ratafia-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: 'ratafia-card-button', givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, link: linkText ?? '#' }) }))] }));
 };
 export default RatafiaSubscriptionCard;