hr-design-system-handlebars 1.124.10 → 1.125.1

package/dist/assets/js/components/external-service/externalServiceDs.feature.js

@@ -29,10 +29,7 @@ const ExternalService = function (context) {
     let embedCode = options.embedCode,
         iframe,
         settingsCookie = new SettingsCookie(),
-        noResponsiveIframe,
-        contentRefresher,
         gemeindewahlergebnis,
-        uniqueId,
         isExternalServiceLoaded = false,
         tiktokOnPage = []
 
@@ -74,61 +71,34 @@ const ExternalService = function (context) {
     }
 
     const insertExternalService = function () {
-        switch (embedType) {
-            case 'js':
-                switch (id) {
-                    case '23degrees':
-                        createTwentyThreeDegreesEmbed()
-                        break
-                    case 'facebook-post':
-                        createFacebookEmbed()
-                        break
-                    case 'instagram':
-                        createInstagramEmbed()
-                        break
-                    case 'tiktok':
-                        createTikTokEmbed()
-                        break
-                    case 'twitter':
-                        createTwitterEmbed()
-                        break
-                    case 'twitter-post':
-                        createTwitterPostEmbed()
-                        break
-                    case 'datawrapper_cdn':
-                        createDataWrapperEmbed()
-                        break
-                    case 'wahlmonitor':
-                        createWahlEmbed()
-                        break
-                    case 'wahlmonitor_v2':
-                        createWahlEmbed()
-                        break
-                    case 'wahlkreiskarte':
-                        createWahlEmbed()
-                        break
-                    case 'wahlkreiskarte_v2':
-                        createWahlEmbed()
-                        break
-                    case 'wahlomat-euwa':
-                        createWahlOMatEuwaEmbed()
-                        break
-                    case 'wahlomat-butawa':
-                        createWahlOMatButawaEmbed()
-                        break
-                    case 'wahl-gemeinde-ergebnis':
-                        createWahlGemeindeErgebnisEmbed()
-                        break
-                    case 'wer-waehlte-wen':
-                        werWaehlteWenEmbed()
-                        break
-                    default:
-                        console.error('No JS Config for external service ' + id)
-                        break
-                }
-                break
-            default:
-                loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
+        if (embedType !== 'js') {
+            loadIframe() // Für alle Dienste, die nicht der DSGVO Datapolicy unterliegen
+            return
+        }
+
+        const externalServiceMap = {
+            '23degrees': createTwentyThreeDegreesEmbed,
+            'facebook-post': createFacebookEmbed,
+            'instagram': createInstagramEmbed,
+            'tiktok': createTikTokEmbed,
+            'twitter': createTwitterEmbed,
+            'twitter-post': createTwitterPostEmbed,
+            'datawrapper_cdn': createDataWrapperEmbed,
+            'wahlmonitor': createWahlEmbed,
+            'wahlmonitor_v2': createWahlEmbed,
+            'wahlkreiskarte': createWahlEmbed,
+            'wahlkreiskarte_v2': createWahlEmbed,
+            'wahlomat-euwa': createWahlOMatEuwaEmbed,
+            'wahlomat-butawa': createWahlOMatButawaEmbed,
+            'wahl-gemeinde-ergebnis': createWahlGemeindeErgebnisEmbed,
+            'wer-waehlte-wen': werWaehlteWenEmbed,
+        }
+
+        const service = externalServiceMap[id]
+        if (service) {
+            service()
+        } else {
+            console.error(`No JS Config for external service ${id}`)
         }
     }
 
@@ -206,14 +176,6 @@ const ExternalService = function (context) {
         })
     }
 
