@npm_leadtech/legal-lib-components 7.28.2 → 7.30.0

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.
@@ -4,7 +4,7 @@ import { DocumentMainMenu } from '../../../components/organisms/DocumentMainMenu
4
4
  import { MenuItemsStyled } from './MenuItems.styled';
5
5
  import { RatafiaLandingIcon } from '../../atoms/RatafiaLandingIcon';
6
6
  import arrowDown from '../../../../images/svg/arrow-down.svg';
7
- export const MenuItems = ({ hasProducts, seeAllDocumentsText, setCookiePolicyFunc, routes, finalMenu, isMobile, configVars, navMenuItems, extraMenu }) => {
8
- return (_jsxs(MenuItemsStyled, { className: `${isMobile ? 'navigation-pane' : 'left-nav'}`, children: [hasProducts && (_jsxs("div", { className: 'navigation-pane__products', children: [_jsxs("div", { className: 'navigation-pane__products__container', children: [_jsx("p", { className: 'navigation-pane__products__title', children: 'Documents' }), _jsx("img", { src: arrowDown, alt: 'arrow-down' })] }), _jsx("div", { className: 'products__list', children: isMobile ? (_jsx(DocumentListMenu, { routes: routes, seeAllLegalDocs: seeAllDocumentsText?.seeAllLegalDocs ?? '', seeAllTypeDocs: seeAllDocumentsText?.seeAllTypeDocs ?? '', finalMenu: finalMenu, hasSubCategoryPage: configVars.HAS_SUBCATEGORY_PAGE, setCookiePolicyFunc: setCookiePolicyFunc })) : (_jsx(DocumentMainMenu, { seeAllTypeDocs: seeAllDocumentsText?.seeAllTypeDocs ?? '', allLegalDocs: seeAllDocumentsText?.allLegalDocs ?? '', allTypeDocs: seeAllDocumentsText?.allTypeDocs ?? '', setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, hasSubCategoryPage: configVars.HAS_SUBCATEGORY_PAGE, finalMenu: finalMenu })) })] })), !!navMenuItems &&
7
+ export const MenuItems = ({ hasProducts, seeAllDocumentsText, setCookiePolicyFunc, routes, finalMenu, configVars, navMenuItems, extraMenu }) => {
8
+ return (_jsxs(MenuItemsStyled, { children: [hasProducts && (_jsxs("div", { className: 'navigation-pane__products', children: [_jsxs("div", { className: 'navigation-pane__products__container', children: [_jsx("p", { className: 'navigation-pane__products__title', children: 'Documents' }), _jsx("img", { src: arrowDown, alt: 'arrow-down' })] }), _jsxs("div", { className: 'products__list', children: [_jsx("div", { className: 'menu-mobile-wrapper', children: _jsx(DocumentListMenu, { routes: routes, seeAllLegalDocs: seeAllDocumentsText?.seeAllLegalDocs ?? '', seeAllTypeDocs: seeAllDocumentsText?.seeAllTypeDocs ?? '', finalMenu: finalMenu, hasSubCategoryPage: configVars.HAS_SUBCATEGORY_PAGE, setCookiePolicyFunc: setCookiePolicyFunc }) }), _jsx("div", { className: 'menu-desktop-wrapper', children: _jsx(DocumentMainMenu, { seeAllTypeDocs: seeAllDocumentsText?.seeAllTypeDocs ?? '', allLegalDocs: seeAllDocumentsText?.allLegalDocs ?? '', allTypeDocs: seeAllDocumentsText?.allTypeDocs ?? '', setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, hasSubCategoryPage: configVars.HAS_SUBCATEGORY_PAGE, finalMenu: finalMenu }) })] })] })), !!navMenuItems &&
9
9
  navMenuItems.map((item) => (_jsx("div", { className: `navigation-pane__link`, children: _jsxs("a", { className: `navigation-pane__link__title`, title: item.title, "data-qa": item.dataQa, href: item.href, children: [_jsx("p", { children: item.label }), item.label === 'LawGenius' && _jsx(RatafiaLandingIcon, {})] }) }, item.title))), !!extraMenu && extraMenu?.items?.length > 0 && (_jsxs("div", { className: 'navigation-pane__resources', children: [_jsxs("div", { className: 'navigation-pane__resources__container', children: [_jsx("p", { className: 'navigation-pane__resources__title', children: extraMenu.title }), _jsx("img", { src: arrowDown, alt: 'arrow-down' })] }), _jsx("ul", { className: 'resources__list', children: extraMenu.items.map((item) => (_jsx("li", { className: 'menu-items-li', children: _jsx("a", { title: item.title, "data-qa": item.dataQa, href: item.href, children: item.label }) }, item.title))) })] }))] }));
10
10
  };
@@ -6,6 +6,35 @@ export const MenuItemsStyled = styled.div `
6
6
  justify-content: flex-start;
7
7
  align-items: flex-start;
8
8
 
9
+ @media (min-width: 1024px) {
10
+ gap: 2rem;
11
+ }
12
+
13
+ @media ((min-width: ${size.tab} ) and (max-width: 1024px)) {
14
+ gap: 1rem;
15
+ }
16
+
17
+ .menu-desktop-wrapper {
18
+ display: none;
19
+ }
20
+ .menu-mobile-wrapper {
21
+ display: block;
22
+ }
23
+
24
+ @media ${device.tablets} {
25
+ flex-direction: row;
26
+ align-items: center;
27
+ position: relative;
28
+ width: 100%;
29
+
30
+ .menu-desktop-wrapper {
31
+ display: block;
32
+ }
33
+ .menu-mobile-wrapper {
34
+ display: none;
35
+ }
36
+ }
37
+
9
38
  &__wrapper {
10
39
  width: 100%;
11
40
  margin-top: 1rem;
@@ -23,25 +52,11 @@ export const MenuItemsStyled = styled.div `
23
52
  }
24
53
  }
25
54
 
26
- .left-nav {
27
- position: relative;
28
- width: 100%;
29
- display: none;
30
- flex-flow: row wrap;
31
- justify-content: flex-end;
32
- }
33
-
34
55
  &__spacer {
35
56
  display: flex;
36
57
  flex: 1;
37
58
  }
38
59
 
39
- .left-nav {
40
- display: flex;
41
- align-items: center;
42
- gap: 1rem;
43
- }
44
-
45
60
  .header-phone {
46
61
  display: flex;
47
62
  align-items: center;
@@ -70,14 +85,6 @@ export const MenuItemsStyled = styled.div `
70
85
  }
71
86
  }
72
87
 
73
- @media ${device.tablets} {
74
- display: flex;
75
- align-items: center;
76
- flex-direction: row;
77
- flex-wrap: nowrap;
78
- justify-content: flex-start;
79
- }
80
-
81
88
  &.--no-products {
82
89
  justify-content: flex-end;
83
90
  align-items: center;
@@ -363,67 +370,18 @@ export const MenuItemsStyled = styled.div `
363
370
  margin-right: 1rem;
364
371
  }
365
372
 
366
- // mobile pane
367
-
368
- .navigation-pane {
369
- .navigation-pane.--is-mobile {
370
- display: flex;
371
-
372
- @media (max-width: ${size.tab}) {
373
- display: none;
374
- }
375
-
376
- .navigation-pane__user-menu {
377
- display: flex;
378
- flex-flow: row nowrap;
379
- justify-content: center;
380
- margin: 0 1rem;
381
- padding: 1.5rem 0;
382
- }
383
-
384
- .navigation-pane__ratafia {
385
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
386
-
387
- .navigation-pane__ratafia__title {
388
- display: flex;
389
- justify-content: start;
390
- align-items: center;
391
- gap: 0.25rem;
392
- }
393
- }
394
-
395
- .navigation-pane__resources {
396
- .resources__list {
397
- @media ${device['mobile']} {
398
- margin-bottom: 2rem;
399
- }
400
- }
401
- }
402
- }
403
-
404
- &__trigger {
405
- display: flex;
406
- align-content: center;
407
- flex-flow: row wrap;
408
- align-items: center;
409
- font-weight: bold;
410
- color: var(--button-secondary);
411
- padding: 4px 8px;
412
- border: 1px solid var(--neutral-neutral-3);
413
- border-radius: var(--s-border-radius);
414
- z-index: 200;
415
- //Prevent user from copying template
416
- -webkit-touch-callout: none;
417
- -moz-user-select: none;
418
- -webkit-user-select: none;
419
- -ms-user-select: none;
420
- -o-user-select: none;
421
- user-select: none;
422
-
423
- span {
424
- margin-right: 0.5rem;
425
- }
426
- }
373
+ &__trigger {
374
+ display: flex;
375
+ align-content: center;
376
+ flex-flow: row wrap;
377
+ align-items: center;
378
+ font-weight: bold;
379
+ color: var(--button-secondary);
380
+ padding: 4px 8px;
381
+ border: 1px solid var(--neutral-neutral-3);
382
+ border-radius: var(--s-border-radius);
383
+ z-index: 200;
384
+ user-select: none;
427
385
  }
428
386
 
429
387
  .header {
@@ -434,7 +392,7 @@ export const MenuItemsStyled = styled.div `
434
392
  }
435
393
  }
436
394
 
437
- .--is-open .--is-mobile .navigation-pane {
395
+ &.--is-open {
438
396
  .navigation-pane__wrapper {
439
397
  width: 100%;
440
398
  margin-top: 1rem;
@@ -445,204 +403,20 @@ export const MenuItemsStyled = styled.div `
445
403
  overflow: auto;
446
404
  height: calc(100% - 65px);
447
405
  z-index: 100;
406
+ }
448
407
 
449
- .search {
450
- padding-right: 1.5rem;
451
- padding-left: 1.5rem;
452
- }
408
+ .search {
409
+ padding-right: 1.5rem;
410
+ padding-left: 1.5rem;
453
411
  }
454
412
 
455
- &__user-menu {
413
+ .navigation-pane__user-menu {
456
414
  display: flex;
457
415
  flex-flow: row nowrap;
458
416
  justify-content: center;
459
417
  align-content: center;
460
418
  padding: 1.5rem 0;
461
419
  margin: 0 1rem;
462
-
463
- .log-in {
464
- min-width: 120px;
465
- margin-right: 0.5rem;
466
- }
467
- }
468
-
469
- &__ratafia {
470
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
471
- &__title {
472
- display: flex;
473
- justify-content: start;
474
- align-items: center;
475
- gap: 0.25rem;
476
- }
477
- }
478
-
479
- &__esignature {
480
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
481
- }
482
-
483
- &__user-name {
484
- margin-right: 1rem;
485
- font-weight: bold;
486
- text-overflow: ellipsis;
487
- overflow: hidden;
488
- white-space: nowrap;
489
- width: 8rem;
490
- color: var(--primary-main-light-5);
491
- padding: 0.5rem 1rem;
492
- border-radius: var(--s-border-radius);
493
- background-color: var(--primary-main-light-6);
494
- }
495
-
496
- &__products,
497
- &__help,
498
- &__resources {
499
- p {
500
- font-weight: bold;
501
-
502
- img {
503
- display: none;
504
- }
505
- }
506
-
507
- li {
508
- margin-top: 1rem;
509
-
510
- &:last-child {
511
- margin-bottom: 1.5rem;
512
- }
513
- }
514
- }
515
-
516
- &__help {
517
- padding: 1.5rem 0;
518
- margin: 0 1.5rem;
519
- border-top: 1px solid var(--neutral-neutral-4);
520
- }
521
-
522
- &__products__title {
523
- display: none;
524
- }
525
-
526
- .navigation-pane__resources {
527
- display: flex;
528
- flex-direction: column;
529
- align-items: flex-start;
530
- padding: 1.5rem 0;
531
- margin: 0 1.5rem 2rem 1.5rem;
532
- border-top: 1px solid var(--neutral-neutral-4);
533
- border-bottom: 1px solid var(--neutral-neutral-4);
534
- }
535
- }
536
-
537
- .--is-open {
538
- .--is-mobile {
539
- .navigation-pane {
540
- .navigation-pane__wrapper {
541
- width: 100%;
542
- margin-top: 1rem;
543
- left: 0;
544
- background: var(--others-white);
545
- position: fixed;
546
- box-shadow: var(--box-shadow-menu);
547
- overflow: auto;
548
- height: calc(100% - 65px);
549
- z-index: 100;
550
- }
551
- }
552
-
553
- .search {
554
- padding-right: 1.5rem;
555
- padding-left: 1.5rem;
556
- }
557
-
558
- .navigation-pane__user-menu {
559
- display: flex;
560
- flex-flow: row nowrap;
561
- justify-content: center;
562
- align-content: center;
563
- padding: 1.5rem 0;
564
- margin: 0 1rem;
565
-
566
- .log-in {
567
- min-width: 120px;
568
- margin-right: 0.5rem;
569
- }
570
- }
571
-
572
- .navigation-pane__ratafia {
573
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
574
-
575
- .navigation-pane__ratafia__title {
576
- display: flex;
577
- justify-content: start;
578
- align-items: center;
579
- gap: 0.25rem;
580
- }
581
- }
582
-
583
- .navigation-pane__esignature {
584
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
585
- }
586
-
587
- .navigation-pane__user-name {
588
- margin-right: 1rem;
589
- font-weight: bold;
590
- text-overflow: ellipsis;
591
- overflow: hidden;
592
- white-space: nowrap;
593
- width: 8rem;
594
- color: var(--primary-main-light-5);
595
- padding: 0.5rem 1rem;
596
- border-radius: var(--s-border-radius);
597
- background-color: var(--neutral-neutral-6);
598
- }
599
-
600
- .navigation-pane__products,
601
- .navigation-pane__help,
602
- .navigation-pane__resources {
603
- p {
604
- font-weight: bold;
605
-
606
- img {
607
- display: none;
608
- }
609
- }
610
-
611
- li {
612
- margin-top: 1rem;
613
-
614
- &:last-child {
615
- margin-bottom: 1.5rem;
616
- }
617
- }
618
- }
619
-
620
- .navigation-pane__help {
621
- padding: 1.5rem 0;
622
- margin: 0 1.5rem;
623
- border-top: 1px solid var(--neutral-neutral-4);
624
- }
625
-
626
- .navigation-pane__products__title {
627
- display: none;
628
- }
629
-
630
- .navigation-pane__resources {
631
- display: flex;
632
- flex-direction: column;
633
- align-items: flex-start;
634
- padding: 1.5rem 0 0 0;
635
- margin: 0 1.5rem 1.5rem 1.5rem;
636
- border-top: 1px solid var(--neutral-neutral-4);
637
- }
638
- }
639
- }
640
-
641
- .is-tablet {
642
- display: none;
643
-
644
- @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
645
- display: flex;
646
420
  }
647
421
  }
648
422
 
@@ -675,13 +449,6 @@ export const MenuItemsStyled = styled.div `
675
449
  }
676
450
 
677
451
  .navigation-pane__user-menu {
678
- display: flex;
679
- flex-flow: row nowrap;
680
- justify-content: center;
681
- align-content: center;
682
- padding: 1.5rem 0;
683
- margin: 0 1rem;
684
-
685
452
  .log-in {
686
453
  min-width: 120px;
687
454
  margin-right: 0.5rem;
@@ -7,6 +7,35 @@ export const MenuItemsStyled = styled.div`
7
7
  justify-content: flex-start;
8
8
  align-items: flex-start;
9
9
 
10
+ @media (min-width: 1024px) {
11
+ gap: 2rem;
12
+ }
13
+
14
+ @media ((min-width: ${size.tab} ) and (max-width: 1024px)) {
15
+ gap: 1rem;
16
+ }
17
+
18
+ .menu-desktop-wrapper {
19
+ display: none;
20
+ }
21
+ .menu-mobile-wrapper {
22
+ display: block;
23
+ }
24
+
25
+ @media ${device.tablets} {
26
+ flex-direction: row;
27
+ align-items: center;
28
+ position: relative;
29
+ width: 100%;
30
+
31
+ .menu-desktop-wrapper {
32
+ display: block;
33
+ }
34
+ .menu-mobile-wrapper {
35
+ display: none;
36
+ }
37
+ }
38
+
10
39
  &__wrapper {
11
40
  width: 100%;
12
41
  margin-top: 1rem;
@@ -24,25 +53,11 @@ export const MenuItemsStyled = styled.div`
24
53
  }
25
54
  }
26
55
 
27
- .left-nav {
28
- position: relative;
29
- width: 100%;
30
- display: none;
31
- flex-flow: row wrap;
32
- justify-content: flex-end;
33
- }
34
-
35
56
  &__spacer {
36
57
  display: flex;
37
58
  flex: 1;
38
59
  }
39
60
 
40
- .left-nav {
41
- display: flex;
42
- align-items: center;
43
- gap: 1rem;
44
- }
45
-
46
61
  .header-phone {
47
62
  display: flex;
48
63
  align-items: center;
@@ -71,14 +86,6 @@ export const MenuItemsStyled = styled.div`
71
86
  }
72
87
  }
73
88
 
74
- @media ${device.tablets} {
75
- display: flex;
76
- align-items: center;
77
- flex-direction: row;
78
- flex-wrap: nowrap;
79
- justify-content: flex-start;
80
- }
81
-
82
89
  &.--no-products {
83
90
  justify-content: flex-end;
84
91
  align-items: center;
@@ -364,67 +371,18 @@ export const MenuItemsStyled = styled.div`
364
371
  margin-right: 1rem;
365
372
  }
366
373
 
367
- // mobile pane
368
-
369
- .navigation-pane {
370
- .navigation-pane.--is-mobile {
371
- display: flex;
372
-
373
- @media (max-width: ${size.tab}) {
374
- display: none;
375
- }
376
-
377
- .navigation-pane__user-menu {
378
- display: flex;
379
- flex-flow: row nowrap;
380
- justify-content: center;
381
- margin: 0 1rem;
382
- padding: 1.5rem 0;
383
- }
384
-
385
- .navigation-pane__ratafia {
386
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
387
-
388
- .navigation-pane__ratafia__title {
389
- display: flex;
390
- justify-content: start;
391
- align-items: center;
392
- gap: 0.25rem;
393
- }
394
- }
395
-
396
- .navigation-pane__resources {
397
- .resources__list {
398
- @media ${device['mobile']} {
399
- margin-bottom: 2rem;
400
- }
401
- }
402
- }
403
- }
404
-
405
- &__trigger {
406
- display: flex;
407
- align-content: center;
408
- flex-flow: row wrap;
409
- align-items: center;
410
- font-weight: bold;
411
- color: var(--button-secondary);
412
- padding: 4px 8px;
413
- border: 1px solid var(--neutral-neutral-3);
414
- border-radius: var(--s-border-radius);
415
- z-index: 200;
416
- //Prevent user from copying template
417
- -webkit-touch-callout: none;
418
- -moz-user-select: none;
419
- -webkit-user-select: none;
420
- -ms-user-select: none;
421
- -o-user-select: none;
422
- user-select: none;
423
-
424
- span {
425
- margin-right: 0.5rem;
426
- }
427
- }
374
+ &__trigger {
375
+ display: flex;
376
+ align-content: center;
377
+ flex-flow: row wrap;
378
+ align-items: center;
379
+ font-weight: bold;
380
+ color: var(--button-secondary);
381
+ padding: 4px 8px;
382
+ border: 1px solid var(--neutral-neutral-3);
383
+ border-radius: var(--s-border-radius);
384
+ z-index: 200;
385
+ user-select: none;
428
386
  }
429
387
 
430
388
  .header {
@@ -435,7 +393,7 @@ export const MenuItemsStyled = styled.div`
435
393
  }
436
394
  }
437
395
 
438
- .--is-open .--is-mobile .navigation-pane {
396
+ &.--is-open {
439
397
  .navigation-pane__wrapper {
440
398
  width: 100%;
441
399
  margin-top: 1rem;
@@ -446,204 +404,20 @@ export const MenuItemsStyled = styled.div`
446
404
  overflow: auto;
447
405
  height: calc(100% - 65px);
448
406
  z-index: 100;
407
+ }
449
408
 
450
- .search {
451
- padding-right: 1.5rem;
452
- padding-left: 1.5rem;
453
- }
409
+ .search {
410
+ padding-right: 1.5rem;
411
+ padding-left: 1.5rem;
454
412
  }
455
413
 
456
- &__user-menu {
414
+ .navigation-pane__user-menu {
457
415
  display: flex;
458
416
  flex-flow: row nowrap;
459
417
  justify-content: center;
460
418
  align-content: center;
461
419
  padding: 1.5rem 0;
462
420
  margin: 0 1rem;
463
-
464
- .log-in {
465
- min-width: 120px;
466
- margin-right: 0.5rem;
467
- }
468
- }
469
-
470
- &__ratafia {
471
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
472
- &__title {
473
- display: flex;
474
- justify-content: start;
475
- align-items: center;
476
- gap: 0.25rem;
477
- }
478
- }
479
-
480
- &__esignature {
481
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
482
- }
483
-
484
- &__user-name {
485
- margin-right: 1rem;
486
- font-weight: bold;
487
- text-overflow: ellipsis;
488
- overflow: hidden;
489
- white-space: nowrap;
490
- width: 8rem;
491
- color: var(--primary-main-light-5);
492
- padding: 0.5rem 1rem;
493
- border-radius: var(--s-border-radius);
494
- background-color: var(--primary-main-light-6);
495
- }
496
-
497
- &__products,
498
- &__help,
499
- &__resources {
500
- p {
501
- font-weight: bold;
502
-
503
- img {
504
- display: none;
505
- }
506
- }
507
-
508
- li {
509
- margin-top: 1rem;
510
-
511
- &:last-child {
512
- margin-bottom: 1.5rem;
513
- }
514
- }
515
- }
516
-
517
- &__help {
518
- padding: 1.5rem 0;
519
- margin: 0 1.5rem;
520
- border-top: 1px solid var(--neutral-neutral-4);
521
- }
522
-
523
- &__products__title {
524
- display: none;
525
- }
526
-
527
- .navigation-pane__resources {
528
- display: flex;
529
- flex-direction: column;
530
- align-items: flex-start;
531
- padding: 1.5rem 0;
532
- margin: 0 1.5rem 2rem 1.5rem;
533
- border-top: 1px solid var(--neutral-neutral-4);
534
- border-bottom: 1px solid var(--neutral-neutral-4);
535
- }
536
- }
537
-
538
- .--is-open {
539
- .--is-mobile {
540
- .navigation-pane {
541
- .navigation-pane__wrapper {
542
- width: 100%;
543
- margin-top: 1rem;
544
- left: 0;
545
- background: var(--others-white);
546
- position: fixed;
547
- box-shadow: var(--box-shadow-menu);
548
- overflow: auto;
549
- height: calc(100% - 65px);
550
- z-index: 100;
551
- }
552
- }
553
-
554
- .search {
555
- padding-right: 1.5rem;
556
- padding-left: 1.5rem;
557
- }
558
-
559
- .navigation-pane__user-menu {
560
- display: flex;
561
- flex-flow: row nowrap;
562
- justify-content: center;
563
- align-content: center;
564
- padding: 1.5rem 0;
565
- margin: 0 1rem;
566
-
567
- .log-in {
568
- min-width: 120px;
569
- margin-right: 0.5rem;
570
- }
571
- }
572
-
573
- .navigation-pane__ratafia {
574
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
575
-
576
- .navigation-pane__ratafia__title {
577
- display: flex;
578
- justify-content: start;
579
- align-items: center;
580
- gap: 0.25rem;
581
- }
582
- }
583
-
584
- .navigation-pane__esignature {
585
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
586
- }
587
-
588
- .navigation-pane__user-name {
589
- margin-right: 1rem;
590
- font-weight: bold;
591
- text-overflow: ellipsis;
592
- overflow: hidden;
593
- white-space: nowrap;
594
- width: 8rem;
595
- color: var(--primary-main-light-5);
596
- padding: 0.5rem 1rem;
597
- border-radius: var(--s-border-radius);
598
- background-color: var(--neutral-neutral-6);
599
- }
600
-
601
- .navigation-pane__products,
602
- .navigation-pane__help,
603
- .navigation-pane__resources {
604
- p {
605
- font-weight: bold;
606
-
607
- img {
608
- display: none;
609
- }
610
- }
611
-
612
- li {
613
- margin-top: 1rem;
614
-
615
- &:last-child {
616
- margin-bottom: 1.5rem;
617
- }
618
- }
619
- }
620
-
621
- .navigation-pane__help {
622
- padding: 1.5rem 0;
623
- margin: 0 1.5rem;
624
- border-top: 1px solid var(--neutral-neutral-4);
625
- }
626
-
627
- .navigation-pane__products__title {
628
- display: none;
629
- }
630
-
631
- .navigation-pane__resources {
632
- display: flex;
633
- flex-direction: column;
634
- align-items: flex-start;
635
- padding: 1.5rem 0 0 0;
636
- margin: 0 1.5rem 1.5rem 1.5rem;
637
- border-top: 1px solid var(--neutral-neutral-4);
638
- }
639
- }
640
- }
641
-
642
- .is-tablet {
643
- display: none;
644
-
645
- @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
646
- display: flex;
647
421
  }
648
422
  }
649
423
 
@@ -679,13 +453,6 @@ export const MenuItemsStyled = styled.div`
679
453
  }
680
454
 
681
455
  .navigation-pane__user-menu {
682
- display: flex;
683
- flex-flow: row nowrap;
684
- justify-content: center;
685
- align-content: center;
686
- padding: 1.5rem 0;
687
- margin: 0 1rem;
688
-
689
456
  .log-in {
690
457
  min-width: 120px;
691
458
  margin-right: 0.5rem;
@@ -13,13 +13,12 @@ export const MenuItems: React.FC<MenuItemsProps> = ({
13
13
  setCookiePolicyFunc,
14
14
  routes,
15
15
  finalMenu,
16
- isMobile,
17
16
  configVars,
18
17
  navMenuItems,
19
18
  extraMenu
20
19
  }) => {
21
20
  return (
22
- <MenuItemsStyled className={`${isMobile ? 'navigation-pane' : 'left-nav'}`}>
21
+ <MenuItemsStyled>
23
22
  {hasProducts && (
24
23
  <div className={'navigation-pane__products'}>
25
24
  <div className={'navigation-pane__products__container'}>
@@ -27,7 +26,7 @@ export const MenuItems: React.FC<MenuItemsProps> = ({
27
26
  <img src={arrowDown} alt='arrow-down' />
28
27
  </div>
29
28
  <div className={'products__list'}>
30
- {isMobile ? (
29
+ <div className='menu-mobile-wrapper'>
31
30
  <DocumentListMenu
32
31
  routes={routes}
33
32
  seeAllLegalDocs={seeAllDocumentsText?.seeAllLegalDocs ?? ''}
@@ -36,7 +35,8 @@ export const MenuItems: React.FC<MenuItemsProps> = ({
36
35
  hasSubCategoryPage={configVars.HAS_SUBCATEGORY_PAGE}
37
36
  setCookiePolicyFunc={setCookiePolicyFunc}
38
37
  ></DocumentListMenu>
39
- ) : (
38
+ </div>
39
+ <div className='menu-desktop-wrapper'>
40
40
  <DocumentMainMenu
41
41
  seeAllTypeDocs={seeAllDocumentsText?.seeAllTypeDocs ?? ''}
42
42
  allLegalDocs={seeAllDocumentsText?.allLegalDocs ?? ''}
@@ -46,7 +46,7 @@ export const MenuItems: React.FC<MenuItemsProps> = ({
46
46
  hasSubCategoryPage={configVars.HAS_SUBCATEGORY_PAGE}
47
47
  finalMenu={finalMenu}
48
48
  ></DocumentMainMenu>
49
- )}
49
+ </div>
50
50
  </div>
51
51
  </div>
52
52
  )}
@@ -12,7 +12,6 @@ export interface MenuItemsProps {
12
12
  setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void;
13
13
  routes: Routes;
14
14
  finalMenu: DocumentListMenuSectionProps[];
15
- isMobile: boolean;
16
15
  configVars: {
17
16
  TARGET_ADDRESS: string;
18
17
  ESIGNATURE_CONFIG: {
@@ -13,7 +13,6 @@ export interface MenuItemsProps {
13
13
  setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void
14
14
  routes: Routes
15
15
  finalMenu: DocumentListMenuSectionProps[]
16
- isMobile: boolean
17
16
  configVars: {
18
17
  TARGET_ADDRESS: string
19
18
  ESIGNATURE_CONFIG: {
@@ -5,6 +5,6 @@ import { NavMenuStyled } from './NavMenu.styled';
5
5
  import { NavMobileContactBar } from '../../molecules/NavMobileContactBar';
6
6
  import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon';
7
7
  import { SearchBar } from '../../../components/molecules/SearchBar/SearchBar';
8
- export const NavMenu = ({ isLeftNavHidden, isHeaderProductsHidden, isSearchBarHidden, isResourcesHidden, showHeaderPhone, toggleMenuOpen, isMenuOpen, languageSelectorProps, configVars, searchableProducts, finalMenu, userActions, menuStrings, routes, searchBarTexts, sitePhone, handleResultClick, languageSelectorConfigEnabled, isJonSnow, isMobile, triggerMenuClose, triggerMenuOpen, setCookiePolicyFunc, navMenuItems, extraMenu }) => {
9
- return (_jsxs(NavMenuStyled, { children: [_jsxs("nav", { itemScope: true, itemType: 'https://www.schema.org/SiteNavigationElement', className: `navigation-pane --is-mobile ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [_jsx("div", { onClick: toggleMenuOpen, onKeyDown: toggleMenuOpen, className: 'navigation-pane__trigger sans-serif --small', children: !isMenuOpen ? triggerMenuOpen : triggerMenuClose }), isMenuOpen && (_jsxs("div", { className: 'navigation-pane__wrapper', children: [userActions, !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, isMobile: isMobile, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }), !isJonSnow && _jsx(NavMobileContactBar, { phone: sitePhone })] }))] }), _jsxs("nav", { className: `navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [!isLeftNavHidden && (_jsx("div", { className: 'left-nav', children: _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, isMobile: isMobile, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }) })), _jsxs("div", { className: 'right-nav', children: [showHeaderPhone && (_jsxs("div", { className: 'header-phone', children: [_jsx(PhoneIcon, {}), _jsxs("b", { children: [sitePhone, " "] })] })), !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), languageSelectorConfigEnabled && languageSelectorProps && _jsx(LanguageSelector, { ...languageSelectorProps }), userActions] })] })] }));
8
+ export const NavMenu = ({ isLeftNavHidden, isHeaderProductsHidden, isSearchBarHidden, isResourcesHidden, showHeaderPhone, toggleMenuOpen, isMenuOpen, languageSelectorProps, configVars, searchableProducts, finalMenu, userActions, menuStrings, routes, searchBarTexts, sitePhone, handleResultClick, languageSelectorConfigEnabled, isJonSnow, triggerMenuClose, triggerMenuOpen, setCookiePolicyFunc, navMenuItems, extraMenu }) => {
9
+ return (_jsxs(NavMenuStyled, { children: [_jsxs("nav", { itemScope: true, itemType: 'https://www.schema.org/SiteNavigationElement', className: `navigation-pane --is-mobile ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [_jsx("div", { onClick: toggleMenuOpen, onKeyDown: toggleMenuOpen, className: 'navigation-pane__trigger sans-serif --small', children: !isMenuOpen ? triggerMenuOpen : triggerMenuClose }), isMenuOpen && (_jsxs("div", { className: 'navigation-pane__wrapper', children: [userActions, !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }), !isJonSnow && _jsx(NavMobileContactBar, { phone: sitePhone })] }))] }), _jsxs("nav", { className: `navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [!isLeftNavHidden && (_jsx("div", { className: 'left-nav', children: _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }) })), _jsxs("div", { className: 'right-nav', children: [showHeaderPhone && (_jsxs("div", { className: 'header-phone', children: [_jsx(PhoneIcon, {}), _jsxs("b", { children: [sitePhone, " "] })] })), !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), languageSelectorConfigEnabled && languageSelectorProps && _jsx(LanguageSelector, { ...languageSelectorProps }), userActions] })] })] }));
10
10
  };
@@ -10,6 +10,17 @@ export const NavMenuStyled = styled.nav `
10
10
  display: flex;
11
11
  flex: 1;
12
12
  }
13
+
14
+ .create-account__responsive {
15
+ @media (min-width: ${size.tab}) {
16
+ background-color: transparent;
17
+ border: 2px solid var(--button-secondary);
18
+ color: var(--button-secondary);
19
+ font-weight: 700;
20
+ }
21
+ display: block;
22
+ }
23
+
13
24
  &.--is-mobile {
14
25
  @media (min-width: ${size.tab}) {
15
26
  display: none;
@@ -27,10 +38,6 @@ export const NavMenuStyled = styled.nav `
27
38
  .left-nav {
28
39
  display: flex;
29
40
  align-items: center;
30
- @media (max-width: 1024px) {
31
- gap: 1rem;
32
- }
33
- gap: 2rem;
34
41
  }
35
42
 
36
43
  .header-phone {
@@ -11,6 +11,17 @@ export const NavMenuStyled = styled.nav`
11
11
  display: flex;
12
12
  flex: 1;
13
13
  }
14
+
15
+ .create-account__responsive {
16
+ @media (min-width: ${size.tab}) {
17
+ background-color: transparent;
18
+ border: 2px solid var(--button-secondary);
19
+ color: var(--button-secondary);
20
+ font-weight: 700;
21
+ }
22
+ display: block;
23
+ }
24
+
14
25
  &.--is-mobile {
15
26
  @media (min-width: ${size.tab}) {
16
27
  display: none;
@@ -28,10 +39,6 @@ export const NavMenuStyled = styled.nav`
28
39
  .left-nav {
29
40
  display: flex;
30
41
  align-items: center;
31
- @media (max-width: 1024px) {
32
- gap: 1rem;
33
- }
34
- gap: 2rem;
35
42
  }
36
43
 
37
44
  .header-phone {
@@ -29,7 +29,6 @@ export const NavMenu: React.FC<NavMenuProps> = ({
29
29
  handleResultClick,
30
30
  languageSelectorConfigEnabled,
31
31
  isJonSnow,
32
- isMobile,
33
32
  triggerMenuClose,
34
33
  triggerMenuOpen,
35
34
  setCookiePolicyFunc,
@@ -68,7 +67,6 @@ export const NavMenu: React.FC<NavMenuProps> = ({
68
67
  setCookiePolicyFunc={setCookiePolicyFunc}
69
68
  routes={routes}
70
69
  finalMenu={finalMenu}
71
- isMobile={isMobile}
72
70
  configVars={configVars}
73
71
  navMenuItems={navMenuItems}
74
72
  extraMenu={extraMenu}
@@ -87,7 +85,6 @@ export const NavMenu: React.FC<NavMenuProps> = ({
87
85
  setCookiePolicyFunc={setCookiePolicyFunc}
88
86
  routes={routes}
89
87
  finalMenu={finalMenu}
90
- isMobile={isMobile}
91
88
  configVars={configVars}
92
89
  navMenuItems={navMenuItems}
93
90
  extraMenu={extraMenu}
@@ -42,7 +42,6 @@ export interface NavMenuProps {
42
42
  isMenuOpen: boolean;
43
43
  languageSelectorConfigEnabled: boolean;
44
44
  isJonSnow: boolean;
45
- isMobile: boolean;
46
45
  triggerMenuOpen: React.ReactNode;
47
46
  triggerMenuClose: React.ReactNode;
48
47
  toggleMenuOpen: () => void;
@@ -44,7 +44,6 @@ export interface NavMenuProps {
44
44
  isMenuOpen: boolean
45
45
  languageSelectorConfigEnabled: boolean
46
46
  isJonSnow: boolean
47
- isMobile: boolean
48
47
  triggerMenuOpen: React.ReactNode
49
48
  triggerMenuClose: React.ReactNode
50
49
  toggleMenuOpen: () => void
@@ -27,7 +27,6 @@ export interface HeaderProps {
27
27
  siteName: string;
28
28
  };
29
29
  topBarProps: {
30
- isMobile?: boolean;
31
30
  hide?: boolean;
32
31
  isVisible?: boolean;
33
32
  children?: React.ReactNode;
@@ -56,7 +55,6 @@ export interface HeaderProps {
56
55
  isMenuOpen: boolean;
57
56
  languageSelectorConfigEnabled: boolean;
58
57
  isJonSnow: boolean;
59
- isMobile: boolean;
60
58
  triggerMenuOpen: React.ReactNode;
61
59
  triggerMenuClose: React.ReactNode;
62
60
  toggleMenuOpen: () => void;
@@ -32,7 +32,6 @@ export interface HeaderProps {
32
32
  siteName: string
33
33
  }
34
34
  topBarProps: {
35
- isMobile?: boolean
36
35
  hide?: boolean
37
36
  isVisible?: boolean
38
37
  children?: React.ReactNode
@@ -61,7 +60,6 @@ export interface HeaderProps {
61
60
  isMenuOpen: boolean
62
61
  languageSelectorConfigEnabled: boolean
63
62
  isJonSnow: boolean
64
- isMobile: boolean
65
63
  triggerMenuOpen: React.ReactNode
66
64
  triggerMenuClose: React.ReactNode
67
65
  toggleMenuOpen: () => void
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.28.2",
3
+ "version": "7.30.0",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",