@npm_leadtech/legal-lib-components 5.39.9 → 5.39.10

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

@@ -1,110 +1,59 @@
 @import '../../../globalStyles/variables.scss';
 @import '../../../globalStyles/mediaqueries.scss';
 
-@mixin regularStyles {
+@mixin defaultStyles {
   .e-radio__inner {
     display: flex;
-    flex-flow: row wrap;
-    width: 100%;
-    margin-left: 1.5rem;
-
-    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);
-      }
-    }
+    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;
+        }
 
-    &:checked:hover + label {
-      &:before {
-        background-color: var(--primary-main);
+        .e-radio-label__label {
+          cursor: pointer;
+        }
       }
-    }
 
-    &: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;
+      &.active {
+        .e-radio-label {
+          input[type='radio']:after {
+            border: 5px solid var(--primary-main);
+          }
+          .e-radio-label__label {
+            color: var(--primary-main);
+          }
+        }
       }
 
-      &: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;
+      &:hover {
+        .e-radio-label {
+          input[type='radio']:after {
+            background-color: var(--primary-main-light-5);
+          }
+        }
       }
     }
 
-    + 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%;
-      }
+    @include portrait-tablets {
+      gap: 0.5rem;
     }
   }
 }
@@ -178,62 +127,69 @@
 }
 
 @mixin iconStyles {
-  .radio-icon {
-    display: none;
+  .e-radio__inner {
+    display: flex;
+    flex-flow: row wrap;
+    margin-top: 1.5rem;
   }
-  @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;
   }
@@ -242,17 +198,6 @@
     width: 100%;
   }
 
