@npm_leadtech/legal-lib-components 7.2.0 → 7.3.1

package/dist/css/styles.css

@@ -2154,6 +2154,20 @@ h2.react-datepicker__current-month {
   outline: none;
   background-color: var(--neutral-neutral-6);
 }
+.e-text--has-prefix {
+  width: 100%;
+}
+@media (min-width: 575px) {
+  .e-text--has-prefix {
+    width: 50%;
+  }
+}
+.e-text--has-prefix .has-currency-prefix {
+  padding-left: 2rem;
+}
+.e-text--has-prefix .has-currency-suffix {
+  padding-right: 2rem;
+}
 .e-text .input-icon {
   position: absolute;
   transform: translate(-15%, -65%);
@@ -2168,6 +2182,20 @@ h2.react-datepicker__current-month {
   background: none;
   border: none;
 }
+.e-text .input-icon-currency-suffix {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  background: none;
+  border: none;
+}
+.e-text .input-icon-currency-prefix {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  background: none;
+  border: none;
+}
 .e-text .formgroup--input__button {
   align-self: flex-start;
   font-size: 0.75rem;

package/dist/images/svg/currencyUS.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.94505 17.3333C4.6827 17.3333 4.4628 17.2446 4.28533 17.0671C4.10786 16.8896 4.01912 16.6697 4.01912 16.4074V15.3426C3.32468 15.1882 2.71511 14.9182 2.19042 14.5324C1.66573 14.1466 1.24135 13.6064 0.917271 12.912C0.809246 12.6959 0.805388 12.4683 0.905697 12.2291C1.00601 11.9899 1.18733 11.8163 1.44968 11.7083C1.66573 11.6157 1.88949 11.6196 2.12097 11.7199C2.35246 11.8202 2.52993 11.9861 2.65338 12.2176C2.91573 12.6805 3.24752 13.0316 3.64875 13.2708C4.04999 13.51 4.54381 13.6296 5.13023 13.6296C5.76295 13.6296 6.29922 13.4868 6.73903 13.2013C7.17884 12.9159 7.39875 12.4722 7.39875 11.8703C7.39875 11.3302 7.229 10.902 6.88949 10.5856C6.54999 10.2692 5.76295 9.91045 4.52838 9.50922C3.20122 9.09255 2.29073 8.59487 1.7969 8.01616C1.30307 7.43746 1.05616 6.73144 1.05616 5.89811C1.05616 4.89502 1.38023 4.1157 2.02838 3.56014C2.67653 3.00459 3.34011 2.68823 4.01912 2.61107V1.59255C4.01912 1.33021 4.10786 1.1103 4.28533 0.93283C4.4628 0.755361 4.6827 0.666626 4.94505 0.666626C5.20739 0.666626 5.4273 0.755361 5.60477 0.93283C5.78224 1.1103 5.87097 1.33021 5.87097 1.59255V2.61107C6.45739 2.70366 6.96665 2.89271 7.39875 3.1782C7.83085 3.46369 8.18579 3.81477 8.46357 4.23144C8.60246 4.43206 8.62946 4.65582 8.54459 4.90274C8.45971 5.14965 8.2861 5.32712 8.02375 5.43514C7.8077 5.52774 7.58394 5.5316 7.35246 5.44672C7.12098 5.36184 6.90493 5.21138 6.70431 4.99533C6.50369 4.77928 6.26835 4.61339 5.99829 4.49764C5.72823 4.3819 5.39258 4.32403 4.99134 4.32403C4.31233 4.32403 3.79536 4.4745 3.44042 4.77542C3.08548 5.07635 2.90801 5.45058 2.90801 5.89811C2.90801 6.40737 3.13949 6.8086 3.60246 7.10181C4.06542 7.39502 4.86789 7.70366 6.00986 8.02774C7.07468 8.33638 7.88101 8.82635 8.42885 9.49765C8.97668 10.1689 9.2506 10.9444 9.2506 11.824C9.2506 12.9197 8.92653 13.753 8.27838 14.324C7.63023 14.895 6.82776 15.25 5.87097 15.3888V16.4074C5.87097 16.6697 5.78224 16.8896 5.60477 17.0671C5.4273 17.2446 5.20739 17.3333 4.94505 17.3333Z" fill="#6D7275"/>
+</svg>

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

@@ -20,12 +20,6 @@ export const MidBannerRatafiaContentStyled = styled.div `
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
-
-        .richt-text-strapi {
-          display: flex;
-          flex-direction: column;
-          gap: var(--global-gap);
-        }
       }
     }
     &__cta {

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

@@ -21,12 +21,6 @@ export const MidBannerRatafiaContentStyled = styled.div`
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
-
-        .richt-text-strapi {
-          display: flex;
-          flex-direction: column;
-          gap: var(--global-gap);
-        }
       }
     }
     &__cta {

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

@@ -2,6 +2,7 @@ import React from 'react';
 interface InputProps {
     name: string;
     placeholder: string;
+    prefix: string;
     maxLength: number;
     value: string;
     type: 'password' | 'text' | 'number' | 'tel';
@@ -12,6 +13,7 @@ interface InputProps {
     onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    country: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -1,16 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
+import currency from '../../../../images/svg/currencyUS.svg';
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg';
 import eyeIcon from '../../../../images/svg/eye-24-px.svg';
-export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength }, ref) => {
+export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix }, ref) => {
     const [hidden, setHidden] = useState(true);
     const showPassword = () => {
         if (value !== null)
             setHidden(!hidden);
     };
-    return (_jsxs(_Fragment, { children: [_jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: className, 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) => {
+    const euro = country === 'DE';
+    const otherCurrency = country !== 'DE';
+    let finalClassName = className;
+    if (otherCurrency)
+        finalClassName += ' has-currency-prefix';
+    if (euro)
+        finalClassName += ' has-currency-suffix';
+    return (_jsxs(_Fragment, { children: [!!prefix && otherCurrency && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("img", { src: currency, alt: 'currency' }) })), _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) => {
                     if (e.key === 'Enter')
                         showPassword();
-                }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) }))] }));
+                }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) })), !!prefix && euro && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("img", { src: currency, alt: 'currency' }) }))] }));
 });
 Input.displayName = 'Input';

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

