@npm_leadtech/legal-lib-components 7.45.0 → 7.45.1

package/dist/src/components/sections/Footer/Footer.mocks.ts

@@ -0,0 +1,77 @@
+import { BottomFooterProps } from 'src/components/organisms/BottomFooter'
+import { ContactInfoProps } from '../../molecules/ContactInfo/ContactInfoProps.types'
+import { FooterMenuProps } from '../../molecules/FooterMenu/FooterMenuProps.types'
+import { SocialLink } from '../../molecules/SocialLinks/SocialLinksProps.types'
+import { TopFooterProps } from 'src/components/organisms/TopFooter'
+
+import facebookIcon from '../../../../images/svg/facebook.svg'
+import linkedinIcon from '../../../../images/svg/linkedin.svg'
+import pinterestIcon from '../../../../images/svg/pinterest.svg'
+import xIcon from '../../../../images/svg/x.svg'
+
+export const mockMenu: FooterMenuProps = {
+  title: 'SERVICES',
+  links: [
+    { name: 'Legal Documents and Forms', url: '#' },
+    { name: 'LawGenius', url: '#', customClass: 'ai-link' },
+    { name: 'eSignature', url: '#' }
+  ]
+}
+
+export const mockSocialLinks: SocialLink[] = [
+  { url: 'https://facebook.com', iconSrc: facebookIcon, alt: 'Facebook' },
+  { url: 'https://twitter.com', iconSrc: xIcon, alt: 'Twitter' },
+  { url: 'https://pinterest.com', iconSrc: pinterestIcon, alt: 'Pinterest' },
+  { url: 'https://linkedin.com', iconSrc: linkedinIcon, alt: 'LinkedIn' }
+]
+
+export const mockContactInfo: ContactInfoProps = {
+  phoneNumber: '1-800-123-4567',
+  schedule: 'Contact Hours: Sun-Sat 9am - 7pm ET',
+  languageSelector: 'LANGUAGE SELECTOR'
+}
+
+export const mockTopFooterArgs: TopFooterProps = {
+  menus: [
+    mockMenu,
+    {
+      title: 'POPULAR DOCUMENTS',
+      links: [
+        { name: 'Bill of Sale', url: '#' },
+        { name: 'Living Will', url: '#' },
+        { name: 'Power of Attorney', url: '#' },
+        { name: 'Residential Lease Agreement', url: '#' }
+      ]
+    },
+    {
+      title: 'RESOURCES',
+      links: [
+        { name: 'Articles', url: '#', rel: 'nofollow' },
+        { name: 'Legal Dictionary', url: '#', dataQa: 'legal-dictionary' }
+      ]
+    },
+    {
+      title: 'Help',
+      links: [
+        { name: 'FAQs', url: '#' },
+        { name: 'Contact Us', url: '#' },
+        { name: 'Pricing', url: '#' }
+      ]
+    }
+  ],
+  contactInfo: mockContactInfo,
+  trustPilotWidget: 'TRUSTPILOTWIDGET'
+}
+
+export const mockBottomFooterArgs: BottomFooterProps = {
+  siteName: 'LawDistrict',
+  companyLinks: [
+    { name: 'Terms of Service', url: '#' },
+    { name: 'Privacy Policy', url: '#' },
+    { name: 'Cookie Policy', url: '#' }
+  ],
+  socialLinks: mockSocialLinks,
+  disclaimerText:
+    'Lawdistrict.com offers various models of legal documents, as well as additional functionalities, for different needs and purposes. By using our online document editor you will obtain a completely customized legal document for a fee. We are not a law firm and, therefore, do not provide official legal advice. If you need further legal assistance, we suggest consulting an attorney or a law firm in your jurisdiction that specializes in your specific legal matter. You take sole responsibility for the use of the legal documents and information provided.',
+  copyrightText: `© ${new Date().getFullYear()} www.lawdistrict.com All Rights Reserved.`
+}

package/dist/src/components/sections/Footer/Footer.styled.d.ts

@@ -0,0 +1 @@
+export declare const FooterStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const FooterStyled = styled.footer `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--primary-main-dark-2);
+  width: 100%;
+  margin: 0 auto;
+`;

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+export const FooterStyled = styled.footer`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--primary-main-dark-2);
+  width: 100%;
+  margin: 0 auto;
+`

package/dist/src/components/sections/Footer/Footer.tsx

@@ -0,0 +1,14 @@
+import { BottomFooter } from '../../organisms/BottomFooter/BottomFooter'
+import { FooterProps } from './FooterProps.types'
+import { FooterStyled } from './Footer.styled'
+import React from 'react'
+import { TopFooter } from '../../organisms/TopFooter/TopFooter'
+
+export const Footer: React.FC<FooterProps> = ({ footerTopProps, footerBottomProps }) => {
+  return (
+    <FooterStyled className='footer'>
+      <TopFooter {...footerTopProps} />
+      {footerBottomProps && <BottomFooter {...footerBottomProps} />}
+    </FooterStyled>
+  )
+}

