@npm_leadtech/legal-lib-components 7.22.11 → 7.23.0

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { DropdownInputProps } from './DropdownInputProps.types';
-export declare const DropdownInput: React.ForwardRefExoticComponent<DropdownInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const DropdownInput: React.FC<DropdownInputProps>;

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { forwardRef, useState } from 'react';
+import React, { useState } from 'react';
 import { DropdownInputStyled } from './DropdownInput.styled';
-export const DropdownInput = forwardRef(({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
+export const DropdownInput = ({ onChange, results, className = '', name, icon, placeholder }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const updateInput = (e) => {
         setSearchTerm(e.target.value);
@@ -12,9 +11,9 @@ export const DropdownInput = forwardRef(({ onChange, results, className = '', na
     const resetInput = () => {
         setSearchTerm('');
     };
-    return (_jsxs(DropdownInputStyled, { className: `dropdown_input ${className}`, children: [_jsxs("div", { className: 'dropdown_input__container', children: [_jsx("input", { ref: ref, className: `dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`, type: 'text', name: `dropdown_input_${name}`, placeholder: placeholder, value: searchTerm, onChange: (e) => {
+    return (_jsxs(DropdownInputStyled, { className: `dropdown_input ${className}`, children: [_jsxs("div", { className: 'dropdown_input__container', children: [_jsx("input", { className: `dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`, type: 'text', name: `dropdown_input_${name}`, placeholder: placeholder, value: searchTerm, onChange: (e) => {
                             updateInput(e);
-                        } }), _jsxs("div", { className: `dropdown_input__container__icon ${searchTerm ? 'active' : ''}`, onClick: onClose, children: [icon &&
+                        } }), _jsxs("div", { className: `dropdown_input__container__icon ${searchTerm ? 'active' : ''}`, children: [icon &&
                                 React.cloneElement(icon, {
                                     className: 'dropdown_input__container__icon__main'
                                 }), searchTerm && (_jsx("div", { className: 'icon-cross main-color dropdown_input__container__icon__clear', onClick: () => {
@@ -22,5 +21,4 @@ export const DropdownInput = forwardRef(({ onChange, results, className = '', na
                                 }, onKeyDown: () => {
                                     resetInput();
                                 } }))] })] }), searchTerm && !!results?.length && _jsx("ul", { className: 'dropdown_input__results', children: results })] }));
-});
-DropdownInput.displayName = 'DropdownInput';
+};

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

@@ -2,16 +2,34 @@ 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: 16px 24px;
-  }
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 
   a {
     text-decoration: none;
   }
 
+  &:focus-within {
+    @media ${device['landscape-tablets']} {
+      .dropdown_input__container {
+        border-bottom: 2px var(--neutral-neutral-4) solid;
+      }
+
+      .dropdown_input__results {
+        opacity: 1;
+      }
+    }
+
+    .dropdown_input__container__icon {
+      color: var(--primary-main);
+
+      svg {
+        fill: var(--primary-main);
+        stroke: var(--primary-main);
+      }
+    }
+  }
+
   .dropdown_input__container {
     position: relative;
     height: 2.75rem;
@@ -20,24 +38,7 @@ export const DropdownInputStyled = styled.div `
 
     @media ${device['landscape-tablets']} {
       border-top: 2px solid transparent;
-      border-bottom: none;
-    }
-
-    &:focus-within {
-      border-bottom: 2px var(--neutral-neutral-4) solid;
-
-      @media ${device['landscape-tablets']} {
-        border-bottom: none;
-      }
-
-      .dropdown_input__container__icon {
-        color: var(--neutral-neutral-3);
-
-        svg {
-          fill: var(--neutral-neutral-3);
-          stroke: var(--neutral-neutral-3);
-        }
-      }
+      border-bottom: 2px solid transparent;
     }
 
     .dropdown_input__container__text_input {
@@ -54,7 +55,7 @@ export const DropdownInputStyled = styled.div `
         color: var(--neutral-neutral-3);
       }
 
-      &.with-icon {
+      .dropdown_input__container__text_input.with-icon {
         padding-right: 2rem;
       }
     }
@@ -67,10 +68,10 @@ export const DropdownInputStyled = styled.div `
       top: 0;
       height: 100%;
       color: var(--neutral-neutral-3);
-      fill: var(--neutral-neutral-3);
+      fill: currentColor;
 
       @media ${device['landscape-tablets']} {
-        cursor: pointer;
+        pointer-events: none;
       }
 
       .dropdown_input__container__icon__main {
@@ -78,11 +79,9 @@ export const DropdownInputStyled = styled.div `
         height: 1.5rem;
         opacity: 1;
         margin-right: 0.25rem;
-        cursor: pointer;
 
         path {
           transition: all 0.25s;
-          fill: var(--neutral-neutral-3);
         }
       }
 
@@ -116,27 +115,21 @@ export const DropdownInputStyled = styled.div `
   .dropdown_input__results {
     transition: all 0.25s;
     display: flex;
+    position: relative;
     flex-direction: column;
     width: 100%;
-    border-radius: 8px;
+    border-radius: $s-border-radius;
+    margin-top: 1rem;
     background: var(--others-white);
     min-width: 20rem;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 10;
-    background-color: var(--others-white);
-    border-top: none;
-    padding: 1rem 2rem;
-
-    @media ${device['laptop']} {
-      opacity: 1;
+
+    @media ${device['landscape-tablets']} {
+      position: absolute;
+      opacity: 0;
       left: 0;
       top: 100%;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      margin-top: -5px;
-      border: none;
-      border-radius: 0 0 8px 8px;
+      box-shadow: $box-shadow-medium;
+      padding: 0.75rem 1rem;
     }
 
     & > li > * {

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

@@ -1,18 +1,37 @@
 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: 16px 24px;
-  }
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 
   a {
     text-decoration: none;
   }
 
+  &:focus-within {
+    @media ${device['landscape-tablets']} {
+      .dropdown_input__container {
+        border-bottom: 2px var(--neutral-neutral-4) solid;
+      }
+
+      .dropdown_input__results {
+        opacity: 1;
+      }
+    }
+
+    .dropdown_input__container__icon {
+      color: var(--primary-main);
+
+      svg {
+        fill: var(--primary-main);
+        stroke: var(--primary-main);
+      }
+    }
+  }
+
   .dropdown_input__container {
     position: relative;
     height: 2.75rem;
@@ -21,24 +40,7 @@ export const DropdownInputStyled = styled.div`
 
     @media ${device['landscape-tablets']} {
       border-top: 2px solid transparent;
-      border-bottom: none;
-    }
-
-    &:focus-within {
-      border-bottom: 2px var(--neutral-neutral-4) solid;
-
-      @media ${device['landscape-tablets']} {
-        border-bottom: none;
-      }
-
-      .dropdown_input__container__icon {
-        color: var(--neutral-neutral-3);
-
-        svg {
-          fill: var(--neutral-neutral-3);
-          stroke: var(--neutral-neutral-3);
-        }
-      }
+      border-bottom: 2px solid transparent;
     }
 
     .dropdown_input__container__text_input {
@@ -55,7 +57,7 @@ export const DropdownInputStyled = styled.div`
         color: var(--neutral-neutral-3);
       }
 
-      &.with-icon {
+      .dropdown_input__container__text_input.with-icon {
         padding-right: 2rem;
       }
     }
@@ -68,10 +70,10 @@ export const DropdownInputStyled = styled.div`
       top: 0;
       height: 100%;
       color: var(--neutral-neutral-3);
-      fill: var(--neutral-neutral-3);
+      fill: currentColor;
 
       @media ${device['landscape-tablets']} {
-        cursor: pointer;
+        pointer-events: none;
       }
 
       .dropdown_input__container__icon__main {
@@ -79,11 +81,9 @@ export const DropdownInputStyled = styled.div`
         height: 1.5rem;
         opacity: 1;
         margin-right: 0.25rem;
-        cursor: pointer;
 
         path {
           transition: all 0.25s;
-          fill: var(--neutral-neutral-3);
         }
       }
 
@@ -117,27 +117,21 @@ export const DropdownInputStyled = styled.div`
   .dropdown_input__results {
     transition: all 0.25s;
     display: flex;
+    position: relative;
     flex-direction: column;
     width: 100%;
-    border-radius: 8px;
+    border-radius: $s-border-radius;
+    margin-top: 1rem;
     background: var(--others-white);
     min-width: 20rem;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 10;
-    background-color: var(--others-white);
-    border-top: none;
-    padding: 1rem 2rem;
-
-    @media ${device['laptop']} {
-      opacity: 1;
+
+    @media ${device['landscape-tablets']} {
+      position: absolute;
+      opacity: 0;
       left: 0;
       top: 100%;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      margin-top: -5px;
-      border: none;
-      border-radius: 0 0 8px 8px;
+      box-shadow: $box-shadow-medium;
+      padding: 0.75rem 1rem;
     }
 
     & > li > * {

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

@@ -1,59 +1,60 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { forwardRef, useState } from 'react'
 
+import React, { 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, onClose }, ref) => {
-    const [searchTerm, setSearchTerm] = useState('')
+export const DropdownInput: React.FC<DropdownInputProps> = ({
+  onChange,
+  results,
+  className = '',
+  name,
+  icon,
+  placeholder
+}) => {
+  const [searchTerm, setSearchTerm] = useState('')
 
-    const updateInput = (e): void => {
-      setSearchTerm(e.target.value)
-      onChange(e.target.value)
-    }
-
-    const resetInput = (): void => {
-      setSearchTerm('')
-    }
+  const updateInput = (e): void => {
+    setSearchTerm(e.target.value)
+    onChange(e.target.value)
+  }
 
-    return (
-      <DropdownInputStyled className={`dropdown_input ${className}`}>
-        <div className='dropdown_input__container'>
-          <input
-            ref={ref}
-            className={`dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`}
-            type='text'
-            name={`dropdown_input_${name}`}
-            placeholder={placeholder}
-            value={searchTerm}
-            onChange={(e) => {
-              updateInput(e)
-            }}
-          />
-          <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`} onClick={onClose}>
-            {icon &&
-              React.cloneElement(icon, {
-                className: 'dropdown_input__container__icon__main'
-              })}
-            {searchTerm && (
-              <div
-                className='icon-cross main-color dropdown_input__container__icon__clear'
-                onClick={() => {
-                  resetInput()
-                }}
-                onKeyDown={() => {
-                  resetInput()
-                }}
-              ></div>
-            )}
-          </div>
-        </div>
-        {searchTerm && !!results?.length && <ul className='dropdown_input__results'>{results}</ul>}
-      </DropdownInputStyled>
-    )
+  const resetInput = (): void => {
+    setSearchTerm('')
   }
-)
 
-DropdownInput.displayName = 'DropdownInput'
+  return (
+    <DropdownInputStyled className={`dropdown_input ${className}`}>
+      <div className='dropdown_input__container'>
+        <input
+          className={`dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`}
+          type='text'
+          name={`dropdown_input_${name}`}
+          placeholder={placeholder}
+          value={searchTerm}
+          onChange={(e) => {
+            updateInput(e)
+          }}
+        />
+        <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`}>
+          {icon &&
+            React.cloneElement(icon, {
+              className: 'dropdown_input__container__icon__main'
+            })}
+          {searchTerm && (
+            <div
+              className='icon-cross main-color dropdown_input__container__icon__clear'
+              onClick={() => {
+                resetInput()
+              }}
+              onKeyDown={() => {
+                resetInput()
+              }}
+            ></div>
+          )}
+        </div>
+      </div>
+      {searchTerm && !!results?.length && <ul className='dropdown_input__results'>{results}</ul>}
+    </DropdownInputStyled>
+  )
+}

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

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

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

@@ -1,21 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* 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 { 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 { SearchBarStyled } from './SearchBar.styled';
-import search from '../../../../images/svg/search_24px.svg';
-export const SearchBar = (props) => {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const closeModal = () => setIsModalOpen(false);
-    return (_jsx(SearchBarStyled, { children: _jsxs("div", { style: { position: 'relative', display: 'flex' }, children: [_jsx("a", { onClick: () => setIsModalOpen(true), style: {
-                        cursor: 'pointer',
-                        width: '20px',
-                        height: '20px'
-                    }, className: 'search-icon-container', children: _jsx("img", { src: search, alt: 'search-icon-primary', style: {
-                            width: '100%',
-                            height: '100%'
-                        } }) }), _jsx(DesktopSearchBar, { ...props, isOpen: isModalOpen, onClose: closeModal }), _jsx(MobileSearchBar, { ...props })] }) }));
+export const SearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
+    const [results, setResults] = useState([]);
+    const windowSize = useWindowSize();
+    const _placeholder = windowSize.width === null || windowSize.width >= 720 ? '' : searchBarTexts.placeholder;
+    const searchFunction = (text) => {
+        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 (_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));
+                    }, title: product, children: [preMatch, _jsx("strong", { className: 'dropdown_input__link__emphasis', children: match }), postMatch] }, item.linkText) }, searchBarTexts.title));
+        })
+            .slice(0, 9);
+        results.push(_jsx("li", { className: 'dropdown_input__item', children: _jsx("a", { className: 'dropdown_input__link--all', title: searchBarTexts.title, href: routes.LEGAL_DOCUMENTS, children: searchBarTexts.title }) }, searchBarTexts.title));
+        setResults(results);
+    };
+    return (_jsx(SearchBarStyled, { children: _jsx(DropdownInput, { name: 'search', className: 'search', placeholder: _placeholder, icon: _jsx(SearchIcon, {}), onChange: (text) => {
+                searchFunction(text);
+            }, results: results }) }));
 };

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

@@ -1,11 +1,62 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const SearchBarStyled = styled.div `
-  .search-icon-container {
-    display: none;
+  .dropdown_input {
+    .search {
+      width: calc(100% - 3rem);
+      margin: 0 1.5rem;
 
-    @media ${device['landscape-tablets']} {
-      display: block;
+      @media ${device['landscape-tablets']} {
+        display: none;
+      }
+
+      @media ${device['landscape-tablets']} {
+        display: block;
+        width: 10rem;
+        margin: 0 1.5rem 0 0;
+      }
+
+      @media ${device['desktop']} {
+        width: 14rem;
+      }
+
+      .dropdown_input__results {
+        transition: all 0.25s;
+        min-width: 100%;
+        width: max-content;
+      }
+
+      .dropdown_input__link {
+        color: var(--neutral-neutral-3);
+        animation: newLine 0.5s;
+
+        &:hover {
+          color: var(--others-black);
+        }
+
+        &__emphasis {
+          font-style: normal;
+          font-weight: normal;
+          color: var(--others-black);
+        }
+
+        &--all {
+          font-weight: bold;
+          animation: none;
+        }
+      }
+    }
+  }
+
+  @keyframes newLine {
+    0% {
+      opacity: 0;
+      line-height: 0rem;
+    }
+
+    100% {
+      opacity: 1;
+      line-height: 1.5rem;
     }
   }
 `;

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

@@ -2,11 +2,62 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const SearchBarStyled = styled.div`
-  .search-icon-container {
-    display: none;
+  .dropdown_input {
+    .search {
+      width: calc(100% - 3rem);
+      margin: 0 1.5rem;
 
-    @media ${device['landscape-tablets']} {
-      display: block;
+      @media ${device['landscape-tablets']} {
+        display: none;
+      }
+
+      @media ${device['landscape-tablets']} {
+        display: block;
+        width: 10rem;
+        margin: 0 1.5rem 0 0;
+      }
+
+      @media ${device['desktop']} {
+        width: 14rem;
+      }
+
+      .dropdown_input__results {
+        transition: all 0.25s;
+        min-width: 100%;
+        width: max-content;
+      }
+
+      .dropdown_input__link {
+        color: var(--neutral-neutral-3);
+        animation: newLine 0.5s;
+
+        &:hover {
+          color: var(--others-black);
+        }
+
+        &__emphasis {
+          font-style: normal;
+          font-weight: normal;
+          color: var(--others-black);
+        }
+
+        &--all {
+          font-weight: bold;
+          animation: none;
+        }
+      }
+    }
+  }
+
+  @keyframes newLine {
+    0% {
+      opacity: 0;
+      line-height: 0rem;
+    }
+
+    100% {
+      opacity: 1;
+      line-height: 1.5rem;
     }
   }
 `