hr-design-system-handlebars 0.45.1 → 0.47.1

package/.storybook/preview.js

@@ -8,7 +8,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 import Initializer from '../build/webpack/feature-loader/initializer/initializer'
 import loadFeature from '../build/webpack/feature-loader/initializer/loader'
-import 'components/header/header_alpine'
+import 'components/site_header/header_alpine'
 
 function loadDelayedImages(){setTimeout((function(){var t,e=document.images,s=[],a=function(t){void 0!==window.picturefill&&window.picturefill({reevaluate:!0,elements:t})};for(var i=0;i<e.length;++i)(t=e[i].dataset?e[i].dataset.srcset:e[i].getAttribute("data-srcset"))&&(0===e[i].getBoundingClientRect().top?s.push(e[i]):e[i].setAttribute("srcset",t));a(e),setTimeout((function(){var t;for(var i=0;i<s.length;++i)t=s[i].dataset?s[i].dataset.srcset:s[i].getAttribute("data-srcset"),s[i].setAttribute("srcset",t);a(s)}),900)}),0)}
     

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.47.1 (Tue May 24 2022)
+
+#### 🐛 Bug Fix
+
+- add poster-teaser [#235](https://github.com/mumprod/hr-design-system-handlebars/pull/235) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.47.0 (Fri May 20 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1579 [#234](https://github.com/mumprod/hr-design-system-handlebars/pull/234) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.46.0 (Fri May 13 2022)
+
+#### 🚀 Enhancement
+
+- renamed folders header and search to site_header and navigation_search [#233](https://github.com/mumprod/hr-design-system-handlebars/pull/233) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.45.1 (Fri May 13 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1554,6 +1554,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .\!mt-4 {
     margin-top: 1rem !important;
 }
+.ml-2 {
+    margin-left: 0.5rem;
+}
 .-mt-2 {
     margin-top: -0.5rem;
 }
@@ -1566,8 +1569,8 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
-.ml-2 {
-    margin-left: 0.5rem;
+.mb-7 {
+    margin-bottom: 1.75rem;
 }
 .mr-4 {
     margin-right: 1rem;
@@ -1902,6 +1905,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-divide-opacity: 1;
     border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
 }
+.self-end {
+    -ms-flex-item-align: end;
+        align-self: flex-end;
+}
+.self-center {
+    -ms-flex-item-align: center;
+        align-self: center;
+}
 .overflow-hidden {
     overflow: hidden;
 }
@@ -1972,6 +1983,10 @@ Ensure the default browser behavior of the `hidden` attribute.
 .border-r {
     border-right-width: 1px;
 }
+.border-white {
+    --tw-border-opacity: 1;
+    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+}
 .border-gray-200 {
     --tw-border-opacity: 1;
     border-color: rgba(229, 231, 235, var(--tw-border-opacity));
@@ -1980,10 +1995,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-border-opacity: 1;
     border-color: rgba(0, 82, 147, var(--tw-border-opacity));
 }
-.border-white {
-    --tw-border-opacity: 1;
-    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
-}
 .bg-red-200 {
     --tw-bg-opacity: 1;
     background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@@ -2024,17 +2035,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-bg-opacity: 1;
     background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
 }
-.bg-current {
-    background-color: currentColor;
-}
-.bg-blue-congress {
-    --tw-bg-opacity: 1;
-    background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
-}
-.bg-gray-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
-}
 .bg-labelMedia {
     background-color: #006dc1;
     background-color: var(--color-label-media);
@@ -2071,14 +2071,33 @@ Ensure the default browser behavior of the `hidden` attribute.
     background-color: #d34600;
     background-color: var(--color-label-live);
 }
+.bg-current {
+    background-color: currentColor;
+}
+.bg-blue-congress {
+    --tw-bg-opacity: 1;
+    background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
+}
+.bg-gray-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
 .bg-gradient-to-r {
     background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
     background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
+.bg-gradient-to-t {
+    background-image: -webkit-gradient(linear, left bottom, left top, from(var(--tw-gradient-stops)));
+    background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
 .from-purple-50 {
     --tw-gradient-from: #faf5ff;
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 245, 255, 0));
 }
+.from-black {
+    --tw-gradient-from: #000000;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
+}
 .to-purple-100 {
     --tw-gradient-to: #f3e8ff;
 }
@@ -2112,6 +2131,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 2rem;
     padding-bottom: 2rem;
 }
