@npm_leadtech/legal-lib-components 7.45.0 → 7.46.0

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

@@ -1,18 +1,22 @@
-export * from './AboutUsSection'
+export * from './HeroSection'
 export * from './AsideMenuSection'
 export * from './AsSeeInSection'
 export * from './BenefitsRatafiaSection'
 export * from './BlogSection'
+export * from './CardBoxSection'
 export * from './ContactSection'
 export * from './ExpertsSection'
 export * from './FaqSection'
+export * from './Footer'
 export * from './FeaturesRatafiaSection'
 export * from './FunctionalityCardsSection'
 export * from './GuidelinesSection'
 export * from './HowGetYourFormsSection'
 export * from './JumbotronRatafiaSection'
 export * from './JumbotronSimplifiedSection'
+export * from './LawGeniusCardsSection'
 export * from './LegalSection'
+export * from './LawGeniusCardsSection'
 export * from './MidBannerRatafiaSection'
 export * from './MoreDocsSection'
 export * from './PeopleSayAboutUsSection'
@@ -20,7 +24,11 @@ export * from './StepsRatafiaSection'
 export * from './TryItRatafiaSection'
 export * from './TryOurFreeLegalBlogsSection'
 export * from './TryUsSection'
+export * from './TryNowSection'
 export * from './UnsubscribeSection'
 export * from './WhyLawDistrictSection'
 export * from './LearnMoreSection'
 export * from './CardStorySection'
+export * from './Header'
+export * from './Footer'
+export * from './AppHeader'

package/dist/src/globalStyles/breakpoints.d.ts