-  &.--regular {
-    @media (max-width: #{$xs}) {
-      @include regularStyles;
-    }
-    &:not(.--icons) {
-      @media (min-width: #{$xs}) {
-        @include regularStyles;
-      }
-    }
-  }
-
   &.--tabs {
     @media (max-width: #{$xs}) {
       @include tabsStyles;
@@ -265,21 +210,19 @@
   }
 
   &.--icons {
-    @include iconStyles;
+    @include mobile {
+      @include defaultStyles();
+    }
+    .radio-icon {
+      display: none;
+    }
+    @include portrait-tablets {
+      @include iconStyles;
+    }
   }
 
   &.--is-invalid,
   &.--group-invalid {
-    &.--regular {
-      input {
-        & + label {
-          &:before {
-            border-color: var(--error-main);
-          }
-        }
-      }
-    }
-
     &.--tabs,
     &.--group-invalid {
       .e-radio__inner {
@@ -301,10 +244,6 @@
   }
 }
 
-.radio-group__label {
-  color: var(--neutral-neutral-1);
-}
-
 .e-radio.radio--small.--tabs {
   input + label {
     font-size: 0.875rem;
@@ -316,24 +255,3 @@
     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,35 +1,39 @@
-import React, { type FC } from 'react'
+import React 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: 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> : ''
-
+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
+  })
   return (
-    <div className={classNames}>
-      <label htmlFor={props.name} className='radio-group__label'>
-        {props.label}
+    <div className={classNameValue}>
+      <label htmlFor={name} className='sans-serif --medium --bold-weight label'>
+        {label}
       </label>
       <div className={'e-radio__inner'}>
-        {props.items?.map((radio) => {
+        {items.map((radio) => {
           return (
-            <div className={`radio-item-container ${radio.value === props.value ? 'active' : ''}`} key={radio.value}>
+            <div className={`radio-item-container ${radio.value === 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} />
@@ -37,27 +41,27 @@ const Radio: FC<RadioProps> = (props) => {
                 <input
                   type='radio'
                   className='radio-item-input'
-                  id={`${props.name}_${radio.value}`}
-                  name={props.name}
-                  onChange={props.onChange}
+                  id={`${name}_${radio.value}`}
+                  name={name}
+                  onChange={onChange}
                   value={radio.value}
-                  checked={radio.value === props.value}
-                  disabled={props.disabled}
+                  checked={radio.value === value}
+                  disabled={disabled}
                 />
                 <label
-                  className='e-radio-label__label'
-                  htmlFor={`${props.name}_${radio.value}`}
-                  data-qa={`${props.name}_${radio.value}`}
+                  className='e-radio-label__label sans-serif --medium'
+                  htmlFor={`${name}_${radio.value}`}
+                  data-qa={`${name}_${radio.value}`}
                 >
                   {radio.label}
                 </label>
-                <div>{props.help}</div>
+                {help && <div>{help}</div>}
               </label>
             </div>
           )
         })}
       </div>
-      {TooltipObject}
+      {tooltip ?? <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
     </div>
   )
 }

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

@@ -1,18 +1,24 @@
 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 +1,6 @@
-export {};
+export var RadioFormat;
+(function (RadioFormat) {
+    RadioFormat["Default"] = "default";
+    RadioFormat["Tabs"] = "--tabs";
+    RadioFormat["Icons"] = "--icons";
+})(RadioFormat || (RadioFormat = {}));

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

@@ -1,14 +1,21 @@
 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/molecules/Feedback/Feedback.js

@@ -14,7 +14,7 @@ const themes = {
         icon: _jsx(Done24pxOutline, {})
     }
 };
-const Feedback = ({ theme = 'success', title, text, button, cancel, large = false, fluid = false, imgSrc = '', dataQa = '' }) => {
+const Feedback = ({ theme = 'success', title, text, button, cancel, large, fluid, imgSrc = '', dataQa = '' }) => {
     const currentTheme = themes[theme] ?? {};
     if (Object.keys(currentTheme).length === 0 && imgSrc.length === 0) {
         return null;

package/dist/src/components/molecules/Feedback/Feedback.tsx

@@ -28,8 +28,8 @@ const Feedback: FC<FeedbackProps> = ({
   text,
   button,
   cancel,
-  large = false,
-  fluid = false,
+  large,
+  fluid,
   imgSrc = '',
   dataQa = ''
 }) => {

package/dist/src/components/molecules/Feedback/FeedbackProps.types.d.ts

@@ -4,8 +4,8 @@ export interface FeedbackProps {
     title?: string;
     text?: string;
     imgSrc?: string;
-    large?: boolean;
-    fluid?: boolean;
+    large: boolean;
+    fluid: boolean;
     dataQa?: string;
     button?: ButtonProps;
     cancel?: {

package/dist/src/components/molecules/Feedback/FeedbackProps.types.ts

@@ -5,8 +5,8 @@ export interface FeedbackProps {
   title?: string
   text?: string
   imgSrc?: string
-  large?: boolean
-  fluid?: boolean
+  large: boolean
+  fluid: boolean
   dataQa?: string
   button?: ButtonProps
   cancel?: {

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, dataQa, handleClick }) => {
+const RatafiaSubscriptionCard = ({ cardStyle = 'primary', iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, handleClick }) => {
     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: `${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, noLink: true, onClick: handleClick }) }))] }));
 };
 export default RatafiaSubscriptionCard;

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

@@ -5,7 +5,7 @@ export const RatafiaSubscriptionCardStyled = styled.div `
   flex-flow: column nowrap;
   flex: 1;
   gap: 0.5rem;
-  min-width: 350px;
+  min-width: 368px;
   padding: 1rem;
   border-radius: var(--global-border-radius);
 

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.styled.ts

@@ -6,7 +6,7 @@ export const RatafiaSubscriptionCardStyled = styled.div`
   flex-flow: column nowrap;
   flex: 1;
   gap: 0.5rem;
-  min-width: 350px;
+  min-width: 368px;
   padding: 1rem;
   border-radius: var(--global-border-radius);
 

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

@@ -13,7 +13,6 @@ const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
   mainFeatures,
   AIFeatures,
   buttonText,
-  dataQa,
   handleClick
 }) => {
   if (!title) return null
@@ -45,7 +44,7 @@ const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
       {buttonText && (
         <div className='ratafia-card__footer'>
           <Button
-            dataQa={`${dataQa ?? 'ratafia-card-button'}`}
+            dataQa='ratafia-card-button'
             givenClass='ratafia-card__button'
             color={buttonStyle}
             label={buttonText}

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types.d.ts

@@ -1,5 +1,4 @@
 export interface RatafiaSubscriptionCardProps {
-    subscriptionTypeName?: string;
     cardStyle?: CardStyleType;
     iconTitle?: IconTitleProps;
     title?: string;
@@ -7,7 +6,6 @@ export interface RatafiaSubscriptionCardProps {
     mainFeatures?: BenefitProps[];
     AIFeatures?: BenefitProps[];
     buttonText?: string;
-    dataQa?: string;
     handleClick?: () => void;
 }
 interface IconTitleProps {

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCardProps.types.ts

@@ -1,5 +1,4 @@
 export interface RatafiaSubscriptionCardProps {
-  subscriptionTypeName?: string
   cardStyle?: CardStyleType
   iconTitle?: IconTitleProps
   title?: string
@@ -7,7 +6,6 @@ export interface RatafiaSubscriptionCardProps {
   mainFeatures?: BenefitProps[]
   AIFeatures?: BenefitProps[]
   buttonText?: string
-  dataQa?: string
   handleClick?: () => void
 }
 

package/dist/src/components/pages/PricingRatafiaPage/PricingRatafiaPage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type PricingRatafiaPageProps } from './PricingRatafiaPageProps';
+export declare const PricingRatafiaPage: React.FC<PricingRatafiaPageProps>;

package/dist/src/components/pages/{RatafiaPricingPage/RatafiaPricingPage.js → PricingRatafiaPage/PricingRatafiaPage.js}

@@ -2,10 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia';
 import { LayoutRatafia } from '../../organisms';
 import { RatafiaSubscriptionCard } from '../../molecules';
-import { RatafiaPricingPageStyled } from './RatafiaPricingPage.styled';
-export const RatafiaPricingPage = ({ header, disclaimer, title, subscriptions }) => {
+import { PricingRatafiaPageStyled } from './PricingRatafiaPage.styled';
+export const PricingRatafiaPage = ({ header, disclaimer, pricingPage }) => {
     const footerDesktop = (_jsx(DisclaimerRatafia, { icon: disclaimer.icon, text: disclaimer.text, copyrightText: disclaimer.copyrightText, ctaTextShowDisclaimer: disclaimer.ctaTextShowDisclaimer, ctaTextCloseDisclaimer: disclaimer.ctaTextCloseDisclaimer }));
     const footerMobile = _jsx(_Fragment, { children: footerDesktop });
-    const content = (_jsxs("div", { className: 'pricing-ratafia-page__content', children: [title && _jsx("div", { className: 'pricing-ratafia-page__content__title', children: title }), _jsx("div", { className: 'pricing-ratafia-page__content__cards', children: subscriptions?.length > 0 && subscriptions.map((card) => _jsx(RatafiaSubscriptionCard, { ...card }, card.id)) })] }));
-    return (_jsx(RatafiaPricingPageStyled, { className: 'pricing-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
+    const content = (_jsxs("div", { className: 'pricing-ratafia-page__content', children: [_jsx("div", { className: 'pricing-ratafia-page__content__title', children: pricingPage.title }), _jsx("div", { className: 'pricing-ratafia-page__content__cards', children: pricingPage.cardSubscription?.length > 0 &&
+                    pricingPage.cardSubscription.map((card) => _jsx(RatafiaSubscriptionCard, { ...card }, card.id)) })] }));
+    return (_jsx(PricingRatafiaPageStyled, { className: 'pricing-ratafia-page', children: _jsx(LayoutRatafia, { header: header, content: content, footerDesktop: footerDesktop, footerMobile: footerMobile }) }));
 };