hr-design-system-handlebars 0.49.18 → 0.50.2

package/.storybook/main.js

@@ -72,6 +72,18 @@ module.exports = {
                     },
                 ],
                 include: path.resolve(__dirname, '../'),
+            },
+            {
+                test: /\.(png|woff|woff2|eot|ttf|jpg|jpeg|gif|svg)$/,
+                use: [
+                  {
+                    loader: "file-loader",
+                    options: {
+                      name: "[path][name].[ext]",
+                      context: "",
+                    },
+                  },
+                ],
             }
         )
 

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.50.2 (Fri Jul 15 2022)
+
+#### 🐛 Bug Fix
+
+- refactor header.stories.mdx [#276](https://github.com/mumprod/hr-design-system-handlebars/pull/276) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.50.1 (Fri Jul 15 2022)
+
+#### 🐛 Bug Fix
+
+- add json for ClusterTeaser [#278](https://github.com/mumprod/hr-design-system-handlebars/pull/278) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
+# v0.50.0 (Fri Jul 15 2022)
+
+#### 🚀 Enhancement
+
+- FEATURE: Changes the name of the js feature [#277](https://github.com/mumprod/hr-design-system-handlebars/pull/277) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.49.18 (Thu Jul 14 2022)
 
 #### 🐛 Bug Fix

package/build/webpack/feature-loader/initializer/initializer.js

@@ -3,8 +3,8 @@ import FeatureList from './featureList'
 
 export default {
     run: (rootElement, loader) => {
-        DomElementList(rootElement, '.js-load').forEach(domElement =>
-            FeatureList(domElement, 'data-new-hr-').forEach(feature => feature.execute(loader))
+        DomElementList(rootElement, '.js-load').forEach((domElement) =>
+            FeatureList(domElement, 'data-hr-').forEach((feature) => feature.execute(loader))
         )
-    }
+    },
 }

package/dist/assets/index.css

@@ -596,6 +596,10 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -1298,6 +1302,9 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
+.p-5 {
+  padding: 1.25rem;
+}
 .py-3\.5 {
   padding-top: 0.875rem;
   padding-bottom: 0.875rem;
@@ -2414,6 +2421,9 @@ video {
     --color-topline: #c20016;
 }
 /*! purgecss end ignore */
+.sbdocs-content {
+    max-width:1140px !important;
+}
 .hide-scroll-bar {
     -ms-overflow-style: none;
     scrollbar-width: none;

package/dist/views/components/Button.hbs

@@ -1,8 +1,10 @@
-<button class="js-load btn {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}} {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}" >
+<button
+    class='js-load btn
+        {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}}
+        {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}'
+>
     {{label}}
 </button>
-<div class="js-load outer" data-new-hr-foo='{"test":"bar"}'>
-    <div class="inner"></div>
-</div>
-
-
+<div class='js-load outer' data-hr-foo='{"test":"bar"}'>
+    <div class='inner'></div>
+</div>

package/dist/views/components/audio/audio_element.hbs

@@ -1,6 +1,6 @@
 <div class="c-audioElement">
     <div id="{{nextRandom}}" class="{{~#with _addClass }} {{this}}{{/with}} js-load" 
-        data-new-hr-mediaplayer-loader-ds='{
+        data-hr-mediaplayer-loader-ds='{
             "type": "audio", 
             "position": "{{if _isTeaser 'teaser' 'page'}}",
             "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",
@@ -62,7 +62,7 @@
                 {{~#if ../this.isPodcast~}}
                     <a href="{{../this.podcastDownloadUrl}}" class="downloadLink button-invert js-load"{{#with
                             ../this.trackingData}}
-                    data-new-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
+                    data-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
                         {{> components/base/image/icon _icon='download-button' _addClass="icon--media"}}
                     </a>
                 {{~/if~}}

package/dist/views/components/base/link.hbs

@@ -2,13 +2,13 @@
     <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} 
         class="sb-link{{#if ../css}} {{../css}}{{/if}}{{#if ../doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if ../isSelected}} {{defaultIfEmpty ../selectedCssClass "-current"}}{{/if}}"
         {{#if ../doNavigationTracking}}
-        data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../clickLabelType}}{{#if ../clickLabelPrefix1}}::{{../clickLabelPrefix1}}{{/if}}::{{../clickLabelPrefix2}}-Link geklickt"}]}'
+        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../clickLabelType}}{{#if ../clickLabelPrefix1}}::{{../clickLabelPrefix1}}{{/if}}::{{../clickLabelPrefix2}}-Link geklickt"}]}'
         {{/if}}
         {{#if ../doTracking}}
-            {{#with this.content.trackingData}}data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../clickLabelPrefix1}}::{{../../clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
+            {{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../clickLabelPrefix1}}::{{../../clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
         {{else}}
             {{#if ../this.content.isFileDownload}}
-                {{#with this.content.trackingData}}data-new-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
+                {{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
             {{/if}}
         {{/if}}
         {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}

package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs

@@ -1,3 +1,3 @@
 <li class="sb-brand-navigation-item{{#if this.selected}} h-10 lg:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science">   
-   <a class="link-focus-inset leading-10 lg:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}lg:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
+   <a class="link-focus-inset leading-10 lg:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}lg:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
 </li>

package/dist/views/components/site_header/header_alpine.js

@@ -32,23 +32,25 @@ document.addEventListener('alpine:init', () => {
         init(){
             let lastScrollTop = 0
             let height = window.innerHeight
+
+            //Globale Variable, true = user initiated scroll / false = programmatic scroll via JS (e.g. click on Anchor Link)
             let userScroll = false;
             window.userScroll = userScroll;
 
+            // gets fired when user initated scroll happened, global variable is used in Ticker-Topnews and other anchor links to prevent expanding of the navigation if scrollposition gets corrected by JS. 
             const mouseEvent = () => {
                 userScroll = true;
                 window.userScroll = true;
-                //console.log('user action detected')
             }
-
+            // detect if the user clicked/dragged the scrollbar manually
             const clickedOnScrollbar = mouseX => {
                 return document.documentElement.offsetWidth <= mouseX ? true : false; 
             }
-              
+            // if clicked on scrollbar, fire user initiated mouse event
             const mouseDownHandler = e => {
                 clickedOnScrollbar(e.clientX) ? mouseEvent() : null
             };
-
+            // main scroll handler, defines scroll direction, percent of viewport scrolled, visibility of navigation and subnavigation
             const scrollHandler = () => {
                 let winScroll = document.body.scrollTop || document.documentElement.scrollTop
                 winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
@@ -59,14 +61,19 @@ document.addEventListener('alpine:init', () => {
                 //console.log('winscroll: '+winScroll+' screen height: '+height + '  percent scrolled: '+ this.percent)
                 //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
             }
-
+            // Listeners 
             window.addEventListener('mousedown', mouseDownHandler, false)
             window.addEventListener('wheel', mouseEvent, false);
             window.addEventListener('touchmove', mouseEvent, false)
             window.addEventListener('scroll', this.debounce( scrollHandler,50), { passive: true })
         },
+        //Holds the percentage of scrolled viewport
         percent: 0,
+
+        //defines the scroll direction
         scrollingDown: true,
+
+        //returns true if section navigation is hidden on desktop OR service navigation is hidden on mobile
         isNavHidden() {
             if(this.$screen('lg')) {
                 return this.shouldSectionNavBeHidden()
@@ -74,6 +81,8 @@ document.addEventListener('alpine:init', () => {
                 return this.shouldServiceNavBeHidden()
             }
         },
+
+        //returns false if subnav is visible and true if subnav is hidden
         isSubNavHidden() {
             if(this.$screen('lg')){
                 if (document.querySelector('.isSelectedAndOpen') !== null) {
@@ -85,9 +94,13 @@ document.addEventListener('alpine:init', () => {
                 return true
             }
         },
+
+        // returns true if the user scrolled at least 1px from top
         shouldBrandNavBeHidden() {
             return this.percent > 0
         },
+
+        // returns true if user scrolled >50% and scrolls down, no burger menu is open and the screen size is desktop. If scroll was initiated by script, ignore scroll direction.
         shouldSectionNavBeHidden() {
             if(window.userScroll == true){
                 return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
@@ -96,6 +109,8 @@ document.addEventListener('alpine:init', () => {
             }
 
         },
+
+        // returns true if user scrolled >90% and scrolls further down, no burger menu is open and the screen is NOT desktop. If scroll was initiated by script, ignore scroll direction. 
         shouldServiceNavBeHidden() {
             if(window.userScroll == true) {
                 return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
@@ -103,12 +118,18 @@ document.addEventListener('alpine:init', () => {
                 return (this.percent > 90 && !this.$screen('lg') && this.$store.burgeropen == false)
             }
         },
+
+        //returns true if user scrolled >50% and scrolls further down, no burger menu is open, no serviceNav is open and screen is not larger than mobile. OR: same same, but scrolling up. 
         shouldServiceIconsBeHidden() {
             return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false  && this.scrollingDown == false)
         },
+
+        // returns true if user scrolled >50% and scrolls further down and is a desktop viewport
         shouldFlyoutBeHidden() {
             return (this.percent > 50  && this.scrollingDown && this.$screen('lg') )
         },
+
+        // resets the navigation back to the initial state. Happens f.ex. on resize of window.
         resetNav() {
             if(window.innerWidth > 1023) {
                 this.$refs.sectionnavigation.setAttribute("style","")
@@ -143,6 +164,8 @@ document.addEventListener('alpine:init', () => {
                 this.$store.clientWidth = nowClientWidth
             }
         },
+
+        // toggles the maxHeight of the section nav and makes sure there is enough space to display all items. 
         toggleSectionNav() {
             //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )
             //true = sectionNav öffnet (maxheight = scrollheight)
@@ -168,16 +191,22 @@ document.addEventListener('alpine:init', () => {
                 }
             }
         },
+
+        // no scrolling when overlay is visible
         disableScrolling() {
             document.body.classList.add('overflow-hidden','h-full','w-full')
             this.$refs.myOverlay.ontouchmove = (e) => e.preventDefault();
             console.log("disableScrolling")
         },
+
+        //only scroll when no overlay is visible
         enableScrolling() {
             document.body.classList.remove('overflow-hidden','h-full','w-full')
             this.$refs.myOverlay.ontouchmove = (e) => true;
             console.log("enableScrolling")
         },
+
+        // toggles scrolling ability 
         toggleScrolling(mode){
             if(this.$screen(0) && !this.$screen('lg')){
                 mode == false ? this.disableScrolling() : this.enableScrolling()
@@ -191,9 +220,13 @@ document.addEventListener('alpine:init', () => {
 
     // context for the overlay
     Alpine.data('overlayHandler', () => ({
+
+        // show the overlay on mobile and tablet if burger menu is open OR service nav is open OR search field is open
         shouldOverlayBeShown() {
             return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
         },
+
+        // on click on overlay change global var for servicenav, dispatch events to close burger and service menu, re-enable scrolling. 
         overlayWasClicked() {
             this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
             this.$dispatch('burger-close')
@@ -203,18 +236,28 @@ document.addEventListener('alpine:init', () => {
         }
     }))
 
-    // context for all dropdowns
+    // context for all dropdowns, used in section nav submenus and service nav flyout submenus
     Alpine.data('dropdown', () => ({
+
+        // state of the dropdown
         dropped: false,
+
+        // toggle() interpolates state
         toggle() {
             this.dropped = ! this.dropped;
         },
+
+        // toggles visibility of service nav and sets global variables in stores
         toggleServiceNav(){
             this.dropped = ! this.dropped;
+
+            // close search if open
             this.$store.searchFieldOpen = false;
 
+            // if clicked element is not the current serviceID, leave the servicenav open, else interpolate servicenav state  
             this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
 
+            //if burger is open, dispatch event to close it
             this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
 
             console.log('currentID: '+ this.$store.serviceID.current)
@@ -222,10 +265,13 @@ document.addEventListener('alpine:init', () => {
             console.log('element-id: '+this.$el.id)
             console.log('serviceNav is open:'+ this.$store.serviceNavIsOpen)
 
+            //set the serviceID to the current element´s ID.
             this.$store.serviceID.current = this.$el.id
 
+            //enable/disable scrolling 
             this.toggleScrolling(!this.$store.serviceNavIsOpen)
 
+            //defines behaviour for servicenav on mobile viewports, taking care of viewport sizes
             let myFlyout = document.querySelector('#flyout-'+this.$el.id)
             let brandNavHeight = this.percent > 0 ? 40 : 0
 
@@ -252,8 +298,9 @@ document.addEventListener('alpine:init', () => {
                 this.$el.setAttribute("x-collapse","")
             }
         },
+        
+        //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
         sectionNavFlyoutWatcher() {
-            //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
             this.$watch('dropped', value => {
                 let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
                 let brandNavHeight = this.percent > 0 ? 40 : 0
@@ -278,8 +325,9 @@ document.addEventListener('alpine:init', () => {
 
             })
         },
+
+        //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
         setFlyoutAnimationStyle() {
-            //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
             if(window.innerWidth > 1023) {
                 if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
                     this.$el.removeAttribute("x-collapse.duration.500ms")
@@ -289,7 +337,6 @@ document.addEventListener('alpine:init', () => {
                     if (! this.$el._x_isShown) this.$el.style.display = 'none'
                     if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
                 }
-
             } else {
                 if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
             }

package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs

@@ -32,7 +32,7 @@
             {{#unless ../_isSectionNav}}
                 <div class="w-full">
                     <div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-blue-congress ">              
-                        <a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}' >
+                        <a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}' >
                             {{../this.flyoutStartLinkText}}
                         </a>      
                     </div>          

package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs

@@ -13,7 +13,7 @@
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                 aria-owns="flyout-{{getRandom}}" 
                 aria-controls="flyout-{{getRandom}}" 
-                data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'>
+                data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'>
 
         {{~else ~}}
 
@@ -29,13 +29,13 @@
                     x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                     aria-owns="flyout-{{getRandom}}"
                     aria-controls="flyout-{{getRandom}}"
-                    data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'>           
+                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'>           
             {{~else ~}} 
 {{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw:  --}}
                 <a href="{{resourceUrl this.url}}" 
                     class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset-white js-load flex justify-start pl-4 pr-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" 
                     {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} 
-                    data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
+                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
                     x-effect="$el.setAttribute('tabindex',  $store.burgeropen || $screen('lg') ? '0' : '-1')"
                 >
             {{~/if}}
@@ -81,7 +81,7 @@
                     aria-owns="flyout-{{getRandom}}" 
                     aria-controls="flyout-{{getRandom}}" 
                     aria-labelledby="flyout-{{getRandom}}-1" 
-                    data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'>
+                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}'>
 
                     <span class="hidden">{{~this.text~}}</span>
                     

package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs

@@ -17,15 +17,15 @@
                 aria-owns="flyout-{{getRandom}}" 
                 aria-controls="flyout-{{getRandom}}"
                 x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"
-                data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'
+                data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'
             >
               
         {{else}}
 
             {{#if this.extern}}
-                <a href="{{this.url}}" target="_blank" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'>
+                <a href="{{this.url}}" target="_blank" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'>
             {{else}}
-                <a href="{{resourceUrl this.url}}" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:pt-1 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-new-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'>
+                <a href="{{resourceUrl this.url}}" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:pt-1 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}'>
             {{/if}}
 
         {{/if}}

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

@@ -0,0 +1,18 @@
+<div class="w-full p-5">
+
+    <b><u>Schlagzeilen-Box</u></b><br/><br/>
+    <b>Title:</b> {{this.title}}<br/>
+    <b>teaserLogo:</b> {{this.teaserLogo}}<br/>
+    <b>showFirstImageOrGenreImage:</b> {{this.showFirstImageOrGenreImage}}<br/>
+    <b>HideTitle:</b> {{this.HideTitle}}<br/>
+    <b>showGenreImage:</b> {{this.showGenreImage}}<br/>
+    <b>showFirstImage:</b> {{this.showFirstImage}}<br/>
+    <br/>
+
+    <b>clusterTeaserItems:</b><br/>
+    {{~#each this.clusterTeaserItems}}
+        {{this.logicItem.includeModel.title}}<br/>
+    {{/each~}}
+    <br/><hr/>
+
+</div>

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

@@ -2,7 +2,7 @@
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6"
 >
-  <section class="col-span-full" data-new-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
+  <section class="col-span-full" data-hr-group-tabbed='{"wandaPageId":"{{this.wandaPageId}}"}'>
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
         <button  onclick="window.location.href='#tgp{{@index}}';"

package/dist/views/components/video/livestream/video_livestream.hbs

@@ -1,4 +1,4 @@
-<div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-new-hr-mediaplayer-loader-ds='{
+<div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-hr-mediaplayer-loader-ds='{
     "type": "live",
     "position": "{{if _isTeaser 'teaser' 'page'}}",
     "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",

package/dist/views/components/video/video_element.hbs

@@ -1,4 +1,4 @@
-<div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-new-hr-mediaplayer-loader-ds='{
+<div x-show="avStart" id="{{nextRandom}}" class="ar-16-9 js-load" data-hr-mediaplayer-loader-ds='{
     "type": "ondemand",
     "position": "{{if _isTeaser 'teaser' 'page'}}",
     "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",

package/package.json

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

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

@@ -0,0 +1,26 @@
+{
+    "title"       : "Schlagzeilen",
+    "teaserLogo"  : "hessenschau_de",
+    "showFirstImageOrGenreImage" : false,
+    "HideTitle"   : false,
+    "showGenreImage" : false,
+    "showFirstImage" : false,
+
+    "clusterTeaserItems": [
+        {
+            "@->jsoninclude": "teaser/teaser_standard_100_serif.json"
+        },
+        {
+            "@->jsoninclude": "teaser/teaser_standard_100_serif.json"
+        },
+        {
+            "@->jsoninclude": "teaser/teaser_standard_100_serif.json"
+        },
+        {
+            "@->jsoninclude": "teaser/teaser_standard_100_serif.json"
+        },
+        {
+            "@->jsoninclude": "teaser/teaser_standard_100_serif.json"
+        }
+    ]
+}

package/src/assets/tailwind.css

@@ -353,6 +353,10 @@
 
 /*! purgecss end ignore */
 
+.sbdocs-content {
+    max-width:1140px !important;
+}
+
 .hide-scroll-bar {
     -ms-overflow-style: none;
     scrollbar-width: none;

package/src/stories/example.hbs

@@ -1,8 +1,10 @@
-<button class="js-load btn {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}} {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}" >
+<button
+    class='js-load btn
+        {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}}
+        {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}'
+>
     {{label}}
 </button>
-<div class="js-load outer" data-new-hr-foo='{"test":"bar"}'>
-    <div class="inner"></div>
-</div>
-
-
+<div class='js-load outer' data-hr-foo='{"test":"bar"}'>
+    <div class='inner'></div>
+</div>

package/src/stories/views/components/Button.hbs

@@ -1,8 +1,10 @@
-<button class="js-load btn {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}} {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}" >
+<button
+    class='js-load btn
+        {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}}
+        {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}'
+>
     {{label}}
 </button>
-<div class="js-load outer" data-new-hr-foo='{"test":"bar"}'>
-    <div class="inner"></div>
-</div>
-
-
+<div class='js-load outer' data-hr-foo='{"test":"bar"}'>
+    <div class='inner'></div>
+</div>