hr-design-system-handlebars 1.83.6 → 1.83.8

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.83.8 (Tue Jul 23 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3261 - Social Sharing Tracking noch fehlerhaft [#1025](https://github.com/mumprod/hr-design-system-handlebars/pull/1025) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.83.7 (Fri Jul 19 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3081 - related content and breadcrumb are in line with content now [#1024](https://github.com/mumprod/hr-design-system-handlebars/pull/1024) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.83.6 (Fri Jul 19 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3330,7 +3330,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1721383801809;
+  counter-reset: cnt1721740209898;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3738,7 +3738,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1721383801809 1;
+  counter-increment: cnt1721740209898 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3754,7 +3754,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1721383801809);
+  content: counter(cnt1721740209898);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -17,6 +17,7 @@ AsyncAlpine.init(Alpine)
     .data('slider', () =>
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )
+    .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .start()
 
 window.Alpine = Alpine
@@ -41,8 +42,10 @@ Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
 Alpine.store('sectionNavIsVisible', false)
 Alpine.store('sharingIsVisible', false)
-Alpine.store('sharingIsOpenHorizontal', false)
-Alpine.store('sharingIsOpenMobile', false)
+Alpine.store('sharingIsOpen', {
+    metadatabox: false,
+    mobilesticky: false
+})
 Alpine.store('sharingBottomPos', {
     current: '0'
 })

package/dist/assets/js/components/social_sharing/socialSharingHandler.alpine.js

@@ -0,0 +1,43 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default (module) => ({
+    open: false,
+    sharingIsVisible: true,
+    isDesktop: true,
+    
+    toggle() {
+        
+        var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
+        var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+        var isMobile= isMobileApple || isMobileOther;
+        
+        if (navigator.share && isMobile) {
+            navigator.share({
+                title: document.title,
+                text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
+                url: window.location.href,
+            })
+            .then(() => {
+                console.log('Shared successfully');
+                uxAction('socialShareClick::'+module+'::nativeShare');
+                console.log('tracked: socialShareClick::'+module+'::nativeShare');
+            })
+            .catch((error) => console.error('Sharing failed:', error));
+        } else {
+            if (this.$store.sharingIsOpen[module]) {
+                return this.close(true)
+            }
+            this.$refs.button.focus()
+            this.$store.sharingIsOpen[module] = true
+            uxAction('socialShareClick::'+module+'::sharingIconOpen');
+        }               
+    },
+    close(trackClick) {
+        if (!this.$store.sharingIsOpen[module]) return
+        this.$store.sharingIsOpen[module] = false
+        if(trackClick) {
+            uxAction('socialShareClick::'+module+'::sharingIconClose');
+        }
+    }
+    
+})

package/dist/views/components/navigation/breadcrumb/breadcrumb.hbs

@@ -1,4 +1,4 @@
-<nav id="breadcrumb-nav" class="print:hidden px-4 md:px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
+<nav id="breadcrumb-nav" class="print:hidden px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
      role="navigation"
      aria-label="{{loca "breadcrumb_headline"}}"
 >

package/dist/views/components/page/story/components/related-content.ssi.hbs

@@ -1,5 +1,5 @@
 {{#>components/page/base/page_wrapper}}
-    <div class="mx-5 mb-10 article-full-width md:article-breakout md:mx-0">
+    <div class="mb-10 article-full-width md:article-breakout">
         {{~#partial "cache-entry"~}}
             {{~addCacheEntry "storyRelatedContent_ssi" uuid ~}}
         {{~/partial~}}

package/dist/views/components/page/story/story_article.hbs

@@ -27,10 +27,8 @@
         {{/with}}
     {{/unless}}
 
-    {{#unless ../../_webview-adjust_context}}
-        {{~#with this.socialSharing ~}}
-            {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
-        {{~/with~}}
+    {{#unless ../../_webview-adjust_context}}        
+        {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
     {{/unless}}
     {{~> components/content/copytext/copytext _isWebview=../../_webview-adjust_context ~}}
 

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

@@ -1,14 +1,16 @@
-<div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="$store.sharingIsOpen = false" class="{{#unless _useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
-    {{#if _useSticky}}
-    :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
-            'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
-            'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
-    {{/if}}
->
-    <div 
-        class="relative right-0 p-1 bg-white md:h-auto">
-            <ul class="flex flex-col gap-3">  
-                {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" }}
-            </ul>
+{{~#with this.socialSharing ~}}
+    <div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="" class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        {{#if ../_useSticky}}
+        :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
+                'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
+                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+        {{/if}}
+    >
+        <div 
+            class="relative right-0 p-1 bg-white md:h-auto">
+                <ul class="flex flex-col gap-3">  
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" _trackingData=../this.trackingData}}
+                </ul>
+        </div>
     </div>
-</div>
+{{/with}}

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

@@ -1,73 +1,38 @@
 {{~#with this.socialSharing ~}}
-    <div x-data="stickySharingHandler"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpenHorizontal = false; $store.sharingIsOpenMobile = false})"
+    <div 
+        x-data="socialSharingHandler('metadatabox')"
+        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"
-        x-on:resize.window="$store.sharingIsOpenHorizontal = false"       
-        x-on:keydown.escape.prevent.stop="close($refs.button)"
+        x-on:resize.window="$store.sharingIsOpen.metadatabox = false"       
+        x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
+        ax-load 
+        x-ignore
     >
         <div class="relative right-0 flex gap-3 bg-white md:h-auto"  >
             <button 
-                class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+                class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
                 x-on:click="toggle()"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"
-                x-show="$store.sharingIsVisible"
-                {{#with ../this.trackingData}}
-                    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
-                {{/with}}
-                
+                x-show="$store.sharingIsVisible"              
                 >
                     {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
             </button>
             <div                
                 x-ref="panel"   
-                :class="{ 'hidden': !$store.sharingIsOpenHorizontal,'flex': $store.sharingIsOpenHorizontal }"           
+                :class="{ 'hidden': !$store.sharingIsOpen.metadatabox,'flex': $store.sharingIsOpen.metadatabox }"           
                 :id="$id('dropdown-button')"
                 class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
             >
                 <ul class="flex gap-3">  
-                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox"}}
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox" _trackingData=../this.trackingData}}
                 </ul>
             </div>
         </div>
     </div>
-    <script>
-        function stickySharingHandler(){
-            return {
-            open: false,
-            sharingIsVisible: true,
-            isDesktop: true,
-            toggle() {
-                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-                var isMobile= isMobileApple || isMobileOther;
-                if (navigator.share && isMobile) {
-                    navigator.share({
-                        title: document.title,
-                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
-                        url: window.location.href,
-                    })
-                    .then(() => console.log('Shared successfully'))
-                    .catch((error) => console.error('Sharing failed:', error));
-                } else {
-                    if (this.$store.sharingIsOpenHorizontal) {
-                        return this.close()
-                    }
-                    this.$refs.button.focus()
-                    this.$store.sharingIsOpenHorizontal = true
-    
-                }               
-            },
-            close(focusAfter) {
-                if (!this.$store.sharingIsOpenHorizontal) return
-                this.$store.sharingIsOpenHorizontal = false
-            }
-        }
-    }
-    </script>
 {{/with}}

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

@@ -4,7 +4,7 @@
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::copybutton"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::copybutton"}]}'
         {{/with}}
     >
         <span x-cloak class="flex items-center justify-center w-full h-full" x-show="!copySuccess">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}</span>
@@ -48,7 +48,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_x_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::X"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::X"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
@@ -64,7 +64,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_facebook_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::facebook"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::facebook"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
@@ -80,7 +80,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_whatsapp_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::whatsapp"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::whatsapp"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
@@ -94,7 +94,7 @@
         href="{{this}}"
         title="{{loca "share_mail_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::mailto"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::mailto"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}

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

@@ -1,71 +1,36 @@
 
 {{~#with this.socialSharing ~}}    
-<div x-data="stickySharingHandlerMobile"
+<div x-data="socialSharingHandler('mobilesticky')"
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
-    x-on:resize.window="$store.sharingIsOpenMobile = false"    
-    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    
+    x-on:keydown.escape.prevent.stop="close()"
     @click.outside="close()"
+    ax-load 
+    x-ignore
     >
     <div class="absolute bottom-0 flex flex-col self-center gap-3 bg-white">
+       
         <button 
-            class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+            class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
             x-ref="button"
             x-on:click="toggle()"
             :aria-expanded="open"
             :aria-controls="$id('dropdown-button')"
             aria-label='{{loca "share_linktitle" }}'
-            {{#with ../this.trackingData}}
-                data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
-            {{/with}}
-            
             >
                 {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
         </button>
         <div 
             x-ref="panel" 
-            :class="$store.sharingIsOpenMobile ? 'flex' : 'hidden '"                    
+            :class="$store.sharingIsOpen.mobilesticky ? 'flex' : 'hidden '"                    
             :id="$id('dropdown-button')"
             class="relative right-0 self-center bg-white md:h-auto lg:hidden"
         >
             <ul class="flex flex-col gap-3 mt-2">  
-                {{> components/social_sharing/social_sharing_icons _socialSharingType="mobile-sticky"}}
+                {{> components/social_sharing/social_sharing_icons _socialSharingType="mobilesticky" _trackingData=../this.trackingData}}
             </ul>
         </div>
     </div>
 </div>
-    <script>
-        function stickySharingHandlerMobile(){
-            return {
-            open: false,
-            sharingIsVisible: true,
-            isDesktop: true,
-            toggle() {
-                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-                var isMobile= isMobileApple || isMobileOther;
-                if (navigator.share && isMobile) {
-                    navigator.share({
-                        title: document.title,
-                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
-                        url: window.location.href,
-                    })
-                    .then(() => console.log('Shared successfully'))
-                    .catch((error) => console.error('Sharing failed:', error));
-                } else {
-                    if (this.$store.sharingIsOpenMobile) {
-                        return this.close()
-                    }    
-                    this.$refs.button.focus()
-                    this.$store.sharingIsOpenMobile = true             
-                }
-                
-            },
-            close(focusAfter) {
-                if (!this.$store.sharingIsOpenMobile) return
-                this.$store.sharingIsOpenMobile = false
-            }
-        }
-        }
-    </script>
 {{/with}}

package/dist/views_static/components/navigation/breadcrumb/breadcrumb.hbs

@@ -1,4 +1,4 @@
-<nav id="breadcrumb-nav" class="print:hidden px-4 md:px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
+<nav id="breadcrumb-nav" class="print:hidden px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
      role="navigation"
      aria-label="{{loca "breadcrumb_headline"}}"
 >

package/dist/views_static/components/page/story/components/related-content.ssi.hbs

@@ -1,5 +1,5 @@
 {{#>components/page/base/page_wrapper}}
-    <div class="mx-5 mb-10 article-full-width md:article-breakout md:mx-0">
+    <div class="mb-10 article-full-width md:article-breakout">
         {{~#partial "cache-entry"~}}
             {{~addCacheEntry "storyRelatedContent_ssi" uuid ~}}
         {{~/partial~}}

package/dist/views_static/components/page/story/story_article.hbs

@@ -27,10 +27,8 @@
         {{/with}}
     {{/unless}}
 
-    {{#unless _webview}}
-        {{~#with this.socialSharing ~}}
-            {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
-        {{~/with~}}
+    {{#unless _webview}}        
+        {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
     {{/unless}}
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 

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

@@ -1,14 +1,16 @@
-<div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="$store.sharingIsOpen = false" class="{{#unless _useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
-    {{#if _useSticky}}
-    :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
-            'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
-            'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
-    {{/if}}
->
-    <div 
-        class="relative right-0 p-1 bg-white md:h-auto">
-            <ul class="flex flex-col gap-3">  
-                {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" }}
-            </ul>
+{{~#with this.socialSharing ~}}
+    <div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="" class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        {{#if ../_useSticky}}
+        :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
+                'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
+                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+        {{/if}}
+    >
+        <div 
+            class="relative right-0 p-1 bg-white md:h-auto">
+                <ul class="flex flex-col gap-3">  
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" _trackingData=../this.trackingData}}
+                </ul>
+        </div>
     </div>
-</div>
+{{/with}}

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

@@ -1,73 +1,38 @@
 {{~#with this.socialSharing ~}}
-    <div x-data="stickySharingHandler"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpenHorizontal = false; $store.sharingIsOpenMobile = false})"
+    <div 
+        x-data="socialSharingHandler('metadatabox')"
+        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"
-        x-on:resize.window="$store.sharingIsOpenHorizontal = false"       
-        x-on:keydown.escape.prevent.stop="close($refs.button)"
+        x-on:resize.window="$store.sharingIsOpen.metadatabox = false"       
+        x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
+        ax-load 
+        x-ignore
     >
         <div class="relative right-0 flex gap-3 bg-white md:h-auto"  >
             <button 
-                class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+                class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
                 x-on:click="toggle()"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"
-                x-show="$store.sharingIsVisible"
-                {{#with ../this.trackingData}}
-                    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
-                {{/with}}
-                
+                x-show="$store.sharingIsVisible"              
                 >
                     {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
             </button>
             <div                
                 x-ref="panel"   
-                :class="{ 'hidden': !$store.sharingIsOpenHorizontal,'flex': $store.sharingIsOpenHorizontal }"           
+                :class="{ 'hidden': !$store.sharingIsOpen.metadatabox,'flex': $store.sharingIsOpen.metadatabox }"           
                 :id="$id('dropdown-button')"
                 class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
             >
                 <ul class="flex gap-3">  
-                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox"}}
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox" _trackingData=../this.trackingData}}
                 </ul>
             </div>
         </div>
     </div>
-    <script>
-        function stickySharingHandler(){
-            return {
-            open: false,
-            sharingIsVisible: true,
-            isDesktop: true,
-            toggle() {
-                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-                var isMobile= isMobileApple || isMobileOther;
-                if (navigator.share && isMobile) {
-                    navigator.share({
-                        title: document.title,
-                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
-                        url: window.location.href,
-                    })
-                    .then(() => console.log('Shared successfully'))
-                    .catch((error) => console.error('Sharing failed:', error));
-                } else {
-                    if (this.$store.sharingIsOpenHorizontal) {
-                        return this.close()
-                    }
-                    this.$refs.button.focus()
-                    this.$store.sharingIsOpenHorizontal = true
-    
-                }               
-            },
-            close(focusAfter) {
-                if (!this.$store.sharingIsOpenHorizontal) return
-                this.$store.sharingIsOpenHorizontal = false
-            }
-        }
-    }
-    </script>
 {{/with}}

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

@@ -4,7 +4,7 @@
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::copybutton"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::copybutton"}]}'
         {{/with}}
     >
         <span x-cloak class="flex items-center justify-center w-full h-full" x-show="!copySuccess">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}</span>
@@ -48,7 +48,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_x_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::X"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::X"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
@@ -64,7 +64,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_facebook_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::facebook"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::facebook"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
@@ -80,7 +80,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_whatsapp_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::whatsapp"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::whatsapp"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
@@ -94,7 +94,7 @@
         href="{{this}}"
         title="{{loca "share_mail_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::mailto"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::mailto"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}

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

@@ -1,71 +1,36 @@
 
 {{~#with this.socialSharing ~}}    
-<div x-data="stickySharingHandlerMobile"
+<div x-data="socialSharingHandler('mobilesticky')"
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
-    x-on:resize.window="$store.sharingIsOpenMobile = false"    
-    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    
+    x-on:keydown.escape.prevent.stop="close()"
     @click.outside="close()"
+    ax-load 
+    x-ignore
     >
     <div class="absolute bottom-0 flex flex-col self-center gap-3 bg-white">
+       
         <button 
-            class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+            class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
             x-ref="button"
             x-on:click="toggle()"
             :aria-expanded="open"
             :aria-controls="$id('dropdown-button')"
             aria-label='{{loca "share_linktitle" }}'
-            {{#with ../this.trackingData}}
-                data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
-            {{/with}}
-            
             >
                 {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
         </button>
         <div 
             x-ref="panel" 
-            :class="$store.sharingIsOpenMobile ? 'flex' : 'hidden '"                    
+            :class="$store.sharingIsOpen.mobilesticky ? 'flex' : 'hidden '"                    
             :id="$id('dropdown-button')"
             class="relative right-0 self-center bg-white md:h-auto lg:hidden"
         >
             <ul class="flex flex-col gap-3 mt-2">  
-                {{> components/social_sharing/social_sharing_icons _socialSharingType="mobile-sticky"}}
+                {{> components/social_sharing/social_sharing_icons _socialSharingType="mobilesticky" _trackingData=../this.trackingData}}
             </ul>
         </div>
     </div>
 </div>
-    <script>
-        function stickySharingHandlerMobile(){
-            return {
-            open: false,
-            sharingIsVisible: true,
-            isDesktop: true,
-            toggle() {
-                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-                var isMobile= isMobileApple || isMobileOther;
-                if (navigator.share && isMobile) {
-                    navigator.share({
-                        title: document.title,
-                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
-                        url: window.location.href,
-                    })
-                    .then(() => console.log('Shared successfully'))
-                    .catch((error) => console.error('Sharing failed:', error));
-                } else {
-                    if (this.$store.sharingIsOpenMobile) {
-                        return this.close()
-                    }    
-                    this.$refs.button.focus()
-                    this.$store.sharingIsOpenMobile = true             
-                }
-                
-            },
-            close(focusAfter) {
-                if (!this.$store.sharingIsOpenMobile) return
-                this.$store.sharingIsOpenMobile = false
-            }
-        }
-        }
-    </script>
 {{/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.83.6",
+    "version": "1.83.8",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/js/alpine.js

@@ -17,6 +17,7 @@ AsyncAlpine.init(Alpine)
     .data('slider', () =>
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )
+    .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .start()
 
 window.Alpine = Alpine
@@ -41,8 +42,10 @@ Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
 Alpine.store('sectionNavIsVisible', false)
 Alpine.store('sharingIsVisible', false)
-Alpine.store('sharingIsOpenHorizontal', false)
-Alpine.store('sharingIsOpenMobile', false)
+Alpine.store('sharingIsOpen', {
+    metadatabox: false,
+    mobilesticky: false
+})
 Alpine.store('sharingBottomPos', {
     current: '0'
 })

package/src/stories/views/components/navigation/breadcrumb/breadcrumb.hbs

@@ -1,4 +1,4 @@
-<nav id="breadcrumb-nav" class="print:hidden px-4 md:px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
+<nav id="breadcrumb-nav" class="print:hidden px-5 lg:px-10 inline-block bg-white rounded-r{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
      role="navigation"
      aria-label="{{loca "breadcrumb_headline"}}"
 >

package/src/stories/views/components/page/story/components/related-content.ssi.hbs

@@ -1,5 +1,5 @@
 {{#>components/page/base/page_wrapper}}
-    <div class="mx-5 mb-10 article-full-width md:article-breakout md:mx-0">
+    <div class="mb-10 article-full-width md:article-breakout">
         {{~#partial "cache-entry"~}}
             {{~addCacheEntry "storyRelatedContent_ssi" uuid ~}}
         {{~/partial~}}

package/src/stories/views/components/page/story/story_article.hbs

@@ -27,10 +27,8 @@
         {{/with}}
     {{/unless}}
 
-    {{#unless _webview-adjust_context}}
-        {{~#with this.socialSharing ~}}
-            {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
-        {{~/with~}}
+    {{#unless _webview-adjust_context}}        
+        {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
     {{/unless}}
     {{~> components/content/copytext/copytext _isWebview=_webview-adjust_context ~}}
 

package/src/stories/views/components/social_sharing/socialSharingHandler.alpine.js

@@ -0,0 +1,43 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default (module) => ({
+    open: false,
+    sharingIsVisible: true,
+    isDesktop: true,
+    
+    toggle() {
+        
+        var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
+        var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+        var isMobile= isMobileApple || isMobileOther;
+        
+        if (navigator.share && isMobile) {
+            navigator.share({
+                title: document.title,
+                text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
+                url: window.location.href,
+            })
+            .then(() => {
+                console.log('Shared successfully');
+                uxAction('socialShareClick::'+module+'::nativeShare');
+                console.log('tracked: socialShareClick::'+module+'::nativeShare');
+            })
+            .catch((error) => console.error('Sharing failed:', error));
+        } else {
+            if (this.$store.sharingIsOpen[module]) {
+                return this.close(true)
+            }
+            this.$refs.button.focus()
+            this.$store.sharingIsOpen[module] = true
+            uxAction('socialShareClick::'+module+'::sharingIconOpen');
+        }               
+    },
+    close(trackClick) {
+        if (!this.$store.sharingIsOpen[module]) return
+        this.$store.sharingIsOpen[module] = false
+        if(trackClick) {
+            uxAction('socialShareClick::'+module+'::sharingIconClose');
+        }
+    }
+    
+})

package/src/stories/views/components/social_sharing/social_sharing_copytext.hbs

@@ -1,14 +1,16 @@
-<div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="$store.sharingIsOpen = false" class="{{#unless _useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
-    {{#if _useSticky}}
-    :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
-            'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
-            'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
-    {{/if}}
->
-    <div 
-        class="relative right-0 p-1 bg-white md:h-auto">
-            <ul class="flex flex-col gap-3">  
-                {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" }}
-            </ul>
+{{~#with this.socialSharing ~}}
+    <div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="" class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        {{#if ../_useSticky}}
+        :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
+                'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
+                'top-[61px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+        {{/if}}
+    >
+        <div 
+            class="relative right-0 p-1 bg-white md:h-auto">
+                <ul class="flex flex-col gap-3">  
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" _trackingData=../this.trackingData}}
+                </ul>
+        </div>
     </div>
-</div>
+{{/with}}

package/src/stories/views/components/social_sharing/social_sharing_horizontal.hbs

@@ -1,73 +1,38 @@
 {{~#with this.socialSharing ~}}
-    <div x-data="stickySharingHandler"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpenHorizontal = false; $store.sharingIsOpenMobile = false})"
+    <div 
+        x-data="socialSharingHandler('metadatabox')"
+        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"
-        x-on:resize.window="$store.sharingIsOpenHorizontal = false"       
-        x-on:keydown.escape.prevent.stop="close($refs.button)"
+        x-on:resize.window="$store.sharingIsOpen.metadatabox = false"       
+        x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
+        ax-load 
+        x-ignore
     >
         <div class="relative right-0 flex gap-3 bg-white md:h-auto"  >
             <button 
-                class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+                class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
                 x-on:click="toggle()"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"
-                x-show="$store.sharingIsVisible"
-                {{#with ../this.trackingData}}
-                    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
-                {{/with}}
-                
+                x-show="$store.sharingIsVisible"              
                 >
                     {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
             </button>
             <div                
                 x-ref="panel"   
-                :class="{ 'hidden': !$store.sharingIsOpenHorizontal,'flex': $store.sharingIsOpenHorizontal }"           
+                :class="{ 'hidden': !$store.sharingIsOpen.metadatabox,'flex': $store.sharingIsOpen.metadatabox }"           
                 :id="$id('dropdown-button')"
                 class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
             >
                 <ul class="flex gap-3">  
-                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox"}}
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox" _trackingData=../this.trackingData}}
                 </ul>
             </div>
         </div>
     </div>
-    <script>
-        function stickySharingHandler(){
-            return {
-            open: false,
-            sharingIsVisible: true,
-            isDesktop: true,
-            toggle() {
-                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-                var isMobile= isMobileApple || isMobileOther;
-                if (navigator.share && isMobile) {
-                    navigator.share({
-                        title: document.title,
-                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
-                        url: window.location.href,
-                    })
-                    .then(() => console.log('Shared successfully'))
-                    .catch((error) => console.error('Sharing failed:', error));
-                } else {
-                    if (this.$store.sharingIsOpenHorizontal) {
-                        return this.close()
-                    }
-                    this.$refs.button.focus()
-                    this.$store.sharingIsOpenHorizontal = true
-    
-                }               
-            },
-            close(focusAfter) {
-                if (!this.$store.sharingIsOpenHorizontal) return
-                this.$store.sharingIsOpenHorizontal = false
-            }
-        }
-    }
-    </script>
 {{/with}}

package/src/stories/views/components/social_sharing/social_sharing_icons.hbs

@@ -4,7 +4,7 @@
         title="{{loca "share_copy_linktitle" }}"
         data-url="{{this}}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::copybutton"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::copybutton"}]}'
         {{/with}}
     >
         <span x-cloak class="flex items-center justify-center w-full h-full" x-show="!copySuccess">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}</span>
@@ -48,7 +48,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_x_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::X"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::X"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
@@ -64,7 +64,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_facebook_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::facebook"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::facebook"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
@@ -80,7 +80,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_whatsapp_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::whatsapp"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::whatsapp"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
@@ -94,7 +94,7 @@
         href="{{this}}"
         title="{{loca "share_mail_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::mailto"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../../_socialSharingType ../../_socialSharingType "default" }}::mailto"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}

package/src/stories/views/components/social_sharing/social_sharing_mobile.hbs

@@ -1,71 +1,36 @@
 
 {{~#with this.socialSharing ~}}    
-<div x-data="stickySharingHandlerMobile"
+<div x-data="socialSharingHandler('mobilesticky')"
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
-    x-on:resize.window="$store.sharingIsOpenMobile = false"    
-    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    
+    x-on:keydown.escape.prevent.stop="close()"
     @click.outside="close()"
+    ax-load 
+    x-ignore
     >
     <div class="absolute bottom-0 flex flex-col self-center gap-3 bg-white">
+       
         <button 
-            class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
+            class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
             x-ref="button"
             x-on:click="toggle()"
             :aria-expanded="open"
             :aria-controls="$id('dropdown-button')"
             aria-label='{{loca "share_linktitle" }}'
-            {{#with ../this.trackingData}}
-                data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
-            {{/with}}
-            
             >
                 {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
         </button>
         <div 
             x-ref="panel" 
-            :class="$store.sharingIsOpenMobile ? 'flex' : 'hidden '"                    
+            :class="$store.sharingIsOpen.mobilesticky ? 'flex' : 'hidden '"                    
             :id="$id('dropdown-button')"
             class="relative right-0 self-center bg-white md:h-auto lg:hidden"
         >
             <ul class="flex flex-col gap-3 mt-2">  
-                {{> components/social_sharing/social_sharing_icons _socialSharingType="mobile-sticky"}}
+                {{> components/social_sharing/social_sharing_icons _socialSharingType="mobilesticky" _trackingData=../this.trackingData}}
             </ul>
         </div>
     </div>
 </div>
-    <script>
-        function stickySharingHandlerMobile(){
-            return {
-            open: false,
-            sharingIsVisible: true,
-            isDesktop: true,
-            toggle() {
-                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-                var isMobile= isMobileApple || isMobileOther;
-                if (navigator.share && isMobile) {
-                    navigator.share({
-                        title: document.title,
-                        text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
-                        url: window.location.href,
-                    })
-                    .then(() => console.log('Shared successfully'))
-                    .catch((error) => console.error('Sharing failed:', error));
-                } else {
-                    if (this.$store.sharingIsOpenMobile) {
-                        return this.close()
-                    }    
-                    this.$refs.button.focus()
-                    this.$store.sharingIsOpenMobile = true             
-                }
-                
-            },
-            close(focusAfter) {
-                if (!this.$store.sharingIsOpenMobile) return
-                this.$store.sharingIsOpenMobile = false
-            }
-        }
-        }
-    </script>
 {{/with}}