hr-design-system-handlebars 0.47.3 → 0.47.6

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.47.6 (Wed Jun 08 2022)
+
+#### 🐛 Bug Fix
+
+- revision of alternative-teaser [#240](https://github.com/mumprod/hr-design-system-handlebars/pull/240) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.47.5 (Tue Jun 07 2022)
+
+#### 🐛 Bug Fix
+
+- some new code in header_alpine.js [#239](https://github.com/mumprod/hr-design-system-handlebars/pull/239) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.47.4 (Thu Jun 02 2022)
+
+#### 🐛 Bug Fix
+
+- - example story [#238](https://github.com/mumprod/hr-design-system-handlebars/pull/238) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.47.3 (Mon May 30 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1750,14 +1750,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     -ms-flex-negative: 0;
         flex-shrink: 0;
 }
-.basis-2\/5 {
-    -ms-flex-preferred-size: 40%;
-        flex-basis: 40%;
-}
 .basis-3\/5 {
     -ms-flex-preferred-size: 60%;
         flex-basis: 60%;
 }
+.basis-2\/5 {
+    -ms-flex-preferred-size: 40%;
+        flex-basis: 40%;
+}
 .-translate-x-1\/2 {
     --tw-translate-x: -50%;
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

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

@@ -1,5 +1,5 @@
 //Main Alpine Init Listener
-document.addEventListener('alpine:init', () => {       
+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)
@@ -7,23 +7,24 @@ document.addEventListener('alpine:init', () => {
     Alpine.store('searchFieldOpen', false);
     Alpine.store('serviceNavIsOpen', false);
     Alpine.store('searchID', {
-        current: '{{nextRandom}}'        
+        current: '{{nextRandom}}'
     });
     Alpine.store('serviceID', {
         open: false,
-        current: '0'        
+        current: '0'
     });
     Alpine.store('navIsVisible', true);
+    Alpine.store('subNavIsVisible', false);
 
     // 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);
+                    callback.apply(null, args);
                 }, wait);
             };
 
@@ -33,14 +34,15 @@ document.addEventListener('alpine:init', () => {
             let height = top.innerHeight
 
             window.addEventListener('scroll', this.debounce( () => {
-                let winScroll = document.body.scrollTop || document.documentElement.scrollTop 
+                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) 
+                //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent)
                 this.$store.navIsVisible = !this.isNavHidden()
-                //console.log(this.$store.navIsVisible);      
+                this.$store.subNavIsVisible = !this.isSubNavHidden()
+                //console.log(this.$store.navIsVisible);
             },50))
         },
         percent: 0,
@@ -52,22 +54,33 @@ document.addEventListener('alpine:init', () => {
                 return this.shouldServiceNavBeHidden()
             }
         },
+        isSubNavHidden() {
+            if(this.$screen('lg')){
+                if (document.querySelector('.isSelectedAndOpen') !== null) {
+                    return false
+                } else {
+                    return true
+                }
+            } else {
+                return true
+            }
+        },
         shouldBrandNavBeHidden() {
-            return this.percent > 0 
+            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) 
+            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) 
+            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() { 
+        resetNav() {
             if(window.innerWidth > 1023) {
                 this.$refs.sectionnavigation.setAttribute("style","")
             } else {
@@ -85,8 +98,8 @@ document.addEventListener('alpine:init', () => {
                 this.$store.clientWidth = nowClientWidth
             }
             else{
-            // timeout is used to dispatch events after the resize is done
-                let timeout 
+                // timeout is used to dispatch events after the resize is done
+                let timeout
                 clearTimeout(timeout)
                 timeout = setTimeout(() => {
                     this.$refs.sectionnavigation.classList.remove('hidden')
@@ -100,29 +113,29 @@ document.addEventListener('alpine:init', () => {
                 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) { 
+            //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 { 
+                } 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 
-            
+                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' 
+                    this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
                 }
             }
         },
@@ -142,39 +155,39 @@ document.addEventListener('alpine:init', () => {
             }
             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)
-                }
-        }))
+        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; 
+            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.$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)
@@ -183,70 +196,71 @@ document.addEventListener('alpine:init', () => {
             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 
+            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' 
+                        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'
-                        }
+                        //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', () => ({   
+    Alpine.data('flyoutHandler', () => ({
         init() {
-            //Initial: x-collapse only on mobile/tablet 
+            //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(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' 
+                            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'); 
+                    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/dist/views/components/teaser/components/teaser_comments.hbs

@@ -1,6 +1,6 @@
 {{#with this.commentLink}}
     <span class="whitespace-nowrap">
-        {{#>components/base/link css="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.teaserSize 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.commentNumber}}</span>

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

@@ -1,20 +1,22 @@
-<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 flex-row ","md:col-span-4 flex-row","md:col-span-6 flex-row","flex-row"]'}} ">
-    <figure class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9","basis-3/5 ar-16-9", "ar-16-9"]'}} ">
-        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}
-            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../_noDelay addClassImg="" ~}}
+<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6 flex-row","flex-row"]'}} ">
+    <figure class="{{inline-switch this.teaserSize '["hero"]' '["basis-3/5 ar-16-9", "ar-16-9"]'}} ">
+        {{#>components/base/link css="" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
+            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
         {{/components/base/link}}  
     </figure>
-    <div class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-3/5 md:flex-full" , "basis-2/5"]'}} ">
-        <header class="md:px-0 {{inline-switch teasersize '["25"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
-                headlineTag=this.headlineTag 
-                label=this.label 
-                readMore=this.link.readMoreText.readMoreScreenreader 
-                size=this.teaserSize 
-                title=this.title 
-                topline=this.topline}}            
+    <div class="{{inline-switch this.teaserSize '["hero"]' '["basis-2/5"]'}} ">
+        <header class="px-5 md:px-0">
+            {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
+                {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
+                    headlineTag=this.headlineTag 
+                    label=this.label 
+                    readMore=this.link.readMoreText.readMoreScreenreader 
+                    size=this.teaserSize 
+                    title=this.title 
+                    topline=this.topline}} 
+            {{/components/base/link}}               
         </header>
-        <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
+        <section class="px-5 md:px-0">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

package/package.json

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

package/src/stories/Example.stories.mdx

@@ -0,0 +1,98 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
+import { resetComponents } from '@storybook/components'
+import icon from './views/components/base/image/icon.hbs'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+
+
+import example from "./example.hbs";
+
+<Meta
+  title="Grundlegendes/Template/Beispiel-Story"
+  argTypes={{
+    label: {
+      control: "text",
+      description: "Button text",
+    },
+    size: {
+      control: { type: "select", options: ["sm", "md", "lg", "xl"] },
+      description: "Größe des Buttons",
+      table: {
+        defaultValue: {
+          summary: "md",
+        },
+      },
+    },
+    type: {
+      description: "Typ des Buttons",
+      control: {
+        type: "select",
+        options: ["primary", "secondary"],
+      },
+      table: {
+        defaultValue: {
+          summary: "primary",
+        },
+      },
+    },
+  }}
+/>
+
+export const Template = ({ label, ...args }) => {
+  // You can either use a function to create DOM elements or use a plain html string!
+  // return `<div>${label}</div>`;
+  return example({ label, ...args });
+};
+
+# Name der Komponente 
+
+## Beschreibung/Abstract
+
+Kurzer Beschreibungstext der die Komponente erklärt -> Penis
+
+<Preview withToolbar>
+  <Story
+    name="Primary"
+    args={{
+      label: "Button",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Preview>
+
+## Props
+
+Beschreibung der wichtigsten parameter, die für die Komponente benötigt werden
+
+<ArgsTable story="Primary" />
+
+## Usage/Verwendung
+
+ggf. Beschreibung wann und wie die Komponente eingesetzt wird in handlebars
+
+```html
+{{> components/teaser/components/teaser_heading 
+    fontVariant=this.headingFontVariant
+    headlineTag=this.headlineTag 
+    label=this.label 
+    readMore=this.link.readMoreText.readMoreScreenreader 
+    size=this.teaserSize 
+    title=this.title 
+    topline=this.topline }}     
+```
+
+## Dos/Doents
+<ComponentRules
+  rules={[
+    {
+      positive: {
+        component:<div>Get started</div>,
+        description:"Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces."
+      },
+      negative: {
+        component:<div>Get started and enjoy discount!</div>,
+        description:"Don’t use punctuation marks such as periods or exclamation points."
+      }
+    }
+  ]}
+/>

package/src/stories/example.hbs

@@ -0,0 +1,8 @@
+<button class="js-load btn {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}} {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}" >
+    {{label}}
+</button>
+<div class="js-load outer" data-new-hr-foo='{"test":"bar"}'>
+    <div class="inner"></div>
+</div>
+
+

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

@@ -1,5 +1,5 @@
 //Main Alpine Init Listener
-document.addEventListener('alpine:init', () => {       
+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)
@@ -7,23 +7,24 @@ document.addEventListener('alpine:init', () => {
     Alpine.store('searchFieldOpen', false);
     Alpine.store('serviceNavIsOpen', false);
     Alpine.store('searchID', {
-        current: '{{nextRandom}}'        
+        current: '{{nextRandom}}'
     });
     Alpine.store('serviceID', {
         open: false,
-        current: '0'        
+        current: '0'
     });
     Alpine.store('navIsVisible', true);
+    Alpine.store('subNavIsVisible', false);
 
     // 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);
+                    callback.apply(null, args);
                 }, wait);
             };
 
@@ -33,14 +34,15 @@ document.addEventListener('alpine:init', () => {
             let height = top.innerHeight
 
             window.addEventListener('scroll', this.debounce( () => {
-                let winScroll = document.body.scrollTop || document.documentElement.scrollTop 
+                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) 
+                //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent)
                 this.$store.navIsVisible = !this.isNavHidden()
-                //console.log(this.$store.navIsVisible);      
+                this.$store.subNavIsVisible = !this.isSubNavHidden()
+                //console.log(this.$store.navIsVisible);
             },50))
         },
         percent: 0,
@@ -52,22 +54,33 @@ document.addEventListener('alpine:init', () => {
                 return this.shouldServiceNavBeHidden()
             }
         },
+        isSubNavHidden() {
+            if(this.$screen('lg')){
+                if (document.querySelector('.isSelectedAndOpen') !== null) {
+                    return false
+                } else {
+                    return true
+                }
+            } else {
+                return true
+            }
+        },
         shouldBrandNavBeHidden() {
-            return this.percent > 0 
+            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) 
+            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) 
+            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() { 
+        resetNav() {
             if(window.innerWidth > 1023) {
                 this.$refs.sectionnavigation.setAttribute("style","")
             } else {
@@ -85,8 +98,8 @@ document.addEventListener('alpine:init', () => {
                 this.$store.clientWidth = nowClientWidth
             }
             else{
-            // timeout is used to dispatch events after the resize is done
-                let timeout 
+                // timeout is used to dispatch events after the resize is done
+                let timeout
                 clearTimeout(timeout)
                 timeout = setTimeout(() => {
                     this.$refs.sectionnavigation.classList.remove('hidden')
@@ -100,29 +113,29 @@ document.addEventListener('alpine:init', () => {
                 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) { 
+            //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 { 
+                } 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 
-            
+                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' 
+                    this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
                 }
             }
         },
@@ -142,39 +155,39 @@ document.addEventListener('alpine:init', () => {
             }
             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)
-                }
-        }))
+        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; 
+            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.$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)
@@ -183,70 +196,71 @@ document.addEventListener('alpine:init', () => {
             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 
+            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' 
+                        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'
-                        }
+                        //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', () => ({   
+    Alpine.data('flyoutHandler', () => ({
         init() {
-            //Initial: x-collapse only on mobile/tablet 
+            //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(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' 
+                            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'); 
+                    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/teaser/components/teaser_comments.hbs

@@ -1,6 +1,6 @@
 {{#with this.commentLink}}
     <span class="whitespace-nowrap">
-        {{#>components/base/link css="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.teaserSize 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.commentNumber}}</span>

package/src/stories/views/components/teaser/teaser_alternativ.hbs

@@ -1,20 +1,22 @@
-<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["25","33","50"]' '["px-5 flex-row ","md:col-span-4 flex-row","md:col-span-6 flex-row","flex-row"]'}} ">
-    <figure class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9","basis-3/5 ar-16-9", "ar-16-9"]'}} ">
-        {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}
-            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../_noDelay addClassImg="" ~}}
+<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6 flex-row","flex-row"]'}} ">
+    <figure class="{{inline-switch this.teaserSize '["hero"]' '["basis-3/5 ar-16-9", "ar-16-9"]'}} ">
+        {{#>components/base/link css="" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
+            {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
         {{/components/base/link}}  
     </figure>
-    <div class="{{inline-switch this.teaserSize '["25", "hero"]' '["basis-3/5 md:flex-full" , "basis-2/5"]'}} ">
-        <header class="md:px-0 {{inline-switch teasersize '["25"]' '["","px-5"]'}}">
-            {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
-                headlineTag=this.headlineTag 
-                label=this.label 
-                readMore=this.link.readMoreText.readMoreScreenreader 
-                size=this.teaserSize 
-                title=this.title 
-                topline=this.topline}}            
+    <div class="{{inline-switch this.teaserSize '["hero"]' '["basis-2/5"]'}} ">
+        <header class="px-5 md:px-0">
+            {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
+                {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
+                    headlineTag=this.headlineTag 
+                    label=this.label 
+                    readMore=this.link.readMoreText.readMoreScreenreader 
+                    size=this.teaserSize 
+                    title=this.title 
+                    topline=this.topline}} 
+            {{/components/base/link}}               
         </header>
-        <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">
+        <section class="px-5 md:px-0">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

package/src/stories/views/components/teaser/teaser_alternativ.stories.mdx

@@ -8,8 +8,6 @@ import heroTeaserWithLabel from './fixtures/teaser_alternative_hero_serif_label.
 import heroTeaserWithComments from './fixtures/teaser_alternative_hero_serif_comments.json'
 import teaser100 from './fixtures/teaser_alternative_100_serif.json'
 import teaser50 from './fixtures/teaser_alternative_50_serif.json'
-import teaser33 from './fixtures/teaser_alternative_33_serif.json'
-import teaser25 from './fixtures/teaser_alternative_25_serif.json'
 
 <Meta
     title="Komponenten/Teaser/Alternativ"
@@ -20,7 +18,7 @@ import teaser25 from './fixtures/teaser_alternative_25_serif.json'
         teasersize: {
             control: {
                 type: 'select',
-                options: ['hero', '100', '50', '33', '25'],
+                options: ['hero', '100', '50'],
             },
             description: 'Teaser Größe',
             table: {
@@ -70,10 +68,4 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
     <Story name="Alternativ 50" args={teaser50.logicItem.includeModel}>
         {Template.bind({})}
     </Story>
-    <Story name="Alternativ 33" args={teaser33.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Alternativ 25" args={teaser25.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-</Preview>
+</Preview>