hr-design-system-handlebars 0.117.13 → 0.117.14

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 (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +225 -197
  3. package/dist/assets/vendor/js/header.alpine.js +0 -257
  4. package/dist/views/components/content_nav/content_nav.hbs +5 -6
  5. package/dist/views/components/content_nav/content_nav_container.hbs +1 -3
  6. package/dist/views/components/content_nav/content_nav_dropdown.hbs +20 -18
  7. package/dist/views/components/content_nav/content_nav_item.hbs +9 -5
  8. package/dist/views/components/content_nav/content_nav_list.hbs +1 -2
  9. package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs +2 -5
  10. package/package.json +1 -1
  11. package/src/assets/css/custom-components.css +119 -1
  12. package/src/assets/vendor/js/header.alpine.js +0 -257
  13. package/src/stories/views/components/content_nav/content_nav.hbs +5 -6
  14. package/src/stories/views/components/content_nav/content_nav_container.hbs +1 -3
  15. package/src/stories/views/components/content_nav/content_nav_dropdown.hbs +20 -18
  16. package/src/stories/views/components/content_nav/content_nav_item.hbs +9 -5
  17. package/src/stories/views/components/content_nav/content_nav_list.hbs +1 -2
  18. package/src/stories/views/components/teaser/content_nav/teaser_content_nav.hbs +2 -5
  19. package/src/stories/views/components/teaser/content_nav/teaser_content_nav.stories.mdx +8 -1
  20. package/dist/assets/vendor/js/content_nav.alpine.js +0 -261
  21. package/src/assets/vendor/js/content_nav.alpine.js +0 -261
package/src/assets/vendor/js/header.alpine.js CHANGED
@@ -395,261 +395,4 @@ document.addEventListener('alpine:init', () => {
395
395
  }
396
396
  },
397
397
  }))
