@npm_leadtech/legal-lib-components 7.22.1 → 7.22.4

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

@@ -6,58 +6,72 @@ export const SearchBarStyled = styled.div`
     .search {
       width: calc(100% - 3rem);
       margin: 0 1.5rem;
+    }
+  }
 
-      @media ${device['landscape-tablets']} {
-        display: none;
-      }
+  @media ${device['landscape-tablets']} {
+    .search-toggle-link {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      line-height: 20px;
 
-      @media ${device['landscape-tablets']} {
-        display: block;
-        width: 10rem;
-        margin: 0 1.5rem 0 0;
+      & > svg {
+        transition: fill 0.25s;
+        fill: currentColor;
       }
 
-      @media ${device['desktop']} {
-        width: 14rem;
+      &:hover > svg {
+        fill: var(--primary-main);
       }
 
-      .dropdown_input__results {
-        transition: all 0.25s;
-        min-width: 100%;
-        width: max-content;
+      .modal_searchbar + .search-toggle-link > svg {
+        fill: #078080;
       }
+    }
 
-      .dropdown_input__link {
-        color: var(--neutral-neutral-3);
-        animation: newLine 0.5s;
+    &.modal_searchbar {
+      position: absolute;
+      top: 8px;
+      left: 32px;
+      z-index: 10000;
+      width: 400px;
+      max-width: 90vw;
+      background: none;
 
-        &:hover {
-          color: var(--others-black);
-        }
+      .modal_searchbar__content {
+        background-color: var(--neutral-white);
+        padding: 1.5rem;
+        border-radius: 8px;
+        width: 100%;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
-        &__emphasis {
-          font-style: normal;
-          font-weight: normal;
-          color: var(--others-black);
+        @media ${device['laptop']} {
+          padding: 0;
+          border-radius: 8px 8px 0 0;
         }
+      }
 
-        &--all {
-          font-weight: bold;
-          animation: none;
-        }
+      .modal_searchbar__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
       }
-    }
-  }
 
-  @keyframes newLine {
-    0% {
-      opacity: 0;
-      line-height: 0rem;
-    }
+      .modal_searchbar__title {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: var(--others-black);
+      }
 
-    100% {
-      opacity: 1;
-      line-height: 1.5rem;
+      .dropdown_input {
+        .search {
+          width: 100%;
+          margin: 0;
+        }
+      }
     }
   }
 `

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

@@ -1,72 +1,151 @@
-import React, { useState } from 'react'
-
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useEffect, useRef, useState } from 'react'
 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 { useSearchFunction } from '../../../hooks/useSearchFunction'
 
-export const SearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, routes, handleResultClick }) => {
-  const [results, setResults] = useState<React.JSX.Element[]>([])
+interface DesktopSearchBarProps extends SearchBarProps {
+  isOpen: boolean
+  onClose: () => void
+}
 
-  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>
-    )
+const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
+  products,
+  searchBarTexts,
+  routes,
+  handleResultClick,
+  isOpen,
+  onClose
+}) => {
+  const { results, searchFunction } = useSearchFunction({
+    products,
+    searchBarTexts,
+    routes,
+    handleResultClick,
+    onClose
+  })
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const searchBarContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown)
+      document.addEventListener('mousedown', handleClickOutside)
+      if (searchInputRef.current) {
+        searchInputRef.current.focus()
+      }
+    }
 
-    setResults(results)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) {
+    return null
   }
 
   return (
-    <SearchBarStyled>
+    <SearchBarStyled ref={searchBarContainerRef} className='modal_searchbar'>
+      <div className='modal_searchbar__content'>
+        <DropdownInput
+          ref={searchInputRef}
+          name='search'
+          className='search'
+          placeholder={searchBarTexts.placeholder}
+          icon={<SearchIcon />}
+          onChange={searchFunction}
+          results={results}
+        />
+      </div>
+    </SearchBarStyled>
+  )
+}
+
+const MobileSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, routes, handleResultClick }) => {
+  const { results, searchFunction } = useSearchFunction({
+    products,
+    searchBarTexts,
+    routes,
+    handleResultClick
+  })
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const searchBarContainerRef = useRef<HTMLDivElement>(null)
+  const isResultsVisible = Array.isArray(results) && results.length > 0
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        searchFunction('')
+      }
+    }
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
+        searchFunction('')
+      }
+    }
+
+    if (isResultsVisible) {
+      document.addEventListener('keydown', handleKeyDown)
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isResultsVisible, searchFunction])
+
+  return (
+    <SearchBarStyled ref={searchBarContainerRef}>
       <DropdownInput
+        ref={searchInputRef}
         name='search'
         className='search'
-        placeholder={_placeholder}
+        placeholder={searchBarTexts.placeholder}
         icon={<SearchIcon />}
-        onChange={(text: string) => {
-          searchFunction(text)
-        }}
+        onChange={searchFunction}
         results={results}
       />
     </SearchBarStyled>
   )
 }
+
+export const SearchBar: React.FC<SearchBarProps> = (props) => {
+  const windowSize = useWindowSize()
+  const isDesktop = !!windowSize.width && windowSize.width >= 960
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const closeModal = () => setIsModalOpen(false)
+
+  if (isDesktop) {
+    return (
+      <div style={{ position: 'relative' }}>
+        <a onClick={() => setIsModalOpen(true)} className='search-toggle-link'>
+          <SearchIcon />
+        </a>
+        <DesktopSearchBar {...props} isOpen={isModalOpen} onClose={closeModal} />
+      </div>
+    )
+  }
+
+  return <MobileSearchBar {...props} />
+}

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

