hr-design-system-handlebars 0.47.7 → 0.47.10

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.47.10 (Tue Jun 14 2022)
+
+#### 🐛 Bug Fix
+
+- Alternative-Teaser zusammenbauen [#245](https://github.com/mumprod/hr-design-system-handlebars/pull/245) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
+# v0.47.9 (Tue Jun 14 2022)
+
+#### 🐛 Bug Fix
+
+- - outsourced title class logic to own template [#243](https://github.com/mumprod/hr-design-system-handlebars/pull/243) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.47.8 (Tue Jun 14 2022)
+
+#### 🐛 Bug Fix
+
+- adds support for detect scroll initiated by user or browser [#241](https://github.com/mumprod/hr-design-system-handlebars/pull/241) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.47.7 (Mon Jun 13 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1750,14 +1750,22 @@ Ensure the default browser behavior of the `hidden` attribute.
     -ms-flex-negative: 0;
         flex-shrink: 0;
 }
-.basis-3\/5 {
-    -ms-flex-preferred-size: 60%;
-        flex-basis: 60%;
-}
 .basis-2\/5 {
     -ms-flex-preferred-size: 40%;
         flex-basis: 40%;
 }
+.basis-1\/3 {
+    -ms-flex-preferred-size: 33.333333%;
+        flex-basis: 33.333333%;
+}
+.basis-2\/3 {
+    -ms-flex-preferred-size: 66.666667%;
+        flex-basis: 66.666667%;
+}
+.basis-3\/5 {
+    -ms-flex-preferred-size: 60%;
+        flex-basis: 60%;
+}
 .-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));
@@ -1880,17 +1888,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 .gap-y-9 {
     row-gap: 2.25rem;
 }
-.gap-y-4 {
-    row-gap: 1rem;
-}
-.gap-x-5 {
-    -webkit-column-gap: 1.25rem;
-       -moz-column-gap: 1.25rem;
-            column-gap: 1.25rem;
-}
 .gap-y-5 {
     row-gap: 1.25rem;
 }
+.gap-x-3 {
+    -webkit-column-gap: 0.75rem;
+       -moz-column-gap: 0.75rem;
+            column-gap: 0.75rem;
+}
 .gap-x-4 {
     -webkit-column-gap: 1rem;
        -moz-column-gap: 1rem;
@@ -2154,6 +2159,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 }
+.px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+}
 .px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -2178,10 +2187,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
 }
-.px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-}
 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -2761,6 +2766,23 @@ Ensure the default browser behavior of the `hidden` attribute.
                 flex: 1 1 auto;
     }
 
+    .md\:basis-1\/3 {
+        -ms-flex-preferred-size: 33.333333%;
+            flex-basis: 33.333333%;
+    }
+
+    .md\:basis-2\/3 {
+        -ms-flex-preferred-size: 66.666667%;
+            flex-basis: 66.666667%;
+    }
+
+    .md\:flex-row {
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+    }
+
     .md\:flex-col {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
@@ -2774,6 +2796,12 @@ Ensure the default browser behavior of the `hidden` attribute.
                 justify-content: flex-end;
     }
 
+    .md\:gap-x-5 {
+        -webkit-column-gap: 1.25rem;
+           -moz-column-gap: 1.25rem;
+                column-gap: 1.25rem;
+    }
+
     .md\:rounded-none {
         border-radius: 0px;
     }
@@ -2828,6 +2856,11 @@ Ensure the default browser behavior of the `hidden` attribute.
         line-height: 2.375rem;
     }
 
+    .md\:text-3xl {
+        font-size: 1.875rem;
+        line-height: 2.25rem;
+    }
+
     .md\:leading-4 {
         line-height: 1rem;
     }

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

@@ -32,6 +32,15 @@ document.addEventListener('alpine:init', () => {
         init(){
             let lastScrollTop = 0
             let height = top.innerHeight
+            
+            let userScroll = false;
+            window.userScroll = userScroll;
+
+            function mouseEvent(e) {
+                userScroll = true;
+                window.userScroll = true;
+            }
+            window.addEventListener('wheel', mouseEvent, false);
 
             window.addEventListener('scroll', this.debounce( () => {
                 let winScroll = document.body.scrollTop || document.documentElement.scrollTop
@@ -42,8 +51,10 @@ document.addEventListener('alpine:init', () => {
                 //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent)
                 this.$store.navIsVisible = !this.isNavHidden()
                 this.$store.subNavIsVisible = !this.isSubNavHidden()
-                //console.log(this.$store.navIsVisible);
-            },50))
+
+                //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
+
+            },50), {passive: true})
         },
         percent: 0,
         scrollingDown: true,
@@ -69,10 +80,19 @@ document.addEventListener('alpine:init', () => {
             return this.percent > 0
         },
         shouldSectionNavBeHidden() {
-            return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
+            if(window.userScroll == true){
+                return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
+            } else {
+                return this.percent > 50  && this.$store.burgeropen == false && this.$screen('lg')
+            }
+
         },
         shouldServiceNavBeHidden() {
-            return (this.percent > 90  && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
+            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)
+            }
         },
         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)

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

