@npm_leadtech/legal-lib-components 7.15.0 → 7.16.1

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

@@ -0,0 +1,121 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from 'react'
+
+import { LanguageSelector } from '../LanguageSelector'
+import { MenuItems } from '../MenuItems'
+import { type NavMenuProps } from './NavMenuProps.types'
+import { NavMenuStyled } from './NavMenu.styled'
+import { NavMobileContactBar } from '../../molecules/NavMobileContactBar'
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon'
+import { SearchBar } from '../../../components/molecules/SearchBar/SearchBar'
+
+export const NavMenu: React.FC<NavMenuProps> = ({
+  isLeftNavHidden,
+  isHeaderProductsHidden,
+  isSearchBarHidden,
+  isResourcesHidden,
+  showHeaderPhone,
+  toggleMenuOpen,
+  isMenuOpen,
+  languageSelectorProps,
+  configVars,
+  searchableProducts,
+  finalMenu,
+  userActions,
+  menuStrings,
+  routes,
+  searchBarTexts,
+  sitePhone,
+  handleResultClick,
+  languageSelectorConfigEnabled,
+  isJonSnow,
+  isMobile,
+  triggerMenuClose,
+  triggerMenuOpen,
+  setCookiePolicyFunc,
+  navMenuItems,
+  extraMenu
+}) => {
+  return (
+    <NavMenuStyled>
+      {isMobile ? (
+        <nav
+          itemScope
+          itemType='https://www.schema.org/SiteNavigationElement'
+          className={`navigation-pane --is-mobile ${isHeaderProductsHidden ? '--no-products' : ''}`}
+        >
+          <div
+            onClick={toggleMenuOpen}
+            onKeyDown={toggleMenuOpen}
+            className={'navigation-pane__trigger sans-serif --small'}
+          >
+            {!isMenuOpen ? triggerMenuOpen : triggerMenuClose}
+          </div>
+          {isMenuOpen && (
+            <div className={'navigation-pane__wrapper'}>
+              {userActions}
+              {!isSearchBarHidden && (
+                <SearchBar
+                  products={searchableProducts}
+                  searchBarTexts={searchBarTexts}
+                  routes={routes}
+                  handleResultClick={handleResultClick}
+                />
+              )}
+              <MenuItems
+                hasProducts={!isHeaderProductsHidden}
+                isResourcesHidden={isResourcesHidden}
+                seeAllDocumentsText={menuStrings}
+                setCookiePolicyFunc={setCookiePolicyFunc}
+                routes={routes}
+                finalMenu={finalMenu}
+                isMobile={isMobile}
+                configVars={configVars}
+                navMenuItems={navMenuItems}
+                extraMenu={extraMenu}
+              />
+              {!isJonSnow && <NavMobileContactBar phone={sitePhone} />}
+            </div>
+          )}
+        </nav>
+      ) : (
+        <nav className={`navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`}>
+          {!isLeftNavHidden && (
+            <div className='left-nav'>
+              <MenuItems
+                hasProducts={!isHeaderProductsHidden}
+                isResourcesHidden={isResourcesHidden}
+                seeAllDocumentsText={menuStrings}
+                setCookiePolicyFunc={setCookiePolicyFunc}
+                routes={routes}
+                finalMenu={finalMenu}
+                isMobile={isMobile}
+                configVars={configVars}
+                navMenuItems={navMenuItems}
+                extraMenu={extraMenu}
+              />
+            </div>
+          )}
+          <div className='right-nav'>
+            {showHeaderPhone && (
+              <div className='header-phone'>
+                <PhoneIcon />
+                <b>{sitePhone} </b>
+              </div>
+            )}
+            {!isSearchBarHidden && (
+              <SearchBar
+                products={searchableProducts}
+                searchBarTexts={searchBarTexts}
+                routes={routes}
+                handleResultClick={handleResultClick}
+              />
+            )}
+            {languageSelectorConfigEnabled && languageSelectorProps && <LanguageSelector {...languageSelectorProps} />}
+            {userActions}
+          </div>
+        </nav>
+      )}
+    </NavMenuStyled>
+  )
+}

package/dist/src/components/organisms/NavMenu/NavMenuProps.types.d.ts

@@ -0,0 +1,80 @@
+import { DocumentListMenuSectionProps } from '../../molecules/DocumentListMenuSection';
+import { type LanguageSelectorProps } from '../LanguageSelector/LanguageSelectorProps';
+import { Routes } from '../../sections/Header/HeaderProps.types';
+export interface Products {
+    categoryUrl?: string;
+    isFeatured?: boolean;
+    popularOrder: number;
+    jumboTitle: string;
+    linkText: string;
+    slug: string;
+    footerPopularDocument?: boolean;
+    logoImgBig?: string;
+    logoImgSmall?: string;
+    categoryProduct?: {
+        name: string;
+        icon: string;
+    };
+}
+export interface StrapiSearchBar {
+    title: string;
+    placeholder: string;
+}
+export interface NavMenuProps {
+    isLeftNavHidden?: boolean;
+    isHeaderProductsHidden?: boolean;
+    isSearchBarHidden?: boolean;
+    isResourcesHidden?: boolean;
+    showHeaderPhone?: 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;
+    isMobile: 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;
+        }[];
+    };
+}

package/dist/src/components/organisms/NavMenu/NavMenuProps.types.js

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

package/dist/src/components/organisms/NavMenu/NavMenuProps.types.ts

