hr-design-system-handlebars 0.46.0 → 0.47.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.47.0 (Fri May 20 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1579 [#234](https://github.com/mumprod/hr-design-system-handlebars/pull/234) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.46.0 (Fri May 13 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -2543,14 +2543,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-bg-opacity: 1;
     background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
-.hover\:text-white:hover {
-    --tw-text-opacity: 1;
-    color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
 .hover\:text-toplineColor:hover {
     color: #006dc1;
     color: var(--color-topline);
 }
+.hover\:text-white:hover {
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
 .hover\:underline:hover {
     -webkit-text-decoration-line: underline;
             text-decoration-line: underline;

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

@@ -10,12 +10,12 @@
 '_disableNoScript' don't add no script fallback
 
 --}}
-{{#withParam this.responsiveImage _type _variant }}
+{{#withParam this.responsiveImage type variant }}
     {{#if this.asPicture}}
-        <picture class="picture {{~#if ../_addClass}} {{../_addClass}}{{/if}}">
+        <picture class="picture {{~#if ../addClass}} {{../addClass}}{{/if}}">
             {{#unless _disableNoScript}}
                 <noscript>
-                    <img class="image {{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
+                    <img class="image {{~#if ../addClassImg}} {{../addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../alttext}}{{../alttext}}{{else}}{{../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             {{#with this.sources}}
@@ -25,24 +25,24 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="image {{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img class="image {{~#if ../addClassImg}} {{../addClassImg}}{{/if}}" loading="{{#if ../noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../alttext}}{{../alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../errorHandler }} onerror="this.onerror=null; {{../errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
     {{#if this.asImage}}
         {{#with this.sources.[0]}}
-            {{~#with ../../_addClass }}<div class="{{this}}">{{/with}}
-            {{#unless ../../_disableNoScript}}
+            {{~#with ../../addClass }}<div class="{{this}}">{{/with}}
+            {{#unless ../../disableNoScript}}
                 <noscript>
-                    <img class="image {{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
+                    <img class="image {{~#if ../../addClassImg}} {{../../addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../alttext}}{{../../alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/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}}
+                    loading="{{#if ../../noDelay}}auto{{else}}lazy{{/if}}"
+                 {{#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}}
+                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}}
         {{/with}}
 
     {{/if}}

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

@@ -1,19 +1,19 @@
 {{#with this.link}}
     <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} 
-        class="sb-link {{#if ../_cssClasses}} {{../_cssClasses}}{{/if}}{{#if _doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}"
-        {{#if ../_doNavigationTracking}}
-        data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
+        class="sb-link{{#if ../css}} {{../css}}{{/if}}{{#if ../doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if ../isSelected}} {{defaultIfEmpty ../selectedCssClass "-current"}}{{/if}}"
+        {{#if ../doNavigationTracking}}
+        data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../clickLabelType}}{{#if ../clickLabelPrefix1}}::{{../clickLabelPrefix1}}{{/if}}::{{../clickLabelPrefix2}}-Link geklickt"}]}'
         {{/if}}
-        {{#if ../_doTracking}}
-            {{#with this.content.trackingData}}data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{_clickLabelPrefix1}}::{{_clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
+        {{#if ../doTracking}}
+            {{#with this.content.trackingData}}data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../clickLabelPrefix1}}::{{../../clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
         {{else}}
             {{#if ../this.content.isFileDownload}}
                 {{#with this.content.trackingData}}data-new-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
             {{/if}}
         {{/if}}
         {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
-        {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+        {{#if ../isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
     >
+{{/with}}  
         {{> @partial-block }}     
-    </a>
-{{/with}}  
+    </a>

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

@@ -8,4 +8,7 @@
     {{#case "components/teaser/teaser_standard"}}
         {{> components/teaser/teaser_standard}}
     {{/case}}
+    {{#case "components/teaser/components/teaser_comments"}}
+        {{> components/teaser/components/teaser_comments}}
+    {{/case}}
 {{/switch}}

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

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

package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs

@@ -1,5 +1,4 @@
 {{#with this.subNavigation}}
-
     <div {{#unless ../this.selected}}x-cloak{{/unless}}
         x-data="flyoutHandler" 
         x-ref="{{getRandom}}"

package/dist/views/components/site_header/navigation_flyout/navigation_flyout_column.hbs

@@ -1,5 +1,4 @@
 <ul class="{{inline-switch count '["1","2"]' '["md:w-1/1", "md:w-1/1 lg:w-1/2"]'}} {{inline-switch navtype '["ServiceNavigation","RubrikNavigation"]' '["border-b border-gray-200 md:border-0","border-0"]'}} lg:even:pl-4 lg:odd:pr-4 {{#if selected}} lg:container lg:flex lg:h-9 {{/if}} ">
-          
     {{~#each this ~}} 
         {{~#if this.title~}}
             {{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../selected _fromNav=../navtype _flyout=../_flyout _parent=../_parent ~}}

package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs

@@ -1,8 +1,7 @@
 <li :class="dropped ? 'h-auto' : 'h-10'"  
     class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">
-    
-    {{#>components/base/link _cssClasses=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent _clickLabelPrefix2=this.link.content.text }}
-        {{content.text}}      
-        {{~#if this.hasIcon}}{{> components/base/image/icon _icon=this.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
+    {{#>components/base/link css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') doNavigationTracking="true" clickLabelType=_fromNav clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}
+        {{this.text}}      
+        {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
     {{/components/base/link}}  
 </li>

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

@@ -4,13 +4,13 @@
         {{#with this.teaserInfo}}
             {{#if this.showTeaserInfo~}}
                 {{~#if this.showTeaserInfoDate}}
-                    {{~#with ../teaserDate}}
+                    {{~#with ../this.teaserDate}}
                         <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
                     {{/with~}}                    
                     <span class="mx-px last-of-type:hidden">|</span>                    
                 {{else}}
                     {{~#if this.showTeaserInfoDateTime}}
-                        {{~#with ../teaserDate}}
+                        {{~#with ../this.teaserDate}}
                             <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
                         {{/with~}}                        
                         <span class="mx-px last-of-type:hidden">|</span>                        
@@ -34,6 +34,7 @@
         {{/if}}    
 
     {{!--Comments--}}
-    {{> components/teaser/components/teaser_comments}}
-
+    {{#with this.commentsSsi}}
+        {{> components/base/loadSSI templatePath='components/teaser/components/teaser_comments' }}    
+    {{/with}}
 </p>

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

@@ -3,8 +3,8 @@
         {{#>components/base/link _cssClasses="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>
-            <span class="text-toplineColor">{{this.content.commentNumber}}</span>
-            {{#if this.content.hasOneComment}}
+            <span class="text-toplineColor">{{../../this.commentNumber}}</span>
+            {{#if ../../this.hasOneComment}}
                 <span class="text-toplineColor">{{loca "comment_label_text"}}</span>
             {{else}}
                 <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>

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

@@ -1,13 +1,11 @@
-{{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }} 
-    {{#with this.content.label}}
-        <div class="leading-5.5">
-            {{> components/label/label type=loca text=type}}
-        </div>
-    {{/with~}}    
-    <{{~ ../headlineTag ~}}>
-        {{#with this.content.topline}}
-            {{> components/teaser/components/teaser_topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
-        {{/with}}
-        {{> components/teaser/components/teaser_title text=../this.title font=../font size=../size }}
-    </{{~ ../headlineTag ~}}>
-{{/components/base/link}}   
+{{#with label}}
+    <div class="leading-5.5">
+        {{> components/label/label type=loca text=type}}
+    </div>
+{{/with~}}    
+<{{~ headlineTag ~}}>
+    {{#if topline}}
+        {{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
+    {{/if}}
+    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size }}
+</{{~ headlineTag ~}}>

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

@@ -1 +1,8 @@
-<span class="{{inline-switch size '["xxl","xl","sm"]' '["block md:text-base","hidden md:block md:text-base","hidden","hidden md:block"]'}} text-sm mt-3 font-copy">{{text}}</span>
+<span
+    class='{{inline-switch
+            size
+            '["hero","100","25"]'
+            '["block md:text-base","hidden md:block md:text-base","hidden","hidden md:block"]'
+        }}
+        text-sm mt-3 font-copy'
+>{{text}}</span>

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

@@ -1 +1,13 @@
-<span class="block {{inline-switch size '["xxl","xl","sm"]' '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg ","text-2xl "]'}} {{font}} mt-0.5">{{text}}</span>
+<span
+    class='block mt-0.5
+        {{inline-switch
+            size
+            '["hero","100","25"]'
+            '[" text-2xl md:text-4xl"," text-2xl md:text-4xl"," text-lg"," text-2xl"]'
+        }}
+        {{inline-switch
+            fontVariant
+            '["serif", "sans-serif"]'
+            '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
+        }}'
+>{{text}}</span>

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

@@ -1,15 +1,21 @@
-<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 flex-row ","md:col-span-4 flex-row","md:col-span-6 flex-row","flex-row"]'}} ">
-    <figure class="{{inline-switch teasersize '["sm", "xxl"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9","basis-3/5 ar-16-9", "ar-16-9"]'}} ">
-        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
-            {{~> components/base/image/responsive_image this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
+<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 flex-row ","md:col-span-4 flex-row","md:col-span-6 flex-row","flex-row"]'}} ">
+    <figure class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9","basis-3/5 ar-16-9", "ar-16-9"]'}} ">
+        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}
+            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../_noDelay addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
         {{/components/base/link}}  
     </figure>
-    <div class="{{inline-switch teasersize '["sm", "xxl"]' '["basis-3/5 md:flex-full" , "basis-2/5"]'}} ">
-        <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_heading headlineTag="h2" size=teasersize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]')}}            
+    <div class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-3/5 md:flex-full" , "basis-2/5"]'}} ">
+        <header class="md:px-0 {{inline-switch teasersize '["25"]' '["","px-5"]'}}">
+            {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
+                headlineTag=this.headlineTag 
+                label=this.label 
+                readMore=this.link.readMoreText.readMoreScreenreader 
+                size=this.teaserSize 
+                title=this.title 
+                topline=this.topline}}            
         </header>
-        <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_text text=shorttext size=teasersize }}
+        <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
+            {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>
     </div>

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

@@ -1,15 +1,24 @@
-<article class="col-span-12 flex gap-y-5 gap-x-4 {{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-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
-        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
-            {{~> components/base/image/responsive_image this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
+<article class="col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["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 this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
+        {{#>components/base/link isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
+            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
         {{/components/base/link}}  
     </figure>
-    <div class="{{inline-switch teasersize '["sm"]' '["basis-3/5 md:flex-full"]'}} ">
-        <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_heading headlineTag="h2" size=teasersize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}            
+    <div class="{{inline-switch this.teaserSize '["25"]' '["basis-3/5 md:flex-full"]'}} ">
+        <header class="md:px-0 {{inline-switch teaserSize '["25"]' '["","px-5"]'}}">
+            {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }} 
+                {{> components/teaser/components/teaser_heading 
+                fontVariant=this.headingFontVariant
+                headlineTag=this.headlineTag 
+                label=this.label 
+                readMore=this.link.readMoreText.readMoreScreenreader 
+                size=this.teaserSize 
+                title=this.title 
+                topline=this.topline }}            
+            {{/components/base/link}}   
         </header>
-        <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_text text=shorttext size=teasersize }}
+        <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
+            {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>
     </div>

package/package.json

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

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

@@ -0,0 +1,14 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative"
+        }
+    ]
+}

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

@@ -0,0 +1,21 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "25"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "sm_4"
+            }
+        }
+    ]
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.topline",
+            "@->value": ""
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "ticker"
+            }
+        }
+    ]
+}