package/dist/src/components/sections/Footer/FooterProps.types.d.ts

@@ -0,0 +1,6 @@
+import { BottomFooterProps } from 'src/components/organisms/BottomFooter';
+import { TopFooterProps } from 'src/components/organisms/TopFooter';
+export interface FooterProps {
+    footerTopProps: TopFooterProps;
+    footerBottomProps?: BottomFooterProps;
+}

package/dist/src/components/sections/Footer/FooterProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/sections/Footer/FooterProps.types.ts

@@ -0,0 +1,7 @@
+import { BottomFooterProps } from 'src/components/organisms/BottomFooter'
+import { TopFooterProps } from 'src/components/organisms/TopFooter'
+
+export interface FooterProps {
+  footerTopProps: TopFooterProps
+  footerBottomProps?: BottomFooterProps
+}

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

@@ -0,0 +1,8 @@
+export { Footer } from './Footer';
+export { type FooterProps } from './FooterProps.types';
+export { type TopFooterProps } from '../../organisms/TopFooter/TopFooterProps.types';
+export { type BottomFooterProps } from '../../organisms/BottomFooter/BottomFooterProps.types';
+export { type Link } from '../../molecules/FooterMenu/FooterMenuProps.types';
+export { type SocialLink } from '../../molecules/SocialLinks/SocialLinksProps.types';
+export { type FooterMenuProps } from '../../molecules/FooterMenu/FooterMenuProps.types';
+export { type ContactInfoProps } from '../../molecules/ContactInfo/ContactInfoProps.types';

package/dist/src/components/sections/Footer/index.js

@@ -0,0 +1 @@
+export { Footer } from './Footer';

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

@@ -0,0 +1,8 @@
+export { Footer } from './Footer'
+export { type FooterProps } from './FooterProps.types'
+export { type TopFooterProps } from '../../organisms/TopFooter/TopFooterProps.types'
+export { type BottomFooterProps } from '../../organisms/BottomFooter/BottomFooterProps.types'
+export { type Link } from '../../molecules/FooterMenu/FooterMenuProps.types'
+export { type SocialLink } from '../../molecules/SocialLinks/SocialLinksProps.types'
+export { type FooterMenuProps } from '../../molecules/FooterMenu/FooterMenuProps.types'
+export { type ContactInfoProps } from '../../molecules/ContactInfo/ContactInfoProps.types'

package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { GuidelinesContent } from '../../organisms/GuidelinesContent';
 import { GuidelinesSectionStyled } from './GuidelinesSection.styled';
 const GuidelinesSection = ({ contentGuidelines }) => {
-    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
+    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, tryNowText: contentGuidelines.tryNowText, tryNowButtonText: contentGuidelines.tryNowButtonText, tryNowButtonLink: contentGuidelines.tryNowButtonLink, tryNowButtonDataQa: contentGuidelines.tryNowButtonDataQa, tryNowImage: contentGuidelines.tryNowImage, children: contentGuidelines.children }) }));
 };
 export default GuidelinesSection;

package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.tsx

@@ -11,6 +11,11 @@ const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) =>
         title={contentGuidelines.title}
         image={contentGuidelines.image}
         detail={contentGuidelines.detail}
+        tryNowText={contentGuidelines.tryNowText}
+        tryNowButtonText={contentGuidelines.tryNowButtonText}
+        tryNowButtonLink={contentGuidelines.tryNowButtonLink}
+        tryNowButtonDataQa={contentGuidelines.tryNowButtonDataQa}
+        tryNowImage={contentGuidelines.tryNowImage}
       >
         {contentGuidelines.children}
       </GuidelinesContent>

package/dist/src/components/sections/Header/Header.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type HeaderProps } from './HeaderProps.types';
+declare const Header: React.ForwardRefExoticComponent<Omit<HeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Header;

