@npm_leadtech/legal-lib-components 7.84.0 → 7.84.2

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PhoneIcon } from './../../../../images/componentsSvg/PhoneIcon';
 import { PhoneNumberDisplayStyled } from './PhoneNumberDisplay.styled';
-export const PhoneNumberDisplay = ({ phoneNumber }) => {
-    return (_jsxs(PhoneNumberDisplayStyled, { children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("p", { children: _jsx("strong", { children: phoneNumber }) })] }));
+export const PhoneNumberDisplay = ({ phoneNumber, border = true }) => {
+    const className = border ? 'phone-number-display phone-number-display-border' : 'phone-number-display';
+    return (_jsxs(PhoneNumberDisplayStyled, { className: className, children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("p", { children: _jsx("strong", { children: phoneNumber }) })] }));
 };

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.js

@@ -4,14 +4,20 @@ export const PhoneNumberDisplayStyled = styled.nav `
   align-items: center;
   gap: 0.5rem;
   color: var(--neutral-neutral-2);
+  height: 2.5rem;
+  padding-right: 0;
+
   p {
     margin: 0;
   }
-  border-right: 1px solid var(--neutral-neutral-3);
-  padding-right: 2rem;
-  height: 2.5rem;
-  @media (min-width: 721px) and (max-width: 849px) {
-    padding-right: 0;
-    border-right: none;
+
+  &.phone-number-display-border {
+    padding-right: 2rem;
+    border-right: 1px solid var(--neutral-neutral-3);
+
+    @media (min-width: 721px) and (max-width: 849px) {
+      padding-right: 0;
+      border-right: none;
+    }
   }
 `;

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.ts

@@ -5,14 +5,20 @@ export const PhoneNumberDisplayStyled = styled.nav`
   align-items: center;
   gap: 0.5rem;
   color: var(--neutral-neutral-2);
+  height: 2.5rem;
+  padding-right: 0;
+
   p {
     margin: 0;
   }
-  border-right: 1px solid var(--neutral-neutral-3);
-  padding-right: 2rem;
-  height: 2.5rem;
-  @media (min-width: 721px) and (max-width: 849px) {
-    padding-right: 0;
-    border-right: none;
+
+  &.phone-number-display-border {
+    padding-right: 2rem;
+    border-right: 1px solid var(--neutral-neutral-3);
+
+    @media (min-width: 721px) and (max-width: 849px) {
+      padding-right: 0;
+      border-right: none;
+    }
   }
 `

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.tsx

@@ -3,9 +3,11 @@ import { PhoneNumberDisplayProps } from './PhoneNumberDisplayProps'
 import { PhoneNumberDisplayStyled } from './PhoneNumberDisplay.styled'
 import React from 'react'
 
-export const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ phoneNumber }) => {
+export const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ phoneNumber, border = true }) => {
+  const className = border ? 'phone-number-display phone-number-display-border' : 'phone-number-display'
+
   return (
-    <PhoneNumberDisplayStyled>
+    <PhoneNumberDisplayStyled className={className}>
       <PhoneIcon width={16} height={16} fill='#6d7275' />
       <p>
         <strong>{phoneNumber}</strong>

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.d.ts

@@ -1,3 +1,4 @@
 export interface PhoneNumberDisplayProps {
     phoneNumber?: string;
+    border?: boolean;
 }

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.ts

@@ -1,3 +1,4 @@
 export interface PhoneNumberDisplayProps {
   phoneNumber?: string
+  border?: boolean
 }

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

@@ -33,7 +33,10 @@ export const AccordionItem = ({ accordionRightContent, children, defaultHeightIt
             }
         };
     }, []);
