npm - hr-design-system-handlebars - Versions diffs - 0.44.2 → 0.45.0 - Mend

hr-design-system-handlebars 0.44.2 → 0.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

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

@@ -20,7 +20,7 @@
     <body itemscope itemtype="http://schema.org/WebPage">
         <div class="js-pageSwap">
-            {{> components/Header/Header }}
+            {{> components/header/header }}
             <main
                 onclick="void(0)"

package/dist/views/components/teaser/components/teaser_heading.hbs CHANGED Viewed

@@ -4,10 +4,10 @@
             {{> components/label/label type=loca text=type}}
         </div>
     {{/with~}}
-    <{{~ ../headlineTag }} class="{{../class}}" >
+    <{{~ ../headlineTag ~}}>
         {{#with this.content.topline}}
             {{> components/teaser/components/teaser_topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
         {{/with}}
         {{> components/teaser/components/teaser_title text=../this.title font=../font size=../size }}
-    </{{~ ../headlineTag }}>
+    </{{~ ../headlineTag ~}}>
 {{/components/base/link}}

package/dist/views/components/teaser/teaser_alternativ.hbs CHANGED Viewed

@@ -6,7 +6,7 @@
     </figure>
     <div class="{{inline-switch teasersize '["sm", "xxl"]' '["basis-3/5 md:flex-full" , "basis-2/5"]'}} ">
         <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
+            {{> components/teaser/components/teaser_heading headlineTag="h2" size=teasersize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]')}}
         </header>
         <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
             {{> components/teaser/components/teaser_text text=shorttext size=teasersize }}

package/dist/views/components/teaser/teaser_standard.hbs CHANGED Viewed

@@ -6,7 +6,7 @@
     </figure>
     <div class="{{inline-switch teasersize '["sm"]' '["basis-3/5 md:flex-full"]'}} ">
         <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
+            {{> components/teaser/components/teaser_heading headlineTag="h2" size=teasersize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}
         </header>
         <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
             {{> components/teaser/components/teaser_text text=shorttext size=teasersize }}

package/package.json CHANGED Viewed

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

package/src/assets/fixtures/teaser/teasers.inc.json CHANGED Viewed

@@ -7,7 +7,7 @@
                 "byline": "Byline",
                 "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
                 "topline": "Überglücklich, aber ohne Mama",
-                "serifHeading": true,
+                "isSerifHeading": true,
                 "extendedTitle": "",
                 "teasertype": "standard",
                 "teasersize": "xxl",
@@ -112,7 +112,7 @@
                 "byline": "Byline",
                 "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
                 "topline": "Überglücklich, aber ohne Mama",
-                "serifHeading": true,
+                "isSerifHeading": true,
                 "extendedTitle": "",
                 "teasertype": "standard",
                 "teasersize": "xxl",

package/src/stories/views/components/base/load_dynamic.hbs CHANGED Viewed

@@ -1,6 +1,6 @@
 {{#switch templatePath}}
-    {{#case "components/Header/ServiceNavigation/ServiceNavigationItem"}}
-        {{> components/Header/ServiceNavigation/ServiceNavigationItem}}
+    {{#case "components/header/service_navigation/service_navigation_item"}}
+        {{> components/header/service_navigation/service_navigation_item}}
     {{/case}}
     {{#case "components/teaser/group_teaser/group_teaser"}}
         {{> components/teaser/group_teaser/group_teaser}}

package/src/stories/views/components/{Header/AnchorNavigation/AnchorNavigation.hbs → header/anchor_navigation/anchor_navigation.hbs} RENAMED Viewed

File without changes

package/src/stories/views/components/{Header/AnchorNavigation/FeatureBoxAnchor.hbs → header/anchor_navigation/featurebox_anchor.hbs} RENAMED Viewed

File without changes

package/src/stories/views/components/{Header → header}/brandNavigationData.json RENAMED Viewed

File without changes

package/{dist/views/components/Header/BrandNavigation/BrandNavigation.hbs → src/stories/views/components/header/brand_navigation/brand_navigation.hbs} RENAMED Viewed

@@ -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/BrandNavigation/BrandNavigationItem }}
+                        {{> components/header/brand_navigation/brand_navigation_item }}
                     {{/each}}
                 </ul>
             {{/with}}

package/src/stories/views/components/{Header/BrandNavigation/BrandNavigation.stories.mdx → header/brand_navigation/brand_navigation.stories.mdx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import menu from './BrandNavigation.hbs'
+import menu from './brand_navigation.hbs'
 import JsonData from '../brandNavigationData.json'

package/src/stories/views/components/{Header/BrandNavigation/BrandNavigationItem.hbs → header/brand_navigation/brand_navigation_item.hbs} RENAMED Viewed

File without changes

package/src/stories/views/components/{Header/BrandNavigation/BrandNavigationItem.stories.mdx → header/brand_navigation/brand_navigation_item.stories.mdx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import item from './BrandNavigationItem.hbs'
+import item from './brand_navigation_item.hbs'
 import JsonData from '../navigation.json'

package/src/stories/views/components/{Header/Burger.hbs → header/burger.hbs} RENAMED Viewed

@@ -1,4 +1,4 @@
-<div x-data="burger()" class="sb-burger flex items-center justify-center h-full fill-current">
+<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">
     <nav>
         <button {{!-- :class="$store.burgeropen ? 'text-blue-congress' : 'text-white'" --}}
             class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
@@ -18,6 +18,7 @@
         </button>
     </nav>
 </div>
 <script>
     var burger = () => {
         return {

package/src/stories/views/components/header/header.hbs ADDED Viewed

@@ -0,0 +1,85 @@
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
+    <header class="relative z-101 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">
+        <div x-data
+            id="headerWrapper"
+            @resize.window="resetNav()"
+            :class="shouldBrandNavBeHidden() ? '-mt-10 lg:-mt-8' : ''  "
+            class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+            <div id="anchorNavWrapper"
+                class="hidden">
+                {{> components/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 }}
+            </div>
+            <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-102">
+                <div id="serviceNavMainContainer"
+                    class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-101">
+                    <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/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/header/search/quick_search_button }}
+                        <div class="hidden lg:flex">
+                            {{> components/header/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 }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="sectionNavWrapper"
+                x-ref="sectionnavigation"
+                @toggle-sectionnav.window="toggleSectionNav"
+                :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 }}
+            </div>
+            <div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
+                x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen);$el.setAttribute('aria-hidden', !$store.searchFieldOpen);$el.setAttribute('aria-labelledby', 'flyout-' + $store.searchID.current + '-1')"
+                x-show="$store.searchFieldOpen"
+                class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-102 lg:hidden print:hidden"
+                @search-close.window="$store.searchFieldOpen = false"
+                @click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
+                x-transition:enter="transition ease-out duration-200"
+                x-transition:enter-start="opacity-0 transform scale-y-90"
+                x-transition:enter-end="opacity-100 transform scale-y-100"
+                x-transition:leave="transition ease-in duration-100"
+                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 }}
+            </div>
+        </div>
+    </header>
+    <div x-ref="myOverlay">
+        <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
+    </div>
+</div>

package/src/stories/views/components/{Header/Header.stories.mdx → header/header_.stories.mdx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import navigation from './Header.hbs'
+import navigation from './header.hbs'
 import JsonData from './navigation.json'
 import JsonData2 from './navigation2.json'
 import JsonData3 from './navigation3.json'

package/src/stories/views/components/header/header_alpine.js ADDED Viewed

@@ -0,0 +1,255 @@
+//Main Alpine Init Listener
+document.addEventListener('alpine:init', () => {
+    // Alpine.stores for global variables
+    Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
+    Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
+    Alpine.store('burgeropen', false);
+    Alpine.store('searchFieldOpen', false);
+    Alpine.store('serviceNavIsOpen', false);
+    Alpine.store('searchID', {
+        current: '{{nextRandom}}'
+    });
+    Alpine.store('serviceID', {
+        open: false,
+        current: '0'
+    });
+    Alpine.store('navIsVisible', true);
+    // context for the main header element
+    Alpine.data('mainNavigationHandler', () =>({
+        debounce (callback, wait) {
+            let timeoutId = null;
+            return (...args) => {
+                window.clearTimeout(timeoutId);
+                timeoutId = window.setTimeout(() => {
+                callback.apply(null, args);
+                }, wait);
+            };
+        },
+        init(){
+            let lastScrollTop = 0
+            let height = top.innerHeight
+            window.addEventListener('scroll', this.debounce( () => {
+                let winScroll = document.body.scrollTop || document.documentElement.scrollTop
+                winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
+                //let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
+                this.percent = Math.round((winScroll / height) * 100)
+                lastScrollTop = winScroll
+                //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent)
+                this.$store.navIsVisible = !this.isNavHidden()
+                //console.log(this.$store.navIsVisible);
+            },50))
+        },
+        percent: 0,
+        scrollingDown: true,
+        isNavHidden() {
+            if(this.$screen('lg')) {
+                return this.shouldSectionNavBeHidden()
+            } else {
+                return this.shouldServiceNavBeHidden()
+            }
+        },
+        shouldBrandNavBeHidden() {
+            return this.percent > 0
+        },
+        shouldSectionNavBeHidden() {
+            return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
+        },
+        shouldServiceNavBeHidden() {
+            return (this.percent > 90  && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
+        },
+        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)
+        },
+        shouldFlyoutBeHidden() {
+            return (this.percent > 50  && this.scrollingDown && this.$screen('lg') )
+        },
+        resetNav() {
+            if(window.innerWidth > 1023) {
+                this.$refs.sectionnavigation.setAttribute("style","")
+            } else {
+                // hidden needs to be set here to avoid flickering of the sectionNav on viewport change, gets removed in timeout
+                // this.$refs.sectionnavigation.classList.add('hidden')
+                // this.$refs.sectionnavigation.style.maxHeight="0px"
+            }
+            let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+            let nowClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
+            let nextNowClientHeight = this.$store.clientHeight;
+            if (nextNowClientHeight >= nowClientHeight && this.$store.clientWidth == nowClientWidth) {
+                // Event handling of keyboard pop-up
+                nextNowClientHeight = nowClientHeight
+                this.$store.clientWidth = nowClientWidth
+            }
+            else{
+            // timeout is used to dispatch events after the resize is done
+                let timeout
+                clearTimeout(timeout)
+                timeout = setTimeout(() => {
+                    this.$refs.sectionnavigation.classList.remove('hidden')
+                    this.$store.burgeropen == true ? this.$dispatch('burger-close') :null
+                    this.$store.searchFieldOpen === true ? this.$dispatch('search-mobile-click-outside') :null
+                    this.$store.searchFieldOpen === true ? this.$dispatch('search-close') :null
+                    this.$store.serviceNavIsOpen === true ? this.$dispatch('close-servicemenu') :null
+                    this.toggleScrolling(true)
+                }, 250)
+                // Event handling of keyboard pop-up
+                nextNowClientHeight = nowClientHeight
+                this.$store.clientWidth = nowClientWidth
+            }
+        },
+        toggleSectionNav() {
+        //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )
+        //true = sectionNav öffnet (maxheight = scrollheight)
+            console.log('toggleSectionNav, Event: ' + this.$event.detail )
+            if(this.$event.detail === false) {
+                if (window.innerWidth < 1024) {
+                    this.$refs.sectionnavigation.style.maxHeight='0px'
+                } else {
+                    this.$refs.sectionnavigation.style.maxHeight = ''
+                }
+            } else {
+                let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
+                let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
+                let brandNavHeight = this.percent > 0 ? 40 : 0
+                if(navheight > winheightcorr){
+                    this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                    this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
+                } else {
+                    this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                    this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
+                }
+            }
+        },
+        disableScrolling() {
+            document.body.classList.add('overflow-hidden','h-full','w-full')
+            this.$refs.myOverlay.ontouchmove = (e) => e.preventDefault();
+            console.log("disableScrolling")
+        },
+        enableScrolling() {
+            document.body.classList.remove('overflow-hidden','h-full','w-full')
+            this.$refs.myOverlay.ontouchmove = (e) => true;
+            console.log("enableScrolling")
+        },
+        toggleScrolling(mode){
+            if(this.$screen(0) && !this.$screen('lg')){
+                mode == false ? this.disableScrolling() : this.enableScrolling()
+            }
+            if(this.$screen('lg') && mode == true){
+                this.enableScrolling()
+            }
+        }
+    }))
+    // context for the overlay
+    Alpine.data('overlayHandler', () => ({
+                shouldOverlayBeShown() {
+                        return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true  ))
+                    },
+                overlayWasClicked() {
+                    this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
+                    this.$dispatch('burger-close')
+                    this.$dispatch('close-servicemenu')
+                    // this.$dispatch('toggleScrolling', true )
+                    this.toggleScrolling(true)
+                }
+        }))
+    // context for all dropdowns
+    Alpine.data('dropdown', () => ({
+        dropped: false,
+        toggle() {
+            this.dropped = ! this.dropped;
+        },
+        toggleServiceNav(){
+            this.dropped = ! this.dropped;
+            this.$store.searchFieldOpen = false;
+            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;
+            this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
+            console.log('currentID: '+ this.$store.serviceID.current)
+            console.log('target-id: '+this.$event.target.id)
+            console.log('element-id: '+this.$el.id)
+            console.log('serviceNav is open:'+ this.$store.serviceNavIsOpen)
+            this.$store.serviceID.current = this.$el.id
+            this.toggleScrolling(!this.$store.serviceNavIsOpen)
+            let myFlyout = document.querySelector('#flyout-'+this.$el.id)
+            let brandNavHeight = this.percent > 0 ? 40 : 0
+            if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
+                window.setTimeout(function(){
+                    if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
+                        myFlyout.style.height = 'auto'
+                        window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
+                        myFlyout.style.overflowY = 'scroll'
+                    } else {
+                        myFlyout.style.maxHeight = ''
+                      //myFlyout.style.overflowY = 'hidden'
+                        }
+                },150)
+            }
+        }
+    }))
+    // There are several Flyouts sharing the same functionality and context, so put the data in an Alpine.data to make it reusable
+    Alpine.data('flyoutHandler', () => ({
+        init() {
+            //Initial: x-collapse only on mobile/tablet
+            if(window.innerWidth < 1024) {
+                this.$el.setAttribute("x-collapse","")
+            }
+        },
+        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
+                if(window.innerWidth < 1024) {
+                    if(value == true ) {
+                        if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
+                            this.$refs.sectionnavigation.style.maxHeight = a +'px'
+                            this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                        } else {
+                            this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
+                            this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                        }
+                    } else {
+                        if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
+                            this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                        } else {
+                            this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                        }
+                    }
+                }
+            })
+        },
+        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")
+                    delete this.$el._x_transition;
+                    this.$el.style.removeProperty('overflow');
+                    this.$el.style.removeProperty('height');
+                    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/src/stories/views/components/{Header → header}/navigation.json RENAMED Viewed

File without changes

package/src/stories/views/components/{Header → header}/navigation2.json RENAMED Viewed

File without changes

package/src/stories/views/components/{Header → header}/navigation3.json RENAMED Viewed

File without changes

package/src/stories/views/components/{Header → header}/navigation4.json RENAMED Viewed

File without changes

package/src/stories/views/components/{Header/NavigationFlyout/NavigationFlyout.hbs → header/navigation_flyout/navigation_flyout.hbs} RENAMED Viewed

@@ -44,11 +44,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/NavigationFlyout/NavigationFlyoutColumn count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}
+                    {{> components/header/navigation_flyout/navigation_flyout_column count=../this.columnCount navtype=../../_navigationType _parent=../../_parent _flyout=true~}}
                 {{/each}}
             {{else}}
                 {{#with this.items}}
-                    {{> components/Header/NavigationFlyout/NavigationFlyoutColumn selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}
+                    {{> components/header/navigation_flyout/navigation_flyout_column selected=../../this.selected navtype=../../_navigationType _parent=../../_parent _flyout=false ~}}
                 {{/with}}
             {{/if}}
         </div>

package/src/stories/views/components/{Header/NavigationFlyout/NavigationFlyout.stories.mdx → header/navigation_flyout/navigation_flyout.stories.mdx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import flyout from './NavigationFlyout.hbs'
+import flyout from './navigation_flyout.hbs'
 import JsonData from '../navigation.json'

package/src/stories/views/components/header/navigation_flyout/navigation_flyout_column.hbs ADDED Viewed

@@ -0,0 +1,9 @@
+<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 ~}}
+        {{~/if~}}
+    {{~/each~}}
+</ul>

package/src/stories/views/components/{Header/NavigationFlyout/NavigationFlyoutItem.hbs → header/navigation_flyout/navigation_flyout_item.hbs} RENAMED Viewed

File without changes

package/src/stories/views/components/{Header/Search/QuickSearchButton.hbs → header/search/quick_search_button.hbs} RENAMED Viewed

File without changes

package/src/stories/views/components/{Header/Search/QuickSearchButton.stories.mdx → header/search/quick_search_button.stories.mdx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import QuickSearchButton from './QuickSearchButton.hbs'
+import QuickSearchButton from './quick_search_button.hbs'
 <Meta title="Komponenten/Header/Search/QuickSearchButton" argTypes={{}} />

package/src/stories/views/components/{Header/Search/QuickSearchForm.hbs → header/search/quick_search_form.hbs} RENAMED Viewed

File without changes

package/src/stories/views/components/{Header/Search/QuickSearchForm.stories.mdx → header/search/quick_search_form.stories.mdx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import QuickSearchForm from './QuickSearchForm.hbs'
+import QuickSearchForm from './quick_search_form.hbs'
 <Meta title="Komponenten/Header/Search/QuickSearchForm" argTypes={{}} />

package/src/stories/views/components/{Header → header}/sectionNavigationData.json RENAMED Viewed

File without changes

package/src/stories/views/components/{Header/SectionNavigation/SectionNavigation.hbs → header/section_navigation/section_navigation.hbs} RENAMED Viewed

@@ -1,6 +1,6 @@
 <div
     id="sectionNav"
-    class="sb-section-navigation w-full px-0 mt-10 md:mt-0 lg:px-10 lg:container bg-blue-congress"
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container bg-blue-congress"
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
     <div class="flex content-start mb-0">
@@ -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/SectionNavigation/SectionNavigationItem }}
+                            {{> components/header/section_navigation/section_navigation_item }}
                         {{else}}
                             {{{this}}}
                         {{/if}}

package/src/stories/views/components/{Header/SectionNavigation/SectionNavigation.stories.mdx → header/section_navigation/section_navigation.stories.mdx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import menu from './SectionNavigation.hbs'
+import menu from './section_navigation.hbs'
 import JsonData from '../navigation.json'

package/{dist/views/components/Header/SectionNavigation/SectionNavigationItem.hbs → src/stories/views/components/header/section_navigation/section_navigation_item.hbs} RENAMED Viewed

@@ -3,7 +3,7 @@
         @click.outside="dropped = false"
         @close-servicemenu.window="dropped = false"
         :class="dropped ? 'border-b-0 lg:bg-white lg:text-blue-congress h-auto' : 'h-10 lg:hover:underline'"
-        class="sb-section-navigation-item flex flex-wrap justify-start w-full text-white list-none border-b border-white first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
+        class="flex flex-wrap justify-start w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
         {{#if this.isCluster ~}}
 {{!-- Gilt z.B. für REGIONEN:  --}}
             <button id="button-{{nextRandom}}-1"
@@ -94,7 +94,7 @@
         {{/if}}
-        {{> components/Header/NavigationFlyout/NavigationFlyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}
+        {{> components/header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}
     </li>
 {{/each}}

package/src/stories/views/components/{Header/SectionNavigation/SectionNavigationItem.stories.mdx → header/section_navigation/section_navigation_item.stories.mdx} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import item from './SectionNavigationItem.hbs'
+import item from './section_navigation_item.hbs'
 import JsonData from '../navigation.json'

package/src/stories/views/components/{Header → header}/serviceNavigationData.json RENAMED Viewed

File without changes

package/src/stories/views/components/{Header/ServiceLogo.hbs → header/service_logo.hbs} RENAMED Viewed

File without changes