hr-design-system-handlebars 1.1.7 → 1.1.9

package/src/assets/tailwind.css

@@ -8,8 +8,8 @@
 /*! purgecss start ignore */
 :root,
 [data-theme='default'] {
-    --color-primary: theme('colors.blue.congress');
-    --color-secondary: #606060;
+    --color-primary-ds: theme('colors.blue.congress');
+    --color-secondary-ds: #606060;
     --color-highlight-1: theme('colors.blue.accented');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -41,14 +41,14 @@
     --color-event-status: theme('colors.red.thunderbird');
     /* Eventkalender */
     --color-label-event-calendar-title: theme('colors.teal.deeperPool');
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     --color-eventcalendar-secondary: theme('colors.grey.boulder');
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
     /* Stage */
-    --color-stage-text-box: theme('colors.blue.deepCerulean');
+    --color-stage-text-box: 0 110 183;
     --color-stage-text: theme('colors.white.DEFAULT');
     --color-stage-primary: theme('colors.blue.deepCerulean');
     --color-stage-link: var('--color-link');
@@ -58,16 +58,18 @@
     --color-cluster-teaser-link: theme('colors.blue.science');
     --color-cluster-teaser-headline: theme('colors.blue.congress');
     /* Button */
-    --color-button: var(--color-primary);
+    --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.science');
     /* States */
-    --color-focus-state: var(--color-primary);
+    --color-focus-state: var(--color-primary-ds);
     /* Content-Nav */
-    --color-content-nav: var(--color-primary);
+    --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
     --color-podcast: theme('colors.blue.science');
     --color-podcast-text: var(--color-link);
+    /* Byline */
+    --color-byline: theme('colors.grey.scorpion');
     /* Font */
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
@@ -78,8 +80,8 @@
 }
 
 [data-theme='hessenschau'] {
-    --color-primary: theme('colors.blue.congress');
-    --color-secondary: #606060;
+    --color-primary-ds: theme('colors.blue.congress');
+    --color-secondary-ds: #606060;
     --color-highlight-1: theme('colors.blue.accented');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -104,7 +106,7 @@
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
     /* Eventkalender */
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
     --color-topline: #006dc1;
     /* Subline */
@@ -112,7 +114,7 @@
     /* Link */
     --color-link: theme('colors.blue.science');
     /*Stage */
-    --color-stage-text-box: theme('colors.grey.armadillo');
+    --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.blue.congress');
     --color-stage-text: theme('colors.white.DEFAULT');
     --color-stage-link: theme('colors.white.DEFAULT');
@@ -122,13 +124,13 @@
     --color-cluster-teaser-link: theme('colors.blue.science');
     --color-cluster-teaser-headline: theme('colors.blue.congress');
     /* Button */
-    --color-button: var(--color-primary);
+    --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.science');
     /* States */
-    --color-focus-state: var(--color-primary);
+    --color-focus-state: var(--color-primary-ds);
     /* Content-Nav */
-    --color-content-nav: var(--color-primary);
+    --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
     --color-podcast: theme('colors.blue.science');
     --color-podcast-text: var(--color-link);
@@ -143,8 +145,8 @@
 }
 
 [data-theme='hr-fernsehen'] {
-    --color-primary: theme('colors.purple.jazzberry');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.purple.jazzberry');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.white.blackhaze');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -165,7 +167,7 @@
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
     /* Eventkalender */
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
     --color-topline: theme('colors.purple.jazzberry');
     /* Subline */
@@ -173,7 +175,7 @@
     /* Link */
     --color-link: theme('colors.purple.jazzberry');
     /* Stage */
-    --color-stage-text-box: theme('colors.white.blackhaze');
+    --color-stage-text-box: 234 237 237;
     --color-stage-text: theme('colors.black.DEFAULT');
     --color-stage-primary: theme('colors.purple.pompadour');
     --color-stage-link: var(--color-link);
@@ -181,13 +183,13 @@
     --color-cluster-teaser-link: theme('colors.purple.jazzberry');
     --color-cluster-teaser-headline: theme('colors.purple.pompadour');
     /* Button */
-    --color-button: var(--color-primary);
+    --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.purple.jazzberry');
     /* States */
-    --color-focus-state: var(--color-primary);
+    --color-focus-state: var(--color-primary-ds);
     /* Content-Nav */
-    --color-content-nav: var(--color-primary);
+    --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
     --color-podcast: theme('colors.purple.jazzberry');
     --color-podcast-text: var(--color-link);
