hr-design-system-handlebars 0.105.3 → 0.106.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.106.1 (Mon Dec 12 2022)
+
+#### 🐛 Bug Fix
+
+- fix buttom-position-problem [#435](https://github.com/mumprod/hr-design-system-handlebars/pull/435) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.106.0 (Mon Dec 12 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1897: Teaser without image [#433](https://github.com/mumprod/hr-design-system-handlebars/pull/433) ([@mariokinzel](https://github.com/mariokinzel))
+
+#### Authors: 1
+
+- [@mariokinzel](https://github.com/mariokinzel)
+
+---
+
 # v0.105.3 (Mon Dec 12 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1128,6 +1128,9 @@ video {
 .basis-3\/5 {
   flex-basis: 60%;
 }
+.basis-full {
+  flex-basis: 100%;
+}
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2197,7 +2200,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1670852128278;
+  counter-reset: cnt1670863077841;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2429,7 +2432,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1670852128278 1;
+  counter-increment: cnt1670863077841 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2445,7 +2448,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1670852128278);
+  content: counter(cnt1670863077841);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3772,6 +3775,10 @@ video {
     flex-basis: 66.666667%;
   }
 
+  .md\:basis-full {
+    flex-basis: 100%;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }

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}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType}}{{/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 _isMobile1to1=_isMobile1to1}}{{/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/teaser/components/teaser_body.hbs

@@ -1,4 +1,4 @@
-<div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
+<div class="{{~#if this.isMobile1to1}}basis-3/5{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
     <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
         {{#decorator 'components/base/link' _css="hover:text-toplineColor" }} 
             {{> components/teaser/components/teaser_heading 

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

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

@@ -4,12 +4,16 @@
             :class="avStart ? 'flex-col' : 'flex-row'"
     {{/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"]'~}}"
-        {{#if this.isMobile1to1}}
-            :class="avStart ? '!ar-16-9' : ''"
-        {{/if}}
-    >
-        {{> 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"]') }}
+    {{#if this.teaserImage}}
+        <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"]'~}}"
+            {{#if this.isMobile1to1}}
+                :class="avStart ? '!ar-16-9' : ''"
+            {{/if}}
+        >
+            {{> 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"]') }}
+    {{else}}
+        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full" }}
+    {{/if}}
 </article>

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

@@ -7,18 +7,22 @@
             :class="avStart ? 'flex-col' : 'flex-row'"
     {{/if}}   
     >
-    <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 _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-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')}}
-        {{/decorator}}
+    {{#if this.teaserImage}}
+        <figure class="relative 
+        {{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+            {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (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-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:basis-full' 'py-4 md:px-4')}}
+            {{/decorator}}
+        {{else}}
+            {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 md:basis-full')}}
+        {{/if}}
     {{else}}
-        {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 md:flex-full')}}
+        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
     {{/if}}
 </article>

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

@@ -13,7 +13,7 @@
         {{#if this.moreThenOneEvent}}
             <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
                 <figure class="relative 
-                    {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+                    {{~#if this.isMobile1to1}} basis-2/5 md:basis-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="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white
@@ -26,7 +26,7 @@
                         <span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day}}</span>
                         <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}} </span>
                     </div>
-                    <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}
+                    <div class="{{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}
                         {{inline-switch teaserSize '["100"]' '["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]'}}
                         {{inline-switch teaserSize '["50","33"]' '[" hidden"," hidden"]'}}">
                             <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
@@ -53,7 +53,7 @@
                 {{! ---- To handle more than two events ----}}
                 <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
                 <figure class="relative 
-                    {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+                    {{~#if this.isMobile1to1}} basis-2/5 md:basis-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="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white" aria-hidden="true">
@@ -70,7 +70,7 @@
                 {{! ---- To handle a single event ----}}
                 <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
                     <figure class="relative 
-                        {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+                        {{~#if this.isMobile1to1}} basis-2/5 md:basis-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="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white
@@ -81,7 +81,7 @@
                             <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.day  }} </span>
                             <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort  }} </span>
                         </div>
-                        <div class=" {{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}
+                        <div class=" {{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}
                         {{inline-switch teaserSize '["100"]' '["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]'}}
                         {{inline-switch teaserSize '["50","33"]' '[" hidden"," hidden"]'}}">
                             <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
@@ -107,11 +107,11 @@
         {{/if}}
     {{else}}
         <figure class="relative 
-            {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+            {{~#if this.isMobile1to1}} basis-2/5 md:basis-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>
     {{/if}} 
-        <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{inline-switch teaserSize '["100"]' '[" hidden"]'}}">
+        <div class="{{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}{{inline-switch teaserSize '["100"]' '[" hidden"]'}}">
             <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
                 {{#decorator 'components/base/link' _css="hover:text-toplineColor" }} 
                 {{> components/teaser/components/teaser_heading 

package/package.json

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

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

@@ -0,0 +1,22 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserWithoutImage",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        }
+    ]
+}

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

@@ -0,0 +1,14 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserWithoutImage",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "25"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        }
+    ]
+}

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

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserWithoutImage",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        }
+    ]
+}

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

@@ -116,6 +116,113 @@
             }
         }
     },
+    "teaserWithoutImage": {
+        "isSsi": true,
+        "logicItem": {
+            "includePath": "components/teaser/teaser_standard",
+            "includeModel": {
+                "byline": "Byline",
+                "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
+                "topline": "Überglücklich, aber ohne Mama",
+                "headingFontVariant": "serif",
+                "extendedTitle": "",
+                "teaserType": "standard-ds",
+                "teaserSize": "hero",
+                "isMobile1to1": false,
+                "teaserDate": {
+                    "htmlDateTime": "2022-04-17T19:30+0200",
+                    "htmlDate": "20.02.1983",
+                    "date": "17.04.22",
+                    "dateSeparatorTime": "17.04.22, 19:30"
+                },
+                "hasByline": true,
+                "teaserInfo": {
+                    "showTeaserInfo": true,
+                    "showTeaserInfoSection": true,
+                    "showTeaserInfoChannel": true,
+                    "showTeaserInfoAll": true,
+                    "showTeaserInfoDate": false,
+                    "showTeaserInfoDateTime": true,
+                    "showTeaserInfoProgramRef": true
+                },
+                "displayTeaserBodyAsImageOverlay": false,
+                "hasMediaButtons": false,
+                "dontLazyload": true,
+                "isStandardTeaser": true,
+                "isHeroTeaser": true,
+                "isMediaTeaser": false,
+                "isGuide": false,
+                "isProgram": false,
+                "isEvent": false,
+                "isTicker": false,
+                "isAudio": false,
+                "isVideo": false,
+                "isPodcast": false,
+                "isPodcastEpisode": false,
+                "isExtOrBrandLink": false,
+                "isAuthor": false,
+                "copyright": "Copyright Text",
+                "audioAuthor": "Audio Author",
+                "hasStatus": false,
+                "hasTeaserItem": true,
+                "moreThenOneEvent": false,
+                "moreThenTwoEvents": false,
+                "firstInstant": {
+                    "startDate": {
+                        "monthNameShort": "APR",
+                        "weekdayNameShort": "Do",
+                        "day": "9"
+                    }
+                },
+                "lastInstant": {
+                    "startDate": {
+                        "monthNameShort": "APR",
+                        "weekdayNameShort": "Fr",
+                        "day": "10"
+                    }
+                },
+                "allowAVConsumption": false,
+                "displayEpgInfos": false,
+                "aspectRatio": "ar--teaserTop",
+                "hideGeotag": false,
+                "hideEditableByline": true,
+                "doTracking": true,
+                "trackingForArdMediatheksLink": false,
+                "showMediatheksLink": false,
+                "showAirdate": false,
+                "showProfileInfoAsByline": false,
+                "obsolet_brandOfTeaser": "hessenschau",
+                "documentSection": "Gesellschaft",
+                "headlineTag": "h1",
+                "icon": "ortsmarke",
+                "imageVariant": "topteaser",
+                "shorttext": "Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.",
+                "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
+                "profiles": "Von Alf Haubitz und Alice Merton",
+                "teaserLead": {
+                    "avDocument": "",
+                    "image": ""
+                },
+                "geotag": [
+                    {
+                        "title": "Wolfhagen"
+                    }
+                ],
+                "link": {
+                    "url": "/teaser1",
+                    "webviewUrl": "/teaser1#webview",
+                    "isTargetBlank": false,
+                    "hasIcon": false,
+                    "iconName": "iconName",
+                    "readMoreText": {
+                        "readMoreScreenreader": "Zum Artikel",
+                        "readMore": "mehr",
+                        "readMoreLong": "read More Long"
+                    }
+                }
+            }
+        }
+    },
     "teaser_2": {
         "isSsi": true,
         "logicItem": {

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}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType}}{{/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 _isMobile1to1=_isMobile1to1}}{{/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/teaser/components/teaser_body.hbs

@@ -1,4 +1,4 @@
-<div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
+<div class="{{~#if this.isMobile1to1}}basis-3/5{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
     <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
         {{#decorator 'components/base/link' _css="hover:text-toplineColor" }} 
             {{> components/teaser/components/teaser_heading 

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

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

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"50","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif copy.json

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

package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif copy.json

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

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

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"25","isMobile1to1":"true","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}

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

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}

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

@@ -4,12 +4,16 @@
             :class="avStart ? 'flex-col' : 'flex-row'"
     {{/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"]'~}}"
-        {{#if this.isMobile1to1}}
-            :class="avStart ? '!ar-16-9' : ''"
-        {{/if}}
-    >
-        {{> 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"]') }}
+    {{#if this.teaserImage}}
+        <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"]'~}}"
+            {{#if this.isMobile1to1}}
+                :class="avStart ? '!ar-16-9' : ''"
+            {{/if}}
+        >
+            {{> 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"]') }}
+    {{else}}
+        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full" }}
+    {{/if}}
 </article>

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

@@ -11,6 +11,7 @@ import heroTeaserProgram from './fixtures/teaser_alternative_hero_serif_program.
 import teaser100Link from './fixtures/teaser_alternative_100_serif_link.json'
 import teaser100 from './fixtures/teaser_alternative_100_serif.json'
 import teaser50 from './fixtures/teaser_alternative_50_serif.json'
+import teaser50WithoutTeaserImage from './fixtures/teaser_alternative_without_teaserimage_50_serif.json'
 import teaser50Link from './fixtures/teaser_alternative_50_serif_link.json'
 import teaser50Download from './fixtures/teaser_alternative_50_serif_download.json'
 
@@ -138,6 +139,9 @@ Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <b>Alternativ 50%</b>
     <Story name="Alternativ 50" args={teaser50.logicItem.includeModel}>
         {Template.bind({})}
+    </Story>
+    <Story name="Alternativ 50 ohne Teaserbild" args={teaser50WithoutTeaserImage.logicItem.includeModel}>
+        {Template.bind({})}
     </Story>
         <b>Alternativ 50% mit externem Link</b>
     <Story name="Alternativ 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>

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

@@ -7,18 +7,22 @@
             :class="avStart ? 'flex-col' : 'flex-row'"
     {{/if}}   
     >
-    <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 _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-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')}}
-        {{/decorator}}
+    {{#if this.teaserImage}}
+        <figure class="relative 
+        {{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+            {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (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-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:basis-full' 'py-4 md:px-4')}}
+            {{/decorator}}
+        {{else}}
+            {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 md:basis-full')}}
+        {{/if}}
     {{else}}
-        {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 md:flex-full')}}
+        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
     {{/if}}
 </article>

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

@@ -6,8 +6,10 @@ import teaserHeroLink from './fixtures/teaser_standard_hero_serif_link.json'
 import teaserHeroSerif from './fixtures/teaser_standard_hero_serif.json'
 import teaser100Serif from './fixtures/teaser_standard_100_serif.json'
 import teaser50Serif from './fixtures/teaser_standard_50_serif.json'
+import teaser50SerifWithoutTeaserImage from './fixtures/teaser_standard_without_teaserimage_50_serif.json'
 import teaser33Serif from './fixtures/teaser_standard_33_serif.json'
 import teaser25Serif from './fixtures/teaser_standard_25_serif.json'
+import teaser25SerifWithoutTeaserimage from './fixtures/teaser_standard_without_teaserimage_25_serif.json'
 import teaser100Download from './fixtures/teaser_standard_100_serif_download.json'
 import teaser100Link from './fixtures/teaser_standard_100_serif_link.json'
 import teaser100Program from './fixtures/teaser_standard_100_serif_program.json'
@@ -121,6 +123,9 @@ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     </Story>
     <Story name="Standard 50" args={teaser50Serif.logicItem.includeModel}>
         {Template.bind({})}
+    </Story>
+    <Story name="Standard 50 ohne Teaserbild" args={teaser50SerifWithoutTeaserImage.logicItem.includeModel}>
+        {Template.bind({})}
     </Story>
         <Story name="Standard 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>
         {Template.bind({})}
@@ -134,6 +139,9 @@ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story name="Standard 25" args={teaser25Serif.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
+    <Story name="Standard 25 ohne Teaserbild" args={teaser25SerifWithoutTeaserimage.logicItem.includeModel}>
+        {Template.bind({})}
+    </Story>
     <Story name="Standard 25 mit externem Link" args={teaser25Link.logicItem.includeModel}>
         {Template.bind({})}
     </Story>

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

@@ -13,7 +13,7 @@
         {{#if this.moreThenOneEvent}}
             <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
                 <figure class="relative 
-                    {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+                    {{~#if this.isMobile1to1}} basis-2/5 md:basis-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="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white
@@ -26,7 +26,7 @@
                         <span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day}}</span>
                         <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}} </span>
                     </div>
-                    <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}
+                    <div class="{{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}
                         {{inline-switch teaserSize '["100"]' '["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]'}}
                         {{inline-switch teaserSize '["50","33"]' '[" hidden"," hidden"]'}}">
                             <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
@@ -53,7 +53,7 @@
                 {{! ---- To handle more than two events ----}}
                 <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
                 <figure class="relative 
-                    {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+                    {{~#if this.isMobile1to1}} basis-2/5 md:basis-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="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white" aria-hidden="true">
@@ -70,7 +70,7 @@
                 {{! ---- To handle a single event ----}}
                 <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
                     <figure class="relative 
-                        {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+                        {{~#if this.isMobile1to1}} basis-2/5 md:basis-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="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white
@@ -81,7 +81,7 @@
                             <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.day  }} </span>
                             <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort  }} </span>
                         </div>
-                        <div class=" {{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}
+                        <div class=" {{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}
                         {{inline-switch teaserSize '["100"]' '["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]'}}
                         {{inline-switch teaserSize '["50","33"]' '[" hidden"," hidden"]'}}">
                             <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
@@ -107,11 +107,11 @@
         {{/if}}
     {{else}}
         <figure class="relative 
-            {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
+            {{~#if this.isMobile1to1}} basis-2/5 md:basis-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>
     {{/if}} 
-        <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{inline-switch teaserSize '["100"]' '[" hidden"]'}}">
+        <div class="{{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}{{inline-switch teaserSize '["100"]' '[" hidden"]'}}">
             <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
                 {{#decorator 'components/base/link' _css="hover:text-toplineColor" }} 
                 {{> components/teaser/components/teaser_heading