@@ -0,0 +1,82 @@
+import { DocumentListMenuSectionProps } from '../../molecules/DocumentListMenuSection'
+import { type LanguageSelectorProps } from '../LanguageSelector/LanguageSelectorProps'
+import { Routes } from '../../sections/Header/HeaderProps.types'
+
+export interface Products {
+  categoryUrl?: string
+  isFeatured?: boolean
+  popularOrder: number
+  jumboTitle: string
+  linkText: string
+  slug: string
+  footerPopularDocument?: boolean
+  logoImgBig?: string
+  logoImgSmall?: string
+  categoryProduct?: {
+    name: string
+    icon: string
+  }
+}
+export interface StrapiSearchBar {
+  title: string
+  placeholder: string
+}
+
+export interface NavMenuProps {
+  isLeftNavHidden?: boolean
+  isHeaderProductsHidden?: boolean
+  isSearchBarHidden?: boolean
+  isResourcesHidden?: boolean
+  showHeaderPhone?: 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
+  isMobile: 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
+    }[]
+  }
+}

package/dist/src/components/organisms/NavMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { NavMenu } from './NavMenu';
+export { type NavMenuProps } from './NavMenuProps.types';

package/dist/src/components/organisms/NavMenu/index.js

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

package/dist/src/components/organisms/NavMenu/index.ts

@@ -0,0 +1,2 @@
+export { NavMenu } from './NavMenu'
+export { type NavMenuProps } from './NavMenuProps.types'

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

@@ -7,6 +7,9 @@ export * from './CardFunctionality';
 export * from './ContactContent';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
+export * from './DocumentListMenu';
+export * from './DocumentMainMenu';
+export * from './DocumentSubMenu';
 export * from './ErrorContentRatafia';
 export * from './FaqGroup';
 export * from './FeaturesRatafiaContent';
@@ -21,6 +24,7 @@ export * from './LimitReachedContentRatafia';
 export * from './ListStepsGetForm';
 export * from './LoginRatafiaContent';
 export * from './MobileBottomBar';
+export * from './NavMenu';
 export * from './RatafiaLoadingResultContent';
 export * from './RatafiaResultContent';
 export * from './StepsRatafiaContent';

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

@@ -7,6 +7,9 @@ export * from './CardFunctionality';
 export * from './ContactContent';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
+export * from './DocumentListMenu';
+export * from './DocumentMainMenu';
+export * from './DocumentSubMenu';
 export * from './ErrorContentRatafia';
 export * from './FaqGroup';
 export * from './FeaturesRatafiaContent';
@@ -21,6 +24,7 @@ export * from './LimitReachedContentRatafia';
 export * from './ListStepsGetForm';
 export * from './LoginRatafiaContent';
 export * from './MobileBottomBar';
+export * from './NavMenu';
 export * from './RatafiaLoadingResultContent';
 export * from './RatafiaResultContent';
 export * from './StepsRatafiaContent';

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

@@ -7,6 +7,9 @@ export * from './CardFunctionality'
 export * from './ContactContent'
 export * from './ContactJumbotron'
 export * from './CookiePolicyBar'
+export * from './DocumentListMenu'
+export * from './DocumentMainMenu'
+export * from './DocumentSubMenu'
 export * from './ErrorContentRatafia'
 export * from './FaqGroup'
 export * from './FeaturesRatafiaContent'
@@ -21,6 +24,7 @@ export * from './LimitReachedContentRatafia'
 export * from './ListStepsGetForm'
 export * from './LoginRatafiaContent'
 export * from './MobileBottomBar'
+export * from './NavMenu'
 export * from './RatafiaLoadingResultContent'
 export * from './RatafiaResultContent'
 export * from './StepsRatafiaContent'

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: 'wrapper 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,136 @@
+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.sm}) {
+    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;
+    max-width: 1200px;
+    padding: 1rem 1.5rem;
+
+    @media (min-width: ${size.sm}) {
+      padding: 1rem 1rem 1.5rem 1rem;
+    }
+  }
+
+  &.scrollDown {
+    background-color: var(--others-white) !important;
+    box-shadow: var(--box-shadow-small);
+  }
+
+  .top-bar-wrapper {
+    .top-bar {
+      @media (max-width: ${size.sm}) {
+        font-size: 0.78rem;
+        letter-spacing: -0.5px;
+      }
+    }
+
+    .top-bar-content {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      @media ${device['landscape-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['landscape-tablets']} {
+      position: sticky;
+    }
+  }
+
+  &__inner {
+    max-width: 1200px;
+    padding: 1rem 1.5rem;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (min-width: ${size.sm}) {
+      padding: 1rem;
+    }
+  }
+
+  .header__logo {
+    z-index: 200;
+    min-width: max-content;
+  }
+
+  &.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,137 @@
+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.sm}) {
+    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;
+    max-width: 1200px;
+    padding: 1rem 1.5rem;
+
+    @media (min-width: ${size.sm}) {
+      padding: 1rem 1rem 1.5rem 1rem;
+    }
+  }
+
+  &.scrollDown {
+    background-color: var(--others-white) !important;
+    box-shadow: var(--box-shadow-small);
+  }
+
+  .top-bar-wrapper {
+    .top-bar {
+      @media (max-width: ${size.sm}) {
+        font-size: 0.78rem;
+        letter-spacing: -0.5px;
+      }
+    }
+
+    .top-bar-content {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      @media ${device['landscape-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['landscape-tablets']} {
+      position: sticky;
+    }
+  }
+
+  &__inner {
+    max-width: 1200px;
+    padding: 1rem 1.5rem;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (min-width: ${size.sm}) {
+      padding: 1rem;
+    }
+  }
+
+  .header__logo {
+    z-index: 200;
+    min-width: max-content;
+  }
+
+  &.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={'wrapper 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