hr-design-system-handlebars 0.121.14 → 0.121.15

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.121.15 (Thu Jan 26 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2039 Tracking for Teasers [#507](https://github.com/mumprod/hr-design-system-handlebars/pull/507) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.121.14 (Thu Jan 26 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2477,7 +2477,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1674740334457;
+  counter-reset: cnt1674745165651;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2695,7 +2695,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1674740334457 1;
+  counter-increment: cnt1674745165651 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2711,7 +2711,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1674740334457);
+  content: counter(cnt1674745165651);
 }
 /*! ****************************/
 /*! text-shadow                */

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

@@ -1,3 +1,9 @@
-<a href="{{_url}}" class="h-6 js-load ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
+<a href="{{_url}}"
+    class="h-6 ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}{{#with this.trackingData}} js-load{{/with}}"
+    {{#with this.trackingData}}
+        data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'
+    {{/with}} 
+    aria-label="Podcast herunterladen"
+    download>
     {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
 </a>

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

@@ -1,8 +1,14 @@
-<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group ds-button-round  {{_css}}" aria-label="Podcast starten">           
-    <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
+<button id="button{{_id}}" 
+    x-on:keydown.space.prevent.stop="{{_alpineClick}}" 
+    x-on:click.stop="{{_alpineClick}}" 
+    type="button" 
+    class="flex justify-start cursor-pointer group ds-button-round  {{_css}}"
+    aria-label="Podcast starten"
+    >           
+    <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
         {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
     </div>
-    <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text">
+    <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
         {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}
     </div>  
 </button>

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

@@ -27,7 +27,8 @@
         :aria-controls="$id('dropdown-button')"
         type="button"
         :class="open ? 'drop-shadow' : ''" 
-        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
+        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight js-load"
+        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'>Abonnieren
         <div x-cloak x-show="open" class="w-3 h-3">
             {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
         </div>
@@ -50,11 +51,12 @@
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
-                    title="{{this.podcastHosterName}}" 
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
+                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500 js-load"
+                        title="{{this.podcastHosterName}}" 
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href="{{this.podcastHosterUrl}}"
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:{{this.podcastHosterName}}"}]}'>{{this.podcastHosterName}}</a>
                 </li>
             {{~/each~}}
         </ul>

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -3,16 +3,15 @@
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
-  <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
+  <section class="px-0 col-span-full sm:px-8 md:px-0">
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
-        <button  onclick="window.location.href='#tgp{{@index}}';"
-                 :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'" 
-                 x-effect="$el.removeAttribute('onclick')"
-                 x-on:click.prevent="tab = '{{this.title}}'"  
-                 class="border ds-button text-base font-heading py-px px-2 m-1.5" 
-                 type="button" 
-                 role="tab"
+        <button :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'" 
+                x-on:click.prevent="tab = '{{this.title}}'; "  
+                class="border ds-button text-base font-heading py-px px-2 m-1.5 js-load" 
+                type="button" 
+                role="tab"
+                data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'
         >
           {{this.title}}
         </button>

package/package.json

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

package/src/stories/views/components/teaser/podcast/podcast_downloadbutton.hbs

@@ -1,3 +1,9 @@
-<a href="{{_url}}" class="h-6 js-load ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}" {{#with this.trackingData}} data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}} aria-label="Podcast herunterladen">
+<a href="{{_url}}"
+    class="h-6 ds-link rounded-lg {{#if _addClass}}{{_addClass}}{{/if}}{{#with this.trackingData}} js-load{{/with}}"
+    {{#with this.trackingData}}
+        data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'
+    {{/with}} 
+    aria-label="Podcast herunterladen"
+    download>
     {{> components/base/image/icon _icon='download-neu' _addClass=_iconClass }}
 </a>

package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs

@@ -1,8 +1,14 @@
-<button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group ds-button-round  {{_css}}" aria-label="Podcast starten">           
-    <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
+<button id="button{{_id}}" 
+    x-on:keydown.space.prevent.stop="{{_alpineClick}}" 
+    x-on:click.stop="{{_alpineClick}}" 
+    type="button" 
+    class="flex justify-start cursor-pointer group ds-button-round  {{_css}}"
+    aria-label="Podcast starten"
+    >           
+    <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
         {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
     </div>
-    <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text">
+    <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
         {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}
     </div>  
 </button>

package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -27,7 +27,8 @@
         :aria-controls="$id('dropdown-button')"
         type="button"
         :class="open ? 'drop-shadow' : ''" 
-        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight">Abonnieren
+        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-highlight js-load"
+        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'>Abonnieren
         <div x-cloak x-show="open" class="w-3 h-3">
             {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
         </div>
@@ -50,11 +51,12 @@
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
-                    title="{{this.podcastHosterName}}" 
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
+                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500 js-load"
+                        title="{{this.podcastHosterName}}" 
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href="{{this.podcastHosterUrl}}"
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:{{this.podcastHosterName}}"}]}'>{{this.podcastHosterName}}</a>
                 </li>
             {{~/each~}}
         </ul>

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -3,16 +3,15 @@
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
-  <section class="px-0 col-span-full sm:px-8 md:px-0" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
+  <section class="px-0 col-span-full sm:px-8 md:px-0">
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
-        <button  onclick="window.location.href='#tgp{{@index}}';"
-                 :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'" 
-                 x-effect="$el.removeAttribute('onclick')"
-                 x-on:click.prevent="tab = '{{this.title}}'"  
-                 class="border ds-button text-base font-heading py-px px-2 m-1.5" 
-                 type="button" 
-                 role="tab"
+        <button :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'" 
+                x-on:click.prevent="tab = '{{this.title}}'; "  
+                class="border ds-button text-base font-heading py-px px-2 m-1.5 js-load" 
+                type="button" 
+                role="tab"
+                data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'
         >
           {{this.title}}
         </button>