@npm_leadtech/legal-lib-components 7.23.0 → 7.23.1

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

@@ -1,72 +1,42 @@
+/* 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 { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
-import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
-import { useWindowSize } from '../../../hooks/useWindowSize'
-
+import { DesktopSearchBar } from '../DesktopSearchBar'
+import { MobileSearchBar } from '../MobileSearchBar'
 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> = ({ products, searchBarTexts, routes, handleResultClick }) => {
-  const [results, setResults] = useState<React.JSX.Element[]>([])
+export const SearchBar: React.FC<SearchBarProps> = (props) => {
+  const [isModalOpen, setIsModalOpen] = useState(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)
-  }
+  const closeModal = () => setIsModalOpen(false)
 
   return (
     <SearchBarStyled>
-      <DropdownInput
-        name='search'
-        className='search'
-        placeholder={_placeholder}
-        icon={<SearchIcon />}
-        onChange={(text: string) => {
-          searchFunction(text)
-        }}
-        results={results}
-      />
+      <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>
     </SearchBarStyled>
   )
 }

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 }
+}