@@ -14,7 +14,6 @@ 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,9 +1,11 @@
 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, currrencySymbol }, 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)
@@ -23,13 +25,12 @@ 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 && (_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) => {
                     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 }) }))
+                    euro && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("img", { src: currencyEuro, alt: 'currency' }) }))
                 : 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,5 +1,7 @@
 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'
@@ -19,7 +21,6 @@ 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>(
@@ -38,8 +39,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       type = 'text',
       maxLength,
       country,
-      prefix,
-      currrencySymbol
+      prefix
     }: InputProps,
     ref
   ) => {
@@ -66,9 +66,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <>
-        {isCurrency && !!prefix && otherCurrency && currrencySymbol && (
+        {isCurrency && !!prefix && otherCurrency && (
           <div className='input-icon-currency-prefix'>
-            <span>{currrencySymbol}</span>
+            <img src={currencyOthers} alt='currency' />
           </div>
         )}
         <input
@@ -102,10 +102,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         )}
         {isCurrency
           ? !!prefix &&
-            euro &&
-            currrencySymbol && (
+            euro && (
               <div className='input-icon-currency-suffix'>
-                <span>{currrencySymbol}</span>
+                <img src={currencyEuro} alt='currency' />
               </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 }, 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 }));
     };
     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,10 +161,6 @@
       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,8 +33,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       tooltip = '',
       givenClass = '',
       children,
-      country,
-      currrencySymbol
+      country
     }: TextInputProps,
     ref
   ) => {
@@ -94,7 +93,6 @@ 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,5 +23,4 @@ export interface TextInputProps {
     prefix?: string;
     children?: React.ReactNode;
     country: string;
-    currrencySymbol?: string;
 }

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

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

package/dist/src/hooks/useSearchFunction.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type SearchBarProps } from '../components/molecules/SearchBar/SearchBarProps.types';
+interface SearchFunctionProps extends SearchBarProps {
+    onClose?: () => void;
+}
+export declare const useSearchFunction: (props: SearchFunctionProps) => {
+    results: React.JSX.Element[];
+    searchFunction: (text: string) => void;
+};
+export {};

package/dist/src/hooks/useSearchFunction.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export const useSearchFunction = (props) => {
+    const [results, setResults] = useState([]);
+    const searchFunction = (text) => {
+        const { products, searchBarTexts, routes, handleResultClick, onClose } = props;
+        const searchTerm = text.toLowerCase();
+        const productsFiltered = products.filter((item) => item.linkText.toLowerCase().includes(searchTerm));
+        const newResults = 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 (_jsx("li", { className: 'dropdown_input__item', children: _jsxs("a", { href: routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link), className: 'dropdown_input__link', onClick: (e) => {
+                        e.preventDefault();
+                        handleResultClick(product, routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link));
+                        if (onClose)
+                            onClose();
+                    }, title: product, children: [preMatch, _jsx("strong", { className: 'dropdown_input__link__emphasis', children: match }), postMatch] }) }, item.linkText));
+        })
+            .slice(0, 9);
+        newResults.push(_jsx("li", { className: 'dropdown_input__item', children: _jsx("a", { className: 'dropdown_input__link--all', title: searchBarTexts.title, href: routes.LEGAL_DOCUMENTS, onClick: onClose, children: searchBarTexts.title }) }, searchBarTexts.title));
+        setResults(newResults);
+    };
+    return { results, searchFunction };
+};

package/dist/src/hooks/useSearchFunction.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { type SearchBarProps } from '../components/molecules/SearchBar/SearchBarProps.types'
+
+interface SearchFunctionProps extends SearchBarProps {
+  onClose?: () => void
+}
+
+export const useSearchFunction = (props: SearchFunctionProps) => {
+  const [results, setResults] = useState<React.JSX.Element[]>([])
+
+  const searchFunction = (text: string): void => {
+    const { products, searchBarTexts, routes, handleResultClick, onClose } = props
+    const searchTerm = text.toLowerCase()
+
+    const productsFiltered = products.filter((item) => item.linkText.toLowerCase().includes(searchTerm))
+
+    const newResults = 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={item.linkText} className='dropdown_input__item'>
+            <a
+              href={routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link)}
+              className='dropdown_input__link'
+              onClick={(e) => {
+                e.preventDefault()
+                handleResultClick(product, routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link))
+                if (onClose) onClose()
+              }}
+              title={product}
+            >
+              {preMatch}
+              <strong className='dropdown_input__link__emphasis'>{match}</strong>
+              {postMatch}
+            </a>
+          </li>
+        )
+      })
+      .slice(0, 9)
+
+    newResults.push(
+      <li key={searchBarTexts.title} className='dropdown_input__item'>
+        <a
+          className='dropdown_input__link--all'
+          title={searchBarTexts.title}
+          href={routes.LEGAL_DOCUMENTS}
+          onClick={onClose}
+        >
+          {searchBarTexts.title}
+        </a>
+      </li>
+    )
+
+    setResults(newResults)
+  }
+
+  return { results, searchFunction }
+}