@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.
- package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.js +3 -2
- package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.js +12 -6
- package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.ts +12 -6
- package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.tsx +4 -2
- package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.d.ts +1 -0
- package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.ts +1 -0
- package/dist/src/components/organisms/DesktopMenu/DesktopMenu.js +2 -2
- package/dist/src/components/organisms/DesktopMenu/DesktopMenu.tsx +8 -2
- package/dist/src/components/organisms/DesktopMenu/DesktopMenuProps.d.ts +1 -0
- package/dist/src/components/organisms/DesktopMenu/DesktopMenuProps.ts +1 -0
- package/dist/src/components/sections/AppHeader/AppHeader.js +2 -2
- package/dist/src/components/sections/AppHeader/AppHeader.tsx +8 -1
- package/dist/src/components/sections/AppHeader/AppHeaderProps.d.ts +1 -0
- package/dist/src/components/sections/AppHeader/AppHeaderProps.ts +1 -0
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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>
|
|
@@ -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> = ({
|
|
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>
|
|
@@ -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
|
|
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}
|