hr-design-system-handlebars 1.125.0 → 1.125.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# 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

@@ -1741,6 +1741,9 @@ article #commentList {
 .h-2 {
   height: 0.5rem;
 }
+.h-22 {
+  height: 5.5rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -3906,7 +3909,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1765891425916;
+  counter-reset: cnt1765981088136;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4367,7 +4370,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1765891425916 1;
+  counter-increment: cnt1765981088136 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4385,7 +4388,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(cnt1765981088136);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -46,6 +46,7 @@ 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', {

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/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/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/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.125.1",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/js/alpine.js

@@ -46,6 +46,7 @@ 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', {

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/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"