398
-
399
- Alpine.data('contentNavigationHandler', () => ({
400
- open: false,
401
-
402
- shouldDropdownBeShown(teasersize, isDropdown, isMixed) {
403
- if (isDropdown) {
404
- return true
405
- }
406
-
407
- if (isMixed) {
408
- if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
409
- if (this.$screen('lg')) return false
410
- if (this.$screen('md')) return false
411
- if (this.$screen('xs')) return true
412
- } else if (teasersize === 33 || teasersize === 25) {
413
- return true
414
- }
415
- }
416
- },
417
-
418
- shouldContentBeShown(teasersize, isDropdown, isMixed) {
419
- if (isDropdown) {
420
- return this.$store.contentNavDropdownIsOpen
421
- }
422
- if (isMixed) {
423
- if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
424
- if (this.$screen('lg')) return true
425
- if (this.$screen('md')) return true
426
- if (this.$screen('xs')) return this.$store.contentNavDropdownIsOpen
427
- } else if (teasersize === 33 || teasersize === 25) {
428
- return this.$store.contentNavDropdownIsOpen
429
- }
430
- }
431
-
432
- return false
433
- },
434
- chooseListItemStyles(teasersize, isList, isMixed, isDropdown, isFlow) {
435
- let classes = []
436
-
437
- switch (teasersize) {
438
- case 100:
439
- classes.push('w-full', 'md:w-fit')
440
- isList
441
- ? classes.push('border', 'mb-2', 'md:!mr-2', 'hover:no-underline')
442
- : isMixed
443
- ? classes.push(
444
- '!w-full',
445
- 'md:!w-fit',
446
- '!mb-0',
447
- 'md:!mb-2',
448
- 'md:mr-2',
449
- 'border-l-0',
450
- 'border-r-0',
451
- 'border-t-0',
452
- 'border-b',
453
- 'last:border-b-0',
454
- 'md:!border',
455
- 'md:border-blue-congress',
456
- 'border-gray-400',
457
- 'hover:underline',
458
- 'hover:text-blue-congress',
459
- 'hover:!bg-white',
460
- 'hover:!fill-blue-congress',
461
- 'md:hover:no-underline',
462
- 'md:hover:text-white',
463
- 'md:hover:!bg-blue-congress',
464
- 'md:hover:!fill-white'
465
- )
466
- : isDropdown
467
- ? classes.push(
468
- '!w-full',
469
- 'ml-0',
470
- 'md:!w-full',
471
- 'md:mb-0',
472
- 'md:!mr-0',
473
- 'border-gray-400',
474
- 'border-l-0',
475
- 'border-r-0',
476
- 'border-t-0',
477
- 'border-b',
478
- 'last:border-b-0',
479
- 'hover:underline',
480
- 'hover:text-blue-congress',
481
- 'hover:!bg-white',
482
- 'hover:!fill-blue-congress'
483
- )
484
- : isFlow
485
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
486
- : ''
487
- break
488
- case 66:
489
- classes.push('w-fit')
490
- isList == true
491
- ? classes.push('border', 'mb-2', 'mr-2', 'md:!mr-2', 'hover:no-underline')
492
- : isMixed
493
- ? classes.push(
494
- '!w-full',
495
- 'md:!w-fit',
496
- '!mb-0',
497
- 'md:!mb-2',
498
- 'md:mr-2',
499
- 'border-l-0',
500
- 'border-r-0',
501
- 'border-t-0',
502
- 'border-b',
503
- 'last:border-b-0',
504
- 'md:!border',
505
- 'hover:text-blue-congress',
506
- 'hover:!fill-blue-congress',
507
- 'hover:!bg-white',
508
- 'md:hover:!bg-blue-congress',
509
- 'md:hover:!text-white',
510
- 'md:hover:no-underline',
511
- 'md:hover:!fill-white'
512
- )
513
- : isDropdown
514
- ? classes.push(
515
- '!w-full',
516
- 'md:!w-full',
517
- 'md:mb-0',
518
- 'md:!mr-0',
519
- 'border-l-0',
520
- 'border-r-0',
521
- 'border-t-0',
522
- 'border-b',
523
- 'last:border-b-0',
524
- 'hover:underline',
525
- 'hover:text-blue-congress',
526
- 'hover:!bg-white',
527
- 'hover:!fill-blue-congress'
528
- )
529
- : isFlow
530
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
531
- : ''
532
- break
533
- case 50:
534
- classes.push('w-full')
535
- isList
536
- ? classes.push('border', 'mb-2', 'hover:no-underline')
537
- : isMixed
538
- ? classes.push(
539
- '!w-full',
540
- 'border',
541
- 'md:mb-2',
542
- 'last:mb-0',
543
- 'border-gray-400',
544
- 'border-l-0',
545
- 'border-r-0',
546
- 'border-t-0',
547
- 'md:border',
548
- 'md:border-blue-congress',
549
- 'hover:underline',
550
- 'hover:!bg-white',
551
- 'hover:text-blue-congress',
552
- 'hover:fill-blue-congress',
553
- 'md:hover:!bg-blue-congress',
554
- 'md:hover:!text-white',
555
- 'md:hover:fill-white',
556
- 'md:hover:no-underline'
557
- )
558
- : isDropdown
559
- ? classes.push(
560
- '!w-full',
561
- 'md:!w-full',
562
- 'md:mb-0',
563
- 'md:!mr-0',
564
- 'border-l-0',
565
- 'border-r-0',
566
- 'border-t-0',
567
- 'border-b',
568
- 'last:border-b-0',
569
- 'border-gray-400',
570
- 'hover:underline',
571
- 'hover:!text-blue-congress',
572
- 'hover:!bg-white',
573
- 'hover:!fill-blue-congress'
574
- )
575
- : isFlow
576
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
577
- : ''
578
- break
579
- case 33:
580
- classes.push('w-full')
581
- isList
582
- ? classes.push('border', 'mb-2', 'hover:no-underline')
583
- : isMixed
584
- ? classes.push(
585
- '!w-full',
586
- '!mb-0',
587
- 'border-b',
588
- 'last:border-b-0',
589
- 'hover:!bg-white',
590
- 'hover:underline',
591
- 'hover:text-blue-congress',
592
- 'hover:!fill-blue-congress'
593
- )
594
- : isDropdown
595
- ? classes.push(
596
- '!w-full',
597
- 'md:!w-full',
598
- 'md:mb-0',
599
- 'md:!mr-0',
600
- 'border-l-0',
601
- 'border-r-0',
602
- 'border-t-0',
603
- 'border-b',
604
- 'last:border-b-0',
605
- 'hover:underline',
606
- 'hover:!text-blue-congress',
607
- 'hover:!bg-white',
608
- 'hover:!fill-blue-congress'
609
- )
610
- : isFlow
611
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
612
- : ''
613
- break
614
- case 25:
615
- classes.push('w-full')
616
- isList
617
- ? classes.push('border', 'mb-2', 'hover:no-underline')
618
- : isMixed
619
- ? classes.push(
620
- '!w-full',
621
- '!mb-0',
622
- 'border-b',
623
- 'last:border-b-0',
624
- 'hover:!bg-white',
625
- 'hover:underline',
626
- 'hover:!text-blue-congress',
627
- 'hover:!fill-blue-congress'
628
- )
629
- : isDropdown
630
- ? classes.push(
631
- '!w-full',
632
- 'md:!w-full',
633
- 'md:mb-0',
634
- 'md:!mr-0',
635
- 'border-l-0',
636
- 'border-r-0',
637
- 'border-t-0',
638
- 'border-b',
639
- 'last:border-b-0',
640
- 'hover:underline',
641
- 'hover:text-blue-congress',
642
- 'hover:!bg-white',
643
- 'hover:!fill-blue-congress'
644
- )
645
- : isFlow
646
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
647
- : ''
648
- break
649
- }
650
- for (let i = 0; i < classes.length; i++) {
651
- this.$el.classList.add(classes[i])
652
- }
653
- },
654
- }))
655
398
  })