@@ -1,11 +1,13 @@
 import React, { useState } from 'react'
 
+import currency from '../../../../images/svg/currencyUS.svg'
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg'
 import eyeIcon from '../../../../images/svg/eye-24-px.svg'
 
 interface InputProps {
   name: string
   placeholder: string
+  prefix: string
   maxLength: number
   value: string
   type: 'password' | 'text' | 'number' | 'tel'
@@ -16,6 +18,7 @@ interface InputProps {
   onBlur: (e: React.FocusEvent<HTMLInputElement>) => void
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
   onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  country: string
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -32,7 +35,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onKeyUp,
       disabled,
       type = 'text',
-      maxLength
+      maxLength,
+      country,
+      prefix
     }: InputProps,
     ref
   ) => {
@@ -41,14 +46,26 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const showPassword = (): void => {
       if (value !== null) setHidden(!hidden)
     }
+    const euro = country === 'DE'
+    const otherCurrency = country !== 'DE'
+
+    let finalClassName = className
+
+    if (otherCurrency) finalClassName += ' has-currency-prefix'
+    if (euro) finalClassName += ' has-currency-suffix'
 
     return (
       <>
+        {!!prefix && otherCurrency && (
+          <div className='input-icon-currency-prefix'>
+            <img src={currency} alt='currency' />
+          </div>
+        )}
         <input
           type={!hidden && type === 'password' ? 'text' : type}
           name={name}
           id={name}
-          className={className}
+          className={finalClassName}
           maxLength={maxLength}
           placeholder={placeholder}
           onChange={onChange}
@@ -73,6 +90,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <img src={hidden ? eyeIcon : eyeCloseIcon} alt='' />
           </button>
         )}
+        {!!prefix && euro && (
+          <div className='input-icon-currency-suffix'>
+            <img src={currency} alt='currency' />
+          </div>
+        )}
       </>
     )
   }

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

@@ -6,11 +6,12 @@ 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, disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children }, 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 }, ref) => {
     const classnames = classNames('e-text', {
         [givenClass]: givenClass,
         'e-text--is-invalid': !validate,
-        'e-text--group-invalid': !isValidGroup
+        'e-text--group-invalid': !isValidGroup,
+        'e-text--has-prefix': !!prefix
     });
     const handleChange = (event) => {
         onChange(event);
@@ -23,14 +24,9 @@ const TextInput = React.forwardRef(({ label, value, validate = true, isValidGrou
     };
     const renderInput = () => {
         if (Boolean(format) && type !== 'number' && type !== 'tel') {
-            return (_jsx(NumericFormat, { name: name, id: name, placeholder: placeholder, className: 'e-text-input', 
-                // mask={mask}
-                // format={format}
-                onChange: onChange, onClick: onClick, 
-                // maskchar={null}
-                value: value, "data-qa": name, disabled: disabled, maxLength: maxLength, onBlur: onBlur }));
+            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, 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 }));
+        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 }));
     };
     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.scss

