@openeuropa/bcl-subscription 0.25.1 → 0.26.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.
@@ -8,7 +8,7 @@ exports[`OE - Subscription renders correctly 1`] = `
8
8
  <!-- navbar_settings -->
9
9
  <nav
10
10
  aria-label="Top Navigation"
11
- class="w-100 shadow-sm navbar navbar-expand-lg navbar-light"
11
+ class="w-100 shadow-sm bcl-header__top-navbar navbar navbar-expand-lg navbar-light"
12
12
  >
13
13
  <div
14
14
  class="container"
@@ -28,62 +28,72 @@ exports[`OE - Subscription renders correctly 1`] = `
28
28
  src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg"
29
29
  />
30
30
  </a>
31
- <ul
32
- class="nav"
31
+ <button
32
+ aria-controls="topNavbarDropdown"
33
+ aria-expanded="false"
34
+ aria-label="Toggle navigation"
35
+ class="navbar-toggler"
36
+ data-bs-target="#topNavbarDropdown"
37
+ data-bs-toggle="collapse"
38
+ type="button"
33
39
  >
34
- <li
35
- class="nav-item"
40
+ <span
41
+ class="navbar-toggler-icon"
42
+ />
43
+ </button>
44
+ <div
45
+ class="collapse navbar-collapse"
46
+ id="topNavbarDropdown"
47
+ >
48
+ <ul
49
+ class="nav"
36
50
  >
37
- <a
38
- class="text-center nav-link"
39
- data-bs-target="#languageModal"
40
- data-bs-toggle="modal"
41
- href="/example.html"
51
+ <li
52
+ class="nav-item"
42
53
  >
43
- <svg
44
- class="me-lg-2-5 bi icon--xs"
45
- >
46
- <use
47
- xlink:href="/icons.svg#chat-left-dots-fill"
48
- />
49
- </svg>
50
- <span
51
- class="d-block d-lg-inline-block"
54
+ <a
55
+ class="nav-link"
56
+ data-bs-target="#languageModal"
57
+ data-bs-toggle="modal"
58
+ href="/example.html"
52
59
  >
60
+ <svg
61
+ class="me-2-5 bi icon--xs"
62
+ >
63
+ <use
64
+ xlink:href="/icons.svg#chat-left-dots-fill"
65
+ />
66
+ </svg>
53
67
  English
54
- </span>
55
- </a>
56
- </li>
57
- <li
58
- class="nav-item"
59
- >
60
- <a
61
- class="text-center nav-link"
62
- data-bs-target="#loginModal"
63
- data-bs-toggle="modal"
64
- href="/example.html"
68
+ </a>
69
+ </li>
70
+ <li
71
+ class="nav-item"
65
72
  >
66
- <svg
67
- class="me-lg-2-5 bi icon--xs"
68
- >
69
- <use
70
- xlink:href="/icons.svg#person-fill"
71
- />
72
- </svg>
73
- <span
74
- class="d-block d-lg-inline-block"
73
+ <a
74
+ class="nav-link"
75
+ data-bs-target="#loginModal"
76
+ data-bs-toggle="modal"
77
+ href="/example.html"
75
78
  >
79
+ <svg
80
+ class="me-2-5 bi icon--xs"
81
+ >
82
+ <use
83
+ xlink:href="/icons.svg#person-fill"
84
+ />
85
+ </svg>
76
86
  Log in
77
- </span>
78
- </a>
79
- </li>
80
- </ul>
87
+ </a>
88
+ </li>
89
+ </ul>
90
+ </div>
81
91
  </div>
82
92
  </nav>
83
93
  <!-- project name -->
84
94
  <!-- navbar -->
85
95
  <nav
86
- aria-label="main-navigation"
96
+ aria-label="Main Navigation"
87
97
  class="bcl-header__navbar navbar navbar-expand-lg navbar-dark"
88
98
  >
89
99
  <div
