hr-design-system-handlebars 1.124.9 → 1.125.0

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/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/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/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/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/package.json

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

package/src/assets/js/alpine.js

@@ -14,6 +14,7 @@ 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

@@ -4,38 +4,47 @@ export default function appBanner() {
     return {
         showBanner: false,
         deferredPrompt: null,
+        isAndroid: /Android/i.test(navigator.userAgent),
+        packageId: "de.hr.hessenschau",
         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('installNativeApp::promt::accepted');
-                        console.log('User accepted the A2HS prompt');
-                    } else {
-                        uxAction('installNativeApp::promt::dismissed');
-                        console.log('User dismissed the A2HS prompt');
-                    }
-                    this.deferredPrompt = null;
-                    });
-            }
+            this.openPlayStore()
             this.showBanner = false
         },
         closeClickHandler: function(){
-            uxAction('installNativeApp::bannerClosed');
+            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.mdx

@@ -1,14 +1,14 @@
 import { ArgTypes, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
 import * as AppBannerStories from './appBanner.stories';
 
-import geoTag from './appBanner.hbs'
+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>${geoTag}</div>`;
-    return geoTag({ ...args })
+    // return `<div>${appBanner}</div>`;
+    return appBanner({ ...args })
 }
 
 # AppBanner
@@ -16,4 +16,3 @@ export const Template = ({ ...args }) => {
 <Canvas withToolbar>
   <Story of={AppBannerStories.AppBanner} />
 </Canvas>
-

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

@@ -1,19 +1,21 @@
 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: {
-        _text: {
-            control: 'text',
-            description: 'Beschriftung der Ortsmarke',
-        },
+       
     },
 
     decorators: [
@@ -28,6 +30,15 @@ export const AppBanner = {
     name: 'AppBanner',
 
     args: {
-        _text: 'AppBanner',
+      
     },
 }
+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>
+
+
+
+