@npm_leadtech/legal-lib-components 7.25.3 → 7.25.4
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/FixedFooter/FixedFooter.styled.js +1 -1
- package/dist/src/components/atoms/FixedFooter/FixedFooter.styled.ts +1 -1
- package/dist/src/components/atoms/Logo/Logo.js +2 -2
- package/dist/src/components/atoms/Logo/Logo.tsx +3 -1
- package/dist/src/components/atoms/Logo/LogoProps.types.d.ts +1 -0
- package/dist/src/components/atoms/Logo/LogoProps.types.ts +1 -0
- package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.scss +1 -2
- package/dist/src/components/atoms/SearchSelect/SearchSelect.js +3 -3
- package/dist/src/components/atoms/SearchSelect/SearchSelect.tsx +3 -3
- package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.js +1 -1
- package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.ts +1 -1
- package/dist/src/components/organisms/BottomFooter/BottomFooter.js +1 -1
- package/dist/src/components/organisms/BottomFooter/BottomFooter.tsx +8 -1
- package/dist/src/components/organisms/MenuItems/MenuItems.styled.js +4 -6
- package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts +4 -6
- package/dist/src/components/organisms/NavMenu/NavMenu.styled.js +5 -22
- package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts +5 -22
- package/dist/src/components/sections/Header/Header.js +1 -1
- package/dist/src/components/sections/Header/Header.styled.js +2 -8
- package/dist/src/components/sections/Header/Header.styled.ts +2 -8
- package/dist/src/components/sections/Header/Header.tsx +1 -1
- package/package.json +1 -1
|
@@ -43,6 +43,6 @@ const LOGOS = {
|
|
|
43
43
|
white: lawdistrictonlineWhite
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
export const Logo = ({ className, siteName = 'lawdistrict', type = 'default', width, height }) => {
|
|
47
|
-
return (_jsx("img", { className: className, src: LOGOS[siteName.toLowerCase()][type], alt: `${siteName} logo`, width: width, height: height }));
|
|
46
|
+
export const Logo = ({ className, siteName = 'lawdistrict', type = 'default', width, height, isLoadingLazy = false }) => {
|
|
47
|
+
return (_jsx("img", { className: className, src: LOGOS[siteName.toLowerCase()][type], alt: `${siteName} logo`, width: width, height: height, loading: isLoadingLazy ? 'lazy' : 'eager' }));
|
|
48
48
|
};
|
|
@@ -55,7 +55,8 @@ export const Logo: FC<LogoProps> = ({
|
|
|
55
55
|
siteName = 'lawdistrict',
|
|
56
56
|
type = 'default',
|
|
57
57
|
width,
|
|
58
|
-
height
|
|
58
|
+
height,
|
|
59
|
+
isLoadingLazy = false
|
|
59
60
|
}): React.ReactElement => {
|
|
60
61
|
return (
|
|
61
62
|
<img
|
|
@@ -64,6 +65,7 @@ export const Logo: FC<LogoProps> = ({
|
|
|
64
65
|
alt={`${siteName} logo`}
|
|
65
66
|
width={width}
|
|
66
67
|
height={height}
|
|
68
|
+
loading={isLoadingLazy ? 'lazy' : 'eager'}
|
|
67
69
|
/>
|
|
68
70
|
)
|
|
69
71
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
|
-
import
|
|
3
|
+
import React from 'react';
|
|
4
4
|
import Select from 'react-select';
|
|
5
5
|
import { SearchSelectStyled } from './SearchSelect.styled';
|
|
6
6
|
import classNames from 'classnames';
|
|
@@ -25,7 +25,7 @@ const getSortedItems = (items, isSortAlphabetically = false) => {
|
|
|
25
25
|
};
|
|
26
26
|
const SearchSelect = (props) => {
|
|
27
27
|
const { customClass = '', menuPlacement = MenuPlacement.bottom } = props;
|
|
28
|
-
const [menuPortalTarget, setMenuPortalTarget] = useState();
|
|
28
|
+
const [menuPortalTarget, setMenuPortalTarget] = React.useState();
|
|
29
29
|
const sortedItems = getSortedItems(props.items, props.isSortAlphabetically);
|
|
30
30
|
const defaultValue = props.defaultValue;
|
|
31
31
|
const classnames = classNames({
|
|
@@ -34,7 +34,7 @@ const SearchSelect = (props) => {
|
|
|
34
34
|
[customClass]: props.customClass,
|
|
35
35
|
'--group-invalid': !props.isValidGroup
|
|
36
36
|
});
|
|
37
|
-
useEffect(() => {
|
|
37
|
+
React.useEffect(() => {
|
|
38
38
|
setMenuPortalTarget(document.body);
|
|
39
39
|
}, []);
|
|
40
40
|
const handleChange = (selectedOption) => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
2
|
|
|
3
|
-
import React, { type FC
|
|
3
|
+
import React, { type FC } from 'react'
|
|
4
4
|
import Select from 'react-select'
|
|
5
5
|
|
|
6
6
|
import { type SearchSelectProps } from './SearchSelectProps.types'
|
|
@@ -28,7 +28,7 @@ const getSortedItems = (items: any, isSortAlphabetically: boolean | undefined =
|
|
|
28
28
|
|
|
29
29
|
const SearchSelect: FC<SearchSelectProps> = (props) => {
|
|
30
30
|
const { customClass = '', menuPlacement = MenuPlacement.bottom } = props
|
|
31
|
-
const [menuPortalTarget, setMenuPortalTarget] = useState<HTMLElement | undefined>()
|
|
31
|
+
const [menuPortalTarget, setMenuPortalTarget] = React.useState<HTMLElement | undefined>()
|
|
32
32
|
const sortedItems = getSortedItems(props.items, props.isSortAlphabetically)
|
|
33
33
|
const defaultValue = props.defaultValue as unknown as string
|
|
34
34
|
|
|
@@ -39,7 +39,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
|
|
|
39
39
|
'--group-invalid': !props.isValidGroup
|
|
40
40
|
})
|
|
41
41
|
|
|
42
|
-
useEffect(() => {
|
|
42
|
+
React.useEffect(() => {
|
|
43
43
|
setMenuPortalTarget(document.body)
|
|
44
44
|
}, [])
|
|
45
45
|
|
|
@@ -3,5 +3,5 @@ import { BottomFooterStyled, BottomFooterText, BottomFooterWrapper, CompanyLink,
|
|
|
3
3
|
import { Logo } from '../../atoms/Logo/Logo';
|
|
4
4
|
import { SocialLinks } from '../../molecules/SocialLinks';
|
|
5
5
|
export const BottomFooter = ({ siteName, companyLinks, socialLinks, disclaimerText, copyrightText }) => {
|
|
6
|
-
return (_jsx(BottomFooterWrapper, { children: _jsxs(BottomFooterStyled, { children: [_jsxs(LogoSocialsWrapper, { className: 'footer__logo', children: [_jsx(Logo, { className: 'footer__lawdistrict', siteName: siteName, width: '138', height: '24', type: 'white' }), socialLinks && _jsx(SocialLinks, { links: socialLinks })] }), _jsx("div", { children: _jsx(CompanyList, { children: companyLinks?.map((link) => (_jsx("li", { children: _jsx(CompanyLink, { href: link.url, className: 'sans-serif --extra-small', "data-qa": link.dataQa, rel: link.rel, children: link.name }) }, link.url))) }) }), _jsx(BottomFooterText, { className: 'sans-serif --extra-small', children: disclaimerText }), _jsx(BottomFooterText, { className: 'sans-serif --extra-small', children: copyrightText })] }) }));
|
|
6
|
+
return (_jsx(BottomFooterWrapper, { children: _jsxs(BottomFooterStyled, { children: [_jsxs(LogoSocialsWrapper, { className: 'footer__logo', children: [_jsx(Logo, { className: 'footer__lawdistrict', siteName: siteName, width: '138', height: '24', type: 'white', isLoadingLazy: true }), socialLinks && _jsx(SocialLinks, { links: socialLinks })] }), _jsx("div", { children: _jsx(CompanyList, { children: companyLinks?.map((link) => (_jsx("li", { children: _jsx(CompanyLink, { href: link.url, className: 'sans-serif --extra-small', "data-qa": link.dataQa, rel: link.rel, children: link.name }) }, link.url))) }) }), _jsx(BottomFooterText, { className: 'sans-serif --extra-small', children: disclaimerText }), _jsx(BottomFooterText, { className: 'sans-serif --extra-small', children: copyrightText })] }) }));
|
|
7
7
|
};
|
|
@@ -22,7 +22,14 @@ export const BottomFooter: React.FC<BottomFooterProps> = ({
|
|
|
22
22
|
<BottomFooterWrapper>
|
|
23
23
|
<BottomFooterStyled>
|
|
24
24
|
<LogoSocialsWrapper className={'footer__logo'}>
|
|
25
|
-
<Logo
|
|
25
|
+
<Logo
|
|
26
|
+
className='footer__lawdistrict'
|
|
27
|
+
siteName={siteName}
|
|
28
|
+
width='138'
|
|
29
|
+
height='24'
|
|
30
|
+
type='white'
|
|
31
|
+
isLoadingLazy
|
|
32
|
+
/>
|
|
26
33
|
{socialLinks && <SocialLinks links={socialLinks} />}
|
|
27
34
|
</LogoSocialsWrapper>
|
|
28
35
|
<div>
|
|
@@ -39,7 +39,6 @@ export const MenuItemsStyled = styled.div `
|
|
|
39
39
|
.left-nav {
|
|
40
40
|
display: flex;
|
|
41
41
|
align-items: center;
|
|
42
|
-
gap: 1rem;
|
|
43
42
|
}
|
|
44
43
|
|
|
45
44
|
.header-phone {
|
|
@@ -88,6 +87,7 @@ export const MenuItemsStyled = styled.div `
|
|
|
88
87
|
.navigation-pane__products__container,
|
|
89
88
|
.navigation-pane__resources__container {
|
|
90
89
|
display: flex;
|
|
90
|
+
gap: 0.5rem;
|
|
91
91
|
display: none;
|
|
92
92
|
|
|
93
93
|
@media ${device['landscape-tablets']} {
|
|
@@ -103,10 +103,12 @@ export const MenuItemsStyled = styled.div `
|
|
|
103
103
|
.navigation-pane__resources,
|
|
104
104
|
.navigation-pane__help {
|
|
105
105
|
position: relative;
|
|
106
|
+
margin-left: 0.5rem;
|
|
106
107
|
padding: 0.75rem 0;
|
|
107
108
|
cursor: pointer;
|
|
108
109
|
|
|
109
110
|
@media ${device['portrait-tablets']} {
|
|
111
|
+
margin-right: 1.5rem;
|
|
110
112
|
padding-bottom: 0.5rem;
|
|
111
113
|
}
|
|
112
114
|
|
|
@@ -337,10 +339,6 @@ export const MenuItemsStyled = styled.div `
|
|
|
337
339
|
align-items: center;
|
|
338
340
|
min-width: 18rem;
|
|
339
341
|
|
|
340
|
-
@media (max-width: 1024px) {
|
|
341
|
-
gap: 1rem;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
342
|
@media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
|
|
345
343
|
min-width: 12rem;
|
|
346
344
|
}
|
|
@@ -369,7 +367,7 @@ export const MenuItemsStyled = styled.div `
|
|
|
369
367
|
.navigation-pane.--is-mobile {
|
|
370
368
|
display: flex;
|
|
371
369
|
|
|
372
|
-
@media
|
|
370
|
+
@media ${device['landscape-tablets']} {
|
|
373
371
|
display: none;
|
|
374
372
|
}
|
|
375
373
|
|
|
@@ -40,7 +40,6 @@ export const MenuItemsStyled = styled.div`
|
|
|
40
40
|
.left-nav {
|
|
41
41
|
display: flex;
|
|
42
42
|
align-items: center;
|
|
43
|
-
gap: 1rem;
|
|
44
43
|
}
|
|
45
44
|
|
|
46
45
|
.header-phone {
|
|
@@ -89,6 +88,7 @@ export const MenuItemsStyled = styled.div`
|
|
|
89
88
|
.navigation-pane__products__container,
|
|
90
89
|
.navigation-pane__resources__container {
|
|
91
90
|
display: flex;
|
|
91
|
+
gap: 0.5rem;
|
|
92
92
|
display: none;
|
|
93
93
|
|
|
94
94
|
@media ${device['landscape-tablets']} {
|
|
@@ -104,10 +104,12 @@ export const MenuItemsStyled = styled.div`
|
|
|
104
104
|
.navigation-pane__resources,
|
|
105
105
|
.navigation-pane__help {
|
|
106
106
|
position: relative;
|
|
107
|
+
margin-left: 0.5rem;
|
|
107
108
|
padding: 0.75rem 0;
|
|
108
109
|
cursor: pointer;
|
|
109
110
|
|
|
110
111
|
@media ${device['portrait-tablets']} {
|
|
112
|
+
margin-right: 1.5rem;
|
|
111
113
|
padding-bottom: 0.5rem;
|
|
112
114
|
}
|
|
113
115
|
|
|
@@ -338,10 +340,6 @@ export const MenuItemsStyled = styled.div`
|
|
|
338
340
|
align-items: center;
|
|
339
341
|
min-width: 18rem;
|
|
340
342
|
|
|
341
|
-
@media (max-width: 1024px) {
|
|
342
|
-
gap: 1rem;
|
|
343
|
-
}
|
|
344
|
-
|
|
345
343
|
@media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
|
|
346
344
|
min-width: 12rem;
|
|
347
345
|
}
|
|
@@ -370,7 +368,7 @@ export const MenuItemsStyled = styled.div`
|
|
|
370
368
|
.navigation-pane.--is-mobile {
|
|
371
369
|
display: flex;
|
|
372
370
|
|
|
373
|
-
@media
|
|
371
|
+
@media ${device['landscape-tablets']} {
|
|
374
372
|
display: none;
|
|
375
373
|
}
|
|
376
374
|
|
|
@@ -27,10 +27,6 @@ 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;
|
|
34
30
|
}
|
|
35
31
|
|
|
36
32
|
.header-phone {
|
|
@@ -53,17 +49,7 @@ export const NavMenuStyled = styled.nav `
|
|
|
53
49
|
flex-flow: row nowrap;
|
|
54
50
|
align-items: center;
|
|
55
51
|
justify-content: flex-end;
|
|
56
|
-
gap:
|
|
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
|
-
}
|
|
52
|
+
gap: 1.5rem;
|
|
67
53
|
|
|
68
54
|
.search {
|
|
69
55
|
width: 100%;
|
|
@@ -71,7 +57,7 @@ export const NavMenuStyled = styled.nav `
|
|
|
71
57
|
}
|
|
72
58
|
}
|
|
73
59
|
|
|
74
|
-
@media
|
|
60
|
+
@media ${device['landscape-tablets']} {
|
|
75
61
|
display: flex;
|
|
76
62
|
align-items: center;
|
|
77
63
|
flex-direction: row;
|
|
@@ -90,10 +76,12 @@ export const NavMenuStyled = styled.nav `
|
|
|
90
76
|
.navigation-pane__help,
|
|
91
77
|
.navigation-pane__resources {
|
|
92
78
|
position: relative;
|
|
79
|
+
margin-left: 0.5rem;
|
|
93
80
|
padding: 0.75rem 0;
|
|
94
81
|
cursor: pointer;
|
|
95
82
|
|
|
96
83
|
@media ${device['portrait-tablets']} {
|
|
84
|
+
margin-right: 1.5rem;
|
|
97
85
|
padding-bottom: 0.5rem;
|
|
98
86
|
}
|
|
99
87
|
|
|
@@ -312,11 +300,6 @@ export const NavMenuStyled = styled.nav `
|
|
|
312
300
|
display: flex;
|
|
313
301
|
align-items: center;
|
|
314
302
|
min-width: 18rem;
|
|
315
|
-
gap: 2rem;
|
|
316
|
-
|
|
317
|
-
@media (max-width: 1024px) {
|
|
318
|
-
gap: 1rem;
|
|
319
|
-
}
|
|
320
303
|
|
|
321
304
|
@media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
|
|
322
305
|
min-width: 12rem;
|
|
@@ -349,7 +332,7 @@ export const NavMenuStyled = styled.nav `
|
|
|
349
332
|
display: flex;
|
|
350
333
|
flex-direction: column;
|
|
351
334
|
|
|
352
|
-
@media
|
|
335
|
+
@media ${device['landscape-tablets']} {
|
|
353
336
|
display: none;
|
|
354
337
|
}
|
|
355
338
|
.navigation-pane__user-menu {
|
|
@@ -28,10 +28,6 @@ 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;
|
|
35
31
|
}
|
|
36
32
|
|
|
37
33
|
.header-phone {
|
|
@@ -54,17 +50,7 @@ export const NavMenuStyled = styled.nav`
|
|
|
54
50
|
flex-flow: row nowrap;
|
|
55
51
|
align-items: center;
|
|
56
52
|
justify-content: flex-end;
|
|
57
|
-
gap:
|
|
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
|
-
}
|
|
53
|
+
gap: 1.5rem;
|
|
68
54
|
|
|
69
55
|
.search {
|
|
70
56
|
width: 100%;
|
|
@@ -72,7 +58,7 @@ export const NavMenuStyled = styled.nav`
|
|
|
72
58
|
}
|
|
73
59
|
}
|
|
74
60
|
|
|
75
|
-
@media
|
|
61
|
+
@media ${device['landscape-tablets']} {
|
|
76
62
|
display: flex;
|
|
77
63
|
align-items: center;
|
|
78
64
|
flex-direction: row;
|
|
@@ -91,10 +77,12 @@ export const NavMenuStyled = styled.nav`
|
|
|
91
77
|
.navigation-pane__help,
|
|
92
78
|
.navigation-pane__resources {
|
|
93
79
|
position: relative;
|
|
80
|
+
margin-left: 0.5rem;
|
|
94
81
|
padding: 0.75rem 0;
|
|
95
82
|
cursor: pointer;
|
|
96
83
|
|
|
97
84
|
@media ${device['portrait-tablets']} {
|
|
85
|
+
margin-right: 1.5rem;
|
|
98
86
|
padding-bottom: 0.5rem;
|
|
99
87
|
}
|
|
100
88
|
|
|
@@ -313,11 +301,6 @@ export const NavMenuStyled = styled.nav`
|
|
|
313
301
|
display: flex;
|
|
314
302
|
align-items: center;
|
|
315
303
|
min-width: 18rem;
|
|
316
|
-
gap: 2rem;
|
|
317
|
-
|
|
318
|
-
@media (max-width: 1024px) {
|
|
319
|
-
gap: 1rem;
|
|
320
|
-
}
|
|
321
304
|
|
|
322
305
|
@media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
|
|
323
306
|
min-width: 12rem;
|
|
@@ -350,7 +333,7 @@ export const NavMenuStyled = styled.nav`
|
|
|
350
333
|
display: flex;
|
|
351
334
|
flex-direction: column;
|
|
352
335
|
|
|
353
|
-
@media
|
|
336
|
+
@media ${device['landscape-tablets']} {
|
|
354
337
|
display: none;
|
|
355
338
|
}
|
|
356
339
|
.navigation-pane__user-menu {
|
|
@@ -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: '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: '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;
|
|
@@ -24,10 +24,11 @@ export const HeaderStyled = styled.header `
|
|
|
24
24
|
.header__inner {
|
|
25
25
|
align-items: center;
|
|
26
26
|
justify-content: space-between;
|
|
27
|
+
max-width: 1200px;
|
|
27
28
|
padding: 1rem 1.5rem;
|
|
28
29
|
|
|
29
30
|
@media (min-width: ${size.sm}) {
|
|
30
|
-
padding: 1rem
|
|
31
|
+
padding: 1rem 1rem 1.5rem 1rem;
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
34
|
|
|
@@ -90,13 +91,6 @@ export const HeaderStyled = styled.header `
|
|
|
90
91
|
.header__logo {
|
|
91
92
|
z-index: 200;
|
|
92
93
|
min-width: max-content;
|
|
93
|
-
|
|
94
|
-
img {
|
|
95
|
-
@media (max-width: 1024px) {
|
|
96
|
-
width: 141px;
|
|
97
|
-
height: auto;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
94
|
}
|
|
101
95
|
|
|
102
96
|
&.product-header-background {
|
|
@@ -25,10 +25,11 @@ export const HeaderStyled = styled.header`
|
|
|
25
25
|
.header__inner {
|
|
26
26
|
align-items: center;
|
|
27
27
|
justify-content: space-between;
|
|
28
|
+
max-width: 1200px;
|
|
28
29
|
padding: 1rem 1.5rem;
|
|
29
30
|
|
|
30
31
|
@media (min-width: ${size.sm}) {
|
|
31
|
-
padding: 1rem
|
|
32
|
+
padding: 1rem 1rem 1.5rem 1rem;
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
|
|
@@ -91,13 +92,6 @@ export const HeaderStyled = styled.header`
|
|
|
91
92
|
.header__logo {
|
|
92
93
|
z-index: 200;
|
|
93
94
|
min-width: max-content;
|
|
94
|
-
|
|
95
|
-
img {
|
|
96
|
-
@media (max-width: 1024px) {
|
|
97
|
-
width: 141px;
|
|
98
|
-
height: auto;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
95
|
}
|
|
102
96
|
|
|
103
97
|
&.product-header-background {
|
|
@@ -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={'flex header__inner'}>
|
|
15
|
+
<span itemScope itemType='https://www.schema.org/Brand' className={'wrapper 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>
|