hr-design-system-handlebars 1.125.0 → 1.126.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# v1.126.0 (Fri Dec 19 2025)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 3470 [#1333](https://github.com/mumprod/hr-design-system-handlebars/pull/1333) ([@szuelch](https://github.com/szuelch))
+
+#### 🔩 Dependency Updates
+
+- :arrow_up: Upgrade storybook to latest patch version 8.6.15 to secure… [#1332](https://github.com/mumprod/hr-design-system-handlebars/pull/1332) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.125.1 (Wed Dec 17 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3046 b - added cookie and some top button fixes [#1331](https://github.com/mumprod/hr-design-system-handlebars/pull/1331) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.125.0 (Tue Dec 16 2025)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1726,6 +1726,9 @@ article #commentList {
 .h-1 {
   height: 0.25rem;
 }
+.h-1\/4 {
+  height: 25%;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -1741,6 +1744,9 @@ article #commentList {
 .h-2 {
   height: 0.5rem;
 }
+.h-22 {
+  height: 5.5rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -1802,6 +1808,9 @@ article #commentList {
   height: -moz-max-content;
   height: max-content;
 }
+.h-px {
+  height: 1px;
+}
 .h-screen {
   height: 100vh;
 }
@@ -3906,7 +3915,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1765891425916;
+  counter-reset: cnt1766132745495;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4367,7 +4376,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1765891425916 1;
+  counter-increment: cnt1766132745495 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4385,7 +4394,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1765891425916);
+  content: counter(cnt1766132745495);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -19,11 +19,18 @@ AsyncAlpine.init(Alpine)
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )
     .data('stickyPlayer', () => import('components/mediaplayer/stickyPlayer.alpine.js'))
-    .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
-    .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
-    .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
-    .data('newsletterForm', ()=> import('components/newsletter/js/newsletterForm.alpine.js'))
-    .data('gallerySlider', () => import('components/content/copytext/components/gallery/js/gallerySlider.alpine.js'))
+    .data('socialSharingHandler', () =>
+        import('components/social_sharing/socialSharingHandler.alpine.js')
+    )
+    .data('inputHandler', () => import('components/forms/js/inputHandler.alpine.js'))
+    .data('contactForm', () => import('components/forms/js/contactForm.alpine.js'))
+    .data('newsletterForm', () => import('components/newsletter/js/newsletterForm.alpine.js'))
+    .data('gallerySlider', () =>
+        import('components/content/copytext/components/gallery/js/gallerySlider.alpine.js')
+    )
+    .data('measureScrollDepth', () =>
+        import('components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js')
+    )
     .start()
 
 window.Alpine = Alpine
@@ -46,19 +53,20 @@ Alpine.store('serviceID', {
 Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
+Alpine.store('appBannerIsVisible', false)
 Alpine.store('sectionNavIsVisible', false)
 Alpine.store('sharingIsVisible', false)
 Alpine.store('sharingIsOpen', {
     metadatabox: false,
-    mobilesticky: false
+    mobilesticky: false,
 })
 Alpine.store('sharingBottomPos', {
-    current: '0'
+    current: '0',
 })
 Alpine.store('forms', {
     submissionAttempted: [],
     serverErrorFields: [{}],
-    errorMessages: [{}]
+    errorMessages: [{}],
 })
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)

package/dist/assets/js/base/tracking/pianoHelper.subfeature.js

@@ -1,38 +1,52 @@
-import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature';
+import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
 
-const pianoErrorSecondLevelId = 99;
+const pianoErrorSecondLevelId = 99
 
 const isTrackingAllowed = () => {
-    const settingsCookie = new SettingsCookie();
-    return !settingsCookie.isSettingsCookieExistent("ati") || settingsCookie.isSettingsCookieAccepted('ati');
-};
+    const settingsCookie = new SettingsCookie()
+    return (
+        !settingsCookie.isSettingsCookieExistent('ati') ||
+        settingsCookie.isSettingsCookieAccepted('ati')
+    )
+}
 
 const sendEvent = (eventType, event) => {
     if (typeof pa !== 'undefined' && pa !== undefined && isTrackingAllowed()) {
-        pa.sendEvent(eventType, event);
+        pa.sendEvent(eventType, event)
     }
-};
+}
 
 const getDefaultEvent = (label, secondLevelId) => {
     return {
         click: label,
-        site_level2_id: determineSecondLevelId(secondLevelId)
+        site_level2_id: determineSecondLevelId(secondLevelId),
     }
-};
+}
 
 const determineSecondLevelId = (secondLevelId) => {
     return secondLevelId !== undefined
         ? secondLevelId
-        : undefined !== pageDisplayConfig ? pageDisplayConfig.site_level2_id : pianoErrorSecondLevelId;
-};
+        : undefined !== pageDisplayConfig
+        ? pageDisplayConfig.site_level2_id
+        : pianoErrorSecondLevelId
+}
 
