@npm_leadtech/legal-lib-components 7.22.10 → 7.22.12

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

@@ -1,42 +1,72 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState } from 'react'
-import { DesktopSearchBar } from '../DesktopSearchBar'
-import { MobileSearchBar } from '../MobileSearchBar'
+
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
+import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+
 import { type SearchBarProps } from './SearchBarProps.types'
 import { SearchBarStyled } from './SearchBar.styled'
-import search from '../../../../images/svg/search_24px.svg'
 
-export const SearchBar: React.FC<SearchBarProps> = (props) => {
-  const [isModalOpen, setIsModalOpen] = useState(false)
+export const SearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, routes, handleResultClick }) => {
+  const [results, setResults] = useState<React.JSX.Element[]>([])
 
-  const closeModal = () => setIsModalOpen(false)
+  const windowSize = useWindowSize()
+  const _placeholder = windowSize.width === null || windowSize.width >= 720 ? '' : searchBarTexts.placeholder
+  const searchFunction = (text: string): void => {
+    const searchTerm = text.toLowerCase()
+
+    const productsFiltered = products.filter((item) => item.linkText.toLowerCase().includes(searchTerm))
+    const results = productsFiltered
+      .map((item) => {
+        const product = item.linkText
+        const preMatch = product.slice(0, product.toLowerCase().indexOf(searchTerm))
+        const match = product.slice(product.toLowerCase().indexOf(searchTerm), preMatch.length + searchTerm.length)
+        const postMatch = product.slice(product.toLowerCase().indexOf(searchTerm) + searchTerm.length, product.length)
+        const link = item.categoryUrl ? `${item.categoryUrl}/${item.slug}` : item.slug
+        return (
+          <li key={searchBarTexts.title} className='dropdown_input__item'>
+            <a
+              href={routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link)}
+              className='dropdown_input__link'
+              key={item.linkText}
+              onClick={(e) => {
+                e.preventDefault()
+                handleResultClick(product, routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link))
+              }}
+              title={product}
+            >
+              {preMatch}
+              <strong className='dropdown_input__link__emphasis'>{match}</strong>
+              {postMatch}
+            </a>
+          </li>
+        )
+      })
+      .slice(0, 9)
+
+    results.push(
+      <li key={searchBarTexts.title} className='dropdown_input__item'>
+        <a className='dropdown_input__link--all' title={searchBarTexts.title} href={routes.LEGAL_DOCUMENTS}>
+          {searchBarTexts.title}
+        </a>
+      </li>
+    )
+
+    setResults(results)
+  }
 
   return (
     <SearchBarStyled>
-      <div style={{ position: 'relative', display: 'flex' }}>
-        <a
-          onClick={() => setIsModalOpen(true)}
-          style={{
-            cursor: 'pointer',
-            width: '20px',
-            height: '20px'
-          }}
-          className='search-icon-container'
-        >
-          <img
-            src={search}
-            alt='search-icon-primary'
-            style={{
-              width: '100%',
-              height: '100%'
-            }}
-          />
-        </a>
-        <DesktopSearchBar {...props} isOpen={isModalOpen} onClose={closeModal} />
-        <MobileSearchBar {...props} />
-      </div>
+      <DropdownInput
+        name='search'
+        className='search'
+        placeholder={_placeholder}
+        icon={<SearchIcon />}
+        onChange={(text: string) => {
+          searchFunction(text)
+        }}
+        results={results}
+      />
     </SearchBarStyled>
   )
 }

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

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

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

@@ -1,11 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import currencyEuro from '../../../../images/svg/currencyDE.svg';
-import currencyOthers from '../../../../images/svg/currencyUS.svg';
 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 }, ref) => {
+export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix, currrencySymbol }, ref) => {
     const [hidden, setHidden] = useState(true);
     const showPassword = () => {
         if (value !== null)
@@ -25,12 +23,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 && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("img", { src: currencyOthers, 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) => {
+    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) => {
                     if (e.key === 'Enter')
                         showPassword();
                 }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) })), isCurrency
                 ? !!prefix &&
-                    euro && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("img", { src: currencyEuro, alt: 'currency' }) }))
+                    euro &&
+                    currrencySymbol && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("span", { children: currrencySymbol }) }))
                 : 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

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 
-import currencyEuro from '../../../../images/svg/currencyDE.svg'
-import currencyOthers from '../../../../images/svg/currencyUS.svg'
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg'
 import eyeIcon from '../../../../images/svg/eye-24-px.svg'
 import percent from '../../../../images/svg/percent.svg'
