hr-design-system-handlebars 0.56.14 → 0.56.15

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v0.56.15 (Fri Sep 16 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1645 [#323](https://github.com/mumprod/hr-design-system-handlebars/pull/323) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
 # v0.56.14 (Fri Sep 16 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1600,6 +1600,9 @@ video {
 .pb-5 {
   padding-bottom: 1.25rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -1938,7 +1941,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1663320957588;
+  counter-reset: cnt1663336382306;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2321,7 +2324,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1663320957588 1;
+  counter-increment: cnt1663336382306 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2338,7 +2341,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1663320957588);
+  content: counter(cnt1663336382306);
 }
 /*! purgecss start ignore */
 :root,
@@ -3505,6 +3508,11 @@ video {
             flex: 0 1 auto;
   }
 
+  .lg\:basis-1\/3 {
+    -ms-flex-preferred-size: 33.333333%;
+        flex-basis: 33.333333%;
+  }
+
   .lg\:flex-row {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;

package/dist/views/components/teaser/cluster/teaser_cluster_byline.hbs

@@ -0,0 +1,35 @@
+
+<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">
+    {{!--Teaser-Info--}}
+    {{#with this.teaserInfo}}
+        {{#if this.showTeaserInfo~}}
+           {{~#if this.showTeaserInfoSection}}
+              <span class="uppercase">
+                 {{../this.documentSection~}}
+              </span>
+              <span class="mx-px last-of-type:hidden">|</span>
+           {{/if}}
+           {{~#if this.showTeaserInfoDate}}
+              {{~#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 ../this.teaserDate}}
+                      <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
+                  {{/with~}}
+                  <span class="mx-px last-of-type:hidden">|</span>
+               {{/if~}}
+           {{/if~}}
+        {{/if}}
+    {{/with}}
+
+    {{!--Profiles--}}
+    {{#if this.showProfileInfoAsByline}}
+        {{#if this.profiles}}
+           <span>{{this.profiles}}</span>
+           <span class="mx-px last-of-type:hidden">|</span>
+        {{/if}}
+    {{/if}}
+</p>

package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,41 +1,12 @@
-
-                {{#>components/base/link link=this.logicItem.includeModel.link _css="group" _doTracking=(if this.logicItem.includeModel.doTracking 'true') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }} 
-                    {{> components/teaser/components/teaser_heading
-                        _headlineTag=this.logicItem.includeModel.headlineTag 
-                        _label=this.logicItem.includeModel.label 
-                        _size=this.logicItem.includeModel.teaserSize
-                        _title=this.logicItem.includeModel.title 
-                        _teaserType="cluster"
-                        _ordered=_ordered
-                        _titleBlue='true' }}           
-                {{/components/base/link}}
-
-                {{!--Teaser-Info--}}
-                <p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">  
-                {{#with this.logicItem.includeModel.teaserInfo}}
-                    {{#if this.showTeaserInfo~}}
-                        {{~#if this.showTeaserInfoSection}}
-                            <span class="uppercase">
-                                {{../this.logicItem.includeModel.documentSection~}}
-                            </span>                    
-                            <span class="mx-px last-of-type:hidden">|</span>                    
-                        {{/if}}
-                        {{~#if this.showTeaserInfoDate}}
-                            {{~#with ../this.logicItem.includeModel.teaserDate}}
-                                <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
-                            {{/with~}}                    
-                            <span class="mx-px last-of-type:hidden">|</span>                    
-                        {{else}}
-                            {{~#if this.showTeaserInfoDateTime}}
-                                {{~#with ../this.logicItem.includeModel.teaserDate}}
-                                    <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
-                                {{/with~}}                        
-                                <span class="mx-px last-of-type:hidden">|</span>                        
-                            {{/if~}}
-                        {{/if~}}    
-
-                    {{/if}}
-                {{/with}}
-    	        </p>
-                {{!--Teaser-Info--}}
-                
+{{#>components/base/link _css="group" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }}
+    {{> components/teaser/components/teaser_heading
+        _headlineTag="h1"
+        _label=this.label
+        _size=_size
+        _title=this.title
+        _teaserType="cluster"
+        _ordered=_ordered
+        _titleBlue='true' 
+        _firstItem=_firstItem}}
+{{/components/base/link}}
+{{> components/teaser/cluster/teaser_cluster_byline}}

package/dist/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -1,14 +1,26 @@
-<div class="{{~#if this.showGenreImage}}{{~inline-switch this.teaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
+<div class="{{~#if this.showImage}}{{~inline-switch this.teaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
-        <div class="px-0 pb-5 {{~inline-switch this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/3 md:ar-1-1"]'}}">
-            {{~> components/base/image/responsive_image this.genreImage type="standard-ds" variant="topteaser" _addClassImg="ar__content" ~}}
+        <div class="px-0 pb-5 {{~inline-switch this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]'}}">
+            {{~> components/base/image/responsive_image this.genreImage type=../this.teasertype variant=../this.imageVariant addClass=../this.aspectRatio _addClassImg="ar__content" ~}}
         </div>
     {{~/if~}}
+    {{~#if this.showFirstImage}}
+        {{~#with this.firstEntry~}}
+            {{~#if this.teaserImage}}
+                <div class="px-0 pb-5 {{~inline-switch ../this.teaserSize '["100"]' '[" md:pl-5 md:basis-1/2 lg:basis-1/3"]'}}">   
+                    {{~> components/base/image/responsive_image this.teaserImage type=../this.teasertype variant=../this.imageVariant addClass=../this.aspectRatio _addClassImg="ar__content pb-4" ~}}
+                    <div class="mx-5 {{~inline-switch ../this.teaserSize '["100"]' '[" md:mx-0"]'}}">
+                        {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../_ordered _firstItem=true}}
+                    </div> 
+                </div>   
+            {{/if~}}
+        {{~/with~}}
+    {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../_ordered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:border-none"]'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize '["100"]' '[" md:-pt-5 md:border-none"]'}}{{/if~}}">{{/if}}
             {{~#each this~}}
                 <li class="{{~#if ../../_ordered}} -ordered {{/if}} py-5 {{#if ../../this.headlineListItems.link}} last-of-type:pb-0{{/if~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
-                    {{> components/teaser/cluster/teaser_cluster_item _ordered=../../_ordered }} 
+                    {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../_ordered }} 
                 </li>
             {{~/each}}
         {{~#if ../_ordered}}</ol>{{else}}</ul>{{/if~}}

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

@@ -7,5 +7,5 @@
     {{#if _topline}}
         {{> components/teaser/components/teaser_topline _text=_topline _readMore=_readMore _teaserType=_teaserType}}
     {{/if}}
-    {{> components/teaser/components/teaser_title _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}
+    {{> components/teaser/components/teaser_title _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}
 </{{~ _headlineTag ~}}>

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

@@ -1,3 +1,3 @@
-<span class='block mt-0.5 group-hover:underline {{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1}}'>
+<span class='block mt-0.5 group-hover:underline {{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}'>
     {{~_text~}}
 </span>

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

@@ -38,7 +38,11 @@ the 4 parameters are:
         {{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
     {{~/case~}}
     {{~#case 'cluster'~}}
-      text-lg
+        {{#if _firstItem}}
+            {{~inline-switch _size '["100"]' '[" text-lg md:text-2xl"," text-lg"]'}}
+        {{else}}
+            text-lg 
+        {{/if}}
     {{~/case~}}
 {{~/switch~}}
 {{~inline-switch

package/package.json

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

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

@@ -20,6 +20,17 @@
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "genreImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "cluster_1"
+            }
         }
     ]
 }

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

@@ -0,0 +1,50 @@
+{
+    "@->jsoninclude": "teaser/teaser_cluster.inc.json",
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "title",
+            "@->value": "NEUESTE BEITRÄGE"
+        },
+                {
+            "@->contentpath": "teaserLogo",
+            "@->value": "hessenschau_de"
+        },
+        {
+            "@->contentpath": "isHessenschauLogo",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showFirstImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "clusterTeaserItems",
+            "@->value": [
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item2"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item3"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item4"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item5"
+                }
+            ]
+        }
+    ]
+}

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

@@ -20,6 +20,17 @@
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "genreImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "cluster_2"
+            }
         }
     ]
 }

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

@@ -0,0 +1,50 @@
+{
+    "@->jsoninclude": "teaser/teaser_cluster.inc.json",
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "33"
+        },
+        {
+            "@->contentpath": "title",
+            "@->value": "NEUESTE BEITRÄGE"
+        },
+                {
+            "@->contentpath": "teaserLogo",
+            "@->value": "hessenschau_de"
+        },
+        {
+            "@->contentpath": "isHessenschauLogo",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showFirstImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "clusterTeaserItems",
+            "@->value": [
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item2"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item3"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item4"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item5"
+                }
+            ]
+        }
+    ]
+}

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

@@ -20,6 +20,17 @@
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "genreImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "cluster_2"
+            }
         }
     ]
 }

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

@@ -0,0 +1,51 @@
+{
+    "@->jsoninclude": "teaser/teaser_cluster.inc.json",
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "title",
+            "@->value": "NEUESTE BEITRÄGE"
+        },
+                {
+            "@->contentpath": "teaserLogo",
+            "@->value": "hessenschau_de"
+        },
+        {
+            "@->contentpath": "isHessenschauLogo",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showFirstImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "clusterTeaserItems",
+            "@->value": [
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item2"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item3"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item4"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item5"
+                }
+            ]
+        }
+
+    ]
+}