hr-design-system-handlebars 0.57.0 → 0.58.1

package/.storybook/preview-head.html

@@ -1,4 +1,4 @@
-<script defer src="https://cdn.jsdelivr.net/npm/async-alpine@0.3.x/dist/async-alpine.script.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/async-alpine@0.4.x/dist/async-alpine.script.js"></script>
 <script defer src="https://unpkg.com/@alpinejs/collapse@3.8.1/dist/cdn.min.js"></script>
 <script defer src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js"></script>
 <script defer src="https://unpkg.com/alpinejs@3.8.1/dist/cdn.min.js"></script>

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v0.58.1 (Fri Sep 30 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1677 [#330](https://github.com/mumprod/hr-design-system-handlebars/pull/330) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
+# v0.58.0 (Fri Sep 30 2022)
+
+#### 🚀 Enhancement
+
+- Adds async alpine.script.js to dynamically load alpine components [#327](https://github.com/mumprod/hr-design-system-handlebars/pull/327) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.57.0 (Tue Sep 27 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1555,9 +1555,9 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+.py-11 {
+  padding-top: 2.75rem;
+  padding-bottom: 2.75rem;
 }
 .py-5 {
   padding-top: 1.25rem;
@@ -1963,7 +1963,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1664291825673;
+  counter-reset: cnt1664537329982;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2346,7 +2346,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1664291825673 1;
+  counter-increment: cnt1664537329982 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2363,7 +2363,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1664291825673);
+  content: counter(cnt1664537329982);
 }
 /*! purgecss start ignore */
 :root,

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

@@ -10,11 +10,11 @@
                     <span class="text-lg md:text-2xl border-blue-congress {{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}">{{this.title}}</span>
                 {{/if}}
             </h2>
-            {{> components/teaser/cluster/teaser_cluster_list _ordered=this._ordered}} 
+            {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} 
     </div>
-    {{~#with this.headlineListItems}}
+    {{~#with this.headlineListOverview}}
         {{~#if this.link~}}
-            <div class="flex mx-5 py-12 {{~inline-switch ../this.teaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
+            <div class="flex mx-5 py-11 {{~inline-switch ../this.teaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
                 {{~> components/button/button_pseudo  _color="blue" _linkTitle=this.title~}}
             </div>
         {{~/if~}}

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

@@ -1,28 +1,28 @@
-<div class="{{~#if this.showImage}}{{~inline-switch this.teaserSize '["100"]' '[" md:flex md:flex-row"]'}}{{~/if~}}">
+<div class="{{~#if this.showFirstImageOrGenreImage}}{{~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/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" ~}}
+            {{~> 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" ~}}
+                    {{~> 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}}
+                        {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../this.isOrdered _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}}
+        {{~#if ../this.isOrdered}}<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 _size=../this.teaserSize _ordered=../../_ordered }} 
+                <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-5 {{#if ../../this.headlineListOverview.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 _size=../this.teaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}
-        {{~#if ../_ordered}}</ol>{{else}}</ul>{{/if~}}
-{{/with~}}
+        {{~#if ../this.isOrdered}}</ol>{{else}}</ul>{{/if~}}
+    {{/with~}}
 </div>

package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs

@@ -1,5 +1,9 @@
-<div x-data="contentNavigationHandler()" 
-    class="col-span-12 flex gap-y-3 gap-x-4  {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
+<div id="contentNavWrapper"
+    x-ignore
+    ax-load
+    ax-load-src="/js/content_nav_alpine.js"
+    x-data="contentNavigationHandler()"
+    class="col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
 >
     {{> components/content_nav/content_nav _teasersize=this.teasersize }}           
 </div>

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

@@ -1,20 +1,10 @@
-{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
-    {{#if this.accentedGroup}}
-        <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">
-    {{/if}}  
+{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} 
         {{~#if this.hasGroupTitle}}
             <h2 class="text-2xl md:text-4xl col-span-full py-0 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}}
-    {{#if this.accentedGroup}}
-        </div>
-        <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">
-    {{/if}}  
+        {{/if}}  
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
-    {{#if this.accentedGroup}}
-        </div>
-    {{/if}}
 {{/components/grid/grid_group}}

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

@@ -0,0 +1,20 @@
+{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
+    
+        <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">
+
+        {{~#if this.hasGroupTitle}}
+            <h2 class="text-2xl md:text-4xl col-span-full py-0 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}}
+
+        </div>
+        <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">
+    
+        {{~> components/teaser/teaser_logic/teaser_logic ~}}
+    
+        </div>
+    
+{{/components/grid/grid_group}}

package/dist/views/components/teaser/podcast/podcast_player.hbs

@@ -1,7 +1,8 @@
 <div class="w-full col-span-12 js-load" 
     x-data="playaudio()"
     ax-load
-    ax-load-src="http://localhost:6006/vendor/js/podcastPlayer.alpine.js">
+    x-ignore
+    ax-load-src="/js/podcastPlayer.alpine.js">
     <button x-on:keydown.tab="playAndStop" x-on:click="playAndStop" type="button" class="relative rounded-xl group cursor-pointer focus:outline-none focus:ring focus:ring-[#1F89AE]">       
         <div class="">
             <div x-show="!currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5 text-white">
@@ -21,11 +22,11 @@
       <span x-text="audioDuration">06:21 Min</span>
     </div>
 
-    <audio x-ref="audio" controls="controls">
+    <audio x-ref="audio" >
         <source src="https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3" type="audio/mp3" />
     </audio>
 
-  <div class="hidden">
+  <div class="">
     currentTime: <span x-text="currentTime"></span><br>
     currentTimePercentage:  <span x-text="currentTimePercentage"></span><br>
     currentTimeMs: <span x-text="currentTimeMs"></span><br>

package/package.json

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

@@ -22,7 +22,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "showImage",
+            "@->contentpath": "showFirstImageOrGenreImage",
             "@->value": "true"
         },
         {

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

@@ -18,7 +18,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "showImage",
+            "@->contentpath": "showFirstImageOrGenreImage",
             "@->value": "true"
         },
         {

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

@@ -22,7 +22,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "showImage",
+            "@->contentpath": "showFirstImageOrGenreImage",
             "@->value": "true"
         },
         {

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

@@ -18,7 +18,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "showImage",
+            "@->contentpath": "showFirstImageOrGenreImage",
             "@->value": "true"
         },
         {

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

@@ -22,7 +22,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "showImage",
+            "@->contentpath": "showFirstImageOrGenreImage",
             "@->value": "true"
         },
         {

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

@@ -18,7 +18,7 @@
             "@->value": "true"
         },
         {
-            "@->contentpath": "showImage",
+            "@->contentpath": "showFirstImageOrGenreImage",
             "@->value": "true"
         },
         {

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

@@ -10,7 +10,7 @@
             "@->value": "tagesschau_de"
         },
         {
-            "@->contentpath": "headlineListItems.link",
+            "@->contentpath": "headlineListOverview.link",
             "@->value": ""
         }
     ]

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

@@ -10,7 +10,7 @@
             "@->value": "tagesschau_de"
         },
         {
-            "@->contentpath": "headlineListItems.link",
+            "@->contentpath": "headlineListOverview.link",
             "@->value": ""
         }
     ]

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

@@ -10,7 +10,7 @@
             "@->value": "sportschau"
         },
         {
-            "@->contentpath": "headlineListItems.link",
+            "@->contentpath": "headlineListOverview.link",
             "@->value": ""
         }
     ]

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

@@ -18,11 +18,11 @@
             "@->value": "hessenschau_de"
         },
         {
-            "@->contentpath": "_ordered",
+            "@->contentpath": "isOrdered",
             "@->value": "true"
         },
         {
-            "@->contentpath": "headlineListItems.link",
+            "@->contentpath": "headlineListOverview.link",
             "@->value": ""
         }
     ]

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

@@ -18,11 +18,11 @@
             "@->value": "hessenschau_de"
         },
         {
-            "@->contentpath": "_ordered",
+            "@->contentpath": "isOrdered",
             "@->value": "true"
         },
         {
-            "@->contentpath": "headlineListItems.link",
+            "@->contentpath": "headlineListOverview.link",
             "@->value": ""
         }
     ]

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

@@ -18,11 +18,11 @@
             "@->value": "hessenschau_de"
         },
         {
-            "@->contentpath": "_ordered",
+            "@->contentpath": "isOrdered",
             "@->value": "true"
         },
         {
-            "@->contentpath": "headlineListItems.link",
+            "@->contentpath": "headlineListOverview.link",
             "@->value": ""
         }
     ]

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

@@ -375,5 +375,79 @@
             "date": "17.04.22",
             "dateSeparatorTime": "17.04.22, 19:30"
         }
-    } 
+    },
+    "item6": {
+        "title": "Mann in Heusenstamm von S-Bahn erfasst - tot",
+        "url": "/teaser1",
+        "teaserImage": {
+            "@->jsoninclude": "teaser/teaser_images.inc.json",
+            "@->contentpath": "cluster_3"
+        },
+        "teaserSize": "hero",
+        "showLabel": false,
+        "showProfileInfo": false,
+        "teaserInfo": {
+            "showTeaserInfo": true,
+            "showTeaserInfoSection": true,
+            "showTeaserInfoChannel": true,
+            "showTeaserInfoAll": true,
+            "showTeaserInfoDate": false,
+            "showTeaserInfoDateTime": true,
+            "showTeaserInfoProgramRef": true
+        },
+        "teaserDate": {
+            "htmlDateTime": "2022-04-17T19:30+0200",
+            "htmlDate": "20.02.1983",
+            "date": "17.04.22",
+            "dateSeparatorTime": "17.04.22, 19:30"
+        },
+        "documentModificationDate": {
+            "htmlDateTime": "2022-04-17T19:30+0200",
+            "htmlDate": "20.02.1983",
+            "date": "17.04.22",
+            "dateSeparatorTime": "17.04.22, 19:30"
+        },
+        "documentSection": "Panorama",
+        "isBroadcastDateHidden": false,
+        "showProfileInfoAsByline": true,
+        "profiles": "Von Petra Boberg und Christine Rütten​",
+        "link": {
+            "url": "/teaser1",
+            "webviewUrl": "/teaser1#webview",
+            "isTargetBlank": false,
+            "hasIcon": false,
+            "iconName": "iconName",
+            "readMoreText": {
+                "readMoreScreenreader": "Zum Artikel",
+                "readMore": "mehr",
+                "readMoreLong": "read More Long"
+            },
+            "content": {
+                "headlineTag": "h1",
+                "headingFontVariant": "serif",
+                "imageVariant": "topteaser",
+                "isFileDownload": false,
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "standard_1"
+                },
+                "teaserSize": "hero",
+                "isMobile1to1": false,
+                "teaserType": "standard-ds",
+                "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
+                "topline": "Überglücklich, aber ohne Mama",
+                "trackingData": {
+                    "secondLevelId": "2",
+                    "pageName": "hessenschau"
+                }
+            }
+        },
+        "airDate": {
+            "htmlDateTime": "2022-04-17T19:30+0200",
+            "htmlDate": "20.02.1983",
+            "date": "17.04.22",
+            "dateSeparatorTime": "17.04.22, 19:30"
+        }
+    }
+
 }

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

@@ -6,8 +6,7 @@
     "HideTitle"   : false,
     "showGenreImage" : false,
     "showFirstImage" : false,
-    "showImage" : false,
-    "_ordered" : false,
+    "isOrdered" : false,
 
     "teaserSize" : "100",
 
@@ -47,7 +46,7 @@
         }
     ],
 
-    "headlineListItems" :{
+    "headlineListOverview" :{
         "title" : "Neue Beiträge auf einen Blick",
         "link"  : {
             "url": "https://www.hessenschau.de"