@npm_leadtech/legal-lib-components 7.25.0 → 7.25.2

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.
Files changed (14) hide show
  1. package/dist/src/components/atoms/FixedFooter/FixedFooter.styled.js +1 -1
  2. package/dist/src/components/atoms/FixedFooter/FixedFooter.styled.ts +1 -1
  3. package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.scss +2 -1
  4. package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.js +1 -1
  5. package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.ts +1 -1
  6. package/dist/src/components/organisms/MenuItems/MenuItems.styled.js +6 -4
  7. package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts +6 -4
  8. package/dist/src/components/organisms/NavMenu/NavMenu.styled.js +22 -5
  9. package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts +22 -5
  10. package/dist/src/components/sections/Header/Header.js +1 -1
  11. package/dist/src/components/sections/Header/Header.styled.js +8 -2
  12. package/dist/src/components/sections/Header/Header.styled.ts +8 -2
  13. package/dist/src/components/sections/Header/Header.tsx +1 -1
  14. package/package.json +1 -1
package/dist/src/components/atoms/FixedFooter/FixedFooter.styled.js CHANGED
@@ -55,7 +55,7 @@ export const FixedFooterStyled = styled.div `
55
55
  margin: auto;
56
56
  padding: 2.75rem 1rem 1rem;
57
57
  }
58
- @media (min-width: 720px) {
58
+ @media (min-width: 1024px) {
59
59
  footer .language-selector-mobile-container {
60
60
  display: none;
61
61
  }
package/dist/src/components/atoms/FixedFooter/FixedFooter.styled.ts CHANGED
@@ -56,7 +56,7 @@ export const FixedFooterStyled = styled.div`
56
56
  margin: auto;
57
57
  padding: 2.75rem 1rem 1rem;
58
58
  }
