@npm_leadtech/legal-lib-components 7.83.0 → 7.84.0

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

@@ -14,7 +14,7 @@ interface InputProps {
     onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     country: string;
-    currrencySymbol?: string;
+    currencySymbol?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 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) => {
+export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix, currencySymbol }, ref) => {
     const isShortInput = Boolean(maxLength && maxLength <= 5);
     const [hidden, setHidden] = useState(true);
     const showPassword = () => {
@@ -24,13 +24,13 @@ 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} ${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) => {
+    return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && currencySymbol && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("span", { children: currencySymbol }) })), _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
                 ? !!prefix &&
                     euro &&
-                    currrencySymbol && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("span", { children: currrencySymbol }) }))
+                    currencySymbol && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("span", { children: currencySymbol }) }))
                 : isPercent && (_jsx("div", { className: 'input-icon-percent-suffix', children: _jsx("img", { src: percent, alt: 'percent' }) }))] }));
 });
 Input.displayName = 'Input';

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

@@ -19,7 +19,7 @@ interface InputProps {
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
   onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void
   country: string
-  currrencySymbol?: string
+  currencySymbol?: string
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -39,7 +39,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       maxLength,
       country,
       prefix,
-      currrencySymbol
+      currencySymbol
     }: InputProps,
     ref
   ) => {
@@ -67,9 +67,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <>
-        {isCurrency && !!prefix && otherCurrency && currrencySymbol && (
+        {isCurrency && !!prefix && otherCurrency && currencySymbol && (
           <div className='input-icon-currency-prefix'>
-            <span>{currrencySymbol}</span>
+            <span>{currencySymbol}</span>
           </div>
         )}
         <input
@@ -104,9 +104,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         {isCurrency
           ? !!prefix &&
             euro &&
-            currrencySymbol && (
+            currencySymbol && (
               <div className='input-icon-currency-suffix'>
-                <span>{currrencySymbol}</span>
+                <span>{currencySymbol}</span>
               </div>
             )
           : isPercent && (

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

@@ -6,7 +6,7 @@ import { Input } from './Input';
 import { TextInputLabel } from './TextInputLabel';
 import { TextInputMessage } from './TextInputMessage';
 import { TextInputTooltip } from './TextInputTooltip';
-const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, prefix = '', disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children, country, currrencySymbol }, ref) => {
+const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, prefix = '', disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children, country, currencySymbol }, ref) => {
     const classnames = classNames('e-text', {
         [givenClass]: givenClass,
         'e-text--is-invalid': !validate,
@@ -26,7 +26,7 @@ const TextInput = React.forwardRef(({ label, value, validate = true, isValidGrou
         if (Boolean(format) && type !== 'number' && type !== 'tel') {
             return (_jsx(NumericFormat, { name: name, id: name, placeholder: placeholder, className: 'e-text-input', onChange: onChange, onClick: onClick, value: value, "data-qa": name, disabled: disabled, maxLength: maxLength, onBlur: onBlur }));
         }
-        return (_jsx(Input, { name: name ?? '', type: type, prefix: prefix, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, country: country, currrencySymbol: currrencySymbol }));
+        return (_jsx(Input, { name: name ?? '', type: type, prefix: prefix, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, country: country, currencySymbol: currencySymbol }));
     };
     return (_jsxs("div", { className: classnames, children: [Boolean(children) && _jsx("div", { className: 'e-text__children', children: children }), _jsx(TextInputTooltip, { tooltip: tooltip }), _jsx(TextInputMessage, { errorMessage: errorMessage, validate: validate }), renderInput(), _jsx(TextInputLabel, { label: label, htmlFor: name, notes: notes, dialogMenuTip: dialogMenuTip })] }));
 });

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

@@ -34,7 +34,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       givenClass = '',
       children,
       country,
-      currrencySymbol
+      currencySymbol
     }: TextInputProps,
     ref
   ) => {
@@ -94,7 +94,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
           country={country}
-          currrencySymbol={currrencySymbol}
+          currencySymbol={currencySymbol}
         />
       )
     }

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

@@ -23,5 +23,5 @@ export interface TextInputProps {
     prefix?: string;
     children?: React.ReactNode;
     country: string;
-    currrencySymbol?: string;
+    currencySymbol?: string;
 }

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

@@ -24,5 +24,5 @@ export interface TextInputProps {
   prefix?: string
   children?: React.ReactNode
   country: string
-  currrencySymbol?: string
+  currencySymbol?: string
 }

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

@@ -146,6 +146,18 @@ export const WithPrefixNoEuro: Story = {
   }
 }
 
+export const WithPrefixEuroAndCurrencySymbol: Story = {
+  args: {
+    name: 'prefix',
+    label: 'Price:',
+    value: '20.30',
+    type: 'text',
+    prefix: 'currency',
+    country: 'US',
+    currencySymbol: '$'
+  }
+}
+
 export const WithSufixPercent: Story = {
   args: {
     name: 'prefix',

package/package.json

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