hr-design-system-handlebars 0.93.0 → 0.93.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v0.93.1 (Wed Nov 30 2022)
+
+#### 🐛 Bug Fix
+
+- DPE-1875: adding PodcastChannelClusterTeaser Story [#405](https://github.com/mumprod/hr-design-system-handlebars/pull/405) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v0.93.0 (Wed Nov 30 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1788,15 +1788,15 @@ video {
 .pr-4 {
   padding-right: 1rem;
 }
+.pl-8 {
+  padding-left: 2rem;
+}
 .pb-5 {
   padding-bottom: 1.25rem;
 }
 .pb-4 {
   padding-bottom: 1rem;
 }
-.pl-8 {
-  padding-left: 2rem;
-}
 .pt-1\.5 {
   padding-top: 0.375rem;
 }
@@ -2253,7 +2253,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1669798155096;
+  counter-reset: cnt1669814302552;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2639,7 +2639,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1669798155096 1;
+  counter-increment: cnt1669814302552 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2655,7 +2655,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1669798155096);
+  content: counter(cnt1669814302552);
 }
 .\[-T\:\+Z\] {
   --t: +Z;

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

@@ -1,6 +1,6 @@
 
 {{#with this.teaserInfo}}
-<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif">
+<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
     {{!--Teaser-Info--}}
         {{#if this.showTeaserInfo~}}
            {{~#if this.showTeaserInfoSection}}
@@ -9,6 +9,12 @@
               </span>
               <span class="mx-px last-of-type:hidden">|</span>
            {{/if}}
+           {{~#if this.showTeaserInfoChannel}}
+                <span class="uppercase">
+                    {{../this.podcastChannel.title}}
+                </span>
+                <span class="mx-px last-of-type:hidden">|</span>
+            {{/if}}
            {{~#if this.showTeaserInfoDate}}
               {{~#with ../this.teaserDate}}
                  <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>

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

@@ -10,5 +10,5 @@
         _titleCss='text-clusterTeaserLink'
         _firstItem=_firstItem}}        
                 {{/decorator}}
-{{> components/teaser/cluster/teaser_cluster_byline}}
+{{> components/teaser/cluster/teaser_cluster_byline _ordered=_ordered}}
                 

package/package.json

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

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

@@ -12,10 +12,6 @@
                 {
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
-        },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
         }
     ]
 }

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

@@ -13,10 +13,6 @@
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"

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

@@ -13,10 +13,6 @@
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "showFirstImageOrGenreImage",
             "@->value": "true"

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

@@ -12,10 +12,6 @@
         {
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
-        },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
         }
     ]
 }

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

@@ -13,10 +13,6 @@
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"

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

@@ -13,10 +13,6 @@
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "showFirstImageOrGenreImage",
             "@->value": "true"

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

@@ -12,10 +12,6 @@
         {
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
-        },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
         }
     ]
 }

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

@@ -13,10 +13,6 @@
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "showGenreImage",
             "@->value": "true"

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

@@ -13,10 +13,6 @@
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "firstEntry",
             "@->value": {

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

@@ -0,0 +1,63 @@
+{
+    "@->jsoninclude": "teaser/teaser_cluster.inc.json",
+    "@->overrides": [
+        {
+            "@->contentpath": "teaserSize",
+            "@->value": "100"
+        },
+        {
+            "@->contentpath": "title",
+            "@->value": "DER TAG IN HESSEN"
+        },
+        {
+            "@->contentpath": "teaserLogo",
+            "@->value": "hessenschau_de"
+        },
+        {
+            "@->contentpath": "showGenreImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "showFirstImageOrGenreImage",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "overviewLink.link",
+            "@->value": ""
+        },
+        {
+            "@->contentpath": "genreImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "teaser_cluster_genre_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "sonniger-herbst-100"
+                    }
+                ]
+            }
+        },
+        {
+            "@->contentpath": "clusterTeaserItems",
+            "@->value": [
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item7"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item7"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item7"
+                },
+                {
+                    "@->jsoninclude": "teaser/headline_list_item.inc.json",
+                    "@->contentpath": "item7"
+                }
+            ]
+        }
+    ]
+}

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

