hr-design-system-handlebars 0.49.17 → 0.49.18

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.49.18 (Thu Jul 14 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1635 [#275](https://github.com/mumprod/hr-design-system-handlebars/pull/275) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.49.17 (Wed Jul 13 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -614,12 +614,12 @@ video {
 .left-0 {
   left: 0px;
 }
-.top-full {
-  top: 100%;
-}
 .top-10 {
   top: 2.5rem;
 }
+.top-full {
+  top: 100%;
+}
 .z-10001 {
   z-index: 10001;
 }
@@ -814,12 +814,12 @@ video {
 .h-5 {
   height: 1.25rem;
 }
-.h-3 {
-  height: 0.75rem;
-}
 .h-3\.5 {
   height: 0.875rem;
 }
+.h-3 {
+  height: 0.75rem;
+}
 .h-auto {
   height: auto;
 }
@@ -865,12 +865,12 @@ video {
 .w-40 {
   width: 10rem;
 }
-.w-3 {
-  width: 0.75rem;
-}
 .w-3\.5 {
   width: 0.875rem;
 }
+.w-3 {
+  width: 0.75rem;
+}
 .w-max {
   width: -webkit-max-content;
   width: -moz-max-content;
@@ -2768,6 +2768,11 @@ video {
     line-height: 2.375rem;
   }
 
+  .md\:text-2xl {
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+  }
+
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;

package/dist/views/components/audio/audio_element.hbs

@@ -17,7 +17,7 @@
             {{/with~}}
         {{/unless}}
         <div 
-            {{~#if _is25Teaser}} 
+            {{~#if _isMobile1to1}} 
                 class="relative"  
                 :class="avStart ? 'ar-16-9' : '{{_aspectRatio}}'"
             {{else}}
@@ -26,7 +26,7 @@
         >
             {{~#if _isTeaser~}}
             <div 
-                {{~#if _is25Teaser}}
+                {{~#if _isMobile1to1}}
                     x-show="!avStart"
                 {{~/if~}}
                 >               
@@ -48,7 +48,7 @@
             {{~/if~}}
 
 
-            {{~#if _is25Teaser~}}
+            {{~#if _isMobile1to1~}}
                 <div x-show="avStart" class="flex items-center justify-center ar-16-9 bg-blue-jellyBean">
                     {{> components/base/image/icon _icon="audio" _iconmap="icons" _addClass="w-12 h-12 fill-white " }}
                 </div>

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

@@ -46,10 +46,9 @@
                         {{> components/teaser/teaser_standard teaserSize="50"}}
                     </div>               
                     <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
-                        {{> components/teaser/teaser_standard teaserSize="25"}}
-                        {{> components/teaser/teaser_standard teaserSize="25"}}
-                        {{> components/teaser/teaser_standard teaserSize="25"}}
-                        {{> components/teaser/teaser_standard teaserSize="25"}}
+                        {{> components/teaser/teaser_standard teaserSize="33"}}
+                        {{> components/teaser/teaser_standard teaserSize="33"}}
+                        {{> components/teaser/teaser_standard teaserSize="33"}}
                     </div>
                     <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
                         {{> components/teaser/teaser_standard teaserSize="50"}}

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

@@ -3,9 +3,12 @@
         {{~> components/video/video_element _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio _teaserSize=../_teaserSize ~}}
     {{~/if~}}
     {{~#if this.isAudio ~}}
-         {{~> components/audio/audio_element _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _is25Teaser=../_is25Teaser _teaserSize=../_teaserSize~}}             
+         {{~> components/audio/audio_element _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             
     {{~/if~}}
     {{~#if this.isLivestream ~}}
-         {{~> components/video/livestream/video_livestream _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _is25Teaser=../_is25Teaser _teaserSize=../_teaserSize~}}             
+         {{~> components/video/livestream/video_livestream _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _isMobile1to1=../_isMobile1to1 _teaserSize=../_teaserSize~}}             
     {{~/if~}}
-{{/with}}
+{{/with}}
+{{#if _isMobile1to1~}}  
+        {{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick="avStart = false; $dispatch('player_colosed')"}}
+{{~/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}}
+    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType _isMobile1to1=_isMobile1to1}}
 </{{~ headlineTag ~}}>

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

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

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

@@ -1,3 +1,3 @@
-<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes size=size teaserType=teaserType fontVariant=fontVariant}}'>
+<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes size=size teaserType=teaserType fontVariant=fontVariant _isMobile1to1=_isMobile1to1}}'>
     {{~text~}}
 </span>

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

@@ -1,10 +1,30 @@
-{{#switch teaserType~}}
+{{!-- 
+This handlebars template is responisible to render the needed classnames for Teaser headlines
+As we use tailwind css no cascade is used to style components. As Teaser Headline Sizes dependent
+on 4 parameters the logic was outsourced to this file.
+
+the 4 parameters are:
+- teaserType
+- size
+- _isMobile1to1
+- fontVariant
+
+--}}
+{{~#switch teaserType~}}
     {{~#case 'standard-ds'~}}
-        {{~inline-switch
-            size
-            '["hero","100","25"]'
-            '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
-        ~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                size
+                '["hero","100","25"]'
+                '["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch
+                size
+                '["hero","100","25"]'
+                '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+            ~}}
+        {{~/if~}} 
     {{~/case~}}
     {{~#case 'alternative-ds'~}}
         {{~inline-switch

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

@@ -1,21 +1,18 @@
-<article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["js-is1to1 px-5 md:px-0 md:col-span-3 md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} "
+<article class="col-span-12 flex gap-y-3 gap-x-4 
+{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
+{{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} 
+ "
     x-data="{ avStart: false }"
-    {{#switch this.teaserSize~}}
-        {{~#case "25"}}      
+    {{#if this.isMobile1to1}}
             :class="avStart ? 'flex-col' : 'flex-row'"
-        {{/case~}}
-    {{~/switch~}}   
+    {{/if}}   
     >
-    <figure class="relative {{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">    
-        {{> components/teaser/components/teaser_lead _is25Teaser=this.is25Teaser _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}     
-        {{#switch this.teaserSize~}}
-            {{~#case "25"}}  
-                {{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick="avStart = false; $dispatch('player_colosed')"}}
-            {{/case~}}
-        {{~/switch~}}    
+    <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"]') }}     
     </figure>
-    <div class="{{inline-switch this.teaserSize '["25"]' '["basis-3/5 md:flex-full"]'}} ">
-        <header class="md:px-0 {{inline-switch teaserSize '["25"]' '["","px-5"]'}}">
+    <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}">
+        <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
             {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }} 
                 {{> components/teaser/components/teaser_heading 
                 fontVariant=this.headingFontVariant
@@ -25,10 +22,11 @@
                 size=this.teaserSize 
                 title=this.title 
                 topline=this.topline 
-                teaserType=this.teaserType}}            
+                teaserType=this.teaserType
+                _isMobile1to1=this.isMobile1to1}}            
             {{/components/base/link}}   
         </header>
-        <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
+        <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

package/package.json

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

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

@@ -13,7 +13,7 @@
             "teaserIndex": 0,
             "logicItems": [
                 {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
+                    "@->jsoninclude": "teaser/teaser_standard_33_serif_tabbox.json",
                     "@->overrides": [
                         {
                             "@->contentpath": "logicItem.includeModel.shorttext",
@@ -30,13 +30,13 @@
                     ]
                 },
                 {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
+                    "@->jsoninclude": "teaser/teaser_standard_33_serif_tabbox.json",
                     "@->overrides": [
                         {
                             "@->contentpath": "logicItem.includeModel.teaserImage",
                             "@->value": {
                                 "@->jsoninclude": "teaser/teaser_images.inc.json",
-                                "@->contentpath": "standard_1"
+                                "@->contentpath": "md_2_tab"
                             }
                         },
                         {
@@ -58,13 +58,13 @@
                     ]
                 },
                 {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
+                    "@->jsoninclude": "teaser/teaser_standard_33_serif_tabbox.json",
                     "@->overrides": [
                         {
                             "@->contentpath": "logicItem.includeModel.teaserImage",
                             "@->value": {
                                 "@->jsoninclude": "teaser/teaser_images.inc.json",
-                                "@->contentpath": "standard_3"
+                                "@->contentpath": "md_3_tab"
                             }
                         },
                         {
@@ -191,7 +191,7 @@
             "teaserIndex": 3,
             "logicItems": [
                 {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
+                    "@->jsoninclude": "teaser/teaser_standard_33_serif_tabbox.json",
                     "@->overrides": [
                         {
                             "@->contentpath": "logicItem.includeModel.shorttext",
@@ -200,20 +200,34 @@
                     ]
                 },
                 {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
+                    "@->jsoninclude": "teaser/teaser_standard_33_serif_tabbox.json",
                     "@->overrides": [
                         {
                             "@->contentpath": "logicItem.includeModel.shorttext",
                             "@->value": ""
+                        },
+                        {
+                            "@->contentpath": "logicItem.includeModel.teaserImage",
+                            "@->value": {
+                                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                                "@->contentpath": "md_2_tab"
+                            }
                         }
                     ]
                 },
                 {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
+                    "@->jsoninclude": "teaser/teaser_standard_33_serif_tabbox.json",
                     "@->overrides": [
                         {
                             "@->contentpath": "logicItem.includeModel.shorttext",
                             "@->value": ""
+                        },
+                        {
+                            "@->contentpath": "logicItem.includeModel.teaserImage",
+                            "@->value": {
+                                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                                "@->contentpath": "md_3_tab"
+                            }
                         }
                     ]
                 }
@@ -234,7 +248,7 @@
             "teaserIndex": 4,
             "logicItems": [
                 {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
+                    "@->jsoninclude": "teaser/teaser_standard_50_serif_tabbox.json",
                     "@->overrides": [
                         {
                             "@->contentpath": "logicItem.includeModel.shorttext",
@@ -251,7 +265,7 @@
                     ]
                 },
                 {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
+                    "@->jsoninclude": "teaser/teaser_standard_50_serif_tabbox.json",
                     "@->overrides": [
                         {
                             "@->contentpath": "logicItem.includeModel.shorttext",
@@ -264,23 +278,13 @@
                         {
                             "@->contentpath": "logicItem.includeModel.profiles",
                             "@->value": ""
-                        }
-                    ]
-                },
-                {
-                    "@->jsoninclude": "teaser/teaser_standard_33_serif.json",
-                    "@->overrides": [
-                        {
-                            "@->contentpath": "logicItem.includeModel.shorttext",
-                            "@->value": ""
                         },
                         {
-                            "@->contentpath": "logicItem.includeModel.teaserInfo.showTeaserInfo",
-                            "@->value": false
-                        },
-                        {
-                            "@->contentpath": "logicItem.includeModel.profiles",
-                            "@->value": ""
+                            "@->contentpath": "logicItem.includeModel.teaserImage",
+                            "@->value": {
+                                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                                "@->contentpath": "standard_2_tab"
+                            }
                         }
                     ]
                 }

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

@@ -112,7 +112,7 @@
             "fallback": "https://picsum.photos/id/188/480/270",
             "sources": [
                 {
-                    "sizes": "(min-width: 40em) and (max-width: 58.938em) 33vw,(min-width: 59em) calc(1008px * 0.33), 100vw",
+                    "sizes": "(min-width: 48em) and (max-width: 58.938em) 33vw,(min-width: 59em) calc(1008px * 0.33), 100vw",
                     "srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"
                 }
             ]
@@ -127,7 +127,7 @@
             "fallback": "https://picsum.photos/id/189/480/270",
             "sources": [
                 {
-                    "sizes": "(min-width: 40em) and (max-width: 58.938em) 33vw,(min-width: 59em) calc(1008px * 0.33), 100vw",
+                    "sizes": "(min-width: 48em) and (max-width: 58.938em) 33vw,(min-width: 59em) calc(1008px * 0.33), 100vw",
                     "srcset": "https://picsum.photos/id/189/320/180 320w, https://picsum.photos/id/189/480/270 480w, https://picsum.photos/id/189/640/360 640w, https://picsum.photos/id/189/960/540 960w, https://picsum.photos/id/189/1920/1080 1920w"
                 }
             ]
@@ -142,12 +142,75 @@
             "fallback": "https://picsum.photos/id/190/480/270",
             "sources": [
                 {
-                    "sizes": "(min-width: 40em) and (max-width: 58.938em) 33vw,(min-width: 59em) calc(1008px * 0.33), 100vw",
+                    "sizes": "(min-width: 48em) and (max-width: 58.938em) 33vw,(min-width: 59em) calc(1008px * 0.33), 100vw",
                     "srcset": "https://picsum.photos/id/190/320/180 320w, https://picsum.photos/id/190/480/270 480w, https://picsum.photos/id/190/640/360 640w, https://picsum.photos/id/190/960/540 960w, https://picsum.photos/id/190/1920/1080 1920w"
                 }
             ]
         }
     },
+    "md_1_tab": {
+        "alttext": "Lorem ipsum",
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "https://picsum.photos/id/188/480/270",
+            "sources": [
+                {
+                    "media": "all and (max-width: 47.938em)",
+                    "sizes": "40vw",
+                    "srcset": "https://picsum.photos/id/188/320/320 320w, https://picsum.photos/id/188/480/480 480w, https://picsum.photos/id/188/640/640 640w, https://picsum.photos/id/188/960/960 960w"
+                },
+                {
+                    "media": "all and (min-width: 48em) ",
+                    "sizes": "33vw",
+                    "srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w"
+                }
+            ]
+        }
+    },
+    "md_2_tab": {
+        "alttext": "Lorem ipsum",
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "https://picsum.photos/id/189/480/270",
+            "sources": [
+                {
+                    "media": "all and (max-width: 47.938em)",
+                    "sizes": "40vw",
+                    "srcset": "https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w"
+                },
+                {
+                    "media": "all and (min-width: 48em) ",
+                    "sizes": "33vw",
+                    "srcset": "https://picsum.photos/id/189/320/180 320w, https://picsum.photos/id/189/480/270 480w, https://picsum.photos/id/189/640/360 640w, https://picsum.photos/id/189/960/540 960w"
+                }
+            ]
+        }
+    },
+    "md_3_tab": {
+        "alttext": "Lorem ipsum",
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "https://picsum.photos/id/190/480/270",
+            "sources": [
+                {
+                    "media": "all and (max-width: 47.938em)",
+                    "sizes": "40vw",
+                    "srcset": "https://picsum.photos/id/190/320/320 320w, https://picsum.photos/id/190/480/480 480w, https://picsum.photos/id/190/640/640 640w, https://picsum.photos/id/190/960/960 960w"
+                },
+                {
+                    "media": "all and (min-width: 48em)",
+                    "sizes": "33vw",
+                    "srcset": "https://picsum.photos/id/190/320/180 320w, https://picsum.photos/id/190/480/270 480w, https://picsum.photos/id/190/640/360 640w, https://picsum.photos/id/190/960/540 960w"
+                }
+            ]
+        }
+    },
     "standard_1": {
         "alttext": "Lorem ipsum",
         "copyrightWithLinks": "",
@@ -208,6 +271,48 @@
             ]
         }
     },
+    "standard_1_tab": {
+        "alttext": "Lorem ipsum",
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "https://picsum.photos/id/193/480/270",
+            "sources": [
+                {
+                    "media": "all and (max-width: 47.938em)",
+                    "sizes": "40vw",
+                    "srcset": "https://picsum.photos/id/193/320/320 320w, https://picsum.photos/id/193/480/480 480w, https://picsum.photos/id/193/640/640 640w, https://picsum.photos/id/193/960/960 960w"
+                },
+                {
+                    "media": "all and (min-width: 48em)",
+                    "sizes": "50vw",
+                    "srcset": "https://picsum.photos/id/193/320/180 320w, https://picsum.photos/id/193/480/270 480w, https://picsum.photos/id/193/640/360 640w, https://picsum.photos/id/193/960/540 960w"
+                }
+            ]
+        }
+    },
+    "standard_2_tab": {
+        "alttext": "Lorem ipsum",
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "https://picsum.photos/id/197/480/270",
+            "sources": [
+                {
+                    "media": "all and (max-width: 47.938em)",
+                    "sizes": "40vw",
+                    "srcset": "https://picsum.photos/id/197/320/320 320w, https://picsum.photos/id/197/480/480 480w, https://picsum.photos/id/197/640/640 640w, https://picsum.photos/id/197/960/960 960w"
+                },
+                {
+                    "media": "all and (min-width: 48em)",
+                    "sizes": "50vw",
+                    "srcset": "https://picsum.photos/id/197/320/180 320w, https://picsum.photos/id/197/480/270 480w, https://picsum.photos/id/197/640/360 640w, https://picsum.photos/id/197/960/540 960w"
+                }
+            ]
+        }
+    },
     "poster_1":{     
         "copyrightWithLinks": "",
         "responsiveImage": {

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

@@ -7,11 +7,11 @@
             "@->value": "25"
         },
         {
-            "@->contentpath": "logicItem.includeModel.is25Teaser",
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"
         },
         {
-            "@->contentpath": "logicItem.includeModel.link.content.is25Teaser",
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
             "@->value": "true"
         },
         {

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

@@ -7,11 +7,11 @@
             "@->value": "25"
         },
         {
-            "@->contentpath": "logicItem.includeModel.is25Teaser",
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"
         },
         {
-            "@->contentpath": "logicItem.includeModel.link.content.is25Teaser",
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
             "@->value": "true"
         },
         {

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

@@ -7,11 +7,11 @@
             "@->value": "25"
         },
         {
-            "@->contentpath": "logicItem.includeModel.is25Teaser",
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"
         },
         {
-            "@->contentpath": "logicItem.includeModel.link.content.is25Teaser",
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
             "@->value": "true"
         },
         {

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

@@ -7,11 +7,11 @@
             "@->value": "25"
         },
         {
-            "@->contentpath": "logicItem.includeModel.is25Teaser",
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
             "@->value": "true"
         },
         {
-            "@->contentpath": "logicItem.includeModel.link.content.is25Teaser",
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
             "@->value": "true"
         },
         {

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

@@ -10,7 +10,7 @@
             "@->contentpath": "logicItem.includeModel.teaserImage",
             "@->value": {
                 "@->jsoninclude": "teaser/teaser_images.inc.json",
-                "@->contentpath": "md_2"
+                "@->contentpath": "md_1"
             }
         }
     ]

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

@@ -0,0 +1,21 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "33"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_1_tab"
+            }
+        }
+    ]
+}