@@ -21,6 +19,7 @@ interface InputProps {
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
   onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void
   country: string
+  currrencySymbol?: string
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -39,7 +38,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       type = 'text',
       maxLength,
       country,
-      prefix
+      prefix,
+      currrencySymbol
     }: InputProps,
     ref
   ) => {
@@ -66,9 +66,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <>
-        {isCurrency && !!prefix && otherCurrency && (
+        {isCurrency && !!prefix && otherCurrency && currrencySymbol && (
           <div className='input-icon-currency-prefix'>
-            <img src={currencyOthers} alt='currency' />
+            <span>{currrencySymbol}</span>
           </div>
         )}
         <input
@@ -102,9 +102,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         )}
         {isCurrency
           ? !!prefix &&
-            euro && (
+            euro &&
+            currrencySymbol && (
               <div className='input-icon-currency-suffix'>
-                <img src={currencyEuro} alt='currency' />
+                <span>{currrencySymbol}</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 }, 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, currrencySymbol }, 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 }));
+        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 (_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

@@ -161,6 +161,10 @@
       width: 50%;
     }
 
+    .tooltip-form {
+      grid-row: 3;
+    }
+
     .has-currency-prefix {
       padding-left: 2rem;
       grid-column: 1;

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

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

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

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

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

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

package/dist/src/components/organisms/VisibleEnvVariables/VisibleEnvVariables.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { VisibleVariablesProps } from './VisibleEnvVariablesProps.types';
+declare const VisibleEnvVariables: React.FC<VisibleVariablesProps>;
+export default VisibleEnvVariables;

package/dist/src/components/organisms/VisibleEnvVariables/VisibleEnvVariables.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { VariablesList } from './VisibleEnvVariables.styled';
+const VisibleEnvVariables = ({ variables }) => {
+    return (_jsx(VariablesList, { className: 'stage-variables', children: Object.entries(variables).map(([key, value]) => (_jsxs("li", { children: [_jsxs("strong", { className: 'stage-variable-name', children: [key, ": "] }), _jsx("span", { className: 'stage-variable-value', children: value })] }, key))) }));
+};
+export default VisibleEnvVariables;

package/dist/src/components/organisms/VisibleEnvVariables/VisibleEnvVariables.styled.d.ts

@@ -0,0 +1 @@
+export declare const VariablesList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;

package/dist/src/components/organisms/VisibleEnvVariables/VisibleEnvVariables.styled.js

@@ -0,0 +1,13 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const VariablesList = styled.ul `
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  @media ${device['mobile']} {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`;

package/dist/src/components/organisms/VisibleEnvVariables/VisibleEnvVariables.styled.ts

@@ -0,0 +1,14 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const VariablesList = styled.ul`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  @media ${device['mobile']} {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`

package/dist/src/components/organisms/VisibleEnvVariables/VisibleEnvVariables.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { VariablesList } from './VisibleEnvVariables.styled'
+import { VisibleVariablesProps } from './VisibleEnvVariablesProps.types'
+
+const VisibleEnvVariables: React.FC<VisibleVariablesProps> = ({ variables }) => {
+  return (
+    <VariablesList className='stage-variables'>
+      {Object.entries(variables).map(([key, value]) => (
+        <li key={key}>
+          <strong className='stage-variable-name'>{key}: </strong>
+          <span className='stage-variable-value'>{value}</span>
+        </li>
+      ))}
+    </VariablesList>
+  )
+}
+
+export default VisibleEnvVariables

package/dist/src/components/organisms/VisibleEnvVariables/VisibleEnvVariablesProps.types.d.ts

@@ -0,0 +1,3 @@
+export interface VisibleVariablesProps {
+    variables: Record<string, string>;
+}

package/dist/src/components/organisms/VisibleEnvVariables/VisibleEnvVariablesProps.types.ts

@@ -0,0 +1,3 @@
+export interface VisibleVariablesProps {
+  variables: Record<string, string>
+}

package/dist/src/components/organisms/VisibleEnvVariables/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VisibleEnvVariables } from './VisibleEnvVariables';
+export { type VisibleVariablesProps } from './VisibleEnvVariablesProps.types';

package/dist/src/components/organisms/VisibleEnvVariables/index.js

@@ -0,0 +1 @@
+export { default as VisibleEnvVariables } from './VisibleEnvVariables';

package/dist/src/components/organisms/VisibleEnvVariables/index.ts

@@ -0,0 +1,2 @@
+export { default as VisibleEnvVariables } from './VisibleEnvVariables'
+export { type VisibleVariablesProps } from './VisibleEnvVariablesProps.types'

package/dist/src/components/organisms/index.d.ts

@@ -35,3 +35,4 @@ export * from './HowWeHelp';
 export * from './MobileMenu';
 export * from './MobilePanel';
 export * from './DesktopMenu';
+export * from './VisibleEnvVariables';

package/dist/src/components/organisms/index.js

@@ -35,3 +35,4 @@ export * from './HowWeHelp';
 export * from './MobileMenu';
 export * from './MobilePanel';
 export * from './DesktopMenu';
+export * from './VisibleEnvVariables';

package/dist/src/components/organisms/index.ts

@@ -35,3 +35,4 @@ export * from './HowWeHelp'
 export * from './MobileMenu'
 export * from './MobilePanel'
 export * from './DesktopMenu'
+export * from './VisibleEnvVariables'