hr-design-system-handlebars 1.66.1 → 1.67.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.67.0 (Thu Apr 25 2024)
+
+#### 🚀 Enhancement
+
+- Social sharing code impovements [#915](https://github.com/mumprod/hr-design-system-handlebars/pull/915) ([@vascoeduardo](https://github.com/vascoeduardo) [@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 2
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.66.1 (Thu Apr 25 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1056,9 +1056,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .left-0 {
   left: 0px;
 }
-.left-1 {
-  left: 0.25rem;
-}
 .left-1\/2 {
   left: 50%;
 }
@@ -1074,8 +1071,8 @@ article.indexTextDS .indexTextHighlighted .link {
 .right-0 {
   right: 0px;
 }
-.right-\[60px\] {
-  right: 60px;
+.right-\[68px\] {
+  right: 68px;
 }
 .right-auto {
   right: auto;
@@ -1104,21 +1101,27 @@ article.indexTextDS .indexTextHighlighted .link {
 .top-10 {
   top: 2.5rem;
 }
-.top-40 {
-  top: 10rem;
-}
 .top-8 {
   top: 2rem;
 }
 .top-9 {
   top: 2.25rem;
 }
+.top-\[130px\] {
+  top: 130px;
+}
+.top-\[166px\] {
+  top: 166px;
+}
 .top-\[3px\] {
   top: 3px;
 }
 .top-\[41px\] {
   top: 41px;
 }
+.top-\[85px\] {
+  top: 85px;
+}
 .top-feature-box-height {
   top: 0;
   top: var(--feature-box-height);
@@ -1183,6 +1186,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .col-span-full {
   grid-column: 1 / -1;
 }
+.col-start-2 {
+  grid-column-start: 2;
+}
 .float-right {
   float: right;
 }
@@ -1253,10 +1259,6 @@ article.indexTextDS .indexTextHighlighted .link {
   margin-top: 3rem;
   margin-bottom: 3rem;
 }
-.my-14 {
-  margin-top: 3.5rem;
-  margin-bottom: 3.5rem;
-}
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1615,6 +1617,11 @@ article.indexTextDS .indexTextHighlighted .link {
 .h-auto {
   height: auto;
 }
+.h-fit {
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .h-full {
   height: 100%;
 }
@@ -2118,6 +2125,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-md {
+  border-radius: 0.375rem;
+}
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -3289,11 +3299,6 @@ article.indexTextDS .indexTextHighlighted .link {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-\[top\] {
-  transition-property: top;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3348,7 +3353,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1714048163428;
+  counter-reset: cnt1714051151895;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3529,7 +3534,7 @@ article.indexTextDS .indexTextHighlighted .link {
         minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end]; 
         grid-column: main;
     }
-.grid-article > :not(.article-breakout):not(.article-full-width){
+.grid-article > :not(.article-breakout):not(.article-full-width):not(.sticky){
         grid-column: narrow;
     }
 .article-full-width {
@@ -3727,7 +3732,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1714048163428 1;
+  counter-increment: cnt1714051151895 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3743,7 +3748,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1714048163428);
+  content: counter(cnt1714051151895);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -7365,24 +7370,6 @@ article.indexTextDS .indexTextHighlighted .link {
     border-left-width: 1px;
   }
 }
-@media (min-width: 1040px) {
-
-  .socialShareDesktop\:-left-2 {
-    left: -0.5rem;
-  }
-
-  .socialShareDesktop\:bottom-auto {
-    bottom: auto;
-  }
-
-  .socialShareDesktop\:top-0 {
-    top: 0px;
-  }
-
-  .socialShareDesktop\:top-\[78px\] {
-    top: 78px;
-  }
-}
 .\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1[\:has\(\%2B.-hideOnMobile\)] {
   order: 1;
 }

package/dist/assets/js/alpine.js

@@ -39,10 +39,12 @@ Alpine.store('serviceID', {
 Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
-Alpine.store('globalPercent', {
+Alpine.store('sectionNavIsVisible', false)
+Alpine.store('sharingIsVisible', true)
+Alpine.store('sharingIsOpen', false)
+Alpine.store('sharingBottomPos', {
     current: '0'
 })
-
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)
 Alpine.data('overlayHandler', overlayHandler)

package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js

@@ -29,15 +29,18 @@ export default () => ({
         const mouseDownHandler = (e) => {
             clickedOnScrollbar(e.clientX) ? mouseEvent() : null
         }
-        // main scroll handler, defines scroll direction, percent of viewport scrolled, visibility of navigation and subnavigation
+        // main scroll handler, defines scroll direction, percent of viewport scrolled, visibility of navigation and subnavigation, checks footer top position in desktop viewport for positioning sticky sharing 
         const scrollHandler = () => {
             let winScroll = document.body.scrollTop || document.documentElement.scrollTop
             winScroll > lastScrollTop ? (this.scrollingDown = true) : (this.scrollingDown = false)
             this.percent = Math.round((winScroll / height) * 100)
-            this.$store.globalPercent.current = this.percent
             lastScrollTop = winScroll
+
+            this.checkFooterTopForSharingBottomPos()
+
             this.$store.navIsVisible = !this.isNavHidden()
             this.$store.subNavIsVisible = !this.isSubNavHidden()
+            this.$store.sectionNavIsVisible = !this.shouldSectionNavBeHidden()
             //console.log('winscroll: '+winScroll+' screen height: '+height + '  percent scrolled: '+ this.percent)
             //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
         }
@@ -47,6 +50,11 @@ export default () => ({
         window.addEventListener('touchmove', mouseEvent, {passive: true})
         window.addEventListener('scroll', scrollHandler, { passive: true })
     },
+
+    checkFooterTopForSharingBottomPos(){
+        this.$store.footerIsVisible ? this.$store.sharingBottomPos.current = window.innerHeight - document.querySelector('.js-pageFooter').getBoundingClientRect().top + 16 +'px' : null
+    },
+
     //Holds the percentage of scrolled viewport
     percent: 0,
 

package/dist/views/components/page/components/comments.hbs

@@ -1,5 +1,5 @@
 {{~#if (isStorybook)~}}
-    <div id="commentList" class="my-14 bg-highlight-1 h-96">
+    <div id="commentList" class="mt-14 bg-highlight-1 h-96">
         <h2 class="m-8">
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 fill-current"}}
             <span class="text-base font-headingSerif">Ihre Kommentare</span>

package/dist/views/components/page/index/page_test_story.hbs

@@ -38,6 +38,7 @@
            
             {{> components/page/story/story_article }} 
             {{> components/top_button/top_button }}
+            {{> components/footer/page_footer }}
             </main>
 
         </div>

package/dist/views/components/page/story/story_article.hbs

@@ -20,7 +20,9 @@
             {{/if}}
         {{/with}}
     {{/unless}}
-
+    
+    {{> components/social_sharing/social_sharing_copytext}}
+    
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
     {{> components/page/components/comments }}

package/dist/views/components/social_sharing/social_sharing_compact.hbs

@@ -1,5 +1,52 @@
-<div x-data="{
-        open: false,
+<div x-data="stickySharingHandler"
+    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
+    x-id="['dropdown-button']"
+    class="flex self-center justify-end ml-3 grow"
+    x-intersect:leave="$store.sharingIsVisible=false"
+    x-intersect:enter="$store.sharingIsVisible=true"
+>
+    <div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
+        <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
+            <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
+                :class="{ 'bottom-5 flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
+                            'flex-col absolute mt-3' : $store.footerIsVisible == true
+                        }"
+                class="flex self-center gap-3 bg-white left-5" 
+                >
+                <button 
+                    class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
+                    x-show="!$screen('lg')"
+                    x-ref="button"
+                    x-on:click="toggle()"
+                    :aria-expanded="open"
+                    :aria-controls="$id('dropdown-button')">
+                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
+                </button> 
+
+                <!-- Panel -->
+                <div 
+                    x-ref="panel" 
+                    x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
+                    x-transition.origin.bottom.right
+                    x-on:click.outside="close($refs.button)"
+                    :id="$id('dropdown-button')"
+                    class="self-center bg-white"
+                    :class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
+                >
+                    <ul class="flex gap-3"  :class="{ 'flex-col': $store.sharingIsVisible == false }">
+                        
+                        {{> components/social_sharing/social_sharing_compact_icons }}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    function stickySharingHandler(){
+        return {
+        open: this.$store.sharingIsOpen,
         sharingIsVisible: true,
         isDesktop: true,
         toggle() {
@@ -20,6 +67,7 @@
                 }
                 this.$refs.button.focus()
                 this.open = true
+                this.$store.sharingIsOpen = true
             }
             
         },
@@ -27,64 +75,9 @@
             if (! this.open) return
 
             this.open = false
-
+            this.$store.sharingIsOpen = false
             focusAfter && focusAfter.focus()
-        },
-        checkIfDesktop() {
-            this.isDesktop = (window.innerWidth >= 1040) ? true : false 
-        },
-        checkNaviHeight() {
-            let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
-            if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
         }
-    }"
-    x-init = "checkIfDesktop()"
-    x-on:resize.window = "checkIfDesktop()"
-    x-on:scroll.window.debounce = "checkNaviHeight()"
-    x-on:keydown.escape.prevent.stop="close($refs.button)"
-    x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-    x-id="['dropdown-button']"
-    class="flex self-center justify-end grow "
-    x-intersect:leave="sharingIsVisible = false"
-    x-intersect:enter="sharingIsVisible = true"
-     
->
-   {{!-- <div class="fixed left-1 top-40">
-        sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
-        open:<span x-text="open" ></span><br>
-        isDesktop:<span x-text="isDesktop" ></span><br>
-        PercentScrolled:<span x-text="$store.globalPercent.current"></span>
-    </div> --}}
-
-    <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
-        <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
-                <button 
-                    class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
-                    x-show="!isDesktop"
-                    x-ref="button"
-                    x-on:click="toggle()"
-                    :aria-expanded="open"
-                    :aria-controls="$id('dropdown-button')">
-                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
-                </button> 
-
-                <!-- Panel -->
-                <div
-                    x-ref="panel"
-                    x-show="open || isDesktop"
-                    x-transition.origin.right
-                    x-on:click.outside="close($refs.button)"
-                    :id="$id('dropdown-button')"
-                    class="p-1 bg-white "
-                    :class="sharingIsVisible ? 'h-8 absolute right-[60px] md:relative md:right-0 md:h-auto' : 'relative right-0 w-8 md:h-auto '"
-                >
-                    <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">
-                        
-                        {{> components/social_sharing/social_sharing_compact_icons }}
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+    }
+    }
+</script>

package/dist/views/components/social_sharing/social_sharing_copytext.hbs

@@ -0,0 +1,12 @@
+<div x-show="$screen('lg') && $store.sharingIsVisible == false" x-init="$store.sharingIsOpen = false" class="sticky w-10 col-start-2 mt-6 h-fit"
+    :class="{'top-[166px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
+            'top-[130px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
+            'top-[85px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+>
+    <div 
+        class="relative right-0 p-1 bg-white md:h-auto">
+            <ul class="flex flex-col gap-3">  
+                {{> components/social_sharing/social_sharing_compact_icons }}
+            </ul>
+    </div>
+</div>

package/dist/views_static/components/page/components/comments.hbs

@@ -1,5 +1,5 @@
 {{~#if (isStorybook)~}}
-    <div id="commentList" class="my-14 bg-highlight-1 h-96">
+    <div id="commentList" class="mt-14 bg-highlight-1 h-96">
         <h2 class="m-8">
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 fill-current"}}
             <span class="text-base font-headingSerif">Ihre Kommentare</span>

package/dist/views_static/components/page/index/page_test_story.hbs

@@ -38,6 +38,7 @@
            
             {{> components/page/story/story_article }} 
             {{> components/top_button/top_button }}
+            {{> components/footer/page_footer }}
             </main>
 
         </div>

package/dist/views_static/components/page/story/story_article.hbs

@@ -20,7 +20,9 @@
             {{/if}}
         {{/with}}
     {{/unless}}
-
+    
+    {{> components/social_sharing/social_sharing_copytext}}
+    
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
     {{> components/page/components/comments }}

package/dist/views_static/components/social_sharing/social_sharing_compact.hbs

@@ -1,5 +1,52 @@
-<div x-data="{
-        open: false,
+<div x-data="stickySharingHandler"
+    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
+    x-id="['dropdown-button']"
+    class="flex self-center justify-end ml-3 grow"
+    x-intersect:leave="$store.sharingIsVisible=false"
+    x-intersect:enter="$store.sharingIsVisible=true"
+>
+    <div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
+        <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
+            <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
+                :class="{ 'bottom-5 flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
+                            'flex-col absolute mt-3' : $store.footerIsVisible == true
+                        }"
+                class="flex self-center gap-3 bg-white left-5" 
+                >
+                <button 
+                    class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
+                    x-show="!$screen('lg')"
+                    x-ref="button"
+                    x-on:click="toggle()"
+                    :aria-expanded="open"
+                    :aria-controls="$id('dropdown-button')">
+                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
+                </button> 
+
+                <!-- Panel -->
+                <div 
+                    x-ref="panel" 
+                    x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
+                    x-transition.origin.bottom.right
+                    x-on:click.outside="close($refs.button)"
+                    :id="$id('dropdown-button')"
+                    class="self-center bg-white"
+                    :class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
+                >
+                    <ul class="flex gap-3"  :class="{ 'flex-col': $store.sharingIsVisible == false }">
+                        
+                        {{> components/social_sharing/social_sharing_compact_icons }}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    function stickySharingHandler(){
+        return {
+        open: this.$store.sharingIsOpen,
         sharingIsVisible: true,
         isDesktop: true,
         toggle() {
@@ -20,6 +67,7 @@
                 }
                 this.$refs.button.focus()
                 this.open = true
+                this.$store.sharingIsOpen = true
             }
             
         },
@@ -27,64 +75,9 @@
             if (! this.open) return
 
             this.open = false
-
+            this.$store.sharingIsOpen = false
             focusAfter && focusAfter.focus()
-        },
-        checkIfDesktop() {
-            this.isDesktop = (window.innerWidth >= 1040) ? true : false 
-        },
-        checkNaviHeight() {
-            let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
-            if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
         }
-    }"
-    x-init = "checkIfDesktop()"
-    x-on:resize.window = "checkIfDesktop()"
-    x-on:scroll.window.debounce = "checkNaviHeight()"
-    x-on:keydown.escape.prevent.stop="close($refs.button)"
-    x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-    x-id="['dropdown-button']"
-    class="flex self-center justify-end grow "
-    x-intersect:leave="sharingIsVisible = false"
-    x-intersect:enter="sharingIsVisible = true"
-     
->
-   {{!-- <div class="fixed left-1 top-40">
-        sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
-        open:<span x-text="open" ></span><br>
-        isDesktop:<span x-text="isDesktop" ></span><br>
-        PercentScrolled:<span x-text="$store.globalPercent.current"></span>
-    </div> --}}
-
-    <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
-        <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
-                <button 
-                    class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
-                    x-show="!isDesktop"
-                    x-ref="button"
-                    x-on:click="toggle()"
-                    :aria-expanded="open"
-                    :aria-controls="$id('dropdown-button')">
-                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
-                </button> 
-
-                <!-- Panel -->
-                <div
-                    x-ref="panel"
-                    x-show="open || isDesktop"
-                    x-transition.origin.right
-                    x-on:click.outside="close($refs.button)"
-                    :id="$id('dropdown-button')"
-                    class="p-1 bg-white "
-                    :class="sharingIsVisible ? 'h-8 absolute right-[60px] md:relative md:right-0 md:h-auto' : 'relative right-0 w-8 md:h-auto '"
-                >
-                    <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">
-                        
-                        {{> components/social_sharing/social_sharing_compact_icons }}
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+    }
+    }
+</script>

package/dist/views_static/components/social_sharing/social_sharing_copytext.hbs

@@ -0,0 +1,12 @@
+<div x-show="$screen('lg') && $store.sharingIsVisible == false" x-init="$store.sharingIsOpen = false" class="sticky w-10 col-start-2 mt-6 h-fit"
+    :class="{'top-[166px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
+            'top-[130px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
+            'top-[85px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+>
+    <div 
+        class="relative right-0 p-1 bg-white md:h-auto">
+            <ul class="flex flex-col gap-3">  
+                {{> components/social_sharing/social_sharing_compact_icons }}
+            </ul>
+    </div>
+</div>

package/package.json

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

package/src/assets/css/custom-utilities.css

@@ -188,7 +188,7 @@
         minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end]; 
         grid-column: main;
     }
-    .grid-article > :not(.article-breakout, .article-full-width){
+    .grid-article > :not(.article-breakout, .article-full-width, .sticky){
         grid-column: narrow;
     }
     .article-breakout {
@@ -203,6 +203,7 @@
     .copytextWrapper > :not(.article-breakout, .article-full-width){
         grid-column: narrow;
     }
+
     .grid-content {
         grid-template-areas:
     "head"

package/src/assets/js/alpine.js

@@ -39,10 +39,12 @@ Alpine.store('serviceID', {
 Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
-Alpine.store('globalPercent', {
+Alpine.store('sectionNavIsVisible', false)
+Alpine.store('sharingIsVisible', true)
+Alpine.store('sharingIsOpen', false)
+Alpine.store('sharingBottomPos', {
     current: '0'
 })
-
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)
 Alpine.data('overlayHandler', overlayHandler)

package/src/stories/views/components/page/components/comments.hbs

@@ -1,5 +1,5 @@
 {{~#if (isStorybook)~}}
-    <div id="commentList" class="my-14 bg-highlight-1 h-96">
+    <div id="commentList" class="mt-14 bg-highlight-1 h-96">
         <h2 class="m-8">
             {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 fill-current"}}
             <span class="text-base font-headingSerif">Ihre Kommentare</span>

package/src/stories/views/components/page/index/page_test_story.hbs

@@ -38,6 +38,7 @@
            
             {{> components/page/story/story_article }} 
             {{> components/top_button/top_button }}
+            {{> components/footer/page_footer }}
             </main>
 
         </div>

package/src/stories/views/components/page/story/story_article.hbs

@@ -20,7 +20,9 @@
             {{/if}}
         {{/with}}
     {{/unless}}
-
+    
+    {{> components/social_sharing/social_sharing_copytext}}
+    
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
     {{> components/page/components/comments }}

package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js

@@ -29,15 +29,18 @@ export default () => ({
         const mouseDownHandler = (e) => {
             clickedOnScrollbar(e.clientX) ? mouseEvent() : null
         }
-        // main scroll handler, defines scroll direction, percent of viewport scrolled, visibility of navigation and subnavigation
+        // main scroll handler, defines scroll direction, percent of viewport scrolled, visibility of navigation and subnavigation, checks footer top position in desktop viewport for positioning sticky sharing 
         const scrollHandler = () => {
             let winScroll = document.body.scrollTop || document.documentElement.scrollTop
             winScroll > lastScrollTop ? (this.scrollingDown = true) : (this.scrollingDown = false)
             this.percent = Math.round((winScroll / height) * 100)
-            this.$store.globalPercent.current = this.percent
             lastScrollTop = winScroll
+
+            this.checkFooterTopForSharingBottomPos()
+
             this.$store.navIsVisible = !this.isNavHidden()
             this.$store.subNavIsVisible = !this.isSubNavHidden()
+            this.$store.sectionNavIsVisible = !this.shouldSectionNavBeHidden()
             //console.log('winscroll: '+winScroll+' screen height: '+height + '  percent scrolled: '+ this.percent)
             //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
         }
@@ -47,6 +50,11 @@ export default () => ({
         window.addEventListener('touchmove', mouseEvent, {passive: true})
         window.addEventListener('scroll', scrollHandler, { passive: true })
     },
+
+    checkFooterTopForSharingBottomPos(){
+        this.$store.footerIsVisible ? this.$store.sharingBottomPos.current = window.innerHeight - document.querySelector('.js-pageFooter').getBoundingClientRect().top + 16 +'px' : null
+    },
+
     //Holds the percentage of scrolled viewport
     percent: 0,
 

package/src/stories/views/components/social_sharing/social_sharing_compact.hbs

@@ -1,5 +1,52 @@
-<div x-data="{
-        open: false,
+<div x-data="stickySharingHandler"
+    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
+    x-id="['dropdown-button']"
+    class="flex self-center justify-end ml-3 grow"
+    x-intersect:leave="$store.sharingIsVisible=false"
+    x-intersect:enter="$store.sharingIsVisible=true"
+>
+    <div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
+        <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
+            <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
+                :class="{ 'bottom-5 flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
+                            'flex-col absolute mt-3' : $store.footerIsVisible == true
+                        }"
+                class="flex self-center gap-3 bg-white left-5" 
+                >
+                <button 
+                    class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
+                    x-show="!$screen('lg')"
+                    x-ref="button"
+                    x-on:click="toggle()"
+                    :aria-expanded="open"
+                    :aria-controls="$id('dropdown-button')">
+                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
+                </button> 
+
+                <!-- Panel -->
+                <div 
+                    x-ref="panel" 
+                    x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
+                    x-transition.origin.bottom.right
+                    x-on:click.outside="close($refs.button)"
+                    :id="$id('dropdown-button')"
+                    class="self-center bg-white"
+                    :class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
+                >
+                    <ul class="flex gap-3"  :class="{ 'flex-col': $store.sharingIsVisible == false }">
+                        
+                        {{> components/social_sharing/social_sharing_compact_icons }}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    function stickySharingHandler(){
+        return {
+        open: this.$store.sharingIsOpen,
         sharingIsVisible: true,
         isDesktop: true,
         toggle() {
@@ -20,6 +67,7 @@
                 }
                 this.$refs.button.focus()
                 this.open = true
+                this.$store.sharingIsOpen = true
             }
             
         },
@@ -27,64 +75,9 @@
             if (! this.open) return
 
             this.open = false
-
+            this.$store.sharingIsOpen = false
             focusAfter && focusAfter.focus()
-        },
-        checkIfDesktop() {
-            this.isDesktop = (window.innerWidth >= 1040) ? true : false 
-        },
-        checkNaviHeight() {
-            let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
-            if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
         }
-    }"
-    x-init = "checkIfDesktop()"
-    x-on:resize.window = "checkIfDesktop()"
-    x-on:scroll.window.debounce = "checkNaviHeight()"
-    x-on:keydown.escape.prevent.stop="close($refs.button)"
-    x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-    x-id="['dropdown-button']"
-    class="flex self-center justify-end grow "
-    x-intersect:leave="sharingIsVisible = false"
-    x-intersect:enter="sharingIsVisible = true"
-     
->
-   {{!-- <div class="fixed left-1 top-40">
-        sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
-        open:<span x-text="open" ></span><br>
-        isDesktop:<span x-text="isDesktop" ></span><br>
-        PercentScrolled:<span x-text="$store.globalPercent.current"></span>
-    </div> --}}
-
-    <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
-        <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
-            <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
-                <button 
-                    class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
-                    x-show="!isDesktop"
-                    x-ref="button"
-                    x-on:click="toggle()"
-                    :aria-expanded="open"
-                    :aria-controls="$id('dropdown-button')">
-                    {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
-                </button> 
-
-                <!-- Panel -->
-                <div
-                    x-ref="panel"
-                    x-show="open || isDesktop"
-                    x-transition.origin.right
-                    x-on:click.outside="close($refs.button)"
-                    :id="$id('dropdown-button')"
-                    class="p-1 bg-white "
-                    :class="sharingIsVisible ? 'h-8 absolute right-[60px] md:relative md:right-0 md:h-auto' : 'relative right-0 w-8 md:h-auto '"
-                >
-                    <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">
-                        
-                        {{> components/social_sharing/social_sharing_compact_icons }}
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+    }
+    }
+</script>

package/src/stories/views/components/social_sharing/social_sharing_copytext.hbs

@@ -0,0 +1,12 @@
+<div x-show="$screen('lg') && $store.sharingIsVisible == false" x-init="$store.sharingIsOpen = false" class="sticky w-10 col-start-2 mt-6 h-fit"
+    :class="{'top-[166px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
+            'top-[130px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,
+            'top-[85px]' : !$store.sectionNavIsVisible && $screen('lg')}"
+>
+    <div 
+        class="relative right-0 p-1 bg-white md:h-auto">
+            <ul class="flex flex-col gap-3">  
+                {{> components/social_sharing/social_sharing_compact_icons }}
+            </ul>
+    </div>
+</div>