@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.
@@ -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-content top-bar-wrapper ${classnames}`, children: _jsx("div", { className: 'top-bar', children: _jsx("div", { children: children }) }) }));
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-content top-bar-wrapper ${classnames}`}>
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: variables.get-color(others, white);
6
+ background: var(--others-white);
6
7
  width: 100%;
7
8
  padding: 1rem 0;
8
9
 
9
- @include mediaqueries.sm {
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
- @include mediaqueries.sm {
20
+ @media ${device['landscape-tablets']} {
20
21
  width: 696px;
21
22
  }
22
23
 
23
- @include mediaqueries.md {
24
+ @media ${device['laptop']} {
24
25
  width: 910px;
25
26
  }
26
27
 
27
- @include mediaqueries.xl {
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
- @include mediaqueries.sm {
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
- @include mediaqueries.md {
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: variables.get-color(others, white);
7
+ background: var(--others-white);
7
8
  width: 100%;
8
9
  padding: 1rem 0;
9
10
 
10
- @include mediaqueries.sm {
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
- @include mediaqueries.sm {
21
+ @media ${device['landscape-tablets']} {
21
22
  width: 696px;
22
23
  }
23
24
 
24
- @include mediaqueries.md {
25
+ @media ${device['laptop']} {
25
26
  width: 910px;
26
27
  }
27
28
 
28
- @include mediaqueries.xl {
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
- @include mediaqueries.sm {
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
- @include mediaqueries.md {
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: baseline;
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: baseline;
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, hide, 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' }) }), !hide && _jsx(NavMenu, { ...navMenuProps })] })] }));
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, hide, siteName } = mainHeaderProps
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
- {!hide && <NavMenu {...navMenuProps} />}
19
+ <NavMenu {...navMenuProps} />
20
20
  </span>
21
21
  </HeaderStyled>
22
22
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.12.3",
3
+ "version": "7.12.5",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",