hr-design-system-handlebars 1.67.2 → 1.67.4

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

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

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

@@ -52,7 +52,7 @@ export default () => ({
     },
 
     checkFooterTopForSharingBottomPos(){
-        this.$store.footerIsVisible ? this.$store.sharingBottomPos.current = window.innerHeight - document.querySelector('.js-pageFooter').getBoundingClientRect().top + 16 +'px' : null
+        this.$store.footerIsVisible ? this.$store.sharingBottomPos.current = Math.round(window.innerHeight - document.querySelector('.js-pageFooter').getBoundingClientRect().top) + 16 +'px' : null
     },
 
     //Holds the percentage of scrolled viewport

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

@@ -1,48 +1,47 @@
-<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> 
+{{~#with this.socialSharing ~}}
+    <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>
+                    <!-- 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>
-</div>
+{{/with}}
 <script>
     function stickySharingHandler(){
         return {
@@ -55,9 +54,9 @@
             var isMobile= isMobileApple || isMobileOther;
             if (navigator.share && isMobile) {
                 navigator.share({
-                    title: 'Awesome Content',
-                    text: 'Check out this awesome content!',
-                    url: 'https://example.com',
+                    title: document.title,
+                    text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
+                    url: window.location.href,
                 })
                 .then(() => console.log('Shared successfully'))
                 .catch((error) => console.error('Sharing failed:', error));
@@ -73,7 +72,6 @@
         },
         close(focusAfter) {
             if (! this.open) return
-
             this.open = false
             this.$store.sharingIsOpen = false
             focusAfter && focusAfter.focus()

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

@@ -1,25 +1,18 @@
 import story_template from './social_sharing_compact.hbs'
+import socialSharing from '../page/story/fixtures/story.json'
 
+console.log(socialSharing)
 const Template = ({ ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<span>${topline}</span>`;
     return story_template({ ...args })
 }
 
 export default {
     title: 'Komponenten/Social Sharing',
-}
+} 
 
 export const Default = {
     render: Template.bind({}),
     name: 'Social Sharing Kompakt',
-    parameters: {
-    },
-    decorators: [
-        (Story) => {
-            return `<div class="w-full mt-40 h-[500rem]">  
-             ${Story()} 
-             </div>`
-        },
-    ],
+    args: socialSharing
+    
 }

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

@@ -1,3 +1,4 @@
+{{~#with this.twitterLink ~}}
 <li>
     <a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         
@@ -12,6 +13,8 @@
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
     </a>
 </li>
+{{/with}}
+{{~#with this.facebookLink}}
 <li class="">
     <a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         
@@ -26,6 +29,8 @@
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
     </a>
 </li>
+{{/with}}
+{{~#with this.whatsappLink}}
 <li class="">
     <a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         
@@ -40,6 +45,8 @@
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
     </a>
 </li>
+{{/with}}
+{{~#with this.mailtoLink}}
 <li class="">
     <a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         
@@ -52,6 +59,8 @@
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
+{{/with}}
+
 <li class="">
     <a class="{{#with ../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
         
@@ -63,4 +72,4 @@
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
-</li>
+</li>