hr-design-system-handlebars 1.124.8 → 1.124.10

package/.storybook/preview.js

@@ -23,6 +23,7 @@ configureActions({
 
 // Create CheckCSS instance
 const checkcss = new CheckCSS();
+window.IS_STORYBOOK = true;
 
 checkcss.onClassnameDetected = function (classname, element) {
     // Return `false` to disable checks for `classname`.

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.124.10 (Tue Dec 16 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3046 b [#1329](https://github.com/mumprod/hr-design-system-handlebars/pull/1329) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.124.9 (Mon Dec 15 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3046 [#1328](https://github.com/mumprod/hr-design-system-handlebars/pull/1328) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.124.8 (Wed Dec 10 2025)
 
 #### ⚠️ Pushed to `main`

package/dist/assets/index.css

@@ -1729,6 +1729,9 @@ article #commentList {
 .h-10 {
   height: 2.5rem;
 }
+.h-11 {
+  height: 2.75rem;
+}
 .h-12 {
   height: 3rem;
 }
@@ -1847,6 +1850,9 @@ article #commentList {
 .w-10\/12 {
   width: 83.333333%;
 }
+.w-11 {
+  width: 2.75rem;
+}
 .w-12 {
   width: 3rem;
 }
@@ -2724,6 +2730,11 @@ article #commentList {
   background-color: rgba(96, 165, 250, 1);
   background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
 }
+.bg-blue-aqua {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 237, 241, 1);
+  background-color: rgba(229, 237, 241, var(--tw-bg-opacity));
+}
 .bg-blue-congress-hex {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, 1);
@@ -3895,7 +3906,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1765358321443;
+  counter-reset: cnt1765889322588;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4356,7 +4367,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1765358321443 1;
+  counter-increment: cnt1765889322588 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4374,7 +4385,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(cnt1765358321443);
+  content: counter(cnt1765889322588);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -7386,6 +7397,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     line-height: 2rem;
   }
 
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.375rem;
+  }
+
   .sm\:text-lg {
     font-size: 1.125rem;
     line-height: 1.5rem;
@@ -8511,6 +8527,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     max-width: 75%;
   }
 
+  .lg\:max-w-7xl {
+    max-width: 80rem;
+  }
+
   .lg\:flex-initial {
     flex: 0 1 auto;
   }

package/dist/assets/js/alpine.js

@@ -13,6 +13,8 @@ import dropdown from 'components/site_header/dropdown.alpine'
 
 AsyncAlpine.init(Alpine)
     .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
+    .data('appBanner', () => import('components/appBanner/appBanner.alpine.js'))
+    .data('nativeAppBanner', () => import('components/appBanner/nativeAppBanner.alpine.js'))
     .data('slider', () =>
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )

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

@@ -0,0 +1,50 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default function appBanner() {
+    return {
+        showBanner: false,
+        deferredPrompt: null,
+        isAndroid: /Android/i.test(navigator.userAgent),
+        packageId: "de.hr.hessenschau",
+        init: function () {
+
+            if(this.isAndroid){
+                this.showBanner = true;
+            }
+            
+            if(window.IS_STORYBOOK){ this.showBanner = true;}
+        },
+        installClickHandler: function(){
+            this.openPlayStore()
+            this.showBanner = false
+        },
+        closeClickHandler: function(){
+            uxAction('appBanner::bannerClosed');
+            this.showBanner = false
+        },
+        openPlayStore: function() {
+            let fallbackTriggered = false;
+
+            const fallback = () => {
+                if (fallbackTriggered) return;
+                fallbackTriggered = true;
+
+                window.open(`https://play.google.com/store/apps/details?id=${this.packageId}`, "googlePlayStore");
+      
+            };
+
+            document.addEventListener('visibilitychange', () => {
+                if (document.hidden) {
+                // App switch happened → cancel fallback
+                fallbackTriggered = true;
+                }
+            }, { once: true });
+
+            window.location.href =
+                `intent://details?id=${this.packageId}` +
+                `#Intent;scheme=market;package=com.android.vending;end`;
+
+            setTimeout(fallback, 700);
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default function nativeAppBanner() {
+    return {
+        showBanner: false,
+        deferredPrompt: null,
+        isAndroid: /Android/i.test(navigator.userAgent),
+        init: function () {
+            window.addEventListener('beforeinstallprompt', (e) => {
+                // Prevent Chrome 67 and earlier from automatically showing the prompt
+                e.preventDefault();
+                // Stash the event so it can be triggered later.
+                this.deferredPrompt = e;
+                // Update UI notify the user they can add to home screen
+                if(this.isAndroid){
+                    this.showBanner = true;
+                }
+            });
+            if(window.IS_STORYBOOK){ this.showBanner = true;}
+        },
+        installClickHandler: function(){
+            if(this.deferredPrompt){
+                this.deferredPrompt.prompt();
+                // Wait for the user to respond to the prompt
+                this.deferredPrompt.userChoice
+                    .then((choiceResult) => {
+                    if (choiceResult.outcome === 'accepted') {
+                        uxAction('nativeAppBanner::promt::accepted');
+                        console.log('User accepted the A2HS prompt');
+                    } else {
+                        uxAction('nativeAppBanner::promt::dismissed');
+                        console.log('User dismissed the A2HS prompt');
+                    }
+                    this.deferredPrompt = null;
+                    });
+            }
+            this.showBanner = false
+        },
+        closeClickHandler: function(){
+            uxAction('nativeAppBanner::bannerClosed');
+            this.showBanner = false
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+<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">
+    <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")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+

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

@@ -0,0 +1,27 @@
+<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">
+    <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")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+

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

@@ -0,0 +1,27 @@
+<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">
+    <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")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+

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

@@ -0,0 +1,27 @@
+<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">
+    <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")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.124.8",
+  "version": "1.124.10",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/js/alpine.js

@@ -13,6 +13,8 @@ import dropdown from 'components/site_header/dropdown.alpine'
 
 AsyncAlpine.init(Alpine)
     .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
+    .data('appBanner', () => import('components/appBanner/appBanner.alpine.js'))
+    .data('nativeAppBanner', () => import('components/appBanner/nativeAppBanner.alpine.js'))
     .data('slider', () =>
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )

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

@@ -0,0 +1,50 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default function appBanner() {
+    return {
+        showBanner: false,
+        deferredPrompt: null,
+        isAndroid: /Android/i.test(navigator.userAgent),
+        packageId: "de.hr.hessenschau",
+        init: function () {
+
+            if(this.isAndroid){
+                this.showBanner = true;
+            }
+            
+            if(window.IS_STORYBOOK){ this.showBanner = true;}
+        },
+        installClickHandler: function(){
+            this.openPlayStore()
+            this.showBanner = false
+        },
+        closeClickHandler: function(){
+            uxAction('appBanner::bannerClosed');
+            this.showBanner = false
+        },
+        openPlayStore: function() {
+            let fallbackTriggered = false;
+
+            const fallback = () => {
+                if (fallbackTriggered) return;
+                fallbackTriggered = true;
+
+                window.open(`https://play.google.com/store/apps/details?id=${this.packageId}`, "googlePlayStore");
+      
+            };
+
+            document.addEventListener('visibilitychange', () => {
+                if (document.hidden) {
+                // App switch happened → cancel fallback
+                fallbackTriggered = true;
+                }
+            }, { once: true });
+
+            window.location.href =
+                `intent://details?id=${this.packageId}` +
+                `#Intent;scheme=market;package=com.android.vending;end`;
+
+            setTimeout(fallback, 700);
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+<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">
+    <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")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+

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

@@ -0,0 +1,18 @@
+import { ArgTypes, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
+import * as AppBannerStories from './appBanner.stories';
+
+import appBanner from './appBanner.hbs'
+
+<Meta of={AppBannerStories} />
+
+export const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${appBanner}</div>`;
+    return appBanner({ ...args })
+}
+
+# AppBanner
+
+<Canvas withToolbar>
+  <Story of={AppBannerStories.AppBanner} />
+</Canvas>

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

@@ -0,0 +1,44 @@
+import appBanner from './appBanner.hbs'
+import nativeAppBanner from './nativeAppBanner.hbs'
+
+const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${appBanner}</div>`;
+    return appBanner({ ...args })
+}
+const NativeTemplate = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${nativeAppBanner}</div>`;
+    return nativeAppBanner({ ...args })
+}
+export default {
+    title: 'Komponenten/App Banner',
+
+    argTypes: {
+       
+    },
+
+    decorators: [
+        (Story) => {
+            return `${Story()}`
+        },
+    ],
+}
+
+export const AppBanner = {
+    render: Template.bind({}),
+    name: 'AppBanner',
+
+    args: {
+      
+    },
+}
+export const NativeAppBanner = {
+    render: NativeTemplate.bind({}),
+    name: 'NativeAppBanner',
+
+    args: {
+        
+    },
+}
+

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

@@ -0,0 +1,44 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default function nativeAppBanner() {
+    return {
+        showBanner: false,
+        deferredPrompt: null,
+        isAndroid: /Android/i.test(navigator.userAgent),
+        init: function () {
+            window.addEventListener('beforeinstallprompt', (e) => {
+                // Prevent Chrome 67 and earlier from automatically showing the prompt
+                e.preventDefault();
+                // Stash the event so it can be triggered later.
+                this.deferredPrompt = e;
+                // Update UI notify the user they can add to home screen
+                if(this.isAndroid){
+                    this.showBanner = true;
+                }
+            });
+            if(window.IS_STORYBOOK){ this.showBanner = true;}
+        },
+        installClickHandler: function(){
+            if(this.deferredPrompt){
+                this.deferredPrompt.prompt();
+                // Wait for the user to respond to the prompt
+                this.deferredPrompt.userChoice
+                    .then((choiceResult) => {
+                    if (choiceResult.outcome === 'accepted') {
+                        uxAction('nativeAppBanner::promt::accepted');
+                        console.log('User accepted the A2HS prompt');
+                    } else {
+                        uxAction('nativeAppBanner::promt::dismissed');
+                        console.log('User dismissed the A2HS prompt');
+                    }
+                    this.deferredPrompt = null;
+                    });
+            }
+            this.showBanner = false
+        },
+        closeClickHandler: function(){
+            uxAction('nativeAppBanner::bannerClosed');
+            this.showBanner = false
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+<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">
+    <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")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+