hr-design-system-handlebars 1.42.2 → 1.42.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 (28) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/assets/index.css +29 -3
  3. package/dist/assets/js/components/podcast/podcast_player.alpine.js +4 -1
  4. package/dist/views/components/article/components/podcast/podcast_episode_article.hbs +1 -1
  5. package/dist/views/components/podcast/components/podcast_playbutton.hbs +2 -2
  6. package/dist/views/components/podcast/components/podcast_player_ui.hbs +5 -5
  7. package/dist/views/components/podcast/components/podcast_title.hbs +2 -2
  8. package/dist/views/components/podcast/podcast_player.hbs +2 -2
  9. package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +5 -5
  10. package/dist/views_static/components/article/components/podcast/podcast_episode_article.hbs +1 -1
  11. package/dist/views_static/components/podcast/components/podcast_playbutton.hbs +2 -2
  12. package/dist/views_static/components/podcast/components/podcast_player_ui.hbs +5 -5
  13. package/dist/views_static/components/podcast/components/podcast_title.hbs +2 -2
  14. package/dist/views_static/components/podcast/podcast_player.hbs +2 -2
  15. package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout_item.hbs +5 -5
  16. package/package.json +1 -1
  17. package/src/assets/fixtures/site_header/sectionNavigation_mit_submenu_as_flyout.inc.json +1 -1
  18. package/src/assets/tailwind.css +3 -0
  19. package/src/stories/views/components/article/components/podcast/podcast_episode_article.hbs +1 -1
  20. package/src/stories/views/components/podcast/components/podcast_playbutton.hbs +2 -2
  21. package/src/stories/views/components/podcast/components/podcast_player_ui.hbs +5 -5
  22. package/src/stories/views/components/podcast/components/podcast_title.hbs +2 -2
  23. package/src/stories/views/components/podcast/podcast_player.alpine.js +4 -1
  24. package/src/stories/views/components/podcast/podcast_player.hbs +2 -2
  25. package/src/stories/views/components/site_header/fixtures/site_header_mit_submenu_as_flyout.json +1 -1
  26. package/src/stories/views/components/site_header/fixtures/site_header_mit_submenu_as_flyout_no_sticky.json +1 -1
  27. package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +5 -5
  28. package/tailwind.config.js +5 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ # v1.42.4 (Wed Oct 25 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Integrate Dark Mode for Podcast Episode Player [#735](https://github.com/mumprod/hr-design-system-handlebars/pull/735) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
