hr-design-system-handlebars 0.41.0 → 0.42.2

package/.storybook/preview.js

@@ -9,12 +9,16 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import Initializer from '../build/webpack/feature-loader/initializer/initializer'
 import loadFeature from '../build/webpack/feature-loader/initializer/loader'
 
+
+function loadDelayedImages(){setTimeout((function(){var t,e=document.images,s=[],a=function(t){void 0!==window.picturefill&&window.picturefill({reevaluate:!0,elements:t})};for(var i=0;i<e.length;++i)(t=e[i].dataset?e[i].dataset.srcset:e[i].getAttribute("data-srcset"))&&(0===e[i].getBoundingClientRect().top?s.push(e[i]):e[i].setAttribute("srcset",t));a(e),setTimeout((function(){var t;for(var i=0;i<s.length;++i)t=s[i].dataset?s[i].dataset.srcset:s[i].getAttribute("data-srcset"),s[i].setAttribute("srcset",t);a(s)}),900)}),0)}
+    
 document.addEventListener('DOMContentLoaded', function (event) {
     console.log('DOM fully loaded and parsed')
 
     console.log('Start feature initialization')
 
     Initializer.run(document, loadFeature)
+    setTimeout(loadDelayedImages,200);
 })
 
 if (process.env.NODE_ENV !== 'production') {

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.42.2 (Mon Apr 11 2022)
+
+#### 🐛 Bug Fix
+
+- responsiveImage 2.0 [#209](https://github.com/mumprod/hr-design-system-handlebars/pull/209) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.42.1 (Mon Apr 11 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1496 [#208](https://github.com/mumprod/hr-design-system-handlebars/pull/208) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.42.0 (Thu Apr 07 2022)
+
+#### 🚀 Enhancement
+
+- FEATURE: employs a loadDynamic template as a [#207](https://github.com/mumprod/hr-design-system-handlebars/pull/207) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.41.0 (Wed Apr 06 2022)
 
 #### 🚀 Enhancement

package/build/helpers/case.js

@@ -1,5 +1,6 @@
 module.exports = function (value, options) {
-  this.switch_value = value;
-  this.switch_break = false;
-  return options.fn(this);
-};
+    if (value == this.switch_value) {
+        this.switch_break = true
+        return options.fn(this)
+    }
+}

package/build/helpers/switch.js

@@ -1,6 +1,5 @@
 module.exports = function (value, options) {
-  if (value == this.switch_value) {
-    this.switch_break = true;
-    return options.fn(this);
-  }
-};
+    this.switch_value = value
+    this.switch_break = false
+    return options.fn(this)
+}

package/dist/assets/index.css

@@ -1514,15 +1514,15 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
-.mt-4 {
-    margin-top: 1rem;
-}
 .mt-1 {
     margin-top: 0.25rem;
 }
 .mb-4 {
     margin-bottom: 1rem;
 }
+.mt-4 {
+    margin-top: 1rem;
+}
 .mt-0\.5 {
     margin-top: 0.125rem;
 }
@@ -1620,6 +1620,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .max-h-0 {
     max-height: 0px;
 }
+.max-h-6 {
+    max-height: 1.5rem;
+}
 .max-h-10 {
     max-height: 2.5rem;
 }
@@ -1686,6 +1689,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     -ms-flex-negative: 0;
         flex-shrink: 0;
 }
+.basis-1\/3 {
+    -ms-flex-preferred-size: 33.333333%;
+        flex-basis: 33.333333%;
+}
+.basis-2\/3 {
+    -ms-flex-preferred-size: 66.666667%;
+        flex-basis: 66.666667%;
+}
 .-translate-x-1\/2 {
     --tw-translate-x: -50%;
     -webkit-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));
@@ -1811,6 +1822,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 .gap-y-9 {
     row-gap: 2.25rem;
 }
+.gap-y-4 {
+    row-gap: 1rem;
+}
+.gap-x-5 {
+    -webkit-column-gap: 1.25rem;
+       -moz-column-gap: 1.25rem;
+            column-gap: 1.25rem;
+}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-y-reverse: 0;
     border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2000,9 +2019,13 @@ Ensure the default browser behavior of the `hidden` attribute.
 .p-2 {
     padding: 0.5rem;
 }
