@npm_leadtech/legal-lib-components 5.40.1 → 5.42.0

package/dist/css/styles.css

@@ -1768,194 +1768,61 @@ h2.react-datepicker__current-month {
   height: 1em;
   vertical-align: -0.125em;
 }
-.e-radio label:first-child:not(.e-radio-label) {
-  font-weight: bold;
+.e-radio .label {
+  color: var(--neutral-neutral-1);
+  margin-bottom: 1rem;
+  display: block;
 }
-.e-radio .radio-item-container {
-  width: 100%;
+.e-radio.default .e-radio__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
-@media (max-width: 575px) {
-  .e-radio.--regular .e-radio__inner {
-    display: flex;
-    flex-flow: row wrap;
-    width: 100%;
-    margin-left: 1.5rem;
-  }
-  .e-radio.--regular .e-radio__inner 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%;
-  }
-  .e-radio.--regular input {
-    position: absolute;
-    left: -9999px;
-  }
-  .e-radio.--regular input:not(:checked):hover + label:before {
-    background-color: var(--primary-main-light-5);
-  }
-  .e-radio.--regular input:checked:hover + label:before {
-    background-color: var(--primary-main);
-  }
-  .e-radio.--regular input:checked + label {
-    color: var(--primary-main);
-    text-shadow: -0.02ex 0 var(--primary-main), 0.02ex 0 var(--primary-main);
-  }
-  .e-radio.--regular input:checked + label: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;
-  }
-  .e-radio.--regular input:checked + label: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;
-  }
-  .e-radio.--regular input + label {
-    cursor: pointer;
-    font-size: 16px;
-  }
-  .e-radio.--regular input + label: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;
-  }
-  .e-radio.--regular input + label: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%;
-  }
+.e-radio.default .e-radio__inner .radio-item-container .e-radio-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.e-radio.default .e-radio__inner .radio-item-container .e-radio-label .radio-item-input {
+  visibility: hidden;
+}
+.e-radio.default .e-radio__inner .radio-item-container .e-radio-label 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;
+}
+.e-radio.default .e-radio__inner .radio-item-container .e-radio-label .e-radio-label__label {
+  cursor: pointer;
+}
+.e-radio.default .e-radio__inner .radio-item-container.active .e-radio-label input[type=radio]:after {
+  border: 5px solid var(--primary-main);
+}
+.e-radio.default .e-radio__inner .radio-item-container.active .e-radio-label .e-radio-label__label {
+  color: var(--primary-main);
+}
+.e-radio.default .e-radio__inner .radio-item-container:hover .e-radio-label input[type=radio]:after {
+  background-color: var(--primary-main-light-5);
 }
 @media (min-width: 575px) {
-  .e-radio.--regular:not(.--icons) .e-radio__inner {
-    display: flex;
-    flex-flow: row wrap;
-    width: 100%;
-    margin-left: 1.5rem;
-  }
-  .e-radio.--regular:not(.--icons) .e-radio__inner 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%;
-  }
-  .e-radio.--regular:not(.--icons) input {
-    position: absolute;
-    left: -9999px;
-  }
-  .e-radio.--regular:not(.--icons) input:not(:checked):hover + label:before {
-    background-color: var(--primary-main-light-5);
-  }
-  .e-radio.--regular:not(.--icons) input:checked:hover + label:before {
-    background-color: var(--primary-main);
-  }
-  .e-radio.--regular:not(.--icons) input:checked + label {
-    color: var(--primary-main);
-    text-shadow: -0.02ex 0 var(--primary-main), 0.02ex 0 var(--primary-main);
-  }
-  .e-radio.--regular:not(.--icons) input:checked + label: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;
-  }
-  .e-radio.--regular:not(.--icons) input:checked + label: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;
-  }
-  .e-radio.--regular:not(.--icons) input + label {
-    cursor: pointer;
-    font-size: 16px;
-  }
-  .e-radio.--regular:not(.--icons) input + label: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;
-  }
-  .e-radio.--regular:not(.--icons) input + label: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%;
+  .e-radio.default .e-radio__inner {
+    gap: 0.5rem;
   }
 }
+.e-radio label:first-child:not(.e-radio-label) {
+  font-weight: bold;
+}
+.e-radio .radio-item-container {
+  width: 100%;
+}
 @media (max-width: 575px) {
   .e-radio.--tabs .e-radio__inner {
     display: flex;
@@ -2072,6 +1939,52 @@ h2.react-datepicker__current-month {
     width: 100%;
   }
 }
+@media (max-width: 575px) {
+  .e-radio.--icons .e-radio__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label .radio-item-input {
+    visibility: hidden;
+  }
+  .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label 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;
+  }
+  .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label .e-radio-label__label {
+    cursor: pointer;
+  }
+  .e-radio.--icons .e-radio__inner .radio-item-container.active .e-radio-label input[type=radio]:after {
+    border: 5px solid var(--primary-main);
+  }
+  .e-radio.--icons .e-radio__inner .radio-item-container.active .e-radio-label .e-radio-label__label {
+    color: var(--primary-main);
+  }
+  .e-radio.--icons .e-radio__inner .radio-item-container:hover .e-radio-label input[type=radio]:after {
+    background-color: var(--primary-main-light-5);
+  }
+}
+@media (max-width: 575px) and (min-width: 575px) {
+  .e-radio.--icons .e-radio__inner {
+    gap: 0.5rem;
+  }
+}
 .e-radio.--icons .radio-icon {
   display: none;
 }
