@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.
Files changed (22) 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/Logo/Logo.js +2 -2
  4. package/dist/src/components/atoms/Logo/Logo.tsx +3 -1
  5. package/dist/src/components/atoms/Logo/LogoProps.types.d.ts +1 -0
  6. package/dist/src/components/atoms/Logo/LogoProps.types.ts +1 -0
  7. package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.scss +1 -2
  8. package/dist/src/components/atoms/SearchSelect/SearchSelect.js +3 -3
  9. package/dist/src/components/atoms/SearchSelect/SearchSelect.tsx +3 -3
  10. package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.js +1 -1
  11. package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.ts +1 -1
  12. package/dist/src/components/organisms/BottomFooter/BottomFooter.js +1 -1
  13. package/dist/src/components/organisms/BottomFooter/BottomFooter.tsx +8 -1
  14. package/dist/src/components/organisms/MenuItems/MenuItems.styled.js +4 -6
  15. package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts +4 -6
  16. package/dist/src/components/organisms/NavMenu/NavMenu.styled.js +5 -22
  17. package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts +5 -22
  18. package/dist/src/components/sections/Header/Header.js +1 -1
  19. package/dist/src/components/sections/Header/Header.styled.js +2 -8
  20. package/dist/src/components/sections/Header/Header.styled.ts +2 -8
  21. package/dist/src/components/sections/Header/Header.tsx +1 -1
  22. package/package.json +1 -1
@@ -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: 1024px) {
58
+ @media (min-width: 720px) {
59
59
  footer .language-selector-mobile-container {
60
60
  display: none;
61
61
  }
@@ -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: 1024px) {
59
+ @media (min-width: 720px) {
60
60
  footer .language-selector-mobile-container {
61
61
  display: none;
62
62
  }
@@ -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
  }
@@ -4,4 +4,5 @@ export interface LogoProps {
4
4
  width?: string;
5
5
  height?: string;
6
6
  type?: string;
7
+ isLoadingLazy?: boolean;
7
8
  }
@@ -4,4 +4,5 @@ export interface LogoProps {
4
4
  width?: string
5
5
  height?: string
6
6
  type?: string
7
+ isLoadingLazy?: boolean
7
8
  }
@@ -1,7 +1,6 @@
1
1
  .ratafia-landing-icon {
2
- padding: 1px 4px;
2
+ padding: 0.25rem 0.5rem;
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;
7
6
  }
@@ -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 { useEffect, useState } from 'react';
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, useEffect, useState } from 'react'
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
 
@@ -13,7 +13,7 @@ export const ContactInformation = styled.div `
13
13
  margin-bottom: 1rem;
14
14
  width: 100%;
15
15
 
16
- @media (min-width: 1024px) {
16
+ @media (min-width: 828px) {
17
17
  display: none;
18
18
  }
19
19
  }
@@ -14,7 +14,7 @@ export const ContactInformation = styled.div`
14
14
  margin-bottom: 1rem;
15
15
  width: 100%;
16
16
 
17
- @media (min-width: 1024px) {
17
+ @media (min-width: 828px) {
18
18
  display: none;
19
19
  }
20
20
  }
@@ -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 className='footer__lawdistrict' siteName={siteName} width='138' height='24' type='white' />
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 (max-width: ${size.sm}) {
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 (max-width: ${size.sm}) {
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: 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
- }
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 (min-width: ${size.sm}) {
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 (max-width: ${size.sm}) {
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: 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
- }
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 (min-width: ${size.sm}) {
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 (max-width: ${size.sm}) {
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 2rem 1rem 2rem;
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 2rem 1rem 2rem;
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>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.25.3",
3
+ "version": "7.25.4",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",