package/src/stories/views/components/content_nav/content_nav.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#with this.contentNav}}
2
2
  {{#if this.isListOrFlow}}
3
- <nav class="w-full px-2 md:px-0 c-content-nav">
3
+ <nav class="w-full px-2 md:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
4
4
  {{> components/content_nav/content_nav_container
5
5
  _teaserSize=../_teaserSize
6
6
  _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
@@ -8,7 +8,6 @@
8
8
  </nav>
9
9
  {{else}}
10
10
  {{#decorator 'components/content_nav/content_nav_dropdown'
11
- _componentClass="c-content-nav h-10 md:h-auto w-full"
12
11
  _teaserSize=../_teaserSize
13
12
  _iconOpen="arrow-down"
14
13
  _iconClose="arrow-up"
@@ -16,10 +15,10 @@
16
15
  _hiddenNavigationLabel="Unternavigation"
17
16
  }}
18
17
 
19
- {{> components/content_nav/content_nav_container
20
- _teaserSize=_teaserSize
21
- _maindivclass="flex flex-col w-full mt-0"
22
- }}
18
+ {{> components/content_nav/content_nav_container
19
+ _teaserSize=_teaserSize
20
+ _maindivclass="flex flex-col w-full mt-0"
21
+ }}
23
22
 
24
23
  {{/decorator}}
25
24
  {{/if}}
package/src/stories/views/components/content_nav/content_nav_container.hbs CHANGED
@@ -1,6 +1,4 @@
1
- <div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}}relative {{else}}absolute{{/if}}"
2
- @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest');"
3
-
1
+ <div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} relative"
4
2
  {{#if this.isAutosuggest}}
5
3
  data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"block", "unmatchedClass":"hidden"}'
6
4
  {{/if}}
package/src/stories/views/components/content_nav/content_nav_dropdown.hbs CHANGED
@@ -1,36 +1,38 @@
1
- <nav
2
- class="w-full {{#if this.isMixed}} px-2 md:px-0 {{else}} px-0 {{/if}} {{_componentClass}} "
1
+ <nav class="w-full px-2 md:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
2
+ :class="contentNavDropdownIsOpen ? 'h-10' : ''"
3
3
  id="dropdown--{{nextRandom}}"
4
4
  tabindex="0"
5
5
  role="navigation"
6
6
  aria-labelledby="dropdown__label--{{getRandom}}">
7
7
 
8
8
  <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
9
-
10
- <div x-show="shouldDropdownBeShown({{_teaserSize}},{{this.isDropdown}},{{this.isMixed}})"
11
- :class="contentNavDropdownIsOpen ? 'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]' : ''"
12
- class="relative flex w-auto h-10 mx-2 mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
9
+ <button
10
+ class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} relative flex w-full h-10 mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
13
11
  @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen; $dispatch('hr:global:resetinputAutoSuggest');"
12
+ @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest')"
13
+ {{#if this.isMixed}}
14
+ @resize.window="if(window.innerWidth > 767){contentNavDropdownIsOpen = false}; $dispatch('hr:global:resetinputAutoSuggest')"
15
+ {{/if}}
14
16
  >
15
- <span class="self-center w-full p-2 text-base">{{_buttonText}}</span>
17
+ <span class="self-center w-full p-2 text-base text-left">{{_buttonText}}</span>
16
18
  <div class="flex self-center w-auto h-full border-l border-content-nav">
17
- <button :class="contentNavDropdownIsOpen ? 'hidden' : ''"
19
+ <span :class="{'hidden' : contentNavDropdownIsOpen}"
18
20
  class="flex self-center px-3 py-3"
19
21
  >
20
22
  {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}
21
- </button>
22
- <button :class="contentNavDropdownIsOpen ? '' : 'hidden'"
23
- class="flex self-center px-3 py-3"
23
+ </span>
24
+ <span :class="{'hidden' : !contentNavDropdownIsOpen}"
25
+ class="flex self-center hidden px-3 py-3"
24
26
  >
25
27
  {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
26
- </button>
28
+ </span>
27
29
  </div>
28
- </div>
29
- <div x-show="shouldContentBeShown({{_teaserSize}},{{this.isDropdown}},{{this.isMixed}})"
30
- aria-haspopup="true"
31
- @click.outside="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest');"
32
- :class="contentNavDropdownIsOpen ? 'z-9999 relative' : ' z-1003'"
33
- class="{{#if this.isDropdown}} mx-2 md:mx-0 {{else}}{{#if this.isMixed}} mx-2 md:mx-0{{/if}} mx-2 {{/if}} md:h-auto md:overflow-visible">
30
+ </button>
31
+ <div :class="{'-isClosed' : !contentNavDropdownIsOpen,
32
+ '-isOpen' : contentNavDropdownIsOpen}"
33
+ aria-haspopup="true"
34
+ class="content-nav-dropdown_content{{#if this.isDropdown}} -isDropdown {{/if}}{{#if this.isMixed}} -isMixed{{/if}} md:h-auto md:overflow-visible relative -isClosed"
35
+ >
34
36
  {{~decorator_body~}}
35
37
  </div>
36
38
 
package/src/stories/views/components/content_nav/content_nav_item.hbs CHANGED
@@ -1,5 +1,11 @@
1
- <li x-init="chooseListItemStyles({{_teaserSize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})"
2
- class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-button fill-content-nav text-content-nav bg-white hover:bg-content-nav hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">
1
+ <li x-init=""
2
+ class="content-nav-item
3
+ {{~#if _islist}} content-nav-item-list{{/if}}
4
+ {{~#if _ismixed}} content-nav-item-mixed{{/if}}
5
+ {{~#if _isdropdown}} content-nav-item-dropdown{{/if}}
6
+ {{~#if _isflow}} content-nav-item-flow{{/if~}}
7
+ {{~#if this.isSelected}} font-bold -current{{/if~}}
8
+ ">
3
9
  {{#decorator 'components/base/link'
4
10
  _doNavigationTracking="true"
5
11
  _clickLabelType="Contentnavigation"
@@ -20,6 +26,4 @@ class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-button
20
26
  </span>
21
27
 
22
28
  {{/decorator}}
23
- </li>
24
-
25
-
29
+ </li>
package/src/stories/views/components/content_nav/content_nav_list.hbs CHANGED
@@ -1,5 +1,4 @@
1
- <ul class="flex bg-white md:bg-transparent flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2 {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
2
- :class="( ({{this.isMixed}} && {{_teaserSize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full ' : ''"
1
+ <ul class="flex bg-white md:bg-transparent flex-wrap{{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2{{/if}} z-1003 md:!px-0 last:border-b-0{{#if this.isDropdown }} w-full{{/if}}"
3
2
  >
4
3
 
5
4
  {{~#each this.contentNavEntries~}}
package/src/stories/views/components/teaser/content_nav/teaser_content_nav.hbs CHANGED
@@ -1,9 +1,6 @@
1
1
  <div id="{{nextRandom}}"
2
- x-ignore
3
- ax-load
4
- ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}
5
- x-data="contentNavigationHandler()"
2
+ x-data="{ contentNavDropdownIsOpen: false}"
6
3
  class="js-contentNavWrapper col-span-full flex gap-y-3 gap-x-4 js-load {{inline-switch this.teaserSize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
7
4
  >
8
- {{> components/content_nav/content_nav _teaserSize=this.teaserSize }}
5
+ {{> components/content_nav/content_nav _teaserSize=this.realTeaserSize }}
9
6
  </div>
package/src/stories/views/components/teaser/content_nav/teaser_content_nav.stories.mdx CHANGED
@@ -26,8 +26,15 @@ import contentNavDropdown_subgroups from '../fixtures/teaser_content_nav_dropdow
26
26
  }}
27
27
  argTypes={{
28
28
  realTeaserSize: {
29
+ control: {
30
+ type: 'select',
31
+ options: ['100', '66', '50', '33', '25'],
32
+ },
33
+ description: 'Teaser Größe',
29
34
  table: {
30
- disable: true
35
+ defaultValue: {
36
+ summary: '100',
37
+ },
31
38
  },
32
39
  },
33
40
  contentNav: {