hr-design-system-handlebars 1.75.1 → 1.75.3

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

@@ -0,0 +1,45 @@
+import story_template_horizontal from './social_sharing_horizontal.hbs'
+import story_template_mobile from './social_sharing_mobile.hbs'
+import socialSharing from '../page/story/fixtures/story.json'
+
+console.log(socialSharing)
+
+const Template_horizontal = ({ ...args }) => {
+    return story_template_horizontal({ ...args })
+}
+const Template_mobile = ({ ...args }) => {
+    return story_template_mobile({ ...args })
+}
+export default {
+    title: 'Komponenten/Social Sharing',
+    
+} 
+
+export const Default = {
+    render: Template_horizontal.bind({}),
+    name: 'Social Sharing Horizontal',
+    args: socialSharing,
+    parameters: {
+        chromatic: {
+            viewports: [360, 1024],
+        }
+    },
+}
+export const Mobile = {
+    render: Template_mobile.bind({}),
+    name: 'Social Sharing Mobile',
+    args: socialSharing,
+    parameters: {
+        layout: 'fullscreen',
+        chromatic: {
+            viewports: [360, 1024],
+        }
+    },
+    decorators: [
+        (Story) => {
+            return `<div class="min-h-screen flex items-end bg-slate-200">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+}

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

@@ -6,7 +6,7 @@
     <div 
         class="relative right-0 p-1 bg-white md:h-auto">
             <ul class="flex flex-col gap-3">  
-                {{> components/social_sharing/social_sharing_compact_icons }}
+                {{> components/social_sharing/social_sharing_icons _socialSharingType="vertical-desktop" }}
             </ul>
     </div>
 </div>

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

@@ -0,0 +1,72 @@
+{{~#with this.socialSharing ~}}
+    <div x-data="stickySharingHandler"
+        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpenHorizontal = false; $store.sharingIsOpenMobile = 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)"
+        @click.outside="close()"
+    >
+        <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"
+                x-ref="button"
+                x-on:click="toggle()"
+                :aria-expanded="open"
+                :aria-controls="$id('dropdown-button')"
+                x-show="$store.sharingIsVisible"
+                {{#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.sharingIsOpenHorizontal ? 'flex' : 'hidden '"              
+                :id="$id('dropdown-button')"
+                class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto lg:flex"
+            >
+                <ul class="flex gap-3">  
+                    {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox"}}
+                </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_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/teaser/fixtures/teaser_poster_lg.json

@@ -1 +1 @@
-{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Artikel"}}}}}
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Artikel"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_poster_md.json

@@ -1 +1 @@
-{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"33","realTeaserSize":"33","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 300px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Artikel"}}}}}
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"33","realTeaserSize":"33","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 300px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/rueckkehr-nach-abschiebung-102_v-1to1__small.jpg 380w, images/rueckkehr-nach-abschiebung-102_v-1to1__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-1to1.jpg 720w, images/rueckkehr-nach-abschiebung-102_v-1to1__large.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Artikel"}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_poster_md_label.json

@@ -1 +1 @@
-{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Liveticker ausm Urlaub","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"33","realTeaserSize":"33","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sonniger-herbst-100_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 300px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/sonniger-herbst-100_v-1to1__small.jpg 380w, images/sonniger-herbst-100_v-1to1__medium.jpg 480w, images/sonniger-herbst-100_v-1to1.jpg 720w, images/sonniger-herbst-100_v-1to1__large.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Ticker"}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"","bylineText":""}}}}}
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"33","realTeaserSize":"33","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sonniger-herbst-100_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 300px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/sonniger-herbst-100_v-1to1__small.jpg 380w, images/sonniger-herbst-100_v-1to1__medium.jpg 480w, images/sonniger-herbst-100_v-1to1.jpg 720w, images/sonniger-herbst-100_v-1to1__large.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Ticker"}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"","bylineText":""}}}}}

package/src/stories/views/components/teaser/fixtures/teaser_poster_md_label_byline.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"hr-Bigband feat. Omer Klein und Becca Stevens +++ Jakob Bänsch Quartett +++ Emma Rawicz CHROMA","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"33","realTeaserSize":"33","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sonniger-herbst-100_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 300px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/sonniger-herbst-100_v-1to1__small.jpg 380w, images/sonniger-herbst-100_v-1to1__medium.jpg 480w, images/sonniger-herbst-100_v-1to1.jpg 720w, images/sonniger-herbst-100_v-1to1__large.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zur Veranstaltung"}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","hasStartTime":true,"startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/teaser_poster.hbs

@@ -16,14 +16,15 @@
     </figure>
     <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
         {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
+            <div class="-mt-8 line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
             {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
                         {{> components/label/label _type=this.type _text=(loca this.loca)}}
-                        {{> components/label/label_byline _css="ml-2"}}
+                        <span class="text-white">{{> components/label/label_byline _css="ml-2"}}</span>
                     {{/components/label/label_group}}
                 {{/with~}}
-                 {{#> components/teaser/components/teaser_headline _headlineTag="h2" _css="text-shadow text-center text-white mb-4 mx-2 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5"}}
+                 {{#> components/teaser/components/teaser_headline _headlineTag="h2" _css="text-shadow text-center text-white mb-4 mx-2 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
                     {{#if this.topline}}
                         {{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
                     {{/if}}
@@ -33,20 +34,21 @@
                     {{/if}}
                 {{/components/teaser/components/teaser_headline}}
             {{/components/teaser/components/teaser_header}}
+            </div>
         {{/components/base/link}}
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
             {{#if _isCopytext~}}
                 {{#if this.showFullSize.isTrue~}}
-                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16","z-20 mb-4 sm480:mb-7 md:mb-5","z-20 mb-4 sm480:mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                         {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                     {{/components/button/link_button}}
                 {{else}}
-                    {{#> components/button/link_button _link=this.link _size="lg" _css="z-20 mb-4 sm480:mb-7" _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css="z-20 mb-4 sm480:mb-7 hover:bg-white" _variant="secondary" _isAriaHidden=true _onBackground=true}}
                         {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                     {{/components/button/link_button}}
-                {{/if}}    
+                {{/if}}
             {{else}}
-                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7 hover:bg-white","z-20 mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                     {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                 {{/components/button/link_button}}
             {{/if}}

package/src/stories/views/components/teaser/teaser_poster.stories.js

@@ -2,6 +2,7 @@ import teaser from './teaser_poster.hbs'
 import teserPosterLg from './fixtures/teaser_poster_lg.json'
 import teserPosterMd from './fixtures/teaser_poster_md.json'
 import teserPosterMdLabel from './fixtures/teaser_poster_md_label.json'
+import teserPosterMdLabelByline from './fixtures/teaser_poster_md_label_byline.json'
 
 const Template = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -65,3 +66,9 @@ export const Poster33MitLabel = {
     name: 'Poster 33 mit Label',
     args: teserPosterMdLabel.logicItem.includeModel,
 }
+
+export const Poster33MitLabelByline = {
+    render: Template.bind({}),
+    name: 'Poster 33 mit Label und Byline',
+    args: teserPosterMdLabelByline.logicItem.includeModel,
+}

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>