@@ -148,6 +148,22 @@
     }
   }
 
+  &--has-prefix {
+    width: 100%;
+
+    @include portrait-tablets {
+      width: 50%;
+    }
+
+    .has-currency-prefix {
+      padding-left: 2rem;
+    }
+
+    .has-currency-suffix {
+      padding-right: 2rem;
+    }
+  }
+
   .input-icon {
     position: absolute;
     transform: translate(-15%, -65%);
@@ -164,6 +180,22 @@
     border: none;
   }
 
+  .input-icon-currency-suffix {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    background: none;
+    border: none;
+  }
+
+  .input-icon-currency-prefix {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    background: none;
+    border: none;
+  }
+
   .formgroup--input__button {
     align-self: flex-start;
     font-size: 0.75rem;

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

@@ -23,6 +23,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       onKeyDown,
       onKeyUp,
+      prefix = '',
       disabled,
       type = 'text',
       maxLength,
@@ -31,14 +32,16 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       dialogMenuTip,
       tooltip = '',
       givenClass = '',
-      children
+      children,
+      country
     }: TextInputProps,
     ref
   ) => {
     const classnames = classNames('e-text', {
       [givenClass]: givenClass,
       'e-text--is-invalid': !validate,
-      'e-text--group-invalid': !isValidGroup
+      'e-text--group-invalid': !isValidGroup,
+      'e-text--has-prefix': !!prefix
     })
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -61,11 +64,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
             id={name}
             placeholder={placeholder}
             className='e-text-input'
-            // mask={mask}
-            // format={format}
             onChange={onChange}
             onClick={onClick}
-            // maskchar={null}
             value={value}
             data-qa={name}
             disabled={disabled}
@@ -79,6 +79,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         <Input
           name={name ?? ''}
           type={type}
+          prefix={prefix}
           placeholder={placeholder ?? ''}
           className='e-text-input'
           onChange={handleChange}
@@ -91,6 +92,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           ref={ref}
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
+          country={country}
         />
       )
     }

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

@@ -20,5 +20,7 @@ export interface TextInputProps {
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    prefix?: string;
     children?: React.ReactNode;
+    country: string;
 }

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

@@ -21,5 +21,7 @@ export interface TextInputProps {
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
   onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  prefix?: string
   children?: React.ReactNode
+  country: string
 }

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

@@ -123,3 +123,25 @@ export const MaskInput: Story = {
     placeholder: 'eg. 2111 1111 1111 1111'
   }
 }
+
+export const WithPrefixEuro: Story = {
+  args: {
+    name: 'prefix',
+    label: 'Price:',
+    value: '20.30',
+    type: 'text',
+    prefix: '€',
+    country: 'DE'
+  }
+}
+
+export const WithPrefixNoEuro: Story = {
+  args: {
+    name: 'prefix',
+    label: 'Price:',
+    value: '20.30',
+    type: 'text',
+    prefix: '$',
+    country: 'US'
+  }
+}

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.js

@@ -39,7 +39,7 @@ export const FeaturesRatafiaSectionStyled = styled.section `
 
       &__children {
         display: none;
-        width: 100%;
+        min-width: 50%;
 
         @media ${device.desktop} {
           display: flex;
@@ -48,7 +48,6 @@ export const FeaturesRatafiaSectionStyled = styled.section `
         }
         img {
           width: 100%;
-          height: auto;
         }
       }
     }

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.ts

@@ -40,7 +40,7 @@ export const FeaturesRatafiaSectionStyled = styled.section`
 
       &__children {
         display: none;
-        width: 100%;
+        min-width: 50%;
 
         @media ${device.desktop} {
           display: flex;
@@ -49,7 +49,6 @@ export const FeaturesRatafiaSectionStyled = styled.section`
         }
         img {
           width: 100%;
-          height: auto;
         }
       }
     }

package/package.json

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