hr-design-system-handlebars 1.95.1 → 1.97.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.97.0 (Tue Aug 27 2024)
+
+#### 🚀 Enhancement
+
+- Bug/dpe 3321 [#1054](https://github.com/mumprod/hr-design-system-handlebars/pull/1054) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.96.0 (Mon Aug 26 2024)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 3322 [#1053](https://github.com/mumprod/hr-design-system-handlebars/pull/1053) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.95.1 (Fri Aug 23 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -439,7 +439,7 @@ video {
   --tw-gradient-to-position:  ;
 }
 
-.ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .copytext-ds__link, .copytext-ds__link:not(:focus-visible), .shadow, .shadow-md, .shadow-xl, .toggleSwitch-label, .before\:shadow-stage::before {
+.ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .hrds-copytext__link, .hrds-copytext__link:not(:focus-visible), .shadow, .shadow-md, .shadow-xl, .toggleSwitch-label, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -987,7 +987,7 @@ article.indexTextDS .indexTextHighlighted .link {
   text-decoration-thickness: 1px;
 }
 /* -----------------------------COPYTEXT ---------------------------- */
-.copytext-ds__link:focus {
+.hrds-copytext__link:focus {
   --tw-shadow: 0 0 0 0.25rem;
   --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
@@ -997,33 +997,33 @@ article.indexTextDS .indexTextHighlighted .link {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.copytext-ds__link:focus:not(:focus-visible) {
+.hrds-copytext__link:focus:not(:focus-visible) {
   --tw-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.copytext-ds__link.ds-teaser-focus:focus {
+.hrds-copytext__link.ds-teaser-focus:focus {
   --tw-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
-.copytext-ds__link {
+.hrds-copytext__link {
   color: #006eb7;
   color: var(--color-link);
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
   text-decoration-thickness: 1px;
 }
-.copytext-ds__link:hover {
+.hrds-copytext__link:hover {
   text-decoration-thickness: 1px;
 }
-[class~='tw-dark'] .copytext-ds__link {
+[class~='tw-dark'] .hrds-copytext__link {
   color: #006eb7;
   color: var(--color-link-dark);
 }
-.copytext-ds__icon {
+.hrds-copytext__icon {
   margin-top: -0.125rem;
   margin-left: 0.25rem;
   display: inline;
@@ -1031,10 +1031,16 @@ article.indexTextDS .indexTextHighlighted .link {
   width: 1.25rem;
   fill: currentColor;
 }
-.copytext-ds__paragraph .copytext-ds__icon {
+.hrds-copytext__paragraph .hrds-copytext__icon {
   height: 1.5rem;
   width: 1.5rem;
 }
+.hrds-copytext h2 strong, .hrds-copytext h3 strong, .hrds-copytext h4 strong {
+  font-weight: 400;
+}
+.hrds-copytext h2 em, .hrds-copytext h3 em, .hrds-copytext h4 em {
+  font-style: normal;
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -3332,7 +3338,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1724406325510;
+  counter-reset: cnt1724759480906;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3740,7 +3746,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1724406325510 1;
+  counter-increment: cnt1724759480906 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3756,7 +3762,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1724406325510);
+  content: counter(cnt1724759480906);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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/content/copytext/components/contentbox/contentbox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="copytext-ds__box"}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="hrds-copytext__box"}}
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
 

package/dist/views/components/content/copytext/components/infobox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="copytext-ds__box"}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="hrds-copytext__box"}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 

package/dist/views/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -1,9 +1,9 @@
 {{#if this.isText}}
-    <p class="copytext-ds__paragraph mt-4 sm:mt-5 text-lg leading-normal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
+    <p class="hrds-copytext__paragraph mt-4 sm:mt-5 text-lg leading-normal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
 {{/if}}
 {{#if this.isUl}}
-    <ul class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
+    <ul class="hrds-copytext__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
 {{/if}}
 {{#if this.isOl}}
-    <ol class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
+    <ol class="hrds-copytext__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
 {{/if}}

package/dist/views/components/content/copytext/copytext.hbs

@@ -1,4 +1,4 @@
-<div class="mt-2 contents sm:block copytextWrapper">
+<div class="hrds-copytext mt-2 contents sm:block copytextWrapper">
     {{~#with this.leadAudio }}
         {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden article-full-width mt-12 mb-6 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
     {{~/with}}    

package/dist/views_static/components/content/copytext/components/contentbox/contentbox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="copytext-ds__box"}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="hrds-copytext__box"}}
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
 

package/dist/views_static/components/content/copytext/components/infobox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="copytext-ds__box"}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="hrds-copytext__box"}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 

package/dist/views_static/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -1,9 +1,9 @@
 {{#if this.isText}}
-    <p class="copytext-ds__paragraph mt-4 sm:mt-5 text-lg leading-normal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
+    <p class="hrds-copytext__paragraph mt-4 sm:mt-5 text-lg leading-normal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
 {{/if}}
 {{#if this.isUl}}
-    <ul class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
+    <ul class="hrds-copytext__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
 {{/if}}
 {{#if this.isOl}}
-    <ol class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
+    <ol class="hrds-copytext__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
 {{/if}}

package/dist/views_static/components/content/copytext/copytext.hbs

@@ -1,4 +1,4 @@
-<div class="mt-2 contents sm:block copytextWrapper">
+<div class="hrds-copytext mt-2 contents sm:block copytextWrapper">
     {{~#with this.leadAudio }}
         {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden article-full-width mt-12 mb-6 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
     {{~/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.1",
+  "version": "1.97.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/css/custom-components.css

@@ -310,7 +310,7 @@ article.indexTextDS .indexTextHighlighted .link {
 }
 
 /* -----------------------------COPYTEXT ---------------------------- */
-.copytext-ds {
+.hrds-copytext {
     &__link {
         @apply underline text-link decoration-1 hover:decoration-1 dark:text-link-dark ds-link;
     }
@@ -320,8 +320,19 @@ article.indexTextDS .indexTextHighlighted .link {
     }
 
     &__paragraph {
-        .copytext-ds__icon {
+        .hrds-copytext__icon {
             @apply w-6 h-6;
         }
     }
+
+    h2,
+    h3,
+    h4 {
+        strong {
+            @apply font-normal;
+        }
+        em {
+            @apply not-italic;
+        }
+    }
 }

package/src/assets/fixtures/content/copytext/copytext_paragraph.inc.json

@@ -4,7 +4,7 @@
         "split": [
             {
                 "isText": true,
-                "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='copytext-ds__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."
+                "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."
             }
         ]
     }

package/src/stories/views/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/src/stories/views/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/src/stories/views/components/content/copytext/components/contentbox/contentbox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="copytext-ds__box"}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue _cssClass="hrds-copytext__box"}}
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
 

package/src/stories/views/components/content/copytext/components/contentbox/fixtures/contentbox.json

@@ -1 +1 @@
-{"copytext":{"title":"Contentbox: Volle Breite, mit Bild über halbe Breite und Ü","showFullSize":{"isTrue":true},"copytextParagraph":[{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}}],"copytext":{"paragraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='copytext-ds__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}}}
+{"copytext":{"title":"Contentbox: Volle Breite, mit Bild über halbe Breite und Ü","showFullSize":{"isTrue":true},"copytextParagraph":[{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}}],"copytext":{"paragraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}}}

package/src/stories/views/components/content/copytext/components/infobox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="copytext-ds__box"}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize _cssClasses="hrds-copytext__box"}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 

package/src/stories/views/components/content/copytext/components/paragraph/paragraph_body.hbs

@@ -1,9 +1,9 @@
 {{#if this.isText}}
-    <p class="copytext-ds__paragraph mt-4 sm:mt-5 text-lg leading-normal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
+    <p class="hrds-copytext__paragraph mt-4 sm:mt-5 text-lg leading-normal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
 {{/if}}
 {{#if this.isUl}}
-    <ul class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
+    <ul class="hrds-copytext__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
 {{/if}}
 {{#if this.isOl}}
-    <ol class="copytext-ds__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
+    <ol class="hrds-copytext__paragraph pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
 {{/if}}

package/src/stories/views/components/content/copytext/copytext.hbs

@@ -1,4 +1,4 @@
-<div class="mt-2 contents sm:block copytextWrapper">
+<div class="hrds-copytext mt-2 contents sm:block copytextWrapper">
     {{~#with this.leadAudio }}
         {{> components/content/copytext/components/media/media_figure _playerLocation="Copytext" _playerSize="100" _addClass="print:hidden article-full-width mt-12 mb-6 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
     {{~/with}}    

package/src/stories/views/components/content/copytext/fixtures/copytext.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='copytext-ds__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='copytext-ds__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Zwischenüberschrift"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='copytext-ds__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}
+{"copytextParagraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Zwischenüberschrift"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='hrds-copytext__link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}