@@ -114,7 +124,6 @@ exports[`OE - Subscription renders correctly 1`] = `
114
124
  >
115
125
  <a
116
126
  aria-current="page"
117
- aria-label="homepage"
118
127
  class="nav-link active"
119
128
  href="/example.html"
120
129
  >
@@ -148,7 +157,7 @@ exports[`OE - Subscription renders correctly 1`] = `
148
157
  aria-expanded="false"
149
158
  class="nav-link dropdown-toggle"
150
159
  data-bs-toggle="dropdown"
151
- href="/example.html"
160
+ href="#"
152
161
  id="navbarDropdownMenuLink"
153
162
  role="button"
154
163
  >
@@ -182,6 +191,14 @@ exports[`OE - Subscription renders correctly 1`] = `
182
191
  Something else here
183
192
  </a>
184
193
  </li>
194
+ <li>
195
+ <a
196
+ class="dropdown-item"
197
+ href="/example.html"
198
+ >
199
+ Very long label with custom text and custom link as an example
200
+ </a>
201
+ </li>
185
202
  </ul>
186
203
  </li>
187
204
  </ul>
@@ -237,7 +254,6 @@ exports[`OE - Subscription renders correctly 1`] = `
237
254
  class="breadcrumb-item d-none d-md-block"
238
255
  >
239
256
  <a
240
- aria-label="homepage"
241
257
  href="/example.html"
242
258
  >
243
259
  Home
@@ -352,12 +368,12 @@ exports[`OE - Subscription renders correctly 1`] = `
352
368
  <div
353
369
  aria-hidden="true"
354
370
  aria-label="languageModalLabel"
355
- class="bcl-language-list-modal bcl-language-list-modal--neutral modal fade"
371
+ class="bcl-language-list-modal bcl-language-list-modal--eu modal fade"
356
372
  id="languageModal"
357
373
  tabindex="-1"
358
374
  >
359
375
  <div
360
- class="modal-dialog modal-xl modal-fullscreen-md-down"
376
+ class="modal-dialog modal-fullscreen"
361
377
  >
362
378
  <div
363
379
  class="modal-content"
@@ -366,249 +382,335 @@ exports[`OE - Subscription renders correctly 1`] = `
366
382
  class="modal-header"
367
383
  >
368
384
  <div
369
- class="d-flex align-items-center"
385
+ class="container"
370
386
  >
371
- <svg
372
- class="bi icon--s"
373
- >
374
- <use
375
- xlink:href="/icons.svg#globe2"
376
- />
377
- </svg>
378
- <h5
379
- class="mb-0 ms-2"
387
+ <div
388
+ class="border-bottom mx-n3 px-3 px-md-0 pt-md-4-5"
380
389
  >
381
- Select your language
382
- </h5>
390
+ <div
391
+ class="py-3-5 px-3 px-sm-0 px-md-3"
392
+ >
393
+ <div
394
+ class="d-flex justify-content-between align-items-center"
395
+ >
396
+ <div
397
+ class="d-flex align-items-center"
398
+ >
399
+ <svg
400
+ class="bi icon--s"
401
+ >
402
+ <use
403
+ xlink:href="/icons.svg#globe2"
404
+ />
405
+ </svg>
406
+ <h5
407
+ class="mb-0 ms-2"
408
+ >
409
+ Select your language
410
+ </h5>
411
+ </div>
412
+ <button
413
+ aria-label="Close"
414
+ class="btn-close"
415
+ data-bs-dismiss="modal"
416
+ type="button"
417
+ />
418
+ </div>
419
+ </div>
420
+ </div>
383
421
  </div>
384
- <button
385
- aria-label="Close"
386
- class="btn-close"
387
- data-bs-dismiss="modal"
388
- type="button"
389
- />
390
422
  </div>
391
423
  <div
392
424
  class="modal-body"
393
425
  >
394
426
  <div
395
- class="bcl-language-list bcl-language-list--neutral"
427
+ class="bcl-language-list bcl-language-list--eu"
396
428
  >
397
429
  <div
398
430
  class="main pt-4"
399
431
  >
400
432
  <div
401
- class="pb-2"
433
+ class="container"
402
434
  >
403
435
  <div
404
- class="row"
436
+ class="pb-2"
405
437
  >