-const uxAction = (label, secondLevelId) => sendEvent('click.action', getDefaultEvent(label, secondLevelId));
+const uxAction = (label, secondLevelId) =>
+    sendEvent('click.action', getDefaultEvent(label, secondLevelId))
 
-const uxNavigation = (label, secondLevelId) => sendEvent('click.navigation', getDefaultEvent(label, secondLevelId));
+const uxNavigation = (label, secondLevelId) =>
+    sendEvent('click.navigation', getDefaultEvent(label, secondLevelId))
 
-const pi = () => sendEvent('page.display', pageDisplayConfig);
+const pi = () => sendEvent('page.display', pageDisplayConfig)
 
-const download = (label, secondLevelId) => sendEvent('click.download', getDefaultEvent(label, secondLevelId));
+const download = (label, secondLevelId) =>
+    sendEvent('click.download', getDefaultEvent(label, secondLevelId))
 
+const scrollDepth = (depth) => {
+    sendEvent('page.scroll', {
+        scroll_depth: depth,
+        page: undefined !== pageDisplayConfig ? pageDisplayConfig.page : 'unknown',
+    })
+}
 
-export { isTrackingAllowed, uxAction, uxNavigation, pi, download };
+export { isTrackingAllowed, uxAction, uxNavigation, pi, download, scrollDepth }

package/dist/assets/js/components/appBanner/appBanner.alpine.js

@@ -1,4 +1,5 @@
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import { getJSONCookie, setJSONCookie } from 'hrQuery'
 
 export default function appBanner() {
     return {
@@ -6,24 +7,37 @@ export default function appBanner() {
         deferredPrompt: null,
         isAndroid: /Android/i.test(navigator.userAgent),
         packageId: "de.hr.hessenschau",
+        cookie: {},
+        cookieLifetime: 1000 * 60 * 60 * 24 * 30, 
         init: function () {
-
-            if(this.isAndroid){
+            this.readTrackingCookie()
+            if(this.cookie["closed"] !== true){
+                if(this.isAndroid){
+                    this.showBanner = true;
+                    this.$store.appBannerIsVisible = true;
+                }
+            }    
+            if(window.IS_STORYBOOK){ 
                 this.showBanner = true;
+                this.$store.appBannerIsVisible = true;
             }
             
-            if(window.IS_STORYBOOK){ this.showBanner = true;}
         },
         installClickHandler: function(){
             this.openPlayStore()
+            this.writeCookie()
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
         },
         closeClickHandler: function(){
             uxAction('appBanner::bannerClosed');
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
+            this.writeCookie()
         },
         openPlayStore: function() {
             let fallbackTriggered = false;
+            uxAction('appBanner::playStoreOpened');
 
             const fallback = () => {
                 if (fallbackTriggered) return;
@@ -45,6 +59,13 @@ export default function appBanner() {
                 `#Intent;scheme=market;package=com.android.vending;end`;
 
             setTimeout(fallback, 700);
+        },
+        writeCookie: function() {
+            this.cookie["closed"] = true
+            setJSONCookie('appBanner', this.cookie, this.cookieLifetime)
+        },
+        readTrackingCookie: function() {
+            this.cookie = getJSONCookie('appBanner') || {}
         }
     }
 }

package/dist/assets/js/components/appBanner/nativeAppBanner.alpine.js

@@ -14,9 +14,13 @@ export default function nativeAppBanner() {
                 // Update UI notify the user they can add to home screen
                 if(this.isAndroid){
                     this.showBanner = true;
+                    this.$store.appBannerIsVisible = true;
                 }
             });
-            if(window.IS_STORYBOOK){ this.showBanner = true;}
+            if(window.IS_STORYBOOK){
+                this.showBanner = true;
+                this.$store.appBannerIsVisible = true;
+            }
         },
         installClickHandler: function(){
             if(this.deferredPrompt){
@@ -35,10 +39,12 @@ export default function nativeAppBanner() {
                     });
             }
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
         },
         closeClickHandler: function(){
             uxAction('nativeAppBanner::bannerClosed');
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
         }
     }
 }

