@npm_leadtech/legal-lib-components 7.45.0 → 7.46.0

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export const MobileMenuWrapper = styled.nav `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1rem;
+  @media (min-width: 720px) {
+    display: none;
+  }
+`;
+export const MobilePersonalTrigger = styled.div `
+  border: 1px solid var(--neutral-neutral-3);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  background-color: ${(props) => (props.isActive ? 'var(--primary-main)' : 'var(--others-white)')};
+`;
+export const UserActionsPanel = styled.div `
+  padding: 1.5rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+type MobileMenuTriggerProps = {
+  isActive: boolean
+}
+
+export const MobileMenuWrapper = styled.nav`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1rem;
+  @media (min-width: 720px) {
+    display: none;
+  }
+`
+
+export const MobilePersonalTrigger = styled.div<MobileMenuTriggerProps>`
+  border: 1px solid var(--neutral-neutral-3);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  background-color: ${(props) => (props.isActive ? 'var(--primary-main)' : 'var(--others-white)')};
+`
+
+export const UserActionsPanel = styled.div`
+  padding: 1.5rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

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

@@ -0,0 +1,53 @@
+import { ContactInformation, MobileTrigger } from '../../atoms'
+import { MobileMenuWrapper, UserActionsPanel } from './MobileMenu.styled'
+import { HelpPanelList } from '../../molecules'
+import { MobileMenuProps } from './MobileMenuProps'
+import { MobilePanel } from '../MobilePanel'
+import React from 'react'
+
+export const MobileMenu: React.FC<MobileMenuProps> = ({
+  isHelpActive,
+  isPersonalActive,
+  toggleMenuHelpOpen,
+  toggleMenuPersonalOpen,
+  menuList,
+  sitePhone,
+  scheduleText,
+  homeUrl,
+  userActions,
+  helpTriggerImage,
+  userTriggerImage,
+  closeText,
+  showTopBar
+}) => {
+  return (
+    <MobileMenuWrapper>
+      <MobileTrigger
+        onClick={toggleMenuHelpOpen}
+        isActive={isHelpActive}
+        imageUrl={helpTriggerImage}
+        altText='Help and contact menu'
+      />
+      <MobileTrigger
+        onClick={toggleMenuPersonalOpen}
+        isActive={isPersonalActive}
+        imageUrl={userTriggerImage}
+        altText='User actions menu'
+      />
+
+      <MobilePanel showTopBar={showTopBar} closeText={closeText} isActive={isHelpActive} onClose={toggleMenuHelpOpen}>
+        {menuList?.items?.length && <HelpPanelList {...menuList} homeUrl={homeUrl} />}
+        {sitePhone && <ContactInformation phoneNumber={sitePhone} scheduleText={scheduleText} />}
+      </MobilePanel>
+
+      <MobilePanel
+        showTopBar={showTopBar}
+        closeText={closeText}
+        isActive={isPersonalActive}
+        onClose={toggleMenuPersonalOpen}
+      >
+        <UserActionsPanel>{userActions}</UserActionsPanel>
+      </MobilePanel>
+    </MobileMenuWrapper>
+  )
+}

package/dist/src/components/organisms/MobileMenu/MobileMenuProps.d.ts

@@ -0,0 +1,16 @@
+import { HelpPanelListProps } from 'src/components/molecules/HelpPanelList/HelpPanelListProps';
+export interface MobileMenuProps {
+    isHelpActive: boolean;
+    isPersonalActive: boolean;
+    toggleMenuHelpOpen: () => void;
+    toggleMenuPersonalOpen: () => void;
+    menuList?: HelpPanelListProps;
+    sitePhone?: string;
+    scheduleText?: string;
+    homeUrl?: string;
+    userActions?: React.ReactNode;
+    helpTriggerImage: string;
+    userTriggerImage: string;
+    closeText: string;
+    showTopBar?: boolean;
+}

package/dist/src/components/organisms/MobileMenu/MobileMenuProps.js

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