438
+ <h5
439
+ class="mb-4"
440
+ >
441
+ EU official languages
442
+ </h5>
406
443
  <div
407
- class="col-12 col-md"
444
+ class="row"
408
445
  >
409
- <a
410
- class="w-100 mb-2-5 btn justify-content-start"
411
- href="#"
412
- hreflang="bg"
413
- lang="bg"
414
- >
415
- български
416
- </a>
417
- <a
418
- class="w-100 mb-2-5 btn justify-content-start"
419
- href="#"
420
- hreflang="es"
421
- lang="es"
422
- >
423
- español
424
- </a>
425
- <a
426
- class="w-100 mb-2-5 btn justify-content-start"
427
- href="#"
428
- hreflang="cs"
429
- lang="cs"
430
- >
431
- čeština
432
- </a>
433
- <a
434
- class="w-100 mb-2-5 btn justify-content-start"
435
- href="#"
436
- hreflang="da"
437
- lang="da"
438
- >
439
- dansk
440
- </a>
441
- <a
442
- class="w-100 mb-2-5 btn justify-content-start"
443
- href="#"
444
- hreflang="de"
445
- lang="de"
446
- >
447
- Deutsch
448
- </a>
449
- <a
450
- class="w-100 mb-2-5 btn justify-content-start"
451
- href="#"
452
- hreflang="et"
453
- lang="et"
454
- >
455
- eesti
456
- </a>
457
- <a
458
- class="w-100 mb-2-5 btn justify-content-start"
459
- href="#"
460
- hreflang="el"
461
- lang="el"
462
- >
463
- ελληνικά
464
- </a>
465
- <a
466
- class="w-100 mb-2-5 btn selected justify-content-between"
467
- href="#"
468
- hreflang="en"
469
- lang="en"
446
+ <div
447
+ class="col-12 col-md"
470
448
  >
471
- English
472
- <svg
473
- class="ms-2-5 bi icon--s"
449
+ <a
450
+ class="w-100 mb-2-5 btn justify-content-start"
451
+ href="/example.html#bg"
452
+ hreflang="bg"
453
+ lang="bg"
474
454
  >
475
- <use
476
- xlink:href="/icons.svg#check2"
477
- />
478
- </svg>
479
- </a>
480
- <a
481
- class="w-100 mb-2-5 btn justify-content-start"
482
- href="#"
483
- hreflang="fr"
484
- lang="fr"
485
- >
486
- français
487
- </a>
488
- <a
489
- class="w-100 mb-2-5 btn justify-content-start"
490
- href="#"
491
- hreflang="ga"
492
- lang="ga"
493
- >
494
- Gaeilge
495
- </a>
496
- <a
497
- class="w-100 mb-2-5 btn justify-content-start"
498
- href="#"
499
- hreflang="hr"
500
- lang="hr"
501
- >
502
- hrvatski
503
- </a>
504
- <a
505
- class="w-100 mb-2-5 btn justify-content-start"
506
- href="#"
507
- hreflang="it"
508
- lang="it"
455
+ български
456
+ </a>
457
+ <a
458
+ class="w-100 mb-2-5 btn justify-content-start"
459
+ href="/example.html#es"
460
+ hreflang="es"
461
+ lang="es"
462
+ >
463
+ español
464
+ </a>
465
+ <a
466
+ class="w-100 mb-2-5 btn justify-content-start"
467
+ href="/example.html#cs"
468
+ hreflang="cs"
469
+ lang="cs"
470
+ >
471
+ čeština
472
+ </a>
473
+ <a
474
+ class="w-100 mb-2-5 btn justify-content-start"
475
+ href="/example.html#da"
476
+ hreflang="da"
477
+ lang="da"
478
+ >
479
+ dansk
480
+ </a>
481
+ <a
482
+ class="w-100 mb-2-5 btn justify-content-start"
483
+ href="/example.html#de"
484
+ hreflang="de"
485
+ lang="de"
486
+ >
487
+ Deutsch
488
+ </a>
489
+ <a
490
+ class="w-100 mb-2-5 btn justify-content-start"
491
+ href="/example.html#et"
492
+ hreflang="et"
493
+ lang="et"
494
+ >
495
+ eesti
496
+ </a>
497
+ <a
498
+ class="w-100 mb-2-5 btn justify-content-start"
499
+ href="/example.html#el"
500
+ hreflang="el"
501
+ lang="el"
502
+ >
503
+ ελληνικά
504
+ </a>
505
+ <a
506
+ class="w-100 mb-2-5 btn selected justify-content-between"
507
+ href="/example.html#en"
508
+ hreflang="en"
509
+ lang="en"
510
+ >
511
+ English
512
+ <svg
513
+ class="ms-2-5 bi icon--s"
514
+ >
515
+ <use
516
+ xlink:href="/icons.svg#check2"
517
+ />
518
+ </svg>
519
+ </a>
520
+ <a
521
+ class="w-100 mb-2-5 btn justify-content-start"
522
+ href="/example.html#fr"
523
+ hreflang="fr"
524
+ lang="fr"
525
+ >
526
+ français
527
+ </a>
528
+ <a
529
+ class="w-100 mb-2-5 btn justify-content-start"
530
+ href="/example.html#ga"
531
+ hreflang="ga"
532
+ lang="ga"
533
+ >
534
+ Gaeilge
535
+ </a>
536
+ <a
537
+ class="w-100 mb-2-5 btn justify-content-start"
538
+ href="/example.html#hr"
539
+ hreflang="hr"
540
+ lang="hr"
541
+ >
542
+ hrvatski
543
+ </a>
544
+ <a
545
+ class="w-100 mb-2-5 btn justify-content-start"
546
+ href="/example.html#it"
547
+ hreflang="it"
548
+ lang="it"
549
+ >
550
+ italiano
551
+ </a>
552
+ </div>
553
+ <div
554
+ class="col-12 col-md"
509
555
  >
