@npm_leadtech/legal-lib-components 7.83.1 → 7.84.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { PhoneIcon } from './../../../../images/componentsSvg/PhoneIcon';
3
3
  import { PhoneNumberDisplayStyled } from './PhoneNumberDisplay.styled';
4
- export const PhoneNumberDisplay = ({ phoneNumber }) => {
5
- return (_jsxs(PhoneNumberDisplayStyled, { children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("p", { children: _jsx("strong", { children: phoneNumber }) })] }));
4
+ export const PhoneNumberDisplay = ({ phoneNumber, border = true }) => {
5
+ const className = border ? 'phone-number-display phone-number-display-border' : 'phone-number-display';
6
+ return (_jsxs(PhoneNumberDisplayStyled, { className: className, children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("p", { children: _jsx("strong", { children: phoneNumber }) })] }));
6
7
  };
@@ -4,14 +4,20 @@ export const PhoneNumberDisplayStyled = styled.nav `
4
4
  align-items: center;
5
5
  gap: 0.5rem;
6
6
  color: var(--neutral-neutral-2);
7
+ height: 2.5rem;
8
+ padding-right: 0;
9
+
7
10
  p {
8
11
  margin: 0;
9
12
  }
10
- border-right: 1px solid var(--neutral-neutral-3);
11
- padding-right: 2rem;
12
- height: 2.5rem;
13
- @media (min-width: 721px) and (max-width: 849px) {
14
- padding-right: 0;
15
- border-right: none;
13
+
14
+ &.phone-number-display-border {
15
+ padding-right: 2rem;
16
+ border-right: 1px solid var(--neutral-neutral-3);
17
+
18
+ @media (min-width: 721px) and (max-width: 849px) {
19
+ padding-right: 0;
20
+ border-right: none;
21
+ }
16
22
  }
17
23
  `;
@@ -5,14 +5,20 @@ export const PhoneNumberDisplayStyled = styled.nav`
5
5
  align-items: center;
6
6
  gap: 0.5rem;
7
7
  color: var(--neutral-neutral-2);
8
+ height: 2.5rem;
9
+ padding-right: 0;
10
+
8
11
  p {
9
12
  margin: 0;
10
13
  }
11
- border-right: 1px solid var(--neutral-neutral-3);
12
- padding-right: 2rem;
13
- height: 2.5rem;
14
- @media (min-width: 721px) and (max-width: 849px) {
15
- padding-right: 0;
16
- border-right: none;
14
+
15
+ &.phone-number-display-border {
16
+ padding-right: 2rem;
17
+ border-right: 1px solid var(--neutral-neutral-3);
18
+
19
+ @media (min-width: 721px) and (max-width: 849px) {
20
+ padding-right: 0;
21
+ border-right: none;
22
+ }
17
23
  }
18
24
  `
@@ -3,9 +3,11 @@ import { PhoneNumberDisplayProps } from './PhoneNumberDisplayProps'
3
3
  import { PhoneNumberDisplayStyled } from './PhoneNumberDisplay.styled'
4
4
  import React from 'react'
5
5
 