@@ -198,8 +200,8 @@
 }
 
 [data-theme='hr-inforadio'] {
-    --color-primary: theme('colors.blue.jellyBean');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.blue.jellyBean');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.blue.aqua');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -220,7 +222,7 @@
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
     /* Eventkalender */
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
     --color-topline: theme('colors.blue.jellyBean');
     /* Subline */
@@ -228,20 +230,20 @@
     /* Link */
     --color-link: theme('colors.blue.jellyBean');
     /* Stage */
-    --color-stage-text-box: theme('colors.blue.astronautBlue');
+    --color-stage-text-box: 0 55 93;
     --color-stage-primary: theme('colors.blue.astronautBlue');
     --color-stage-link: theme('colors.white.DEFAULT');
     /* Cluster-Teaser */
-    --color-cluster-teaser-link: var(--color-primary);
+    --color-cluster-teaser-link: var(--color-primary-ds);
     --color-cluster-teaser-headline: theme('colors.blue.astronautBlue');
     /* Button */
-    --color-button: var(--color-primary);
+    --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.blue.jellyBean');
     /* States */
-    --color-focus-state: var(--color-primary);
+    --color-focus-state: var(--color-primary-ds);
     /* Content-Nav */
-    --color-content-nav: var(--color-primary);
+    --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
     --color-podcast: theme('colors.blue.jellyBean');
     --color-podcast-text: var(--color-link);
@@ -252,8 +254,8 @@
 }
 
 [data-theme='hr-rundfunkrat'] {
-    --color-primary: theme('colors.grey.scorpion');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.grey.scorpion');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.blue.linkWater');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -284,7 +286,7 @@
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
     /* Stage */
-    --color-stage-text-box: theme('colors.blue.deepCerulean');
+    --color-stage-text-box: 0 110 183;
     --color-stage-primary: theme('colors.blue.deepCerulean');
     --color-stage-link: theme('colors.white.DEFAULT');
     /* Cluster-Teaser */
@@ -308,8 +310,8 @@
 }
 
 [data-theme='hr-werbung'] {
-    --color-primary: theme('colors.blue.deepCerulean');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.blue.deepCerulean');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.blue.linkWater');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -338,22 +340,22 @@
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
-    --color-link: var(--color-primary);
+    --color-link: var(--color-primary-ds);
     /* Stage */
-    --color-stage-text-box: var(--color-primary);
-    --color-stage-primary: var(--color-primary);
+    --color-stage-text-box: 0 110 183;
+    --color-stage-primary: var(--color-primary-ds);
     --color-stage-link: theme('colors.white.DEFAULT');
     /* Cluster-Teaser */
-    --color-cluster-teaser-link: var(--color-primary);
+    --color-cluster-teaser-link: var(--color-primary-ds);
     --color-cluster-teaser-headline: theme('colors.blue.congress');
     /* Button */
-    --color-button: var(--color-primary);
+    --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
-    --color-button-hollow: var(--color-primary);
+    --color-button-hollow: var(--color-primary-ds);
     /* States */
-    --color-focus-state: var(--color-primary);
+    --color-focus-state: var(--color-primary-ds);
     /* Content-Nav */
-    --color-content-nav: var(--color-primary);
+    --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
     --color-podcast: theme('colors.blue.deepCerulean');
     --color-podcast-text: var(--color-link);
@@ -364,8 +366,8 @@
 }
 
 [data-theme='hr-sinfonieorchester'] {
-    --color-primary: theme('colors.red.burntUmber');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.red.burntUmber');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.grey.alto');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -386,7 +388,7 @@
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
     /* Eventkalender */
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
     --color-topline: theme('colors.red.wellRead');
     /* Subline */
@@ -394,12 +396,12 @@
     /* Link */
     --color-link: theme('colors.red.wellRead');
     /* Stage */
-    --color-stage-text-box: var(--color-primary);
-    --color-stage-primary: var(--color-primary);
+    --color-stage-text-box: 141 39 37;
+    --color-stage-primary: var(--color-primary-ds);
     --color-stage-link: theme('colors.white.DEFAULT');
     /* Cluster-Teaser */
     --color-cluster-teaser-link: theme('colors.red.wellRead');
-    --color-cluster-teaser-headline: var(--color-primary);
+    --color-cluster-teaser-headline: var(--color-primary-ds);
     /* Button */
     --color-button: theme('colors.red.wellRead');
     --color-button-inverted: theme('colors.white.DEFAULT');
