hr-design-system-handlebars 0.56.14 → 0.57.0

package/.storybook/preview-head.html

@@ -1,3 +1,4 @@
+<script defer src="https://cdn.jsdelivr.net/npm/async-alpine@0.3.x/dist/async-alpine.script.js"></script>
 <script defer src="https://unpkg.com/@alpinejs/collapse@3.8.1/dist/cdn.min.js"></script>
-<script src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js" defer></script>
+<script defer src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js"></script>
 <script defer src="https://unpkg.com/alpinejs@3.8.1/dist/cdn.min.js"></script>

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v0.57.0 (Tue Sep 27 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1766 [#329](https://github.com/mumprod/hr-design-system-handlebars/pull/329) ([@vascoeduardo](https://github.com/vascoeduardo) [@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@szuelch](https://github.com/szuelch)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.56.15 (Fri Sep 16 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1645 [#323](https://github.com/mumprod/hr-design-system-handlebars/pull/323) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
 # v0.56.14 (Fri Sep 16 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -441,7 +441,7 @@ video {
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
 }
 
-.link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
+.link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white, .focus\:ring {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
@@ -801,6 +801,9 @@ video {
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .mb-7 {
   margin-bottom: 1.75rem;
 }
@@ -886,6 +889,9 @@ video {
 .h-24 {
   height: 6rem;
 }
+.h-1 {
+  height: 0.25rem;
+}
 .max-h-0 {
   max-height: 0px;
 }
@@ -1193,6 +1199,12 @@ video {
 .rounded-3xl {
   border-radius: 1.5rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1401,6 +1413,13 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(220, 232, 240, var(--tw-bg-opacity));
 }
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
 .bg-gradient-to-r {
   background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -1457,6 +1476,9 @@ video {
 .p-8 {
   padding: 2rem;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1600,15 +1622,18 @@ video {
 .pb-5 {
   padding-bottom: 1.25rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .pb-10 {
   padding-bottom: 2.5rem;
 }
 .pt-8 {
   padding-top: 2rem;
 }
-.pt-6 {
-  padding-top: 1.5rem;
-}
 .text-left {
   text-align: left;
 }
@@ -1938,7 +1963,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1663320957588;
+  counter-reset: cnt1664291825673;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2321,7 +2346,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1663320957588 1;
+  counter-increment: cnt1664291825673 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2338,7 +2363,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1663320957588);
+  content: counter(cnt1664291825673);
 }
 /*! purgecss start ignore */
 :root,
@@ -2820,6 +2845,19 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus\:ring:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+}
+.focus\:ring-\[\#1F89AE\]:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(31, 137, 174, var(--tw-ring-opacity));
+}
 .active\:font-bold:active {
   font-weight: 700;
 }
@@ -2834,6 +2872,41 @@ video {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+@media (color-index: 48) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color: 48842621) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color-index: 48) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color: 48842621) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (prefers-color-scheme: dark) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
 @media print {
 
   .print\:flex {
@@ -3505,6 +3578,11 @@ video {
             flex: 0 1 auto;
   }
 
+  .lg\:basis-1\/3 {
+    -ms-flex-preferred-size: 33.333333%;
+        flex-basis: 33.333333%;
+  }
+
   .lg\:flex-row {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;

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

@@ -0,0 +1,35 @@
+
+<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">
+    {{!--Teaser-Info--}}
+    {{#with this.teaserInfo}}
+        {{#if this.showTeaserInfo~}}
+           {{~#if this.showTeaserInfoSection}}
+              <span class="uppercase">
+                 {{../this.documentSection~}}
+              </span>
+              <span class="mx-px last-of-type:hidden">|</span>
+           {{/if}}
+           {{~#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.teaserDate}}
+                      <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
+                  {{/with~}}
+                  <span class="mx-px last-of-type:hidden">|</span>
+               {{/if~}}
+           {{/if~}}
+        {{/if}}
+    {{/with}}
+
+    {{!--Profiles--}}
+    {{#if this.showProfileInfoAsByline}}
+        {{#if this.profiles}}
+           <span>{{this.profiles}}</span>
+           <span class="mx-px last-of-type:hidden">|</span>
+        {{/if}}
+    {{/if}}
+</p>

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

@@ -1,41 +1,12 @@
-
-                {{#>components/base/link link=this.logicItem.includeModel.link _css="group" _doTracking=(if this.logicItem.includeModel.doTracking 'true') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }} 
-                    {{> components/teaser/components/teaser_heading
-                        _headlineTag=this.logicItem.includeModel.headlineTag 
-                        _label=this.logicItem.includeModel.label 
-                        _size=this.logicItem.includeModel.teaserSize
-                        _title=this.logicItem.includeModel.title 
-                        _teaserType="cluster"
-                        _ordered=_ordered
-                        _titleBlue='true' }}           
-                {{/components/base/link}}
-
-                {{!--Teaser-Info--}}
-                <p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">  
-                {{#with this.logicItem.includeModel.teaserInfo}}
-                    {{#if this.showTeaserInfo~}}
-                        {{~#if this.showTeaserInfoSection}}
-                            <span class="uppercase">
-                                {{../this.logicItem.includeModel.documentSection~}}
-                            </span>                    
-                            <span class="mx-px last-of-type:hidden">|</span>                    
-                        {{/if}}
-                        {{~#if this.showTeaserInfoDate}}
-                            {{~#with ../this.logicItem.includeModel.teaserDate}}
-                                <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
-                            {{/with~}}                    
-                            <span class="mx-px last-of-type:hidden">|</span>                    
-                        {{else}}
-                            {{~#if this.showTeaserInfoDateTime}}
-                                {{~#with ../this.logicItem.includeModel.teaserDate}}
-                                    <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
-                                {{/with~}}                        
-                                <span class="mx-px last-of-type:hidden">|</span>                        
-                            {{/if~}}
-                        {{/if~}}    
-
-                    {{/if}}
-                {{/with}}
-    	        </p>
-                {{!--Teaser-Info--}}
-                
+{{#>components/base/link _css="group" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }}
+    {{> components/teaser/components/teaser_heading
+        _headlineTag="h1"
+        _label=this.label
+        _size=_size
+        _title=this.title
+        _teaserType="cluster"
+        _ordered=_ordered
+        _titleBlue='true' 
+        _firstItem=_firstItem}}
+{{/components/base/link}}
+{{> components/teaser/cluster/teaser_cluster_byline}}

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

@@ -1,14 +1,26 @@
-<div class="{{~#if this.showGenreImage}}{{~inline-switch this.teaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
+<div class="{{~#if this.showImage}}{{~inline-switch this.teaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
-        <div class="px-0 pb-5 {{~inline-switch this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/3 md:ar-1-1"]'}}">
-            {{~> components/base/image/responsive_image this.genreImage type="standard-ds" variant="topteaser" _addClassImg="ar__content" ~}}
+        <div class="px-0 pb-5 {{~inline-switch this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]'}}">
+            {{~> components/base/image/responsive_image this.genreImage type=../this.teasertype variant=../this.imageVariant addClass=../this.aspectRatio _addClassImg="ar__content" ~}}
         </div>
     {{~/if~}}
+    {{~#if this.showFirstImage}}
+        {{~#with this.firstEntry~}}
+            {{~#if this.teaserImage}}
+                <div class="px-0 pb-5 {{~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="ar__content pb-4" ~}}
+                    <div class="mx-5 {{~inline-switch ../this.teaserSize '["100"]' '[" md:mx-0"]'}}">
+                        {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../_ordered _firstItem=true}}
+                    </div> 
+                </div>   
+            {{/if~}}
+        {{~/with~}}
+    {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../_ordered}}<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 ../../_ordered}} -ordered {{/if}} py-5 {{#if ../../this.headlineListItems.link}} last-of-type:pb-0{{/if~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
-                    {{> components/teaser/cluster/teaser_cluster_item _ordered=../../_ordered }} 
+                    {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../_ordered }} 
                 </li>
             {{~/each}}
         {{~#if ../_ordered}}</ol>{{else}}</ul>{{/if~}}

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

@@ -7,5 +7,5 @@
     {{#if _topline}}
         {{> components/teaser/components/teaser_topline _text=_topline _readMore=_readMore _teaserType=_teaserType}}
     {{/if}}
-    {{> components/teaser/components/teaser_title _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}
+    {{> components/teaser/components/teaser_title _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}
 </{{~ _headlineTag ~}}>

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

@@ -1,3 +1,3 @@
-<span class='block mt-0.5 group-hover:underline {{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1}}'>
+<span class='block mt-0.5 group-hover:underline {{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}'>
     {{~_text~}}
 </span>

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

@@ -38,7 +38,11 @@ the 4 parameters are:
         {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
     {{~/case~}}
     {{~#case 'cluster'~}}
-      text-lg
+        {{#if _firstItem}}
+            {{~inline-switch _size '["100"]' '[" text-lg md:text-2xl"," text-lg"]'}}
+        {{else}}
+            text-lg 
+        {{/if}}
     {{~/case~}}
 {{~/switch~}}
 {{~inline-switch

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

@@ -0,0 +1,3 @@
+<div class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6" > 
+    {{> components/teaser/podcast/podcast_player }}
+ </div>

package/dist/views/components/teaser/podcast/podcast_player.hbs

@@ -0,0 +1,38 @@
+<div class="w-full col-span-12 js-load" 
+    x-data="playaudio()"
+    ax-load
+    ax-load-src="http://localhost:6006/vendor/js/podcastPlayer.alpine.js">
+    <button x-on:keydown.tab="playAndStop" x-on:click="playAndStop" type="button" class="relative rounded-xl group cursor-pointer focus:outline-none focus:ring focus:ring-[#1F89AE]">       
+        <div class="">
+            <div x-show="!currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5 text-white">
+                start
+            </div>
+            <div x-show="currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5  text-white">
+                stop
+            </div>
+        </div>
+    </button>
+
+    <input x-ref="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="w-full h-1 mb-6 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700" >
+    
+    <div class="c-audioPlayer__metaText text__byline">
+      <span x-text="currentTime">00:00</span>
+      <span class="">/</span>
+      <span x-text="audioDuration">06:21 Min</span>
+    </div>
+
+    <audio x-ref="audio" controls="controls">
+        <source src="https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3" type="audio/mp3" />
+    </audio>
+
+  <div class="hidden">
+    currentTime: <span x-text="currentTime"></span><br>
+    currentTimePercentage:  <span x-text="currentTimePercentage"></span><br>
+    currentTimeMs: <span x-text="currentTimeMs"></span><br>
+    currentTimeS: <span x-text="currentTimeS"></span><br>
+    currentTimeM: <span x-text="currentTimeM"></span><br>
+    currentTimeH: <span x-text="currentTimeH"></span><br>
+    audioDuration: <span x-text="audioDuration"></span><br>
+  </div>
+</div>
+

package/package.json

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

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

@@ -20,6 +20,17 @@
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "genreImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "cluster_1"
+            }
         }
     ]
 }

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

@@ -0,0 +1,50 @@
+{
+    "@->jsoninclude": "teaser/teaser_cluster.inc.json",
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "title",
+            "@->value": "NEUESTE BEITRÄGE"
+        },
+                {
+            "@->contentpath": "teaserLogo",
+            "@->value": "hessenschau_de"
+        },
+        {
+            "@->contentpath": "isHessenschauLogo",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showFirstImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "clusterTeaserItems",
+            "@->value": [
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item2"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item3"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item4"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item5"
+                }
+            ]
+        }
+    ]
+}

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

@@ -20,6 +20,17 @@
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "genreImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "cluster_2"
+            }
         }
     ]
 }

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

@@ -0,0 +1,50 @@
+{
+    "@->jsoninclude": "teaser/teaser_cluster.inc.json",
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "33"
+        },
+        {
+            "@->contentpath": "title",
+            "@->value": "NEUESTE BEITRÄGE"
+        },
+                {
+            "@->contentpath": "teaserLogo",
+            "@->value": "hessenschau_de"
+        },
+        {
+            "@->contentpath": "isHessenschauLogo",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showFirstImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "clusterTeaserItems",
+            "@->value": [
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item2"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item3"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item4"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item5"
+                }
+            ]
+        }
+    ]
+}

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

@@ -20,6 +20,17 @@
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "genreImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "cluster_2"
+            }
         }
     ]
 }

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

@@ -0,0 +1,51 @@
+{
+    "@->jsoninclude": "teaser/teaser_cluster.inc.json",
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "title",
+            "@->value": "NEUESTE BEITRÄGE"
+        },
+                {
+            "@->contentpath": "teaserLogo",
+            "@->value": "hessenschau_de"
+        },
+        {
+            "@->contentpath": "isHessenschauLogo",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showFirstImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "clusterTeaserItems",
+            "@->value": [
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item2"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item3"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item4"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item5"
+                }
+            ]
+        }
+
+    ]
+}