@npm_leadtech/legal-lib-components 5.40.2 → 5.42.1

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

@@ -1,110 +1,63 @@
 @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%;
-    }
-  }
+    flex-direction: column;
+    gap: 1rem;
+    .radio-item-container {
+      .e-radio-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
 
-  input {
-    position: absolute;
-    left: -9999px;
+        .radio-item-input {
+          visibility: hidden;
+        }
 
-    &:not(:checked):hover + label {
-      &:before {
-        background-color: var(--primary-main-light-5);
-      }
-    }
+        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 +131,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 +202,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 +214,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 +248,6 @@
   }
 }
 
-.radio-group__label {
-  color: var(--neutral-neutral-1);
-}
-
 .e-radio.radio--small.--tabs {
   input + label {
     font-size: 0.875rem;
@@ -316,24 +259,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/atoms/Radio/index.d.ts

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

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

@@ -1 +1,2 @@
 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 { type RadioProps } from './RadioProps.types'
+export * from './RadioProps.types'

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

@@ -5,12 +5,14 @@ export const RatafiaSubscriptionCardStyled = styled.div `
   flex-flow: column nowrap;
   flex: 1;
   gap: 0.5rem;
-  min-width: 368px;
+  min-width: 350px;
+  max-width: 50%;
   padding: 1rem;
   border-radius: var(--global-border-radius);
 
   @media ${device.mobile} {
     min-width: auto;
+    max-width: 100%;
   }
 
   hr {

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

@@ -6,12 +6,14 @@ export const RatafiaSubscriptionCardStyled = styled.div`
   flex-flow: column nowrap;
   flex: 1;
   gap: 0.5rem;
-  min-width: 368px;
+  min-width: 350px;
+  max-width: 50%;
   padding: 1rem;
   border-radius: var(--global-border-radius);
 
   @media ${device.mobile} {
     min-width: auto;
+    max-width: 100%;
   }
 
   hr {

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

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

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

@@ -2,11 +2,10 @@ 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 { PricingRatafiaPageStyled } from './PricingRatafiaPage.styled';
-export const PricingRatafiaPage = ({ header, disclaimer, pricingPage }) => {
+import { RatafiaPricingPageStyled } from './RatafiaPricingPage.styled';
+export const RatafiaPricingPage = ({ header, disclaimer, title, subscriptions }) => {
     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: [_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 }) }));
+    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 }) }));
 };

package/dist/src/components/pages/{PricingRatafiaPage/PricingRatafiaPage.styled.d.ts → RatafiaPricingPage/RatafiaPricingPage.styled.d.ts}

@@ -1 +1 @@
-export declare const PricingRatafiaPageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RatafiaPricingPageStyled: 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/pages/{PricingRatafiaPage/PricingRatafiaPage.styled.js → RatafiaPricingPage/RatafiaPricingPage.styled.js}

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const PricingRatafiaPageStyled = styled.div `
+export const RatafiaPricingPageStyled = styled.div `
   background-color: var(--neutral-neutral-6);
 
   .pricing-ratafia-page__content {

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

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
-export const PricingRatafiaPageStyled = styled.div`
+export const RatafiaPricingPageStyled = styled.div`
   background-color: var(--neutral-neutral-6);
 
   .pricing-ratafia-page__content {

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

@@ -2,12 +2,12 @@ import React from 'react'
 
 import DisclaimerRatafia from '../../atoms/DisclaimerRatafia/DisclaimerRatafia'
 import { LayoutRatafia } from '../../organisms'
-import { type PricingRatafiaPageProps } from './PricingRatafiaPageProps'
+import { type RatafiaPricingPageProps } from './RatafiaPricingPageProps'
 import { RatafiaSubscriptionCard } from '../../molecules'
 
-import { PricingRatafiaPageStyled } from './PricingRatafiaPage.styled'
+import { RatafiaPricingPageStyled } from './RatafiaPricingPage.styled'
 
-export const PricingRatafiaPage: React.FC<PricingRatafiaPageProps> = ({ header, disclaimer, pricingPage }) => {
+export const RatafiaPricingPage: React.FC<RatafiaPricingPageProps> = ({ header, disclaimer, title, subscriptions }) => {
   const footerDesktop = (
     <DisclaimerRatafia
       icon={disclaimer.icon}
@@ -22,17 +22,16 @@ export const PricingRatafiaPage: React.FC<PricingRatafiaPageProps> = ({ header,
 
   const content = (
     <div className='pricing-ratafia-page__content'>
-      <div className='pricing-ratafia-page__content__title'>{pricingPage.title}</div>
+      {title && <div className='pricing-ratafia-page__content__title'>{title}</div>}
       <div className='pricing-ratafia-page__content__cards'>
-        {pricingPage.cardSubscription?.length > 0 &&
-          pricingPage.cardSubscription.map((card) => <RatafiaSubscriptionCard key={card.id} {...card} />)}
+        {subscriptions?.length > 0 && subscriptions.map((card) => <RatafiaSubscriptionCard key={card.id} {...card} />)}
       </div>
     </div>
   )
 
   return (
-    <PricingRatafiaPageStyled className='pricing-ratafia-page'>
+    <RatafiaPricingPageStyled className='pricing-ratafia-page'>
       <LayoutRatafia header={header} content={content} footerDesktop={footerDesktop} footerMobile={footerMobile} />
-    </PricingRatafiaPageStyled>
+    </RatafiaPricingPageStyled>
   )
 }

package/dist/src/components/pages/{PricingRatafiaPage/PricingRatafiaPageProps.d.ts → RatafiaPricingPage/RatafiaPricingPageProps.d.ts}

@@ -1,13 +1,10 @@
 import { type DisclaimerRatafiaProps } from '../../atoms';
 import { type HeaderRatafiaProps } from '../../molecules';
-export interface PricingRatafiaPageProps {
+export interface RatafiaPricingPageProps {
     header: HeaderRatafiaProps;
     disclaimer: DisclaimerRatafiaProps;
-    pricingPage: PricingPageProps;
-}
-export interface PricingPageProps {
-    title: string;
-    cardSubscription: SubscriptionCardProps[] | [];
+    title?: string;
+    subscriptions: SubscriptionCardProps[] | [];
 }
 export interface SubscriptionCardProps {
     id: string;