package/dist/src/components/organisms/MobileMenu/MobileMenuProps.ts

@@ -0,0 +1,18 @@
+import { HelpPanelListProps } from 'src/components/molecules/HelpPanelList/HelpPanelListProps'
+
+export interface MobileMenuProps {
+  isHelpActive: boolean
+  isPersonalActive: boolean
+  toggleMenuHelpOpen: () => void
+  toggleMenuPersonalOpen: () => void
+
+  menuList?: HelpPanelListProps
+  sitePhone?: string
+  scheduleText?: string
+  homeUrl?: string
+  userActions?: React.ReactNode
+  helpTriggerImage: string
+  userTriggerImage: string
+  closeText: string
+  showTopBar?: boolean
+}

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

@@ -0,0 +1,2 @@
+export * from './MobileMenu';
+export * from './MobileMenuProps';

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

@@ -0,0 +1,2 @@
+export * from './MobileMenu';
+export * from './MobileMenuProps';

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

@@ -0,0 +1,2 @@
+export * from './MobileMenu'
+export * from './MobileMenuProps'

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

@@ -0,0 +1,3 @@
+import { MobilePanelProps } from './MobilePanelProps';
+import React from 'react';
+export declare const MobilePanel: React.FC<MobilePanelProps>;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseButton, PanelMenu, PanelMobileWrapper } from './MobilePanel.styled';
+export const MobilePanel = ({ showTopBar, isActive, onClose, children, closeText }) => (_jsx(PanelMobileWrapper, { isActive: isActive, showTopBar: showTopBar, children: _jsxs(PanelMenu, { children: [children, _jsx(CloseButton, { onClick: onClose, children: closeText })] }) }));

package/dist/src/components/organisms/MobilePanel/MobilePanel.styled.d.ts

@@ -0,0 +1,8 @@
+type MobileMenuTriggerProps = {
+    isActive: boolean;
+    showTopBar?: boolean;
+};
+export declare const PanelMobileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MobileMenuTriggerProps>> & string;
+export declare const PanelMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+export const PanelMobileWrapper = styled.div `
+  display: ${(props) => (props.isActive ? 'block' : 'none')};
+  position: fixed;
+  box-shadow: 0 0.25rem 0.5rem -0.5rem rgba(2, 55, 74, 0.2);
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  top: ${(props) => (props.showTopBar ? '6.3rem' : '4rem')};
+  @media (min-width: 576px) and (max-width: 720px) {
+    top: ${(props) => props.showTopBar && '4rem'};
+  }
+  left: 0;
+  background-color: rgba(109, 114, 117, 0.3019607843);
+`;
+export const PanelMenu = styled.div `
+  background: var(--others-white);
+  box-shadow: 0 0.75rem 0.5rem -0.5rem rgba(2, 55, 74, 0.2);
+  padding: 0 1.5rem;
+`;
+export const CloseButton = styled.div `
+  padding: 1.5rem 0;
+  color: var(--primary-main);
+  font-weight: 700;
+  border-top: 1px solid var(--neutral-neutral-4);
+  cursor: pointer;
+`;

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

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+type MobileMenuTriggerProps = {
+  isActive: boolean
+  showTopBar?: boolean
+}
+
+export const PanelMobileWrapper = styled.div<MobileMenuTriggerProps>`
+  display: ${(props) => (props.isActive ? 'block' : 'none')};
+  position: fixed;
+  box-shadow: 0 0.25rem 0.5rem -0.5rem rgba(2, 55, 74, 0.2);
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  top: ${(props) => (props.showTopBar ? '6.3rem' : '4rem')};
+  @media (min-width: 576px) and (max-width: 720px) {
+    top: ${(props) => props.showTopBar && '4rem'};
+  }
+  left: 0;
+  background-color: rgba(109, 114, 117, 0.3019607843);
+`
+
+export const PanelMenu = styled.div`
+  background: var(--others-white);
+  box-shadow: 0 0.75rem 0.5rem -0.5rem rgba(2, 55, 74, 0.2);
+  padding: 0 1.5rem;
+`
+
+export const CloseButton = styled.div`
+  padding: 1.5rem 0;
+  color: var(--primary-main);
+  font-weight: 700;
+  border-top: 1px solid var(--neutral-neutral-4);
+  cursor: pointer;
+`

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