@@ -9,10 +9,6 @@
             "@->contentpath": "title",
             "@->value": "MEISTGEKLICKT HEUTE"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"

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

@@ -9,10 +9,6 @@
             "@->contentpath": "title",
             "@->value": "MEISTGEKLICKT HEUTE"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"

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

@@ -9,10 +9,6 @@
             "@->contentpath": "title",
             "@->value": "MEISTGEKLICKT HEUTE"
         },
-        {
-            "@->contentpath": "isHessenschauLogo",
-            "@->value": "true"
-        },
         {
             "@->contentpath": "teaserLogo",
             "@->value": "hessenschau_de"

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

@@ -18,11 +18,11 @@
         "teaserInfo": {
             "showTeaserInfo": true,
             "showTeaserInfoSection": true,
-            "showTeaserInfoChannel": true,
+            "showTeaserInfoChannel": false,
             "showTeaserInfoAll": true,
             "showTeaserInfoDate": false,
             "showTeaserInfoDateTime": true,
-            "showTeaserInfoProgramRef": true
+            "showTeaserInfoProgramRef": false
         },
         "teaserDate": {
             "htmlDateTime": "2022-04-17T19:30+0200",
@@ -86,11 +86,11 @@
         "teaserInfo": {
             "showTeaserInfo": true,
             "showTeaserInfoSection": true,
-            "showTeaserInfoChannel": true,
+            "showTeaserInfoChannel": false,
             "showTeaserInfoAll": true,
             "showTeaserInfoDate": false,
             "showTeaserInfoDateTime": true,
-            "showTeaserInfoProgramRef": true
+            "showTeaserInfoProgramRef": false
         },
         "teaserDate": {
             "htmlDateTime": "2022-04-17T19:30+0200",
@@ -145,11 +145,11 @@
         "teaserInfo": {
             "showTeaserInfo": true,
             "showTeaserInfoSection": true,
-            "showTeaserInfoChannel": true,
+            "showTeaserInfoChannel": false,
             "showTeaserInfoAll": true,
             "showTeaserInfoDate": false,
             "showTeaserInfoDateTime": true,
-            "showTeaserInfoProgramRef": true
+            "showTeaserInfoProgramRef": false
         },
         "teaserDate": {
             "htmlDateTime": "2022-04-17T19:30+0200",
@@ -204,11 +204,11 @@
         "teaserInfo": {
             "showTeaserInfo": true,
             "showTeaserInfoSection": true,
-            "showTeaserInfoChannel": true,
+            "showTeaserInfoChannel": false,
             "showTeaserInfoAll": true,
             "showTeaserInfoDate": false,
             "showTeaserInfoDateTime": true,
-            "showTeaserInfoProgramRef": true
+            "showTeaserInfoProgramRef": false
         },
         "teaserDate": {
             "htmlDateTime": "2022-04-17T19:30+0200",
@@ -271,11 +271,11 @@
         "teaserInfo": {
             "showTeaserInfo": true,
             "showTeaserInfoSection": true,
-            "showTeaserInfoChannel": true,
+            "showTeaserInfoChannel": false,
             "showTeaserInfoAll": true,
             "showTeaserInfoDate": false,
             "showTeaserInfoDateTime": true,
-            "showTeaserInfoProgramRef": true
+            "showTeaserInfoProgramRef": false
         },
         "teaserDate": {
             "htmlDateTime": "2022-04-17T19:30+0200",
@@ -330,11 +330,11 @@
         "teaserInfo": {
             "showTeaserInfo": true,
             "showTeaserInfoSection": true,
-            "showTeaserInfoChannel": true,
+            "showTeaserInfoChannel": false,
             "showTeaserInfoAll": true,
             "showTeaserInfoDate": false,
             "showTeaserInfoDateTime": true,
-            "showTeaserInfoProgramRef": true
+            "showTeaserInfoProgramRef": false
         },
         "teaserDate": {
             "htmlDateTime": "2022-04-17T19:30+0200",
@@ -370,5 +370,142 @@
             "date": "17.04.22",
             "dateSeparatorTime": "17.04.22, 19:30"
         }
+    },
+    "item7": {
+        "title": "Untergrund war Strategie: Punk in der DDR",
+        "url": "/teaser1",
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "teaser_podcast",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "heiner-goebbels-102"
+                        }
+                    ]
+                },
+                "podcastDuration": "53:13",
+                "teaserInfo": {
+                    "showTeaserInfo": true,
+                    "showTeaserInfoSection": false,
+                    "showTeaserInfoChannel": true,
+                    "showTeaserInfoAll": true,
+                    "showTeaserInfoDate": false,
+                    "showTeaserInfoDateTime": true,
+                    "showTeaserInfoProgramRef": false
+                },
+                "podcastChannel": {
+                    "title": "DER TAG IN HESSEN",
+                    "url": "#ChannelURL",
+
+                    "podcastHoster": [
+                        {
+                            "podcastHosterUrl": "https://podcasts.apple.com/podcast/hr2-doppelkopf/id212822590",
+                            "podcastHosterName": "ITunes"
+                        },
+                        {
+                            "podcastHosterUrl": "https://podcast.hr.de/hr2_doppelkopf/podcast.xml",
+                            "podcastHosterName": "RSS"
+                        },
+                        {
+                            "podcastHosterUrl": "https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2hyMl9kb3BwZWxrb3BmL3BvZGNhc3QueG1s?hl=de",
+                            "podcastHosterName": "Google Podcasts"
+                        },
+                        {
+                            "podcastHosterUrl": "https://www.ardaudiothek.de/episode/hr2-doppelkopf/ich-hoere-bei-jedem-geraeusch-gleich-die-tonhoehe-oder-komponist-und-theatermacher-heiner-goebbels-erneuert-das-musiktheater/hr2-kultur/12056783/",
+                            "podcastHosterName": "ARD Audiothek"
+                        }
+                    ]
+                },
+                "audioUrl": "https://mp3podcasthrdl-a.akamaihd.net/mp3/podcast/hr2_doppelkopf/hr2_doppelkopf_20221031_96251016.mp3",
+                "podcastDownloadUrl": "https://mp3podcasthrdl-a.akamaihd.net/mp3/podcast/hr2_doppelkopf/hr2_doppelkopf_20221031_96251016.mp3",
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "teaser_podcast",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "heiner-goebbels-102"
+                        }
+                    ]
+                },
+
+        "teaserSize": "hero",
+        "showLabel": false,
+        "showProfileInfo": false,
+        "teaserDate": {
+            "htmlDateTime": "2020-10-02T19:46+0200",
+            "htmlDate": "02.10.2020",
+            "date": "02.10.20",
+            "dateSeparatorTime": "02.10.20, 19:46"
+        },
+        "documentModificationDate": {
+            "htmlDateTime": "2022-04-17T19:30+0200",
+            "htmlDate": "20.02.1983",
+            "date": "17.04.22",
+            "dateSeparatorTime": "17.04.22, 19:30"
+        },
+        "displayTeaserBodyAsImageOverlay": false,
+        "hasMediaButtons": false,
+        "dontLazyload": true,
+        "isStandardTeaser": true,
+        "isHeroTeaser": false,
+        "isMediaTeaser": true,
+        "isGuide": false,
+        "isProgram": false,
+        "isEvent": false,
+        "isTicker": false,
+        "isAudio": false,
+        "isVideo": false,
+        "isPodcast": true,
+        "isPodcastEpisode": true,
+        "isExtOrBrandLink": false,
+        "isAuthor": false,
+        "copyright": "Copyright Text",
+        "audioAuthor": "Audio Author",
+        "hasStatus": false,
+        "hasTeaserItem": true,
+        "allowAVConsumption": true,
+        "aspectRatio": "ar--teaserTop",
+        "hideGeotag": false,
+        "hideEditableByline": true,
+        "doTracking": true,
+        "trackingForArdMediatheksLink": false,
+        "showMediatheksLink": false,
+        "showAirdate": false,
+        "showProfileInfoAsByline": false,
+        "obsolet_brandOfTeaser": "hessenschau",
+        "documentSection": "Kultur",
+        "headlineTag": "h1",
+        "icon": "ortsmarke",
+        "imageVariant": "topteaser",
+        "shorttext": "1977 kam Punk in die Musikwelt. Und in die Radios. Auch in der DDR. Aus der Begeisterung für diese Musik, gemischt mit Wut, Trotz, Mut und Erfindungsreichtum, entstand in den folgenden Jahren eine Subkultur in der Diktatur. Das sozialistische Regime erklärte die Punks zu Staatsfeinden. Geralf Pochop aus Halle an der Saale, Jahrgang 1964, war einer dieser DDR-Punks. Er hat seine Erinnerungen, Erfahrungen und Erlebnisse aufgeschrieben - in seinem Buch \"Untergrund war Strategie - Punk in der DDR zwischen Rebellion und Repression\". Mit uns spricht er über fantasievoll improvisierte Outfits, die drastischen Methoden der Staatssicherheit gegen Punks und seine Sicht auf Mauerfall und Wiedervereinigung.",
+        "sophoraId": "podcast-episode-76432",
+        "profiles": "",
+        "teaserLead": {
+            "@->jsoninclude": "teaser/teaser_lead.inc.json",
+            "@->contentpath": "podcast"
+        },
+        "label": {
+            "type": "podcast",
+            "loca": "label_podcast",
+            "byline": {
+                "bylineSsi": "07:42 min",
+                "bylineText": ""
+            }
+        },
+        "link": {
+            "url": "/teaser1",
+            "webviewUrl": "/teaser1#webview",
+            "isTargetBlank": false,
+            "hasIcon": false,
+            "iconName": "iconName",
+            "readMoreText": {
+                "readMoreScreenreader": "Zur Podcastepisode",
+                "readMore": "mehr",
+                "readMoreLong": "read More Long"
+            }
+        }
     }
 }