510
- italiano
511
- </a>
556
+ <a
557
+ class="w-100 mb-2-5 btn justify-content-start"
558
+ href="/example.html#lv"
559
+ hreflang="lv"
560
+ lang="lv"
561
+ >
562
+ latviešu
563
+ </a>
564
+ <a
565
+ class="w-100 mb-2-5 btn justify-content-start"
566
+ href="/example.html#lt"
567
+ hreflang="lt"
568
+ lang="lt"
569
+ >
570
+ lietuvių
571
+ </a>
572
+ <a
573
+ class="w-100 mb-2-5 btn justify-content-start"
574
+ href="/example.html#hu"
575
+ hreflang="hu"
576
+ lang="hu"
577
+ >
578
+ magyar
579
+ </a>
580
+ <a
581
+ class="w-100 mb-2-5 btn justify-content-start"
582
+ href="/example.html#mt"
583
+ hreflang="mt"
584
+ lang="mt"
585
+ >
586
+ Malti
587
+ </a>
588
+ <a
589
+ class="w-100 mb-2-5 btn justify-content-start"
590
+ href="/example.html#nl"
591
+ hreflang="nl"
592
+ lang="nl"
593
+ >
594
+ Nederlands
595
+ </a>
596
+ <a
597
+ class="w-100 mb-2-5 btn justify-content-start"
598
+ href="/example.html#pl"
599
+ hreflang="pl"
600
+ lang="pl"
601
+ >
602
+ polski
603
+ </a>
604
+ <a
605
+ class="w-100 mb-2-5 btn justify-content-start"
606
+ href="/example.html#pt"
607
+ hreflang="pt"
608
+ lang="pt"
609
+ >
610
+ português
611
+ </a>
612
+ <a
613
+ class="w-100 mb-2-5 btn justify-content-start"
614
+ href="/example.html#ro"
615
+ hreflang="ro"
616
+ lang="ro"
617
+ >
618
+ română
619
+ </a>
620
+ <a
621
+ class="w-100 mb-2-5 btn justify-content-start"
622
+ href="/example.html#sk"
623
+ hreflang="sk"
624
+ lang="sk"
625
+ >
626
+ slovenčina
627
+ </a>
628
+ <a
629
+ class="w-100 mb-2-5 btn justify-content-start"
630
+ href="/example.html#sl"
631
+ hreflang="sl"
632
+ lang="sl"
633
+ >
634
+ slovenščina
635
+ </a>
636
+ <a
637
+ class="w-100 mb-2-5 btn justify-content-start"
638
+ href="/example.html#fi"
639
+ hreflang="fi"
640
+ lang="fi"
641
+ >
642
+ suomi
643
+ </a>
644
+ <a
645
+ class="w-100 mb-2-5 btn justify-content-start"
646
+ href="/example.html#sv"
647
+ hreflang="sv"
648
+ lang="sv"
649
+ >
650
+ svenska
651
+ </a>
652
+ </div>
512
653
  </div>
