hr-design-system-handlebars 0.100.0 → 0.102.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v0.102.0 (Fri Dec 09 2022)
+
+#### 🚀 Enhancement
+
+- Truncate long geotag with Ellipsis [#425](https://github.com/mumprod/hr-design-system-handlebars/pull/425) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
+# v0.101.0 (Thu Dec 08 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1904 mobile [#424](https://github.com/mumprod/hr-design-system-handlebars/pull/424) ([@vascoeduardo](https://github.com/vascoeduardo) [@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@szuelch](https://github.com/szuelch)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.100.0 (Thu Dec 08 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -781,6 +781,10 @@ video {
   margin-left: 1px;
   margin-right: 1px;
 }
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
 .my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
@@ -797,10 +801,6 @@ video {
   margin-left: 0.375rem;
   margin-right: 0.375rem;
 }
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1041,6 +1041,9 @@ video {
 .w-5 {
   width: 1.25rem;
 }
+.w-3\/5 {
+  width: 60%;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -1095,6 +1098,11 @@ video {
   width: -moz-fit-content !important;
   width: fit-content !important;
 }
+.max-w-min {
+  max-width: -webkit-min-content;
+  max-width: -moz-min-content;
+  max-width: min-content;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -1253,6 +1261,9 @@ video {
 .gap-y-9 {
   row-gap: 2.25rem;
 }
+.gap-y-10 {
+  row-gap: 2.5rem;
+}
 .gap-y-3 {
   row-gap: 0.75rem;
 }
@@ -2197,7 +2208,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1670521000087;
+  counter-reset: cnt1670589689556;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2425,7 +2436,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1670521000087 1;
+  counter-increment: cnt1670589689556 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2441,7 +2452,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1670521000087);
+  content: counter(cnt1670589689556);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/views/components/geoTag/geoTag.hbs

@@ -1,5 +1,5 @@
 <span
-    class='z-10 pointer-events-none inline-block absolute bottom-0 left-0 {{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
+    class='w-3/5 max-w-min truncate z-10 pointer-events-none inline-block absolute bottom-0 left-0 {{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
     aria-hidden="true"
 >
     {{_text}}

package/dist/views/components/grid/grid_group_highlight.hbs

@@ -6,4 +6,4 @@
         </div>
     </section>
 </div>
-<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
+<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">

package/dist/views/components/grid/grid_group_tabbed.hbs

@@ -2,4 +2,4 @@
 <section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
-<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
+<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">

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

@@ -1,31 +1,30 @@
-<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif empty:hidden">
-    {{!--   TODO eine Java Methode die abfragt ob es 
-            teaserInfo || isFileDownload || this.profiles || this.commentsSsi 
-            gibt um empty:hidden zu vermeiden. <p> </p> sollte nicht im Markup sein falls leer --}}
-    {{~#with this.teaserInfo~}}
+{{#if this.hasByline}}
+    <p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif empty:hidden">
         {{!--Teaser-Info--}}
-        {{~#if this.showTeaserInfo~}}
-            {{~#if this.showTeaserInfoDate~}}
-                {{~#with ../this.teaserDate~}}
-                    <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
-                {{~/with~}}                    
-                <span class="mx-px last-of-type:hidden">|</span>                    
-            {{~else~}}
-                {{~#if this.showTeaserInfoDateTime~}}
+        {{~#with this.teaserInfo~}}
+            {{~#if this.showTeaserInfo~}}
+                {{~#if this.showTeaserInfoDate~}}
                     {{~#with ../this.teaserDate~}}
-                        <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
-                    {{~/with~}}                        
-                    <span class="mx-px last-of-type:hidden">|</span>                        
+                        <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
+                    {{~/with~}}
+                    <span class="mx-1 last-of-type:hidden">|</span>
+                    {{~else~}}
+                    {{~#if this.showTeaserInfoDateTime~}}
+                        {{~#with ../this.teaserDate~}}
+                            <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
+                        {{~/with~}}
+                        <span class="mx-1 last-of-type:hidden">|</span>
+                    {{~/if~}}
+                {{~/if~}}
+                {{~#if this.showTeaserInfoSection~}}
+                    <span class="uppercase">
+                        {{~../this.documentSection~}}
+                    </span>
+                    <span class="mx-1 last-of-type:hidden">|</span>
                 {{~/if~}}
-            {{~/if~}}    
-            {{~#if this.showTeaserInfoSection~}}
-                <span class="uppercase">
-                    {{~../this.documentSection~}}
-                </span>                    
-                <span class="mx-px last-of-type:hidden">|</span>                    
             {{~/if~}}
-        {{~/if~}}
-    {{~/with~}}
+        {{~/with~}}
+        {{!--File download--}}
         {{~#if this.isFileDownload~}}
             {{~#with this.teaserImage~}}
                 {{loca "gallery_image_copyright" this.copyrightWithLinks}}
@@ -33,11 +32,12 @@
         {{~/if~}}
         {{!--Profiles--}}
         {{~#if this.profiles~}}
-            <span>{{this.profiles}}</span>            
-            <span class="mx-px last-of-type:hidden">|</span>            
+            <span>{{this.profiles}}</span>
+            <span class="mx-1 last-of-type:hidden">|</span>
         {{~/if~}}
-    {{!--Comments--}}
-    {{~#with this.commentsSsi~}}
-        {{> components/base/loadSSI _templatePath='components/teaser/components/teaser_comments' }}    
-    {{~/with~}}
-</p>
+        {{!--Comments--}}
+        {{~#with this.commentsSsi~}}
+            {{> components/base/loadSSI _templatePath='components/teaser/components/teaser_comments' }}
+        {{~/with~}}
+    </p>
+{{/if}}

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

@@ -1,32 +1,32 @@
-<div class="relative">
-{{#unless this.hideGeotag}}
-    {{#unless _isMobile1to1}}
-        {{~#with this.geotag}}
-            {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize }}
-        {{/with~}}
+<div class="relative{{~#if _isMobile1to1}} ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
+    {{#unless this.hideGeotag}}
+        {{#unless _isMobile1to1}}
+            {{~#with this.geotag}}
+                {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize }}
+            {{/with~}}
+        {{/unless}}
     {{/unless}}
-{{/unless}}
-{{#decorator 'components/base/link' _isAriaHidden=true}}
-    {{~> 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}}
-            {{> 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-toplineColor'
-        _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}}
+    {{#decorator 'components/base/link' _isAriaHidden=true}}
+        {{~> 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}}
+                {{> 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-toplineColor'
+            _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}}
-{{/if}}
-</div> 
+</div>
 {{#if this.isEvent}}
     {{#unless this.displayTeaserBodyAsImageOverlay}}
         {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}

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

@@ -6,7 +6,7 @@
                 {{~#if this.hasLink}}</a>{{/if~}}
             </{{if this.headlineTag this.headlineTag "h2"}}>
         {{/if}}  
-        <div class="grid items-start content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6 md:gap-y-14">
+        <div class="grid items-start content-start grid-cols-12 col-span-12 gap-x-6 gap-y-10 md:gap-y-14">
             {{~> components/teaser/teaser_logic/teaser_logic ~}}
         </div>
 {{/components/grid/grid_group}}

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -22,4 +22,4 @@
     {{~> components/teaser/teaser_logic/teaser_logic ~}}
   </section>
 </div>
-<div class="grid grid-cols-12 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
+<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6 md:gap-y-14">

package/package.json

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

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

@@ -18,6 +18,7 @@
                     "date": "17.04.22",
                     "dateSeparatorTime": "17.04.22, 19:30"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -134,6 +135,7 @@
                     "date": "11.10.22",
                     "dateSeparatorTime": "11.10.22, 06:57"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -229,6 +231,7 @@
                     "date": "25.10.22",
                     "dateSeparatorTime": "25.10.22, 12:35"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -324,6 +327,7 @@
                     "date": "23.10.22",
                     "dateSeparatorTime": "23.10.22, 16:04"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -423,6 +427,7 @@
                     "date": "13.10.22",
                     "dateSeparatorTime": "13.10.22, 16:04"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -523,6 +528,7 @@
                     "date": "11.10.22",
                     "dateSeparatorTime": "11.10.22, 19:46"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -622,6 +628,7 @@
                     "date": "09.08.22",
                     "dateSeparatorTime": "09.08.22, 19:46"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -725,6 +732,7 @@
                     "date": "02.10.20",
                     "dateSeparatorTime": "02.10.20, 19:46"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -827,9 +835,10 @@
                     "date": "14.10.22",
                     "dateSeparatorTime": "14.10.22, 20:00"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
-                    "showTeaserInfoSection": true,
+                    "showTeaserInfoSection": false,
                     "showTeaserInfoChannel": true,
                     "showTeaserInfoAll": true,
                     "showTeaserInfoDate": false,
@@ -941,6 +950,7 @@
                     "date": "17.04.22",
                     "dateSeparatorTime": "17.04.22, 19:30"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -1041,6 +1051,7 @@
                     "date": "17.04.22",
                     "dateSeparatorTime": "17.04.22, 19:30"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": false,
@@ -1140,6 +1151,7 @@
                     "date": "17.04.22",
                     "dateSeparatorTime": "17.04.22, 19:30"
                 },
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,
@@ -1265,6 +1277,7 @@
                     ]
                 },
                 "duration": "53:13",
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": true,
                     "showTeaserInfoSection": true,

package/src/stories/views/components/geoTag/geoTag.hbs

@@ -1,5 +1,5 @@
 <span
-    class='z-10 pointer-events-none inline-block absolute bottom-0 left-0 {{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
+    class='w-3/5 max-w-min truncate z-10 pointer-events-none inline-block absolute bottom-0 left-0 {{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
     aria-hidden="true"
 >
     {{_text}}

package/src/stories/views/components/grid/grid_group_highlight.hbs

@@ -6,4 +6,4 @@
         </div>
     </section>
 </div>
-<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
+<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">

package/src/stories/views/components/grid/grid_group_tabbed.hbs

@@ -2,4 +2,4 @@
 <section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
-<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
+<div class="grid grid-cols-12 sm:px-8 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">

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

@@ -1,31 +1,30 @@
-<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif empty:hidden">
-    {{!--   TODO eine Java Methode die abfragt ob es 
-            teaserInfo || isFileDownload || this.profiles || this.commentsSsi 
-            gibt um empty:hidden zu vermeiden. <p> </p> sollte nicht im Markup sein falls leer --}}
-    {{~#with this.teaserInfo~}}
+{{#if this.hasByline}}
+    <p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif empty:hidden">
         {{!--Teaser-Info--}}
-        {{~#if this.showTeaserInfo~}}
-            {{~#if this.showTeaserInfoDate~}}
-                {{~#with ../this.teaserDate~}}
-                    <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
-                {{~/with~}}                    
-                <span class="mx-px last-of-type:hidden">|</span>                    
-            {{~else~}}
-                {{~#if this.showTeaserInfoDateTime~}}
+        {{~#with this.teaserInfo~}}
+            {{~#if this.showTeaserInfo~}}
+                {{~#if this.showTeaserInfoDate~}}
                     {{~#with ../this.teaserDate~}}
-                        <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
-                    {{~/with~}}                        
-                    <span class="mx-px last-of-type:hidden">|</span>                        
+                        <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
+                    {{~/with~}}
+                    <span class="mx-1 last-of-type:hidden">|</span>
+                    {{~else~}}
+                    {{~#if this.showTeaserInfoDateTime~}}
+                        {{~#with ../this.teaserDate~}}
+                            <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
+                        {{~/with~}}
+                        <span class="mx-1 last-of-type:hidden">|</span>
+                    {{~/if~}}
+                {{~/if~}}
+                {{~#if this.showTeaserInfoSection~}}
+                    <span class="uppercase">
+                        {{~../this.documentSection~}}
+                    </span>
+                    <span class="mx-1 last-of-type:hidden">|</span>
                 {{~/if~}}
-            {{~/if~}}    
-            {{~#if this.showTeaserInfoSection~}}
-                <span class="uppercase">
-                    {{~../this.documentSection~}}
-                </span>                    
-                <span class="mx-px last-of-type:hidden">|</span>                    
             {{~/if~}}
-        {{~/if~}}
-    {{~/with~}}
+        {{~/with~}}
+        {{!--File download--}}
         {{~#if this.isFileDownload~}}
             {{~#with this.teaserImage~}}
                 {{loca "gallery_image_copyright" this.copyrightWithLinks}}
@@ -33,11 +32,12 @@
         {{~/if~}}
         {{!--Profiles--}}
         {{~#if this.profiles~}}
-            <span>{{this.profiles}}</span>            
-            <span class="mx-px last-of-type:hidden">|</span>            
+            <span>{{this.profiles}}</span>
+            <span class="mx-1 last-of-type:hidden">|</span>
         {{~/if~}}
-    {{!--Comments--}}
-    {{~#with this.commentsSsi~}}
-        {{> components/base/loadSSI _templatePath='components/teaser/components/teaser_comments' }}    
-    {{~/with~}}
-</p>
+        {{!--Comments--}}
+        {{~#with this.commentsSsi~}}
+            {{> components/base/loadSSI _templatePath='components/teaser/components/teaser_comments' }}
+        {{~/with~}}
+    </p>
+{{/if}}

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

@@ -1,32 +1,32 @@
-<div class="relative">
-{{#unless this.hideGeotag}}
-    {{#unless _isMobile1to1}}
-        {{~#with this.geotag}}
-            {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize }}
-        {{/with~}}
+<div class="relative{{~#if _isMobile1to1}} ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
+    {{#unless this.hideGeotag}}
+        {{#unless _isMobile1to1}}
+            {{~#with this.geotag}}
+                {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize }}
+            {{/with~}}
+        {{/unless}}
     {{/unless}}
-{{/unless}}
-{{#decorator 'components/base/link' _isAriaHidden=true}}
-    {{~> 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}}
-            {{> 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-toplineColor'
-        _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}}
+    {{#decorator 'components/base/link' _isAriaHidden=true}}
+        {{~> 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}}
+                {{> 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-toplineColor'
+            _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}}
-{{/if}}
-</div> 
+</div>
 {{#if this.isEvent}}
     {{#unless this.displayTeaserBodyAsImageOverlay}}
         {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}

package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif.json

@@ -1 +1 @@
-{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"100","isMobile1to1":"true","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":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"100","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif_audio.json

@@ -1 +1 @@
-{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Der Hasebe-Kane-Nahkampf geht in die zweite Runde","topline":"Eintracht trifft auf Tottenham","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"100","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-10-11T19:46+0200","htmlDate":"11.10.2022","date":"11.10.22","dateSeparatorTime":"11.10.22, 19:46"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/hasebe-kane-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"images/hasebe-kane-102_v-1to1__small.jpg 380w, images/hasebe-kane-102_v-1to1__medium.jpg 480w, images/hasebe-kane-102_v-1to1.jpg 720w, images/hasebe-kane-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"images/hasebe-kane-102_v-16to9__small.jpg 320w, images/hasebe-kane-102_v-16to9__medium.jpg 480w, images/hasebe-kane-102_v-16to9__medium__extended.jpg 640w, images/hasebe-kane-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":true,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":true,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":true,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Sport","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Beim Hinspiel brachte Altmeister Makoto Hasebe Sturm-Star Harry Kane bis an den Rande der Verzweiflung. Der bittet im Rückspiel nun zur Revanche. Vorher gibt es aber lobende Worte.","sophoraId":"hasebe-kane-100","profiles":"Von Nicolas Herold aus London","teaserLead":{"avDocument":{"isAudio":true,"toModel":{"audioElement":{"isPodcast":false,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"100"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"100"}}}},"image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Der Hasebe-Kane-Nahkampf geht in die zweite Runde","topline":"Eintracht trifft auf Tottenham","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"100","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-10-11T19:46+0200","htmlDate":"11.10.2022","date":"11.10.22","dateSeparatorTime":"11.10.22, 19:46"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/hasebe-kane-102_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"images/hasebe-kane-102_v-1to1__small.jpg 380w, images/hasebe-kane-102_v-1to1__medium.jpg 480w, images/hasebe-kane-102_v-1to1.jpg 720w, images/hasebe-kane-102_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"images/hasebe-kane-102_v-16to9__small.jpg 320w, images/hasebe-kane-102_v-16to9__medium.jpg 480w, images/hasebe-kane-102_v-16to9__medium__extended.jpg 640w, images/hasebe-kane-102_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":true,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":true,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":true,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Sport","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Beim Hinspiel brachte Altmeister Makoto Hasebe Sturm-Star Harry Kane bis an den Rande der Verzweiflung. Der bittet im Rückspiel nun zur Revanche. Vorher gibt es aber lobende Worte.","sophoraId":"hasebe-kane-100","profiles":"Von Nicolas Herold aus London","teaserLead":{"avDocument":{"isAudio":true,"toModel":{"audioElement":{"isPodcast":false,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"100"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"100"}}}},"image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}