@npm_leadtech/legal-lib-components 7.17.4 → 7.17.23

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

@@ -1,21 +1,17 @@
 import React from 'react'
 import { SocialLinksProps } from './SocialLinksProps.types'
 import { SocialList } from './SocialLinks.styled'
-import { useIntersectionObserver } from '../../../hooks'
 
 export const SocialLinks: React.FC<SocialLinksProps> = ({ links }) => {
   return (
     <SocialList>
-      {links.map((social) => {
-        const [ref, isIntersecting] = useIntersectionObserver<HTMLImageElement>({})
-        return (
-          <li key={social.url}>
-            <a href={social.url} rel='noopener noreferrer' target='_blank'>
-              <img ref={ref} src={isIntersecting ? social.iconSrc : ''} alt={social.alt} width='20' height='20' />
-            </a>
-          </li>
-        )
-      })}
+      {links.map((social) => (
+        <li key={social.url}>
+          <a href={social.url} rel='noopener noreferrer' target='_blank'>
+            <img src={social.iconSrc} alt={social.alt} width='20' height='20' />
+          </a>
+        </li>
+      ))}
     </SocialList>
   )
 }

package/dist/src/components/molecules/index.d.ts

@@ -12,6 +12,8 @@ export * from './Breadcrumb';
 export * from './ContactBox';
 export * from './ContactCardList';
 export * from './ContactInfo';
+export * from './ContactInfoBox';
+export * from './ContactInfoBoxMobile';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './DocumentListMenuSection';

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

@@ -12,6 +12,8 @@ export * from './Breadcrumb';
 export * from './ContactBox';
 export * from './ContactCardList';
 export * from './ContactInfo';
+export * from './ContactInfoBox';
+export * from './ContactInfoBoxMobile';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './DocumentListMenuSection';

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

@@ -12,6 +12,8 @@ export * from './Breadcrumb'
 export * from './ContactBox'
 export * from './ContactCardList'
 export * from './ContactInfo'
+export * from './ContactInfoBox'
+export * from './ContactInfoBoxMobile'
 export * from './ContinueEditingBanner'
 export * from './CountDownMessage'
 export * from './DocumentListMenuSection'

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules';
 import { Button } from '../../atoms';
+import { ContactInfoBox } from '../../molecules/ContactInfoBox';
 import { ContactJumbotronStyled } from './ContactJumbotron.styled';
