hr-design-system-handlebars 0.86.0 → 0.87.0

package/.github/workflows/chromatic.yml

@@ -21,6 +21,7 @@ jobs:
               with:
                   node-version: 16.x
             - run: npm ci
+            - run: npm run partialsToJs
               #👇 Adds Chromatic as a step in the workflow
             - uses: chromaui/action@v1
               # Options required for Chromatic's GitHub Action

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v0.87.0 (Tue Nov 22 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1671: Program-Teaser in Design-System [#394](https://github.com/mumprod/hr-design-system-handlebars/pull/394) ([@mariokinzel](https://github.com/mariokinzel))
+
+#### 🐛 Bug Fix
+
+- FEATURE: Runs partialsToJs script in chromatic [#393](https://github.com/mumprod/hr-design-system-handlebars/pull/393) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@mariokinzel](https://github.com/mariokinzel)
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.86.0 (Fri Nov 18 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -2252,7 +2252,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1668780968341;
+  counter-reset: cnt1669107292058;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2641,7 +2641,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1668780968341 1;
+  counter-increment: cnt1669107292058 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2657,7 +2657,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1668780968341);
+  content: counter(cnt1669107292058);
 }
 .\[-T\:\+Z\] {
   --t: +Z;
@@ -2681,14 +2681,17 @@ video {
     /* Infografik */
     --color-label-infografik: #be005a;
     /* Sendung */
-    --color-label-program: #009bc6;
     /* Download */
     --color-label-download: #606060;
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
+    /* Sendungsdokument */
+    --color-label-program: #009bc6;
     /* Dachzeile */
     --color-topline: #006dc1;
-    /* Link */
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: #006eb7;
     /* Stage */
     --color-stage-text-box: #006eb7;
@@ -2725,7 +2728,9 @@ video {
     --color-label-pm: #006eb7;
     /* Dachzeile */
     --color-topline: #006dc1;
-    /* Link */
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: #006dc1;
     /*Stage */
     --color-stage-text-box: #433d37;
@@ -2756,8 +2761,10 @@ video {
     /* Event */
     --color-label-event: #000000;
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: #a00d65;
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: #a00d65;
     /* Stage */
     --color-stage-text-box: #eaeded;
@@ -2784,8 +2791,10 @@ video {
     /* Event */
     --color-label-event: #000000;
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: #276b9e;
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: #276b9e;
     /* Stage */
     --color-stage-text-box: #00375d;
@@ -2813,7 +2822,9 @@ video {
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: #006eb7;
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006eb7;
 }
@@ -2838,7 +2849,9 @@ video {
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: #006eb7;
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006eb7;
 }
@@ -2861,7 +2874,9 @@ video {
     /* Event */
     --color-label-event: #000000;
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: rgba(171,47,45,1);
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: rgba(171,47,45,1);
     /* Stage */
@@ -2888,7 +2903,9 @@ video {
     /* Event */
     --color-label-event: #000000;
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: rgba(0,122,124,1);
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: rgba(0,122,124,1);
     /* Stage */
@@ -2917,7 +2934,9 @@ video {
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: #006eb7;
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: #006eb7;
     /* Stage */
@@ -2942,8 +2961,10 @@ video {
     /* Event */
     --color-label-event: #000000;
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: rgba(145,107,0,1);
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: rgba(145,107,0,1);
     /* Stage */
     --color-stage-text-box: #433d37;
@@ -2969,8 +2990,10 @@ video {
     /* Event */
     --color-label-event: #000000;
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: rgba(140,3,61,1);
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: rgba(140,3,61,1);
     /* Stage */
     --color-stage-text-box: #ffffff;
@@ -2998,7 +3021,9 @@ video {
     --color-label-event: #000000;
     /* Dachzeile */
     --color-topline: #c20016;
-    /* Link */
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: #c20016;
     /* Stage */
     --color-stage-text-box: #ffffff;
@@ -3027,8 +3052,10 @@ video {
     /* Event */
     --color-label-event: #000000;
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: rgba(15,97,87,1);
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: rgba(15,97,87,1);
     /* Stage */
     --color-stage-text-box: #ffffff;
@@ -3055,8 +3082,10 @@ video {
     /* Event */
     --color-label-event: #000000;
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: rgba(0,126,161,1);
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: rgba(0,126,161,1);
     /* Stage */
     --color-stage-text-box: #ffffff;
@@ -3178,6 +3207,10 @@ video {
 .hover\:fill-blue-jellyBean:hover {
   fill: #006dc1;
 }
+.hover\:fill-topline:hover {
+  fill: #006dc1;
+  fill: var(--color-topline);
+}
 .hover\:\!fill-congress:hover {
   fill: #006dc1 !important;
 }

package/dist/views/components/teaser/components/teaser_body.hbs

@@ -1,6 +1,6 @@
 <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
     <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
-        {{#decorator 'components/base/link' _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }} 
+        {{#decorator 'components/base/link' _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2=(if this.trackingForArdMediatheksLink 'ARD-Mediatheksvideo Überschrift geklickt' 'headlineLink') }} 
             {{> components/teaser/components/teaser_heading 
             _fontVariant=this.headingFontVariant
             _headlineTag=this.headlineTag 
@@ -10,7 +10,8 @@
             _title=this.title 
             _topline=this.topline 
             _teaserType=this.teaserType
-            _isMobile1to1=this.isMobile1to1}}            
+            _isMobile1to1=this.isMobile1to1
+            _extendedTitle=this.extendedTitle}}            
         {{/decorator}}   
     </header>
     <div class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">

package/dist/views/components/teaser/components/teaser_heading.hbs

@@ -5,8 +5,11 @@
 {{/with~}}
 
 <{{~ _headlineTag ~}}>
-    {{#if _topline}}
-        {{> components/teaser/components/teaser_topline _css=_toplineCss _text=_topline _readMore=_readMore _teaserType=_teaserType}}
+       {{#if _topline}}
+        {{> components/teaser/components/teaser_topline _css=_css _text=_topline _readMore=_readMore _teaserType=_teaserType}}
+    {{/if}}
+    {{> components/teaser/components/teaser_title _css=_css _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _ordered=_ordered}}
+    {{#if _extendedTitle}}
+        <span class="text-toplineColor font-normal text-xl leading-6">{{_extendedTitle}}</span>
     {{/if}}
-    {{> components/teaser/components/teaser_title _css=_titleCss _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem _ordered=_ordered}}
 </{{~ _headlineTag ~}}>

package/dist/views/components/teaser/components/teaser_image.hbs

@@ -6,9 +6,26 @@
         {{/with~}}
     {{/unless}}
 {{/unless}}
-{{#decorator 'components/base/link' _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}
+{{#decorator 'components/base/link' _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2=(if this.trackingForArdMediatheksLink 'ARD-Mediatheksvideo Teaserbild geklickt' 'mediaLink') }}
     {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=../this.dontLazyload _addClassImg="" ~}}
 {{/decorator}}
+{{#if this.isProgram}}
+    {{#if this.showMediatheksLink}}
+        {{#decorator 'components/base/link' _isAriaHidden=true _doTracking='true' _clickLabelPrefix1=this.sophoraId _clickLabelPrefix2="ARD-Mediatheksvideo Button geklickt"}}
+            {{> components/button/button_round 
+        _isButton="true" 
+        _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
+        _buttonColor='text-toplineColor hover:fill-topline'
+        _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
+        _showIcon=true 
+        _icon='play_button' 
+        _label='Sendung' 
+        _srOnly="true" 
+        _alpineClick=""
+        }}    
+        {{/decorator}}
+    {{/if}}
+{{/if}}
 </div> 
 {{#if this.isEvent}}
     {{#unless this.displayTeaserBodyAsImageOverlay}}

package/dist/views/components/teaser/components/teaser_lead.hbs

@@ -1,5 +1,5 @@
 {{~#if this.allowAVConsumption ~}}
     {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize }}
 {{else}}    
-    {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1}}
+    {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 }}
 {{/if}}

package/dist/views/components/teaser/components/teaser_text.hbs

@@ -7,3 +7,9 @@
             <span class="inline-flex flex-wrap items-end hover:underline decoration-1">[{{this.link.readMoreText.readMore}}{{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1"}}{{/if~}}]</span>
         {{/decorator}} 
     {{/if}}
+    {{#if this.showMediatheksLink}}
+        {{#decorator 'components/base/link' _css="inline-flex flex-end text-link hover:text-link" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="ARD-Mediatheksvideo mehr-Link geklickt"}}
+            <span class="inline-flex flex-wrap items-end hover:underline decoration-1">[{{this.link.readMoreText.readMore}}{{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1"}}{{/if~}}]</span>
+        {{/decorator}} 
+    {{/if}}
+

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.86.0",
+    "version": "0.87.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/assets/fixtures/teaser/teaser_alternative_hero_serif_program.json

@@ -0,0 +1,14 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserProgram",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teaser_labels.inc.json

@@ -38,5 +38,13 @@
             "bylineSsi": "14.10.22, 20:00 Uhr",
             "bylineText": "BylineText"
         }
+    },
+    "program": {
+        "type": "program",
+        "loca": "label_program",
+        "byline": {
+            "bylineSsi": "14.10.22, 20:00 Uhr",
+            "bylineText": "BylineText"
+        }
     }
 }

package/src/assets/fixtures/teaser/teaser_standard_100_serif_program.json

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserProgram",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teasers.inc.json

@@ -1022,6 +1022,105 @@
             }
         }
     },
+    "teaserProgram": {
+        "isSsi": true,
+        "logicItem": {
+            "includePath": "components/teaser/teaser_standard",
+            "includeModel": {
+                "byline": "Do. 22.12.2022 22:30 Uhr",
+                "title": "Mittendrin - Frankfurt Flughafen (19)",
+                "topline": "",
+                "headingFontVariant": "serif",
+                "extendedTitle": "Einsatz für die Enteiser am Flughafen",
+                "teaserType": "standard-ds",
+                "teaserSize": "hero",
+                "isMobile1to1": false,
+                "teaserDate": {
+                    "htmlDateTime": "2022-04-17T19:30+0200",
+                    "htmlDate": "20.02.1983",
+                    "date": "17.04.22",
+                    "dateSeparatorTime": "17.04.22, 19:30"
+                },
+                "teaserInfo": {
+                    "showTeaserInfo": true,
+                    "showTeaserInfoSection": false,
+                    "showTeaserInfoChannel": false,
+                    "showTeaserInfoAll": false,
+                    "showTeaserInfoDate": false,
+                    "showTeaserInfoDateTime": false,
+                    "showTeaserInfoProgramRef": true
+                },
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "teaser_standard",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "jugendfeuerwehr-102"
+                        }
+                    ]
+                },
+                "displayTeaserBodyAsImageOverlay": false,
+                "hasMediaButtons": true,
+                "dontLazyload": true,
+                "isStandardTeaser": true,
+                "isHeroTeaser": true,
+                "isMediaTeaser": true,
+                "isGuide": false,
+                "isProgram": true,
+                "isEvent": false,
+                "isTicker": false,
+                "isAudio": false,
+                "isVideo": false,
+                "isPodcastEpisode": false,
+                "isExtOrBrandLink": false,
+                "isAuthor": false,
+                "isFileDownload": false,
+                "copyright": "Copyright Text",
+                "audioAuthor": "Audio Author",
+                "hasStatus": false,
+                "hasTeaserItem": true,
+                "allowAVConsumption": false,
+                "displayEpgInfos": true,
+                "aspectRatio": "ar--teaserTop",
+                "hideGeotag": false,
+                "hideEditableByline": false,
+                "doTracking": true,
+                "trackingForArdMediatheksLink": true,
+                "showMediatheksLink": true,
+                "showAirdate": true,
+                "showProfileInfoAsByline": false,
+                "obsolet_brandOfTeaser": "hessenschau",
+                "documentSection": "",
+                "headlineTag": "h1",
+                "icon": "ortsmarke",
+                "imageVariant": "topteaser",
+                "shorttext": "Flughafen Frankfurt, 5 Uhr morgens: Nebel und Temperaturen um null Grad. Eisschichten haben sich auf den Tragflächen der Flugzeuge gebildet. So dürfen die Maschinen nicht abheben. Ein Fall für die Enteiser an Deutschlands größtem Flughafen. Mit ihren gigantischen Spezialfahrzeugen fahren sie zu den Positionen am Gate",
+                "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
+                "profiles": "",
+                "teaserLead": {
+                    "avDocument": "",
+                    "image": ""
+                },
+                "link": {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": true,
+                    "hasIcon": true,
+                    "iconName": "extern",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zur ARD Mediathek",
+                        "readMore": "Zur ARD Mediathek",
+                        "readMoreLong": "Zur ARD Mediathek"
+                    }
+                },
+                "label": {
+                    "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                    "@->contentpath": "program"
+                }
+            }
+        }
+    },
     "teaserWithComments": {
         "isSsi": true,
         "logicItem": {

package/src/assets/tailwind.css

@@ -29,9 +29,13 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
+    /* Sendungsdokument */
+    --color-label-program: theme('colors.blue.pacificBlue');
     /* Dachzeile */
     --color-topline: #006dc1;
-    /* Link */
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.blue.deepCerulean');
     /* Stage */
     --color-stage-text-box: theme('colors.blue.deepCerulean');
@@ -69,7 +73,9 @@
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Dachzeile */
     --color-topline: #006dc1;
-    /* Link */
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.blue.science');
     /*Stage */
     --color-stage-text-box: theme('colors.grey.armadillo');
@@ -101,8 +107,10 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: theme('colors.purple.jazzberry');
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.purple.jazzberry');
     /* Stage */
     --color-stage-text-box: theme('colors.white.blackhaze');
@@ -130,8 +138,10 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: theme('colors.blue.jellyBean');
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.blue.jellyBean');
     /* Stage */
     --color-stage-text-box: theme('colors.blue.astronautBlue');
@@ -160,7 +170,9 @@
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: theme('colors.blue.deepCerulean');
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
 }
@@ -186,7 +198,9 @@
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: theme('colors.blue.deepCerulean');
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
 }
@@ -210,7 +224,9 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: theme('colors.red.wellRead');
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.red.wellRead');
     /* Stage */
@@ -238,7 +254,9 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: theme('colors.teal.DEFAULT');
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.teal.DEFAULT');
     /* Stage */
@@ -268,7 +286,9 @@
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
     /* Dachzeile */
-    --color-topline: #c20016;
+    --color-topline: theme('colors.blue.deepCerulean');
+    /* Subline */
+    --color-subline: var(--color-topline);
     /* Link */
     --color-link: theme('colors.blue.deepCerulean');
     /* Stage */
@@ -294,8 +314,10 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: theme('colors.yellow.olive');
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.yellow.olive');
     /* Stage */
     --color-stage-text-box: theme('colors.grey.armadillo');
@@ -322,8 +344,10 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: theme('colors.red.paprika');
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.red.paprika');
     /* Stage */
     --color-stage-text-box: theme('colors.white.DEFAULT');
@@ -351,8 +375,10 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: theme('colors.red.monza');
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.red.monza');
     /* Stage */
     --color-stage-text-box: theme('colors.white.DEFAULT');
@@ -382,8 +408,10 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: theme('colors.green.eden');
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.green.eden');
     /* Stage */
     --color-stage-text-box: theme('colors.white.DEFAULT');
@@ -411,8 +439,10 @@
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
     /* Dachzeile */
-    --color-topline: #c20016;
-    /* Link */
+    --color-topline: theme('colors.blue.lightCerulean');
+    /* Subline */
+    --color-subline: var(--color-topline);
+    /* Link */ 
     --color-link: theme('colors.blue.lightCerulean');
     /* Stage */
     --color-stage-text-box: theme('colors.white.DEFAULT');

package/src/stories/views/components/teaser/components/teaser_body.hbs

@@ -1,6 +1,6 @@
 <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
     <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
-        {{#decorator 'components/base/link' _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }} 
+        {{#decorator 'components/base/link' _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2=(if this.trackingForArdMediatheksLink 'ARD-Mediatheksvideo Überschrift geklickt' 'headlineLink') }} 
             {{> components/teaser/components/teaser_heading 
             _fontVariant=this.headingFontVariant
             _headlineTag=this.headlineTag 
@@ -10,7 +10,8 @@
             _title=this.title 
             _topline=this.topline 
             _teaserType=this.teaserType
-            _isMobile1to1=this.isMobile1to1}}            
+            _isMobile1to1=this.isMobile1to1
+            _extendedTitle=this.extendedTitle}}            
         {{/decorator}}   
     </header>
     <div class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">