@npm_leadtech/legal-lib-components 7.46.2 → 7.47.0

package/dist/css/styles.css

@@ -2032,6 +2032,9 @@ h2.react-datepicker__current-month {
   margin-bottom: 1rem;
   position: relative;
 }
+.e-text .e-text-input__short {
+  width: 50%;
+}
 .e-text input {
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextAreaStyled } from './TextArea.styled';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
-const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa }) => {
+const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa, maxLength }) => {
     const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`;
-    return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
+    return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa, maxLength: maxLength }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
 };
 export default TextArea;

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

@@ -15,7 +15,8 @@ const TextArea: FC<TextAreaProps> = ({
   tooltip,
   validate = false,
   value,
-  dataQa
+  dataQa,
+  maxLength
 }) => {
   const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`
@@ -37,6 +38,7 @@ const TextArea: FC<TextAreaProps> = ({
         value={value}
         disabled={disabled}
         data-qa={dataQa}
+        maxLength={maxLength}
       />
       {Boolean(label) && (
         <div className={'e-textarea__inner'}>

package/dist/src/components/atoms/TextArea/TextAreaProps.types.d.ts

@@ -10,4 +10,5 @@ export interface TextAreaProps {
     validate?: boolean;
     disabled?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    maxLength?: number;
 }

package/dist/src/components/atoms/TextArea/TextAreaProps.types.ts

@@ -10,4 +10,5 @@ export interface TextAreaProps {
   validate?: boolean
   disabled?: boolean
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+  maxLength?: number
 }

package/dist/src/components/molecules/TextInput/Input.d.ts

@@ -3,7 +3,7 @@ interface InputProps {
     name: string;
     placeholder: string;
     prefix: string;
-    maxLength: number;
+    maxLength?: number;
     value: string;
     type: 'password' | 'text' | 'number' | 'tel';
     disabled: boolean;

package/dist/src/components/molecules/TextInput/Input.js

@@ -4,6 +4,7 @@ import eyeCloseIcon from '../../../../images/svg/eye-close.svg';
 import eyeIcon from '../../../../images/svg/eye-24-px.svg';
 import percent from '../../../../images/svg/percent.svg';
 export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix, currrencySymbol }, ref) => {
+    const isShortInput = Boolean(maxLength && maxLength <= 5);
     const [hidden, setHidden] = useState(true);
     const showPassword = () => {
         if (value !== null)
@@ -23,7 +24,7 @@ export const Input = React.forwardRef(({ value, name, placeholder, className, on
     else if (isPercent) {
         finalClassName += ' has-percent-suffix';
     }
-    return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && currrencySymbol && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("span", { children: currrencySymbol }) })), _jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: finalClassName, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
+    return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && currrencySymbol && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("span", { children: currrencySymbol }) })), _jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: `${finalClassName} ${isShortInput ? 'e-text-input__short' : ''}`, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
                     if (e.key === 'Enter')
                         showPassword();
                 }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) })), isCurrency

package/dist/src/components/molecules/TextInput/Input.tsx

@@ -8,7 +8,7 @@ interface InputProps {
   name: string
   placeholder: string
   prefix: string
-  maxLength: number
+  maxLength?: number
   value: string
   type: 'password' | 'text' | 'number' | 'tel'
   disabled: boolean
@@ -43,6 +43,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     }: InputProps,
     ref
   ) => {
+    const isShortInput = Boolean(maxLength && maxLength <= 5)
     const [hidden, setHidden] = useState(true)
 
     const showPassword = (): void => {
@@ -75,7 +76,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           type={!hidden && type === 'password' ? 'text' : type}
           name={name}
           id={name}
-          className={finalClassName}
+          className={`${finalClassName} ${isShortInput ? 'e-text-input__short' : ''}`}
           maxLength={maxLength}
           placeholder={placeholder}
           onChange={onChange}

package/dist/src/components/molecules/TextInput/TextInput.scss

@@ -10,6 +10,10 @@
   margin-bottom: 1rem;
   position: relative;
 
+  .e-text-input__short {
+    width: 50%;
+  }
+
   input {
     -webkit-appearance: none;
     -moz-appearance: none;

package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts

@@ -9,7 +9,7 @@ export interface TextInputProps {
     mask?: string;
     format?: string;
     notes?: string;
-    maxLength?: any;
+    maxLength?: number;
     value?: any;
     type?: 'password' | 'text' | 'number' | 'tel';
     validate?: boolean;

package/dist/src/components/molecules/TextInput/TextInputProps.types.ts

@@ -10,7 +10,7 @@ export interface TextInputProps {
   mask?: string
   format?: string
   notes?: string
-  maxLength?: any
+  maxLength?: number
   value?: any
   type?: 'password' | 'text' | 'number' | 'tel'
   validate?: boolean

package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx

@@ -167,3 +167,13 @@ export const WithPrefixPercent: Story = {
     country: 'CA'
   }
 }
+
+export const SmallMaxLength: Story = {
+  args: {
+    value: '',
+    name: 'Type of property',
+    label: 'Type of property',
+    type: 'text',
+    maxLength: 5
+  }
+}

package/dist/src/components/sections/FaqSection/FaqSection.js

@@ -3,8 +3,6 @@ import classNames from 'classnames';
 import { FaqGroup } from '../../organisms';
 import { FaqSectionStyled } from './FaqSection.styled';
 export const FaqSection = ({ groups, givenClass }) => {
-    if (!groups?.length)
-        return null;
     const classnames = classNames(`faqSection ${givenClass ?? ''}`);
     return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups?.map((group) => _jsx(FaqGroup, { ...group }, group.id)) }));
 };

package/dist/src/components/sections/FaqSection/FaqSection.tsx

@@ -6,7 +6,6 @@ import { type FaqSectionProps } from './FaqSectionProps'
 import { FaqSectionStyled } from './FaqSection.styled'
 
 export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) => {
-  if (!groups?.length) return null
   const classnames = classNames(`faqSection ${givenClass ?? ''}`)
 
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.46.2",
+  "version": "7.47.0",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",