-.px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+.px-1\.5 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+}
+.px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
 }
 .py-6 {
     padding-top: 1.5rem;
@@ -2040,6 +2063,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
 }
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
 .py-1\.5 {
     padding-top: 0.375rem;
     padding-bottom: 0.375rem;
@@ -2056,6 +2083,9 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 1rem;
     padding-right: 1rem;
 }
+.pt-px {
+    padding-top: 1px;
+}
 .pl-4 {
     padding-left: 1rem;
 }
@@ -2092,9 +2122,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .pr-4 {
     padding-right: 1rem;
 }
-.pt-px {
-    padding-top: 1px;
-}
 .text-left {
     text-align: left;
 }
@@ -2534,6 +2561,9 @@ Ensure the default browser behavior of the `hidden` attribute.
     .md\:mb-0 {
         margin-bottom: 0px;
     }
+    .md\:block {
+        display: block;
+    }
     .md\:flex {
         display: -webkit-box;
         display: -ms-flexbox;
@@ -2580,6 +2610,12 @@ Ensure the default browser behavior of the `hidden` attribute.
             -ms-flex: 1 1 auto;
                 flex: 1 1 auto;
     }
+    .md\:flex-col {
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+    }
     .md\:justify-end {
         -webkit-box-pack: end;
             -ms-flex-pack: end;

package/dist/views/components/Header/ServiceNavigation/ServiceList.hbs

@@ -8,12 +8,7 @@
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
             {{#each this}}        
-                {{!-- {{> components/base/loadSSI _template='components/Header/ServiceNavigation/ServiceNavigationItem' }} --}}                    
-                {{#if (isStorybook)}}  
-                    {{> components/Header/ServiceNavigation/ServiceNavigationItem }}   
-                {{else}}
-                    {{{this}}}
-                {{/if}}          
+                {{> components/base/loadSSI templatePath='components/Header/ServiceNavigation/ServiceNavigationItem' }}               
             {{/each}} 
         </ul>
     {{/with}}

package/dist/views/components/Label.hbs

@@ -1 +1,12 @@
-<span class="sb-label px-2 inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">{{text}}</span>
+<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
+    {{text}}
+</span>
+{{~#with this.byline ~}}
+    <span class="">
+        {{#if this.bylineSsi}}
+            {{{this.bylineSsi}}}
+        {{else}}
+            {{this.bylineText}}
+        {{/if}}
+    </span>
+{{~/with~}}

package/dist/views/components/Teaser/Teaser-Heading.hbs

@@ -1,8 +1,13 @@
 {{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }} 
-    <{{~ ../headlineTag }} class="mt-4 {{../class}}" >
-        {{#if ../topline}}
-            {{> components/Teaser/Topline text=../topline }}
-        {{/if}}
-        {{> components/Teaser/Title text=../headline font=../font size=../size}}
+    {{#with this.content.label}}
+        <div class="max-h-6">
+            {{> components/Label type=loca text=type}}
+        </div>
+    {{/with~}}    
+    <{{~ ../headlineTag }} class="{{../class}}" >
+        {{#with this.content.topline}}
+            {{> components/Teaser/Topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
+        {{/with}}
+        {{> components/Teaser/Title text=../this.title font=../font size=../size }}
     </{{~ ../headlineTag }}>
-{{/components/base/link}}  
+{{/components/base/link}}   

package/dist/views/components/Teaser/Teaser-standard.hbs

@@ -1,18 +1,18 @@
-<article class="col-span-12 {{inline-switch teasersize '["sm","md","lg"]' '["md:col-span-3","md:col-span-4","md:col-span-6"]'}}">
-    {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
-        {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
-    {{/components/base/link}}  
-    {{#if labelType}}
-        <div class="mt-4">
-            {{> components/Label type=labelType text=labelText}}
-        </div>
-        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=""}}
-    {{else}}
-        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
-    {{/if}}
-    
-    <div class="mt-2 text-base font-copy">{{shorttext}}</div>
-    {{#if profiles}}
-        <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
-    {{/if}}
+<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+    <figure class="{{inline-switch teasersize '["sm"]' '["basis-1/3 md:flex-full"]'}} ">
+        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
+            {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
+        {{/components/base/link}}  
+    </figure>
+    <div class="{{inline-switch teasersize '["sm"]' '["basis-2/3 md:flex-full"]'}} ">
+        <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
+            {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}            
+        </header>
+        <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
+            <div class="hidden mt-2 text-base font-copy md:block">{{shorttext}}</div>
+            {{#if profiles}}
+                <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
+            {{/if}}
+        </section>
+    </div>
 </article>

package/dist/views/components/Teaser/Topline.hbs

@@ -1,6 +1,6 @@
 <span 
     class="block text-base text-toplineColor font-heading"
-    aria-label="Zum Artikel: {{text}}"
+    aria-label="{{readMore}}: {{text}}"
 >
     {{text}}
 </span>

package/dist/views/components/Teaser/labelHelper.js

@@ -0,0 +1,13 @@
+function addLabel(json, label) {
+    json.link.content.label = label;
+    json.link.content.topline = false;
+}
+function removeLabel(json, topline) {
+  json.link.content.label = false;
+  json.link.content.topline = topline;
+}
+function changeTeaserSize(json, size) {
+  json.teasersize = size
+}
+export { addLabel, removeLabel, changeTeaserSize};
+//export default addLabel;

package/dist/views/components/base/image/responsiveImage.hbs

@@ -39,7 +39,7 @@
             {{/unless}}
             <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
                     loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
-                 {{#with this.srcset}} {{#if ../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
+                 {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="image imageSimple {{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}

package/dist/views/components/base/loadDynamic.hbs

@@ -0,0 +1,5 @@
+{{#switch templatePath}}
+    {{#case "components/Header/ServiceNavigation/ServiceNavigationItem"}}
+        {{> components/Header/ServiceNavigation/ServiceNavigationItem}}
+    {{/case}}
+{{/switch}}

package/dist/views/components/base/loadSSI.hbs

@@ -1,5 +1,5 @@
 {{#if (isStorybook)}}  
-    {{> (lookup . '_template') }}   
+    {{> components/base/loadDynamic templatePath=templatePath}} 
 {{else}}
     {{{this}}}
 {{/if}}        

package/package.json

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

package/src/stories/views/components/Header/ServiceNavigation/ServiceList.hbs

@@ -8,12 +8,7 @@
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
             {{#each this}}        
-                {{!-- {{> components/base/loadSSI _template='components/Header/ServiceNavigation/ServiceNavigationItem' }} --}}                    
-                {{#if (isStorybook)}}  
-                    {{> components/Header/ServiceNavigation/ServiceNavigationItem }}   
-                {{else}}
-                    {{{this}}}
-                {{/if}}          
+                {{> components/base/loadSSI templatePath='components/Header/ServiceNavigation/ServiceNavigationItem' }}               
             {{/each}} 
         </ul>
     {{/with}}

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

@@ -1 +1,12 @@
-<span class="sb-label px-2 inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">{{text}}</span>
+<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
+    {{text}}
+</span>
+{{~#with this.byline ~}}
+    <span class="">
+        {{#if this.bylineSsi}}
+            {{{this.bylineSsi}}}
+        {{else}}
+            {{this.bylineText}}
+        {{/if}}
+    </span>
+{{~/with~}}

package/src/stories/views/components/Teaser/Teaser-Heading.hbs

@@ -1,8 +1,13 @@
 {{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }} 
-    <{{~ ../headlineTag }} class="mt-4 {{../class}}" >
-        {{#if ../topline}}
-            {{> components/Teaser/Topline text=../topline }}
-        {{/if}}
-        {{> components/Teaser/Title text=../headline font=../font size=../size}}
+    {{#with this.content.label}}
+        <div class="max-h-6">
+            {{> components/Label type=loca text=type}}
+        </div>
+    {{/with~}}    
+    <{{~ ../headlineTag }} class="{{../class}}" >
+        {{#with this.content.topline}}
+            {{> components/Teaser/Topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
+        {{/with}}
+        {{> components/Teaser/Title text=../this.title font=../font size=../size }}
     </{{~ ../headlineTag }}>
-{{/components/base/link}}  
+{{/components/base/link}}   

package/src/stories/views/components/Teaser/Teaser-Heading.stories.mdx

@@ -5,11 +5,15 @@ import teaserHeading from "./Teaser-Heading.hbs";
 <Meta
   title="Komponenten/Teaser/Komponenten/TeaserHeading"
   argTypes={{
-    topline: {
-      control: "text",
-      description: "Topline Text",
+    link:{
+      content:{
+        topline: {
+          control: "text",
+          description: "Topline Text",
+        }
+      }
     },
-    headline: {
+    title: {
       control: "text",
       description: "Headline Text",
     },
@@ -38,7 +42,7 @@ import teaserHeading from "./Teaser-Heading.hbs";
       },
     },
     size: {
-      options: ["lg", "sm"],
+      options: ["xxl", "md", "sm"],
       control: { type: "inline-radio" },
     },
   }}
@@ -69,12 +73,14 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
       },
     }}
     args={{
-      topline: "Das ist eine wirklich sehr lange Topline",
-      headline: "Das ist eine wirklich sehr lange Headline",
+      title: "Das ist eine wirklich sehr lange Headline",
       headlineTag: "h1",
       font: "font-headingSerif",
       size: "xxl",
       link: {
+              content: {
+                topline: "Das ist eine wirklich sehr lange Topline"
+              },
               url: "/teaser1"
             }
     }}
@@ -100,12 +106,14 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
       },
     }}
     args={{
-      topline: "Das ist eine wirklich sehr lange Topline",
-      headline: "Das ist eine wirklich sehr lange Headline",
+      title: "Das ist eine wirklich sehr lange Headline",
       headlineTag: "h1",
       font: "font-headingSerif",
       size: "md",
       link: {
+              content: {
+                topline: "Das ist eine wirklich sehr lange Topline"
+              },
               url: "/teaser1"
             }
     }}
@@ -129,14 +137,16 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
       },
     }}
     args={{
-      topline: "Das ist eine wirklich sehr lange Topline",
-      headline: "Das ist eine wirklich sehr lange Headline",
+      title: "Das ist eine wirklich sehr lange Headline",
       headlineTag: "h1",
       font: "font-headingSerif",
       size: "sm",
       link: {
-              url: "/teaser1"
-            }
+        content: {
+          topline: "Das ist eine wirklich sehr lange Topline"
+        },
+        url: "/teaser1"
+      }
     }}
   >
     {Template.bind({})}

package/src/stories/views/components/Teaser/Teaser-standard.hbs

@@ -1,18 +1,18 @@
-<article class="col-span-12 {{inline-switch teasersize '["sm","md","lg"]' '["md:col-span-3","md:col-span-4","md:col-span-6"]'}}">
-    {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
-        {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
-    {{/components/base/link}}  
-    {{#if labelType}}
-        <div class="mt-4">
-            {{> components/Label type=labelType text=labelText}}
-        </div>
-        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=""}}
-    {{else}}
-        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
-    {{/if}}
-    
-    <div class="mt-2 text-base font-copy">{{shorttext}}</div>
-    {{#if profiles}}
-        <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
-    {{/if}}
+<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+    <figure class="{{inline-switch teasersize '["sm"]' '["basis-1/3 md:flex-full"]'}} ">
+        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
+            {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
+        {{/components/base/link}}  
+    </figure>
+    <div class="{{inline-switch teasersize '["sm"]' '["basis-2/3 md:flex-full"]'}} ">
+        <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
+            {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}            
+        </header>
+        <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
+            <div class="hidden mt-2 text-base font-copy md:block">{{shorttext}}</div>
+            {{#if profiles}}
+                <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
+            {{/if}}
+        </section>
+    </div>
 </article>

package/src/stories/views/components/Teaser/Topline.hbs

@@ -1,6 +1,6 @@
 <span 
     class="block text-base text-toplineColor font-heading"
-    aria-label="Zum Artikel: {{text}}"
+    aria-label="{{readMore}}: {{text}}"
 >
     {{text}}
 </span>

package/src/stories/views/components/Teaser/data/16_7_teaserImage.json

@@ -0,0 +1,27 @@
+{
+    "teaserImage": {
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": true,
+            "asImage": false,
+            "fallback": "https://picsum.photos/id/188/480/210",
+            "sources": [
+                {
+                    "media": "all and (max-width: 43.688em)",
+                    "sizes": "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"
+                },
+                {
+                    "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
+                    "sizes": "100vw",
+                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                },
+                {
+                    "media": "all and (min-width: 64em)",
+                    "sizes": "960px",
+                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                }
+            ]
+        }
+    }
+}

package/src/stories/views/components/Teaser/data/16_9_teaserImage.json

@@ -0,0 +1,17 @@
+{
+    "teaserImage": {
+        "copyrightWithLinks": "",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "https://picsum.photos/id/188/480/210",
+            "sources": [
+                {
+                    
+                    "sizes": "(min-width: 1010px) 960px, 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"
+                }
+            ]
+        }
+    }
+}

package/src/stories/views/components/Teaser/data/teaser_article.json

@@ -89,7 +89,7 @@
                 "type": "Ticker",
                 "loca": "ticker",
                 "byline": {
-                    "bylineSsi": "ssi",
+                    "bylineSsi": "BylineText aus ssi",
                     "bylineText": "BylineText"
                 }
             },
@@ -147,7 +147,7 @@
                         "type": "Ticker",
                         "loca": "ticker",
                         "byline": {
-                            "bylineSsi": "ssi",
+                            "bylineSsi": "BylineText aus ssi",
                             "bylineText": "BylineText"
                         }
                     }

package/src/stories/views/components/Teaser/data/teaser_full.json

@@ -103,7 +103,7 @@
                                     "type": "Ticker",
                                     "loca": "ticker",
                                     "byline": {
-                                        "bylineSsi": "ssi",
+                                        "bylineSsi": "BylineText aus ssi",
                                         "bylineText": "BylineText"
                                     }
                                 },
@@ -161,7 +161,7 @@
                                             "type": "Ticker",
                                             "loca": "ticker",
                                             "byline": {
-                                                "bylineSsi": "ssi",
+                                                "bylineSsi": "BylineText aus ssi",
                                                 "bylineText": "BylineText"
                                             }
                                         }

package/src/stories/views/components/Teaser/data/teaser_standard_lg_serif.json

@@ -23,24 +23,14 @@
             "teaserImage": {
                 "copyrightWithLinks": "",
                 "responsiveImage": {
-                    "asPicture": true,
-                    "asImage": false,
+                    "asPicture": false,
+                    "asImage": true,
                     "fallback": "https://picsum.photos/id/188/480/210",
                     "sources": [
                         {
-                            "media": "all and (max-width: 43.688em)",
-                            "sizes": "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"
-                        },
-                        {
-                            "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                            "sizes": "100vw",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                        },
-                        {
-                            "media": "all and (min-width: 64em)",
-                            "sizes": "960px",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                            
+                            "sizes": "(min-width: 1010px) 960px, 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"
                         }
                     ]
                 }
@@ -89,7 +79,7 @@
                 "type": "Ticker",
                 "loca": "ticker",
                 "byline": {
-                    "bylineSsi": "ssi",
+                    "bylineSsi": "BylineText aus ssi",
                     "bylineText": "BylineText"
                 }
             },
@@ -113,24 +103,14 @@
                     "teaserImage": {
                         "copyrightWithLinks": "",
                         "responsiveImage": {
-                            "asPicture": true,
-                            "asImage": false,
+                            "asPicture": false,
+                            "asImage": true,
                             "fallback": "https://picsum.photos/id/188/480/210",
                             "sources": [
                                 {
-                                    "media": "all and (max-width: 43.688em)",
-                                    "sizes": "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"
-                                },
-                                {
-                                    "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                                    "sizes": "100vw",
-                                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                                },
-                                {
-                                    "media": "all and (min-width: 64em)",
-                                    "sizes": "960px",
-                                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                                    
+                                    "sizes": "(min-width: 1010px) 960px, 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"
                                 }
                             ]
                         }
@@ -142,14 +122,6 @@
                     "trackingData": {
                         "secondLevelId": "2",
                         "pageName": "hessenschau"
-                    },
-                    "label": {
-                        "type": "Ticker",
-                        "loca": "ticker",
-                        "byline": {
-                            "bylineSsi": "ssi",
-                            "bylineText": "BylineText"
-                        }
                     }
                 }
             }

package/src/stories/views/components/Teaser/data/teaser_standard_md_serif.json

@@ -23,24 +23,14 @@
             "teaserImage": {
                 "copyrightWithLinks": "",
                 "responsiveImage": {
-                    "asPicture": true,
-                    "asImage": false,
+                    "asPicture": false,
+                    "asImage": true,
                     "fallback": "https://picsum.photos/id/188/480/210",
                     "sources": [
                         {
-                            "media": "all and (max-width: 43.688em)",
-                            "sizes": "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"
-                        },
-                        {
-                            "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                            "sizes": "100vw",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                        },
-                        {
-                            "media": "all and (min-width: 64em)",
-                            "sizes": "960px",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                            
+                            "sizes": "(min-width: 1010px) 960px, 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"
                         }
                     ]
                 }
@@ -89,7 +79,7 @@
                 "type": "Ticker",
                 "loca": "ticker",
                 "byline": {
-                    "bylineSsi": "ssi",
+                    "bylineSsi": "BylineText aus ssi",
                     "bylineText": "BylineText"
                 }
             },
@@ -113,24 +103,14 @@
                     "teaserImage": {
                         "copyrightWithLinks": "",
                         "responsiveImage": {
-                            "asPicture": true,
-                            "asImage": false,
+                            "asPicture": false,
+                            "asImage": true,
                             "fallback": "https://picsum.photos/id/188/480/210",
                             "sources": [
                                 {
-                                    "media": "all and (max-width: 43.688em)",
-                                    "sizes": "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"
-                                },
-                                {
-                                    "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                                    "sizes": "100vw",
-                                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                                },
-                                {
-                                    "media": "all and (min-width: 64em)",
-                                    "sizes": "960px",
-                                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                                    
+                                    "sizes": "(min-width: 1010px) 960px, 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"
                                 }
                             ]
                         }
@@ -142,14 +122,6 @@
                     "trackingData": {
                         "secondLevelId": "2",
                         "pageName": "hessenschau"
-                    },
-                    "label": {
-                        "type": "Ticker",
-                        "loca": "ticker",
-                        "byline": {
-                            "bylineSsi": "ssi",
-                            "bylineText": "BylineText"
-                        }
                     }
                 }
             }

package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json

@@ -23,24 +23,14 @@
             "teaserImage": {
                 "copyrightWithLinks": "",
                 "responsiveImage": {
-                    "asPicture": true,
-                    "asImage": false,
+                    "asPicture": false,
+                    "asImage": true,
                     "fallback": "https://picsum.photos/id/188/480/210",
                     "sources": [
                         {
-                            "media": "all and (max-width: 43.688em)",
-                            "sizes": "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"
-                        },
-                        {
-                            "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                            "sizes": "100vw",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                        },
-                        {
-                            "media": "all and (min-width: 64em)",
-                            "sizes": "960px",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                            
+                            "sizes": "(min-width: 1010px) 960px, 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"
                         }
                     ]
                 }
@@ -89,7 +79,7 @@
                 "type": "Ticker",
                 "loca": "ticker",
                 "byline": {
-                    "bylineSsi": "ssi",
+                    "bylineSsi": "BylineText aus ssi",
                     "bylineText": "BylineText"
                 }
             },
@@ -110,6 +100,7 @@
                     "readMoreLong": "read More Long"
                 },
                 "content": {
+                    
                     "teaserImage": {
                         "copyrightWithLinks": "",
                         "responsiveImage": {
@@ -120,7 +111,7 @@
                                 {
                                     "media": "all and (max-width: 43.688em)",
                                     "sizes": "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"
+                                    "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/992/992 992w"
                                 },
                                 {
                                     "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
@@ -142,14 +133,6 @@
                     "trackingData": {
                         "secondLevelId": "2",
                         "pageName": "hessenschau"
-                    },
-                    "label": {
-                        "type": "Ticker",
-                        "loca": "ticker",
-                        "byline": {
-                            "bylineSsi": "ssi",
-                            "bylineText": "BylineText"
-                        }
                     }
                 }
             }

package/src/stories/views/components/Teaser/data/teaser_standard_xl_serif.json

@@ -23,24 +23,14 @@
             "teaserImage": {
                 "copyrightWithLinks": "",
                 "responsiveImage": {
-                    "asPicture": true,
-                    "asImage": false,
+                    "asPicture": false,
+                    "asImage": true,
                     "fallback": "https://picsum.photos/id/188/480/210",
                     "sources": [
                         {
-                            "media": "all and (max-width: 43.688em)",
-                            "sizes": "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"
-                        },
-                        {
-                            "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                            "sizes": "100vw",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                        },
-                        {
-                            "media": "all and (min-width: 64em)",
-                            "sizes": "960px",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                            
+                            "sizes": "(min-width: 1010px) 960px, 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"
                         }
                     ]
                 }
@@ -89,7 +79,7 @@
                 "type": "Ticker",
                 "loca": "ticker",
                 "byline": {
-                    "bylineSsi": "ssi",
+                    "bylineSsi": "BylineText aus ssi",
                     "bylineText": "BylineText"
                 }
             },
@@ -113,24 +103,14 @@
                     "teaserImage": {
                         "copyrightWithLinks": "",
                         "responsiveImage": {
-                            "asPicture": true,
-                            "asImage": false,
+                            "asPicture": false,
+                            "asImage": true,
                             "fallback": "https://picsum.photos/id/188/480/210",
                             "sources": [
                                 {
-                                    "media": "all and (max-width: 43.688em)",
-                                    "sizes": "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"
-                                },
-                                {
-                                    "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                                    "sizes": "100vw",
-                                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                                },
-                                {
-                                    "media": "all and (min-width: 64em)",
-                                    "sizes": "960px",
-                                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                                    
+                                    "sizes": "(min-width: 1010px) 960px, 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"
                                 }
                             ]
                         }
@@ -142,14 +122,6 @@
                     "trackingData": {
                         "secondLevelId": "2",
                         "pageName": "hessenschau"
-                    },
-                    "label": {
-                        "type": "Ticker",
-                        "loca": "ticker",
-                        "byline": {
-                            "bylineSsi": "ssi",
-                            "bylineText": "BylineText"
-                        }
                     }
                 }
             }

package/src/stories/views/components/Teaser/data/teaser_standard_xxl_serif.json

@@ -23,24 +23,14 @@
             "teaserImage": {
                 "copyrightWithLinks": "",
                 "responsiveImage": {
-                    "asPicture": true,
-                    "asImage": false,
+                    "asPicture": false,
+                    "asImage": true,
                     "fallback": "https://picsum.photos/id/188/480/210",
                     "sources": [
                         {
-                            "media": "all and (max-width: 43.688em)",
-                            "sizes": "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"
-                        },
-                        {
-                            "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                            "sizes": "100vw",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                        },
-                        {
-                            "media": "all and (min-width: 64em)",
-                            "sizes": "960px",
-                            "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                            
+                            "sizes": "(min-width: 1010px) 960px, 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"
                         }
                     ]
                 }
@@ -85,14 +75,6 @@
                 "avDocument": "",
                 "image": ""
             },
-            "label": {
-                "type": "Ticker",
-                "loca": "ticker",
-                "byline": {
-                    "bylineSsi": "ssi",
-                    "bylineText": "BylineText"
-                }
-            },
             "geotag": [
                 {
                     "title": "Wolfhagen"
@@ -113,24 +95,14 @@
                     "teaserImage": {
                         "copyrightWithLinks": "",
                         "responsiveImage": {
-                            "asPicture": true,
-                            "asImage": false,
+                            "asPicture": false,
+                            "asImage": true,
                             "fallback": "https://picsum.photos/id/188/480/210",
                             "sources": [
                                 {
-                                    "media": "all and (max-width: 43.688em)",
-                                    "sizes": "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"
-                                },
-                                {
-                                    "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
-                                    "sizes": "100vw",
-                                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
-                                },
-                                {
-                                    "media": "all and (min-width: 64em)",
-                                    "sizes": "960px",
-                                    "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
+                                    
+                                    "sizes": "(min-width: 1010px) 960px, 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"
                                 }
                             ]
                         }
@@ -142,14 +114,6 @@
                     "trackingData": {
                         "secondLevelId": "2",
                         "pageName": "hessenschau"
-                    },
-                    "label": {
-                        "type": "Ticker",
-                        "loca": "ticker",
-                        "byline": {
-                            "bylineSsi": "ssi",
-                            "bylineText": "BylineText"
-                        }
                     }
                 }
             }

package/src/stories/views/components/Teaser/data/ticker_label.json

@@ -0,0 +1,10 @@
+{
+    "label": {
+        "type": "Ticker",
+        "loca": "ticker",
+        "byline": {
+            "bylineSsi": "BylineText aus ssi",
+            "bylineText": "BylineText"
+        }
+    }
+}

package/src/stories/views/components/Teaser/labelHelper.js

@@ -0,0 +1,13 @@
+function addLabel(json, label) {
+    json.link.content.label = label;
+    json.link.content.topline = false;
+}
+function removeLabel(json, topline) {
+  json.link.content.label = false;
+  json.link.content.topline = topline;
+}
+function changeTeaserSize(json, size) {
+  json.teasersize = size
+}
+export { addLabel, removeLabel, changeTeaserSize};
+//export default addLabel;

package/src/stories/views/components/Teaser/teaser-standard.stories.mdx

@@ -1,17 +1,20 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
+import 'core-js/actual/structured-clone';
+import { addLabel, removeLabel, changeTeaserSize } from './labelHelper';
 import teaser from './Teaser-standard.hbs'
-import hero_teaser from './data/teaser_standard_xxl_serif.json'
+import hero_teaser from './data/teaser_standard_xxl_serif.json' 
 import xl_teaser from './data/teaser_standard_xl_serif.json'
 import lg_teaser from './data/teaser_standard_lg_serif.json'
 import md_teaser from './data/teaser_standard_md_serif.json'
 import sm_teaser from './data/teaser_standard_sm_serif.json'
-
-
-
-
+import ticker_label from './data/ticker_label.json';
+let hero_teaser_with_label  =  structuredClone(hero_teaser);
+addLabel(hero_teaser_with_label, ticker_label.label);
 
 <Meta   title="Komponenten/Teaser/Standard"
+        parameters={{
+            layout: 'fullscreen',
+        }}
         argTypes={{
             teasersize: {
                 control: {
@@ -21,7 +24,7 @@ import sm_teaser from './data/teaser_standard_sm_serif.json'
                 description: 'Teaser Größe',
                 table: {
                     defaultValue: {
-                        summary: 'xl',
+                        summary: 'xxl',
                     },
                 },
             }
@@ -48,8 +51,11 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
 Ein toller Einleitungstext für unsere `Teaser` Komponente:
 
 <Preview withToolbar>
-    <Story name="Standard Hero" args={hero_teaser}>
-        {Template.bind({})}
+    <Story  name="Standard Hero" args={hero_teaser}>
+        {Template.bind({})} 
+    </Story>
+    <Story name="Standard Hero with Label" args={hero_teaser_with_label}>
+        {Template.bind({})} 
     </Story>   
     <Story name="Standard XL" args={xl_teaser}>
         {Template.bind({})}

package/src/stories/views/components/base/image/responsiveImage.hbs

@@ -39,7 +39,7 @@
             {{/unless}}
             <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
                     loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
-                 {{#with this.srcset}} {{#if ../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
+                 {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="image imageSimple {{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}

package/src/stories/views/components/base/loadDynamic.hbs

@@ -0,0 +1,5 @@
+{{#switch templatePath}}
+    {{#case "components/Header/ServiceNavigation/ServiceNavigationItem"}}
+        {{> components/Header/ServiceNavigation/ServiceNavigationItem}}
+    {{/case}}
+{{/switch}}

package/src/stories/views/components/base/loadSSI.hbs

@@ -1,5 +1,5 @@
 {{#if (isStorybook)}}  
-    {{> (lookup . '_template') }}   
+    {{> components/base/loadDynamic templatePath=templatePath}} 
 {{else}}
     {{{this}}}
 {{/if}}