@entur/menu 5.1.3 → 5.1.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.
Files changed (3) hide show
  1. package/README.md +2 -2
  2. package/dist/styles.css +165 -163
  3. package/package.json +11 -11
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  This package contains the navigation components
4
4
 
5
- > 💡 Looking for the [documentation](https://design.entur.no/komponenter/navigasjon/top-navigation)?
5
+ > 💡 Looking for the [documentation](https://linje.entur.no/komponenter/navigasjon/top-navigation)?
6
6
 
7
7
  ## Installation
8
8
 
@@ -14,4 +14,4 @@ yarn add @entur/menu
14
14
 
15
15
  ## Usage
16
16
 
17
- Please refer to the [documentation](https://design.entur.no/komponenter/navigasjon/top-navigation) for further usage information.
17
+ Please refer to the [documentation](https://linje.entur.no/komponenter/navigasjon/top-navigation) for further usage information.
package/dist/styles.css CHANGED
@@ -55,6 +55,51 @@
55
55
  }
56
56
  /* DO NOT CHANGE!*/
57
57
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
58
+ .eds-overflow-menu__menu-list {
59
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
60
+ overflow: hidden;
61
+ border-radius: 0.25rem;
62
+ border: 0.0625rem solid var(--components-menu-overflowmenu-border);
63
+ z-index: 20;
64
+ }
65
+ .eds-overflow-menu__menu-list.eds-contrast {
66
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
67
+ }
68
+ .eds-overflow-menu__item {
69
+ display: block;
70
+ width: 100%;
71
+ -webkit-appearance: none;
72
+ -moz-appearance: none;
73
+ appearance: none;
74
+ padding: 0.75rem;
75
+ border: none;
76
+ outline: none;
77
+ font-size: 1rem;
78
+ line-height: 1.375rem;
79
+ text-align: left;
80
+ -webkit-text-decoration: none;
81
+ text-decoration: none;
82
+ color: var(--components-menu-overflowmenu-text);
83
+ background: var(--components-menu-overflowmenu-fill-default);
84
+ cursor: pointer;
85
+ }
86
+ .eds-overflow-menu__item--highlighted {
87
+ background: var(--components-menu-overflowmenu-fill-hover);
88
+ }
89
+ .eds-overflow-menu__item:active {
90
+ background: var(--components-menu-overflowmenu-fill-active);
91
+ color: var(--components-menu-overflowmenu-text-active);
92
+ }
93
+ .eds-overflow-menu__item--disabled {
94
+ background: var(--components-menu-overflowmenu-fill-default);
95
+ color: var(--components-menu-overflowmenu-text-disabled);
96
+ cursor: not-allowed;
97
+ }
98
+ .eds-overflow-menu__item svg {
99
+ margin-right: 0.75rem;
100
+ }
101
+ /* DO NOT CHANGE!*/
102
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
58
103
  .eds-side-navigation,
59
104
  .eds-side-navigation-group {
60
105
  color: var(--components-menu-sidenavigation-standard-text);
@@ -285,51 +330,6 @@
285
330
  }
286
331
  /* DO NOT CHANGE!*/
287
332
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
288
- .eds-overflow-menu__menu-list {
289
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
290
- overflow: hidden;
291
- border-radius: 0.25rem;
292
- border: 0.0625rem solid var(--components-menu-overflowmenu-border);
293
- z-index: 20;
294
- }
295
- .eds-overflow-menu__menu-list.eds-contrast {
296
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
297
- }
298
- .eds-overflow-menu__item {
299
- display: block;
300
- width: 100%;
301
- -webkit-appearance: none;
302
- -moz-appearance: none;
303
- appearance: none;
304
- padding: 0.75rem;
305
- border: none;
306
- outline: none;
307
- font-size: 1rem;
308
- line-height: 1.375rem;
309
- text-align: left;
310
- -webkit-text-decoration: none;
311
- text-decoration: none;
312
- color: var(--components-menu-overflowmenu-text);
313
- background: var(--components-menu-overflowmenu-fill-default);
314
- cursor: pointer;
315
- }
316
- .eds-overflow-menu__item--highlighted {
317
- background: var(--components-menu-overflowmenu-fill-hover);
318
- }
319
- .eds-overflow-menu__item:active {
320
- background: var(--components-menu-overflowmenu-fill-active);
321
- color: var(--components-menu-overflowmenu-text-active);
322
- }
323
- .eds-overflow-menu__item--disabled {
324
- background: var(--components-menu-overflowmenu-fill-default);
325
- color: var(--components-menu-overflowmenu-text-disabled);
326
- cursor: not-allowed;
327
- }
328
- .eds-overflow-menu__item svg {
329
- margin-right: 0.75rem;
330
- }
331
- /* DO NOT CHANGE!*/
332
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
333
333
  .eds-pagination {
334
334
  align-items: center;
335
335
  display: flex;
@@ -491,124 +491,6 @@
491
491
  }
492
492
  /* DO NOT CHANGE!*/
493
493
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
494
- .eds-stepper {
495
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
496
- --line-color: var(--components-menu-stepper-standard-background);
497
- --label-font-weight: 500;
498
- --display-active-line: none;
499
- display: flex;
500
- flex-direction: row;
501
- width: 100%;
502
- list-style-type: none;
503
- }
504
- .eds-stepper__step {
505
- display: flex;
506
- flex-grow: 1;
507
- flex-basis: 0;
508
- flex-direction: column;
509
- align-items: inherit;
510
- -webkit-appearance: none;
511
- -moz-appearance: none;
512
- appearance: none;
513
- background: none;
514
- border: none;
515
- font-family: inherit;
516
- text-transform: none;
517
- }
518
- .eds-stepper__step:focus-visible .eds-stepper__step__label {
519
- outline-offset: 0.125rem;
520
- outline: 2px solid #181c56;
521
- }
522
- .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
523
- outline: 2px solid #ffffff;
524
- }
525
- .eds-contrast .eds-stepper__step {
526
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
527
- --line-color: var(--components-menu-stepper-contrast-background);
528
- }
529
- .eds-stepper__step__wrapper {
530
- flex-grow: 1;
531
- }
532
- .eds-stepper__step--interactive {
533
- all: unset;
534
- display: flex;
535
- flex-direction: column;
536
- width: 100%;
537
- cursor: pointer;
538
- }
539
- .eds-stepper__step--active {
540
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
541
- --label-font-weight: 600;
542
- --display-active-line: block;
543
- }
544
- .eds-contrast .eds-stepper__step--active {
545
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
546
- }
547
- .eds-stepper__step--completed {
548
- --text-color: var(--components-menu-stepper-standard-text-completed);
549
- --line-color: var(--components-menu-stepper-standard-progressbar);
550
- }
551
- .eds-contrast .eds-stepper__step--completed {
552
- --text-color: var(--components-menu-stepper-contrast-text-completed);
553
- --line-color: var(--components-menu-stepper-contrast-progressbar);
554
- }
555
- .eds-stepper__step__label {
556
- flex-grow: 1;
557
- flex-direction: column;
558
- align-self: center;
559
- text-align: center;
560
- font-size: 0.875rem;
561
- margin: 0.5rem 0 0;
562
- padding: 0 0.5rem;
563
- width: -moz-fit-content;
564
- width: fit-content;
565
- border-radius: 0.0625rem;
566
- color: var(--text-color);
567
- font-weight: var(--label-font-weight);
568
- }
569
- .eds-stepper__step--interactive:hover .eds-stepper__step__label {
570
- background-color: var(--components-menu-stepper-standard-background);
571
- color: var(--components-menu-stepper-standard-text-completed);
572
- }
573
- .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
574
- background-color: var(--components-menu-stepper-contrast-background);
575
- color: var(--components-menu-stepper-contrast-text-completed);
576
- }
577
- .eds-stepper__step__line {
578
- height: 0.5rem;
579
- background: var(--line-color);
580
- position: relative;
581
- }
582
- .eds-stepper__step__line:before {
583
- display: var(--display-active-line);
584
- content: "";
585
- position: absolute;
586
- right: calc(50% - 0.2rem);
587
- bottom: 0.0625rem;
588
- border-radius: 0.0625rem;
589
- background: var(--components-menu-stepper-standard-progressbar);
590
- width: calc(0.5rem - 0.125rem - 0.01rem);
591
- height: calc(0.5rem - 0.125rem - 0.01rem);
592
- transform: rotate(45deg);
593
- }
594
- .eds-contrast .eds-stepper__step__line:before {
595
- background: var(--components-menu-stepper-contrast-progressbar);
596
- }
597
- .eds-stepper__step__line:after {
598
- display: var(--display-active-line);
599
- content: "";
600
- position: absolute;
601
- left: 0;
602
- bottom: 0;
603
- width: 50%;
604
- height: 0.5rem;
605
- background: var(--components-menu-stepper-standard-progressbar);
606
- }
607
- .eds-contrast .eds-stepper__step__line:after {
608
- background: var(--components-menu-stepper-contrast-progressbar);
609
- }
610
- /* DO NOT CHANGE!*/
611
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
612
494
  /* DO NOT CHANGE!*/
613
495
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
614
496
  /* DO NOT CHANGE!*/
@@ -816,6 +698,7 @@
816
698
  :root {
817
699
  --basecolors-frame-contrast: #181c56;
818
700
  --basecolors-frame-contrastalt: #393d79;
701
+ --basecolors-frame-contrastalt-2: #292b6a;
819
702
  --basecolors-frame-default: #ffffff;
820
703
  --basecolors-frame-elevated: #ffffff;
821
704
  --basecolors-frame-elevatedalt: #f6f6f9;
@@ -881,6 +764,7 @@
881
764
  [data-color-mode=dark] {
882
765
  --basecolors-frame-contrast: #212233;
883
766
  --basecolors-frame-contrastalt: #141527;
767
+ --basecolors-frame-contrastalt-2: #08091c;
884
768
  --basecolors-frame-default: #08091c;
885
769
  --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
886
770
  --basecolors-frame-elevatedalt: #464755;
@@ -949,6 +833,124 @@
949
833
  }
950
834
  /* DO NOT CHANGE!*/
951
835
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
836
+ .eds-stepper {
837
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
838
+ --line-color: var(--components-menu-stepper-standard-background);
839
+ --label-font-weight: 500;
840
+ --display-active-line: none;
841
+ display: flex;
842
+ flex-direction: row;
843
+ width: 100%;
844
+ list-style-type: none;
845
+ }
846
+ .eds-stepper__step {
847
+ display: flex;
848
+ flex-grow: 1;
849
+ flex-basis: 0;
850
+ flex-direction: column;
851
+ align-items: inherit;
852
+ -webkit-appearance: none;
853
+ -moz-appearance: none;
854
+ appearance: none;
855
+ background: none;
856
+ border: none;
857
+ font-family: inherit;
858
+ text-transform: none;
859
+ }
860
+ .eds-stepper__step:focus-visible .eds-stepper__step__label {
861
+ outline-offset: 0.125rem;
862
+ outline: 2px solid #181c56;
863
+ }
864
+ .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
865
+ outline: 2px solid #ffffff;
866
+ }
867
+ .eds-contrast .eds-stepper__step {
868
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
869
+ --line-color: var(--components-menu-stepper-contrast-background);
870
+ }
871
+ .eds-stepper__step__wrapper {
872
+ flex-grow: 1;
873
+ }
874
+ .eds-stepper__step--interactive {
875
+ all: unset;
876
+ display: flex;
877
+ flex-direction: column;
878
+ width: 100%;
879
+ cursor: pointer;
880
+ }
881
+ .eds-stepper__step--active {
882
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
883
+ --label-font-weight: 600;
884
+ --display-active-line: block;
885
+ }
886
+ .eds-contrast .eds-stepper__step--active {
887
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
888
+ }
889
+ .eds-stepper__step--completed {
890
+ --text-color: var(--components-menu-stepper-standard-text-completed);
891
+ --line-color: var(--components-menu-stepper-standard-progressbar);
892
+ }
893
+ .eds-contrast .eds-stepper__step--completed {
894
+ --text-color: var(--components-menu-stepper-contrast-text-completed);
895
+ --line-color: var(--components-menu-stepper-contrast-progressbar);
896
+ }
897
+ .eds-stepper__step__label {
898
+ flex-grow: 1;
899
+ flex-direction: column;
900
+ align-self: center;
901
+ text-align: center;
902
+ font-size: 0.875rem;
903
+ margin: 0.5rem 0 0;
904
+ padding: 0 0.5rem;
905
+ width: -moz-fit-content;
906
+ width: fit-content;
907
+ border-radius: 0.0625rem;
908
+ color: var(--text-color);
909
+ font-weight: var(--label-font-weight);
910
+ }
911
+ .eds-stepper__step--interactive:hover .eds-stepper__step__label {
912
+ background-color: var(--components-menu-stepper-standard-background);
913
+ color: var(--components-menu-stepper-standard-text-completed);
914
+ }
915
+ .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
916
+ background-color: var(--components-menu-stepper-contrast-background);
917
+ color: var(--components-menu-stepper-contrast-text-completed);
918
+ }
919
+ .eds-stepper__step__line {
920
+ height: 0.5rem;
921
+ background: var(--line-color);
922
+ position: relative;
923
+ }
924
+ .eds-stepper__step__line:before {
925
+ display: var(--display-active-line);
926
+ content: "";
927
+ position: absolute;
928
+ right: calc(50% - 0.2rem);
929
+ bottom: 0.0625rem;
930
+ border-radius: 0.0625rem;
931
+ background: var(--components-menu-stepper-standard-progressbar);
932
+ width: calc(0.5rem - 0.125rem - 0.01rem);
933
+ height: calc(0.5rem - 0.125rem - 0.01rem);
934
+ transform: rotate(45deg);
935
+ }
936
+ .eds-contrast .eds-stepper__step__line:before {
937
+ background: var(--components-menu-stepper-contrast-progressbar);
938
+ }
939
+ .eds-stepper__step__line:after {
940
+ display: var(--display-active-line);
941
+ content: "";
942
+ position: absolute;
943
+ left: 0;
944
+ bottom: 0;
945
+ width: 50%;
946
+ height: 0.5rem;
947
+ background: var(--components-menu-stepper-standard-progressbar);
948
+ }
949
+ .eds-contrast .eds-stepper__step__line:after {
950
+ background: var(--components-menu-stepper-contrast-progressbar);
951
+ }
952
+ /* DO NOT CHANGE!*/
953
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
952
954
  .eds-top-navigation-item {
953
955
  --show-active-line: 0;
954
956
  display: inline-block;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "5.1.3",
3
+ "version": "5.1.5",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -27,20 +27,20 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.97",
31
- "@entur/button": "^3.3.3",
32
- "@entur/expand": "^3.6.3",
33
- "@entur/icons": "^7.7.1",
34
- "@entur/layout": "^3.0.0",
35
- "@entur/tokens": "^3.18.0",
36
- "@entur/tooltip": "^5.2.3",
37
- "@entur/typography": "^1.9.3",
38
- "@entur/utils": "^0.12.2",
30
+ "@entur/a11y": "^0.2.98",
31
+ "@entur/button": "^3.3.5",
32
+ "@entur/expand": "^3.6.5",
33
+ "@entur/icons": "^7.9.0",
34
+ "@entur/layout": "^3.1.1",
35
+ "@entur/tokens": "^3.19.0",
36
+ "@entur/tooltip": "^5.2.5",
37
+ "@entur/typography": "^1.9.5",
38
+ "@entur/utils": "^0.12.3",
39
39
  "@floating-ui/react": "^0.26.23",
40
40
  "classnames": "^2.3.1"
41
41
  },
42
42
  "devDependencies": {
43
43
  "dts-cli": "2.0.5"
44
44
  },
45
- "gitHead": "8ae7ed09699a63cc7e50d546d54750d8ec066c50"
45
+ "gitHead": "e59bee5bf5aa6ab864c96be6cf4979feab287c61"
46
46
  }