hr-design-system-handlebars 1.75.1 → 1.75.2

package/{dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs → src/stories/views/components/social_sharing/social_sharing_icons.hbs}

@@ -1,3 +1,44 @@
+{{~#with this.copyToClipboardLink}}
+<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
+    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        title="{{loca "share_copy_linktitle" }}"
+        data-url="{{this}}"
+        {{#with ../_trackingData}}
+            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>
+        <span x-cloak class="flex items-center justify-center w-full h-full" x-show="copySuccess">{{~> components/base/image/icon _addClass="w-6 h-6 text-green-600" _icon="status-done" _iconmap="icons" ~}}</span>
+    </button>
+    <div x-cloak x-show="copySuccess" class="absolute left-8 flex flex-row items-center justify-start px-4 shadow w-auto h-8 top-0 ml-0.5 text-xs bg-white whitespace-nowrap sm480:text-sm font-headingSerif dark:text-text-dark">    
+        {{loca "share_copy_message" }}
+    </div>
+</li>
+<script>
+    function copyHandler(){
+        return  {  
+            copySuccess: false,
+            copyToClipboard(event) {
+                const clickedContainer = event.currentTarget.parentNode
+                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
+                //TODO: maby do this with a magical helper in alpine
+                navigator.clipboard
+                .writeText(url)
+                .then(() => {
+                    console.log("successfully copied");
+                    this.copySuccess = true
+                    window.setTimeout(() => {
+                        this.copySuccess = false
+                    }, 2000)
+                })
+                .catch(() => {
+                    console.log("something went wrong with copy");
+                });
+            }
+        }
+    }
+</script>
+{{/with}}
 {{~#with this.twitterLink ~}}
 <li>
     <a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
@@ -7,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::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" ~}}
@@ -23,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::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" ~}}
@@ -39,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::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" ~}}
@@ -53,48 +94,10 @@
         href="{{this}}"
         title="{{loca "share_mail_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::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" ~}}
     </a>
 </li>
-{{/with}}
-
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
-        title="{{loca "share_copy_linktitle" }}"
-        {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::copybutton"}]}'
-        {{/with}}
-    >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
-    </button>
-    <div class="absolute flex flex-row items-center justify-start rounded pr-4 shadow hidden w-auto h-8 -mt-8 ml-0.5 text-xs bg-white whitespace-nowrap js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-        {{~> components/base/image/icon _addClass="w-7 h-7 text-green-600 mr-4" _icon="status-done" _iconmap="icons" ~}}
-        {{loca "share_copy_message" }}
-    </div>
-</li>
-<script>
-    function copyHandler(){
-        return  {  
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
-                const el = document.createElement('textarea')
-                el.value = window.location.href
-                el.setAttribute('readonly', '')
-                el.style.position = 'absolute'
-                el.style.left = '-9999px'
-                document.body.appendChild(el)
-                el.select()
-                document.execCommand('copy')
-                document.body.removeChild(el)
-                messageDiv.classList.remove('hidden')
-                window.setTimeout(() => {
-                    messageDiv.classList.add('hidden')
-                }, 2000)
-            }
-        }
-    }
-</script>
+{{/with}}

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

@@ -0,0 +1,71 @@
+
+{{~#with this.socialSharing ~}}    
+<div x-data="stickySharingHandlerMobile"
+    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)"
+    @click.outside="close()"
+    >
+    <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"
+            x-ref="button"
+            x-on:click="toggle()"
+            :aria-expanded="open"
+            :aria-controls="$id('dropdown-button')"
+            
+            {{#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 '"                    
+            :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"}}
+            </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/src/stories/views/components/top_button/top_button.hbs

@@ -1,21 +1,27 @@
-<div class="h-8" x-data="{ isVisible: false }">
-    <div class="grid h-8 grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">
-        <div class="flex justify-end h-8 col-full sm:col-main"
-        :class="{ 'bg-white': $store.footerIsVisible }">
+<div class="" x-data="{ isVisible: false }">
+    <div class="grid grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">       
+        <div class="flex justify-between h-0 col-full sm:col-main"
+        :class="{ 'bg-white h-8': $store.footerIsVisible }"
+        x-show="!$store.sharingIsVisible && isVisible"
+        x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
+        x-transition:enter-start="opacity-0 translate-y-8"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 translate-y-12"
+        @scroll.window="isVisible = ((window.pageYOffset * 2) > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+        >
+            {{> components/social_sharing/social_sharing_mobile }}
+        
             <button
-                @scroll.window="isVisible = (window.pageYOffset > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+                
                 @click="window.scrollTo({top: 0, behavior: 'smooth'})"
-                x-show="isVisible"
-                x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
-                x-transition:enter-start="opacity-0 -translate-y-8"
-                x-transition:enter-end="opacity-100 translate-y-0"
-                x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
-                x-transition:leave-start="opacity-100 translate-y-0"
-                x-transition:leave-end="opacity-0 translate-y-12"               
-                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105  [@media(min-width:1170px)]:-mr-14"
+                :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"        
+                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} ml-auto z-100 p-2 h-max mr-5 hover:scale-105  [@media(min-width:1170px)]:-mr-14"
                 >
                 {{> components/base/image/icon _icon="arrow-up"  _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}            
             </button>
+
         </div>
     </div>
     {{! Dieses DIV ist notwendig um bei Seiten mit einem Hintergrund zu vermeiden dass unten eine Lücke entsteht bei der das hintergrundbild durchscheint}}

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

@@ -1,87 +0,0 @@
-{{~#with this.socialSharing ~}}
-    <div x-data="stickySharingHandler"
-        x-on:keydown.escape.prevent.stop="close($refs.button)"
-        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-        x-id="['dropdown-button']"
-        class="flex self-center justify-end ml-3 grow"
-        x-intersect:leave="$store.sharingIsVisible=false"
-        x-intersect:enter="$store.sharingIsVisible=true"
-    >
-        <div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
-            <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
-                <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
-                    :class="{ 'bottom-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
-                    class="flex self-center gap-3 bg-white left-5">
-                    <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"
-                        x-show="!$screen('lg')"
-                        x-ref="button"
-                        x-on:click="toggle()"
-                        :aria-expanded="open"
-                        :aria-controls="$id('dropdown-button')"
-                        
-                        {{#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> 
-
-                    <!-- Panel -->
-                    <div 
-                        x-ref="panel" 
-                        x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
-                        x-transition.origin.bottom.right
-                        x-on:click.outside="close($refs.button)"
-                        :id="$id('dropdown-button')"
-                        class="self-center bg-white"
-                        :class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
-                    >
-                        <ul class="flex gap-3"  :class="{ 'flex-col': $store.sharingIsVisible == false }">
-                            {{> components/social_sharing/social_sharing_compact_icons _trackingData=../this.trackingData}}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{{/with}}
-<script>
-    function stickySharingHandler(){
-        return {
-        open: this.$store.sharingIsOpen,
-        sharingIsVisible: true,
-        isDesktop: true,
-        toggle() {
-            var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
-            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.open) {
-                    return this.close()
-                }
-                this.$refs.button.focus()
-                this.open = true
-                this.$store.sharingIsOpen = true
-            }
-            
-        },
-        close(focusAfter) {
-            if (! this.open) return
-            this.open = false
-            this.$store.sharingIsOpen = false
-            focusAfter && focusAfter.focus()
-        }
-    }
-    }
-</script>

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

@@ -1,87 +0,0 @@
-{{~#with this.socialSharing ~}}
-    <div x-data="stickySharingHandler"
-        x-on:keydown.escape.prevent.stop="close($refs.button)"
-        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-        x-id="['dropdown-button']"
-        class="flex self-center justify-end ml-3 grow"
-        x-intersect:leave="$store.sharingIsVisible=false"
-        x-intersect:enter="$store.sharingIsVisible=true"
-    >
-        <div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
-            <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
-                <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
-                    :class="{ 'bottom-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
-                    class="flex self-center gap-3 bg-white left-5">
-                    <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"
-                        x-show="!$screen('lg')"
-                        x-ref="button"
-                        x-on:click="toggle()"
-                        :aria-expanded="open"
-                        :aria-controls="$id('dropdown-button')"
-                        
-                        {{#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> 
-
-                    <!-- Panel -->
-                    <div 
-                        x-ref="panel" 
-                        x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
-                        x-transition.origin.bottom.right
-                        x-on:click.outside="close($refs.button)"
-                        :id="$id('dropdown-button')"
-                        class="self-center bg-white"
-                        :class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
-                    >
-                        <ul class="flex gap-3"  :class="{ 'flex-col': $store.sharingIsVisible == false }">
-                            {{> components/social_sharing/social_sharing_compact_icons _trackingData=../this.trackingData}}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{{/with}}
-<script>
-    function stickySharingHandler(){
-        return {
-        open: this.$store.sharingIsOpen,
-        sharingIsVisible: true,
-        isDesktop: true,
-        toggle() {
-            var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
-            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.open) {
-                    return this.close()
-                }
-                this.$refs.button.focus()
-                this.open = true
-                this.$store.sharingIsOpen = true
-            }
-            
-        },
-        close(focusAfter) {
-            if (! this.open) return
-            this.open = false
-            this.$store.sharingIsOpen = false
-            focusAfter && focusAfter.focus()
-        }
-    }
-    }
-</script>

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

@@ -1,87 +0,0 @@
-{{~#with this.socialSharing ~}}
-    <div x-data="stickySharingHandler"
-        x-on:keydown.escape.prevent.stop="close($refs.button)"
-        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-        x-id="['dropdown-button']"
-        class="flex self-center justify-end ml-3 grow"
-        x-intersect:leave="$store.sharingIsVisible=false"
-        x-intersect:enter="$store.sharingIsVisible=true"
-    >
-        <div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
-            <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
-                <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
-                    :class="{ 'bottom-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
-                    class="flex self-center gap-3 bg-white left-5">
-                    <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"
-                        x-show="!$screen('lg')"
-                        x-ref="button"
-                        x-on:click="toggle()"
-                        :aria-expanded="open"
-                        :aria-controls="$id('dropdown-button')"
-                        
-                        {{#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> 
-
-                    <!-- Panel -->
-                    <div 
-                        x-ref="panel" 
-                        x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
-                        x-transition.origin.bottom.right
-                        x-on:click.outside="close($refs.button)"
-                        :id="$id('dropdown-button')"
-                        class="self-center bg-white"
-                        :class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
-                    >
-                        <ul class="flex gap-3"  :class="{ 'flex-col': $store.sharingIsVisible == false }">
-                            {{> components/social_sharing/social_sharing_compact_icons _trackingData=../this.trackingData}}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{{/with}}
-<script>
-    function stickySharingHandler(){
-        return {
-        open: this.$store.sharingIsOpen,
-        sharingIsVisible: true,
-        isDesktop: true,
-        toggle() {
-            var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
-            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.open) {
-                    return this.close()
-                }
-                this.$refs.button.focus()
-                this.open = true
-                this.$store.sharingIsOpen = true
-            }
-            
-        },
-        close(focusAfter) {
-            if (! this.open) return
-            this.open = false
-            this.$store.sharingIsOpen = false
-            focusAfter && focusAfter.focus()
-        }
-    }
-    }
-</script>

package/src/stories/views/components/social_sharing/social_sharing_compact.stories.js

@@ -1,18 +0,0 @@
-import story_template from './social_sharing_compact.hbs'
-import socialSharing from '../page/story/fixtures/story.json'
-
-console.log(socialSharing)
-const Template = ({ ...args }) => {
-    return story_template({ ...args })
-}
-
-export default {
-    title: 'Komponenten/Social Sharing',
-} 
-
-export const Default = {
-    render: Template.bind({}),
-    name: 'Social Sharing Kompakt',
-    args: socialSharing
-    
-}