hr-design-system-handlebars 1.63.9 → 1.63.11

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.63.11 (Fri Apr 12 2024)
+
+#### 🐛 Bug Fix
+
+- Bugfix/dpe 3007 [#904](https://github.com/mumprod/hr-design-system-handlebars/pull/904) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v1.63.10 (Fri Apr 12 2024)
+
+#### 🐛 Bug Fix
+
+- Several fixes for Javascript and Iframe Styles [#899](https://github.com/mumprod/hr-design-system-handlebars/pull/899) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.63.9 (Thu Apr 11 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1536,6 +1536,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
+.\!h-full {
+  height: 100% !important;
+}
 .h-0 {
   height: 0px;
 }
@@ -1593,6 +1596,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .h-\[500rem\] {
   height: 500rem;
 }
+.h-\[560px\] {
+  height: 560px;
+}
 .h-\[9px\] {
   height: 9px;
 }
@@ -1719,6 +1725,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .w-screen {
   width: 100vw;
 }
+.\!min-w-full {
+  min-width: 100% !important;
+}
 .min-w-0 {
   min-width: 0px;
 }
@@ -3324,7 +3333,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1712858412306;
+  counter-reset: cnt1712926533101;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3703,7 +3712,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1712858412306 1;
+  counter-increment: cnt1712926533101 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3719,7 +3728,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1712858412306);
+  content: counter(cnt1712926533101);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5527,6 +5536,10 @@ article.indexTextDS .indexTextHighlighted .link {
     margin-top: 1.75rem;
   }
 
+  .sm480\:mt-8 {
+    margin-top: 2rem;
+  }
+
   .sm480\:h-5 {
     height: 1.25rem;
   }
@@ -5535,6 +5548,10 @@ article.indexTextDS .indexTextHighlighted .link {
     height: 2rem;
   }
 
+  .sm480\:h-full {
+    height: 100%;
+  }
+
   .sm480\:w-2\/3 {
     width: 66.666667%;
   }
@@ -5569,6 +5586,11 @@ article.indexTextDS .indexTextHighlighted .link {
     line-height: 2rem;
   }
 
+  .sm480\:text-4xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
   .sm480\:text-5xl {
     font-size: 2.125rem;
     line-height: 2.375rem;

package/dist/assets/js/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/dist/assets/js/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/dist/assets/js/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/dist/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/dist/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/dist/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/dist/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/dist/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">

package/dist/views_static/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/dist/views_static/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/dist/views_static/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/dist/views_static/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)"