@@ -0,0 +1,12 @@
+import { CloseButton, PanelMenu, PanelMobileWrapper } from './MobilePanel.styled'
+import { MobilePanelProps } from './MobilePanelProps'
+import React from 'react'
+
+export const MobilePanel: React.FC<MobilePanelProps> = ({ showTopBar, isActive, onClose, children, closeText }) => (
+  <PanelMobileWrapper isActive={isActive} showTopBar={showTopBar}>
+    <PanelMenu>
+      {children}
+      <CloseButton onClick={onClose}>{closeText}</CloseButton>
+    </PanelMenu>
+  </PanelMobileWrapper>
+)

package/dist/src/components/organisms/MobilePanel/MobilePanelProps.d.ts

@@ -0,0 +1,7 @@
+export interface MobilePanelProps {
+    isActive: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    closeText: string;
+    showTopBar?: boolean;
+}

package/dist/src/components/organisms/MobilePanel/MobilePanelProps.js

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

package/dist/src/components/organisms/MobilePanel/MobilePanelProps.ts

@@ -0,0 +1,7 @@
+export interface MobilePanelProps {
+  isActive: boolean
+  onClose: () => void
+  children: React.ReactNode
+  closeText: string
+  showTopBar?: boolean
+}

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

@@ -0,0 +1,2 @@
+export * from './MobilePanel';
+export * from './MobilePanelProps';

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

@@ -0,0 +1,2 @@
+export * from './MobilePanel';
+export * from './MobilePanelProps';

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

@@ -0,0 +1,2 @@
+export * from './MobilePanel'
+export * from './MobilePanelProps'

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type NavMenuProps } from './NavMenuProps.types';
+export declare const NavMenu: React.FC<NavMenuProps>;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LanguageSelector } from '../LanguageSelector';
+import { MenuItems } from '../MenuItems';
+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 = ({ isLeftNavHidden, isHeaderProductsHidden, isSearchBarHidden, isResourcesHidden, showHeaderPhone, toggleMenuOpen, isMenuOpen, languageSelectorProps, configVars, searchableProducts, finalMenu, userActions, menuStrings, routes, searchBarTexts, sitePhone, handleResultClick, languageSelectorConfigEnabled, isJonSnow, triggerMenuClose, triggerMenuOpen, setCookiePolicyFunc, navMenuItems, extraMenu }) => {
+    return (_jsxs(NavMenuStyled, { children: [_jsxs("nav", { itemScope: true, itemType: 'https://www.schema.org/SiteNavigationElement', className: `navigation-pane --is-mobile ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [_jsx("div", { onClick: toggleMenuOpen, onKeyDown: toggleMenuOpen, className: 'navigation-pane__trigger sans-serif --small', children: !isMenuOpen ? triggerMenuOpen : triggerMenuClose }), isMenuOpen && (_jsxs("div", { className: 'navigation-pane__wrapper', children: [userActions, !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }), !isJonSnow && sitePhone && _jsx(NavMobileContactBar, { phone: sitePhone })] }))] }), _jsxs("nav", { className: `navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [!isLeftNavHidden && (_jsx("div", { className: 'left-nav', children: _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }) })), _jsxs("div", { className: 'right-nav', children: [showHeaderPhone && (_jsxs("div", { className: 'header-phone', children: [_jsx(PhoneIcon, {}), _jsxs("b", { children: [sitePhone, " "] })] })), !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), languageSelectorConfigEnabled && languageSelectorProps && _jsx(LanguageSelector, { ...languageSelectorProps }), userActions] })] })] }));
+};

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

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