6
- export const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ phoneNumber }) => {
6
+ export const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ phoneNumber, border = true }) => {
7
+ const className = border ? 'phone-number-display phone-number-display-border' : 'phone-number-display'
8
+
7
9
  return (
8
- <PhoneNumberDisplayStyled>
10
+ <PhoneNumberDisplayStyled className={className}>
9
11
  <PhoneIcon width={16} height={16} fill='#6d7275' />
10
12
  <p>
11
13
  <strong>{phoneNumber}</strong>
@@ -1,3 +1,4 @@
1
1
  export interface PhoneNumberDisplayProps {
2
2
  phoneNumber?: string;
3
+ border?: boolean;
3
4
  }
@@ -1,3 +1,4 @@
1
1
  export interface PhoneNumberDisplayProps {
2
2
  phoneNumber?: string
3
+ border?: boolean
3
4
  }
@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { DesktopMenuStyled } from './DesktopMenu.styled';
3
3
  import { HelpSection } from '../../molecules';
4
4
  import { PhoneNumberDisplay } from '../../atoms';
5
- export const DesktopMenu = ({ phoneNumber, menuList, userActions, homeUrl }) => {
6
- return (_jsxs(DesktopMenuStyled, { children: [phoneNumber && _jsx(PhoneNumberDisplay, { phoneNumber: phoneNumber }), menuList?.items?.length && _jsx(HelpSection, { ...menuList, homeUrl: homeUrl }), userActions] }));
5
+ export const DesktopMenu = ({ phoneNumber, phoneNumberBorder, menuList, userActions, homeUrl }) => {
6
+ return (_jsxs(DesktopMenuStyled, { children: [phoneNumber && _jsx(PhoneNumberDisplay, { phoneNumber: phoneNumber, border: phoneNumberBorder }), menuList?.items?.length && _jsx(HelpSection, { ...menuList, homeUrl: homeUrl }), userActions] }));
7
7
  };
@@ -4,10 +4,16 @@ import { HelpSection } from '../../molecules'
4
4
  import { PhoneNumberDisplay } from '../../atoms'
5
5
  import React from 'react'
6
6
 
7
- export const DesktopMenu: React.FC<DesktopMenuProps> = ({ phoneNumber, menuList, userActions, homeUrl }) => {
7
+ export const DesktopMenu: React.FC<DesktopMenuProps> = ({
8
+ phoneNumber,
9
+ phoneNumberBorder,
10
+ menuList,
11
+ userActions,
12
+ homeUrl
13
+ }) => {
8
14
  return (
9
15
  <DesktopMenuStyled>
10
- {phoneNumber && <PhoneNumberDisplay phoneNumber={phoneNumber} />}
16
+ {phoneNumber && <PhoneNumberDisplay phoneNumber={phoneNumber} border={phoneNumberBorder} />}
11
17
  {menuList?.items?.length && <HelpSection {...menuList} homeUrl={homeUrl} />}
12
18
  {userActions}
13
19
  </DesktopMenuStyled>
@@ -1,6 +1,7 @@
1
1
  import { HelpSectionProps } from 'src/components/molecules/HelpSection';
2
2
  export interface DesktopMenuProps {
3
3
  phoneNumber: string;
4
+ phoneNumberBorder?: boolean;
4
5
  menuList?: HelpSectionProps;
5
6
  userActions: React.ReactNode;
6
7
  homeUrl: string;
@@ -2,6 +2,7 @@ import { HelpSectionProps } from 'src/components/molecules/HelpSection'
2
2
 
3
3
  export interface DesktopMenuProps {
4
4
  phoneNumber: string
5
+ phoneNumberBorder?: boolean
5
6
  menuList?: HelpSectionProps
6
7
  userActions: React.ReactNode
7
8
  homeUrl: string
@@ -3,6 +3,6 @@ import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled';
3
3
  import { DesktopMenu, MobileMenu } from '../../organisms';
4
4
  import { Logo } from '../../atoms';
5
5
  import './AppHeader.scss';
6
- export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
7
- 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 })] }) }));
6
+ export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, sitePhoneBorder, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
7
+ 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 })] }) }));
8
8
  };
@@ -9,6 +9,7 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
9
9
  siteName = 'LawDistrict',
10
10
  homeUrl = '/',
11
11
  sitePhone,
12
+ sitePhoneBorder,
12
13
  scheduleText,
13
14
  headerFullWidth,
14
15
  menuList,
@@ -35,7 +36,13 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
35
36
  <Logo siteName={siteName} width='188' height='32' />
36
37
  </a>
37
38
 
38
- <DesktopMenu phoneNumber={sitePhone} menuList={menuList} userActions={userActions} homeUrl={homeUrl} />
39
+ <DesktopMenu
40
+ phoneNumber={sitePhone}
41
+ phoneNumberBorder={sitePhoneBorder}
42
+ menuList={menuList}
43
+ userActions={userActions}
44
+ homeUrl={homeUrl}
45
+ />
39
46
 
40
47
  <MobileMenu
41
48
  closeText={closeText}
@@ -6,6 +6,7 @@ export interface AppHeaderProps {
6
6
  siteName: string;
7
7
  homeUrl: string;
8
8
  sitePhone: string;
9
+ sitePhoneBorder?: boolean;
9
10
  scheduleText: string;
10
11
  headerFullWidth: boolean;
11
12
  menuList?: {
@@ -7,6 +7,7 @@ export interface AppHeaderProps {
7
7
  siteName: string
8
8
  homeUrl: string
9
9
  sitePhone: string
10
+ sitePhoneBorder?: boolean
10
11
  scheduleText: string
11
12
  headerFullWidth: boolean
12
13
  menuList?: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.83.1",
3
+ "version": "7.84.1",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",