hr-design-system-handlebars 0.116.5 → 0.117.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.117.1 (Tue Jan 10 2023)
+
+#### 🐛 Bug Fix
+
+- realTeaserSize for DPE-1982 [#465](https://github.com/mumprod/hr-design-system-handlebars/pull/465) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.117.0 (Tue Jan 10 2023)
+
+#### 🚀 Enhancement
+
+- Dpe 1982 [#460](https://github.com/mumprod/hr-design-system-handlebars/pull/460) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.116.5 (Tue Jan 10 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2227,7 +2227,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1673355325886;
+  counter-reset: cnt1673365156169;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2459,7 +2459,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1673355325886 1;
+  counter-increment: cnt1673365156169 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2475,7 +2475,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1673355325886);
+  content: counter(cnt1673365156169);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/assets/js/components/mediaplayer/mediaplayerLoader.feature.js

@@ -8,7 +8,7 @@ const MediaplayerLoader = function (context) {
     const { options } = context,
         { element: rootElement } = context,
         isAutoplay = options.isAutoplay,
-        teaserSize = options.teaserSize,
+        teasersize = options.teasersize,
         mediaplayerButton = hr$('.js-mediaplayer__button', rootElement.parentNode)[0]
 
     const removeVideoHover = function () {
@@ -19,7 +19,7 @@ const MediaplayerLoader = function (context) {
     const loadArdPlayerLoader = function () {
         new ArdPlayerLoader(options)
         removeVideoHover()
-        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+        uxAction('mediabuttonclick::' + teasersize + '::playButtonClick')
     }
 
     if (isAutoplay) {

package/dist/views/components/content_nav/content_nav.hbs

@@ -2,14 +2,14 @@
     {{#if this.isListOrFlow}}
         <nav x-cloak class="w-full px-2 md:px-0 c-content-nav">
             {{> components/content_nav/content_nav_container
-                    _teasersize=../_teasersize
+                    _teaserSize=../_teaserSize
                     _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
             }}
         </nav>
     {{else}}
         {{#decorator 'components/content_nav/content_nav_dropdown'
                      _componentClass="c-content-nav h-10 md:h-auto w-full"
-                     _teasersize=../_teasersize
+                     _teaserSize=../_teaserSize
                      _iconOpen="arrow-down"
                      _iconClose="arrow-up"
                      _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
@@ -17,7 +17,7 @@
         }}
             
         {{> components/content_nav/content_nav_container
-                _teasersize=_teasersize
+                _teaserSize=_teaserSize
                 _maindivclass="flex flex-col w-full mt-0"
         }}
             

package/dist/views/components/content_nav/content_nav_container.hbs

@@ -14,6 +14,6 @@
         </div>
     {{/if}}
 
-    {{> components/content_nav/content_nav_list _teasersize=_teasersize }}
+    {{> components/content_nav/content_nav_list _teaserSize=_teaserSize }}
 
 </div>

package/dist/views/components/content_nav/content_nav_dropdown.hbs

@@ -7,7 +7,7 @@
 
     <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
 
-    <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
+    <div x-show="shouldDropdownBeShown({{_teaserSize}},{{this.isDropdown}},{{this.isMixed}})"
          :class="contentNavDropdownIsOpen ? 'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]' : ''"
          class="relative flex w-auto h-10 mx-2 mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
          @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  $dispatch('hr:global:resetinputAutoSuggest');" 
@@ -26,7 +26,7 @@
             </button>
         </div>
     </div>
-    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
+    <div x-show="shouldContentBeShown({{_teaserSize}},{{this.isDropdown}},{{this.isMixed}})"
          aria-haspopup="true"
          @click.outside="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest');"
          :class="contentNavDropdownIsOpen ? 'z-9999 relative' : ' z-1003'"

package/dist/views/components/content_nav/content_nav_item.hbs

@@ -1,4 +1,4 @@
-<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
+<li x-init="chooseListItemStyles({{_teaserSize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
 class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-button fill-content-nav text-content-nav bg-white hover:bg-content-nav hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">
      {{#decorator 'components/base/link' 
         _doNavigationTracking="true" 

package/dist/views/components/content_nav/content_nav_list.hbs

@@ -1,5 +1,5 @@
 <ul class="flex bg-white md:bg-transparent flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2  {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
-    :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full ' : ''"
+    :class="( ({{this.isMixed}} && {{_teaserSize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full ' : ''"
     > 
     
     {{~#each this.contentNavEntries~}}
@@ -12,7 +12,7 @@
                     <ul class="c-content-nav__group-list !px-0 mt-0">
                         {{~#each this.navigationGroup~}}
                             {{> components/content_nav/content_nav_item 
-                                _teasersize=../../_teasersize 
+                                _teaserSize=../../_teaserSize 
                                 _isdropdown=../../isDropdown 
                                 _ismixed=../../isMixed 
                                 _islist=../../isList 
@@ -23,7 +23,7 @@
             {{/if}}
         {{else}}           
             {{> components/content_nav/content_nav_item  
-                _teasersize=../_teasersize 
+                _teaserSize=../_teaserSize 
                 _isdropdown=../isDropdown 
                 _ismixed=../isMixed 
                 _islist=../isList 

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

@@ -3,7 +3,7 @@
         {{> @partial-block }}
     {{/components/grid/grid_group_highlight }}
 {{else}}
-    {{#>components/grid/grid_group_standard _size=this.teaserSize }}  
+    {{#>components/grid/grid_group_standard _groupSize=this.teaserSize }}  
         {{> @partial-block }}
     {{/components/grid/grid_group_standard }}
 {{/if}}

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

@@ -1,3 +1,3 @@
-<section class="grid grid-cols-12 first:mt-6 items-start bg-white content-start gap-x-6 gap-y-5 col-span-12 {{inline-switch _size '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
+<section class="grid grid-cols-12 first:mt-6 items-start bg-white content-start gap-x-6 gap-y-5 col-span-12 {{inline-switch _groupSize '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
     {{> @partial-block }}
 </section>

package/dist/views/components/page/page.hbs

@@ -34,11 +34,11 @@
                         {{> components/teaser/teaser_standard }}
                     </section>
                     <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
-                        {{> components/teaser/content_nav/teaser_content_nav teasersize="100"}}
+                        {{> components/teaser/content_nav/teaser_content_nav teaserSize="100"}}
                     </section>
                     <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
-                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}
-                        {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}
+                        {{> components/teaser/content_nav/teaser_content_nav teaserSize="50"}}
+                        {{> components/teaser/content_nav/teaser_content_nav teaserSize="50"}}
                     </section>
                     <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
                         {{> components/teaser/teaser_standard teaserSize="50"}}

package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -9,6 +9,6 @@
         _ordered=_ordered
         _titleCss='text-clusterTeaserLink'
         _firstItem=_firstItem}}        
-                {{/decorator}}
+{{/decorator}}
 {{> components/teaser/cluster/teaser_cluster_byline _ordered=_ordered}}
                 

package/dist/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -10,7 +10,7 @@
                 <div class="px-0 pb-3 {{~inline-switch ../this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3"]'}}">   
                     {{~> components/base/image/responsive_image this.teaserImage _type=../this.teaserType _variant=../this.imageVariant _addClass=../this.aspectRatio _addClassImg="w-full" ~}}
                     <div class="mx-5 mt-3 {{~inline-switch ../this.teaserSize '["100"]' '[" md:mx-0"]'}}">
-                        {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../this.isOrdered _firstItem=true}}
+                        {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../this.isOrdered _firstItem=true}}
                     </div> 
                 </div>   
             {{/if~}}
@@ -20,7 +20,7 @@
         {{~#if ../this.isOrdered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:border-none"]'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:border-none"]'}}{{/if~}}">{{/if}}
             {{~#each this~}}
                 <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-3 {{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
-                    {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../this.isOrdered }} 
+                    {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}
         {{~#if ../this.isOrdered}}</ol>{{else}}</ul>{{/if~}}

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

@@ -7,7 +7,7 @@
             _headlineCss="overflow-anywhere hyphens-auto"
             _label=this.label 
             _readMore=this.link.readMoreText.readMoreScreenreader 
-            _size=this.teaserSize 
+            _size=this.realTeaserSize 
             _title=this.title 
             _topline=this.topline 
             _teaserType=this.teaserType

package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs

@@ -3,7 +3,7 @@
     ax-load
     ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}
     x-data="contentNavigationHandler()"
-    class="js-contentNavWrapper col-span-full flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
+    class="js-contentNavWrapper col-span-full flex gap-y-3 gap-x-4 js-load {{inline-switch this.teaserSize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
 >
-    {{> components/content_nav/content_nav _teasersize=this.teasersize }}           
+    {{> components/content_nav/content_nav _teaserSize=this.teaserSize }}           
 </div>

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

@@ -1,4 +1,4 @@
-{{#>components/grid/grid_group size=this.teasersize _backgroundColor=this.backgroundColor }}
+{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
 
     <div class="h-auto p-8 mx-4 rounded-tr-none rounded-bl-none bg-highlight-1 rounded-3xl col-span-full {{inline-switch size '["100","50"]' '["","md:col-span-6"]'}}">
         {{~#if this.hasGroupTitle}}

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

@@ -9,7 +9,7 @@
             _headlineCss="text-shadow text-center text-white mb-4 mx-4 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5" 
             _label=this.label 
             _readMore=this.link.readMoreText.readMoreScreenreader 
-            _size=this.teaserSize 
+            _size=this.realTeaserSize 
             _title=this.title
             _titleCss="whitespace-pre-wrap"
             _topline=this.topline 

package/package.json

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

package/src/assets/fixtures/audio/audios.inc.json

@@ -59,7 +59,8 @@
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js",
         "isAutoplay": true,
-        "teaserSize": "100"
+        "teaserSize": "100",
+        "realTeaserSize": "100"
     },
     "audio-podcast": {
         "playerConfig": {
@@ -141,7 +142,8 @@
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js",
         "isAutoplay": true,
-        "teaserSize": "50"
+        "teaserSize": "50",
+        "realTeaserSize": "50"
     },
     "audio-event-livestream": {
         "playerConfig": {
@@ -204,6 +206,7 @@
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js",
         "isAutoplay": true,
-        "teaserSize": "50"
+        "teaserSize": "50",
+        "realTeaserSize": "50"
     }
 }

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "title",
             "@->value": "Neueste Beiträge"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "title",
             "@->value": "NEUESTE BEITRÄGE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "title",
             "@->value": "NEUESTE BEITRÄGE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "title",
             "@->value": "NEUESTE BEITRÄGE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "title",
             "@->value": "NEUESTE BEITRÄGE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "title",
             "@->value": "NEUESTE BEITRÄGE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "title",
             "@->value": "Die meistgeklickten Artikel der Woche"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "50"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "50"
+        },
         {
             "@->contentpath": "title",
             "@->value": "NEUESTE BEITRÄGE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "50"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "50"
+        },
         {
             "@->contentpath": "title",
             "@->value": "NEUESTE BEITRÄGE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "50"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "50"
+        },
         {
             "@->contentpath": "title",
             "@->value": "NEUESTE BEITRÄGE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "title",
             "@->value": "DER TAG IN HESSEN"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "teaserLogo",
             "@->value": "tagesschau_de"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "teaserLogo",
             "@->value": "tagesschau_de"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "50"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "50"
+        },
         {
             "@->contentpath": "teaserLogo",
             "@->value": "sportschau"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "title",
             "@->value": "Meistgeklickt Heute"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "33"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "33"
+        },
         {
             "@->contentpath": "title",
             "@->value": "MEISTGEKLICKT HEUTE"

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

@@ -5,6 +5,10 @@
             "@->contentpath": "teaserSize",
             "@->value": "50"
         },
+        {
+            "@->contentpath": "realTeaserSize",
+            "@->value": "50"
+        },
         {
             "@->contentpath": "title",
             "@->value": "MEISTGEKLICKT HEUTE"

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

@@ -13,6 +13,7 @@
             ]
         },
         "teaserSize": "hero",
+        "realTeaserSize": "hero",
         "showLabel": false,
         "showProfileInfo": false,
         "teaserInfo": {
@@ -73,6 +74,7 @@
             ]
         },
         "teaserSize": "hero",
+        "realTeaserSize": "hero",
         "showLabel": true,
         "label": {
             "type": "ticker",
@@ -140,6 +142,7 @@
             ]
         },
         "teaserSize": "hero",
+        "realTeaserSize": "hero",
         "showLabel": true,
         "showProfileInfo": false,
         "teaserInfo": {
@@ -199,6 +202,7 @@
             ]
         },
         "teaserSize": "hero",
+        "realTeaserSize": "hero",
         "showLabel": true,
         "showProfileInfo": false,
         "teaserInfo": {
@@ -258,6 +262,7 @@
             ]
         },
         "teaserSize": "hero",
+        "realTeaserSize": "hero",
         "showLabel": true,
         "label": {
             "type": "ticker",
@@ -325,6 +330,7 @@
             ]
         },
         "teaserSize": "hero",
+        "realTeaserSize": "hero",
         "showLabel": false,
         "showProfileInfo": false,
         "teaserInfo": {
@@ -431,6 +437,7 @@
                 },
 
         "teaserSize": "hero",
+        "realTeaserSize": "hero",
         "showLabel": false,
         "showProfileInfo": false,
         "teaserDate": {

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

@@ -10,6 +10,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"

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

@@ -10,6 +10,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"

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

@@ -10,6 +10,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"

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

@@ -10,6 +10,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"

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

@@ -10,6 +10,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"

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

@@ -10,6 +10,10 @@
             "@->contentpath": "logicItem.includeModel.teaserSize",
             "@->value": "100"
         },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "100"
+        },
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "event-alternative-ds"