hr-design-system-handlebars 0.50.1 → 0.50.4

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.50.4 (Fri Jul 15 2022)
+
+#### 🐛 Bug Fix
+
+- Changed alternative 100% and 50% teaser to 1to1 in mobile [#280](https://github.com/mumprod/hr-design-system-handlebars/pull/280) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.50.3 (Fri Jul 15 2022)
+
+#### 🐛 Bug Fix
+
+- removes loader from main.js + some more doku [#279](https://github.com/mumprod/hr-design-system-handlebars/pull/279) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.50.2 (Fri Jul 15 2022)
+
+#### 🐛 Bug Fix
+
+- refactor header.stories.mdx [#276](https://github.com/mumprod/hr-design-system-handlebars/pull/276) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.50.1 (Fri Jul 15 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -596,6 +596,10 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -910,6 +914,10 @@ video {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
+.basis-2\/3 {
+  -ms-flex-preferred-size: 66.666667%;
+      flex-basis: 66.666667%;
+}
 .basis-2\/5 {
   -ms-flex-preferred-size: 40%;
       flex-basis: 40%;
@@ -918,10 +926,6 @@ video {
   -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%;
@@ -2417,6 +2421,9 @@ video {
     --color-topline: #c20016;
 }
 /*! purgecss end ignore */
+.sbdocs-content {
+    max-width:1140px !important;
+}
 .hide-scroll-bar {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -2675,6 +2682,11 @@ video {
         flex-basis: 33.333333%;
   }
 
+  .md\:basis-1\/2 {
+    -ms-flex-preferred-size: 50%;
+        flex-basis: 50%;
+  }
+
   .md\:basis-2\/3 {
     -ms-flex-preferred-size: 66.666667%;
         flex-basis: 66.666667%;

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

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

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

@@ -30,7 +30,7 @@ the 4 parameters are:
         {{~inline-switch
             size
             '["hero","100","50"]'
-            '["text-2xl md:text-3xl","text-2xl md:text-3xl","text-2xl"]'
+            '["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
         ~}}
     {{~/case~}}
     {{~#case 'poster-ds'~}}

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

@@ -1,9 +1,12 @@
-<article class="col-span-12 flex flex-col md:flex-row gap-y-3 gap-x-4 md:px-0 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"]'}} ">
-    <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"]'}} ">
+<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0
+    {{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5"," md:col-span-6 px-5"]'~}}
+    "
+    >
+    <figure class="ar-16-9{{~inline-switch this.teaserSize '["hero","100","50"]' '["basis-2/3"," basis-2/5 md:basis-1/3"," basis-2/5 md:basis-1/2"]'~}}">
         {{> components/teaser/components/teaser_lead }} 
     </figure>
-    <div class="{{inline-switch this.teaserSize '["50","100","hero"]' '["basis-3/5 md:basis-2/3","basis-2/3","basis-1/3"]'}} ">
-        <header class="px-5 md:px-0">
+    <div class="{{~inline-switch this.teaserSize '["hero","100","50"]' '["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]'~}}">
+        <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
             {{#>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 
@@ -14,7 +17,7 @@
                     topline=this.topline}} 
             {{/components/base/link}}               
         </header>
-        <section class="px-5 md:px-0">
+        <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
             {{> 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.50.1",
+    "version": "0.50.4",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/assets/fixtures/teaser/teaser_alternative_100_serif.json

@@ -13,6 +13,21 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_1_tab"
+            }
         }
     ]
 }

package/src/assets/fixtures/teaser/teaser_alternative_50_serif.json

@@ -13,6 +13,21 @@
         {
             "@->contentpath": "logicItem.includeModel.teaserType",
             "@->value": "alternative-ds"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.content.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "md_2_tab"
+            }
         }
     ]
 }

package/src/assets/tailwind.css

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