@@ -418,8 +420,8 @@
 }
 
 [data-theme='hr-bigband'] {
-    --color-primary: theme('colors.blue.blueStone');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.blue.blueStone');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.blue.blackSqueeze');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -440,7 +442,7 @@
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
     /* Eventkalender */
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
     --color-topline: theme('colors.blue.teal');
     /* Subline */
@@ -448,12 +450,12 @@
     /* Link */
     --color-link: theme('colors.blue.teal');
     /* Stage */
-    --color-stage-text-box: theme('colors.grey.armadillo');
+    --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.blue.blueStone');
     --color-stage-link: theme('colors.white.DEFAULT');
     /* Cluster-Teaser */
     --color-cluster-teaser-link: theme('colors.blue.teal');
-    --color-cluster-teaser-headline: var(--color-primary);
+    --color-cluster-teaser-headline: var(--color-primary-ds);
     /* Button */
     --color-button: theme('colors.blue.teal');
     --color-button-inverted: theme('colors.white.DEFAULT');
@@ -472,8 +474,8 @@
 }
 
 [data-theme='hr'] {
-    --color-primary: theme('colors.blue.deepCerulean');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.blue.deepCerulean');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.blue.linkWater');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -492,34 +494,34 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
-    --color-label-pm: var(--color-primary);
+    --color-label-pm: var(--color-primary-ds);
     /* Kurzmeldung */
     --color-label-kurzmeldung: theme('colors.blue.tarawera');
     /* Eventkalender */
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
-    --color-topline: var(--color-primary);
+    --color-topline: var(--color-primary-ds);
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
-    --color-link: var(--color-primary);
+    --color-link: var(--color-primary-ds);
     /* Stage */
-    --color-stage-text-box: var(--color-primary);
-    --color-stage-primary: var(--color-primary);
+    --color-stage-text-box: 0 110 183;
+    --color-stage-primary: var(--color-primary-ds);
     --color-stage-link: theme('colors.white.DEFAULT');
     /* Cluster-Teaser */
-    --color-cluster-teaser-link: var(--color-primary);
+    --color-cluster-teaser-link: var(--color-primary-ds);
     --color-cluster-teaser-headline: theme('colors.blue.astronautBlue');
     /* Button */
-    --color-button: var(--color-primary);
+    --color-button: var(--color-primary-ds);
     --color-button-inverted: theme('colors.white.DEFAULT');
-    --color-button-hollow: var(--color-primary);
+    --color-button-hollow: var(--color-primary-ds);
     /* States */
-    --color-focus-state: var(--color-primary);
+    --color-focus-state: var(--color-primary-ds);
     /* Content-Nav */
-    --color-content-nav: var(--color-primary);
+    --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
-    --color-podcast: var(--color-primary);
+    --color-podcast: var(--color-primary-ds);
     --color-podcast-text: var(--color-link);
     --color-podcast-highlight: theme('colors.orange.chelseaGem');
     /* Font */
@@ -528,8 +530,8 @@
 }
 
 [data-theme='hr1'] {
-    --color-primary: theme('colors.yellow.corn');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.yellow.corn');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.white.floral');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -560,7 +562,7 @@
     /* Link */
     --color-link: theme('colors.yellow.olive');
     /* Stage */
-    --color-stage-text-box: theme('colors.grey.armadillo');
+    --color-stage-text-box: 67 61 55;
     --color-stage-primary: theme('colors.yellow.corn');
     --color-stage-link: theme('colors.white.DEFAULT');
     /* Cluster-Teaser */
@@ -584,8 +586,8 @@
 }
 
 [data-theme='hr2'] {
-    --color-primary: theme('colors.orange.clementine');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.orange.clementine');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.grey.alto');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -614,8 +616,8 @@
     /* Link */
     --color-link: theme('colors.red.paprika');
     /* Stage */
-    --color-stage-text-box: theme('colors.white.DEFAULT');
-    --color-stage-primary: var(--color-primary);
+    --color-stage-text-box: 255 255 255;
+    --color-stage-primary: var(--color-primary-ds);
     --color-stage-text: theme('colors.black.DEFAULT');
     --color-stage-link: var(--color-link);
     /* Cluster-Teaser */
