hr-design-system-handlebars 1.95.0 → 1.96.0

package/dist/assets/js/base/tracking/clickTracking.feature.js

@@ -1,51 +1,37 @@
-import { download, pi, uxAction, uxNavigation } from 'base/tracking/pianoHelper.subfeature'
+import { download, pi, uxAction, uxNavigation } from 'base/tracking/pianoHelper.subfeature';
 
-const ClickTracking = function (context) {
-    const { options } = context,
-        { element: elementToTrack } = context,
-        settings = options.settings || []
+const ClickTracking = (context) => {
+    const { options, element: elementToTrack } = context;
+    const settings = options.settings || [];
 
-    const init = function () {
-        configureEventHandlers()
-    }
-
-    const configureEventHandlers = function () {
-        if (window.attachEvent) {
-            elementToTrack.attachEvent('click', clickHandler)
-        } else {
-            elementToTrack.addEventListener('click', clickHandler)
-        }
-    }
-
-    const clickHandler = function (event) {
-        settings.forEach(function (trackingSetting) {
+    const clickHandler = (event) => {
+        settings.forEach(({ type, clickLabel, secondLevelId }) => {
             /* use String.prototype.replace function with a regex and the global flag
                instead of String.prototype.replaceAll function to prevent errors in older
                browsers that don't know the replaceAll function
                see: https://www.designcise.com/web/tutorial/how-to-fix-replaceall-is-not-a-function-javascript-error
             */
-            trackingSetting.clickLabel = trackingSetting.clickLabel.replace(/&/g, '-')
-            switch (trackingSetting.type) {
+            const sanitizedLabel = clickLabel.replace(/&/g, '-');
+            switch (type) {
                 case 'download':
-                    download(trackingSetting.clickLabel, trackingSetting.secondLevelId)
-                    break
+                    download(sanitizedLabel, secondLevelId);
+                    break;
                 case 'pi':
-                    pi()
-                    break
+                    pi();
+                    break;
                 case 'uxAction':
-                    uxAction(trackingSetting.clickLabel, trackingSetting.secondLevelId)
-                    break
+                    uxAction(sanitizedLabel, secondLevelId);
+                    break;
                 case 'uxNavigation':
-                    uxNavigation(trackingSetting.clickLabel, trackingSetting.secondLevelId)
-                    break
+                    uxNavigation(sanitizedLabel, secondLevelId);
+                    break;
                 default:
-                    console.log('Fehler, es wurde kein Tracking Typ angegeben.')
-                    break
+                    console.error('Fehler, es wurde kein Tracking Typ angegeben.');
             }
-        })
-    }
+        });
+    };
 
-    init()
-}
+    elementToTrack.addEventListener('click', clickHandler);
+};
 
-export default ClickTracking
+export default ClickTracking;

package/dist/assets/js/base/tracking/pianoHelper.subfeature.js

@@ -1,44 +1,36 @@
-import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
+import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature';
 
 const isTrackingAllowed = () => {
-    const settingsCookie = new SettingsCookie()
-    return settingsCookie.isSettingsCookieAccepted('ati')
-}
-
-const uxAction = (label, secondLevelId) => {
-    secondLevelId = undefined !== secondLevelId ? secondLevelId : typeof pageDisplayConfig !== "undefined" && pageDisplayConfig !== undefined ? pageDisplayConfig.site_level2_id:99
-    if (typeof pa !== "undefined" && pa !== undefined && isTrackingAllowed()) {
-        pa.sendEvent('click.action', {
-            click: label,
-            site_level2_id: secondLevelId,
-        })
-    }
-}
-
-const uxNavigation = (label, secondLevelId) => {
-    secondLevelId = undefined !== secondLevelId ? secondLevelId : typeof pageDisplayConfig !== "undefined" && pageDisplayConfig !== undefined ? pageDisplayConfig.site_level2_id:99
-    if (typeof pa !== "undefined" && pa !== undefined  && isTrackingAllowed()) {
-        pa.sendEvent('click.navigation', {
-            click: label,
-            site_level2_id: secondLevelId,
-        })
-    }
-}
+    const settingsCookie = new SettingsCookie();
+    return settingsCookie.isSettingsCookieAccepted('ati');
+};
 
