@npm_leadtech/legal-lib-components 7.12.3 → 7.12.5
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/TopBar/TopBar.js +1 -1
- package/dist/src/components/atoms/TopBar/TopBar.tsx +2 -2
- package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.styled.js +10 -7
- package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.styled.ts +10 -7
- package/dist/src/components/organisms/MenuItems/MenuItems.styled.js +11 -3
- package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts +11 -3
- package/dist/src/components/organisms/NavMenu/NavMenu.styled.js +7 -4
- package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts +7 -4
- package/dist/src/components/sections/Header/Header.js +2 -2
- package/dist/src/components/sections/Header/Header.tsx +2 -2
- package/package.json +1 -1
|
@@ -7,6 +7,6 @@ const TopBar = ({ hide, children }) => {
|
|
|
7
7
|
const classnames = classNames({
|
|
8
8
|
'--is-hidden': hide
|
|
9
9
|
});
|
|
10
|
-
return (_jsx(TopBarStyled, { className: `top-bar-
|
|
10
|
+
return (_jsx(TopBarStyled, { className: `top-bar-wrapper ${classnames}`, children: _jsx("div", { className: 'top-bar', children: _jsx("div", { className: 'top-bar-content', children: children }) }) }));
|
|
11
11
|
};
|
|
12
12
|
export default TopBar;
|
|
@@ -12,9 +12,9 @@ const TopBar: FC<TopBarProps> = ({ hide, children }) => {
|
|
|
12
12
|
})
|
|
13
13
|
|
|
14
14
|
return (
|
|
15
|
-
<TopBarStyled className={`top-bar-
|
|
15
|
+
<TopBarStyled className={`top-bar-wrapper ${classnames}`}>
|
|
16
16
|
<div className={'top-bar'}>
|
|
17
|
-
<div>{children}</div>
|
|
17
|
+
<div className='top-bar-content'>{children}</div>
|
|
18
18
|
</div>
|
|
19
19
|
</TopBarStyled>
|
|
20
20
|
)
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { device } from '../../../globalStyles/breakpoints';
|
|
1
2
|
import styled from 'styled-components';
|
|
2
3
|
export const DocumentListMenuStyled = styled.div `
|
|
3
4
|
display: flex;
|
|
4
5
|
flex-flow: column nowrap;
|
|
5
|
-
background:
|
|
6
|
+
background: var(--others-white);
|
|
6
7
|
width: 100%;
|
|
7
8
|
padding: 1rem 0;
|
|
8
9
|
|
|
9
|
-
@
|
|
10
|
+
@media ${device['landscape-tablets']} {
|
|
10
11
|
display: none;
|
|
11
12
|
}
|
|
12
13
|
|
|
@@ -16,15 +17,15 @@ export const DocumentListMenuStyled = styled.div `
|
|
|
16
17
|
align-items: flex-start;
|
|
17
18
|
margin: auto;
|
|
18
19
|
|
|
19
|
-
@
|
|
20
|
+
@media ${device['landscape-tablets']} {
|
|
20
21
|
width: 696px;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
|
-
@
|
|
24
|
+
@media ${device['laptop']} {
|
|
24
25
|
width: 910px;
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
@
|
|
28
|
+
@media ${device['desktop-xl']} {
|
|
28
29
|
width: 1128px;
|
|
29
30
|
}
|
|
30
31
|
|
|
@@ -32,7 +33,7 @@ export const DocumentListMenuStyled = styled.div `
|
|
|
32
33
|
text-align: left;
|
|
33
34
|
width: 100%;
|
|
34
35
|
|
|
35
|
-
@
|
|
36
|
+
@media ${device['landscape-tablets']} {
|
|
36
37
|
width: 33%;
|
|
37
38
|
padding-right: 1rem;
|
|
38
39
|
&:nth-child(3) {
|
|
@@ -40,7 +41,7 @@ export const DocumentListMenuStyled = styled.div `
|
|
|
40
41
|
}
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
@
|
|
44
|
+
@media ${device['laptop']} {
|
|
44
45
|
width: 20%;
|
|
45
46
|
&:nth-child(3) {
|
|
46
47
|
padding-right: 1rem;
|
|
@@ -54,6 +55,8 @@ export const DocumentListMenuStyled = styled.div `
|
|
|
54
55
|
|
|
55
56
|
.all-documents-button-wrapper {
|
|
56
57
|
display: flex;
|
|
58
|
+
justify-content: center;
|
|
59
|
+
width: 100%;
|
|
57
60
|
|
|
58
61
|
.all-documents-button {
|
|
59
62
|
margin: 1rem auto;
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
import { device } from '../../../globalStyles/breakpoints'
|
|
1
2
|
import styled from 'styled-components'
|
|
2
3
|
|
|
3
4
|
export const DocumentListMenuStyled = styled.div`
|
|
4
5
|
display: flex;
|
|
5
6
|
flex-flow: column nowrap;
|
|
6
|
-
background:
|
|
7
|
+
background: var(--others-white);
|
|
7
8
|
width: 100%;
|
|
8
9
|
padding: 1rem 0;
|
|
9
10
|
|
|
10
|
-
@
|
|
11
|
+
@media ${device['landscape-tablets']} {
|
|
11
12
|
display: none;
|
|
12
13
|
}
|
|
13
14
|
|
|
@@ -17,15 +18,15 @@ export const DocumentListMenuStyled = styled.div`
|
|
|
17
18
|
align-items: flex-start;
|
|
18
19
|
margin: auto;
|
|
19
20
|
|
|
20
|
-
@
|
|
21
|
+
@media ${device['landscape-tablets']} {
|
|
21
22
|
width: 696px;
|
|
22
23
|
}
|
|
23
24
|
|
|
24
|
-
@
|
|
25
|
+
@media ${device['laptop']} {
|
|
25
26
|
width: 910px;
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
@
|
|
29
|
+
@media ${device['desktop-xl']} {
|
|
29
30
|
width: 1128px;
|
|
30
31
|
}
|
|
31
32
|
|
|
@@ -33,7 +34,7 @@ export const DocumentListMenuStyled = styled.div`
|
|
|
33
34
|
text-align: left;
|
|
34
35
|
width: 100%;
|
|
35
36
|
|
|
36
|
-
@
|
|
37
|
+
@media ${device['landscape-tablets']} {
|
|
37
38
|
width: 33%;
|
|
38
39
|
padding-right: 1rem;
|
|
39
40
|
&:nth-child(3) {
|
|
@@ -41,7 +42,7 @@ export const DocumentListMenuStyled = styled.div`
|
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
|
|
44
|
-
@
|
|
45
|
+
@media ${device['laptop']} {
|
|
45
46
|
width: 20%;
|
|
46
47
|
&:nth-child(3) {
|
|
47
48
|
padding-right: 1rem;
|
|
@@ -55,6 +56,8 @@ export const DocumentListMenuStyled = styled.div`
|
|
|
55
56
|
|
|
56
57
|
.all-documents-button-wrapper {
|
|
57
58
|
display: flex;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
width: 100%;
|
|
58
61
|
|
|
59
62
|
.all-documents-button {
|
|
60
63
|
margin: 1rem auto;
|
|
@@ -4,7 +4,7 @@ export const MenuItemsStyled = styled.div `
|
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
justify-content: flex-start;
|
|
7
|
-
align-items:
|
|
7
|
+
align-items: flex-start;
|
|
8
8
|
margin-top: 1rem;
|
|
9
9
|
|
|
10
10
|
&__wrapper {
|
|
@@ -90,7 +90,7 @@ export const MenuItemsStyled = styled.div `
|
|
|
90
90
|
.navigation-pane__resources,
|
|
91
91
|
.navigation-pane__help {
|
|
92
92
|
position: relative;
|
|
93
|
-
margin-left: 0.5rem;
|
|
93
|
+
//margin-left: 0.5rem;
|
|
94
94
|
padding: 0.75rem 0;
|
|
95
95
|
cursor: pointer;
|
|
96
96
|
|
|
@@ -139,9 +139,15 @@ export const MenuItemsStyled = styled.div `
|
|
|
139
139
|
position: absolute;
|
|
140
140
|
left: 0;
|
|
141
141
|
}
|
|
142
|
+
|
|
143
|
+
.resources__list {
|
|
144
|
+
@media ${device['mobile']} {
|
|
145
|
+
margin-bottom: 2rem;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
142
149
|
@media ${device['mobile']} {
|
|
143
150
|
position: static;
|
|
144
|
-
margin-bottom: 2rem;
|
|
145
151
|
}
|
|
146
152
|
}
|
|
147
153
|
|
|
@@ -577,6 +583,7 @@ export const MenuItemsStyled = styled.div `
|
|
|
577
583
|
.navigation-pane__link,
|
|
578
584
|
.navigation-pane__esignature {
|
|
579
585
|
order: 3;
|
|
586
|
+
padding-left: 1.5rem;
|
|
580
587
|
}
|
|
581
588
|
|
|
582
589
|
.navigation-pane__products {
|
|
@@ -591,6 +598,7 @@ export const MenuItemsStyled = styled.div `
|
|
|
591
598
|
margin: 0 1.5rem 1.5rem 1.5rem;
|
|
592
599
|
border-top: 1px solid var(--neutral-neutral-4);
|
|
593
600
|
border-bottom: 1px solid var(--neutral-neutral-4);
|
|
601
|
+
width: -webkit-fill-available;
|
|
594
602
|
}
|
|
595
603
|
}
|
|
596
604
|
`;
|
|
@@ -5,7 +5,7 @@ export const MenuItemsStyled = styled.div`
|
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
justify-content: flex-start;
|
|
8
|
-
align-items:
|
|
8
|
+
align-items: flex-start;
|
|
9
9
|
margin-top: 1rem;
|
|
10
10
|
|
|
11
11
|
&__wrapper {
|
|
@@ -91,7 +91,7 @@ export const MenuItemsStyled = styled.div`
|
|
|
91
91
|
.navigation-pane__resources,
|
|
92
92
|
.navigation-pane__help {
|
|
93
93
|
position: relative;
|
|
94
|
-
margin-left: 0.5rem;
|
|
94
|
+
//margin-left: 0.5rem;
|
|
95
95
|
padding: 0.75rem 0;
|
|
96
96
|
cursor: pointer;
|
|
97
97
|
|
|
@@ -140,9 +140,15 @@ export const MenuItemsStyled = styled.div`
|
|
|
140
140
|
position: absolute;
|
|
141
141
|
left: 0;
|
|
142
142
|
}
|
|
143
|
+
|
|
144
|
+
.resources__list {
|
|
145
|
+
@media ${device['mobile']} {
|
|
146
|
+
margin-bottom: 2rem;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
143
150
|
@media ${device['mobile']} {
|
|
144
151
|
position: static;
|
|
145
|
-
margin-bottom: 2rem;
|
|
146
152
|
}
|
|
147
153
|
}
|
|
148
154
|
|
|
@@ -581,6 +587,7 @@ export const MenuItemsStyled = styled.div`
|
|
|
581
587
|
.navigation-pane__link,
|
|
582
588
|
.navigation-pane__esignature {
|
|
583
589
|
order: 3;
|
|
590
|
+
padding-left: 1.5rem;
|
|
584
591
|
}
|
|
585
592
|
|
|
586
593
|
.navigation-pane__products {
|
|
@@ -595,6 +602,7 @@ export const MenuItemsStyled = styled.div`
|
|
|
595
602
|
margin: 0 1.5rem 1.5rem 1.5rem;
|
|
596
603
|
border-top: 1px solid var(--neutral-neutral-4);
|
|
597
604
|
border-bottom: 1px solid var(--neutral-neutral-4);
|
|
605
|
+
width: -webkit-fill-available;
|
|
598
606
|
}
|
|
599
607
|
}
|
|
600
608
|
`
|
|
@@ -67,7 +67,7 @@ export const NavMenuStyled = styled.div `
|
|
|
67
67
|
.navigation-pane__help,
|
|
68
68
|
.navigation-pane__resources {
|
|
69
69
|
position: relative;
|
|
70
|
-
margin-left: 0.5rem;
|
|
70
|
+
//margin-left: 0.5rem;
|
|
71
71
|
padding: 0.75rem 0;
|
|
72
72
|
cursor: pointer;
|
|
73
73
|
|
|
@@ -114,9 +114,14 @@ export const NavMenuStyled = styled.div `
|
|
|
114
114
|
left: 0;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
+
.resources__list {
|
|
118
|
+
@media ${device['mobile']} {
|
|
119
|
+
margin-bottom: 2rem;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
117
123
|
@media ${device['mobile']} {
|
|
118
124
|
position: static;
|
|
119
|
-
margin-bottom: 2rem;
|
|
120
125
|
}
|
|
121
126
|
|
|
122
127
|
.products__list {
|
|
@@ -456,7 +461,6 @@ export const NavMenuStyled = styled.div `
|
|
|
456
461
|
padding: 1.5rem 0 0 0;
|
|
457
462
|
margin: 0 1.5rem 1.5rem 1.5rem;
|
|
458
463
|
border-top: 1px solid var(--neutral-neutral-4);
|
|
459
|
-
border-bottom: 1px solid var(--neutral-neutral-4);
|
|
460
464
|
}
|
|
461
465
|
}
|
|
462
466
|
|
|
@@ -566,7 +570,6 @@ export const NavMenuStyled = styled.div `
|
|
|
566
570
|
padding: 1.5rem 0 0 0;
|
|
567
571
|
margin: 0 1.5rem 1.5rem 1.5rem;
|
|
568
572
|
border-top: 1px solid var(--neutral-neutral-4);
|
|
569
|
-
border-bottom: 1px solid var(--neutral-neutral-4);
|
|
570
573
|
}
|
|
571
574
|
}
|
|
572
575
|
`;
|
|
@@ -68,7 +68,7 @@ export const NavMenuStyled = styled.div`
|
|
|
68
68
|
.navigation-pane__help,
|
|
69
69
|
.navigation-pane__resources {
|
|
70
70
|
position: relative;
|
|
71
|
-
margin-left: 0.5rem;
|
|
71
|
+
//margin-left: 0.5rem;
|
|
72
72
|
padding: 0.75rem 0;
|
|
73
73
|
cursor: pointer;
|
|
74
74
|
|
|
@@ -115,9 +115,14 @@ export const NavMenuStyled = styled.div`
|
|
|
115
115
|
left: 0;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
.resources__list {
|
|
119
|
+
@media ${device['mobile']} {
|
|
120
|
+
margin-bottom: 2rem;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
118
124
|
@media ${device['mobile']} {
|
|
119
125
|
position: static;
|
|
120
|
-
margin-bottom: 2rem;
|
|
121
126
|
}
|
|
122
127
|
|
|
123
128
|
.products__list {
|
|
@@ -457,7 +462,6 @@ export const NavMenuStyled = styled.div`
|
|
|
457
462
|
padding: 1.5rem 0 0 0;
|
|
458
463
|
margin: 0 1.5rem 1.5rem 1.5rem;
|
|
459
464
|
border-top: 1px solid var(--neutral-neutral-4);
|
|
460
|
-
border-bottom: 1px solid var(--neutral-neutral-4);
|
|
461
465
|
}
|
|
462
466
|
}
|
|
463
467
|
|
|
@@ -570,7 +574,6 @@ export const NavMenuStyled = styled.div`
|
|
|
570
574
|
padding: 1.5rem 0 0 0;
|
|
571
575
|
margin: 0 1.5rem 1.5rem 1.5rem;
|
|
572
576
|
border-top: 1px solid var(--neutral-neutral-4);
|
|
573
|
-
border-bottom: 1px solid var(--neutral-neutral-4);
|
|
574
577
|
}
|
|
575
578
|
}
|
|
576
579
|
`
|
|
@@ -4,8 +4,8 @@ import { Logo, TopBar } from '../../atoms';
|
|
|
4
4
|
import { HeaderStyled } from './Header.styled';
|
|
5
5
|
import { NavMenu } from '../../organisms/NavMenu';
|
|
6
6
|
const Header = forwardRef(({ mainHeaderProps, topBarProps, navMenuProps }, ref) => {
|
|
7
|
-
const { classnames,
|
|
8
|
-
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' }) }),
|
|
7
|
+
const { classnames, siteName } = mainHeaderProps;
|
|
8
|
+
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 })] })] }));
|
|
9
9
|
});
|
|
10
10
|
Header.displayName = 'Header';
|
|
11
11
|
export default Header;
|
|
@@ -7,7 +7,7 @@ import { NavMenu } from '../../organisms/NavMenu'
|
|
|
7
7
|
|
|
8
8
|
const Header = forwardRef<HTMLDivElement, HeaderProps>(
|
|
9
9
|
({ mainHeaderProps, topBarProps, navMenuProps }, ref): ReactElement => {
|
|
10
|
-
const { classnames,
|
|
10
|
+
const { classnames, siteName } = mainHeaderProps
|
|
11
11
|
|
|
12
12
|
return (
|
|
13
13
|
<HeaderStyled className={`header ${classnames}`} ref={ref} id='header'>
|
|
@@ -16,7 +16,7 @@ const Header = forwardRef<HTMLDivElement, HeaderProps>(
|
|
|
16
16
|
<a data-qa={'Header_Logo'} className='header__logo' href='/'>
|
|
17
17
|
<Logo siteName={siteName} width='188' height='32' />
|
|
18
18
|
</a>
|
|
19
|
-
|
|
19
|
+
<NavMenu {...navMenuProps} />
|
|
20
20
|
</span>
|
|
21
21
|
</HeaderStyled>
|
|
22
22
|
)
|