hr-design-system-handlebars 1.63.9 → 1.63.11

package/dist/views_static/components/social_sharing/social_sharing_compact.hbs

@@ -40,8 +40,8 @@
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
     class="flex self-center justify-end grow "
-    x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
-    x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
+    x-intersect:leave="sharingIsVisible = false"
+    x-intersect:enter="sharingIsVisible = true"
      
 >
    {{!-- <div class="fixed left-1 top-40">

package/package.json

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

package/src/stories/views/components/banner/header/breadcrumb_wrapper.hbs

@@ -1,5 +1,5 @@
 <div class="grid grid-page print:hidden{{#if _hasContentNav }} order-4{{else}}{{#if _hasBannerImage }} py-2 order-4 [&:has(+.-hideOnMobile)]:order-1 lg:py-0 lg:-mb-9 lg:order-1 lg:pt-3 bg-white lg:bg-transparent{{else}} order-1{{/if}} z-10{{/if}}">
-    <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{#unless _hasBannerImage}} bg-white py-2{{/unless}}{{/if}}">
+    <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-3{{else}}{{#unless _hasBannerImage}} bg-white py-3{{/unless}}{{/if}}">
         {{> @partial-block }}
     </div>
 </div>

package/src/stories/views/components/externalService/dataWrapperContentRefresher.subfeature.js

@@ -1,85 +1,88 @@
         
-const DataWrapperContentRefresher = function (context, uniqueID) {
-        const { element: rootElement } = context
-        let remainingTime
-        let timer
-        let iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+const DataWrapperContentRefresher = function (context, id, refreshIntervall) {
+    const { element: rootElement } = context
+    let remainingTime
+    let timer
+    let uniqueID = id
+    let intervall = refreshIntervall
+    let iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+    
+    const createRefresher = function () {
+        console.log("Refresher bauen")
+        let divCounter = document.createElement('div')
+        let divOverlay = document.createElement('div')
+        let divTextOverlay = document.createElement('div')
+        divOverlay.id = 'overlay' + uniqueID
+        divOverlay.style.position = 'absolute'
+        divOverlay.style.top = '0'
+        divOverlay.style.display = 'none'
+        divOverlay.style.alignItems = 'center'
+        divOverlay.style.justifyContent = 'center'
+        divOverlay.style.backgroundColor = '#fff'
+        divOverlay.style.width = '100%'
+        divOverlay.style.height = 'calc(100% - 36px)'
+        divOverlay.style.backgroundColor = '#d8e9f6'
+        divTextOverlay.innerHTML = 'Lade Inhalt neu...'
+        divTextOverlay.style.backgroundColor = '#005293'
+        divTextOverlay.style.padding = '8px'
+        divTextOverlay.style.color = '#fff'
+        divTextOverlay.style.fontWeight = '800'
+        divTextOverlay.style.fontFamily = 'RobotoSlab'
+        divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
+        divOverlay.appendChild(divTextOverlay)
+        divCounter.id = 'counter' + uniqueID
+        divCounter.style.backgroundColor = '#006dc1'
+        divCounter.style.color = '#fff'
+        divCounter.style.fontSize = '12px'
+        divCounter.style.padding = '8px'
+        divCounter.style.borderRadius = '0 0 4px 4px'
         
-        const createRefresher = function (uniqueID) {
-            let divCounter = document.createElement('div')
-            let divOverlay = document.createElement('div')
-            let divTextOverlay = document.createElement('div')
-            divOverlay.id = 'overlay' + uniqueID
-            divOverlay.style.position = 'absolute'
-            divOverlay.style.top = '0'
-            divOverlay.style.display = 'none'
-            divOverlay.style.alignItems = 'center'
-            divOverlay.style.justifyContent = 'center'
-            divOverlay.style.backgroundColor = '#fff'
-            divOverlay.style.width = '100%'
-            divOverlay.style.height = 'calc(100% - 36px)'
-            divOverlay.style.backgroundColor = '#d8e9f6'
-            divTextOverlay.innerHTML = 'Lade Inhalt neu...'
-            divTextOverlay.style.backgroundColor = '#005293'
-            divTextOverlay.style.padding = '8px'
-            divTextOverlay.style.color = '#fff'
-            divTextOverlay.style.fontWeight = '800'
-            divTextOverlay.style.fontFamily = 'RobotoSlab'
-            divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
-            divOverlay.appendChild(divTextOverlay)
-            divCounter.id = 'counter' + uniqueID
-            divCounter.style.backgroundColor = '#006dc1'
-            divCounter.style.color = '#fff'
-            divCounter.style.fontSize = '12px'
-            divCounter.style.padding = '8px'
-            divCounter.style.borderRadius = '0 0 4px 4px'
-            
-            rootElement.style.position = 'relative'
-            rootElement.appendChild(divCounter)
-            rootElement.appendChild(divOverlay)
-            startCountdown()
-        }
+        rootElement.style.position = 'relative'
+        rootElement.appendChild(divCounter)
+        rootElement.appendChild(divOverlay)
+        startCountdown()
+    }
 
-        const refreshIframe = function () {
-            console.log('Reload')
-            iframeRefresh.style.opacity = '0'
-            iframeRefresh.src =
-                iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
-            clearInterval(timer)
-        }
-        const startCountdown = function () {
-            remainingTime = Number(iFrameConfig.refreshIntervall)
-            setTimeout(function () {
-                iframeRefresh.style.opacity = '1'
-                document.getElementById('overlay' + uniqueID).style.display = 'none'
-            }, 1000)
-            timer = setInterval(function () {
-                checkTimer()
-            }, 1000)
-        }
-        const checkTimer = function () {
-            if (remainingTime >= 0) {
+    const refreshIframe = function () {
+        console.log('Reload')
+        iframeRefresh.style.opacity = '0'
+        iframeRefresh.src =
+            iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
+        clearInterval(timer)
+    }
+    const startCountdown = function () {
+        remainingTime = Number(intervall)
+        setTimeout(function () {
+            iframeRefresh.style.opacity = '1'
+            document.getElementById('overlay' + uniqueID).style.display = 'none'
+        }, 1000)
+        timer = setInterval(function () {
+            checkTimer()
+        }, 1000)
+    }
+    const checkTimer = function () {
+        if (remainingTime >= 0) {
+            document.getElementById('counter' + uniqueID).innerHTML =
+                'Dieser Inhalt wird automatisch aktualisiert in ' +
+                secondsToTimeString(remainingTime) +
+                ' Min.'
+            remainingTime -= 1
+            if (remainingTime == -1) {
+                document.getElementById('overlay' + uniqueID).style.display = 'flex'
                 document.getElementById('counter' + uniqueID).innerHTML =
-                    'Dieser Inhalt wird automatisch aktualisiert in ' +
-                    secondsToTimeString(remainingTime) +
-                    ' Min.'
-                remainingTime -= 1
-                if (remainingTime == -1) {
-                    document.getElementById('overlay' + uniqueID).style.display = 'flex'
-                    document.getElementById('counter' + uniqueID).innerHTML =
-                        'Zeitintervall wird neu gestartet...'
-                }
-            } else {
-                refreshIframe()
-                startCountdown()
+                    'Zeitintervall wird neu gestartet...'
             }
+        } else {
+            refreshIframe()
+            startCountdown()
         }
-        const secondsToTimeString = function (seconds) {
-            return new Date(seconds * 1000).toISOString().substr(14, 5)
-        }
-        return {
-            createRefresher: createRefresher
-        }
     }
+    const secondsToTimeString = function (seconds) {
+        return new Date(seconds * 1000).toISOString().substr(14, 5)
+    }
+    return {
+        createRefresher: createRefresher
+    }
+}
 
-    export default DataWrapperContentRefresher            
+export default DataWrapperContentRefresher            

package/src/stories/views/components/externalService/dataWrapperNoResponsiveIframe.subfeature.js

@@ -1,28 +1,62 @@
-const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, comfigEmbedCode) {
+const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, embedCode) {
     
     const { element: rootElement } = context
     let aspectRatio = configAR
     let fixedHeight = configFixedHeight
-    let embedCode = comfigEmbedCode
 
-    const createNoResponsiveIframe = function (aspectRatioClass) {
+    const createNoResponsiveIframe = function () {
 
    
     var parentDiv = document.createElement('div')
-    parentDiv.className = 'copytext__scrollWrapper'
+    //Auflösen nach Tailwind-Klassen //copytext__scrollWrapper
+    parentDiv.className = '!h-full'
     var div = document.createElement('div')
     //Keine Aspect-Ratio ausgewählt aber eine feste Höhe
+    
+    console.log(aspectRatio)
+    console.log(configAR)
     if (aspectRatio === undefined) {
-            div.className = 'noaspect_datawrapper_cdn'
+            //Auflösen nach Tailwind-Klassen //noaspect_datawrapper_cdn
+            div.className = 'relative overflow-hidden w-0 border-0 !min-w-full'
             div.style.height = fixedHeight + 'px'
             div.style.width = '100%'
     } 
     // Aspect-Ratio ausgewählt
     else {
-            div.className = aspectRatioClass + ' datawrapper_cdn'
+        //ar-- in Tailwind-Klassen
+        let tailwindCSS
+        switch(aspectRatio){
+            case '100':
+                tailwindCSS = "ar-1-1" 
+            break;
+            case '16x9':
+                tailwindCSS = "ar-16-9" 
+            break;
+            case '9x16':
+                tailwindCSS = "ar-9-16"
+            break;
+            case '16x7':
+                tailwindCSS = "ar-16-7"
+            break;
+            case '7x16':
+                tailwindCSS = "ar-7-16"
+            break;
+            case '4x3':
+                tailwindCSS = "ar-4-3"
+            break;
+            case '100x27':
+                tailwindCSS = "ar-100-27"
+            break;
+            default:
+                tailwindCSS = "ar-16-9"
+          }
+          
+            div.className = tailwindCSS + " w-full sm480:h-full h-[560px]"
     }
     var iframe = document.createElement('iframe')
-    iframe.className = 'w-full h-full datawrapper_cdn'
+
+    //Auflösen nach Tailwind-Klassen //ar_iframe datawrapper_cdn
+    iframe.setAttribute('class', 'border-0 top-0 left-0 w-full h-full overflow-y-hidden')
     iframe.setAttribute('id', 'i_frame')
     iframe.setAttribute('data-isloaded', '0')
     iframe.setAttribute('webkitallowfullscreen', '')

package/src/stories/views/components/externalService/externalServiceDs.feature.js

@@ -23,19 +23,24 @@ const ExternalService = function (context) {
         embedType = options.embedType,
         dataPolicyCheck = options.dataPolicyCheck || false,
         id = options.id,
-        iFrameConfig = options.iFrameConfig,
-        isWebview = window.parent.document.documentElement.classList.contains('webview'),
-        button = hr$('.js-dataPolicyTeaser__button', rootElement)[0]
-
+        iFrameConfig = options.iFrameConfig
     let acceptButton,
         acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0],
-        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0],
-        embedCode = options.embedCode,
+        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0]
+    let embedCode = options.embedCode,
         iframe,
         settingsCookie,
-        isExternalServiceLoaded = false
-
+        noResponsiveIframe,
+        contentRefresher,
+        uniqueId,
+        isExternalServiceLoaded = false,
+        isWebview = window.parent.document.documentElement.classList.contains('webview')
 
+    const testDOMElements = function () {
+        console.log(rootElement)
+        console.log(rootParent)
+        console.log(acceptAlwaysCheckbox)
+    }
     const embedExternalService = function (callback) {
         $.ajax({
             type: 'GET',
@@ -101,7 +106,7 @@ const ExternalService = function (context) {
                 }
                 break
             default:
-                loadIframe()
+                loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
         }
     }
 
@@ -123,34 +128,49 @@ const ExternalService = function (context) {
         script.type = 'text/javascript'
         rootElement.appendChild(script)
     }
+    const createUniqueID = function() {
+       uniqueId = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(2, 10)
+    }
+
+    const getAspectRatioClass = function () {
+        switch (iFrameConfig.aspectRatio) {
+            case '16x9':
+                return "ar-16-9"
+            case '16x7':
+                return "ar-16-7"
+            case '4x3':
+                return "ar-4-3"
+            case '100x27':
+                return "ar-100-27"
+            case '100':
+                return "ar-1-1"                
+            case '9x16':
+                return "ar-9-16"
+            case '7x16':
+                return "ar-7-16"
+            default:
+                return "ar-16-9"
+        }   
+    }
 
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
-        var uniqueID = function () {
-            return Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, '')
-            .substring(2, 10)
-        }
-        let contentRefresher = new DataWrapperContentRefresher(context, uniqueID)
-        let noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
-
+        createUniqueID()
         if (iFrameConfig.noResponsiveIframe == 'true') {
-            noResponsiveIframe.createNoResponsiveIframe(getAspectRatioClass())
+            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
+            noResponsiveIframe.createNoResponsiveIframe()
         } 
         else {
             var iframe = document.createElement('iframe')
-            iframe.className = 'dataWrapper-embed'
-            iframe.style.width = '0'
-            iframe.style.minWidth = '100% !important'
-            iframe.style.border = 'none'
+              //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
+            iframe.id = 'datawrapper-chart-' + uniqueId
             rootElement.insertBefore(iframe, null)
 
             loadScript(
@@ -159,6 +179,8 @@ const ExternalService = function (context) {
                 true
             )
             if (iFrameConfig.refreshContent == 'true') {
+                console.log("contentRefresher anfügen")
+                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
                 contentRefresher.createRefresher()
             }
         }
@@ -251,64 +273,39 @@ const ExternalService = function (context) {
         }, 250)
     }
 
-    const getAspectRatioClass = function () {
-        switch (iFrameConfig.aspectRatio) {
-            case '16x9':
-                return "ar-16-9"
-            case '16x7':
-                return "ar-16-7"
-            case '4x3':
-                return "ar-4-3"
-            case '100x27':
-                return "ar-100-27"
-            case '100':
-                return "ar-1-1"                
-            case '9x16':
-                return "ar-9-16"
-            case '7x16':
-                return "ar-7-16"
-            default:
-                return "ar-16-9"
-        }   
-    }
-
     const loadIframe = function () {
         console.log('load iframe ' + id)
         iframe =
             "<iframe id='i_frame' data-isloaded='0' src='" +
             embedCode +
-            "' frameborder='0' class='" +
-            iFrameConfig.heightClass +
-            "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
+            "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
         if (iFrameConfig.aspectRatio) {
             iframe =
-                "<div class='copytext__scrollWrapper'><div class='" +
+                "<div class='!h-full'><div class=" +
                 getAspectRatioClass() +
                 ' ' +
                 id +
                 "'><iframe id='i_frame' data-isloaded='0' src='" +
                 embedCode +
-                "' frameborder='0' class='w-full h-full " +
-                iFrameConfig.heightClass +
-                ' ' +
+                "' frameborder='0' class='w-full h-full '" +
                 id +
                 "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
             //TODO Weiche Animation der Inhalte
         } else {
             if (iFrameConfig.fixedHeight) {
                 iframe =
-                    "<div class='copytext__scrollWrapper -fixedHeight' style='height:" +
+                    "<div class='!h-full' style='height:" +
                     iFrameConfig.fixedHeight +
-                    "px'><iframe data-isloaded='0' class='w-full h-full' src='" +
+                    "px'><iframe data-isloaded='0' src='" +
                     embedCode +
-                    "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
                 iframe =
-                    "<div class='copytext__scrollWrapper " +
+                    "<div class='!h-full " +
                     id +
-                    "'><iframe data-isloaded='0' class='w-full h-full' src='" +
+                    "'><iframe data-isloaded='0' src='" +
                     embedCode +
-                    "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
         }
 
@@ -414,6 +411,7 @@ const ExternalService = function (context) {
     }
     initDataPolicy()
     resetCheckboxForPermanentService()
+    testDOMElements()
     if (isWebview) {
         /*Für die App werden Cookie-Daten des neuen Cookies wieder mit dem alten Cookie synchronisiert */
         syncAppOptionsToSettingsCookie()

package/src/stories/views/components/externalService/external_service.mdx

@@ -24,4 +24,23 @@ Die interaktiven Elemente sind:
 <li> einen Aktions-Button, der den Inhalt einmalig, bis zum nächsten Refresh oder erneuten Besuch der Seite anzeigt.</li>
 </ul>
 
-<Story of={ExternalServiceStories.ExterneDienste} />
+
+## Beispiel Dienst Giphy
+<Story of={ExternalServiceStories.ExterneDiensteGiphy} />
+
+## Beispiel Dienst Datawrapper mit responsivem Iframe
+Der Datawrapper wird standardmässig mit einem responsiven Iframe geladen, d.h. das der Inhalt des Iframes - die Datengrafik - an den äußeren Container skaliert wird.
+
+<Story of={ExternalServiceStories.ExterneDiensteDatawrapper} />
+
+## Beispiel Dienst Datawrapper ohne responsives Iframe und fester Höhe
+Ist die Konfiguration "NoResponsiveIFrame" auf TRUE gesetzt werden die Felder für "FixedHeight" und "AspectRatio" ausgelesen. Ist das Feld FixedHeight befüllt, wird der Wert daraus übernommen
+<Story of={ExternalServiceStories.ExterneDiensteDatawrapperNoResponsiveFixedHeight} />
+
+## Beispiel Dienst Datawrapper ohne responsives Iframe und AspectRatio
+Ist die Konfiguration "NoResponsiveIFrame" auf TRUE gesetzt werden die Felder für "FixedHeight" und "AspectRatio" ausgelesen. Ist das Feld AspectRatio ausgewählt wird der Wert daraus übernommen
+<Story of={ExternalServiceStories.ExterneDiensteDatawrapperNoResponsiveAspectRatio} />
+
+
+## Beispiel Dienst Datawrapper mit ContentRefresher
+<Story of={ExternalServiceStories.ExterneDiensteDatawrapperContentRefresher} />

package/src/stories/views/components/externalService/external_service.stories.js

@@ -23,8 +23,29 @@ export default {
     },
 }
 
-export const ExterneDienste = {
+export const ExterneDiensteGiphy = {
     render: TemplatePageExternalService.bind({}),
-    name: 'Externe Dienste',
-    args: ExternalServiceContent, 
-}
+    name: 'Externe Dienste Giphy',
+    args: ExternalServiceContent.Giphy, 
+}
+export const ExterneDiensteDatawrapper = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Datawrapper MIT Responsivem Iframe',
+    args: ExternalServiceContent.Datawrapper_CDN, 
+}
+export const ExterneDiensteDatawrapperNoResponsiveFixedHeight = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Feste Höhe)',
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeight, 
+}
+export const ExterneDiensteDatawrapperNoResponsiveAspectRatio = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Aspect Ratio)',
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveAspectRatio, 
+}
+export const ExterneDiensteDatawrapperContentRefresher = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Datawrapper mit ContentRefresher',
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeightReload, 
+}
+

package/src/stories/views/components/page/base/page_header.hbs

@@ -1,4 +1,4 @@
-<header class="mt-6 sm480:mt12">
+<header class="mt-6 sm480:mt-8">
     <h2>
         {{#if this.label }}
             {{#with this.label}}
@@ -8,9 +8,9 @@
             {{/with}}         
         {{else}}   
             {{~#if topline}}
-                <span class="block text-base font-heading">{{this.topline}}</span>
+                <span class="block text-base sm480:text-xl font-heading">{{this.topline}}</span>
             {{/if~}}
         {{/if~}}
-        <span class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</span>
+        <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
     </h2>
 </header>

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

@@ -1,5 +1,5 @@
-<div class="clear-both mt-3 border-y border-gray-scorpion">
-    <div class="flex clear-both w-full my-2 sm:my-4">
+<div class="clear-both mt-5 border-y border-gray-scorpion">
+    <div class="flex clear-both w-full my-4 sm:my-4">
         <div class="self-center">
             {{> components/page/components/author _hideFrom=false }}
 

package/src/stories/views/components/page/index/page.data.js

@@ -7,6 +7,7 @@ import NavigationData4 from '../../site_header/fixtures/site_header_mit_top_topi
 import hero_teaser from '../../teaser/fixtures/teaser_standard_hero_serif.json'
 
 import data_story from '../story/fixtures/story.json'
+import data_breadcrumb from '../../navigation/breadcrumb/fixtures/breadcrumb_5_level.json'
 
 const NavigationDataWithTeaser = structuredClone(
     Object.assign({}, NavigationData, hero_teaser.logicItem.includeModel)
@@ -23,4 +24,5 @@ const NavigationDataWithTeaser4 = structuredClone(
 const NavigationDataWithTeaser5 = structuredClone(
     Object.assign({}, NavigationData, data_story)
 )
-export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3, NavigationDataWithTeaser4,NavigationDataWithTeaser5  }
+const NavigationDataWithBreadcrumb = structuredClone(Object.assign({}, NavigationDataWithTeaser5, data_breadcrumb))
+export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3, NavigationDataWithTeaser4,NavigationDataWithBreadcrumb  }

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

@@ -7,7 +7,7 @@ import {
     NavigationDataWithTeaser2,
     NavigationDataWithTeaser3,
     NavigationDataWithTeaser4,
-    NavigationDataWithTeaser5
+    NavigationDataWithBreadcrumb
 } from './page.data.js'
 
 import { NavigationDataWithMixedContent } from '../../pagination/page_pagination.data.js'
@@ -84,5 +84,5 @@ export const MitTopTopics = {
 export const MitArtikel = {
     render: Template3.bind({}),
     name: 'Mit Artikel',
-    args: NavigationDataWithTeaser5,
+    args: NavigationDataWithBreadcrumb,
 }

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

@@ -19,6 +19,15 @@
 
     <body itemscope itemtype="http://schema.org/WebPage">
     {{> components/site_header/header }}
+    {{#unless _webview}}
+        
+            {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=this.structureNav.contentNav
+                                                                _hasBannerImage=this.hasBannerImage}}
+                {{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
+            {{/components/banner/header/breadcrumb_wrapper }}
+       
+    {{/unless}}
+
         <div class="js-pageSwap">
             <main 
                 onclick="void(0)" 

package/src/stories/views/components/social_sharing/social_sharing_compact.hbs

@@ -40,8 +40,8 @@
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
     class="flex self-center justify-end grow "
-    x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
-    x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
+    x-intersect:leave="sharingIsVisible = false"
+    x-intersect:enter="sharingIsVisible = true"
      
 >
    {{!-- <div class="fixed left-1 top-40">