@@ -639,8 +641,8 @@
 }
 
 [data-theme='hr3'] {
-    --color-primary: theme('colors.red.monza');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.red.monza');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.grey.mercury');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -663,31 +665,31 @@
     /* Event */
     --color-event-status: theme('colors.green.pineGreen');
     /* Eventkalender */
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
-    --color-topline: var(--color-primary);
+    --color-topline: var(--color-primary-ds);
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
-    --color-link: var(--color-primary);
+    --color-link: var(--color-primary-ds);
     /* Stage */
-    --color-stage-text-box: theme('colors.white.DEFAULT');
-    --color-stage-primary: var(--color-primary);
-    --color-stage-text: var(--color-primary);
+    --color-stage-text-box: 255 255 255;
+    --color-stage-primary: var(--color-primary-ds);
+    --color-stage-text: var(--color-primary-ds);
     --color-stage-link: var(--color-link);
     /* Cluster-Teaser */
-    --color-cluster-teaser-link: var(--color-primary);
+    --color-cluster-teaser-link: var(--color-primary-ds);
     --color-cluster-teaser-headline: theme('colors.black.DEFAULT');
     /* Button */
     --color-button: theme('colors.red.scarlett');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-hollow: theme('colors.red.scarlett');
     /* States */
-    --color-focus-state: var(--color-primary);
+    --color-focus-state: var(--color-primary-ds);
     /* Content-Nav */
     --color-content-nav: theme('colors.red.scarlett');
     /* Podcast-Player */
-    --color-podcast: var(--color-primary);
+    --color-podcast: var(--color-primary-ds);
     --color-podcast-text: var(--color-link);
     --color-podcast-highlight: theme('colors.green.pineGreen');
     /* Font */
