hr-design-system-handlebars 0.87.0 → 0.87.2

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v0.87.2 (Wed Nov 23 2022)
+
+#### 🐛 Bug Fix
+
+- DPE-1875: fixes wrong playbutton-distances [#395](https://github.com/mumprod/hr-design-system-handlebars/pull/395) (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.87.1 (Tue Nov 22 2022)
+
+#### 🐛 Bug Fix
+
+- change Podcast playbutton to Audio playbutton [#392](https://github.com/mumprod/hr-design-system-handlebars/pull/392) (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.87.0 (Tue Nov 22 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -662,15 +662,15 @@ video {
 .right-0 {
   right: 0px;
 }
-.top-0 {
-  top: 0px;
-}
 .left-1\/2 {
   left: 50%;
 }
 .top-1\/2 {
   top: 50%;
 }
+.top-0 {
+  top: 0px;
+}
 .top-10 {
   top: 2.5rem;
 }
@@ -739,39 +739,36 @@ video {
 .\!m-0 {
   margin: 0px !important;
 }
-.m-5 {
-  margin: 1.25rem;
-}
 .m-1\.5 {
   margin: 0.375rem;
 }
 .m-1 {
   margin: 0.25rem;
 }
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-.mx-0 {
-  margin-left: 0px;
-  margin-right: 0px;
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
 }
 .mx-5 {
   margin-left: 1.25rem;
   margin-right: 1.25rem;
 }
-.my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
 }
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
 .mx-8 {
   margin-left: 2rem;
   margin-right: 2rem;
@@ -2252,7 +2249,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1669107292058;
+  counter-reset: cnt1669207976289;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2641,7 +2638,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1669107292058 1;
+  counter-increment: cnt1669207976289 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2657,7 +2654,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1669107292058);
+  content: counter(cnt1669207976289);
 }
 .\[-T\:\+Z\] {
   --t: +Z;
@@ -3453,6 +3450,26 @@ video {
     grid-column: span 9 / span 9;
   }
 
+  .md\:my-3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .md\:mx-3 {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+  }
+
+  .md\:my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .md\:mx-5 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+  }
+
   .md\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
@@ -3468,16 +3485,6 @@ video {
     margin-bottom: 1rem;
   }
 
-  .md\:my-3 {
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .md\:mx-3 {
-    margin-left: 0.75rem;
-    margin-right: 0.75rem;
-  }
-
   .md\:mt-0 {
     margin-top: 0px;
   }

package/dist/views/components/button/button.hbs

@@ -3,7 +3,7 @@
     {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} 
     {{~#if _name}} name="{{_name}}"{{/if}} 
     {{~#if _title}} title="{{_title}}"{{/if}} 
-    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{_buttonSpace}}{{/if}}{{#if _webview}} -webview{{/if}}" 
+    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType}}{{/if}}{{#if _webview}} -webview{{/if}}"
     {{~#if _value}} value="{{_value}}"{{/if}} 
     {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} 
     {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} 

package/dist/views/components/button/button_round.hbs

@@ -15,5 +15,8 @@
     _alpineClick=_alpineClick
     _srOnly=_srOnly
     _buttonColor=_buttonColor
-    _buttonSpace=_buttonSpace
+    _buttonSpace=true
+    _teaserType=_teaserType
+    _teaserSize=_teaserSize
+    _isMobile1to1=_isMobile1to1
 }}

package/dist/views/components/button/button_round_classes.hbs

@@ -0,0 +1,24 @@
+{{~#switch _teaserType~}}
+    {{~#case 'standard-ds'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-5 md:mx-5 "]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch
+                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]'
+            ~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'alternative-ds'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-5 md:mx-5"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch
+                _teaserSize '["hero","100","50"]' '[" my-5 mx-5"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
+            ~}}
+        {{~/if~}}
+    {{~/case~}}
+{{~/switch~}}

package/dist/views/components/mediaplayer/media_player.hbs

@@ -24,19 +24,14 @@
         _isButton="true" 
         _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
         _buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-blue-jellyBean hover:fill-blue-jellyBean')
-        _buttonSpace=(inline-switch _teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
-        _showIcon=true 
+        _teaserType=_teaserType
+        _teaserSize=_teaserSize
+        _isMobile1to1=_isMobile1to1
+        _showIcon=true
         _icon=_mediaButtonIcon 
         _label=_mediaButtonLabel 
         _srOnly="true" 
         _alpineClick="avStart = !avStart; $dispatch('player_start')"
         }}    
-        {{~#if this.isPodcast~}}
-            <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with
-                    this.trackingData}}
-            data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
-                {{> components/base/image/icon _icon='download-button' _addClass="w-10 h-10"}}
-            </a>
-        {{~/if~}}
     </div>
 {{/if}}

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

@@ -1,7 +1,7 @@
 {{#with this.teaserLead.avDocument}}
      {{~#if this.isVideo ~}}
           {{#with this.toModel.videoElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -9,7 +9,7 @@
      {{~/if~}}
      {{~#if this.isAudio ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}                  
+               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}                  
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -17,7 +17,7 @@
      {{~/if~}}
      {{~#if this.isPodcast ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="podcast-button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             
+               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -25,7 +25,7 @@
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
           {{#with this.toModel.audioLivestreamElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -33,7 +33,7 @@
      {{~/if~}}
      {{~#if this.isLivestream ~}}
           {{#with this.toModel.videoLivestreamElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}

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 }}
+    {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _teaserType=_teaserType }}
 {{else}}    
     {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 }}
 {{/if}}

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

@@ -5,7 +5,7 @@
     {{/if}} 
     >
     <figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/2"]'~}}">
-        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 
+        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.teaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 
     </figure>
     {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize '["hero","100","50"]' '["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]') }}
 </article>

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

@@ -9,11 +9,11 @@
     >
     <figure class="relative 
     {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
-        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}     
+        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}     
     </figure>
     {{#if this.displayTeaserBodyAsImageOverlay}}
         {{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
-            <div class="flex flex-col items-center justify-center p-4 border-dashed border-r border-gray-400">
+            <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed">
                 {{> components/event/instant_dates}}
             </div>
             {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'py-4 md:px-4 basis-3/5 md:flex-full' 'py-4 md:px-4')}}

package/package.json

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

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

@@ -3,7 +3,7 @@
     {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} 
     {{~#if _name}} name="{{_name}}"{{/if}} 
     {{~#if _title}} title="{{_title}}"{{/if}} 
-    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{_buttonSpace}}{{/if}}{{#if _webview}} -webview{{/if}}" 
+    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType}}{{/if}}{{#if _webview}} -webview{{/if}}"
     {{~#if _value}} value="{{_value}}"{{/if}} 
     {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} 
     {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} 

package/src/stories/views/components/button/button_round.hbs

@@ -15,5 +15,8 @@
     _alpineClick=_alpineClick
     _srOnly=_srOnly
     _buttonColor=_buttonColor
-    _buttonSpace=_buttonSpace
+    _buttonSpace=true
+    _teaserType=_teaserType
+    _teaserSize=_teaserSize
+    _isMobile1to1=_isMobile1to1
 }}

package/src/stories/views/components/button/button_round_classes.hbs

@@ -0,0 +1,24 @@
+{{~#switch _teaserType~}}
+    {{~#case 'standard-ds'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-5 md:mx-5 "]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch
+                _teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]'
+            ~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'alternative-ds'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-5 md:mx-5"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch
+                _teaserSize '["hero","100","50"]' '[" my-5 mx-5"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
+            ~}}
+        {{~/if~}}
+    {{~/case~}}
+{{~/switch~}}

package/src/stories/views/components/mediaplayer/media_player.hbs

@@ -24,19 +24,14 @@
         _isButton="true" 
         _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
         _buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-blue-jellyBean hover:fill-blue-jellyBean')
-        _buttonSpace=(inline-switch _teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
-        _showIcon=true 
+        _teaserType=_teaserType
+        _teaserSize=_teaserSize
+        _isMobile1to1=_isMobile1to1
+        _showIcon=true
         _icon=_mediaButtonIcon 
         _label=_mediaButtonLabel 
         _srOnly="true" 
         _alpineClick="avStart = !avStart; $dispatch('player_start')"
         }}    
-        {{~#if this.isPodcast~}}
-            <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with
-                    this.trackingData}}
-            data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
-                {{> components/base/image/icon _icon='download-button' _addClass="w-10 h-10"}}
-            </a>
-        {{~/if~}}
     </div>
 {{/if}}

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

@@ -1,7 +1,7 @@
 {{#with this.teaserLead.avDocument}}
      {{~#if this.isVideo ~}}
           {{#with this.toModel.videoElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize _isMobile1to1=../../_isMobile1to1 _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -9,7 +9,7 @@
      {{~/if~}}
      {{~#if this.isAudio ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}                  
+               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}                  
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -17,7 +17,7 @@
      {{~/if~}}
      {{~#if this.isPodcast ~}}
           {{#with this.toModel.audioElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="podcast-button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             
+               {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -25,7 +25,7 @@
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
           {{#with this.toModel.audioLivestreamElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}
@@ -33,7 +33,7 @@
      {{~/if~}}
      {{~#if this.isLivestream ~}}
           {{#with this.toModel.videoLivestreamElement}}
-               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag~}}             
+               {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this  _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize _geotag=../../this.geotag _hideGeotag=../../this.hideGeotag _teaserType=../../_teaserType~}}             
                {{#if ../../_isMobile1to1~}}  
                     {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}
                {{~/if~}}

package/src/stories/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 }}
+    {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _teaserType=_teaserType }}
 {{else}}    
     {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 }}
 {{/if}}

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

@@ -5,7 +5,7 @@
     {{/if}} 
     >
     <figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/2"]'~}}">
-        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 
+        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.teaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 
     </figure>
     {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize '["hero","100","50"]' '["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]') }}
 </article>

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

@@ -9,11 +9,11 @@
     >
     <figure class="relative 
     {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
-        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}     
+        {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}     
     </figure>
     {{#if this.displayTeaserBodyAsImageOverlay}}
         {{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
-            <div class="flex flex-col items-center justify-center p-4 border-dashed border-r border-gray-400">
+            <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed">
                 {{> components/event/instant_dates}}
             </div>
             {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'py-4 md:px-4 basis-3/5 md:flex-full' 'py-4 md:px-4')}}