654
+ </div>
655
+ <div
656
+ class="pb-2"
657
+ >
658
+ <h5
659
+ class="mb-4"
660
+ >
661
+ Other languages
662
+ </h5>
513
663
  <div
514
- class="col-12 col-md"
664
+ class="row"
515
665
  >
516
- <a
517
- class="w-100 mb-2-5 btn justify-content-start"
518
- href="#"
519
- hreflang="lv"
520
- lang="lv"
521
- >
522
- latviešu
523
- </a>
524
- <a
525
- class="w-100 mb-2-5 btn justify-content-start"
526
- href="#"
527
- hreflang="lt"
528
- lang="lt"
529
- >
530
- lietuvių
531
- </a>
532
- <a
533
- class="w-100 mb-2-5 btn justify-content-start"
534
- href="#"
535
- hreflang="hu"
536
- lang="hu"
537
- >
538
- magyar
539
- </a>
540
- <a
541
- class="w-100 mb-2-5 btn justify-content-start"
542
- href="#"
543
- hreflang="mt"
544
- lang="mt"
545
- >
546
- Malti
547
- </a>
548
- <a
549
- class="w-100 mb-2-5 btn justify-content-start"
550
- href="#"
551
- hreflang="nl"
552
- lang="nl"
553
- >
554
- Nederlands
555
- </a>
556
- <a
557
- class="w-100 mb-2-5 btn justify-content-start"
558
- href="#"
559
- hreflang="pl"
560
- lang="pl"
561
- >
562
- polski
563
- </a>
564
- <a
565
- class="w-100 mb-2-5 btn justify-content-start"
566
- href="#"
567
- hreflang="pt"
568
- lang="pt"
569
- >
570
- português
571
- </a>
572
- <a
573
- class="w-100 mb-2-5 btn justify-content-start"
574
- href="#"
575
- hreflang="ro"
576
- lang="ro"
577
- >
578
- română
579
- </a>
580
- <a
581
- class="w-100 mb-2-5 btn justify-content-start"
582
- href="#"
583
- hreflang="sk"
584
- lang="sk"
585
- >
586
- slovenčina
587
- </a>
588
- <a
589
- class="w-100 mb-2-5 btn justify-content-start"
590
- href="#"
591
- hreflang="sl"
592
- lang="sl"
593
- >
594
- slovenščina
595
- </a>
596
- <a
597
- class="w-100 mb-2-5 btn justify-content-start"
598
- href="#"
599
- hreflang="fi"
600
- lang="fi"
666
+ <div
667
+ class="col-12 col-md"
601
668
  >
602
- suomi
603
- </a>
604
- <a
605
- class="w-100 mb-2-5 btn justify-content-start"
606
- href="#"
607
- hreflang="sv"
608
- lang="sv"
669
+ <a
670
+ class="w-100 mb-2-5 btn justify-content-start"
671
+ href="/example.html#zh"
672
+ hreflang="zh"
673
+ lang="zh"
674
+ >
675
+ 中文
676
+ </a>
677
+ <a
678
+ class="w-100 mb-2-5 btn justify-content-start"
679
+ href="/example.html#tr"
680
+ hreflang="tr"
681
+ lang="tr"
682
+ >
683
+ Türk
684
+ </a>
685
+ <a
686
+ class="w-100 mb-2-5 btn justify-content-start"
687
+ href="/example.html#ru"
688
+ hreflang="ru"
689
+ lang="ru"
690
+ >
691
+ pусский
692
+ </a>
693
+ </div>
694
+ <div
695
+ class="col-12 col-md"
609
696
  >