59
- @media (min-width: 720px) {
59
+ @media (min-width: 1024px) {
60
60
  footer .language-selector-mobile-container {
61
61
  display: none;
62
62
  }
package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  .ratafia-landing-icon {
2
- padding: 0.25rem 0.5rem;
2
+ padding: 1px 4px;
3
3
  border-radius: var(--s-border-radius);
4
4
  color: var(--neutral-neutral-1);
5
5
  background: var(--secondary-main-light-3);
6
+ font-size: 12px;
6
7
  }
package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.js CHANGED
@@ -13,7 +13,7 @@ export const ContactInformation = styled.div `
13
13
  margin-bottom: 1rem;
14
14
  width: 100%;
15
15
 
16
- @media (min-width: 828px) {
16
+ @media (min-width: 1024px) {
17
17
  display: none;
18
18
  }
19
19
  }
package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.ts CHANGED
@@ -14,7 +14,7 @@ export const ContactInformation = styled.div`
14
14
  margin-bottom: 1rem;
15
15
  width: 100%;
16
16
 
17
- @media (min-width: 828px) {
17
+ @media (min-width: 1024px) {
18
18
  display: none;
19
19
  }
20
20
  }
package/dist/src/components/organisms/MenuItems/MenuItems.styled.js CHANGED
@@ -39,6 +39,7 @@ export const MenuItemsStyled = styled.div `
39
39
  .left-nav {
40
40
  display: flex;
41
41
  align-items: center;
42
+ gap: 1rem;
42
43
  }
43
44
 
44
45
  .header-phone {
@@ -87,7 +88,6 @@ export const MenuItemsStyled = styled.div `
87
88
  .navigation-pane__products__container,
88
89
  .navigation-pane__resources__container {
89
90
  display: flex;
90
- gap: 0.5rem;
91
91
  display: none;
92
92
 
93
93
  @media ${device['landscape-tablets']} {
@@ -103,12 +103,10 @@ export const MenuItemsStyled = styled.div `
103
103
  .navigation-pane__resources,
104
104
  .navigation-pane__help {
105
105
  position: relative;
106
- margin-left: 0.5rem;
107
106
  padding: 0.75rem 0;
108
107
  cursor: pointer;
109
108
 
110
109
  @media ${device['portrait-tablets']} {
111
- margin-right: 1.5rem;
112
110
  padding-bottom: 0.5rem;
113
111
  }
114
112
 
@@ -339,6 +337,10 @@ export const MenuItemsStyled = styled.div `
339
337
  align-items: center;
340
338
  min-width: 18rem;
341
339
 
340
+ @media (max-width: 1024px) {
341
+ gap: 1rem;
342
+ }
343
+
342
344
  @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
343
345
  min-width: 12rem;
344
346
  }
@@ -367,7 +369,7 @@ export const MenuItemsStyled = styled.div `
367
369
  .navigation-pane.--is-mobile {
368
370
  display: flex;
369
371
 
370
- @media ${device['landscape-tablets']} {
372
+ @media (max-width: 720px) {
371
373
  display: none;
372
374
  }
373
375
 
package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts CHANGED
@@ -40,6 +40,7 @@ export const MenuItemsStyled = styled.div`
40
40
  .left-nav {
41
41
  display: flex;
42
42
  align-items: center;
43
+ gap: 1rem;
43
44
  }
44
45
 
45
46
  .header-phone {
@@ -88,7 +89,6 @@ export const MenuItemsStyled = styled.div`
88
89
  .navigation-pane__products__container,
89
90
  .navigation-pane__resources__container {
90
91
  display: flex;
91
- gap: 0.5rem;
92
92
  display: none;
93
93
 
94
94
  @media ${device['landscape-tablets']} {
@@ -104,12 +104,10 @@ export const MenuItemsStyled = styled.div`
104
104
  .navigation-pane__resources,
105
105
  .navigation-pane__help {
106
106
  position: relative;
107
- margin-left: 0.5rem;
108
107
  padding: 0.75rem 0;
109
108
  cursor: pointer;
110
109
 
111
110
  @media ${device['portrait-tablets']} {
112
- margin-right: 1.5rem;
113
111
  padding-bottom: 0.5rem;
114
112
  }
115
113
 
@@ -340,6 +338,10 @@ export const MenuItemsStyled = styled.div`
340
338
  align-items: center;
341
339
  min-width: 18rem;
342
340
 
341
+ @media (max-width: 1024px) {
342
+ gap: 1rem;
343
+ }
344
+
343
345
  @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
344
346
  min-width: 12rem;
345
347
  }
@@ -368,7 +370,7 @@ export const MenuItemsStyled = styled.div`
368
370
  .navigation-pane.--is-mobile {
369
371
  display: flex;
370
372
 
371
- @media ${device['landscape-tablets']} {
373
+ @media (max-width: 720px) {
372
374
  display: none;
373
375
  }
374
376
 
package/dist/src/components/organisms/NavMenu/NavMenu.styled.js CHANGED
@@ -27,6 +27,10 @@ export const NavMenuStyled = styled.nav `
27
27
  .left-nav {
28
28
  display: flex;
29
29
  align-items: center;
30
+ @media (max-width: 1024px) {
31
+ gap: 1rem;
32
+ }
33
+ gap: 2rem;
30
34
  }
31
35
 
32
36
  .header-phone {
@@ -49,7 +53,17 @@ export const NavMenuStyled = styled.nav `
49
53
  flex-flow: row nowrap;
50
54
  align-items: center;
51
55
  justify-content: flex-end;
52
- gap: 1.5rem;
56
+ gap: 2rem;
57
+
58
+ @media (max-width: 1024px) {
59
+ gap: 1rem;
60
+ }
61
+
62
+ .nav-menu-item {
63
+ @media (max-width: 1024px) {
64
+ display: none;
65
+ }
66
+ }
53
67
 
54
68
  .search {
55
69
  width: 100%;
@@ -57,7 +71,7 @@ export const NavMenuStyled = styled.nav `
57
71
  }
58
72
  }
59
73
 
60
- @media ${device['landscape-tablets']} {
74
+ @media (min-width: ${size.sm}) {
61
75
  display: flex;
62
76
  align-items: center;
63
77
  flex-direction: row;
@@ -76,12 +90,10 @@ export const NavMenuStyled = styled.nav `
76
90
  .navigation-pane__help,
77
91
  .navigation-pane__resources {
78
92
  position: relative;
79
- margin-left: 0.5rem;
80
93
  padding: 0.75rem 0;
81
94
  cursor: pointer;
82
95
 
83
96
  @media ${device['portrait-tablets']} {
84
- margin-right: 1.5rem;
85
97
  padding-bottom: 0.5rem;
86
98
  }
87
99
 
@@ -300,6 +312,11 @@ export const NavMenuStyled = styled.nav `
300
312
  display: flex;
301
313
  align-items: center;
302
314
  min-width: 18rem;
315
+ gap: 2rem;
316
+
317
+ @media (max-width: 1024px) {
318
+ gap: 1rem;
319
+ }
303
320
 
304
321
  @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
305
322
  min-width: 12rem;
@@ -332,7 +349,7 @@ export const NavMenuStyled = styled.nav `
332
349
  display: flex;
333
350
  flex-direction: column;
334
351
 
335
- @media ${device['landscape-tablets']} {
352
+ @media (max-width: ${size.sm}) {
336
353
  display: none;
337
354
  }
338
355
  .navigation-pane__user-menu {
package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts CHANGED
@@ -28,6 +28,10 @@ export const NavMenuStyled = styled.nav`
28
28
  .left-nav {
29
29
  display: flex;
30
30
  align-items: center;
31
+ @media (max-width: 1024px) {
32
+ gap: 1rem;
33
+ }
34
+ gap: 2rem;
31
35
  }
32
36
 
33
37
  .header-phone {
@@ -50,7 +54,17 @@ export const NavMenuStyled = styled.nav`
50
54
  flex-flow: row nowrap;
51
55
  align-items: center;
52
56
  justify-content: flex-end;
53
- gap: 1.5rem;
57
+ gap: 2rem;
58
+
59
+ @media (max-width: 1024px) {
60
+ gap: 1rem;
61
+ }
62
+
63
+ .nav-menu-item {
64
+ @media (max-width: 1024px) {
65
+ display: none;
66
+ }
67
+ }
54
68
 
55
69
  .search {
56
70
  width: 100%;
@@ -58,7 +72,7 @@ export const NavMenuStyled = styled.nav`
58
72
  }
59
73
  }
60
74
 
61
- @media ${device['landscape-tablets']} {
75
+ @media (min-width: ${size.sm}) {
62
76
  display: flex;
63
77
  align-items: center;
64
78
  flex-direction: row;
@@ -77,12 +91,10 @@ export const NavMenuStyled = styled.nav`
77
91
  .navigation-pane__help,
78
92
  .navigation-pane__resources {
79
93
  position: relative;
80
- margin-left: 0.5rem;
81
94
  padding: 0.75rem 0;
82
95
  cursor: pointer;
83
96
 
84
97
  @media ${device['portrait-tablets']} {
85
- margin-right: 1.5rem;
86
98
  padding-bottom: 0.5rem;
87
99
  }
88
100
 
@@ -301,6 +313,11 @@ export const NavMenuStyled = styled.nav`
301
313
  display: flex;
302
314
  align-items: center;
303
315
  min-width: 18rem;
316
+ gap: 2rem;
317
+
318
+ @media (max-width: 1024px) {
319
+ gap: 1rem;
320
+ }
304
321
 
305
322
  @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
306
323
  min-width: 12rem;
@@ -333,7 +350,7 @@ export const NavMenuStyled = styled.nav`
333
350
  display: flex;
334
351
  flex-direction: column;
335
352
 
336
- @media ${device['landscape-tablets']} {
353
+ @media (max-width: ${size.sm}) {
337
354
  display: none;
338
355
  }
339
356
  .navigation-pane__user-menu {
package/dist/src/components/sections/Header/Header.js CHANGED
@@ -5,7 +5,7 @@ import { HeaderStyled } from './Header.styled';
5
5
  import { NavMenu } from '../../organisms/NavMenu';
6
6
  const Header = forwardRef(({ mainHeaderProps, topBarProps, navMenuProps }, ref) => {
7
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 })] })] }));
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: '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;
package/dist/src/components/sections/Header/Header.styled.js CHANGED
@@ -24,11 +24,10 @@ export const HeaderStyled = styled.header `
24
24
  .header__inner {
25
25
  align-items: center;
26
26
  justify-content: space-between;
27
- max-width: 1200px;
28
27
  padding: 1rem 1.5rem;
29
28
 
30
29
  @media (min-width: ${size.sm}) {
31
- padding: 1rem 1rem 1.5rem 1rem;
30
+ padding: 1rem 2rem 1rem 2rem;
32
31
  }
33
32
  }
34
33
 
@@ -91,6 +90,13 @@ export const HeaderStyled = styled.header `
91
90
  .header__logo {
92
91
  z-index: 200;
93
92
  min-width: max-content;
93
+
94
+ img {
95
+ @media (max-width: 1024px) {
96
+ width: 141px;
97
+ height: auto;
98
+ }
99
+ }
94
100
  }
95
101
 
96
102
  &.product-header-background {
package/dist/src/components/sections/Header/Header.styled.ts CHANGED
@@ -25,11 +25,10 @@ export const HeaderStyled = styled.header`
25
25
  .header__inner {
26
26
  align-items: center;
27
27
  justify-content: space-between;
28
- max-width: 1200px;
29
28
  padding: 1rem 1.5rem;
30
29
 
31
30
  @media (min-width: ${size.sm}) {
32
- padding: 1rem 1rem 1.5rem 1rem;
31
+ padding: 1rem 2rem 1rem 2rem;
33
32
  }
34
33
  }
35
34
 
@@ -92,6 +91,13 @@ export const HeaderStyled = styled.header`
92
91
  .header__logo {
93
92
  z-index: 200;
94
93
  min-width: max-content;
94
+
95
+ img {
96
+ @media (max-width: 1024px) {
97
+ width: 141px;
98
+ height: auto;
99
+ }
100
+ }
95
101
  }
96
102
 
97
103
  &.product-header-background {
package/dist/src/components/sections/Header/Header.tsx CHANGED
@@ -12,7 +12,7 @@ const Header = forwardRef<HTMLDivElement, HeaderProps>(
12
12
  return (
13
13
  <HeaderStyled className={`header ${classnames}`} ref={ref} id='header'>
14
14
  <TopBar {...topBarProps} />
15
- <span itemScope itemType='https://www.schema.org/Brand' className={'wrapper flex header__inner'}>
15
+ <span itemScope itemType='https://www.schema.org/Brand' className={'flex header__inner'}>
16
16
  <a data-qa={'Header_Logo'} className='header__logo' href='/'>
17
17
  <Logo siteName={siteName} width='188' height='32' />
18
18
  </a>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.25.0",
3
+ "version": "7.25.2",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",