-const pi = () => {
-    if (typeof pa !== "undefined" && pa !== undefined  && isTrackingAllowed()) {
-        pa.sendEvent('page.display', pageDisplayConfig)
+const sendEvent = (eventType, event) => {
+    if (typeof pa !== 'undefined' && pa !== undefined && isTrackingAllowed()) {
+        pa.sendEvent(eventType, event);
     }
-}
-
-const download = (label, secondLevelId) => {
-    secondLevelId = undefined !== secondLevelId ? secondLevelId : typeof pageDisplayConfig !== "undefined" && pageDisplayConfig !== undefined ? pageDisplayConfig.site_level2_id:99
-    if (typeof pa !== "undefined" && pa !== undefined  && isTrackingAllowed()) {
-        pa.sendEvent('click.download', {
-            click: label,
-            site_level2_id: secondLevelId,
-        })
+};
+
+const getDefaultEvent = (label, secondLevelId) => {
+    return {
+        click: label,
+        site_level2_id: determineSecondLevelId(secondLevelId)
     }
-}
+};
+
+const determineSecondLevelId = (secondLevelId) => {
+    return secondLevelId !== undefined
+        ? secondLevelId
+        : pageDisplayConfig.site_level2_id;
+};
+
+const uxAction = (label, secondLevelId) => sendEvent('click.action', getDefaultEvent(label, secondLevelId));
+
+const uxNavigation = (label, secondLevelId) => sendEvent('click.navigation', getDefaultEvent(label, secondLevelId));
+
+const pi = () => sendEvent('page.display', pageDisplayConfig);
+
+const download = (label, secondLevelId) => sendEvent('click.download', getDefaultEvent(label, secondLevelId));
+
 
-export { isTrackingAllowed, uxAction, uxNavigation, pi, download }
+export { isTrackingAllowed, uxAction, uxNavigation, pi, download };

package/dist/views/components/social_sharing/social_sharing_icons.hbs

@@ -100,4 +100,18 @@
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
+{{/with}}
+{{~#with this.printLink}}
+<li class="">
+    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        title="{{loca "share_copy_linktitle" }}"
+        onclick="window.print()"
+        {{#with ../_trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::print"}]}'
+        {{/with}}
+    >
+        <span x-cloak class="flex items-center justify-center w-full h-full">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="print-ds" _iconmap="icons" ~}}</span>
+
+    </button>
+</li>
 {{/with}}

package/dist/views_static/components/social_sharing/social_sharing_icons.hbs

@@ -100,4 +100,18 @@
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
+{{/with}}
+{{~#with this.printLink}}
+<li class="">
+    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        title="{{loca "share_copy_linktitle" }}"
+        onclick="window.print()"
+        {{#with ../_trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::print"}]}'
+        {{/with}}
+    >
+        <span x-cloak class="flex items-center justify-center w-full h-full">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="print-ds" _iconmap="icons" ~}}</span>
+
+    </button>
+</li>
 {{/with}}

package/package.json

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

package/src/assets/fixtures/page/story/story_with_label.json

@@ -2,6 +2,18 @@
 
     "@->jsoninclude": "page/story/story.inc.json",
     "@->overrides": [
+        {
+            "@->contentpath": "socialSharing",
+            "@->value": {
+                "twitterLink": "/twitterLink-url",
+                "facebookLink": "/facebookLink-url",
+                "whatsappLink": "/whatsappLink-url",
+                "mailtoLink": "/mailtoLink-url",
+                "copyToClipboardLink": "/copyToClipboard-url",
+                "printLink": true
+
+            }
+        },
         {
             "@->contentpath": "label",
             "@->value": 

package/src/assets/icons/icons/svgmap/print-ds.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 320 320">
+  <path d="M268.8,86.1h-19.9c0-.6,0-1.2,0-1.9v-39.5c0-11.4-9.3-20.7-20.7-20.7H90.8c-11.4,0-20.7,9.3-20.7,20.7v39.5c0,.6,0,1.3,0,1.9h-18.9c-15.6,0-28.2,12.7-28.2,28.2v96c0,15.6,12.7,28.2,28.2,28.2h18.8v36.7c0,11.4,9.3,20.7,20.7,20.7h137.5c11.4,0,20.7-9.3,20.7-20.7v-36.7h19.8c15.6,0,28.2-12.7,28.2-28.2v-96c0-15.6-12.7-28.2-28.2-28.2ZM88.9,44.7c0-1,.8-1.9,1.9-1.9h137.5c1,0,1.9.8,1.9,1.9v39.5c0,1-.8,1.9-1.9,1.9H90.8c-1,0-1.9-.8-1.9-1.9v-39.5ZM230.1,275.3c0,1-.8,1.9-1.9,1.9H90.8c-1,0-1.9-.8-1.9-1.9v-92.3c0-1,.8-1.9,1.9-1.9h137.5c1,0,1.9.8,1.9,1.9v92.3ZM278.2,210.4c0,5.2-4.2,9.4-9.4,9.4h-19.8v-36.7c0-11.4-9.3-20.7-20.7-20.7H90.8c-11.4,0-20.7,9.3-20.7,20.7v36.7h-18.8c-5.2,0-9.4-4.2-9.4-9.4v-96c0-5.2,4.2-9.4,9.4-9.4h217.5c5.2,0,9.4,4.2,9.4,9.4v96Z"/>
+  <path d="M207,194.8h-94.2c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4h94.2c5.2,0,9.4-4.2,9.4-9.4s-4.2-9.4-9.4-9.4Z"/>
+  <path d="M207,231.6h-94.2c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4h94.2c5.2,0,9.4-4.2,9.4-9.4s-4.2-9.4-9.4-9.4Z"/>
+</svg>