package/dist/assets/js/components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js

@@ -0,0 +1,28 @@
+import { scrollDepth } from 'base/tracking/pianoHelper.subfeature'
+export default function measureScrollDepth() {
+    let fired = {}
+    function handleIntersect(entries) {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting && !fired[entry.target.dataset.scrollDepth]) {
+                fired[entry.target.dataset.scrollDepth] = true
+                scrollDepth(entry.target.dataset.scrollDepth)
+            }
+        })
+    }
+    return {
+        scrollDepthContainer0: this.$refs.scroll_depth_0,
+        scrollDepthContainer25: this.$refs.scroll_depth_25,
+        scrollDepthContainer50: this.$refs.scroll_depth_50,
+        scrollDepthContainer75: this.$refs.scroll_depth_75,
+        scrollDepthContainer100: this.$refs.scroll_depth_100,
+
+        init() {
+            const observer = new IntersectionObserver(handleIntersect)
+            observer.observe(this.scrollDepthContainer0)
+            observer.observe(this.scrollDepthContainer25)
+            observer.observe(this.scrollDepthContainer50)
+            observer.observe(this.scrollDepthContainer75)
+            observer.observe(this.scrollDepthContainer100)
+        },
+    }
+}

package/dist/views/components/appBanner/appBanner.hbs

@@ -1,6 +1,6 @@
 <div 
     x-data="appBanner()" x-cloak x-show="showBanner" ax-load x-ignore
-    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 z-300 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
     <div class="flex flex-row items-center gap-4 grow">
         <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
            <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 

package/dist/views/components/appBanner/nativeAppBanner.hbs

@@ -1,6 +1,6 @@
 <div 
     x-data="nativeAppBanner()" x-cloak x-show="showBanner" ax-load x-ignore
-    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 z-300 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
     <div class="flex flex-row items-center gap-4 grow">
         <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
            <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 

package/dist/views/components/page/index/page.hbs

@@ -18,6 +18,7 @@
     </head>
 
     <body itemscope itemtype="http://schema.org/WebPage">
+     {{~> components/appBanner/appBanner ~}}
         <div class="js-pageSwap">
                       
             {{> components/site_header/header }}          

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