@@ -7,5 +7,5 @@
     {{#if topline}}
         {{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
     {{/if}}
-    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size }}
+    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
 </{{~ headlineTag ~}}>

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

@@ -1,13 +1,3 @@
-<span
-    class='block mt-0.5
-        {{inline-switch
-            size
-            '["hero","100","25"]'
-            '[" text-2xl md:text-4xl"," text-2xl md:text-4xl"," text-lg"," text-2xl"]'
-        }}
-        {{inline-switch
-            fontVariant
-            '["serif", "sans-serif"]'
-            '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
-        }}'
->{{text}}</span>
+<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes size=size teaserType=teaserType fontVariant=fontVariant}}'>
+    {{~text~}}
+</span>

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

@@ -0,0 +1,21 @@
+{{#switch teaserType~}}
+    {{~#case "standard"~}}   
+        {{~inline-switch
+            size
+            '["hero","100","25"]'
+            '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+        ~}}              
+    {{~/case~}}
+    {{~#case "alternative"~}}
+        {{~inline-switch
+            size
+            '["hero","100","50"]'
+            '["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
+        ~}}       
+    {{~/case~}}
+{{~/switch~}}
+{{~inline-switch
+    fontVariant
+    '["serif", "sans-serif"]'
+    '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
+~}}

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

@@ -1,11 +1,11 @@
-<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"]'}} ">
+<article class="col-span-12 flex gap-y-5 gap-x-3 md:gap-x-5 md:px-0 {{inline-switch this.teaserSize '["50","100","hero"]' '["px-5 md:col-span-6 flex-row","flex-col md:flex-row","flex-col md:flex-row"]'}} ">
+    <figure class="ar-16-9 {{inline-switch this.teaserSize '["50","100","hero"]' '["basis-2/5 md:basis-1/3", "basis-1/3" , "basis-2/3"]'}} ">
         {{#>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 '["hero"]' '["basis-2/5"]'}} ">
-        <header class="px-5 md:px-0">
+    <div class="{{inline-switch this.teaserSize '["50","100","hero"]' '["basis-3/5 md:basis-2/3","basis-2/3","basis-1/3"]'}} ">
+        <header class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["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 
@@ -16,7 +16,7 @@
                     topline=this.topline}} 
             {{/components/base/link}}               
         </header>
-        <section class="px-5 md:px-0">
+        <section class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["px-0"]'}}">
             {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
             {{> components/teaser/components/teaser_byline}} 
         </section>

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

@@ -14,7 +14,8 @@
                 readMore=this.link.readMoreText.readMoreScreenreader 
                 size=this.teaserSize 
                 title=this.title 
-                topline=this.topline }}            
+                topline=this.topline 
+                teaserType=this.teaserType}}            
             {{/components/base/link}}   
         </header>
         <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">

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.7",
+    "version": "0.47.10",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

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

@@ -32,6 +32,15 @@ document.addEventListener('alpine:init', () => {
         init(){
             let lastScrollTop = 0
             let height = top.innerHeight
+            
+            let userScroll = false;
+            window.userScroll = userScroll;
+
+            function mouseEvent(e) {
+                userScroll = true;
+                window.userScroll = true;
+            }
+            window.addEventListener('wheel', mouseEvent, false);
 
             window.addEventListener('scroll', this.debounce( () => {
                 let winScroll = document.body.scrollTop || document.documentElement.scrollTop
@@ -42,8 +51,10 @@ document.addEventListener('alpine:init', () => {
                 //console.log('winscroll: '+winScroll+' height: '+height + '  percent: '+ this.percent)
                 this.$store.navIsVisible = !this.isNavHidden()
                 this.$store.subNavIsVisible = !this.isSubNavHidden()
-                //console.log(this.$store.navIsVisible);
-            },50))
+
+                //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
+
+            },50), {passive: true})
         },
         percent: 0,
         scrollingDown: true,
@@ -69,10 +80,19 @@ document.addEventListener('alpine:init', () => {
             return this.percent > 0
         },
         shouldSectionNavBeHidden() {
-            return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
+            if(window.userScroll == true){
+                return this.percent > 50  && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
+            } else {
+                return this.percent > 50  && this.$store.burgeropen == false && this.$screen('lg')
+            }
+
         },
         shouldServiceNavBeHidden() {
-            return (this.percent > 90  && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
+            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)
+            }
         },
         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)

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

@@ -7,5 +7,5 @@
     {{#if topline}}
         {{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
     {{/if}}
-    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size }}
+    {{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
 </{{~ headlineTag ~}}>

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

@@ -80,6 +80,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
             headlineTag: 'h1',
             fontVariant: 'serif',
             size: 'hero',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}
@@ -108,6 +109,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
             headlineTag: 'h1',
             fontVariant: 'serif',
             size: '33',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}
@@ -134,6 +136,7 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
             headlineTag: 'h1',
             fontVariant: 'serif',
             size: '25',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}

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

@@ -1,13 +1,3 @@
-<span
-    class='block mt-0.5
-        {{inline-switch
-            size
-            '["hero","100","25"]'
-            '[" text-2xl md:text-4xl"," text-2xl md:text-4xl"," text-lg"," text-2xl"]'
-        }}
-        {{inline-switch
-            fontVariant
-            '["serif", "sans-serif"]'
-            '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
-        }}'
->{{text}}</span>
+<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes size=size teaserType=teaserType fontVariant=fontVariant}}'>
+    {{~text~}}
+</span>

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

@@ -51,6 +51,7 @@ Beispiele für die Titel-Komponente:
             text: 'Dies ist der Titel eines 100%-Teasers',
             size: 'hero',
             fontVariant: 'serif',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}
@@ -61,6 +62,7 @@ Beispiele für die Titel-Komponente:
             text: 'Dies ist der Titel eines 66%-, 50%- oder 33%-Teasers',
             size: '33',
             fontVariant: 'serif',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}
@@ -71,6 +73,7 @@ Beispiele für die Titel-Komponente:
             text: 'Dies ist der Titel eines 25%-Teasers',
             size: '25',
             fontVariant: 'serif',
+            teaserType: 'standard'
         }}
     >
         {Template.bind({})}

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

@@ -0,0 +1,21 @@
+{{#switch teaserType~}}
+    {{~#case "standard"~}}   
+        {{~inline-switch
+            size
+            '["hero","100","25"]'
+            '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
+        ~}}              
+    {{~/case~}}
+    {{~#case "alternative"~}}
+        {{~inline-switch
+            size
+            '["hero","100","50"]'
+            '["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
+        ~}}       
+    {{~/case~}}
+{{~/switch~}}
+{{~inline-switch
+    fontVariant
+    '["serif", "sans-serif"]'
+    '[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
+~}}

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

@@ -1,11 +1,11 @@
-<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"]'}} ">
+<article class="col-span-12 flex gap-y-5 gap-x-3 md:gap-x-5 md:px-0 {{inline-switch this.teaserSize '["50","100","hero"]' '["px-5 md:col-span-6 flex-row","flex-col md:flex-row","flex-col md:flex-row"]'}} ">
+    <figure class="ar-16-9 {{inline-switch this.teaserSize '["50","100","hero"]' '["basis-2/5 md:basis-1/3", "basis-1/3" , "basis-2/3"]'}} ">
         {{#>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 '["hero"]' '["basis-2/5"]'}} ">
-        <header class="px-5 md:px-0">
+    <div class="{{inline-switch this.teaserSize '["50","100","hero"]' '["basis-3/5 md:basis-2/3","basis-2/3","basis-1/3"]'}} ">
+        <header class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["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 
@@ -16,7 +16,7 @@
                     topline=this.topline}} 
             {{/components/base/link}}               
         </header>
-        <section class="px-5 md:px-0">
+        <section class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["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_standard.hbs

@@ -14,7 +14,8 @@
                 readMore=this.link.readMoreText.readMoreScreenreader 
                 size=this.teaserSize 
                 title=this.title 
-                topline=this.topline }}            
+                topline=this.topline 
+                teaserType=this.teaserType}}            
             {{/components/base/link}}   
         </header>
         <section class="md:px-0 {{inline-switch this.teaserSize '["25"]' '["","px-5"]'}}">