-export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, visitFaqPageLabel, children, isJonSnow = false }) => {
-    return (_jsxs(ContactJumbotronStyled, { children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
+export const ContactJumbotron = ({ faqsTitle, visitFaqPageLabel, children, isJonSnow = false, items }) => {
+    return (_jsxs(ContactJumbotronStyled, { children: [_jsx(ContactInfoBox, { items: items }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' }))] }));
 };

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.js

@@ -35,7 +35,6 @@ export const ContactJumbotronStyled = styled.article `
   .faq-button {
     display: inline-block;
     margin-top: 1rem;
-    width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;
     }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.ts

@@ -36,7 +36,6 @@ export const ContactJumbotronStyled = styled.article`
   .faq-button {
     display: inline-block;
     margin-top: 1rem;
-    width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;
     }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.tsx

@@ -1,21 +1,20 @@
 import React from 'react'
 
-import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules'
 import { Button } from '../../atoms'
+import { ContactInfoBox } from '../../molecules/ContactInfoBox'
 import { type ContactJumbotronProps } from './ContactJumbotronProps.types'
 import { ContactJumbotronStyled } from './ContactJumbotron.styled'
 
 export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
-  phoneBoxDesktopProps,
-  emailContactBoxProps,
   faqsTitle,
   visitFaqPageLabel,
   children,
-  isJonSnow = false
+  isJonSnow = false,
+  items
 }) => {
   return (
     <ContactJumbotronStyled>
-      {!isJonSnow && <PhoneContactBoxDesktop {...phoneBoxDesktopProps} />}
+      <ContactInfoBox items={items} />
       <h2 className='contact__text__title sans-serif'>{faqsTitle}</h2>
       <div className='contact__text__subtitle sans-serif'>{children}</div>
       {!isJonSnow && (
@@ -27,7 +26,6 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
           dataQa={'visitFaq'}
         />
       )}
-      <EmailContactBox {...emailContactBoxProps} />
     </ContactJumbotronStyled>
   )
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.d.ts

@@ -1,10 +1,9 @@
+import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard';
 import type React from 'react';
-import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules';
 export interface ContactJumbotronProps {
-    phoneBoxDesktopProps: PhoneContactBoxDesktopProps;
-    emailContactBoxProps: EmailContactBoxProps;
     faqsTitle: string;
     visitFaqPageLabel: string;
     children: React.ReactNode;
     isJonSnow?: boolean;
+    items: ContactInfoCardProps[];
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.ts

@@ -1,12 +1,10 @@
+import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard'
 import type React from 'react'
 
-import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules'
-
 export interface ContactJumbotronProps {
-  phoneBoxDesktopProps: PhoneContactBoxDesktopProps
-  emailContactBoxProps: EmailContactBoxProps
   faqsTitle: string
   visitFaqPageLabel: string
   children: React.ReactNode
   isJonSnow?: boolean
+  items: ContactInfoCardProps[]
 }

package/dist/src/components/pages/ContactUsPage/ContactUsPage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContactSection, JumbotronSimplifiedSection } from '../../sections';
-import { PhoneContactBoxMobile } from '../../molecules';
-export const ContactUsPage = ({ jumbotronSimplifiedSectionProps, phoneContactBox, contactProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(JumbotronSimplifiedSection, { ...jumbotronSimplifiedSectionProps }), !isJonSnow && _jsx(PhoneContactBoxMobile, { ...phoneContactBox }), _jsx(ContactSection, { ...contactProps })] }));
+import { ContactInfoBoxMobile } from '../../molecules';
+export const ContactUsPage = ({ jumbotronSimplifiedSectionProps, contactInfoBoxMobileProps, contactProps, isJonSnow = false }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(JumbotronSimplifiedSection, { ...jumbotronSimplifiedSectionProps }), !isJonSnow && _jsx(ContactInfoBoxMobile, { ...contactInfoBoxMobileProps }), _jsx(ContactSection, { ...contactProps })] }));
 };

package/dist/src/components/pages/ContactUsPage/ContactUsPage.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 
 import { ContactSection, JumbotronSimplifiedSection } from '../../sections'
+import { ContactInfoBoxMobile } from '../../molecules'
 import { type ContactUsPageProps } from './ContactUsPageProps'
-import { PhoneContactBoxMobile } from '../../molecules'
 
 export const ContactUsPage: React.FC<ContactUsPageProps> = ({
   jumbotronSimplifiedSectionProps,
-  phoneContactBox,
+  contactInfoBoxMobileProps,
   contactProps,
   isJonSnow = false
 }) => {
   return (
     <>
       <JumbotronSimplifiedSection {...jumbotronSimplifiedSectionProps} />
-      {!isJonSnow && <PhoneContactBoxMobile {...phoneContactBox} />}
+      {!isJonSnow && <ContactInfoBoxMobile {...contactInfoBoxMobileProps} />}
       <ContactSection {...contactProps} />
     </>
   )

package/dist/src/components/pages/ContactUsPage/ContactUsPageProps.d.ts

@@ -1,8 +1,8 @@
 import { type ContactSectionProps, type JumbotronSimplifiedSectionProps } from '../../sections';
-import { type PhoneContactBoxMobileProps } from '../../molecules';
+import { ContactInfoBoxMobileProps } from 'src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types';
 export interface ContactUsPageProps {
     jumbotronSimplifiedSectionProps: JumbotronSimplifiedSectionProps;
-    phoneContactBox: PhoneContactBoxMobileProps;
+    contactInfoBoxMobileProps: ContactInfoBoxMobileProps;
     contactProps: ContactSectionProps;
     isJonSnow?: boolean;
 }

package/dist/src/components/pages/ContactUsPage/ContactUsPageProps.ts

@@ -1,9 +1,9 @@
 import { type ContactSectionProps, type JumbotronSimplifiedSectionProps } from '../../sections'
-import { type PhoneContactBoxMobileProps } from '../../molecules'
+import { ContactInfoBoxMobileProps } from 'src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types'
 
 export interface ContactUsPageProps {
   jumbotronSimplifiedSectionProps: JumbotronSimplifiedSectionProps
-  phoneContactBox: PhoneContactBoxMobileProps
+  contactInfoBoxMobileProps: ContactInfoBoxMobileProps
   contactProps: ContactSectionProps
   isJonSnow?: boolean
 }

package/dist/src/components/sections/ContactSection/ContactSection.styled.js

@@ -30,10 +30,12 @@ export const ContactSectionStyled = styled.section `
   .contact-left-container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    margin-bottom: 2.5rem;
 
     @media ${device['portrait-tablets']} {
       padding-left: 0;
       padding-right: 0;
+      margin-bottom: 1.5rem;
       width: 45%;
     }
   }

package/dist/src/components/sections/ContactSection/ContactSection.styled.ts

@@ -31,10 +31,12 @@ export const ContactSectionStyled = styled.section`
   .contact-left-container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    margin-bottom: 2.5rem;
 
     @media ${device['portrait-tablets']} {
       padding-left: 0;
       padding-right: 0;
+      margin-bottom: 1.5rem;
       width: 45%;
     }
   }

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

@@ -1,7 +1,5 @@
-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 {};
+import { type LegacyRef } from 'react';
+export declare function useIntersectionObserver({ options, defaultIntersecting }: {
+    options?: {} | undefined;
+    defaultIntersecting?: boolean | undefined;
+}): [LegacyRef<HTMLDivElement> | undefined, boolean];

package/dist/src/hooks/useIntersectionObserver.js

@@ -1,19 +1,21 @@
 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);
-        observer.observe(currentElement);
+        if (currentElement != null) {
+            observer.observe(currentElement);
+        }
         return () => {
-            observer.disconnect();
+            if (currentElement != null) {
+                observer.unobserve(currentElement);
+            }
         };
     }, [options]);
     return [elementRef, isIntersecting];

package/dist/src/hooks/useIntersectionObserver.tsx

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