hr-design-system-handlebars 0.120.3 → 0.120.4

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 (29) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +90 -6
  3. package/dist/views/components/content_nav/content_nav_dropdown.hbs +2 -2
  4. package/dist/views/components/content_nav/content_nav_item.hbs +1 -1
  5. package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs +2 -1
  6. package/dist/views/components/teaser/podcast/podcast_downloadbutton.hbs +1 -1
  7. package/dist/views/components/teaser/podcast/podcast_item_title.hbs +1 -1
  8. package/dist/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
  9. package/dist/views/components/teaser/podcast/podcast_player.hbs +13 -11
  10. package/dist/views/components/teaser/podcast/podcast_player_ui.hbs +1 -1
  11. package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs +2 -2
  12. package/dist/views/components/teaser/podcast/podcast_title.hbs +1 -1
  13. package/dist/views/components/teaser/tabbox/group_tabbox.hbs +1 -1
  14. package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs +1 -1
  15. package/package.json +1 -1
  16. package/src/assets/css/custom-components.css +20 -4
  17. package/src/stories/views/components/content_nav/content_nav_dropdown.hbs +2 -2
  18. package/src/stories/views/components/content_nav/content_nav_item.hbs +1 -1
  19. package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs +2 -1
  20. package/src/stories/views/components/teaser/podcast/podcast_downloadbutton.hbs +1 -1
  21. package/src/stories/views/components/teaser/podcast/podcast_item_title.hbs +1 -1
  22. package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
  23. package/src/stories/views/components/teaser/podcast/podcast_player.hbs +13 -11
  24. package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs +1 -1
  25. package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs +2 -2
  26. package/src/stories/views/components/teaser/podcast/podcast_title.hbs +1 -1
  27. package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs +1 -1
  28. package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs +1 -1
  29. package/tailwind.config.js +1 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v0.120.4 (Thu Jan 19 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Dpe 2007 fokuszustände definieren [#487](https://github.com/mumprod/hr-design-system-handlebars/pull/487) ([@StefanVesper](https://github.com/StefanVesper))
6
+
7
+ #### Authors: 1
8
+
9
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
10
+
11
+ ---
12
+
1
13
  # v0.120.3 (Thu Jan 19 2023)
2
14
 
3
15
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -423,14 +423,14 @@ video {
423
423
  --tw-scale-y: 1;
424
424
  }
425
425
 
426
- .btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
426
+ .btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-link-inset:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
427
427
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
428
428
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
429
429
  --tw-shadow: 0 0 rgba(0,0,0,0);
430
430
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
431
431
  }
432
432
 
433
- .ring, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
433
+ .ds-link-inset, .ring, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
434
434
  --tw-ring-inset: ;
435
435
  --tw-ring-offset-width: 0px;
436
436
  --tw-ring-offset-color: #fff;
@@ -596,6 +596,91 @@ video {
596
596
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
597
597
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
598
598
  }
599
+ .ds-button {
600
+ z-index: 20;
601
+ }
602
+ .ds-button:focus {
603
+ --tw-shadow: 0 0 0 0.25rem;
604
+ --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
605
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
606
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
607
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
608
+ --tw-shadow-color: var(--color-focus-state);
609
+ --tw-shadow: var(--tw-shadow-colored);
610
+ outline: 2px solid transparent;
611
+ outline-offset: 2px;
612
+ }
613
+ .ds-button:focus:not(:focus-visible) {
614
+ --tw-shadow: 0 0 rgba(0,0,0,0);
615
+ --tw-shadow-colored: 0 0 rgba(0,0,0,0);
616
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
617
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
618
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
619
+ }
620
+ .ds-button-round {
621
+ z-index: 20;
622
+ }
623
+ .ds-button-round:focus {
624
+ border-radius: 9999px;
625
+ --tw-shadow: 0 0 0 0.365rem;
626
+ --tw-shadow-colored: 0 0 0 0.365rem var(--tw-shadow-color);
627
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
628
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
629
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
630
+ --tw-shadow-color: var(--color-focus-state);
631
+ --tw-shadow: var(--tw-shadow-colored);
632
+ outline: 2px solid transparent;
633
+ outline-offset: 2px;
634
+ }
635
+ .ds-button-round:focus:not(:focus-visible) {
636
+ --tw-shadow: 0 0 rgba(0,0,0,0);
637
+ --tw-shadow-colored: 0 0 rgba(0,0,0,0);
638
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
639
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
640
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
641
+ }
642
+ .ds-link {
643
+ display: block;
644
+ }
645
+ .ds-link:focus {
646
+ --tw-shadow: 0 0 0 0.25rem;
647
+ --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
648
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
649
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
650
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
651
+ --tw-shadow-color: var(--color-focus-state);
652
+ --tw-shadow: var(--tw-shadow-colored);
653
+ outline: 2px solid transparent;
654
+ outline-offset: 2px;
655
+ }
656
+ .ds-link:focus:not(:focus-visible) {
657
+ --tw-shadow: 0 0 rgba(0,0,0,0);
658
+ --tw-shadow-colored: 0 0 rgba(0,0,0,0);
659
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
660
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
661
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
662
+ }
663
+ .ds-link-inset {
664
+ display: block;
665
+ }
666
+ .ds-link-inset:focus {
667
+ outline: 2px solid transparent;
668
+ outline-offset: 2px;
669
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
670
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
671
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
672
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
673
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
674
+ --tw-ring-inset: inset;
675
+ --tw-ring-color: currentColor;
676
+ }
677
+ .ds-link-inset:focus:not(:focus-visible) {
678
+ --tw-shadow: 0 0 rgba(0,0,0,0);
679
+ --tw-shadow-colored: 0 0 rgba(0,0,0,0);
680
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
681
+ box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
682
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
683
+ }
599
684
  .ds-teaser-focus::before {
600
685
  position: absolute;
601
686
  top: 0px;
@@ -645,7 +730,6 @@ video {
645
730
  /* ---------------- NAV ITEMS ------------------ */
646
731
  .content-nav-item {
647
732
  height: 2.5rem;
648
- overflow: hidden;
649
733
  font-size: 1rem;
650
734
  line-height: 1.375rem;
651
735
  font-family: DIN, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
@@ -2400,7 +2484,7 @@ video {
2400
2484
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2401
2485
  }
2402
2486
  .counter-reset {
2403
- counter-reset: cnt1674135434720;
2487
+ counter-reset: cnt1674136258640;
2404
2488
  }
2405
2489
  .line-clamp-4 {
2406
2490
  overflow: hidden;
@@ -2618,7 +2702,7 @@ video {
2618
2702
  --tw-ring-color: rgba(255, 255, 255, 0.5);
2619
2703
  }
2620
2704
  .-ordered {
2621
- counter-increment: cnt1674135434720 1;
2705
+ counter-increment: cnt1674136258640 1;
2622
2706
  }
2623
2707
  .-ordered::before {
2624
2708
  position: absolute;
@@ -2634,7 +2718,7 @@ video {
2634
2718
  letter-spacing: .0125em;
2635
2719
  --tw-text-opacity: 1;
2636
2720
  color: rgba(0, 0, 0, var(--tw-text-opacity));
2637
- content: counter(cnt1674135434720);
2721
+ content: counter(cnt1674136258640);
2638
2722
  }
2639
2723
  /*! ****************************/
2640
2724
  /*! text-shadow */
package/dist/views/components/content_nav/content_nav_dropdown.hbs CHANGED
@@ -1,13 +1,13 @@
1
1
  <nav class="w-full px-5 sm: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
2
  :class="contentNavDropdownIsOpen ? 'h-10' : ''"
3
3
  id="dropdown--{{nextRandom}}"
4
- tabindex="0"
4
+
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
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"
10
+ class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset 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"
11
11
  @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen; $dispatch('hr:global:resetinputAutoSuggest');"
12
12
  @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest')"
13
13
  {{#if this.isMixed}}
package/dist/views/components/content_nav/content_nav_item.hbs CHANGED
@@ -10,7 +10,7 @@
10
10
  _doNavigationTracking="true"
11
11
  _clickLabelType="Contentnavigation"
12
12
  _clickLabelPrefix1=this.title
13
- _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden"
13
+ _css="flex ds-link-inset items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden"
14
14
  _isSelected=this.isSelected
15
15
  _selectedCssClass="is-selected"
16
16
  }}
package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
- {{#decorator 'components/base/link' _css="group" }}
2
+ {{#decorator 'components/base/link' _css="group ds-link" }}
3
3
  {{> components/teaser/components/teaser_heading
4
4
  _headlineTag="h1"
5
+ _headlineCss=""
5
6
  _label=this.label
6
7
  _size=_size
7
8
  _title=this.title
package/dist/views/components/teaser/podcast/podcast_downloadbutton.hbs CHANGED
@@ -1,3 +1,3 @@
1
- <a href="{{_url}}" class="h-6 js-load {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
1
+ <a href="{{_url}}" class="h-6 js-load ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
2
2
  {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
3
3
  </a>
package/dist/views/components/teaser/podcast/podcast_item_title.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#decorator
2
2
  'components/base/link'
3
- _css='w-full font-heading text-base text-podcast-text line-clamp-4 ...'
3
+ _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4 ...'
4
4
  }}
5
5
  <span
6
6
  class='block group-hover:underline text-podcast-text
package/dist/views/components/teaser/podcast/podcast_playbutton.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}" aria-label="Podcast starten">
1
+ <button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group ds-button-round {{_css}}" aria-label="Podcast starten">
2
2
  <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
3
3
  {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
4
4
  </div>
package/dist/views/components/teaser/podcast/podcast_player.hbs CHANGED
@@ -13,17 +13,19 @@
13
13
  </div>
14
14
  {{/with}}
15
15
 
16
- {{~#with airdateDate}}
17
- <div class="flex grow pt-1.5 text-xs font-headingSerif text-podcast-text">
18
- <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
19
- </div>
20
- {{/with}}
16
+
17
+ <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
18
+ {{~#with airdateDate}}
19
+ <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
20
+ {{/with}}
21
21
 
22
- {{!-- Download --}}
23
- {{> components/teaser/podcast/podcast_downloadbutton
24
- _addClass="ml-2 pr-2 md:pr-5 "
25
- _iconClass="h-6 w-6 text-podcast-text fill-current"
26
- _url=this.podcastDownloadUrl }}
22
+ {{!-- Download --}}
23
+ {{> components/teaser/podcast/podcast_downloadbutton
24
+ _addClass=""
25
+ _iconClass="h-6 w-6 text-podcast-text fill-current"
26
+ _url=this.podcastDownloadUrl }}
27
+
28
+ </div>
27
29
  </div>
28
30
 
29
31
  {{!-- Überschrift: --}}
@@ -74,7 +76,7 @@
74
76
  <div class="flex justify-end w-full pl-4">
75
77
  <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
76
78
  <span class="self-end font-bold">Zur Sendung</span>
77
- <a class="self-end underline" href="{{this.url}}">{{this.title}}</a>
79
+ <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
78
80
  </div>
79
81
  </div>
80
82
  {{/with}}
package/dist/views/components/teaser/podcast/podcast_player_ui.hbs CHANGED
@@ -49,7 +49,7 @@
49
49
  min="0"
50
50
  max="1000"
51
51
  value="0"
52
- class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider"
52
+ class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider"
53
53
  aria-label="Schieberegler" >
54
54
  </div>
55
55
 
package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs CHANGED
@@ -27,7 +27,7 @@
27
27
  :aria-controls="$id('dropdown-button')"
28
28
  type="button"
29
29
  :class="open ? 'drop-shadow' : ''"
30
- class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
30
+ class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
31
31
  <div x-cloak x-show="open" class="w-3 h-3">
32
32
  {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
33
33
  </div>
@@ -50,7 +50,7 @@
50
50
  <ul>
51
51
  {{~#each this~}}
52
52
  <li class="{{#unless @last}}border-b{{/unless}}">
53
- <a class="flex py-2 text-left whitespace-nowrap hover:underline disabled:text-gray-500"
53
+ <a class="flex py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
54
54
  title="{{this.podcastHosterName}}"
55
55
  target="_blank"
56
56
  rel="noopener noreferrer"
package/dist/views/components/teaser/podcast/podcast_title.hbs CHANGED
@@ -1,4 +1,4 @@
1
- {{#decorator 'components/base/link' _css="group font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }}
1
+ {{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }}
2
2
  <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
3
3
  {{~_title~}}
4
4
  </span>
package/dist/views/components/teaser/tabbox/group_tabbox.hbs CHANGED
@@ -21,7 +21,7 @@
21
21
  </div>
22
22
  {{~#if this.link~}}
23
23
  <div class="flex justify-center min-w-0 pt-8 mx-5">
24
- {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0" ~}}
24
+ {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0 ds-link" ~}}
25
25
  </div>
26
26
  {{~/if~}}
27
27
  </section>
package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs CHANGED
@@ -11,7 +11,7 @@
11
11
  :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'"
12
12
  x-effect="$el.removeAttribute('onclick')"
13
13
  x-on:click.prevent="tab = '{{this.title}}'"
14
- class="border text-base font-heading py-px px-2 m-1.5"
14
+ class="border ds-button text-base font-heading py-px px-2 m-1.5"
15
15
  type="button"
16
16
  role="tab"
17
17
  >
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "0.120.3",
9
+ "version": "0.120.4",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/assets/css/custom-components.css CHANGED
@@ -88,14 +88,31 @@
88
88
  @apply shadow-none;
89
89
  }
90
90
 
91
+ .ds-button-round {
92
+ @apply z-20;
93
+ @apply focus:shadow-teaser-focus-big focus:shadow-focus-state focus:outline-none focus:rounded-full;
94
+ }
95
+
96
+ .ds-button-round:focus:not(:focus-visible) {
97
+ @apply shadow-none;
98
+ }
99
+
91
100
  .ds-link {
92
- @apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
101
+ @apply block focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
93
102
  }
94
103
 
95
104
  .ds-link:focus:not(:focus-visible) {
96
105
  @apply shadow-none;
97
106
  }
98
107
 
108
+ .ds-link-inset {
109
+ @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-current ;
110
+ }
111
+
112
+ .ds-link-inset:focus:not(:focus-visible) {
113
+ @apply shadow-none;
114
+ }
115
+
99
116
  .ds-teaser-focus {
100
117
  @apply before:content-[''] before:absolute before:inset-0 before:z-10;
101
118
  }
@@ -129,8 +146,7 @@
129
146
  /* ----------------Content NAV------------------ */
130
147
  /* ---------------- NAV ITEMS ------------------ */
131
148
  .content-nav-item {
132
- @apply h-10;
133
- @apply overflow-hidden;
149
+ @apply h-10;
134
150
  @apply text-base;
135
151
  @apply font-copy;
136
152
  @apply list-none;
@@ -178,7 +194,6 @@
178
194
  .content-nav-item.content-nav-item-mixed {
179
195
  @apply w-full;
180
196
  @apply mb-0;
181
-
182
197
  @apply border-l-0;
183
198
  @apply border-r-0;
184
199
  @apply border-t-0;
@@ -200,6 +215,7 @@
200
215
  @apply hover:text-content-nav;
201
216
  @apply hover:!bg-white;
202
217
  @apply hover:!fill-content-nav;
218
+
203
219
  }
204
220
  /* ---------------- NAV DROPDOWN - DROPDOWN ------------------ */
205
221
  .content-nav-dropdown_dropdown.-isDropdown {
package/src/stories/views/components/content_nav/content_nav_dropdown.hbs CHANGED
@@ -1,13 +1,13 @@
1
1
  <nav class="w-full px-5 sm: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
2
  :class="contentNavDropdownIsOpen ? 'h-10' : ''"
3
3
  id="dropdown--{{nextRandom}}"
4
- tabindex="0"
4
+
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
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"
10
+ class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset 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"
11
11
  @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen; $dispatch('hr:global:resetinputAutoSuggest');"
12
12
  @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest')"
13
13
  {{#if this.isMixed}}
package/src/stories/views/components/content_nav/content_nav_item.hbs CHANGED
@@ -10,7 +10,7 @@
10
10
  _doNavigationTracking="true"
11
11
  _clickLabelType="Contentnavigation"
12
12
  _clickLabelPrefix1=this.title
13
- _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden"
13
+ _css="flex ds-link-inset items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden"
14
14
  _isSelected=this.isSelected
15
15
  _selectedCssClass="is-selected"
16
16
  }}
package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
- {{#decorator 'components/base/link' _css="group" }}
2
+ {{#decorator 'components/base/link' _css="group ds-link" }}
3
3
  {{> components/teaser/components/teaser_heading
4
4
  _headlineTag="h1"
5
+ _headlineCss=""
5
6
  _label=this.label
6
7
  _size=_size
7
8
  _title=this.title
package/src/stories/views/components/teaser/podcast/podcast_downloadbutton.hbs CHANGED
@@ -1,3 +1,3 @@
1
- <a href="{{_url}}" class="h-6 js-load {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
1
+ <a href="{{_url}}" class="h-6 js-load ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
2
2
  {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
3
3
  </a>
package/src/stories/views/components/teaser/podcast/podcast_item_title.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#decorator
2
2
  'components/base/link'
3
- _css='w-full font-heading text-base text-podcast-text line-clamp-4 ...'
3
+ _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4 ...'
4
4
  }}
5
5
  <span
6
6
  class='block group-hover:underline text-podcast-text
package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}" aria-label="Podcast starten">
1
+ <button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group ds-button-round {{_css}}" aria-label="Podcast starten">
2
2
  <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
3
3
  {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
4
4
  </div>
package/src/stories/views/components/teaser/podcast/podcast_player.hbs CHANGED
@@ -13,17 +13,19 @@
13
13
  </div>
14
14
  {{/with}}
15
15
 
16
- {{~#with airdateDate}}
17
- <div class="flex grow pt-1.5 text-xs font-headingSerif text-podcast-text">
18
- <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
19
- </div>
20
- {{/with}}
16
+
17
+ <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
18
+ {{~#with airdateDate}}
19
+ <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
20
+ {{/with}}
21
21
 
22
- {{!-- Download --}}
23
- {{> components/teaser/podcast/podcast_downloadbutton
24
- _addClass="ml-2 pr-2 md:pr-5 "
25
- _iconClass="h-6 w-6 text-podcast-text fill-current"
26
- _url=this.podcastDownloadUrl }}
22
+ {{!-- Download --}}
23
+ {{> components/teaser/podcast/podcast_downloadbutton
24
+ _addClass=""
25
+ _iconClass="h-6 w-6 text-podcast-text fill-current"
26
+ _url=this.podcastDownloadUrl }}
27
+
28
+ </div>
27
29
  </div>
28
30
 
29
31
  {{!-- Überschrift: --}}
@@ -74,7 +76,7 @@
74
76
  <div class="flex justify-end w-full pl-4">
75
77
  <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
76
78
  <span class="self-end font-bold">Zur Sendung</span>
77
- <a class="self-end underline" href="{{this.url}}">{{this.title}}</a>
79
+ <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
78
80
  </div>
79
81
  </div>
80
82
  {{/with}}
package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs CHANGED
@@ -49,7 +49,7 @@
49
49
  min="0"
50
50
  max="1000"
51
51
  value="0"
52
- class="h-1 my-4 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider"
52
+ class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider"
53
53
  aria-label="Schieberegler" >
54
54
  </div>
55
55
 
package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs CHANGED
@@ -27,7 +27,7 @@
27
27
  :aria-controls="$id('dropdown-button')"
28
28
  type="button"
29
29
  :class="open ? 'drop-shadow' : ''"
30
- class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
30
+ class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
31
31
  <div x-cloak x-show="open" class="w-3 h-3">
32
32
  {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
33
33
  </div>
@@ -50,7 +50,7 @@
50
50
  <ul>
51
51
  {{~#each this~}}
52
52
  <li class="{{#unless @last}}border-b{{/unless}}">
53
- <a class="flex py-2 text-left whitespace-nowrap hover:underline disabled:text-gray-500"
53
+ <a class="flex py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
54
54
  title="{{this.podcastHosterName}}"
55
55
  target="_blank"
56
56
  rel="noopener noreferrer"
package/src/stories/views/components/teaser/podcast/podcast_title.hbs CHANGED
@@ -1,4 +1,4 @@
1
- {{#decorator 'components/base/link' _css="group font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }}
1
+ {{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }}
2
2
  <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
3
3
  {{~_title~}}
4
4
  </span>
package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs CHANGED
@@ -21,7 +21,7 @@
21
21
  </div>
22
22
  {{~#if this.link~}}
23
23
  <div class="flex justify-center min-w-0 pt-8 mx-5">
24
- {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0" ~}}
24
+ {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0 ds-link" ~}}
25
25
  </div>
26
26
  {{~/if~}}
27
27
  </section>
package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs CHANGED
@@ -11,7 +11,7 @@
11
11
  :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'"
12
12
  x-effect="$el.removeAttribute('onclick')"
13
13
  x-on:click.prevent="tab = '{{this.title}}'"
14
- class="border text-base font-heading py-px px-2 m-1.5"
14
+ class="border ds-button text-base font-heading py-px px-2 m-1.5"
15
15
  type="button"
16
16
  role="tab"
17
17
  >
package/tailwind.config.js CHANGED
@@ -53,6 +53,7 @@ module.exports = {
53
53
  'insetfromtop': 'inset 0px 8px 8px -4px rgba(0, 0, 0, 0.2)',
54
54
  'stage': '0 .3125rem 1.0625rem rgba(0,0,0,0.3)',
55
55
  'teaser-focus': '0 0 0 0.25rem',
56
+ 'teaser-focus-big': '0 0 0 0.365rem',
56
57
  },
57
58
  dropShadow: {
58
59
  md: '0 5px 3px rgb(0 0 0 / 0.07)',