@@ -1,38 +1,41 @@
 {{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
-
-    {{> components/page/base/page_header}}
-
-    {{> components/page/components/shorttext _text=this.shorttext }}
-
-    {{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=../../_webview-adjust_context}}
     
-    
-    {{#unless this.displayPageLead.isFalse}}
-        {{#with this.teaseritemDS }}
-            {{#if this.isImage}}
-                {{> components/content/copytext/components/image/figure
-                    _cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
-                    _cssClassCaption="mx-5 md:mx-0"
-                    _type="story"
-                    _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
-                    _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
-                    _isWebview=../../../_webview-adjust_context
-                    _noDelay=true}}
-            {{/if}}
-            {{#if this.isVideoOnDemand}}
-               {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-            {{/if}}
-            {{#if this.isLivestream}}
-               {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
-            {{/if}}
-        {{/with}}
-    {{/unless}}
-
-    {{#unless ../../_webview-adjust_context}}        
-        {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
-    {{/unless}}
-    {{~> components/content/copytext/copytext _isWebview=../../_webview-adjust_context ~}}
-
+    <div class="article-full-width grid grid-article relative">
+        {{> components/scroll_depth_measurement/scroll_depth_measurement}}
+        
+        {{> components/page/base/page_header}}
+
+        {{> components/page/components/shorttext _text=this.shorttext }}
+
+        {{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=../../_webview-adjust_context}}
+        
+        
+        {{#unless this.displayPageLead.isFalse}}
+            {{#with this.teaseritemDS }}
+                {{#if this.isImage}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
+                        _cssClassCaption="mx-5 md:mx-0"
+                        _type="story"
+                        _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
+                        _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
+                        _isWebview=../../../_webview-adjust_context
+                        _noDelay=true}}
+                {{/if}}
+                {{#if this.isVideoOnDemand}}
+                {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+                {{/if}}
+                {{#if this.isLivestream}}
+                {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+                {{/if}}
+            {{/with}}
+        {{/unless}}
+
+        {{#unless ../../_webview-adjust_context}}        
+            {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
+        {{/unless}}
+        {{~> components/content/copytext/copytext  _isWebview=../../_webview-adjust_context ~}}
+    </div>
      {{~> components/content/content_footer/content_footer 
         _showDate=this.hasDwellTime
         _date=this.documentPublicationDate

package/dist/views/components/scroll_depth_measurement/scroll_depth_measurement.hbs

@@ -0,0 +1,7 @@
+<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
+    <div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
+    <div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
+    <div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>
+    <div data-scroll-depth="75%" x-ref="scroll_depth_75" class="w-full h-1/4"></div>
+    <div data-scroll-depth="100%" x-ref="scroll_depth_100" class="w-full h-px"></div>
+</div>

package/dist/views/components/top_button/top_button.hbs

@@ -1,7 +1,7 @@
 <div class="h-8" 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 }"
+        :class="{ 'bg-white h-8': $store.footerIsVisible, 'h-22': $store.appBannerIsVisible && !$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"

package/dist/views_static/components/appBanner/appBanner.hbs

@@ -1,6 +1,6 @@
 <div 
     x-data="appBanner()" x-cloak x-show="showBanner" ax-load x-ignore
-    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 z-300 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
     <div class="flex flex-row items-center gap-4 grow">
         <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
            <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 

package/dist/views_static/components/appBanner/nativeAppBanner.hbs

@@ -1,6 +1,6 @@
 <div 
     x-data="nativeAppBanner()" x-cloak x-show="showBanner" ax-load x-ignore
-    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 z-300 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
     <div class="flex flex-row items-center gap-4 grow">
         <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
            <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 

package/dist/views_static/components/page/index/page.hbs

@@ -18,6 +18,7 @@
     </head>
 
     <body itemscope itemtype="http://schema.org/WebPage">
+     {{~> components/appBanner/appBanner ~}}
         <div class="js-pageSwap">
                       
             {{> components/site_header/header }}          

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

@@ -1,38 +1,41 @@
 {{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
-
-    {{> components/page/base/page_header}}
-
-    {{> components/page/components/shorttext _text=this.shorttext }}
-
-    {{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=_webview}}
     
-    
-    {{#unless this.displayPageLead.isFalse}}
-        {{#with this.teaseritemDS }}
-            {{#if this.isImage}}
-                {{> components/content/copytext/components/image/figure
-                    _cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
-                    _cssClassCaption="mx-5 md:mx-0"
-                    _type="story"
-                    _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
-                    _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
-                    _isWebview=../_webview
-                    _noDelay=true}}
-            {{/if}}
-            {{#if this.isVideoOnDemand}}
-               {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-            {{/if}}
-            {{#if this.isLivestream}}
-               {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
-            {{/if}}
-        {{/with}}
-    {{/unless}}
-
-    {{#unless _webview}}        
-        {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
-    {{/unless}}
-    {{~> components/content/copytext/copytext _isWebview=_webview ~}}
-
+    <div class="article-full-width grid grid-article relative">
+        {{> components/scroll_depth_measurement/scroll_depth_measurement}}
+        
+        {{> components/page/base/page_header}}
+
+        {{> components/page/components/shorttext _text=this.shorttext }}
+
+        {{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=_webview}}
+        
+        
+        {{#unless this.displayPageLead.isFalse}}
+            {{#with this.teaseritemDS }}
+                {{#if this.isImage}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
+                        _cssClassCaption="mx-5 md:mx-0"
+                        _type="story"
+                        _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
+                        _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
+                        _isWebview=../_webview
+                        _noDelay=true}}
+                {{/if}}
+                {{#if this.isVideoOnDemand}}
+                {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+                {{/if}}
+                {{#if this.isLivestream}}
+                {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+                {{/if}}
+            {{/with}}
+        {{/unless}}
+
+        {{#unless _webview}}        
+            {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
+        {{/unless}}
+        {{~> components/content/copytext/copytext  _isWebview=_webview ~}}
+    </div>
      {{~> components/content/content_footer/content_footer 
         _showDate=this.hasDwellTime
         _date=this.documentPublicationDate

package/dist/views_static/components/scroll_depth_measurement/scroll_depth_measurement.hbs

@@ -0,0 +1,7 @@
+<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
+    <div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
+    <div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
+    <div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>
+    <div data-scroll-depth="75%" x-ref="scroll_depth_75" class="w-full h-1/4"></div>
+    <div data-scroll-depth="100%" x-ref="scroll_depth_100" class="w-full h-px"></div>
+</div>

package/dist/views_static/components/top_button/top_button.hbs

@@ -1,7 +1,7 @@
 <div class="h-8" 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 }"
+        :class="{ 'bg-white h-8': $store.footerIsVisible, 'h-22': $store.appBannerIsVisible && !$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"

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.125.0",
+  "version": "1.126.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",
@@ -44,22 +44,22 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.21.4",
     "@chromatic-com/storybook": "1",
-    "@storybook/addon-a11y": "^8.2.6",
-    "@storybook/addon-actions": "^8.2.6",
+    "@storybook/addon-a11y": "8.6.15",
+    "@storybook/addon-actions": "8.6.15",
     "@storybook/addon-console": "^3.0.0",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-interactions": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-essentials": "8.6.15",
+    "@storybook/addon-interactions": "8.6.15",
+    "@storybook/addon-links": "8.6.15",
     "@storybook/addon-styling-webpack": "1.0.0",
-    "@storybook/addon-themes": "^8.2.6",
+    "@storybook/addon-themes": "8.6.15",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
     "@storybook/addon-webpack5-compiler-swc": "1.0.4",
-    "@storybook/blocks": "^8.2.6",
-    "@storybook/html": "^8.2.6",
-    "@storybook/html-webpack5": "^8.2.6",
-    "@storybook/test": "^8.2.6",
+    "@storybook/blocks": "8.6.15",
+    "@storybook/html": "8.6.15",
+    "@storybook/html-webpack5": "8.6.15",
+    "@storybook/test": "8.6.15",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.2.6",
+    "@storybook/theming": "8.6.15",
     "auto": "^11.0.5",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.2",
@@ -101,7 +101,7 @@
     "raw-loader": "^4.0.2",
     "remark-gfm": "^4.0.0",
     "rimraf": "^3.0.2",
-    "storybook": "^8.2.6",
+    "storybook": "8.6.15",
     "storybook-addon-fetch-mock": "^2.0.1",
     "storybook-conditional-toolbar-selector": "^1.0.3",
     "style-loader": "^4.0.0",

package/src/assets/js/alpine.js

@@ -19,11 +19,18 @@ AsyncAlpine.init(Alpine)
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )
     .data('stickyPlayer', () => import('components/mediaplayer/stickyPlayer.alpine.js'))
-    .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
-    .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
-    .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
-    .data('newsletterForm', ()=> import('components/newsletter/js/newsletterForm.alpine.js'))
-    .data('gallerySlider', () => import('components/content/copytext/components/gallery/js/gallerySlider.alpine.js'))
+    .data('socialSharingHandler', () =>
+        import('components/social_sharing/socialSharingHandler.alpine.js')
+    )
+    .data('inputHandler', () => import('components/forms/js/inputHandler.alpine.js'))
+    .data('contactForm', () => import('components/forms/js/contactForm.alpine.js'))
+    .data('newsletterForm', () => import('components/newsletter/js/newsletterForm.alpine.js'))
+    .data('gallerySlider', () =>
+        import('components/content/copytext/components/gallery/js/gallerySlider.alpine.js')
+    )
+    .data('measureScrollDepth', () =>
+        import('components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js')
+    )
     .start()
 
 window.Alpine = Alpine
@@ -46,19 +53,20 @@ Alpine.store('serviceID', {
 Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
+Alpine.store('appBannerIsVisible', false)
 Alpine.store('sectionNavIsVisible', false)
 Alpine.store('sharingIsVisible', false)
 Alpine.store('sharingIsOpen', {
     metadatabox: false,
-    mobilesticky: false
+    mobilesticky: false,
 })
 Alpine.store('sharingBottomPos', {
-    current: '0'
+    current: '0',
 })
 Alpine.store('forms', {
     submissionAttempted: [],
     serverErrorFields: [{}],
-    errorMessages: [{}]
+    errorMessages: [{}],
 })
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)

package/src/stories/views/base/tracking/pianoHelper.subfeature.js

@@ -1,38 +1,52 @@
-import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature';
+import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
 
-const pianoErrorSecondLevelId = 99;
+const pianoErrorSecondLevelId = 99
 
 const isTrackingAllowed = () => {
-    const settingsCookie = new SettingsCookie();
-    return !settingsCookie.isSettingsCookieExistent("ati") || settingsCookie.isSettingsCookieAccepted('ati');
-};
+    const settingsCookie = new SettingsCookie()
+    return (
+        !settingsCookie.isSettingsCookieExistent('ati') ||
+        settingsCookie.isSettingsCookieAccepted('ati')
+    )
+}
 
 const sendEvent = (eventType, event) => {
     if (typeof pa !== 'undefined' && pa !== undefined && isTrackingAllowed()) {
-        pa.sendEvent(eventType, event);
+        pa.sendEvent(eventType, event)
     }
-};
+}
 
 const getDefaultEvent = (label, secondLevelId) => {
     return {
         click: label,
-        site_level2_id: determineSecondLevelId(secondLevelId)
+        site_level2_id: determineSecondLevelId(secondLevelId),
     }
-};
+}
 
 const determineSecondLevelId = (secondLevelId) => {
     return secondLevelId !== undefined
         ? secondLevelId
-        : undefined !== pageDisplayConfig ? pageDisplayConfig.site_level2_id : pianoErrorSecondLevelId;
-};
+        : undefined !== pageDisplayConfig
+        ? pageDisplayConfig.site_level2_id
+        : pianoErrorSecondLevelId
+}
 
-const uxAction = (label, secondLevelId) => sendEvent('click.action', getDefaultEvent(label, secondLevelId));
+const uxAction = (label, secondLevelId) =>
+    sendEvent('click.action', getDefaultEvent(label, secondLevelId))
 
-const uxNavigation = (label, secondLevelId) => sendEvent('click.navigation', getDefaultEvent(label, secondLevelId));
+const uxNavigation = (label, secondLevelId) =>
+    sendEvent('click.navigation', getDefaultEvent(label, secondLevelId))
 
-const pi = () => sendEvent('page.display', pageDisplayConfig);
+const pi = () => sendEvent('page.display', pageDisplayConfig)
 
-const download = (label, secondLevelId) => sendEvent('click.download', getDefaultEvent(label, secondLevelId));
+const download = (label, secondLevelId) =>
+    sendEvent('click.download', getDefaultEvent(label, secondLevelId))
 
+const scrollDepth = (depth) => {
+    sendEvent('page.scroll', {
+        scroll_depth: depth,
+        page: undefined !== pageDisplayConfig ? pageDisplayConfig.page : 'unknown',
+    })
+}
 
-export { isTrackingAllowed, uxAction, uxNavigation, pi, download };
+export { isTrackingAllowed, uxAction, uxNavigation, pi, download, scrollDepth }

package/src/stories/views/components/appBanner/appBanner.alpine.js

@@ -1,4 +1,5 @@
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import { getJSONCookie, setJSONCookie } from 'hrQuery'
 
 export default function appBanner() {
     return {
@@ -6,24 +7,37 @@ export default function appBanner() {
         deferredPrompt: null,
         isAndroid: /Android/i.test(navigator.userAgent),
         packageId: "de.hr.hessenschau",
+        cookie: {},
+        cookieLifetime: 1000 * 60 * 60 * 24 * 30, 
         init: function () {
-
-            if(this.isAndroid){
+            this.readTrackingCookie()
+            if(this.cookie["closed"] !== true){
+                if(this.isAndroid){
+                    this.showBanner = true;
+                    this.$store.appBannerIsVisible = true;
+                }
+            }    
+            if(window.IS_STORYBOOK){ 
                 this.showBanner = true;
+                this.$store.appBannerIsVisible = true;
             }
             
-            if(window.IS_STORYBOOK){ this.showBanner = true;}
         },
         installClickHandler: function(){
             this.openPlayStore()
+            this.writeCookie()
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
         },
         closeClickHandler: function(){
             uxAction('appBanner::bannerClosed');
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
+            this.writeCookie()
         },
         openPlayStore: function() {
             let fallbackTriggered = false;
+            uxAction('appBanner::playStoreOpened');
 
             const fallback = () => {
                 if (fallbackTriggered) return;
@@ -45,6 +59,13 @@ export default function appBanner() {
                 `#Intent;scheme=market;package=com.android.vending;end`;
 
             setTimeout(fallback, 700);
+        },
+        writeCookie: function() {
+            this.cookie["closed"] = true
+            setJSONCookie('appBanner', this.cookie, this.cookieLifetime)
+        },
+        readTrackingCookie: function() {
+            this.cookie = getJSONCookie('appBanner') || {}
         }
     }
 }

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

@@ -1,6 +1,6 @@
 <div 
     x-data="appBanner()" x-cloak x-show="showBanner" ax-load x-ignore
-    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 z-300 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
     <div class="flex flex-row items-center gap-4 grow">
         <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
            <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 

package/src/stories/views/components/appBanner/nativeAppBanner.alpine.js

@@ -14,9 +14,13 @@ export default function nativeAppBanner() {
                 // Update UI notify the user they can add to home screen
                 if(this.isAndroid){
                     this.showBanner = true;
+                    this.$store.appBannerIsVisible = true;
                 }
             });
-            if(window.IS_STORYBOOK){ this.showBanner = true;}
+            if(window.IS_STORYBOOK){
+                this.showBanner = true;
+                this.$store.appBannerIsVisible = true;
+            }
         },
         installClickHandler: function(){
             if(this.deferredPrompt){
@@ -35,10 +39,12 @@ export default function nativeAppBanner() {
                     });
             }
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
         },
         closeClickHandler: function(){
             uxAction('nativeAppBanner::bannerClosed');
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
         }
     }
 }

package/src/stories/views/components/appBanner/nativeAppBanner.hbs

@@ -1,6 +1,6 @@
 <div 
     x-data="nativeAppBanner()" x-cloak x-show="showBanner" ax-load x-ignore
-    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 z-300 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
     <div class="flex flex-row items-center gap-4 grow">
         <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
            <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 

package/src/stories/views/components/page/index/page.hbs

@@ -18,6 +18,7 @@
     </head>
 
     <body itemscope itemtype="http://schema.org/WebPage">
+     {{~> components/appBanner/appBanner ~}}
         <div class="js-pageSwap">
                       
             {{> components/site_header/header }}          

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

@@ -1,38 +1,41 @@
 {{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
-
-    {{> components/page/base/page_header}}
-
-    {{> components/page/components/shorttext _text=this.shorttext }}
-
-    {{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=_webview-adjust_context}}
     
-    
-    {{#unless this.displayPageLead.isFalse}}
-        {{#with this.teaseritemDS }}
-            {{#if this.isImage}}
-                {{> components/content/copytext/components/image/figure
-                    _cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
-                    _cssClassCaption="mx-5 md:mx-0"
-                    _type="story"
-                    _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
-                    _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
-                    _isWebview=../_webview-adjust_context
-                    _noDelay=true}}
-            {{/if}}
-            {{#if this.isVideoOnDemand}}
-               {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-            {{/if}}
-            {{#if this.isLivestream}}
-               {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
-            {{/if}}
-        {{/with}}
-    {{/unless}}
-
-    {{#unless _webview-adjust_context}}        
-        {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
-    {{/unless}}
-    {{~> components/content/copytext/copytext _isWebview=_webview-adjust_context ~}}
-
+    <div class="article-full-width grid grid-article relative">
+        {{> components/scroll_depth_measurement/scroll_depth_measurement}}
+        
+        {{> components/page/base/page_header}}
+
+        {{> components/page/components/shorttext _text=this.shorttext }}
+
+        {{> components/page/components/metadatabox _showDate=this.hasDwellTime _webview=_webview-adjust_context}}
+        
+        
+        {{#unless this.displayPageLead.isFalse}}
+            {{#with this.teaseritemDS }}
+                {{#if this.isImage}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="article-full-width md:article-breakout mt-5 sm:mt-7 "
+                        _cssClassCaption="mx-5 md:mx-0"
+                        _type="story"
+                        _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
+                        _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9 print:ar-16-9" "ar-16-9")
+                        _isWebview=../_webview-adjust_context
+                        _noDelay=true}}
+                {{/if}}
+                {{#if this.isVideoOnDemand}}
+                {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+                {{/if}}
+                {{#if this.isLivestream}}
+                {{> components/content/copytext/components/media/media_figure _hasHeadline=true _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+                {{/if}}
+            {{/with}}
+        {{/unless}}
+
+        {{#unless _webview-adjust_context}}        
+            {{> components/social_sharing/social_sharing_copytext _useSticky=(configProperty "templates.useStickyNav")}}
+        {{/unless}}
+        {{~> components/content/copytext/copytext  _isWebview=_webview-adjust_context ~}}
+    </div>
      {{~> components/content/content_footer/content_footer 
         _showDate=this.hasDwellTime
         _date=this.documentPublicationDate

package/src/stories/views/components/scroll_depth_measurement/scrollDepthMeasurement.alpine.js

@@ -0,0 +1,28 @@
+import { scrollDepth } from 'base/tracking/pianoHelper.subfeature'
+export default function measureScrollDepth() {
+    let fired = {}
+    function handleIntersect(entries) {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting && !fired[entry.target.dataset.scrollDepth]) {
+                fired[entry.target.dataset.scrollDepth] = true
+                scrollDepth(entry.target.dataset.scrollDepth)
+            }
+        })
+    }
+    return {
+        scrollDepthContainer0: this.$refs.scroll_depth_0,
+        scrollDepthContainer25: this.$refs.scroll_depth_25,
+        scrollDepthContainer50: this.$refs.scroll_depth_50,
+        scrollDepthContainer75: this.$refs.scroll_depth_75,
+        scrollDepthContainer100: this.$refs.scroll_depth_100,
+
+        init() {
+            const observer = new IntersectionObserver(handleIntersect)
+            observer.observe(this.scrollDepthContainer0)
+            observer.observe(this.scrollDepthContainer25)
+            observer.observe(this.scrollDepthContainer50)
+            observer.observe(this.scrollDepthContainer75)
+            observer.observe(this.scrollDepthContainer100)
+        },
+    }
+}

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

@@ -0,0 +1,7 @@
+<div class="absolute w-full h-full" x-ref="scroll_depth_container" ax-load x-data="measureScrollDepth()" x-ignore>
+    <div data-scroll-depth="0%" x-ref="scroll_depth_0" class="w-full h-1/4"></div>
+    <div data-scroll-depth="25%" x-ref="scroll_depth_25" class="w-full h-1/4"></div>
+    <div data-scroll-depth="50%" x-ref="scroll_depth_50" class="w-full h-1/4"></div>
+    <div data-scroll-depth="75%" x-ref="scroll_depth_75" class="w-full h-1/4"></div>
+    <div data-scroll-depth="100%" x-ref="scroll_depth_100" class="w-full h-px"></div>
+</div>

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

@@ -1,7 +1,7 @@
 <div class="h-8" 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 }"
+        :class="{ 'bg-white h-8': $store.footerIsVisible, 'h-22': $store.appBannerIsVisible && !$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"