package/dist/src/components/sections/Header/Header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Logo, TopBar } from '../../atoms';
+import { HeaderStyled } from './Header.styled';
+import { NavMenu } from '../../organisms/NavMenu';
+const Header = forwardRef(({ mainHeaderProps, topBarProps, navMenuProps }, ref) => {
+    const { classnames, siteName } = mainHeaderProps;
+    return (_jsxs(HeaderStyled, { className: `header ${classnames}`, ref: ref, id: 'header', children: [_jsx(TopBar, { ...topBarProps }), _jsxs("span", { itemScope: true, itemType: 'https://www.schema.org/Brand', className: 'flex header__inner', children: [_jsx("a", { "data-qa": 'Header_Logo', className: 'header__logo', href: '/', children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(NavMenu, { ...navMenuProps })] })] }));
+});
+Header.displayName = 'Header';
+export default Header;

package/dist/src/components/sections/Header/Header.styled.d.ts

@@ -0,0 +1 @@
+export declare const HeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

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

@@ -0,0 +1,142 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const HeaderStyled = styled.header `
+  position: sticky;
+  top: 0;
+  transition: all 0.3s ease;
+  z-index: 1000;
+
+  @media (max-width: ${size.tab}) {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: 111111111111;
+  }
+
+  html[data-theme='lawdistrict'] {
+    .header {
+      &.product-header-background {
+        background-color: var(--secondary-main-light-4);
+      }
+    }
+  }
+
+  .header__inner {
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+
+    @media (min-width: ${size.tab}) {
+      padding: 1rem 2rem 1rem 2rem;
+    }
+  }
+
+  &.scrollDown {
+    background-color: var(--others-white) !important;
+    box-shadow: var(--box-shadow-small);
+  }
+
+  .top-bar-wrapper {
+    .top-bar {
+      @media (max-width: ${size.tab}) {
+        font-size: 0.78rem;
+        letter-spacing: -0.5px;
+      }
+    }
+
+    .top-bar-content {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      @media ${device.tablets} {
+        justify-content: center;
+        width: auto;
+      }
+      span {
+        display: none;
+
+        @media ${device['laptop']} {
+          display: inline;
+        }
+      }
+    }
+  }
+
+  .top-bar-mobile {
+    font-size: 14px;
+    padding: 8px 10px;
+    letter-spacing: normal;
+  }
+
+  &.hide-header-in-mobile {
+    position: relative;
+
+    @media ${device.tablets} {
+      position: sticky;
+    }
+  }
+
+  &__inner {
+    max-width: 1200px;
+    padding: 1rem 1.5rem;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (min-width: ${size.tab}) {
+      padding: 1rem;
+    }
+  }
+
+  .header__logo {
+    z-index: 200;
+    min-width: max-content;
+
+    img {
+      @media (max-width: 1024px) {
+        width: 141px;
+        height: auto;
+      }
+    }
+  }
+
+  &.product-header-background {
+    background-color: var(--primary-main-light-6);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+
+  &.esignature-header-background {
+    background-color: var(--neutral-neutral-5);
+  }
+
+  .--no-grid {
+    padding: 0 2rem;
+  }
+
+  &.--is-open {
+    background: var(--others-white);
+    position: fixed;
+    width: 100%;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .refresh-container {
+    height: 70px;
+    padding-top: 10px;
+
+    .e-button {
+      width: 140px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+`;

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

@@ -0,0 +1,143 @@
+import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const HeaderStyled = styled.header`
+  position: sticky;
+  top: 0;
+  transition: all 0.3s ease;
+  z-index: 1000;
+
+  @media (max-width: ${size.tab}) {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: 111111111111;
+  }
+
+  html[data-theme='lawdistrict'] {
+    .header {
+      &.product-header-background {
+        background-color: var(--secondary-main-light-4);
+      }
+    }
+  }
+
+  .header__inner {
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+
+    @media (min-width: ${size.tab}) {
+      padding: 1rem 2rem 1rem 2rem;
+    }
+  }
+
+  &.scrollDown {
+    background-color: var(--others-white) !important;
+    box-shadow: var(--box-shadow-small);
+  }
+
+  .top-bar-wrapper {
+    .top-bar {
+      @media (max-width: ${size.tab}) {
+        font-size: 0.78rem;
+        letter-spacing: -0.5px;
+      }
+    }
+
+    .top-bar-content {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      @media ${device.tablets} {
+        justify-content: center;
+        width: auto;
+      }
+      span {
+        display: none;
+
+        @media ${device['laptop']} {
+          display: inline;
+        }
+      }
+    }
+  }
+
+  .top-bar-mobile {
+    font-size: 14px;
+    padding: 8px 10px;
+    letter-spacing: normal;
+  }
+
+  &.hide-header-in-mobile {
+    position: relative;
+
+    @media ${device.tablets} {
+      position: sticky;
+    }
+  }
+
+  &__inner {
+    max-width: 1200px;
+    padding: 1rem 1.5rem;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (min-width: ${size.tab}) {
+      padding: 1rem;
+    }
+  }
+
+  .header__logo {
+    z-index: 200;
+    min-width: max-content;
+
+    img {
+      @media (max-width: 1024px) {
+        width: 141px;
+        height: auto;
+      }
+    }
+  }
+
+  &.product-header-background {
+    background-color: var(--primary-main-light-6);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+
+  &.esignature-header-background {
+    background-color: var(--neutral-neutral-5);
+  }
+
+  .--no-grid {
+    padding: 0 2rem;
+  }
+
+  &.--is-open {
+    background: var(--others-white);
+    position: fixed;
+    width: 100%;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .refresh-container {
+    height: 70px;
+    padding-top: 10px;
+
+    .e-button {
+      width: 140px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+`

package/dist/src/components/sections/Header/Header.tsx

@@ -0,0 +1,28 @@
+import React, { ReactElement, forwardRef } from 'react'
+
+import { Logo, TopBar } from '../../atoms'
+import { type HeaderProps } from './HeaderProps.types'
+import { HeaderStyled } from './Header.styled'
+import { NavMenu } from '../../organisms/NavMenu'
+
+const Header = forwardRef<HTMLDivElement, HeaderProps>(
+  ({ mainHeaderProps, topBarProps, navMenuProps }, ref): ReactElement => {
+    const { classnames, siteName } = mainHeaderProps
+
+    return (
+      <HeaderStyled className={`header ${classnames}`} ref={ref} id='header'>
+        <TopBar {...topBarProps} />
+        <span itemScope itemType='https://www.schema.org/Brand' className={'flex header__inner'}>
+          <a data-qa={'Header_Logo'} className='header__logo' href='/'>
+            <Logo siteName={siteName} width='188' height='32' />
+          </a>
+          <NavMenu {...navMenuProps} />
+        </span>
+      </HeaderStyled>
+    )
+  }
+)
+
+Header.displayName = 'Header'
+
+export default Header

package/dist/src/components/sections/Header/HeaderProps.types.d.ts

@@ -0,0 +1,95 @@
+import { DocumentListMenuSectionProps } from '../../molecules/DocumentListMenuSection';
+import { type LanguageSelectorProps } from '../../organisms/LanguageSelector/LanguageSelectorProps';
+import { Products } from '../../organisms/NavMenu/NavMenuProps.types';
+interface StaticRoutes {
+    LOGIN: string;
+    MY_DOCUMENTS: string;
+    REGISTER: string;
+    SIGN_EDITOR: string;
+    RATAFIA_LOGIN: string;
+    LEGAL_DOCUMENTS: string;
+}
+interface DynamicRoutes {
+    CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string;
+    CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string;
+    LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string;
+    LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string;
+}
+export type Routes = StaticRoutes & DynamicRoutes;
+export interface StrapiSearchBar {
+    title: string;
+    placeholder: string;
+}
+export interface HeaderProps {
+    mainHeaderProps: {
+        classnames?: string;
+        hide?: boolean;
+        siteName: string;
+    };
+    topBarProps: {
+        hide?: boolean;
+        isVisible?: boolean;
+        children?: React.ReactNode;
+    };
+    navMenuProps: {
+        isLeftNavHidden?: boolean;
+        isHeaderProductsHidden?: boolean;
+        isSearchBarHidden?: boolean;
+        isResourcesHidden?: boolean;
+        showHeaderPhone?: boolean;
+        showContactBar?: boolean;
+        showContactBarMobile?: boolean;
+        languageSelectorProps?: LanguageSelectorProps;
+        userActions: React.ReactNode;
+        menuStrings: {
+            seeAllLegalDocs: string;
+            seeAllTypeDocs: string;
+            allLegalDocs: string;
+            allTypeDocs: string;
+        };
+        routes: Routes;
+        searchBarTexts: StrapiSearchBar;
+        sitePhone: string;
+        handleResultClick: (product: string, link: string) => void;
+        searchableProducts: Products[];
+        isMenuOpen: boolean;
+        languageSelectorConfigEnabled: boolean;
+        isJonSnow: boolean;
+        triggerMenuOpen: React.ReactNode;
+        triggerMenuClose: React.ReactNode;
+        toggleMenuOpen: () => void;
+        setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void;
+        finalMenu: DocumentListMenuSectionProps[];
+        configVars: {
+            TARGET_ADDRESS: string;
+            ESIGNATURE_CONFIG: {
+                ENABLED: boolean;
+                SIGN_SUBDOMAIN: string;
+            };
+            IS_JONSNOW: boolean;
+            HAS_GRAV_SITEMAP: boolean;
+            RATAFIA_CONFIG: {
+                ENABLED: boolean;
+                CLAUSES_ENABLED: boolean;
+            };
+            HAS_SUBCATEGORY_PAGE: boolean;
+        };
+        navMenuItems: {
+            title: string;
+            dataQa: string;
+            href: string;
+            label: string;
+        }[];
+        extraMenu?: {
+            title: string;
+            items: {
+                title: string;
+                dataQa: string;
+                href: string;
+                label: string;
+            }[];
+        };
+    };
+    ref: React.Ref<HTMLDivElement>;
+}
+export {};

package/dist/src/components/sections/Header/HeaderProps.types.js

@@ -0,0 +1 @@
+export {};