@entur/menu 6.2.2 → 7.0.0-next.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.
- package/dist/BreadcrumbNavigation.d.ts +1 -1
- package/dist/CollapsibleSideNavigation.d.ts +1 -2
- package/dist/Logo.d.ts +24 -0
- package/dist/OverflowMenu.d.ts +3 -3
- package/dist/Pagination.d.ts +1 -2
- package/dist/PaginationInput.d.ts +1 -2
- package/dist/PaginationPage.d.ts +1 -1
- package/dist/SideNavigation.d.ts +2 -5
- package/dist/SideNavigationGroup.d.ts +1 -1
- package/dist/Stepper.d.ts +1 -2
- package/dist/index.d.ts +1 -0
- package/dist/menu.cjs.js +89 -5
- package/dist/menu.cjs.js.map +1 -1
- package/dist/menu.esm.js +91 -7
- package/dist/menu.esm.js.map +1 -1
- package/dist/styles.css +222 -4
- package/package.json +13 -13
package/dist/styles.css
CHANGED
|
@@ -4,6 +4,12 @@
|
|
|
4
4
|
--components-menu-breadcrumb-contrast-text:#ffffff;
|
|
5
5
|
--components-menu-breadcrumb-standard-icon:#181c56;
|
|
6
6
|
--components-menu-breadcrumb-standard-text:#181c56;
|
|
7
|
+
--components-menu-logo-contrast-entur-line:#ff5959;
|
|
8
|
+
--components-menu-logo-contrast-entur-text:#ffffff;
|
|
9
|
+
--components-menu-logo-contrast-productname-text:#ff5959;
|
|
10
|
+
--components-menu-logo-standard-entur-line:#ff5959;
|
|
11
|
+
--components-menu-logo-standard-entur-text:#181c56;
|
|
12
|
+
--components-menu-logo-standard-productname-text:#ff5959;
|
|
7
13
|
--components-menu-navigationbar-contrast-background:#393d79;
|
|
8
14
|
--components-menu-navigationbar-contrast-divide:rgba(255, 255, 255, 0);
|
|
9
15
|
--components-menu-navigationbar-contrast-icon-selected:#ffffff;
|
|
@@ -101,6 +107,12 @@
|
|
|
101
107
|
--components-menu-breadcrumb-contrast-text:#e5e5e9;
|
|
102
108
|
--components-menu-breadcrumb-standard-icon:#e5e5e9;
|
|
103
109
|
--components-menu-breadcrumb-standard-text:#e5e5e9;
|
|
110
|
+
--components-menu-logo-contrast-entur-line:#ff5959;
|
|
111
|
+
--components-menu-logo-contrast-entur-text:#ffffff;
|
|
112
|
+
--components-menu-logo-contrast-productname-text:#ff5959;
|
|
113
|
+
--components-menu-logo-standard-entur-line:#ff5959;
|
|
114
|
+
--components-menu-logo-standard-entur-text:#ffffff;
|
|
115
|
+
--components-menu-logo-standard-productname-text:#ff5959;
|
|
104
116
|
--components-menu-navigationbar-contrast-background:#393a49;
|
|
105
117
|
--components-menu-navigationbar-contrast-divide:rgba(255, 255, 255, 0);
|
|
106
118
|
--components-menu-navigationbar-contrast-icon-selected:#e5e5e9;
|
|
@@ -332,6 +344,161 @@
|
|
|
332
344
|
--basecolors-text-subdued:#b3b4bd;
|
|
333
345
|
--basecolors-text-subduedalt:#b3b4bd;
|
|
334
346
|
}
|
|
347
|
+
/*
|
|
348
|
+
* Typography Display Modes
|
|
349
|
+
*
|
|
350
|
+
* This system allows you to control typography scaling based on view size.
|
|
351
|
+
* Use the vie-mode attribute to switch between different typography scales:
|
|
352
|
+
*
|
|
353
|
+
* - Compact: [data-view-mode='compact'] or no attribute (responsive)
|
|
354
|
+
* - Display: [data-view-mode='display'] for big screens, kiosks, etc.
|
|
355
|
+
*
|
|
356
|
+
* Usage:
|
|
357
|
+
* <html data-view-mode="display"> or <div data-view-mode="display">
|
|
358
|
+
*
|
|
359
|
+
* The system automatically handles responsive behavior within each mode.
|
|
360
|
+
*/
|
|
361
|
+
:root,
|
|
362
|
+
[data-view-mode=standard]{
|
|
363
|
+
/* number */
|
|
364
|
+
--font-line-height-body-xs:var(--size-8);
|
|
365
|
+
--font-line-height-body-s:var(--size-9);
|
|
366
|
+
--font-line-height-body-m:var(--size-10);
|
|
367
|
+
--font-line-height-body-lg:var(--size-11);
|
|
368
|
+
--font-line-height-body-xl:var(--size-12);
|
|
369
|
+
--font-line-height-heading-xs:var(--size-8);
|
|
370
|
+
--font-line-height-heading-s:var(--size-9);
|
|
371
|
+
--font-line-height-heading-m:var(--size-10);
|
|
372
|
+
--font-line-height-heading-lg:var(--size-11);
|
|
373
|
+
--font-line-height-heading-xl:var(--size-13);
|
|
374
|
+
--font-line-height-heading-2xl:var(--size-15);
|
|
375
|
+
--font-line-height-label-s:var(--size-8);
|
|
376
|
+
--font-line-height-label-m:var(--size-9);
|
|
377
|
+
--font-line-height-label-lg:var(--size-10);
|
|
378
|
+
--font-paragraph-spacing-body-xs:var(--size-5);
|
|
379
|
+
--font-paragraph-spacing-body-s:var(--size-6);
|
|
380
|
+
--font-paragraph-spacing-body-m:var(--size-8);
|
|
381
|
+
--font-paragraph-spacing-body-lg:var(--size-10);
|
|
382
|
+
--font-paragraph-spacing-body-xl:var(--size-10);
|
|
383
|
+
--font-paragraph-spacing-heading-xs:var(--size-5);
|
|
384
|
+
--font-paragraph-spacing-heading-m:var(--size-6);
|
|
385
|
+
--font-paragraph-spacing-heading-s:var(--size-6);
|
|
386
|
+
--font-paragraph-spacing-heading-lg:var(--size-8);
|
|
387
|
+
--font-paragraph-spacing-heading-xl:var(--size-9);
|
|
388
|
+
--font-paragraph-spacing-heading-2xl:var(--size-10);
|
|
389
|
+
--font-size-body-xs:var(--size-6);
|
|
390
|
+
--font-size-body-s:var(--size-7);
|
|
391
|
+
--font-size-body-m:var(--size-8);
|
|
392
|
+
--font-size-body-lg:var(--size-9);
|
|
393
|
+
--font-size-body-xl:var(--size-10);
|
|
394
|
+
--font-size-heading-xs:var(--size-7);
|
|
395
|
+
--font-size-heading-s:var(--size-8);
|
|
396
|
+
--font-size-heading-m:var(--size-9);
|
|
397
|
+
--font-size-heading-lg:var(--size-10);
|
|
398
|
+
--font-size-heading-xl:var(--size-12);
|
|
399
|
+
--font-size-heading-2xl:var(--size-14);
|
|
400
|
+
--font-size-label-s:var(--size-7);
|
|
401
|
+
--font-size-label-m:var(--size-8);
|
|
402
|
+
--font-size-label-lg:var(--size-9);
|
|
403
|
+
/* string */
|
|
404
|
+
--font-family-nationale:nationale;
|
|
405
|
+
--font-weight-body:500;
|
|
406
|
+
--font-weight-heading:600;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
[data-view-mode=compact]{
|
|
410
|
+
/* number */
|
|
411
|
+
--font-line-height-body-xs:var(--size-8);
|
|
412
|
+
--font-line-height-body-s:var(--size-9);
|
|
413
|
+
--font-line-height-body-lg:var(--size-10);
|
|
414
|
+
--font-line-height-body-m:var(--size-10);
|
|
415
|
+
--font-line-height-body-xl:var(--size-11);
|
|
416
|
+
--font-line-height-heading-s:var(--size-8);
|
|
417
|
+
--font-line-height-heading-xs:var(--size-8);
|
|
418
|
+
--font-line-height-heading-m:var(--size-9);
|
|
419
|
+
--font-line-height-heading-lg:var(--size-10);
|
|
420
|
+
--font-line-height-heading-xl:var(--size-11);
|
|
421
|
+
--font-line-height-heading-2xl:var(--size-12);
|
|
422
|
+
--font-line-height-label-m:var(--size-8);
|
|
423
|
+
--font-line-height-label-s:var(--size-8);
|
|
424
|
+
--font-line-height-label-lg:var(--size-9);
|
|
425
|
+
--font-paragraph-spacing-body-xs:var(--size-5);
|
|
426
|
+
--font-paragraph-spacing-body-s:var(--size-6);
|
|
427
|
+
--font-paragraph-spacing-body-m:var(--size-8);
|
|
428
|
+
--font-paragraph-spacing-body-lg:var(--size-9);
|
|
429
|
+
--font-paragraph-spacing-body-xl:var(--size-9);
|
|
430
|
+
--font-paragraph-spacing-heading-s:var(--size-5);
|
|
431
|
+
--font-paragraph-spacing-heading-xs:var(--size-5);
|
|
432
|
+
--font-paragraph-spacing-heading-lg:var(--size-6);
|
|
433
|
+
--font-paragraph-spacing-heading-m:var(--size-6);
|
|
434
|
+
--font-paragraph-spacing-heading-2xl:var(--size-8);
|
|
435
|
+
--font-paragraph-spacing-heading-xl:var(--size-8);
|
|
436
|
+
--font-size-body-xs:var(--size-6);
|
|
437
|
+
--font-size-body-s:var(--size-7);
|
|
438
|
+
--font-size-body-lg:var(--size-8);
|
|
439
|
+
--font-size-body-m:var(--size-8);
|
|
440
|
+
--font-size-body-xl:var(--size-9);
|
|
441
|
+
--font-size-heading-xs:var(--size-6);
|
|
442
|
+
--font-size-heading-s:var(--size-7);
|
|
443
|
+
--font-size-heading-m:var(--size-8);
|
|
444
|
+
--font-size-heading-lg:var(--size-9);
|
|
445
|
+
--font-size-heading-xl:var(--size-10);
|
|
446
|
+
--font-size-heading-2xl:var(--size-11);
|
|
447
|
+
--font-size-label-s:var(--size-7);
|
|
448
|
+
--font-size-label-m:var(--size-8);
|
|
449
|
+
--font-size-label-lg:var(--size-9);
|
|
450
|
+
/* string */
|
|
451
|
+
--font-family-nationale:nationale;
|
|
452
|
+
--font-weight-body:500;
|
|
453
|
+
--font-weight-heading:600;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
[data-view-mode=display]{
|
|
457
|
+
/* number */
|
|
458
|
+
--font-line-height-body-xs:var(--size-11);
|
|
459
|
+
--font-line-height-body-s:var(--size-12);
|
|
460
|
+
--font-line-height-body-m:var(--size-15);
|
|
461
|
+
--font-line-height-body-lg:var(--size-18);
|
|
462
|
+
--font-line-height-body-xl:var(--size-19);
|
|
463
|
+
--font-line-height-heading-xs:var(--size-11);
|
|
464
|
+
--font-line-height-heading-s:var(--size-13);
|
|
465
|
+
--font-line-height-heading-m:var(--size-15);
|
|
466
|
+
--font-line-height-heading-lg:var(--size-18);
|
|
467
|
+
--font-line-height-heading-xl:var(--size-20);
|
|
468
|
+
--font-line-height-heading-2xl:var(--size-21);
|
|
469
|
+
--font-line-height-label-s:var(--size-11);
|
|
470
|
+
--font-line-height-label-m:var(--size-13);
|
|
471
|
+
--font-line-height-label-lg:var(--size-15);
|
|
472
|
+
--font-paragraph-spacing-body-xs:var(--size-9);
|
|
473
|
+
--font-paragraph-spacing-body-s:var(--size-10);
|
|
474
|
+
--font-paragraph-spacing-body-m:var(--size-12);
|
|
475
|
+
--font-paragraph-spacing-body-lg:var(--size-14);
|
|
476
|
+
--font-paragraph-spacing-body-xl:var(--size-16);
|
|
477
|
+
--font-paragraph-spacing-heading-xs:var(--size-6);
|
|
478
|
+
--font-paragraph-spacing-heading-s:var(--size-8);
|
|
479
|
+
--font-paragraph-spacing-heading-m:var(--size-9);
|
|
480
|
+
--font-paragraph-spacing-heading-lg:var(--size-10);
|
|
481
|
+
--font-paragraph-spacing-heading-xl:var(--size-12);
|
|
482
|
+
--font-paragraph-spacing-heading-2xl:var(--size-13);
|
|
483
|
+
--font-size-body-xs:var(--size-9);
|
|
484
|
+
--font-size-body-s:var(--size-10);
|
|
485
|
+
--font-size-body-m:var(--size-12);
|
|
486
|
+
--font-size-body-lg:var(--size-14);
|
|
487
|
+
--font-size-body-xl:var(--size-16);
|
|
488
|
+
--font-size-heading-xs:var(--size-10);
|
|
489
|
+
--font-size-heading-s:var(--size-12);
|
|
490
|
+
--font-size-heading-m:var(--size-14);
|
|
491
|
+
--font-size-heading-lg:var(--size-16);
|
|
492
|
+
--font-size-heading-xl:var(--size-19);
|
|
493
|
+
--font-size-heading-2xl:var(--size-20);
|
|
494
|
+
--font-size-label-s:var(--size-10);
|
|
495
|
+
--font-size-label-m:var(--size-12);
|
|
496
|
+
--font-size-label-lg:var(--size-14);
|
|
497
|
+
/* string */
|
|
498
|
+
--font-family-nationale:nationale;
|
|
499
|
+
--font-weight-body:500;
|
|
500
|
+
--font-weight-heading:600;
|
|
501
|
+
}
|
|
335
502
|
|
|
336
503
|
:root{
|
|
337
504
|
--eds-menu:1;
|
|
@@ -434,6 +601,57 @@
|
|
|
434
601
|
}
|
|
435
602
|
.eds-breadcrumbs__separator{
|
|
436
603
|
margin:0 0.25rem 0 0.25rem;
|
|
604
|
+
}.eds-logo{
|
|
605
|
+
--eds-logo-svg-height:2rem;
|
|
606
|
+
--eds-logo-text-size:2rem;
|
|
607
|
+
--eds-logo-text-padding-top:0.375rem;
|
|
608
|
+
display:-webkit-inline-box;
|
|
609
|
+
display:-webkit-inline-flex;
|
|
610
|
+
display:-moz-inline-box;
|
|
611
|
+
display:inline-flex;
|
|
612
|
+
-webkit-box-align:start;
|
|
613
|
+
-webkit-align-items:flex-start;
|
|
614
|
+
-moz-box-align:start;
|
|
615
|
+
align-items:flex-start;
|
|
616
|
+
-webkit-text-decoration:none;
|
|
617
|
+
text-decoration:none;
|
|
618
|
+
gap:0.75rem;
|
|
619
|
+
}
|
|
620
|
+
.eds-logo--small{
|
|
621
|
+
--eds-logo-svg-height:1.5rem;
|
|
622
|
+
--eds-logo-text-size:1.5rem;
|
|
623
|
+
--eds-logo-text-padding-top:0.281rem;
|
|
624
|
+
}
|
|
625
|
+
.eds-logo__svg{
|
|
626
|
+
-webkit-flex-shrink:0;
|
|
627
|
+
flex-shrink:0;
|
|
628
|
+
height:var(--eds-logo-svg-height);
|
|
629
|
+
width:auto;
|
|
630
|
+
}
|
|
631
|
+
.eds-logo__entur-letter{
|
|
632
|
+
fill:var(--components-menu-logo-standard-entur-text);
|
|
633
|
+
}
|
|
634
|
+
:where(.eds-contrast .eds-logo) .eds-logo__entur-letter{
|
|
635
|
+
fill:var(--components-menu-logo-contrast-entur-text);
|
|
636
|
+
}
|
|
637
|
+
.eds-logo__entur-bar{
|
|
638
|
+
fill:var(--components-menu-logo-standard-entur-line);
|
|
639
|
+
}
|
|
640
|
+
.eds-logo__product-name{
|
|
641
|
+
color:var(--components-menu-logo-standard-productname-text);
|
|
642
|
+
font-weight:var(--font-weight-body);
|
|
643
|
+
font-size:var(--eds-logo-text-size);
|
|
644
|
+
padding-top:var(--eds-logo-text-padding-top);
|
|
645
|
+
line-height:1;
|
|
646
|
+
white-space:nowrap;
|
|
647
|
+
}
|
|
648
|
+
.eds-logo:focus-visible{
|
|
649
|
+
outline:2px solid #181c56;
|
|
650
|
+
outline-color:var(--basecolors-stroke-focus-standard);
|
|
651
|
+
outline-offset:0.125rem;
|
|
652
|
+
}
|
|
653
|
+
.eds-contrast .eds-logo:focus-visible{
|
|
654
|
+
outline-color:var(--basecolors-stroke-focus-contrast);
|
|
437
655
|
}.eds-overflow-menu__menu-list{
|
|
438
656
|
-webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
439
657
|
-moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
@@ -1117,7 +1335,7 @@
|
|
|
1117
1335
|
background:var(--line-color);
|
|
1118
1336
|
position:relative;
|
|
1119
1337
|
}
|
|
1120
|
-
.eds-stepper__step__line
|
|
1338
|
+
.eds-stepper__step__line::before{
|
|
1121
1339
|
display:var(--display-active-line);
|
|
1122
1340
|
content:"";
|
|
1123
1341
|
position:absolute;
|
|
@@ -1140,10 +1358,10 @@
|
|
|
1140
1358
|
-o-transform:rotate(45deg);
|
|
1141
1359
|
transform:rotate(45deg);
|
|
1142
1360
|
}
|
|
1143
|
-
.eds-contrast .eds-stepper__step__line
|
|
1361
|
+
.eds-contrast .eds-stepper__step__line::before{
|
|
1144
1362
|
background:var(--components-menu-stepper-contrast-progressbar);
|
|
1145
1363
|
}
|
|
1146
|
-
.eds-stepper__step__line
|
|
1364
|
+
.eds-stepper__step__line::after{
|
|
1147
1365
|
display:var(--display-active-line);
|
|
1148
1366
|
content:"";
|
|
1149
1367
|
position:absolute;
|
|
@@ -1153,7 +1371,7 @@
|
|
|
1153
1371
|
height:0.5rem;
|
|
1154
1372
|
background:var(--components-menu-stepper-standard-progressbar);
|
|
1155
1373
|
}
|
|
1156
|
-
.eds-contrast .eds-stepper__step__line
|
|
1374
|
+
.eds-contrast .eds-stepper__step__line::after{
|
|
1157
1375
|
background:var(--components-menu-stepper-contrast-progressbar);
|
|
1158
1376
|
}.eds-top-navigation-item{
|
|
1159
1377
|
--show-active-line:0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/menu",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0-next.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/menu.cjs.js",
|
|
6
6
|
"module": "dist/menu.esm.js",
|
|
@@ -22,24 +22,24 @@
|
|
|
22
22
|
"test": "jest"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"react": ">=
|
|
26
|
-
"react-dom": ">=
|
|
25
|
+
"react": ">=18.0.0",
|
|
26
|
+
"react-dom": ">=18.0.0"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@entur/a11y": "^0.
|
|
30
|
-
"@entur/button": "^
|
|
31
|
-
"@entur/expand": "^
|
|
32
|
-
"@entur/icons": "^
|
|
33
|
-
"@entur/tokens": "^3.
|
|
34
|
-
"@entur/tooltip": "^
|
|
35
|
-
"@entur/typography": "^
|
|
36
|
-
"@entur/utils": "^0.
|
|
29
|
+
"@entur/a11y": "^1.0.0-next.0",
|
|
30
|
+
"@entur/button": "^5.0.0-next.0",
|
|
31
|
+
"@entur/expand": "^4.0.0-next.0",
|
|
32
|
+
"@entur/icons": "^10.0.0-next.0",
|
|
33
|
+
"@entur/tokens": "^3.24.1-next.0",
|
|
34
|
+
"@entur/tooltip": "^6.0.0-next.0",
|
|
35
|
+
"@entur/typography": "^3.0.0-next.0",
|
|
36
|
+
"@entur/utils": "^1.0.0-next.0",
|
|
37
37
|
"@floating-ui/react": "^0.26.28",
|
|
38
38
|
"classnames": "^2.5.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@testing-library/jest-dom": "^5.17.0",
|
|
42
|
-
"@testing-library/react": "^
|
|
42
|
+
"@testing-library/react": "^16.3.0",
|
|
43
43
|
"@testing-library/user-event": "14.6.1",
|
|
44
44
|
"@vitejs/plugin-react": "^5.0.1",
|
|
45
45
|
"jest": "^29.0.0",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"vite": "^7.3.2",
|
|
50
50
|
"vite-plugin-dts": "^4.5.4"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "0f435bdeec98cc3cea1db7434b13b1f771a39a18"
|
|
53
53
|
}
|