610
- svenska
611
- </a>
697
+ <a
698
+ class="w-100 mb-2-5 btn justify-content-start"
699
+ href="/example.html#ca"
700
+ hreflang="ca"
701
+ lang="ca"
702
+ >
703
+ Català
704
+ </a>
705
+ <a
706
+ class="w-100 mb-2-5 btn justify-content-start"
707
+ href="#"
708
+ hreflang="ar"
709
+ lang="ar"
710
+ >
711
+ عَرَبِيّ
712
+ </a>
713
+ </div>
612
714
  </div>
613
715
  </div>
614
716
  </div>
package/package.json CHANGED
@@ -2,13 +2,13 @@
2
2
  "name": "@openeuropa/bcl-subscription",
3
3
  "author": "European Commission",
4
4
  "license": "EUPL-1.2",
5
- "version": "0.25.1",
5
+ "version": "0.26.0",
6
6
  "publishConfig": {
7
7
  "access": "public"
8
8
  },
9
9
  "description": "OE - BCL subscription",
10
10
  "dependencies": {
11
- "@openeuropa/bcl-subscription-block": "^0.25.1"
11
+ "@openeuropa/bcl-subscription-block": "^0.26.0"
12
12
  },
13
13
  "repository": {
14
14
  "type": "git",
@@ -24,5 +24,5 @@
24
24
  "design-system",
25
25
  "twig"
26
26
  ],
27
- "gitHead": "01db3de0765fee0f44e4f202f3ea7d0f2e28f742"
27
+ "gitHead": "94d89cc379780cfce06178959194b3bc1b4c5eda"
28
28
  }
@@ -1,10 +1,9 @@
1
1
  import { withDesign } from "storybook-addon-designs";
2
- import withCode from "@openeuropa/storybook-addon-code";
3
2
  import { within, userEvent } from "@storybook/testing-library";
4
3
  import isChromatic from "chromatic/isChromatic";
5
4
  import { correctPaths, initScrollspy } from "@openeuropa/bcl-story-utils";
6
- import demoData from "@openeuropa/bcl-subscription/data/data";
7
5
 
6
+ import demoData from "@openeuropa/bcl-subscription/data/data";
8
7
  import subscriptionPage from "@openeuropa/bcl-subscription/subscription.html.twig";
9
8
 
10
9
  const chromatic = process.env.STORYBOOK_ENV;
@@ -88,7 +87,7 @@ const errorState = (story) => {
88
87
 
89
88
  export default {
90
89
  title: "Features/Subscription",
91
- decorators: [withCode, withDesign, initScrollspy],
90
+ decorators: [withDesign, initScrollspy],
92
91
  parameters: {
93
92
  layout: "fullscreen",
94
93
  controls: { disable: true },
@@ -1,4 +1,8 @@
1
- import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
1
+ import {
2
+ renderTwigFileAsNode,
3
+ renderTwigFileAsHtml,
4
+ } from "@openeuropa/bcl-test-utils";
5
+ import { axe, toHaveNoViolations } from "jest-axe";
2
6
 
3
7
  import demoData from "@openeuropa/bcl-subscription/data/data";
4
8
 
@@ -6,10 +10,18 @@ const template = "@oe-bcl/bcl-subscription/subscription.html.twig";
6
10
 
7
11
  const render = (params) => renderTwigFileAsNode(template, params, true);
8
12
 
13
+ expect.extend(toHaveNoViolations);
14
+
9
15
  describe("OE - Subscription", () => {
10
16
  test("renders correctly", () => {
11
17
  expect.assertions(1);
12
18
 
13
19
  return expect(render(demoData)).resolves.toMatchSnapshot();
14
20
  });
21
+
22
+ test(`passes the accessibility tests`, async () => {
23
+ expect(
24
+ await axe(renderTwigFileAsHtml(template, demoData))
25
+ ).toHaveNoViolations();
26
+ });
15
27
  });