@@ -696,8 +698,8 @@
 }
 
 [data-theme='hr4'] {
-    --color-primary: theme('colors.green.genoa');
-    --color-secondary: #007179;
+    --color-primary-ds: theme('colors.green.genoa');
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.white.azureish');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -720,7 +722,7 @@
     /* Event */
     --color-event-status: theme('colors.red.alizarinCrimson');
     /* Eventkalender */
-    --color-eventcalendar-primary: var(--color-primary);
+    --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
     --color-topline: theme('colors.green.eden');
     /* Subline */
@@ -728,7 +730,7 @@
     /* Link */
     --color-link: theme('colors.green.eden');
     /* Stage */
-    --color-stage-text-box: theme('colors.white.DEFAULT');
+    --color-stage-text-box: 255 255 255;
     --color-stage-primary: theme('colors.green.genoa');
     --color-stage-text: theme('colors.black.DEFAULT');
     --color-stage-link: theme('colors.black.DEFAULT');
@@ -742,7 +744,7 @@
     /* States */
     --color-focus-state: var(--color-link);
     /* Content-Nav */
-    --color-content-nav: var(--color-primary);
+    --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
     --color-podcast: theme('colors.green.eden');
     --color-podcast-text: var(--color-link);
@@ -755,8 +757,8 @@
 }
 
 [data-theme='you-fm'] {
-    --color-primary: #c20016;
-    --color-secondary: #007179;
+    --color-primary-ds: #c20016;
+    --color-secondary-ds: #007179;
     --color-highlight-1: theme('colors.grey.platinum');
     --color-highlight-2: theme('colors.orange.spicyCarrot');
 
@@ -785,7 +787,7 @@
     /* Link */
     --color-link: theme('colors.blue.sea');
     /* Stage */
-    --color-stage-text-box: theme('colors.white.DEFAULT');
+    --color-stage-text-box: 255 255 255;
     --color-stage-primary: theme('colors.yellow.goldenSand');
     --color-stage-text: theme('colors.black.DEFAULT');
     --color-stage-link: theme('colors.black.DEFAULT');

package/src/stories/views/components/base/loadSSI.hbs

@@ -1,5 +1,5 @@
 {{#if (isStorybook)}}  
-    {{> components/base/load_dynamic _templatePath=_templatePath}} 
+    {{> components/base/load_dynamic _context=_context _templatePath=_templatePath}} 
 {{else}}
     {{{this}}}
 {{/if}}        

package/src/stories/views/components/base/load_dynamic.hbs

@@ -29,4 +29,13 @@
     {{#case "components/event/stage_location.ssi"}}
         {{> components/event/stage_location.ssi}}
     {{/case}}
+    {{#case "components/event/label_byline.ssi"}}
+        {{> components/event/label_byline.ssi _context}}
+    {{/case}}
+    {{#case "components/program/label_byline.ssi"}}
+        {{> components/program/label_byline.ssi _context}}
+    {{/case}}
+    {{#case "components/multimedia/livestream/label_byline.ssi"}}
+        {{> components/multimedia/livestream/label_byline.ssi _context}}
+    {{/case}}
 {{/switch}}

package/src/stories/views/components/event/calendar/event_calendar_event_teaser.hbs

@@ -13,12 +13,11 @@
                     <div class="flex flex-col items-start basis-10/12 w-10/12">
                         <div class="absolute top-0 left-0 w-full sm:static">
                             <div class="ar-4-3 sm:ar-auto">
-                                <header class="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent">
+                                {{#> components/teaser/components/teaser_header _css="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent"}}
                                     {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
-                                        {{#> components/teaser/components/teaser_header}}
                                             {{#with this.label}}
                                                 {{#> components/label/label_group}}
-                                                    {{> components/label/label_test _type=this.type _text=(loca this.loca) _css="mr-2"}}
+                                                    {{> components/label/label _type=this.type _text=(loca this.loca) _css="mr-2"}}
                                                     {{#if ../this.hasStatus}}
                                                         {{> components/event/event_status _status=(loca ../this.statusDescriptionForLabelShort)}} 
                                                     {{/if}}
@@ -28,12 +27,11 @@
                                                 {{#if this.topline}}
                                                     {{> components/teaser/components/teaser_topline _text=this.topline}}
                                                 {{/if}}
-                                                {{> components/teaser/components/teaser_title_test _text=this.title _css="text-2xl"}}
+                                                {{> components/teaser/components/teaser_title _text=this.title _css="text-2xl"}}
                                                 {{> components/event/event_tags this.eventtags}} 
                                             {{/components/teaser/components/teaser_headline}}
-                                        {{/components/teaser/components/teaser_header}} 
                                     {{/decorator}}
-                                </header>
+                                {{/components/teaser/components/teaser_header}} 
                             </div>
                         </div>
                         {{> components/event/event_details this}}

package/src/stories/views/components/event/calendar/fixtures/event_calendar_event_teaser.json

@@ -1 +1 @@
-{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Mon","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"14.10.22, 20:00 Uhr","bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"isSoldOut":false,"hasStatus":true,"statusDescriptionForLabelShort":"event_status_cancelled","concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}
+{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Mon","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"isSoldOut":false,"hasStatus":true,"statusDescriptionForLabelShort":"event_status_cancelled","concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}

package/src/stories/views/components/event/event_tag.hbs

@@ -1,3 +1,3 @@
 <span
-    class='block text-subline font-normal font-heading text-base sm:text-xl mt-0.5'
+    class="block text-subline font-normal font-heading text-base sm:text-xl mt-0.5{{#if _css}} {{_css}}{{/if}}"
 >{{_title}}</span>

package/src/stories/views/components/event/event_tags.hbs

@@ -1,11 +1,11 @@
-{{#with this}}
-    {{#with this.series}}
-        {{> components/event/event_tag _title=this.title}}
-    {{/with}}
-    {{#with this.project}}
-        {{> components/event/event_tag _title=this.title}}
-    {{/with}}
-    {{#with this.externalProject}}
-        {{> components/event/event_tag _title=this}}
-    {{/with}}
+
+{{#with this.series}}
+    {{> components/event/event_tag _css=../_css _title=this.title}}
 {{/with}}
+{{#with this.project}}
+    {{> components/event/event_tag _css=../_css _title=this.title}}
+{{/with}}
+{{#with this.externalProject}}
+    {{> components/event/event_tag _css=../_css _title=this}}
+{{/with}}
+

package/src/stories/views/components/event/event_ticket_button.hbs

@@ -5,7 +5,7 @@
     {{/components/button/button_v2}}
     {{#> components/modal/modal _trigger=(getRandom)}}
         {{#> components/teaser/components/teaser_headline}}
-            {{> components/teaser/components/teaser_title_test _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
+            {{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
         {{/components/teaser/components/teaser_headline}}
         <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
 

package/src/stories/views/components/event/label_byline.ssi.hbs

@@ -0,0 +1,9 @@
+{{#with this.firstInstant}}
+    {{#if this.hasStatus}}
+        {{> components/event/event_status _css="ml-2" _status=(loca this.statusDescriptionForLabelShort)}} 
+    {{else}}
+        {{#> components/text/byline _css="ml-2"}}
+            {{this.startDateTime.date}}, {{this.startDateTime.time}} Uhr
+        {{/components/text/byline}}
+    {{/if}}
+{{/with}}