-    const createUniqueID = function () {
-        console.log('Erzeuge einzigartige ID')
-        uniqueId = Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, '')
-            .substring(2, 10)
-    }
-
     const getAspectRatioClass = function () {
         switch (iFrameConfig.aspectRatio) {
             case '16x9':
@@ -237,96 +199,104 @@ const ExternalService = function (context) {
 
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
-        createUniqueID()
-        console.log('UniqueID' + uniqueId)
-        if (iFrameConfig.noResponsiveIframe == 'true') {
+        const uniqueId = createUniqueID()
+        const {
+            isNoResponsiveIframe,
+            isWebcomponent,
+            refreshContent,
+            aspectRatio,
+            fixedHeight,
+            refreshIntervall,
+        } = iFrameConfig
+
+        const addContentRefresher = (isWebcomponent) => {
+            new DataWrapperContentRefresher({
+                rootElement,
+                id: uniqueId,
+                refreshIntervall,
+                isWebcomponent,
+            }).createRefresher()
+        }
+
+        if (isNoResponsiveIframe == 'true') {
             //Klassisches Iframe mit AR-Wrapper oder fester Höhe
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(
-                context,
-                iFrameConfig.aspectRatio,
-                iFrameConfig.fixedHeight,
-                uniqueId,
-                embedCode,
-                lazyLoad
-            )
-            noResponsiveIframe.createNoResponsiveIframe()
-
-            if (iFrameConfig.refreshContent == 'true') {
-                console.log('contentRefresher anfügen')
-                contentRefresher = new DataWrapperContentRefresher(
-                    context,
-                    uniqueId,
-                    iFrameConfig.refreshIntervall,
-                    false
-                )
-                contentRefresher.createRefresher()
+            new DataWrapperNoResponsiveIframe({
+                rootElement: rootElement,
+                aspectRatio: aspectRatio,
+                fixedHeight: fixedHeight,
+                id: uniqueId,
+                embedCode: embedCode,
+                lazyLoad: lazyLoad,
+            }).createNoResponsiveIframe()
+
+            if (refreshContent == 'true') {
+                addContentRefresher(false)
             }
-        } else {
-            if (iFrameConfig.webcomponent == 'true') {
-                // Webcomponent
-                const divTag = document.createElement('div')
-                divTag.id = 'datawrapper-chart-' + uniqueId
-                rootElement.insertBefore(divTag, null)
-                const scriptTag = document.createElement('script')
-                scriptTag.setAttribute('id', 'datawrapper-component-js')
-                scriptTag.setAttribute('type', 'text/javascript')
-                scriptTag.setAttribute('defer', 'defer')
-                scriptTag.setAttribute('src', embedCode + 'embed.js?v=1')
-                scriptTag.setAttribute('charset', 'utf-8')
-                const noScriptTag = document.createElement('noscript')
-                const imageTag = document.createElement('img')
-                imageTag.src = embedCode + 'full.png'
-                imageTag.alt = ''
-                noScriptTag.appendChild(imageTag)
-                divTag.appendChild(scriptTag)
-                divTag.appendChild(noScriptTag)
-
-                if (iFrameConfig.refreshContent == 'true') {
-                    console.log('contentRefresher anfügen')
-                    contentRefresher = new DataWrapperContentRefresher(
-                        context,
-                        uniqueId,
-                        iFrameConfig.refreshIntervall,
-                        true
-                    )
-                    contentRefresher.createRefresher()
-                }
-            } else {
-                //Responsives Iframe
-                var iframe = document.createElement('iframe')
-                //Auflösen nach Tailwind-Klassen //dataWrapper-embed
-                iframe.className = 'w-0 !min-w-full border-0'
-                iframe.setAttribute('webkitallowfullscreen', '')
-                iframe.setAttribute('mozallowfullscreen', '')
-                iframe.setAttribute('allowfullscreen', '')
-                iframe.setAttribute('scrolling', 'no')
-                iframe.setAttribute('frameborder', '0')
-                iframe.src = embedCode
-                iframe.id = 'datawrapper-chart-' + uniqueId
-                if (lazyLoad) {
-                    iframe.loading = 'lazy'
-                }
-                rootElement.insertBefore(iframe, null)
+            return
+        }
 
-                loadScript(
-                    'datawrapper-js',
-                    'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
-                    true
-                )
-                if (iFrameConfig.refreshContent == 'true') {
-                    console.log('contentRefresher anfügen')
-                    contentRefresher = new DataWrapperContentRefresher(
-                        context,
-                        uniqueId,
-                        iFrameConfig.refreshIntervall,
-                        false
-                    )
-                    contentRefresher.createRefresher()
-                }
+        if (isWebcomponent == 'true') {
+            // Webcomponent
+            const divTag = document.createElement('div')
+            divTag.id = `datawrapper-chart-${uniqueId}`
+            rootElement.appendChild(divTag)
+
+            const scriptTag = document.createElement('script')
+            Object.assign(scriptTag, {
+                id: 'datawrapper-component-js',
+                type: 'text/javascript',
+                defer: true,
+                src: `${embedCode}embed.js?v=1`,
+                charset: 'utf-8',
+            })
+
+            const noScriptTag = document.createElement('noscript')
+            const imageTag = document.createElement('img')
+            imageTag.src = `${embedCode}full.png`
+            imageTag.alt = ''
+            noScriptTag.appendChild(imageTag)
+
+            divTag.append(scriptTag, noScriptTag)
+
+            if (refreshContent == 'true') {
+                addContentRefresher(true)
             }
+            return
+        }
+        //Responsives Iframe
+        const iframe = document.createElement('iframe')
+        //Auflösen nach Tailwind-Klassen //dataWrapper-embed
+        iframe.className = 'w-0 !min-w-full border-0'
+        iframe.setAttribute('webkitallowfullscreen', '')
+        iframe.setAttribute('mozallowfullscreen', '')
+        iframe.setAttribute('allowfullscreen', '')
+        iframe.setAttribute('scrolling', 'no')
+        iframe.setAttribute('frameborder', '0')
+        iframe.src = embedCode
+        iframe.id = `datawrapper-chart-${uniqueId}`
+        if (lazyLoad) {
+            iframe.loading = 'lazy'
+        }
+        rootElement.appendChild(iframe)
+
+        loadScript(
+            'datawrapper-js',
+            'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
+            true
+        )
+        if (refreshContent == 'true') {
+            addContentRefresher(false)
         }
     }
 
+    const createUniqueID = function () {
+        console.log('Erzeuge einzigartige ID')
+        return Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, '')
+            .substring(2, 10)
+    }
+
     const createTwentyThreeDegreesEmbed = function () {
         removeDatapolicyBox()
 

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/external-service/external_service_with_datapolicy_check.hbs

@@ -3,7 +3,7 @@
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
              data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
-                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
+                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"isNoResponsiveIframe":"{{{this.setResponsiveIframe}}}","isWebcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
             {{~> components/external-service/components/external_service_data_policy ~}}
         </div>
         {{~> components/external-service/components/external_service_caption ~}}

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/external-service/external_service_with_datapolicy_check.hbs

@@ -3,7 +3,7 @@
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
              data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
-                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
+                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"isNoResponsiveIframe":"{{{this.setResponsiveIframe}}}","isWebcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
             {{~> components/external-service/components/external_service_data_policy ~}}
         </div>
         {{~> components/external-service/components/external_service_caption ~}}

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.124.10",
+  "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")}}"