hr-design-system-handlebars 0.50.1 → 0.50.2

package/.storybook/main.js

@@ -72,6 +72,18 @@ module.exports = {
                     },
                 ],
                 include: path.resolve(__dirname, '../'),
+            },
+            {
+                test: /\.(png|woff|woff2|eot|ttf|jpg|jpeg|gif|svg)$/,
+                use: [
+                  {
+                    loader: "file-loader",
+                    options: {
+                      name: "[path][name].[ext]",
+                      context: "",
+                    },
+                  },
+                ],
             }
         )
 

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.50.2 (Fri Jul 15 2022)
+
+#### 🐛 Bug Fix
+
+- refactor header.stories.mdx [#276](https://github.com/mumprod/hr-design-system-handlebars/pull/276) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.50.1 (Fri Jul 15 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -596,6 +596,10 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -2417,6 +2421,9 @@ video {
     --color-topline: #c20016;
 }
 /*! purgecss end ignore */
+.sbdocs-content {
+    max-width:1140px !important;
+}
 .hide-scroll-bar {
     -ms-overflow-style: none;
     scrollbar-width: none;

package/dist/views/components/site_header/header_alpine.js

@@ -32,23 +32,25 @@ document.addEventListener('alpine:init', () => {
         init(){
             let lastScrollTop = 0
             let height = window.innerHeight
+
+            //Globale Variable, true = user initiated scroll / false = programmatic scroll via JS (e.g. click on Anchor Link)
             let userScroll = false;
             window.userScroll = userScroll;
 
+            // gets fired when user initated scroll happened, global variable is used in Ticker-Topnews and other anchor links to prevent expanding of the navigation if scrollposition gets corrected by JS. 
             const mouseEvent = () => {
                 userScroll = true;
                 window.userScroll = true;
-                //console.log('user action detected')
             }
-
+            // detect if the user clicked/dragged the scrollbar manually
             const clickedOnScrollbar = mouseX => {
                 return document.documentElement.offsetWidth <= mouseX ? true : false; 
             }
-              
+            // if clicked on scrollbar, fire user initiated mouse event
             const mouseDownHandler = e => {
                 clickedOnScrollbar(e.clientX) ? mouseEvent() : null
             };
-
+            // main scroll handler, defines scroll direction, percent of viewport scrolled, visibility of navigation and subnavigation
             const scrollHandler = () => {
                 let winScroll = document.body.scrollTop || document.documentElement.scrollTop
                 winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
@@ -59,14 +61,19 @@ document.addEventListener('alpine:init', () => {
                 //console.log('winscroll: '+winScroll+' screen height: '+height + '  percent scrolled: '+ this.percent)
                 //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
             }
-
+            // Listeners 
             window.addEventListener('mousedown', mouseDownHandler, false)
             window.addEventListener('wheel', mouseEvent, false);
             window.addEventListener('touchmove', mouseEvent, false)
             window.addEventListener('scroll', this.debounce( scrollHandler,50), { passive: true })
         },
+        //Holds the percentage of scrolled viewport
         percent: 0,
+
+        //defines the scroll direction
         scrollingDown: true,
+
+        //returns true if section navigation is hidden on desktop OR service navigation is hidden on mobile
         isNavHidden() {
             if(this.$screen('lg')) {
                 return this.shouldSectionNavBeHidden()
@@ -74,6 +81,8 @@ document.addEventListener('alpine:init', () => {
                 return this.shouldServiceNavBeHidden()
             }
         },
+
+        //returns false if subnav is visible and true if subnav is hidden
         isSubNavHidden() {
             if(this.$screen('lg')){
                 if (document.querySelector('.isSelectedAndOpen') !== null) {
@@ -85,9 +94,13 @@ document.addEventListener('alpine:init', () => {
                 return true
             }
         },
+
+        // returns true if the user scrolled at least 1px from top
         shouldBrandNavBeHidden() {
             return this.percent > 0
         },
+
+        // returns true if user scrolled >50% and scrolls down, no burger menu is open and the screen size is desktop. If scroll was initiated by script, ignore scroll direction.
         shouldSectionNavBeHidden() {
             if(window.userScroll == true){
                 return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
@@ -96,6 +109,8 @@ document.addEventListener('alpine:init', () => {
             }
 
         },
+
+        // returns true if user scrolled >90% and scrolls further down, no burger menu is open and the screen is NOT desktop. If scroll was initiated by script, ignore scroll direction. 
         shouldServiceNavBeHidden() {
             if(window.userScroll == true) {
                 return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
@@ -103,12 +118,18 @@ document.addEventListener('alpine:init', () => {
                 return (this.percent > 90 && !this.$screen('lg') && this.$store.burgeropen == false)
             }
         },
+
+        //returns true if user scrolled >50% and scrolls further down, no burger menu is open, no serviceNav is open and screen is not larger than mobile. OR: same same, but scrolling up. 
         shouldServiceIconsBeHidden() {
             return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false  && this.scrollingDown == false)
         },
+
+        // returns true if user scrolled >50% and scrolls further down and is a desktop viewport
         shouldFlyoutBeHidden() {
             return (this.percent > 50  && this.scrollingDown && this.$screen('lg') )
         },
+
+        // resets the navigation back to the initial state. Happens f.ex. on resize of window.
         resetNav() {
             if(window.innerWidth > 1023) {
                 this.$refs.sectionnavigation.setAttribute("style","")
@@ -143,6 +164,8 @@ document.addEventListener('alpine:init', () => {
                 this.$store.clientWidth = nowClientWidth
             }
         },
+
+        // toggles the maxHeight of the section nav and makes sure there is enough space to display all items. 
         toggleSectionNav() {
             //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )
             //true = sectionNav öffnet (maxheight = scrollheight)
@@ -168,16 +191,22 @@ document.addEventListener('alpine:init', () => {
                 }
             }
         },
+
+        // no scrolling when overlay is visible
         disableScrolling() {
             document.body.classList.add('overflow-hidden','h-full','w-full')
             this.$refs.myOverlay.ontouchmove = (e) => e.preventDefault();
             console.log("disableScrolling")
         },
+
+        //only scroll when no overlay is visible
         enableScrolling() {
             document.body.classList.remove('overflow-hidden','h-full','w-full')
             this.$refs.myOverlay.ontouchmove = (e) => true;
             console.log("enableScrolling")
         },
+
+        // toggles scrolling ability 
         toggleScrolling(mode){
             if(this.$screen(0) && !this.$screen('lg')){
                 mode == false ? this.disableScrolling() : this.enableScrolling()
@@ -191,9 +220,13 @@ document.addEventListener('alpine:init', () => {
 
     // context for the overlay
     Alpine.data('overlayHandler', () => ({
+
+        // show the overlay on mobile and tablet if burger menu is open OR service nav is open OR search field is open
         shouldOverlayBeShown() {
             return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
         },
+
+        // on click on overlay change global var for servicenav, dispatch events to close burger and service menu, re-enable scrolling. 
         overlayWasClicked() {
             this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
             this.$dispatch('burger-close')
@@ -203,18 +236,28 @@ document.addEventListener('alpine:init', () => {
         }
     }))
 
-    // context for all dropdowns
+    // context for all dropdowns, used in section nav submenus and service nav flyout submenus
     Alpine.data('dropdown', () => ({
+
+        // state of the dropdown
         dropped: false,
+
+        // toggle() interpolates state
         toggle() {
             this.dropped = ! this.dropped;
         },
+
+        // toggles visibility of service nav and sets global variables in stores
         toggleServiceNav(){
             this.dropped = ! this.dropped;
+
+            // close search if open
             this.$store.searchFieldOpen = false;
 
+            // if clicked element is not the current serviceID, leave the servicenav open, else interpolate servicenav state  
             this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
 
+            //if burger is open, dispatch event to close it
             this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
 
             console.log('currentID: '+ this.$store.serviceID.current)
@@ -222,10 +265,13 @@ document.addEventListener('alpine:init', () => {
             console.log('element-id: '+this.$el.id)
             console.log('serviceNav is open:'+ this.$store.serviceNavIsOpen)
 
+            //set the serviceID to the current element´s ID.
             this.$store.serviceID.current = this.$el.id
 
+            //enable/disable scrolling 
             this.toggleScrolling(!this.$store.serviceNavIsOpen)
 
+            //defines behaviour for servicenav on mobile viewports, taking care of viewport sizes
             let myFlyout = document.querySelector('#flyout-'+this.$el.id)
             let brandNavHeight = this.percent > 0 ? 40 : 0
 
@@ -252,8 +298,9 @@ document.addEventListener('alpine:init', () => {
                 this.$el.setAttribute("x-collapse","")
             }
         },
+        
+        //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
         sectionNavFlyoutWatcher() {
-            //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
             this.$watch('dropped', value => {
                 let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
                 let brandNavHeight = this.percent > 0 ? 40 : 0
@@ -278,8 +325,9 @@ document.addEventListener('alpine:init', () => {
 
             })
         },
+
+        //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
         setFlyoutAnimationStyle() {
-            //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
             if(window.innerWidth > 1023) {
                 if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
                     this.$el.removeAttribute("x-collapse.duration.500ms")
@@ -289,7 +337,6 @@ document.addEventListener('alpine:init', () => {
                     if (! this.$el._x_isShown) this.$el.style.display = 'none'
                     if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
                 }
-
             } else {
                 if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
             }

package/package.json

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

package/src/assets/tailwind.css

@@ -353,6 +353,10 @@
 
 /*! purgecss end ignore */
 
+.sbdocs-content {
+    max-width:1140px !important;
+}
+
 .hide-scroll-bar {
     -ms-overflow-style: none;
     scrollbar-width: none;

package/src/stories/views/components/site_header/header.stories.mdx

@@ -1,9 +1,10 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import navigation from './header.hbs'
+import brandnav from './brand_navigation/brand_navigation.hbs'
 import JsonData from './fixtures/site_header_default.json'
 import JsonData2 from './fixtures/site_header_mit_warnung.json'
-import JsonData3 from './fixtures/site_header_mit_submenu.json'
+import JsonData3 from './fixtures/site_header_mit_submenu.json' 
 
 <Meta title="Komponenten/Header/Header" 
     argTypes={{}} 
@@ -12,7 +13,10 @@ import JsonData3 from './fixtures/site_header_mit_submenu.json'
             viewports: [360, 768, 1024],
         },
         layout: 'fullscreen',
-        docs: { inlineStories : false, iframeHeight: 400 }
+        docs: { inlineStories : false, iframeHeight: 200 },
+        viewport: {
+      viewports: INITIAL_VIEWPORTS
+    },
     }}    
     
 />
@@ -25,22 +29,330 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     return navigation({ brand, ...args })
 }
 
+
+
 # Header
 
-Ein toller Einleitungstext für unsere `Header` Komponente:
+[Frameworks](#frameworks) - [Varianten](#varianten) - [Scrollverhalten](#scrollverhalten) - [Templates & Codes](#templates) - [Sub-Komponenten](#subkomponenten)
 
 <Canvas>
-    <Story name="Default" args={JsonData}>
+    <Story name="Default"
+        args={JsonData}
+        parameters={{}}>
         {Template.bind({})}
     </Story>
 </Canvas>
 
+## Beschreibung
+
+Die <b>Header</b>-Komponente ist die Haupt-Navigation der Hessenschau. Sie ist in der Komponente 'Page' eingebunden und besteht grundsätzlich aus 4 Subkomponenten: 
+
+<ul>
+    <li>components/site_header/<b>anchor_navigation</b></li>
+    <li>components/site_header/<b>brand_navigation</b></li>
+    <li>components/site_header/<b>service_navigation</b></li>
+    <li>components/site_header/<b>section_navigation</b></li>
+</ul>
+<br />
+Die Header-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/site_header/header}}    
+```
+
+<a name="frameworks" />
+
+### Frameworks
+
+Die wesentlichen Funktionen und Features der Navigation sind mit dem Javascript-Framework [**Alpine.js**](https://alpinejs.dev/) realisiert. Alpine regelt u.a. die Sichtbarkeit der einzelnen Elemente und ist für die Interaktivität der Navigation zuständig. Alle Codes, die in der Header-Komponente Alpine.js direkt betreffen, sind in der Datei **"header_alpine.js** ausgelagert. Hier finden sich global verwendete dynamische Variablen (via Alpine.store) und zu verwendende Kontexte (via Alpine.data).
+  
+Für das CSS wird das Framework [**TailwindCSS**](https://www.tailwindcss.com) verwendet.
+
+
+
+<a name="varianten" />
+
+### Varianten
+
+Die Navigation ist sticky und responsiv mit drei Breakpoints für Smartphone, Tablet und Desktop. Für diese drei Viewportgrößen gibt es jeweils unterschiedliche Darstellungen der Subkomponenten innerhalb der Navigation. Grundsätzlich kann die Navigation z.B. in der Anzahl der ServiceNavigation-Items und der Sichtbarkeit von Flyouts und/oder Submenus variieren. 
+
+Desktop:
+<img src="/images/navi_default.png" />
+<br />
+
+***
+
+Tablet:
+<img src="/images/navi_tablet.PNG" />
+<br />
+
+***
+
+Mobil:
+<img src="/images/navi_mobil_default.png" />
+<br />
+
+***
+<br />
+
+
+<a name="scrollverhalten" />
+
+### Scrollverhalten
+
+Es gibt 3 Scrollpositionen, die relevant sind: 0%, 50% und 90%. Die Höhe des Viewports wird hierbei als Referenz bzw. 100% angenommen. (Programmatisch wird die Scrollposition in der Variable **"percent"** abgebildet und zur Verarbeitung genutzt) Scrollt man bei ausgeblendeter Navigation die Seite wieder um 1px zurück, wird im Desktop-Viewport die Section-Navigation wieder eingeblendet, im Tablet und Mobil-Viewport kommt je nach Scrollposition die Navigation wieder in den sichtbaren Bereich bzw. die Service-List mit den Service-Icons wird wieder eingeblendet. Die Brand-Navigation wird erst wieder angezeigt, wenn ganz nach oben gescrollt wird. 
+
+| Scrollposition | Viewport | Beschreibung |
+|:---------------|:---------|:-------------|
+|`>0%`| alle Viewports | Brand-Navigation wird ausgeblendet |
+|`>50%`| Desktop | Section-Navigation wird ausgeblendet & Logo verkleinert |
+|| Tablet | Logo wird verkleinert |
+|| Mobil | Logo wird verkleinert & ServiceList wird ausgeblendet  |
+|`>90%`| Desktop | keine weitere Änderung |
+|| Tablet | Navigation verschwindet ganz |
+|| Mobil | Navigation verschwindet ganz |
+
+<br />
+
+**Desktop >0%:**
+<img src="/images/navi_scroll_50percent.png" />
+
+**Desktop >50%:**
+<img src="/images/navi_scroll_90percent.png" />
+<br />
+
+***
+
+**Tablet > 0% / < 50%:**
+<img src="/images/navi_tablet_scroll_1percent.PNG" />
+<br />
+
+**Tablet > 50% / < 90%:**
+<img src="/images/navi_tablet_scroll_50percent.PNG" />
+<br />
+
+***
+
+**Mobil >0% / < 50%:**
+<img src="/images/navi_mobil_scroll_1percent.png" />
+<br />
+
+**Mobil >50% / < 90%:**
+<img src="/images/navi_mobil_scroll_50percent.PNG" />
+<br />
+
+***
+
+
+
+<br />
+<a href="#top">Back to top</a>
+<a name="templates" />
+
+### Template & Codes
+
+Im Haupt-Template **header.hbs** wird für den umschließenden Hauptcontainer mittels der Alpine-Direktive **"x-data"** der Kontext auf das Data-Objekt **"mainNavigationHandler()"** gesetzt und beim erstmaligen Initialisieren die Unter-Funktion **"init()"** aufgerufen. Durch den angegebenen Kontext stehen innerhalb der Navigation nun alle Unterfunktionen von mainNavigationHandler() bereit. Hier finden sich neben der "init()"-Funktion z.B. auch alle Hilfsfunktionen, die zur Ermittlung der Scrollposition bzw. der  Sichtbarkeit der jeweiligen Elemente benötig werden. 
+
+```html
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
+```
+
+Innerhalb von "init()" werden die Listener und deren Handler für das Scrollen via Scrollrad oder Mouse- bzw. Touch-Aktionen definiert:
+
+```javascript
+init(){
+    let lastScrollTop = 0
+    let height = window.innerHeight
+    let userScroll = false;
+    window.userScroll = userScroll;
+
+    const mouseEvent = () => {
+        userScroll = true;
+        window.userScroll = true;
+    }
+    const clickedOnScrollbar = mouseX => {
+        return document.documentElement.offsetWidth <= mouseX ? true : false; 
+    }   
+    const mouseDownHandler = e => {
+        clickedOnScrollbar(e.clientX) ? mouseEvent() : null
+    };
+    const scrollHandler = () => {
+        let winScroll = document.body.scrollTop || document.documentElement.scrollTop
+        winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
+        this.percent = Math.round((winScroll / height) * 100)
+        lastScrollTop = winScroll
+        this.$store.navIsVisible = !this.isNavHidden()
+        this.$store.subNavIsVisible = !this.isSubNavHidden()
+    }
+    window.addEventListener('mousedown', mouseDownHandler, false)
+    window.addEventListener('wheel', mouseEvent, false);
+    window.addEventListener('touchmove', mouseEvent, false)
+    window.addEventListener('scroll', this.debounce( scrollHandler,50), { passive: true })
+}
+```
+
+*Beispielhaft wird hier eine der weiteren Hilfsfunktionen aus dem mainNavigationHandler() erklärt:*
+
+Innerhalb des serviceNavWrappers wird mit Alpine die Function "shouldServiceNavBeHidden()" zum Setzen der korrekten CSS-Klassen via Ternary Expression verwendet: Wenn shouldServiceNavBeHidden() den Wert '_true_' zurückgibt, wird die CSS-Klasse "-mt-40" gesetzt, welche den Wrapper mit einem negativen Margin von -10rem aus dem Viewport schiebt: 
+
+**header.hbs:**
+
+```html
+<div id="serviceNavWrapper" 
+    :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"   
+```
+WENN _percent > 90_ ist, der _Viewport NICHT Desktop_ ist, die _Scrollrichtung nach unten_ ist und es _kein offenes Burger-Menu_ gibt, sendet die Funktion *true* als Rückgabewert zurück. Wenn die Seite _via JS_ (z.B. durch einen Ankerlink) gescrollt wird, verstecke die ServiceNavigation unter den gleichen Bedingungen, aber _unabhängig von der Scrollrichtung_:
+ 
+**header_alpine.js:**
+
+```js
+shouldServiceNavBeHidden() {
+    if(window.userScroll == true) {
+        return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
+    } else {
+        return (this.percent > 90 && !this.$screen('lg') && this.$store.burgeropen == false)
+    }
+}
+``` 
+
+
+***
+
+Weiterhin sind in der Datei **header_alpine.js** weitere Alpine.data-Kontexte für das Overlay, die Dropdown-Menus und die Flyouts hinterlegt. 
+Für die Erklärung können die Kommentare direkt in der Datei herangezogen werden. 
+
+<a href="#top">Back to top</a>
+<br />
+<a name="subkomponenten" />
+
+### Sub-Komponenten
+<br />
+
+<b>Anchor Navigation</b> <br/>
+
+**anchor_navigation.hbs** Inkludiert folgende Subkomponenten:
+
+* featurebox_anchor.hbs
+
+In dieser (nicht sichtbaren) Sub-Komponente werden Anchorlinks zu den Teilbereichen der Navigation bereitgestellt, um sie für Screen-Reader direkt erreichbar zu machen.
+
+**header.hbs:**
+```html
+<div id="anchorNavWrapper" class="hidden">
+    {{> components/site_header/anchor_navigation}}
+</div>
+``` 
+
+<hr/>
+<br/>
+<b>Brand Navigation</b> <br/>
+
+**brand_navigation.hbs** inkludiert folgende Subkomponenten:
+
+* brand_navigation_item
+
+Die Brand-Navigation stellt im obersten Bereich des Headers direkte Links zu den einzelnen Angeboten des HR zur Verfügung. 
+
+```html    
+<div id="brandNavWrapper" class="relative flex items-center justify-center order-1 w-full bg-white z-10000 print:hidden">
+{{> components/site_header/brand_navigation/brand_navigation }} 
+</div>
+```
+
+<hr/>
+<br/>
+<b>Service Navigation</b>
+
+**service_navigation.hbs** inkludiert folgende Subkomponenten:
+
+* service_logo.hbs
+* service_list.hbs
+* service_navigation_item.hbs
+* navigation_flyout.hbs
+* navigation_search.hbs
+* burger.hbs
+<br/>
+
+Die Service-Navigation beinhaltet das Logo **(service_logo.hbs)**, die Service-Items und die Suchfunktion **(navigation_search.hbs)**, sowie bei mobilen Viewports das Burger-Menu **(burger.hbs)**, welches die mobile Variante der **SectionNavigation** darstellt.<br /> 
+Die gesamte ServiceNavigation liegt innerhalb des **"serviceNavWrapper"**. Bei mobilem Viewport wird dieser Wrapper beim Scrollen der Seite mit Hilfe der Funktion **"shouldServiceNavBeHidden()"** ein- bzw. ausgeblendet. 
+
+Innerhalb des Hauptwrappers liegt der **"serviceNavMainContainer"** welcher die serviceNavHeadline, einen Wrapper für das Logo sowie den **"serviceItemsWrapper"** beinhaltet. In diesem wiederum liegt die Service-List **(service_list.hbs)** und die Komponente für die Suchfunktion **(navigation_search.hbs)**. 
+
+**header.hbs:**
+
+```html   
+<div id="serviceNavWrapper" :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
+    class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-10002">   
+        <div id="serviceNavMainContainer" class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
+            <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
+            <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/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/site_header/service_navigation/service_list }}
+                {{> components/site_header/navigation_search/quick_search_button }}
+
+                <div class="hidden lg:flex">
+                    {{> 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/site_header/burger }}    
+                </div>
+            </div>
+        </div>
+</div> 
+```
+
+Innerhalb der Komponente **'service_list'** befinden sich die Service-Navigation-Items. Es existieren derzeit folgende Items: "Warnung", "Video/Podcast", "Verkehr", "Wetter". Das "Warnung"-Item führt direkt zu einer Verlinkten Seite. Ein Click auf die anderen Items öffnet jeweils ein Flyout, in welchem Links zu den Unterseiten des jeweiligen Strukturknotens/Bereichs oder externen Zielen dargstellt sind. 
+Innerhalb der Service-List können mittels der Funktion **"shouldServiceIconsBeHidden()"** je nach Scrollposition die Service-Icons ausgeblendet werden.  
+<br />
+
+<img src="/images/navi_flyout_service.png" />
+<br />
+<br />
+<a href="#top">Back to top</a>
+<br />
+
+***
+<br />
+<b>Section Navigation</b>
+
+**section_navigation.hbs** inkludiert folgende Subkomponenten:
+
+* section_navigation_item.hbs
+* navigation_flyout.hbs
+
+<br/>
+Die Section-Navigation stellt die Links zu den einzelnen Themenbereichen der Hessenschau bereit. Die Navigation-Items der Section Navigation können je nach Einstellung vom CMS direkt zur Themen-Indexseite verlinken oder ihrerseits ein Submenu öffnen, über dessen Einträge dann Themenbereiche angesteuert werden können: 
+<br />
+<br />
+<img src="/images/navi_flyout_section.png" />
+<br/><br/> 
+Bei den Viewports "mobil" und "tablet" wird die Section-Navigation in Form eines Burger-Menus dargstellt:
+<br />
+<br />
+<img src="/images/navi_mobil_burger_open.png" />
+<br/><br/> 
+<hr/>
+<br />
+<a href="#top">Back to top</a>
+
+
+### Header-Komponente mit Warnung-Item in der ServiceList:
+
+Hier ist die Navigation mit zusätzlichem Service-Item zu sehen. 
+
 <Canvas>
     <Story name="Mit Warnung" args={JsonData2}>
         {Template.bind({})}
     </Story>
 </Canvas>
 
+### Header-Komponente mit Subnavigation:
+
+Hier ist die Navigation mit zusätzlicher Subnavigation zu sehen. 
+
 <Canvas>
     <Story name="Mit Subnavigation" args={JsonData3}>
         {Template.bind({})}

package/src/stories/views/components/site_header/header_alpine.js

@@ -32,23 +32,25 @@ document.addEventListener('alpine:init', () => {
         init(){
             let lastScrollTop = 0
             let height = window.innerHeight
+
+            //Globale Variable, true = user initiated scroll / false = programmatic scroll via JS (e.g. click on Anchor Link)
             let userScroll = false;
             window.userScroll = userScroll;
 
+            // gets fired when user initated scroll happened, global variable is used in Ticker-Topnews and other anchor links to prevent expanding of the navigation if scrollposition gets corrected by JS. 
             const mouseEvent = () => {
                 userScroll = true;
                 window.userScroll = true;
-                //console.log('user action detected')
             }
-
+            // detect if the user clicked/dragged the scrollbar manually
             const clickedOnScrollbar = mouseX => {
                 return document.documentElement.offsetWidth <= mouseX ? true : false; 
             }
-              
+            // if clicked on scrollbar, fire user initiated mouse event
             const mouseDownHandler = e => {
                 clickedOnScrollbar(e.clientX) ? mouseEvent() : null
             };
-
+            // main scroll handler, defines scroll direction, percent of viewport scrolled, visibility of navigation and subnavigation
             const scrollHandler = () => {
                 let winScroll = document.body.scrollTop || document.documentElement.scrollTop
                 winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
@@ -59,14 +61,19 @@ document.addEventListener('alpine:init', () => {
                 //console.log('winscroll: '+winScroll+' screen height: '+height + '  percent scrolled: '+ this.percent)
                 //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
             }
-
+            // Listeners 
             window.addEventListener('mousedown', mouseDownHandler, false)
             window.addEventListener('wheel', mouseEvent, false);
             window.addEventListener('touchmove', mouseEvent, false)
             window.addEventListener('scroll', this.debounce( scrollHandler,50), { passive: true })
         },
+        //Holds the percentage of scrolled viewport
         percent: 0,
+
+        //defines the scroll direction
         scrollingDown: true,
+
+        //returns true if section navigation is hidden on desktop OR service navigation is hidden on mobile
         isNavHidden() {
             if(this.$screen('lg')) {
                 return this.shouldSectionNavBeHidden()
@@ -74,6 +81,8 @@ document.addEventListener('alpine:init', () => {
                 return this.shouldServiceNavBeHidden()
             }
         },
+
+        //returns false if subnav is visible and true if subnav is hidden
         isSubNavHidden() {
             if(this.$screen('lg')){
                 if (document.querySelector('.isSelectedAndOpen') !== null) {
@@ -85,9 +94,13 @@ document.addEventListener('alpine:init', () => {
                 return true
             }
         },
+
+        // returns true if the user scrolled at least 1px from top
         shouldBrandNavBeHidden() {
             return this.percent > 0
         },
+
+        // returns true if user scrolled >50% and scrolls down, no burger menu is open and the screen size is desktop. If scroll was initiated by script, ignore scroll direction.
         shouldSectionNavBeHidden() {
             if(window.userScroll == true){
                 return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
@@ -96,6 +109,8 @@ document.addEventListener('alpine:init', () => {
             }
 
         },
+
+        // returns true if user scrolled >90% and scrolls further down, no burger menu is open and the screen is NOT desktop. If scroll was initiated by script, ignore scroll direction. 
         shouldServiceNavBeHidden() {
             if(window.userScroll == true) {
                 return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
@@ -103,12 +118,18 @@ document.addEventListener('alpine:init', () => {
                 return (this.percent > 90 && !this.$screen('lg') && this.$store.burgeropen == false)
             }
         },
+
+        //returns true if user scrolled >50% and scrolls further down, no burger menu is open, no serviceNav is open and screen is not larger than mobile. OR: same same, but scrolling up. 
         shouldServiceIconsBeHidden() {
             return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false  && this.scrollingDown == false)
         },
+
+        // returns true if user scrolled >50% and scrolls further down and is a desktop viewport
         shouldFlyoutBeHidden() {
             return (this.percent > 50  && this.scrollingDown && this.$screen('lg') )
         },
+
+        // resets the navigation back to the initial state. Happens f.ex. on resize of window.
         resetNav() {
             if(window.innerWidth > 1023) {
                 this.$refs.sectionnavigation.setAttribute("style","")
@@ -143,6 +164,8 @@ document.addEventListener('alpine:init', () => {
                 this.$store.clientWidth = nowClientWidth
             }
         },
+
+        // toggles the maxHeight of the section nav and makes sure there is enough space to display all items. 
         toggleSectionNav() {
             //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )
             //true = sectionNav öffnet (maxheight = scrollheight)
@@ -168,16 +191,22 @@ document.addEventListener('alpine:init', () => {
                 }
             }
         },
+
+        // no scrolling when overlay is visible
         disableScrolling() {
             document.body.classList.add('overflow-hidden','h-full','w-full')
             this.$refs.myOverlay.ontouchmove = (e) => e.preventDefault();
             console.log("disableScrolling")
         },
+
+        //only scroll when no overlay is visible
         enableScrolling() {
             document.body.classList.remove('overflow-hidden','h-full','w-full')
             this.$refs.myOverlay.ontouchmove = (e) => true;
             console.log("enableScrolling")
         },
+
+        // toggles scrolling ability 
         toggleScrolling(mode){
             if(this.$screen(0) && !this.$screen('lg')){
                 mode == false ? this.disableScrolling() : this.enableScrolling()
@@ -191,9 +220,13 @@ document.addEventListener('alpine:init', () => {
 
     // context for the overlay
     Alpine.data('overlayHandler', () => ({
+
+        // show the overlay on mobile and tablet if burger menu is open OR service nav is open OR search field is open
         shouldOverlayBeShown() {
             return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
         },
+
+        // on click on overlay change global var for servicenav, dispatch events to close burger and service menu, re-enable scrolling. 
         overlayWasClicked() {
             this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
             this.$dispatch('burger-close')
@@ -203,18 +236,28 @@ document.addEventListener('alpine:init', () => {
         }
     }))
 
-    // context for all dropdowns
+    // context for all dropdowns, used in section nav submenus and service nav flyout submenus
     Alpine.data('dropdown', () => ({
+
+        // state of the dropdown
         dropped: false,
+
+        // toggle() interpolates state
         toggle() {
             this.dropped = ! this.dropped;
         },
+
+        // toggles visibility of service nav and sets global variables in stores
         toggleServiceNav(){
             this.dropped = ! this.dropped;
+
+            // close search if open
             this.$store.searchFieldOpen = false;
 
+            // if clicked element is not the current serviceID, leave the servicenav open, else interpolate servicenav state  
             this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
 
+            //if burger is open, dispatch event to close it
             this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
 
             console.log('currentID: '+ this.$store.serviceID.current)
@@ -222,10 +265,13 @@ document.addEventListener('alpine:init', () => {
             console.log('element-id: '+this.$el.id)
             console.log('serviceNav is open:'+ this.$store.serviceNavIsOpen)
 
+            //set the serviceID to the current element´s ID.
             this.$store.serviceID.current = this.$el.id
 
+            //enable/disable scrolling 
             this.toggleScrolling(!this.$store.serviceNavIsOpen)
 
+            //defines behaviour for servicenav on mobile viewports, taking care of viewport sizes
             let myFlyout = document.querySelector('#flyout-'+this.$el.id)
             let brandNavHeight = this.percent > 0 ? 40 : 0
 
@@ -252,8 +298,9 @@ document.addEventListener('alpine:init', () => {
                 this.$el.setAttribute("x-collapse","")
             }
         },
+        
+        //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
         sectionNavFlyoutWatcher() {
-            //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
             this.$watch('dropped', value => {
                 let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
                 let brandNavHeight = this.percent > 0 ? 40 : 0
@@ -278,8 +325,9 @@ document.addEventListener('alpine:init', () => {
 
             })
         },
+
+        //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
         setFlyoutAnimationStyle() {
-            //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
             if(window.innerWidth > 1023) {
                 if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
                     this.$el.removeAttribute("x-collapse.duration.500ms")
@@ -289,7 +337,6 @@ document.addEventListener('alpine:init', () => {
                     if (! this.$el._x_isShown) this.$el.style.display = 'none'
                     if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
                 }
-
             } else {
                 if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
             }