@@ -2118,10 +2031,6 @@ h2.react-datepicker__current-month {
     margin-right: 1rem;
   }
 }
-.e-radio.--is-invalid.--regular input + label:before,
-.e-radio.--group-invalid.--regular input + label:before {
-  border-color: var(--error-main);
-}
 .e-radio.--is-invalid.--tabs .e-radio__inner,
 .e-radio.--is-invalid.--group-invalid .e-radio__inner,
 .e-radio.--group-invalid.--tabs .e-radio__inner,
@@ -2140,9 +2049,6 @@ h2.react-datepicker__current-month {
 .e-radio.--group-invalid.--group-invalid .e-radio__inner label:last-child label {
   border-right: none;
 }
-.radio-group__label {
-  color: var(--neutral-neutral-1);
-}
 .e-radio.radio--small.--tabs input + label {
   font-size: 0.875rem;
   padding: 0.75rem;
@@ -2151,20 +2057,6 @@ h2.react-datepicker__current-month {
   margin-top: 0;
   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.--regular.radio--regular--bare .e-radio-label,
-.e-radio.--regular.radio--regular--bare .e-radio-label__label {
-  display: block;
-  margin-bottom: 0.75rem;
-}
 .tippy-box {
   background-color: var(--others-white);
   border-radius: var(--global-border-radius);

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

@@ -1,4 +1,4 @@
-import { type FC } from 'react';
+import React from 'react';
 import { type RadioProps } from './RadioProps.types';
-declare const Radio: FC<RadioProps>;
+declare const Radio: React.FC<RadioProps>;
 export default Radio;

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

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { RadioFormat } from './RadioProps.types';
 import IconImage from '../IconImage/IconImage';
 // import './Radio.scss'
-const Radio = (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 ? _jsx("p", { className: 'tooltip-form sans-serif --small', children: props.tooltip }) : '';
-    return (_jsxs("div", { className: classNames, children: [_jsx("label", { htmlFor: props.name, className: 'radio-group__label', children: props.label }), _jsx("div", { className: 'e-radio__inner', children: props.items?.map((radio) => {
-                    return (_jsx("div", { className: `radio-item-container ${radio.value === props.value ? 'active' : ''}`, children: _jsxs("label", { className: 'e-radio-label', children: [radio.iconName !== undefined && radio.iconName !== '' && (_jsx(IconImage, { givenClass: 'radio-icon', iconName: radio.iconName })), _jsx("input", { type: 'radio', className: 'radio-item-input', id: `${props.name}_${radio.value}`, name: props.name, onChange: props.onChange, value: radio.value, checked: radio.value === props.value, disabled: props.disabled }), _jsx("label", { className: 'e-radio-label__label', htmlFor: `${props.name}_${radio.value}`, "data-qa": `${props.name}_${radio.value}`, children: radio.label }), _jsx("div", { children: props.help })] }, radio.value) }, radio.value));
-                }) }), TooltipObject] }));
+const Radio = ({ class: className, format = RadioFormat.Default, validate = false, isValidGroup = false, tooltip, name, label, items, value, disabled = false, help, onChange }) => {
+    const [classNameValue] = React.useState(() => {
+        let value = `e-radio ${format}`;
+        if (className)
+            value += ` ${className}`;
+        if (!validate)
+            value += ' --is-invalid';
+        if (!isValidGroup)
+            value += ' --group-invalid';
+        return value;
+    });
+    return (_jsxs("div", { className: classNameValue, children: [_jsx("label", { htmlFor: name, className: 'sans-serif --medium --bold-weight label', children: label }), _jsx("div", { className: 'e-radio__inner', children: items.map((radio) => {
+                    return (_jsx("div", { className: `radio-item-container ${radio.value === value ? 'active' : ''}`, children: _jsxs("label", { className: 'e-radio-label', children: [radio.iconName !== undefined && radio.iconName !== '' && (_jsx(IconImage, { givenClass: 'radio-icon', iconName: radio.iconName })), _jsx("input", { type: 'radio', className: 'radio-item-input', id: `${name}_${radio.value}`, name: name, onChange: onChange, value: radio.value, checked: radio.value === value, disabled: disabled }), _jsx("label", { className: 'e-radio-label__label sans-serif --medium', htmlFor: `${name}_${radio.value}`, "data-qa": `${name}_${radio.value}`, children: radio.label }), help && _jsx("div", { children: help })] }, radio.value) }, radio.value));
+                }) }), tooltip ?? _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip })] }));
 };
 export default Radio;