@npm_leadtech/legal-lib-components 7.22.4 → 7.22.5

package/dist/images/componentsSvg/CloseIcon.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface Close24Props {
+    className?: string;
+}
+export declare const CloseIcon: FC<Close24Props>;
+export {};

package/dist/images/componentsSvg/CloseIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CloseIcon = ({ className }) => (_jsx("svg", { className: className, width: 20, height: 20, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z', fill: '#B5BABD' }) }));

package/dist/images/componentsSvg/CloseIcon.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+
+interface Close24Props {
+  className?: string
+}
+
+export const CloseIcon: FC<Close24Props> = ({ className }: Close24Props): React.ReactElement => (
+  <svg className={className} width={20} height={20} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z'
+      fill='#B5BABD'
+    />
+  </svg>
+)

package/dist/images/svg/search_24px.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.83105 13.9947C6.10828 13.9947 4.65024 13.3981 3.45694 12.2048C2.26364 11.0115 1.66699 9.55346 1.66699 7.83069C1.66699 6.10791 2.26364 4.64987 3.45694 3.45657C4.65024 2.26328 6.10828 1.66663 7.83105 1.66663C9.55383 1.66663 11.0119 2.26328 12.2052 3.45657C13.3985 4.64987 13.9951 6.10791 13.9951 7.83069C13.9951 8.52612 13.8845 9.18204 13.6632 9.79844C13.4419 10.4148 13.1416 10.9601 12.7623 11.4343L18.0729 16.7449C18.2467 16.9187 18.3337 17.14 18.3337 17.4087C18.3337 17.6774 18.2467 17.8986 18.0729 18.0725C17.899 18.2464 17.6777 18.3333 17.4091 18.3333C17.1404 18.3333 16.9191 18.2464 16.7452 18.0725L11.4347 12.7619C10.9605 13.1413 10.4152 13.4416 9.79881 13.6628C9.1824 13.8841 8.52648 13.9947 7.83105 13.9947ZM7.83105 12.0981C9.01645 12.0981 10.024 11.6832 10.8538 10.8534C11.6836 10.0237 12.0985 9.01608 12.0985 7.83069C12.0985 6.64529 11.6836 5.6377 10.8538 4.80793C10.024 3.97815 9.01645 3.56326 7.83105 3.56326C6.64566 3.56326 5.63807 3.97815 4.80829 4.80793C3.97851 5.6377 3.56363 6.64529 3.56363 7.83069C3.56363 9.01608 3.97851 10.0237 4.80829 10.8534C5.63807 11.6832 6.64566 12.0981 7.83105 12.0981Z" fill="#078080"/>
+</svg>

package/dist/src/components/atoms/DropdownInput/DropdownInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef, useState } from 'react';
 import { DropdownInputStyled } from './DropdownInput.styled';
-export const DropdownInput = forwardRef(({ onChange, results, className = '', name, icon, placeholder }, ref) => {
+export const DropdownInput = forwardRef(({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
     const [searchTerm, setSearchTerm] = useState('');
     const updateInput = (e) => {
         setSearchTerm(e.target.value);
@@ -15,7 +15,8 @@ export const DropdownInput = forwardRef(({ onChange, results, className = '', na
                             updateInput(e);
                         } }), _jsxs("div", { className: `dropdown_input__container__icon ${searchTerm ? 'active' : ''}`, children: [icon &&
                                 React.cloneElement(icon, {
-                                    className: 'dropdown_input__container__icon__main'
+                                    className: 'dropdown_input__container__icon__main',
+                                    onClick: onClose
                                 }), searchTerm && (_jsx("div", { className: 'icon-cross main-color dropdown_input__container__icon__clear', onClick: () => {
                                     resetInput();
                                 }, onKeyDown: () => {

package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.js

@@ -2,6 +2,7 @@ import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const DropdownInputStyled = styled.div `
   position: relative;
+  padding: 1.5rem;
 
   @media ${device['landscape-tablets']} {
     padding: 1rem 2rem;
@@ -132,7 +133,7 @@ export const DropdownInputStyled = styled.div `
       left: 0;
       top: 100%;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      margin-top: 0;
+      margin-top: -5px;
       border: none;
       border-radius: 0 0 8px 8px;
     }

package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.ts

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 export const DropdownInputStyled = styled.div`
   position: relative;
+  padding: 1.5rem;
 
   @media ${device['landscape-tablets']} {
     padding: 1rem 2rem;
@@ -133,7 +134,7 @@ export const DropdownInputStyled = styled.div`
       left: 0;
       top: 100%;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      margin-top: 0;
+      margin-top: -5px;
       border: none;
       border-radius: 0 0 8px 8px;
     }

package/dist/src/components/atoms/DropdownInput/DropdownInput.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef, useState } from 'react'
+
 import { DropdownInputProps } from './DropdownInputProps.types'
 import { DropdownInputStyled } from './DropdownInput.styled'
 
 export const DropdownInput = forwardRef<HTMLInputElement, DropdownInputProps>(
-  ({ onChange, results, className = '', name, icon, placeholder }, ref) => {
+  ({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
     const [searchTerm, setSearchTerm] = useState('')
 
     const updateInput = (e): void => {
@@ -33,7 +34,8 @@ export const DropdownInput = forwardRef<HTMLInputElement, DropdownInputProps>(
           <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`}>
             {icon &&
               React.cloneElement(icon, {
-                className: 'dropdown_input__container__icon__main'
+                className: 'dropdown_input__container__icon__main',
+                onClick: onClose
               })}
             {searchTerm && (
               <div

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.d.ts

@@ -5,4 +5,5 @@ export interface DropdownInputProps {
     icon: any;
     onChange: (arg: string) => void;
     results: React.JSX.Element[];
+    onClose?: () => void;
 }

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.ts

@@ -7,4 +7,5 @@ export interface DropdownInputProps {
   icon: any
   onChange: (arg: string) => void
   results: React.JSX.Element[]
+  onClose?: () => void
 }

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

@@ -3,8 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import { useEffect, useRef, useState } from 'react';
+import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon';
 import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
 import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
+import search from '../../../../images/svg/search_24px.svg';
 import { useWindowSize } from '../../../hooks/useWindowSize';
 import { SearchBarStyled } from './SearchBar.styled';
 import { useSearchFunction } from '../../../hooks/useSearchFunction';
@@ -44,7 +46,7 @@ const DesktopSearchBar = ({ products, searchBarTexts, routes, handleResultClick,
     if (!isOpen) {
         return null;
     }
-    return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, className: 'modal_searchbar', children: _jsx("div", { className: 'modal_searchbar__content', children: _jsx(DropdownInput, { ref: searchInputRef, name: 'search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: searchFunction, results: results }) }) }));
+    return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, className: 'modal_searchbar', children: _jsx("div", { className: 'modal_searchbar__content', children: _jsx(DropdownInput, { ref: searchInputRef, name: 'desktop-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(CloseIcon, {}), onChange: searchFunction, results: results, onClose: onClose }) }) }));
 };
 const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
     const { results, searchFunction } = useSearchFunction({
@@ -76,7 +78,7 @@ const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isResultsVisible, searchFunction]);
-    return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, children: _jsx(DropdownInput, { ref: searchInputRef, name: 'search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: searchFunction, results: results }) }));
+    return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, children: _jsx(DropdownInput, { ref: searchInputRef, name: 'mobile-and-tablet-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: searchFunction, results: results }) }));
 };
 export const SearchBar = (props) => {
     const windowSize = useWindowSize();
@@ -84,7 +86,15 @@ export const SearchBar = (props) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const closeModal = () => setIsModalOpen(false);
     if (isDesktop) {
-        return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("a", { onClick: () => setIsModalOpen(true), className: 'search-toggle-link', children: _jsx(SearchIcon, {}) }), _jsx(DesktopSearchBar, { ...props, isOpen: isModalOpen, onClose: closeModal })] }));
+        return (_jsxs("div", { style: { position: 'relative', display: 'flex' }, children: [_jsx("a", { onClick: () => setIsModalOpen(true), style: {
+                        cursor: 'pointer',
+                        display: 'inline-block',
+                        width: '20px',
+                        height: '20px'
+                    }, children: _jsx("img", { src: search, alt: 'search-icon-primary', style: {
+                            width: '100%',
+                            height: '100%'
+                        } }) }), _jsx(DesktopSearchBar, { ...props, isOpen: isModalOpen, onClose: closeModal })] }));
     }
     return _jsx(MobileSearchBar, { ...props });
 };

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

@@ -9,31 +9,10 @@ export const SearchBarStyled = styled.div `
   }
 
   @media ${device['landscape-tablets']} {
-    .search-toggle-link {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      cursor: pointer;
-      line-height: 20px;
-
-      & > svg {
-        transition: fill 0.25s;
-        fill: currentColor;
-      }
-
-      &:hover > svg {
-        fill: var(--primary-main);
-      }
-
-      .modal_searchbar + .search-toggle-link > svg {
-        fill: #078080;
-      }
-    }
-
     &.modal_searchbar {
       position: absolute;
-      top: 8px;
-      left: 32px;
+      top: 45px;
+      left: 0;
       z-index: 10000;
       width: 400px;
       max-width: 90vw;
@@ -48,7 +27,6 @@ export const SearchBarStyled = styled.div `
 
         @media ${device['laptop']} {
           padding: 0;
-          border-radius: 8px 8px 0 0;
         }
       }
 

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

@@ -10,31 +10,10 @@ export const SearchBarStyled = styled.div`
   }
 
   @media ${device['landscape-tablets']} {
-    .search-toggle-link {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      cursor: pointer;
-      line-height: 20px;
-
-      & > svg {
-        transition: fill 0.25s;
-        fill: currentColor;
-      }
-
-      &:hover > svg {
-        fill: var(--primary-main);
-      }
-
-      .modal_searchbar + .search-toggle-link > svg {
-        fill: #078080;
-      }
-    }
-
     &.modal_searchbar {
       position: absolute;
-      top: 8px;
-      left: 32px;
+      top: 45px;
+      left: 0;
       z-index: 10000;
       width: 400px;
       max-width: 90vw;
@@ -49,7 +28,6 @@ export const SearchBarStyled = styled.div`
 
         @media ${device['laptop']} {
           padding: 0;
-          border-radius: 8px 8px 0 0;
         }
       }
 

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

@@ -2,8 +2,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useEffect, useRef, useState } from 'react'
+import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon'
 import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
 import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
+import search from '../../../../images/svg/search_24px.svg'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import { type SearchBarProps } from './SearchBarProps.types'
@@ -68,12 +70,13 @@ const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
       <div className='modal_searchbar__content'>
         <DropdownInput
           ref={searchInputRef}
-          name='search'
+          name='desktop-search'
           className='search'
           placeholder={searchBarTexts.placeholder}
-          icon={<SearchIcon />}
+          icon={<CloseIcon />}
           onChange={searchFunction}
           results={results}
+          onClose={onClose}
         />
       </div>
     </SearchBarStyled>
@@ -118,7 +121,7 @@ const MobileSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, r
     <SearchBarStyled ref={searchBarContainerRef}>
       <DropdownInput
         ref={searchInputRef}
-        name='search'
+        name='mobile-and-tablet-search'
         className='search'
         placeholder={searchBarTexts.placeholder}
         icon={<SearchIcon />}
@@ -138,9 +141,24 @@ export const SearchBar: React.FC<SearchBarProps> = (props) => {
 
   if (isDesktop) {
     return (
-      <div style={{ position: 'relative' }}>
-        <a onClick={() => setIsModalOpen(true)} className='search-toggle-link'>
-          <SearchIcon />
+      <div style={{ position: 'relative', display: 'flex' }}>
+        <a
+          onClick={() => setIsModalOpen(true)}
+          style={{
+            cursor: 'pointer',
+            display: 'inline-block',
+            width: '20px',
+            height: '20px'
+          }}
+        >
+          <img
+            src={search}
+            alt='search-icon-primary'
+            style={{
+              width: '100%',
+              height: '100%'
+            }}
+          />
         </a>
         <DesktopSearchBar {...props} isOpen={isModalOpen} onClose={closeModal} />
       </div>

package/package.json

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