+.px-1\.5 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+}
+.px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+}
 .px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -2124,13 +2151,9 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 }
-.px-1\.5 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-}
-.px-1 {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
 }
 .px-3\.5 {
     padding-left: 0.875rem;
@@ -2144,10 +2167,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
 }
-.px-2 {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-}
 .py-1\.5 {
     padding-top: 0.375rem;
     padding-bottom: 0.375rem;
@@ -2164,15 +2183,15 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 1rem;
     padding-right: 1rem;
 }
+.pt-px {
+    padding-top: 1px;
+}
 .pl-4 {
     padding-left: 1rem;
 }
 .pr-2 {
     padding-right: 0.5rem;
 }
-.pt-px {
-    padding-top: 1px;
-}
 .pt-1 {
     padding-top: 0.25rem;
 }
@@ -2206,6 +2225,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .text-left {
     text-align: left;
 }
+.text-center {
+    text-align: center;
+}
 .align-top {
     vertical-align: top;
 }
@@ -2309,14 +2331,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-text-opacity: 1;
     color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-.text-blue-congress {
-    --tw-text-opacity: 1;
-    color: rgba(0, 82, 147, var(--tw-text-opacity));
-}
 .text-grey-scorpion {
     --tw-text-opacity: 1;
     color: rgba(96, 96, 96, var(--tw-text-opacity));
 }
