hr-design-system-handlebars 0.53.1 → 0.54.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.54.0 (Mon Aug 15 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1673 [#296](https://github.com/mumprod/hr-design-system-handlebars/pull/296) ([@Sunny1112358](https://github.com/Sunny1112358) [@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.53.3 (Fri Aug 05 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1694 [#295](https://github.com/mumprod/hr-design-system-handlebars/pull/295) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.53.2 (Thu Aug 04 2022)
+
+#### 🐛 Bug Fix
+
+- Feature/dpe 1567 [#294](https://github.com/mumprod/hr-design-system-handlebars/pull/294) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.53.1 (Thu Aug 04 2022)
 
 #### 🐛 Bug Fix

package/build/helpers/loca.js

@@ -19,6 +19,7 @@ module.exports = function(text, options) {
         "label_ticker":"Ticker",
         "label_download":"Download",
         "label_media":"Media",
+        "label_event":"Konzert",
         "group_tabbed_more":"weitere Meldungen aus " + options,
     }
 

package/dist/assets/index.css

@@ -827,6 +827,9 @@ video {
 .h-5 {
   height: 1.25rem;
 }
+.h-2\/5 {
+  height: 40%;
+}
 .h-auto {
   height: auto;
 }
@@ -1075,6 +1078,9 @@ video {
 .gap-y-5 {
   row-gap: 1.25rem;
 }
+.gap-y-4 {
+  row-gap: 1rem;
+}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1147,6 +1153,16 @@ video {
 .border-0 {
   border-width: 0px;
 }
+.border-x {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+.border-r {
+  border-right-width: 1px;
+}
+.border-l-2 {
+  border-left-width: 2px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1159,8 +1175,11 @@ video {
 .border-t {
   border-top-width: 1px;
 }
-.border-r {
-  border-right-width: 1px;
+.border-dashed {
+  border-style: dashed;
+}
+.border-dotted {
+  border-style: dotted;
 }
 .border-white {
   --tw-border-opacity: 1;
@@ -1174,6 +1193,14 @@ video {
   border-color: #006dc1;
   border-color: var(--color-topline);
 }
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
+}
+.border-slate-600 {
+  --tw-border-opacity: 1;
+  border-color: rgba(71, 85, 105, var(--tw-border-opacity));
+}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
@@ -1209,6 +1236,14 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
 }
+.bg-grey-alto {
+  --tw-bg-opacity: 1;
+  background-color: rgba(224, 224, 224, var(--tw-bg-opacity));
+}
+.bg-orange-bridesmaid {
+  --tw-bg-opacity: 1;
+  background-color: rgba(252, 242, 237, var(--tw-bg-opacity));
+}
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
@@ -1260,6 +1295,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
 }
+.bg-neutral-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 229, 229, var(--tw-bg-opacity));
+}
 .bg-\[\#dce8f0\] {
   --tw-bg-opacity: 1;
   background-color: rgba(220, 232, 240, var(--tw-bg-opacity));
@@ -1282,6 +1321,11 @@ video {
   --tw-gradient-to: rgba(0, 0, 0, 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-white {
+  --tw-gradient-from: #fff;
+  --tw-gradient-to: rgba(255, 255, 255, 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .to-purple-100 {
   --tw-gradient-to: #f3e8ff;
 }
@@ -1362,6 +1406,10 @@ video {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .py-1\.5 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
@@ -1387,6 +1435,9 @@ video {
 .pr-2 {
   padding-right: 0.5rem;
 }
+.pt-5 {
+  padding-top: 1.25rem;
+}
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -1558,6 +1609,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgba(0, 0, 0, var(--tw-text-opacity));
+}
 .text-blue-science {
   --tw-text-opacity: 1;
   color: rgba(0, 109, 193, var(--tw-text-opacity));
@@ -1620,6 +1675,9 @@ video {
 .opacity-70 {
   opacity: 0.7;
 }
+.opacity-80 {
+  opacity: 0.8;
+}
 .shadow-inner {
   --tw-shadow: inset 0 0px 5px 0 rgba(0, 0, 0, 0.25);
   --tw-shadow-colored: inset 0 0px 5px 0 var(--tw-shadow-color);
@@ -2577,6 +2635,10 @@ video {
     position: static;
   }
 
+  .md\:absolute {
+    position: absolute;
+  }
+
   .md\:top-auto {
     top: auto;
   }
@@ -2770,21 +2832,32 @@ video {
     border-color: rgba(255, 255, 255, var(--tw-border-opacity));
   }
 
+  .md\:bg-neutral-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(229, 229, 229, var(--tw-bg-opacity));
+  }
+
+  .md\:from-white {
+    --tw-gradient-from: #fff;
+    --tw-gradient-to: rgba(255, 255, 255, 0);
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  }
+
   .md\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
 
-  .md\:px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
   .md\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
+  .md\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .md\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -2830,6 +2903,10 @@ video {
     text-decoration-thickness: 2px;
   }
 
+  .md\:opacity-80 {
+    opacity: 0.8;
+  }
+
   .md\:drop-shadow-md {
     --tw-drop-shadow: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.07));
     -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

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

@@ -38,7 +38,7 @@
                 </noscript>
             {{/unless}}
             <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
-                    loading="{{#if ../.._noDelay}}auto{{else}}lazy{{/if}}"
+                    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="{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>

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

@@ -5,9 +5,6 @@
     {{#case "components/teaser/group_teaser/group_teaser"}}
         {{> components/teaser/group_teaser/group_teaser}}
     {{/case}}
-    {{#case "components/teaser/group_teaser/group_highlight"}}
-        {{> components/teaser/group_teaser/group_highlight}}
-    {{/case}}
     {{#case "components/teaser/tabbox/group_tabbox"}}
         {{> components/teaser/tabbox/group_tabbox}}
     {{/case}}

package/dist/views/components/event/instant_dates.hbs

@@ -0,0 +1,21 @@
+{{#if this.moreThenOneEvent}}
+    {{#with this.firstInstant}}
+        <span class='text-2xl font-headingSerif font-bold'>{{this.startDate.day}}</span>
+        <span class='text-sm font-headingSerif'>{{this.startDate.monthNameShort}}</span>
+    {{/with}}
+    {{#if this.moreThenTwoEvents}}
+        <span class='text-sm font-headingSerif'>|</span>
+    {{else}}
+        <span class='text-sm font-headingSerif'>+</span>
+    {{/if}}
+    {{#with this.lastInstant}}
+        <span class='text-2xl font-headingSerif font-bold'>{{this.startDate.day}}</span>
+        <span class='text-sm font-headingSerif'>{{this.startDate.monthNameShort}}</span>
+    {{/with}}
+{{else}}
+    {{#with this.firstInstant}}
+        <span class='text-sm font-headingSerif'>{{this.startDate.weekdayNameShort}}</span>
+        <span class='text-2xl font-headingSerif font-bold'>{{this.startDate.day}}</span>
+        <span class='text-sm font-headingSerif'>{{this.startDate.monthNameShort}}</span>
+    {{/with}}
+{{/if}}

package/dist/views/components/grid/grid.hbs

@@ -11,7 +11,7 @@
         </a>
       {{/components/grid/grid_item}}   
     {{/components/grid/grid_group}} 
-    {{#>components/grid/grid_group_highlight  }}    
+    {{#>components/grid/grid_group _backgroundColor="1"}}    
       <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>
       {{#>components/grid/grid_item _size="6"}}
         <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
@@ -23,7 +23,7 @@
           6/12 = 50%    
         </div>
       {{/components/grid/grid_item}} 
-    {{/components/grid/grid_group_highlight}} 
+    {{/components/grid/grid_group}} 
 
     {{#>components/grid/grid_group _size="100"}}
 

package/dist/views/components/grid/grid_group.hbs

@@ -1,3 +1,9 @@
-<section class="grid grid-cols-12 items-start bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch _size '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
-    {{> @partial-block }}
-</section>
+{{~#if _backgroundColor}}
+    {{#>components/grid/grid_group_highlight _backgroundColor=this.backgroundColor }}  
+        {{> @partial-block }}
+    {{/components/grid/grid_group_highlight }}
+{{else}}
+    {{#>components/grid/grid_group_standard _size=this.teaserSize }}  
+        {{> @partial-block }}
+    {{/components/grid/grid_group_standard }}
+{{/if}}

package/dist/views/components/grid/grid_group_highlight.hbs

@@ -1,6 +1,6 @@
 </div>
-<div class="grid bg-blue-400 col-full grid-page">
-    <section class="grid grid-cols-12 px-8 py-6 bg-blue-400 col-full sm:col-main gap-x-6 gap-y-9">
+<div class="grid col-full grid-page {{inline-switch _backgroundColor '["1","2"]' '[" bg-grey-alto"," bg-orange-bridesmaid"]'}}">
+    <section class="grid grid-cols-12 py-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}
         </div>

package/dist/views/components/grid/grid_group_standard.hbs

@@ -0,0 +1,3 @@
+<section class="grid grid-cols-12 items-start bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch _size '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
+    {{> @partial-block }}
+</section>

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

@@ -0,0 +1,20 @@
+<div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
+    <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
+        {{#>components/base/link _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }} 
+            {{> components/teaser/components/teaser_heading 
+            _fontVariant=this.headingFontVariant
+            _headlineTag=this.headlineTag 
+            _label=this.label 
+            _readMore=this.link.readMoreText.readMoreScreenreader 
+            _size=this.teaserSize 
+            _title=this.title 
+            _topline=this.topline 
+            _teaserType=this.teaserType
+            _isMobile1to1=this.isMobile1to1}}            
+        {{/components/base/link}}   
+    </header>
+    <div class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
+        {{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize _cssClasses=_teaserTextCssClasses }}
+        {{> components/teaser/components/teaser_byline}} 
+    </div>
+</div>

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

@@ -1,3 +1,12 @@
 {{#>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=../this.dontLazyload _addClassImg="" ~}}
-{{/components/base/link}}  
+{{/components/base/link}}  
+{{#if this.isEvent}}
+    {{#unless this.displayTeaserBodyAsImageOverlay}}
+        {{#>components/teaser/components/teaser_image_overlay _cssClasses="top-0 h-full"}}
+            <div class="flex flex-col items-center justify-center p-4">
+                {{> components/event/instant_dates}}
+            </div>
+        {{/components/teaser/components/teaser_image_overlay}}
+    {{/unless}}
+{{/if}}

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

@@ -0,0 +1,3 @@
+<div class="{{#unless _noOverlayInMobileViewports}}absolute bg-gradient-to-t from-white bg-neutral-200 opacity-80{{else}}relative border-x border-b border-gray-400 md:border-0 md:absolute md:from-white md:bg-neutral-200 md:opacity-80{{/unless}} flex justify-center{{#if _cssClasses}} {{_cssClasses}}{{/if}}" aria-hidden="true">
+    {{> @partial-block }} 
+</div>

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

@@ -1,10 +1,10 @@
-{{#>components/grid/grid_group size=this.teaserSize }}  
+{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}  
     {{~#if this.hasGroupTitle}}
-        <h2 class="text-2xl md:text-3xl headline-barrier col-span-full">
+        <h2 class="text-4xl col-span-full py-4 font-headingSerif{{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
             {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}
                 {{this.groupTitle}}
             {{~#if this.hasLink}}</a>{{/if~}}
         </h2>
     {{/if}}
     {{~> components/teaser/teaser_logic/teaser_logic ~}}
-{{/components/grid/grid_group}}  
+{{/components/grid/grid_group}}

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

@@ -1,4 +1,4 @@
-<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}"
+<article class="col-span-12 flex items-start md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} flex-col{{/unless}}"
     x-data="{ avStart: false }"
     {{#if this.isMobile1to1}}
             :class="avStart ? 'flex-col' : 'flex-row'"
@@ -7,22 +7,5 @@
     <figure class="relative ar-16-9{{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-2/3"," basis-2/5 md:basis-1/3"," basis-2/5 md:basis-1/2"]'~}}">
         {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }} 
     </figure>
-    <div class="{{~inline-switch this.teaserSize '["hero","100","50"]' '["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]'~}}">
-        <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
-            {{#>components/base/link _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }}
-                {{> components/teaser/components/teaser_heading _fontVariant=this.headingFontVariant
-                    _headlineTag=this.headlineTag 
-                    _label=this.label 
-                    _readMore=this.link.readMoreText.readMoreScreenreader 
-                    _size=this.teaserSize 
-                    _title=this.title 
-                    _teaserType=this.teaserType
-                    _topline=this.topline}} 
-            {{/components/base/link}}               
-        </header>
-        <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
-            {{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize }}
-            {{> components/teaser/components/teaser_byline}} 
-        </section>
-    </div>
+    {{> 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"]') }}
 </article>

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

@@ -1,4 +1,4 @@
-<article class="col-span-12 flex gap-y-3 gap-x-4 
+<article class="relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
 {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
 {{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} 
  "
@@ -11,24 +11,14 @@
     {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">    
         {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}     
     </figure>
-    <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}">
-        <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
-            {{#>components/base/link _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }} 
-                {{> components/teaser/components/teaser_heading 
-                _fontVariant=this.headingFontVariant
-                _headlineTag=this.headlineTag 
-                _label=this.label 
-                _readMore=this.link.readMoreText.readMoreScreenreader 
-                _size=this.teaserSize 
-                _title=this.title 
-                _topline=this.topline 
-                _teaserType=this.teaserType
-                _isMobile1to1=this.isMobile1to1}}            
-            {{/components/base/link}}   
-        </header>
-        <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
-            {{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize }}
-            {{> components/teaser/components/teaser_byline}} 
-        </section>
-    </div>
+    {{#if this.displayTeaserBodyAsImageOverlay}}
+        {{#>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-dashed border-r border-gray-400">
+                {{> 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')}}
+        {{/components/teaser/components/teaser_image_overlay}}
+    {{else}}
+        {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 md:flex-full')}}
+    {{/if}}
 </article>

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

@@ -0,0 +1,133 @@
+<article class="col-span-12 flex gap-y-3 gap-x-4 
+    {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
+    {{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} 
+     "
+    x-data="{ avStart: false }"
+    {{#if this.isMobile1to1}}
+            :class="avStart ? 'flex-col' : 'flex-row'"
+    {{/if}}   
+    >
+   
+    {{#if this.isEvent}}
+    {{! ---- To handle two events ----}}
+        {{#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~}}">    
+                    {{> 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
+                    {{inline-switch teaserSize '["100"]' '["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]'}}" 
+                    aria-hidden="true">
+                    <div class="self-center block mx-4 text-center text-black">
+                        <span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day}}</span>
+                        <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}}</span>
+                        +<br>
+                        <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~}}
+                        {{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}}">
+                                {{#>components/base/link css="hover:text-toplineColor" }} 
+                                {{> 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 
+                                teaserType=this.teaserType
+                                _isMobile1to1=this.isMobile1to1}}            
+                                {{/components/base/link}}   
+                            </header>
+                            <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
+                                {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
+                            </section>
+                        </div>
+                    </div>
+            </article>
+            {{else if this.moreThenTwoEvents}}
+                {{! ---- 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~}}">    
+                    {{> 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">
+                    <div class="self-center block mx-4 text-center text-black">
+                        <span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day }}   </span>
+                        <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort  }} </span>
+                        |<br>
+                        <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>
+                </article>
+            {{else}}
+                {{! ---- 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~}}">    
+                        {{> 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
+                    {{inline-switch teaserSize '["100"]' '["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]'}}" 
+                    aria-hidden="true">
+                        <div class="self-center block mx-4 text-center text-black">
+                            <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.weekdayNameShort  }} </span>
+                            <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~}}
+                        {{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}}">
+                                {{#>components/base/link css="hover:text-toplineColor" }} 
+                                {{> 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 
+                                teaserType=this.teaserType
+                                _isMobile1to1=this.isMobile1to1}}            
+                                {{/components/base/link}}   
+                            </header>
+                            <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
+                                {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
+                            </section>
+                        </div>
+                    </div>
+                </article>
+        {{/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~}}">    
+            {{> 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"]'}}">
+            <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
+                {{#>components/base/link css="hover:text-toplineColor" }} 
+                {{> 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 
+                teaserType=this.teaserType
+                _isMobile1to1=this.isMobile1to1}}            
+                {{/components/base/link}}   
+            </header>
+            <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
+                {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
+            </section>
+        </div>
+</article>

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.53.1",
+    "version": "0.54.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_single_event.json

@@ -0,0 +1,32 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserEvent",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includePath",
+            "@->value": "components/teaser/teaser_alternative"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserType",
+            "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_1"
+            }
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "event"
+            }
+        }
+    ]
+}