+        

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

@@ -1,7 +1,6 @@
 {
     "title": "",
     "teaserLogo": "",
-    "isHessenschauLogo": false,
     "showFirstImageOrGenreImage": false,
     "hideTitle": false,
     "showGenreImage": false,

package/src/stories/views/components/teaser/cluster/teaser_cluster.stories.mdx

@@ -16,6 +16,7 @@ import clusterTeaserGenre33 from '../fixtures/cluster_teaser_33_genre.json'
 import clusterTeaserImage100 from '../fixtures/cluster_teaser_100_image.json'
 import clusterTeaserImage50 from '../fixtures/cluster_teaser_50_image.json'
 import clusterTeaserImage33 from '../fixtures/cluster_teaser_33_image.json'
+import PodcastChannelClusterTeaser from '../fixtures/cluster_teaser_Podcast_Channel.json'
 
 <Meta   title="Komponenten/Teaser/Cluster"
         parameters={{
@@ -88,4 +89,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     <Story name="tagesschau/sportschau 33" args={clusterTeaserExtern33}>
         {Template.bind({})}
     </Story>
+    <Story name="PodcastEpisoden ClusterTeaser" args={PodcastChannelClusterTeaser}>
+        {Template.bind({})}
+    </Story>
 </Preview>

package/src/stories/views/components/teaser/cluster/teaser_cluster_byline.hbs

@@ -1,6 +1,6 @@
 
 {{#with this.teaserInfo}}
-<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif">
+<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
     {{!--Teaser-Info--}}
         {{#if this.showTeaserInfo~}}
            {{~#if this.showTeaserInfoSection}}
@@ -9,6 +9,12 @@
               </span>
               <span class="mx-px last-of-type:hidden">|</span>
            {{/if}}
+           {{~#if this.showTeaserInfoChannel}}
+                <span class="uppercase">
+                    {{../this.podcastChannel.title}}
+                </span>
+                <span class="mx-px last-of-type:hidden">|</span>
+            {{/if}}
            {{~#if this.showTeaserInfoDate}}
               {{~#with ../this.teaserDate}}
                  <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>

package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -10,5 +10,5 @@
         _titleCss='text-clusterTeaserLink'
         _firstItem=_firstItem}}        
                 {{/decorator}}
-{{> components/teaser/cluster/teaser_cluster_byline}}
+{{> components/teaser/cluster/teaser_cluster_byline _ordered=_ordered}}