@@ -2,6 +2,7 @@ interface Size {
     xxs: string;
     xs: string;
     sm: string;
+    tab: string;
     md: string;
     lg: string;
     xl: string;
@@ -12,6 +13,7 @@ export declare const device: {
     mobile: string;
     'portrait-tablets': string;
     'landscape-tablets': string;
+    tablets: string;
     laptop: string;
     desktop: string;
     'desktop-xl': string;

package/dist/src/globalStyles/breakpoints.js

@@ -2,6 +2,7 @@ export const size = {
     xxs: '328px', // for very small screen mobile
     xs: '575px', // for small screen mobile
     sm: '720px', // for mobile screen
+    tab: '768px', // for tablets in portrait
     md: '960px', // for tablets
     lg: '1200px', // for laptops
     xl: '1600px', // for desktop / monitors
@@ -11,6 +12,7 @@ export const device = {
     mobile: `(max-width: ${size.xs})`,
     'portrait-tablets': `(min-width: ${size.xs})`,
     'landscape-tablets': `(min-width: ${size.sm})`,
+    tablets: `(min-width: ${size.tab})`,
     laptop: `(min-width: ${size.md})`,
     desktop: `(min-width: ${size.lg})`,
     'desktop-xl': `(min-width: ${size.xl})`

package/dist/src/globalStyles/breakpoints.ts

@@ -2,6 +2,7 @@ interface Size {
   xxs: string
   xs: string
   sm: string
+  tab: string
   md: string
   lg: string
   xl: string
@@ -12,6 +13,7 @@ export const size: Size = {
   xxs: '328px', // for very small screen mobile
   xs: '575px', // for small screen mobile
   sm: '720px', // for mobile screen
+  tab: '768px', // for tablets in portrait
   md: '960px', // for tablets
   lg: '1200px', // for laptops
   xl: '1600px', // for desktop / monitors
@@ -22,6 +24,7 @@ export const device = {
   mobile: `(max-width: ${size.xs})`,
   'portrait-tablets': `(min-width: ${size.xs})`,
   'landscape-tablets': `(min-width: ${size.sm})`,
+  tablets: `(min-width: ${size.tab})`,
   laptop: `(min-width: ${size.md})`,
   desktop: `(min-width: ${size.lg})`,
   'desktop-xl': `(min-width: ${size.xl})`

package/dist/src/globalStyles/themes.scss

@@ -20,9 +20,7 @@ html {
 
   --snackbar-reminder-bg: #f2bd6a;
   --snackbar-reminder-border: #cd9a4c;
-}
 
-html {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;

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

@@ -1,5 +1,7 @@
-import { type LegacyRef } from 'react';
-export declare function useIntersectionObserver({ options, defaultIntersecting }: {
-    options?: {} | undefined;
-    defaultIntersecting?: boolean | undefined;
-}): [LegacyRef<HTMLDivElement> | undefined, boolean];
+import { RefObject } from 'react';
+interface UseIntersectionObserverParams {
+    options?: IntersectionObserverInit;
+    defaultIntersecting?: boolean;
+}
+export declare function useIntersectionObserver<T extends HTMLElement>({ options, defaultIntersecting }?: UseIntersectionObserverParams): [RefObject<T | null>, boolean];
+export {};

package/dist/src/hooks/useIntersectionObserver.js

@@ -1,21 +1,19 @@
 import { useEffect, useRef, useState } from 'react';
-export function useIntersectionObserver({ options = {}, defaultIntersecting = false }) {
+export function useIntersectionObserver({ options = {}, defaultIntersecting = false } = {}) {
     const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting);
     const elementRef = useRef(null);
     useEffect(() => {
         const currentElement = elementRef.current;
+        if (!currentElement)
+            return;
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 setIsIntersecting(entry.isIntersecting);
             });
         }, options);
-        if (currentElement != null) {
-            observer.observe(currentElement);
-        }
+        observer.observe(currentElement);
         return () => {
-            if (currentElement != null) {
-                observer.unobserve(currentElement);
-            }
+            observer.disconnect();
         };
     }, [options]);
     return [elementRef, isIntersecting];

package/dist/src/hooks/useIntersectionObserver.tsx

@@ -1,14 +1,20 @@
-import { type LegacyRef, useEffect, useRef, useState } from 'react'
+import { RefObject, useEffect, useRef, useState } from 'react'
 
-export function useIntersectionObserver({
+interface UseIntersectionObserverParams {
+  options?: IntersectionObserverInit
+  defaultIntersecting?: boolean
+}
+
+export function useIntersectionObserver<T extends HTMLElement>({
   options = {},
   defaultIntersecting = false
-}): [LegacyRef<HTMLDivElement> | undefined, boolean] {
+}: UseIntersectionObserverParams = {}): [RefObject<T | null>, boolean] {
   const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting)
-  const elementRef = useRef<HTMLDivElement>(null)
+  const elementRef = useRef<T>(null)
 
   useEffect(() => {
     const currentElement = elementRef.current
+    if (!currentElement) return
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -16,14 +22,10 @@ export function useIntersectionObserver({
       })
     }, options)
 
-    if (currentElement != null) {
-      observer.observe(currentElement)
-    }
+    observer.observe(currentElement)
 
     return () => {
-      if (currentElement != null) {
-        observer.unobserve(currentElement)
-      }
+      observer.disconnect()
     }
   }, [options])
 

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

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

@@ -0,0 +1,6 @@
+interface Size {
+    width: number | null;
+    height: number | null;
+}
+export declare const useWindowSize: () => Size;
+export {};

package/dist/src/hooks/useWindowSize.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+const getSize = () => {
+    if (typeof window !== 'undefined') {
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+    }
+    else if (typeof document !== 'undefined') {
+        if (typeof document.documentElement !== 'undefined') {
+            return {
+                width: document.documentElement.clientWidth,
+                height: document.documentElement.clientHeight
+            };
+        }
+        else {
+            return {
+                width: document.body.clientWidth,
+                height: document.body.clientHeight
+            };
+        }
+    }
+};
+export const useWindowSize = () => {
+    const [size, setSize] = useState({
+        width: null,
+        height: null
+    });
+    const resizeListener = () => {
+        const newSize = getSize();
+        if (newSize) {
+            setSize(newSize);
+        }
+    };
+    useEffect(() => {
+        resizeListener();
+        window.addEventListener('resize', resizeListener);
+        return () => {
+            window.removeEventListener('resize', resizeListener);
+        };
+    }, []);
+    return size;
+};

package/dist/src/hooks/useWindowSize.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+
+interface Size {
+  width: number | null
+  height: number | null
+}
+
+const getSize = (): Size | undefined => {
+  if (typeof window !== 'undefined') {
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+  } else if (typeof document !== 'undefined') {
+    if (typeof document.documentElement !== 'undefined') {
+      return {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    } else {
+      return {
+        width: document.body.clientWidth,
+        height: document.body.clientHeight
+      }
+    }
+  }
+}
+
+export const useWindowSize = (): Size => {
+  const [size, setSize] = useState<Size>({
+    width: null,
+    height: null
+  })
+
+  const resizeListener = (): void => {
+    const newSize = getSize()
+    if (newSize) {
+      setSize(newSize)
+    }
+  }
+
+  useEffect(() => {
+    resizeListener()
+    window.addEventListener('resize', resizeListener)
+    return () => {
+      window.removeEventListener('resize', resizeListener)
+    }
+  }, [])
+
+  return size
+}