6
+
7
+ #### Authors: 2
8
+
9
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
10
+ - selbaciri (saad.elbaciri@hr.de)
11
+
12
+ ---
13
+
14
+ # v1.42.3 (Mon Oct 16 2023)
15
+
16
+ #### 🐛 Bug Fix
17
+
18
+ - Dpe 2205 b [#734](https://github.com/mumprod/hr-design-system-handlebars/pull/734) ([@vascoeduardo](https://github.com/vascoeduardo))
19
+
20
+ #### Authors: 1
21
+
22
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
23
+
24
+ ---
25
+
1
26
  # v1.42.2 (Fri Oct 13 2023)
2
27
 
3
28
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -3038,7 +3038,7 @@ video {
3038
3038
  border-bottom-color: var(--color-secondary-ds);
3039
3039
  }
3040
3040
  .counter-reset {
3041
- counter-reset: cnt1697199714238;
3041
+ counter-reset: cnt1698220902232;
3042
3042
  }
3043
3043
  .hyphens-auto {
3044
3044
  -webkit-hyphens: auto;
@@ -3273,7 +3273,7 @@ video {
3273
3273
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3274
3274
  }
3275
3275
  .-ordered {
3276
- counter-increment: cnt1697199714238 1;
3276
+ counter-increment: cnt1698220902232 1;
3277
3277
  }
3278
3278
  .-ordered::before {
3279
3279
  position: absolute;
@@ -3289,7 +3289,7 @@ video {
3289
3289
  letter-spacing: .0125em;
3290
3290
  --tw-text-opacity: 1;
3291
3291
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3292
- content: counter(cnt1697199714238);
3292
+ content: counter(cnt1698220902232);
3293
3293
  }
3294
3294
  /*! ****************************/
3295
3295
  /*! DataPolicy stuff */
@@ -3389,6 +3389,7 @@ video {
3389
3389
  --color-highlight-1: #eaf3fa;
3390
3390
  --color-highlight-2: #d34600;
3391
3391
  --color-highlight-3: #707070;
3392
+ --color-highlight-1-dark: #2d2d2d;
3392
3393
 
3393
3394
  /* Text */
3394
3395
  --color-standard-text: #000000;
@@ -3490,7 +3491,9 @@ video {
3490
3491
  --color-content-nav: var(--color-primary-ds);
3491
3492
  /* Podcast-Player */
3492
3493
  --color-podcast: #006dc1;
3494
+ --color-podcast-dark : var(--color-highlight-1-dark);
3493
3495
  --color-podcast-text: var(--color-link);
3496
+ --color-podcast-text-dark: var(---color-standard-text-dark);
3494
3497
  /* Byline */
3495
3498
  --color-byline: #606060;
3496
3499
  /* Font */
@@ -4893,6 +4896,18 @@ video {
4893
4896
  .after\:col-full::after {
4894
4897
  grid-column: full;
4895
4898
  }
4899
+ [class~='tw-dark'] .dark\:bg-highlight-1-dark {
4900
+ background-color: #2d2d2d;
4901
+ background-color: var(--color-highlight-1-dark);
4902
+ }
4903
+ [class~='tw-dark'] .dark\:bg-podcast-dark {
4904
+ background-color: #2d2d2d;
4905
+ background-color: var(--color-podcast-dark);
4906
+ }
4907
+ [class~='tw-dark'] .dark\:bg-podcast-text {
4908
+ background-color: #006eb7;
4909
+ background-color: var(--color-podcast-text);
4910
+ }
4896
4911
  [class~='tw-dark'] .dark\:fill-link-dark {
4897
4912
  fill: #006eb7;
4898
4913
  fill: var(--color-link-dark);
@@ -4901,10 +4916,21 @@ video {
4901
4916
  color: #006eb7;
4902
4917
  color: var(--color-link-dark);
4903
4918
  }
4919
+ [class~='tw-dark'] .dark\:text-podcast-text {
4920
+ color: #006eb7;
4921
+ color: var(--color-podcast-text);
4922
+ }
4923
+ [class~='tw-dark'] .dark\:text-podcast-text-dark {
4924
+ color: #F0F0F0;
4925
+ color: var(--color-standard-text-dark);
4926
+ }
4904
4927
  [class~='tw-dark'] .dark\:text-text-dark {
4905
4928
  color: #F0F0F0;
4906
4929
  color: var(--color-standard-text-dark);
4907
4930
  }
4931
+ [class~='tw-dark'] .dark\:ring-podcast {
4932
+ --tw-ring-color: var(--color-podcast);
4933
+ }
4908
4934
  @media print {
4909
4935
 
4910
4936
  .print\:flex {
package/dist/assets/js/components/podcast/podcast_player.alpine.js CHANGED
@@ -101,6 +101,9 @@ export default function playaudio() {
101
101
  },
102
102
 
103
103
  updateCurrentTime(range, timeDisplay, newTime, id) {
104
+ let darkmodeColor;
105
+ window.matchMedia('(prefers-color-scheme: dark)').matches && document.getElementsByTagName('html')[0].classList.contains('tw-dark') ? darkmodeColor = "var(--color-podcast) " : darkmodeColor = "white "
106
+
104
107
  timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
105
108
  newTime,
106
109
  false
@@ -108,7 +111,7 @@ export default function playaudio() {
108
111
  range.style.background =
109
112
  'linear-gradient(to right, var(--color-podcast) ' +
110
113
  range.value / 10 +
111
- '%, white ' +
114
+ '%,'+ darkmodeColor +
112
115
  range.value / 10 +
113
116
  '% )'
114
117
  range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
package/dist/views/components/article/components/podcast/podcast_episode_article.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <article class="grid grid-page">
2
- <div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
2
+ <div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr dark:bg-highlight-1-dark" >
3
3
  {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
4
4
  </div>
5
5
  <div class="order-1 col-span-8 px-5">
package/dist/views/components/podcast/components/podcast_playbutton.hbs CHANGED
@@ -5,10 +5,10 @@
5
5
  class="flex justify-start cursor-pointer group ds-button-round {{_css}}"
6
6
  aria-label="Podcast starten"
7
7
  >
8
- <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
8
+ <div class="text-white rounded-full js-playbutton bg-podcast dark:bg-podcast-dark ring-white dark:ring-podcast dark:text-podcast-text ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
9
9
  {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
10
10
  </div>
11
- <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
11
+ <div class="hidden bg-white rounded-full dark:bg-podcast-dark js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
12
12
  {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}
13
13
  </div>
14
14
  </button>
package/dist/views/components/podcast/components/podcast_player_ui.hbs CHANGED
@@ -52,7 +52,7 @@
52
52
  min="0"
53
53
  max="1000"
54
54
  value="0"
55
- class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider"
55
+ class="h-1 my-4 bg-white appearance-none cursor-pointer dark:bg-podcast-text ds-link grow seek_slider"
56
56
  aria-label="Schieberegler" >
57
57
  </div>
58
58
 
@@ -62,8 +62,8 @@
62
62
  {{> components/podcast/components/podcast_timedisplay
63
63
  _id=_id
64
64
  _duration=duration
65
- _currentTimeClasses="font-bold text-podcast-text"
66
- _durationClasses="text-podcast-text"
65
+ _currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark"
66
+ _durationClasses="text-podcast-text dark:text-podcast-text-dark"
67
67
  _containerCss="flex text-sm grow font-heading" }}
68
68
  </div>
69
69
  {{/if}}
@@ -76,8 +76,8 @@
76
76
  {{> components/podcast/components/podcast_timedisplay
77
77
  _id=_id
78
78
  _duration=duration
79
- _currentTimeClasses="font-bold text-podcast-text"
80
- _durationClasses="text-podcast-text"
79
+ _currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark"
80
+ _durationClasses="text-podcast-text dark:text-podcast-text-dark"
81
81
  _containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}
82
82
  </div>
83
83
  {{/unless}}
package/dist/views/components/podcast/components/podcast_title.hbs CHANGED
@@ -1,11 +1,11 @@
1
1
  {{#if this.isSingleChannel}}
2
- {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
2
+ {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark"}}
3
3
  <span class="mt-0.5 group-hover:underline {{#if ../../_ordered-adjust_context}} pl-8 {{/if}}line-clamp-4 {{inline-switch ../../_teaserSize-adjust_context '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
4
4
  {{~../../_title-adjust_context~}}
5
5
  </span>
6
6
  {{/components/base/link}}
7
7
  {{else}}
8
- <div class="font-title text-base mt-2.5 text-podcast-text">
8
+ <div class="font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark">
9
9
  <span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
10
10
  {{~_title~}}
11
11
  </span>
package/dist/views/components/podcast/podcast_player.hbs CHANGED
@@ -14,7 +14,7 @@
14
14
  {{/with}}
15
15
 
16
16
 
17
- <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
17
+ <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text dark:text-podcast-text-dark">
18
18
  {{~#with airdateDate}}
19
19
  <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
20
20
  {{/with}}
@@ -73,7 +73,7 @@
73
73
  {{#with this.podcastChannel}}
74
74
  {{!-- Sendungs-Link --}}
75
75
  <div class="flex justify-end w-full pl-4">
76
- <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
76
+ <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text dark:text-podcast-text-dark">
77
77
  <span class="self-end font-bold">Zur Sendung</span>
78
78
  <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
79
79
  </div>
package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs CHANGED
@@ -1,12 +1,12 @@
1
1
  <li :class="dropped ? 'h-auto' : 'h-10'"
2
2
  class="lg:border-0 sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 first:border-t md:first:border-t-0 last:border-b last:border-navigation-border-color lg:last:border-0 text-primary justify-start hover:underline">
3
- {{#with this}}
4
- {{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
3
+ {{~#with this}}
4
+ {{~#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') ~}}
5
5
  {{this.text}}
6
- {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
7
- {{/components/base/link}}
6
+ {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons" }}{{/if}}
7
+ {{~/components/base/link}}
8
8
  {{#*inline "htmlProperties"}}
9
9
  {{> components/tracking/navigation_tracking _clickLabelType=../../_fromNav-adjust_context _clickLabelPrefix1=../../_parent-adjust_context clickLabelPrefix2=this.link.content.text}}
10
10
  {{/inline}}
11
- {{/with}}
11
+ {{/with~}}
12
12
  </li>
package/dist/views_static/components/article/components/podcast/podcast_episode_article.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <article class="grid grid-page">
2
- <div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
2
+ <div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr dark:bg-highlight-1-dark" >
3
3
  {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
4
4
  </div>
5
5
  <div class="order-1 col-span-8 px-5">
package/dist/views_static/components/podcast/components/podcast_playbutton.hbs CHANGED
@@ -5,10 +5,10 @@
5
5
  class="flex justify-start cursor-pointer group ds-button-round {{_css}}"
6
6
  aria-label="Podcast starten"
7
7
  >
8
- <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
8
+ <div class="text-white rounded-full js-playbutton bg-podcast dark:bg-podcast-dark ring-white dark:ring-podcast dark:text-podcast-text ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
9
9
  {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
10
10
  </div>
11
- <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
11
+ <div class="hidden bg-white rounded-full dark:bg-podcast-dark js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
12
12
  {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}
13
13
  </div>
14
14
  </button>
package/dist/views_static/components/podcast/components/podcast_player_ui.hbs CHANGED
@@ -52,7 +52,7 @@
52
52
  min="0"
53
53
  max="1000"
54
54
  value="0"
55
- class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider"
55
+ class="h-1 my-4 bg-white appearance-none cursor-pointer dark:bg-podcast-text ds-link grow seek_slider"
56
56
  aria-label="Schieberegler" >
57
57
  </div>
58
58
 
@@ -62,8 +62,8 @@
62
62
  {{> components/podcast/components/podcast_timedisplay
63
63
  _id=_id
64
64
  _duration=duration
65
- _currentTimeClasses="font-bold text-podcast-text"
66
- _durationClasses="text-podcast-text"
65
+ _currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark"
66
+ _durationClasses="text-podcast-text dark:text-podcast-text-dark"
67
67
  _containerCss="flex text-sm grow font-heading" }}
68
68
  </div>
69
69
  {{/if}}
@@ -76,8 +76,8 @@
76
76
  {{> components/podcast/components/podcast_timedisplay
77
77
  _id=_id
78
78
  _duration=duration
79
- _currentTimeClasses="font-bold text-podcast-text"
80
- _durationClasses="text-podcast-text"
79
+ _currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark"
80
+ _durationClasses="text-podcast-text dark:text-podcast-text-dark"
81
81
  _containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}
82
82
  </div>
83
83
  {{/unless}}
package/dist/views_static/components/podcast/components/podcast_title.hbs CHANGED
@@ -1,11 +1,11 @@
1
1
  {{#if this.isSingleChannel}}
2
- {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
2
+ {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark"}}
3
3
  <span class="mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
4
4
  {{~_title~}}
5
5
  </span>
6
6
  {{/components/base/link}}
7
7
  {{else}}
8
- <div class="font-title text-base mt-2.5 text-podcast-text">
8
+ <div class="font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark">
9
9
  <span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
10
10
  {{~_title~}}
11
11
  </span>
package/dist/views_static/components/podcast/podcast_player.hbs CHANGED
@@ -14,7 +14,7 @@
14
14
  {{/with}}
15
15
 
16
16
 
17
- <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
17
+ <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text dark:text-podcast-text-dark">
18
18
  {{~#with airdateDate}}
19
19
  <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
20
20
  {{/with}}
@@ -73,7 +73,7 @@
73
73
  {{#with this.podcastChannel}}
74
74
  {{!-- Sendungs-Link --}}
75
75
  <div class="flex justify-end w-full pl-4">
76
- <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
76
+ <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text dark:text-podcast-text-dark">
77
77
  <span class="self-end font-bold">Zur Sendung</span>
78
78
  <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
79
79
  </div>
package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout_item.hbs CHANGED
@@ -1,12 +1,12 @@
1
1
  <li :class="dropped ? 'h-auto' : 'h-10'"
2
2
  class="lg:border-0 sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 first:border-t md:first:border-t-0 last:border-b last:border-navigation-border-color lg:last:border-0 text-primary justify-start hover:underline">
3
- {{#with this}}
4
- {{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
3
+ {{~#with this}}
4
+ {{~#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') ~}}
5
5
  {{this.text}}
6
- {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
7
- {{/components/base/link}}
6
+ {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons" }}{{/if}}
7
+ {{~/components/base/link}}
8
8
  {{#*inline "htmlProperties"}}
9
9
  {{> components/tracking/navigation_tracking _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text}}
10
10
  {{/inline}}
11
- {{/with}}
11
+ {{/with~}}
12
12
  </li>
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": "1.42.2",
9
+ "version": "1.42.4",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/fixtures/site_header/sectionNavigation_mit_submenu_as_flyout.inc.json CHANGED
@@ -86,7 +86,7 @@
86
86
  "text": "Programm",
87
87
  "link": {
88
88
  "url": "http://www.test.de",
89
- "hasIcon": false,
89
+ "hasIcon": true,
90
90
  "iconName": "extern"
91
91
  }
92
92
  }
package/src/assets/tailwind.css CHANGED
@@ -13,6 +13,7 @@
13
13
  --color-highlight-1: theme('colors.blue.accented');
14
14
  --color-highlight-2: theme('colors.orange.spicyCarrot');
15
15
  --color-highlight-3: theme('colors.gray.dark');
16
+ --color-highlight-1-dark: theme('colors.blue.nightRider');
16
17
 
17
18
  /* Text */
18
19
  --color-standard-text: theme('colors.black.DEFAULT');
@@ -114,7 +115,9 @@
114
115
  --color-content-nav: var(--color-primary-ds);
115
116
  /* Podcast-Player */
116
117
  --color-podcast: theme('colors.blue.science');
118
+ --color-podcast-dark : var(--color-highlight-1-dark);
117
119
  --color-podcast-text: var(--color-link);
120
+ --color-podcast-text-dark: var(---color-standard-text-dark);
118
121
  /* Byline */
119
122
  --color-byline: theme('colors.gray.scorpion');
120
123
  /* Font */
package/src/stories/views/components/article/components/podcast/podcast_episode_article.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <article class="grid grid-page">
2
- <div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
2
+ <div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr dark:bg-highlight-1-dark" >
3
3
  {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
4
4
  </div>
5
5
  <div class="order-1 col-span-8 px-5">
package/src/stories/views/components/podcast/components/podcast_playbutton.hbs CHANGED
@@ -5,10 +5,10 @@
5
5
  class="flex justify-start cursor-pointer group ds-button-round {{_css}}"
6
6
  aria-label="Podcast starten"
7
7
  >
8
- <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
8
+ <div class="text-white rounded-full js-playbutton bg-podcast dark:bg-podcast-dark ring-white dark:ring-podcast dark:text-podcast-text ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
9
9
  {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
10
10
  </div>
11
- <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
11
+ <div class="hidden bg-white rounded-full dark:bg-podcast-dark js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
12
12
  {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}
13
13
  </div>
14
14
  </button>
package/src/stories/views/components/podcast/components/podcast_player_ui.hbs CHANGED
@@ -52,7 +52,7 @@
52
52
  min="0"
53
53
  max="1000"
54
54
  value="0"
55
- class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider"
55
+ class="h-1 my-4 bg-white appearance-none cursor-pointer dark:bg-podcast-text ds-link grow seek_slider"
56
56
  aria-label="Schieberegler" >
57
57
  </div>
58
58
 
@@ -62,8 +62,8 @@
62
62
  {{> components/podcast/components/podcast_timedisplay
63
63
  _id=_id
64
64
  _duration=duration
65
- _currentTimeClasses="font-bold text-podcast-text"
66
- _durationClasses="text-podcast-text"
65
+ _currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark"
66
+ _durationClasses="text-podcast-text dark:text-podcast-text-dark"
67
67
  _containerCss="flex text-sm grow font-heading" }}
68
68
  </div>
69
69
  {{/if}}
@@ -76,8 +76,8 @@
76
76
  {{> components/podcast/components/podcast_timedisplay
77
77
  _id=_id
78
78
  _duration=duration
79
- _currentTimeClasses="font-bold text-podcast-text"
80
- _durationClasses="text-podcast-text"
79
+ _currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark"
80
+ _durationClasses="text-podcast-text dark:text-podcast-text-dark"
81
81
  _containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}
82
82
  </div>
83
83
  {{/unless}}
package/src/stories/views/components/podcast/components/podcast_title.hbs CHANGED
@@ -1,11 +1,11 @@
1
1
  {{#if this.isSingleChannel}}
2
- {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
2
+ {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark"}}
3
3
  <span class="mt-0.5 group-hover:underline {{#if _ordered-adjust_context}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize-adjust_context '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
4
4
  {{~_title-adjust_context~}}
5
5
  </span>
6
6
  {{/components/base/link}}
7
7
  {{else}}
8
- <div class="font-title text-base mt-2.5 text-podcast-text">
8
+ <div class="font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark">
9
9
  <span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
10
10
  {{~_title~}}
11
11
  </span>
package/src/stories/views/components/podcast/podcast_player.alpine.js CHANGED
@@ -101,6 +101,9 @@ export default function playaudio() {
101
101
  },
102
102
 
103
103
  updateCurrentTime(range, timeDisplay, newTime, id) {
104
+ let darkmodeColor;
105
+ window.matchMedia('(prefers-color-scheme: dark)').matches && document.getElementsByTagName('html')[0].classList.contains('tw-dark') ? darkmodeColor = "var(--color-podcast) " : darkmodeColor = "white "
106
+
104
107
  timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
105
108
  newTime,
106
109
  false
@@ -108,7 +111,7 @@ export default function playaudio() {
108
111
  range.style.background =
109
112
  'linear-gradient(to right, var(--color-podcast) ' +
110
113
  range.value / 10 +
111
- '%, white ' +
114
+ '%,'+ darkmodeColor +
112
115
  range.value / 10 +
113
116
  '% )'
114
117
  range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
package/src/stories/views/components/podcast/podcast_player.hbs CHANGED
@@ -14,7 +14,7 @@
14
14
  {{/with}}
15
15
 
16
16
 
17
- <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
17
+ <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text dark:text-podcast-text-dark">
18
18
  {{~#with airdateDate}}
19
19
  <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
20
20
  {{/with}}
@@ -73,7 +73,7 @@
73
73
  {{#with this.podcastChannel}}
74
74
  {{!-- Sendungs-Link --}}
75
75
  <div class="flex justify-end w-full pl-4">
76
- <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
76
+ <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text dark:text-podcast-text-dark">
77
77
  <span class="self-end font-bold">Zur Sendung</span>
78
78
  <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
79
79
  </div>
package/src/stories/views/components/site_header/fixtures/site_header_mit_submenu_as_flyout.json CHANGED
@@ -1 +1 @@
1
- {"hasOpenSubNavigation":true,"_useSticky":true,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"highlights","text":"Highlights","icon":"highlights-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"kontakt","text":"Kontakt","icon":"kontakt-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"facebook","text":"Facebook","icon":"facebook-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"instagram-ds","text":"Instagram","icon":"instagram-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"playlist","text":"Playlist","icon":"playlist-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"whatsapp-ds","text":"Whatsapp","icon":"whatsapp-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"podcast-ds","text":"Podcast","icon":"podcast-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]}],"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hr3","text":"Start","hiddenText":"hr3","url":"index.html","labelText":"Startseite von hr3","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"aktionen","text":"Aktionen","url":"aktionen/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"events","text":"Events","url":"events/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"shows","text":"Shows","url":"shows/index.html","flyoutStartLinkText":"Übersicht Shows","isCluster":false,"subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Die HR3 Morningshow","text":"Die HR3 Morningshow","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Der HR3 Nachmittag","text":"Der HR3 Nachmittag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Der HR3 Sonntagstalk","text":"Der HR3 Sonntagstalk","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Moderator*innen","text":"Moderator*innen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Programm","text":"Programm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]},{"navigationItems":[{"name":"playlist","text":"Playlist","url":"playlist/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kontakt","text":"Kontakt","url":"kontakt/index.html","qualifiedRelatedContentOn404":true}]}]}
1
+ {"hasOpenSubNavigation":true,"_useSticky":true,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"highlights","text":"Highlights","icon":"highlights-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"kontakt","text":"Kontakt","icon":"kontakt-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"facebook","text":"Facebook","icon":"facebook-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"instagram-ds","text":"Instagram","icon":"instagram-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"playlist","text":"Playlist","icon":"playlist-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"whatsapp-ds","text":"Whatsapp","icon":"whatsapp-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"podcast-ds","text":"Podcast","icon":"podcast-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]}],"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hr3","text":"Start","hiddenText":"hr3","url":"index.html","labelText":"Startseite von hr3","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"aktionen","text":"Aktionen","url":"aktionen/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"events","text":"Events","url":"events/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"shows","text":"Shows","url":"shows/index.html","flyoutStartLinkText":"Übersicht Shows","isCluster":false,"subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Die HR3 Morningshow","text":"Die HR3 Morningshow","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Der HR3 Nachmittag","text":"Der HR3 Nachmittag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Der HR3 Sonntagstalk","text":"Der HR3 Sonntagstalk","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Moderator*innen","text":"Moderator*innen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Programm","text":"Programm","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"name":"playlist","text":"Playlist","url":"playlist/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kontakt","text":"Kontakt","url":"kontakt/index.html","qualifiedRelatedContentOn404":true}]}]}
package/src/stories/views/components/site_header/fixtures/site_header_mit_submenu_as_flyout_no_sticky.json CHANGED
@@ -1 +1 @@
1
- {"hasOpenSubNavigation":true,"_useSticky":false,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"highlights","text":"Highlights","icon":"highlights-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"kontakt","text":"Kontakt","icon":"kontakt-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"facebook","text":"Facebook","icon":"facebook-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"instagram-ds","text":"Instagram","icon":"instagram-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"playlist","text":"Playlist","icon":"playlist-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"whatsapp-ds","text":"Whatsapp","icon":"whatsapp-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"podcast-ds","text":"Podcast","icon":"podcast-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]}],"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hr3","text":"Start","hiddenText":"hr3","url":"index.html","labelText":"Startseite von hr3","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"aktionen","text":"Aktionen","url":"aktionen/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"events","text":"Events","url":"events/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"shows","text":"Shows","url":"shows/index.html","flyoutStartLinkText":"Übersicht Shows","isCluster":false,"subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Die HR3 Morningshow","text":"Die HR3 Morningshow","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Der HR3 Nachmittag","text":"Der HR3 Nachmittag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Der HR3 Sonntagstalk","text":"Der HR3 Sonntagstalk","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Moderator*innen","text":"Moderator*innen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Programm","text":"Programm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]},{"navigationItems":[{"name":"playlist","text":"Playlist","url":"playlist/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kontakt","text":"Kontakt","url":"kontakt/index.html","qualifiedRelatedContentOn404":true}]}]}
1
+ {"hasOpenSubNavigation":true,"_useSticky":false,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"highlights","text":"Highlights","icon":"highlights-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"kontakt","text":"Kontakt","icon":"kontakt-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"facebook","text":"Facebook","icon":"facebook-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"instagram-ds","text":"Instagram","icon":"instagram-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"playlist","text":"Playlist","icon":"playlist-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"whatsapp-ds","text":"Whatsapp","icon":"whatsapp-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]},{"navigationItems":[{"id":"podcast-ds","text":"Podcast","icon":"podcast-ds","selected":false,"isCluster":false,"url":"https://www.hr3.de"}]}],"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hr3","text":"Start","hiddenText":"hr3","url":"index.html","labelText":"Startseite von hr3","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"aktionen","text":"Aktionen","url":"aktionen/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"events","text":"Events","url":"events/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"shows","text":"Shows","url":"shows/index.html","flyoutStartLinkText":"Übersicht Shows","isCluster":false,"subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Die HR3 Morningshow","text":"Die HR3 Morningshow","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Der HR3 Nachmittag","text":"Der HR3 Nachmittag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Der HR3 Sonntagstalk","text":"Der HR3 Sonntagstalk","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Moderator*innen","text":"Moderator*innen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Programm","text":"Programm","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"name":"playlist","text":"Playlist","url":"playlist/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kontakt","text":"Kontakt","url":"kontakt/index.html","qualifiedRelatedContentOn404":true}]}]}
package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs CHANGED
@@ -1,12 +1,12 @@
1
1
  <li :class="dropped ? 'h-auto' : 'h-10'"
2
2
  class="lg:border-0 sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 first:border-t md:first:border-t-0 last:border-b last:border-navigation-border-color lg:last:border-0 text-primary justify-start hover:underline">
3
- {{#with this}}
4
- {{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
3
+ {{~#with this}}
4
+ {{~#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') ~}}
5
5
  {{this.text}}
6
- {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
7
- {{/components/base/link}}
6
+ {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons" }}{{/if}}
7
+ {{~/components/base/link}}
8
8
  {{#*inline "htmlProperties"}}
9
9
  {{> components/tracking/navigation_tracking _clickLabelType=_fromNav-adjust_context _clickLabelPrefix1=_parent-adjust_context clickLabelPrefix2=this.link.content.text}}
10
10
  {{/inline}}
11
- {{/with}}
11
+ {{/with~}}
12
12
  </li>
package/tailwind.config.js CHANGED
@@ -258,7 +258,8 @@ module.exports = {
258
258
  tarawera: '#0a3355',
259
259
  turquoiseCerulian: '#007fa0',
260
260
  linkWater: '#d3e2f4',
261
- blueLuxury: '#007396'
261
+ blueLuxury: '#007396',
262
+ nightRider:'#2d2d2d',
262
263
  },
263
264
  'black': {
264
265
  DEFAULT: '#000000',
@@ -338,6 +339,7 @@ module.exports = {
338
339
  'primary': 'var(--color-primary-ds)',
339
340
  'secondary': 'var(--color-secondary-ds)',
340
341
  'highlight-1': 'var(--color-highlight-1)',
342
+ 'highlight-1-dark': 'var(--color-highlight-1-dark)',
341
343
  'highlight-2': 'var(--color-highlight-2)',
342
344
  'highlight-3': 'var(--color-highlight-3)',
343
345
  'top-topic-background': 'var(--color-top-topic-background)',
@@ -387,7 +389,9 @@ module.exports = {
387
389
  'focus-state': 'var(--color-focus-state)',
388
390
  'content-nav': 'var(--color-content-nav)',
389
391
  'podcast': 'var(--color-podcast)',
392
+ 'podcast-dark': 'var(--color-podcast-dark)',
390
393
  'podcast-text': 'var(--color-podcast-text)',
394
+ 'podcast-text-dark': 'var(--color-standard-text-dark)',
391
395
  'event-status': 'var(--color-event-status)',
392
396
  'event-calendar-primary': 'var(--color-eventcalendar-primary)',
393
397
  'event-calendar-secondary': 'var(--color-eventcalendar-secondary)',