+.text-blue-congress {
+    --tw-text-opacity: 1;
+    color: rgba(0, 82, 147, var(--tw-text-opacity));
+}
 .text-toplineColor {
     color: #006dc1;
     color: var(--color-topline);
@@ -2543,14 +2565,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-bg-opacity: 1;
     background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
-.hover\:text-white:hover {
-    --tw-text-opacity: 1;
-    color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
 .hover\:text-toplineColor:hover {
     color: #006dc1;
     color: var(--color-topline);
 }
+.hover\:text-white:hover {
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
 .hover\:underline:hover {
     -webkit-text-decoration-line: underline;
             text-decoration-line: underline;

package/dist/views/components/base/image/responsive_image.hbs

@@ -10,12 +10,12 @@
 '_disableNoScript' don't add no script fallback
 
 --}}
-{{#withParam this.responsiveImage _type _variant }}
+{{#withParam this.responsiveImage type variant }}
     {{#if this.asPicture}}
-        <picture class="picture {{~#if ../_addClass}} {{../_addClass}}{{/if}}">
+        <picture class="picture {{~#if ../addClass}} {{../addClass}}{{/if}}">
             {{#unless _disableNoScript}}
                 <noscript>
-                    <img class="image {{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
+                    <img class="image {{~#if ../addClassImg}} {{../addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../alttext}}{{../alttext}}{{else}}{{../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             {{#with this.sources}}
@@ -25,24 +25,24 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="image {{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img class="image {{~#if ../addClassImg}} {{../addClassImg}}{{/if}}" loading="{{#if ../noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../alttext}}{{../alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../errorHandler }} onerror="this.onerror=null; {{../errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
     {{#if this.asImage}}
         {{#with this.sources.[0]}}
-            {{~#with ../../_addClass }}<div class="{{this}}">{{/with}}
-            {{#unless ../../_disableNoScript}}
+            {{~#with ../../addClass }}<div class="{{this}}">{{/with}}
+            {{#unless ../../disableNoScript}}
                 <noscript>
-                    <img class="image {{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
+                    <img class="image {{~#if ../../addClassImg}} {{../../addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../alttext}}{{../../alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
             <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
-                    loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
-                 {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
+                    loading="{{#if ../../noDelay}}auto{{else}}lazy{{/if}}"
+                 {{#with this.srcset}} {{#if ../../../noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="image imageSimple {{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
-            {{~#with ../../_addClass }}</div>{{/with}}
+                alt="{{#if ../../alttext}}{{../../alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="image imageSimple {{~#with ../../addClassImg }} {{this}}{{/with}}" {{~#if ../../errorHandler}} onerror="this.onerror=null; {{../../errorHandler}}" {{~/if}}>
+            {{~#with ../../addClass }}</div>{{/with}}
         {{/with}}
 
     {{/if}}

package/dist/views/components/base/link.hbs

@@ -1,19 +1,19 @@
 {{#with this.link}}
     <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} 
-        class="sb-link {{#if ../_cssClasses}} {{../_cssClasses}}{{/if}}{{#if _doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}"
-        {{#if ../_doNavigationTracking}}
-        data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
+        class="sb-link{{#if ../css}} {{../css}}{{/if}}{{#if ../doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if ../isSelected}} {{defaultIfEmpty ../selectedCssClass "-current"}}{{/if}}"
+        {{#if ../doNavigationTracking}}
+        data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../clickLabelType}}{{#if ../clickLabelPrefix1}}::{{../clickLabelPrefix1}}{{/if}}::{{../clickLabelPrefix2}}-Link geklickt"}]}'
         {{/if}}
-        {{#if ../_doTracking}}
-            {{#with this.content.trackingData}}data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{_clickLabelPrefix1}}::{{_clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
+        {{#if ../doTracking}}
+            {{#with this.content.trackingData}}data-new-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../clickLabelPrefix1}}::{{../../clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
         {{else}}
             {{#if ../this.content.isFileDownload}}
                 {{#with this.content.trackingData}}data-new-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
             {{/if}}
         {{/if}}
         {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
-        {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+        {{#if ../isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
     >
+{{/with}}  
         {{> @partial-block }}     
-    </a>
-{{/with}}  
+    </a>

package/dist/views/components/base/load_dynamic.hbs

@@ -1,6 +1,6 @@
 {{#switch templatePath}}
-    {{#case "components/header/service_navigation/service_navigation_item"}}
-        {{> components/header/service_navigation/service_navigation_item}}
+    {{#case "components/site_header/service_navigation/service_navigation_item"}}
+        {{> components/site_header/service_navigation/service_navigation_item}}
     {{/case}}
     {{#case "components/teaser/group_teaser/group_teaser"}}
         {{> components/teaser/group_teaser/group_teaser}}
@@ -8,4 +8,7 @@
     {{#case "components/teaser/teaser_standard"}}
         {{> components/teaser/teaser_standard}}
     {{/case}}
+    {{#case "components/teaser/components/teaser_comments"}}
+        {{> components/teaser/components/teaser_comments}}
+    {{/case}}
 {{/switch}}

package/dist/views/components/page/page.hbs

@@ -20,7 +20,7 @@
     <body itemscope itemtype="http://schema.org/WebPage">
         <div class="js-pageSwap">
                       
-            {{> components/header/header }}          
+            {{> components/site_header/header }}          
             
             <main 
                 onclick="void(0)" 
@@ -33,27 +33,27 @@
                         {{> components/teaser/teaser_standard }}
                     </div>
                     <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
-                        {{> components/teaser/teaser_standard teasersize="lg"}}
-                        {{> components/teaser/teaser_standard teasersize="lg"}}
+                        {{> components/teaser/teaser_standard teaserSize="50"}}
+                        {{> components/teaser/teaser_standard teaserSize="50"}}
                     </div>
                     <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
-                        {{> components/teaser/teaser_standard teasersize="md"}}
-                        {{> components/teaser/teaser_standard teasersize="md"}}
-                        {{> components/teaser/teaser_standard teasersize="md"}}
+                        {{> components/teaser/teaser_standard teaserSize="33"}}
+                        {{> components/teaser/teaser_standard teaserSize="33"}}
+                        {{> components/teaser/teaser_standard teaserSize="33"}}
                     </div>
                     <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
-                        {{> components/teaser/teaser_standard teasersize="lg"}}
-                        {{> components/teaser/teaser_standard teasersize="lg"}}
+                        {{> components/teaser/teaser_standard teaserSize="50"}}
+                        {{> components/teaser/teaser_standard teaserSize="50"}}
                     </div>               
                     <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
-                        {{> components/teaser/teaser_standard teasersize="sm"}}
-                        {{> components/teaser/teaser_standard teasersize="sm"}}
-                        {{> components/teaser/teaser_standard teasersize="sm"}}
-                        {{> components/teaser/teaser_standard teasersize="sm"}}
+                        {{> components/teaser/teaser_standard teaserSize="25"}}
+                        {{> components/teaser/teaser_standard teaserSize="25"}}
+                        {{> components/teaser/teaser_standard teaserSize="25"}}
+                        {{> components/teaser/teaser_standard teaserSize="25"}}
                     </div>
                     <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
-                        {{> components/teaser/teaser_standard teasersize="lg"}}
-                        {{> components/teaser/teaser_standard teasersize="lg"}}
+                        {{> components/teaser/teaser_standard teaserSize="50"}}
+                        {{> components/teaser/teaser_standard teaserSize="50"}}
                     </div>
                     
                 </div>

package/{src/stories/views/components/header → dist/views/components/site_header}/brand_navigation/brand_navigation.hbs

@@ -21,7 +21,7 @@
             {{#with this.brandNavigationItems}}
                 <ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
                     {{#each this}}
-                        {{> components/header/brand_navigation/brand_navigation_item }}
+                        {{> components/site_header/brand_navigation/brand_navigation_item }}
                     {{/each}} 
                 </ul>
             {{/with}}

package/dist/views/components/{header → site_header}/header.hbs

@@ -9,12 +9,12 @@
             
             <div id="anchorNavWrapper" 
                 class="hidden">
-                {{> components/header/anchor_navigation/anchor_navigation }}
+                {{> components/site_header/anchor_navigation/anchor_navigation }}
             </div>
 
             <div id="brandNavWrapper" 
                 class="relative flex items-center justify-center order-1 w-full bg-white z-101 print:hidden">
-                {{> components/header/brand_navigation/brand_navigation }} 
+                {{> components/site_header/brand_navigation/brand_navigation }} 
             </div>
 
             <div id="serviceNavWrapper" 
@@ -28,22 +28,22 @@
 
                     <div id="serviceLogoWrapper" 
                         class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
-                        {{> components/header/service_logo }}
+                        {{> components/site_header/service_logo }}
                     </div>
                     
                     <div id="serviceItemsWrapper"                
                         class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0 print:hidden ">
-                        {{> components/header/service_navigation/service_list }}
+                        {{> components/site_header/service_navigation/service_list }}
 
-                        {{> components/header/search/quick_search_button }}
+                        {{> components/site_header/navigation_search/quick_search_button }}
 
                         <div class="hidden lg:flex">
-                            {{> components/header/search/quick_search_form }}
+                            {{> components/site_header/navigation_search/quick_search_form }}
                         </div>
                     
                         <div id="burgerWrapper" 
                             class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden "> 
-                            {{> components/header/burger }}    
+                            {{> components/site_header/burger }}    
                         </div>
                         
                     </div>
@@ -56,7 +56,7 @@
                 :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"  
                 class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-100 print:hidden"
             >
-                {{> components/header/section_navigation/section_navigation }}
+                {{> components/site_header/section_navigation/section_navigation }}
             </div>
             
             <div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
@@ -72,7 +72,7 @@
                 x-transition:leave-start="opacity-100 transform scale-y-100" 
                 x-transition:leave-end="opacity-0 transform scale-y-90">
 
-                {{> components/header/search/quick_search_form }}
+                {{> components/site_header/navigation_search/quick_search_form }}
 
             </div>
             

package/{src/stories/views/components/header → dist/views/components/site_header}/navigation_flyout/navigation_flyout.hbs

@@ -1,5 +1,4 @@
 {{#with this.subNavigation}}
-
     <div {{#unless ../this.selected}}x-cloak{{/unless}}
         x-data="flyoutHandler" 
         x-ref="{{getRandom}}"
@@ -44,11 +43,11 @@
         <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
             {{#if this.showAsFlyout}}
                 {{#each this.columns}}
-                    {{> components/header/navigation_flyout/navigation_flyout_column count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}
+                    {{> components/site_header/navigation_flyout/navigation_flyout_column count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}
                 {{/each}}
             {{else}}
                 {{#with this.items}}
-                    {{> components/header/navigation_flyout/navigation_flyout_column selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}
+                    {{> components/site_header/navigation_flyout/navigation_flyout_column selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}
                 {{/with}}
             {{/if}}
         </div>

package/dist/views/components/{header → site_header}/navigation_flyout/navigation_flyout_column.hbs

@@ -1,8 +1,7 @@
 <ul class="{{inline-switch count '["1","2"]' '["md:w-1/1", "md:w-1/1 lg:w-1/2"]'}} {{inline-switch navtype '["ServiceNavigation","RubrikNavigation"]' '["border-b border-gray-200 md:border-0","border-0"]'}} lg:even:pl-4 lg:odd:pr-4 {{#if selected}} lg:container lg:flex lg:h-9 {{/if}} ">
-          
     {{~#each this ~}} 
         {{~#if this.title~}}
-            {{> components/header/navigation_flyout/navigation_flyout_item _parentselected=../selected _fromNav=../navtype _flyout=../_flyout _parent=../_parent ~}}
+            {{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../selected _fromNav=../navtype _flyout=../_flyout _parent=../_parent ~}}
         {{~/if~}}       
     {{~/each~}}
     

package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs

@@ -0,0 +1,7 @@
+<li :class="dropped ? 'h-auto' : 'h-10'"  
+    class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">
+    {{#>components/base/link css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') doNavigationTracking="true" clickLabelType=_fromNav clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}
+        {{this.text}}      
+        {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
+    {{/components/base/link}}  
+</li>

package/dist/views/components/{header → site_header}/section_navigation/section_navigation.hbs

@@ -10,7 +10,7 @@
                 <ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">
                     {{#each this}}   
                         {{#if (isStorybook)}}  
-                            {{> components/header/section_navigation/section_navigation_item }}   
+                            {{> components/site_header/section_navigation/section_navigation_item }}   
                         {{else}}
                             {{{this}}}
                         {{/if}}

package/{src/stories/views/components/header → dist/views/components/site_header}/section_navigation/section_navigation_item.hbs

@@ -94,7 +94,7 @@
 
         {{/if}}
         
-        {{> components/header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}
+        {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}
 
     </li>
 {{/each}}

package/dist/views/components/{header → site_header}/service_navigation/service_list.hbs

@@ -8,7 +8,7 @@
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
             {{#each this}}        
-                {{> components/base/loadSSI templatePath='components/header/service_navigation/service_navigation_item' }}               
+                {{> components/base/loadSSI templatePath='components/site_header/service_navigation/service_navigation_item' }}               
             {{/each}} 
         </ul>
     {{/with}}

package/dist/views/components/{header → site_header}/service_navigation/service_navigation_item.hbs

@@ -50,7 +50,7 @@
                 </div>
             </div>  
         {{#if this.subNavigation}}       
-            {{> components/header/navigation_flyout/navigation_flyout _isSectionNav=false  _navigationType="ServiceNavigation" _parent=this.text }}
+            {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=false  _navigationType="ServiceNavigation" _parent=this.text }}
             </button>
         {{else}}       
             </a>

package/dist/views/components/teaser/components/teaser_byline.hbs

@@ -4,13 +4,13 @@
         {{#with this.teaserInfo}}
             {{#if this.showTeaserInfo~}}
                 {{~#if this.showTeaserInfoDate}}
-                    {{~#with ../teaserDate}}
+                    {{~#with ../this.teaserDate}}
                         <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
                     {{/with~}}                    
                     <span class="mx-px last-of-type:hidden">|</span>                    
                 {{else}}
                     {{~#if this.showTeaserInfoDateTime}}
-                        {{~#with ../teaserDate}}
+                        {{~#with ../this.teaserDate}}
                             <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
                         {{/with~}}                        
                         <span class="mx-px last-of-type:hidden">|</span>                        
@@ -34,6 +34,7 @@
         {{/if}}    
 
     {{!--Comments--}}
-    {{> components/teaser/components/teaser_comments}}
-
+    {{#with this.commentsSsi}}
+        {{> components/base/loadSSI templatePath='components/teaser/components/teaser_comments' }}    
+    {{/with}}
 </p>

package/dist/views/components/teaser/components/teaser_comments.hbs

@@ -1,10 +1,10 @@
 {{#with this.commentLink}}
     <span class="whitespace-nowrap">
-        {{#>components/base/link _cssClasses="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
+        {{#>components/base/link css="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
             <span class="sr-only">{{loca "comment_anchor_1"}}</span>
-            <span class="text-toplineColor">{{this.content.commentNumber}}</span>
-            {{#if this.content.hasOneComment}}
+            <span class="text-toplineColor">{{../../this.commentNumber}}</span>
+            {{#if ../../this.hasOneComment}}
                 <span class="text-toplineColor">{{loca "comment_label_text"}}</span>
             {{else}}
                 <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>