-    return (_jsxs(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
+    return (_jsxs(AccordionItemStyled, { className: `accordion__container 
+      ${state.handler === 'success' ? 'accordion__container--success' : ''} 
+      ${state.locked.isLocked ? 'accordion__container--locked' : ''} 
+      ${!isOpen ? 'accordion__container--closed' : ''}`, children: [_jsxs("button", { className: `accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
           ${state.locked.isLocked ? '--locked' : ''}`, onClick: () => {
                     !state.locked.isLocked && onClick();

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

@@ -47,7 +47,12 @@ export const AccordionItem = ({
   }, [])
 
   return (
-    <AccordionItemStyled className='accordion__container'>
+    <AccordionItemStyled
+      className={`accordion__container 
+      ${state.handler === 'success' ? 'accordion__container--success' : ''} 
+      ${state.locked.isLocked ? 'accordion__container--locked' : ''} 
+      ${!isOpen ? 'accordion__container--closed' : ''}`}
+    >
       <button
         className={`accordion__button 
           ${state.handler === 'success' ? '--success' : ''}

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

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DesktopMenuStyled } from './DesktopMenu.styled';
 import { HelpSection } from '../../molecules';
 import { PhoneNumberDisplay } from '../../atoms';
-export const DesktopMenu = ({ phoneNumber, menuList, userActions, homeUrl }) => {
-    return (_jsxs(DesktopMenuStyled, { children: [phoneNumber && _jsx(PhoneNumberDisplay, { phoneNumber: phoneNumber }), menuList?.items?.length && _jsx(HelpSection, { ...menuList, homeUrl: homeUrl }), userActions] }));
+export const DesktopMenu = ({ phoneNumber, phoneNumberBorder, menuList, userActions, homeUrl }) => {
+    return (_jsxs(DesktopMenuStyled, { children: [phoneNumber && _jsx(PhoneNumberDisplay, { phoneNumber: phoneNumber, border: phoneNumberBorder }), menuList?.items?.length && _jsx(HelpSection, { ...menuList, homeUrl: homeUrl }), userActions] }));
 };

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

@@ -4,10 +4,16 @@ import { HelpSection } from '../../molecules'
 import { PhoneNumberDisplay } from '../../atoms'
 import React from 'react'
 
-export const DesktopMenu: React.FC<DesktopMenuProps> = ({ phoneNumber, menuList, userActions, homeUrl }) => {
+export const DesktopMenu: React.FC<DesktopMenuProps> = ({
+  phoneNumber,
+  phoneNumberBorder,
+  menuList,
+  userActions,
+  homeUrl
+}) => {
   return (
     <DesktopMenuStyled>
-      {phoneNumber && <PhoneNumberDisplay phoneNumber={phoneNumber} />}
+      {phoneNumber && <PhoneNumberDisplay phoneNumber={phoneNumber} border={phoneNumberBorder} />}
       {menuList?.items?.length && <HelpSection {...menuList} homeUrl={homeUrl} />}
       {userActions}
     </DesktopMenuStyled>

package/dist/src/components/organisms/DesktopMenu/DesktopMenuProps.d.ts

@@ -1,6 +1,7 @@
 import { HelpSectionProps } from 'src/components/molecules/HelpSection';
 export interface DesktopMenuProps {
     phoneNumber: string;
+    phoneNumberBorder?: boolean;
     menuList?: HelpSectionProps;
     userActions: React.ReactNode;
     homeUrl: string;

package/dist/src/components/organisms/DesktopMenu/DesktopMenuProps.ts

@@ -2,6 +2,7 @@ import { HelpSectionProps } from 'src/components/molecules/HelpSection'
 
 export interface DesktopMenuProps {
   phoneNumber: string
+  phoneNumberBorder?: boolean
   menuList?: HelpSectionProps
   userActions: React.ReactNode
   homeUrl: string

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

@@ -3,6 +3,6 @@ import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled';
 import { DesktopMenu, MobileMenu } from '../../organisms';
 import { Logo } from '../../atoms';
 import './AppHeader.scss';
-export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
-    return (_jsx(AppHeaderStyled, { className: headerClassnames, children: _jsxs(AppHeaderWrapper, { itemScope: true, itemType: 'https://schema.org/Brand', className: `${headerFullWidth ? '--no-grid' : 'wrapper'}`, children: [_jsx("a", { className: 'header__logo', onClick: (event) => handleClickLogo(event, homeUrl), href: homeUrl, children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(DesktopMenu, { phoneNumber: sitePhone, menuList: menuList, userActions: userActions, homeUrl: homeUrl }), _jsx(MobileMenu, { closeText: closeText, helpTriggerImage: helpTriggerImage, isHelpActive: isHelpActive, isPersonalActive: isPersonalActive, toggleMenuHelpOpen: toggleMenuHelpOpen, toggleMenuPersonalOpen: toggleMenuPersonalOpen, userTriggerImage: userTriggerImage, homeUrl: homeUrl, menuList: menuList, scheduleText: scheduleText, sitePhone: sitePhone, userActions: userActions, showTopBar: showTopBar })] }) }));
+export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, sitePhoneBorder, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
+    return (_jsx(AppHeaderStyled, { className: headerClassnames, children: _jsxs(AppHeaderWrapper, { itemScope: true, itemType: 'https://schema.org/Brand', className: `${headerFullWidth ? '--no-grid' : 'wrapper'}`, children: [_jsx("a", { className: 'header__logo', onClick: (event) => handleClickLogo(event, homeUrl), href: homeUrl, children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(DesktopMenu, { phoneNumber: sitePhone, phoneNumberBorder: sitePhoneBorder, menuList: menuList, userActions: userActions, homeUrl: homeUrl }), _jsx(MobileMenu, { closeText: closeText, helpTriggerImage: helpTriggerImage, isHelpActive: isHelpActive, isPersonalActive: isPersonalActive, toggleMenuHelpOpen: toggleMenuHelpOpen, toggleMenuPersonalOpen: toggleMenuPersonalOpen, userTriggerImage: userTriggerImage, homeUrl: homeUrl, menuList: menuList, scheduleText: scheduleText, sitePhone: sitePhone, userActions: userActions, showTopBar: showTopBar })] }) }));
 };

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

@@ -9,6 +9,7 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
   siteName = 'LawDistrict',
   homeUrl = '/',
   sitePhone,
+  sitePhoneBorder,
   scheduleText,
   headerFullWidth,
   menuList,
@@ -35,7 +36,13 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
           <Logo siteName={siteName} width='188' height='32' />
         </a>
 
-        <DesktopMenu phoneNumber={sitePhone} menuList={menuList} userActions={userActions} homeUrl={homeUrl} />
+        <DesktopMenu
+          phoneNumber={sitePhone}
+          phoneNumberBorder={sitePhoneBorder}
+          menuList={menuList}
+          userActions={userActions}
+          homeUrl={homeUrl}
+        />
 
         <MobileMenu
           closeText={closeText}

package/dist/src/components/sections/AppHeader/AppHeaderProps.d.ts

@@ -6,6 +6,7 @@ export interface AppHeaderProps {
     siteName: string;
     homeUrl: string;
     sitePhone: string;
+    sitePhoneBorder?: boolean;
     scheduleText: string;
     headerFullWidth: boolean;
     menuList?: {

package/dist/src/components/sections/AppHeader/AppHeaderProps.ts

@@ -7,6 +7,7 @@ export interface AppHeaderProps {
   siteName: string
   homeUrl: string
   sitePhone: string
+  sitePhoneBorder?: boolean
   scheduleText: string
   headerFullWidth: boolean
   menuList?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.84.0",
+  "version": "7.84.2",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",