hr-design-system-handlebars 1.75.1 → 1.75.2

package/dist/{views/components/social_sharing/social_sharing_compact_icons.hbs → views_static/components/social_sharing/social_sharing_icons.hbs}

@@ -1,3 +1,44 @@
+{{~#with this.copyToClipboardLink}}
+<li x-data="copyHandler()" x-on:click="copyToClipboard" class="relative">
+    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        title="{{loca "share_copy_linktitle" }}"
+        data-url="{{this}}"
+        {{#with ../_trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::copybutton"}]}'
+        {{/with}}
+    >
+        <span x-cloak class="flex items-center justify-center w-full h-full" x-show="!copySuccess">{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}</span>
+        <span x-cloak class="flex items-center justify-center w-full h-full" x-show="copySuccess">{{~> components/base/image/icon _addClass="w-6 h-6 text-green-600" _icon="status-done" _iconmap="icons" ~}}</span>
+    </button>
+    <div x-cloak x-show="copySuccess" class="absolute left-8 flex flex-row items-center justify-start px-4 shadow w-auto h-8 top-0 ml-0.5 text-xs bg-white whitespace-nowrap sm480:text-sm font-headingSerif dark:text-text-dark">    
+        {{loca "share_copy_message" }}
+    </div>
+</li>
+<script>
+    function copyHandler(){
+        return  {  
+            copySuccess: false,
+            copyToClipboard(event) {
+                const clickedContainer = event.currentTarget.parentNode
+                const url = clickedContainer.querySelector ("button:first-of-type").getAttribute('data-url');
+                //TODO: maby do this with a magical helper in alpine
+                navigator.clipboard
+                .writeText(url)
+                .then(() => {
+                    console.log("successfully copied");
+                    this.copySuccess = true
+                    window.setTimeout(() => {
+                        this.copySuccess = false
+                    }, 2000)
+                })
+                .catch(() => {
+                    console.log("something went wrong with copy");
+                });
+            }
+        }
+    }
+</script>
+{{/with}}
 {{~#with this.twitterLink ~}}
 <li>
     <a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
@@ -7,7 +48,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_x_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::X"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
@@ -23,7 +64,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_facebook_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::facebook"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
@@ -39,7 +80,7 @@
         rel="noopener noreferrer"
         title="{{loca "share_whatsapp_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::whatsapp"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
@@ -53,48 +94,10 @@
         href="{{this}}"
         title="{{loca "share_mail_linktitle" }}"
         {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::{{if ../_socialSharingType ../_socialSharingType "default" }}::mailto"}]}'
         {{/with}}
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
     </a>
 </li>
-{{/with}}
-
-<li x-data="copyHandler()" x-on:click="copyToClipboard" class="">
-    <button class="{{#with ../_trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
-        title="{{loca "share_copy_linktitle" }}"
-        {{#with ../_trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::copybutton"}]}'
-        {{/with}}
-    >
-        {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
-    </button>
-    <div class="absolute flex flex-row items-center justify-start rounded pr-4 shadow hidden w-auto h-8 -mt-8 ml-0.5 text-xs bg-white whitespace-nowrap js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-        {{~> components/base/image/icon _addClass="w-7 h-7 text-green-600 mr-4" _icon="status-done" _iconmap="icons" ~}}
-        {{loca "share_copy_message" }}
-    </div>
-</li>
-<script>
-    function copyHandler(){
-        return  {  
-            copyToClipboard(event) {
-                const clickedContainer = event.currentTarget.parentNode
-                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
-                const el = document.createElement('textarea')
-                el.value = window.location.href
-                el.setAttribute('readonly', '')
-                el.style.position = 'absolute'
-                el.style.left = '-9999px'
-                document.body.appendChild(el)
-                el.select()
-                document.execCommand('copy')
-                document.body.removeChild(el)
-                messageDiv.classList.remove('hidden')
-                window.setTimeout(() => {
-                    messageDiv.classList.add('hidden')
-                }, 2000)
-            }
-        }
-    }
-</script>
+{{/with}}

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

@@ -0,0 +1,71 @@
+
+{{~#with this.socialSharing ~}}    
+<div x-data="stickySharingHandlerMobile"
+    class=" relative ml-5 z-100 h-9.5 w-9.5"
+    :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
+    x-on:resize.window="$store.sharingIsOpenMobile = false"    
+    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    @click.outside="close()"
+    >
+    <div class="absolute bottom-0 flex flex-col self-center gap-3 bg-white">
+        <button 
+            class="{{#with ../this.trackingData}}js-load {{/with}}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 lg:hidden"
+            x-ref="button"
+            x-on:click="toggle()"
+            :aria-expanded="open"
+            :aria-controls="$id('dropdown-button')"
+            
+            {{#with ../this.trackingData}}
+                data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
+            {{/with}}
+            
+            >
+                {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
+        </button>
+        <div 
+            x-ref="panel" 
+            :class="$store.sharingIsOpenMobile ? 'flex' : 'hidden '"                    
+            :id="$id('dropdown-button')"
+            class="relative right-0 self-center bg-white md:h-auto lg:hidden"
+        >
+            <ul class="flex flex-col gap-3 mt-2">  
+                {{> components/social_sharing/social_sharing_icons _socialSharingType="mobile-sticky"}}
+            </ul>
+        </div>
+    </div>
+</div>
+    <script>
+        function stickySharingHandlerMobile(){
+            return {
+            open: false,
+            sharingIsVisible: true,
+            isDesktop: true,
+            toggle() {
+                var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
+                var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+                var isMobile= isMobileApple || isMobileOther;
+                if (navigator.share && isMobile) {
+                    navigator.share({
+                        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));
+                } else {
+                    if (this.$store.sharingIsOpenMobile) {
+                        return this.close()
+                    }    
+                    this.$refs.button.focus()
+                    this.$store.sharingIsOpenMobile = true             
+                }
+                
+            },
+            close(focusAfter) {
+                if (!this.$store.sharingIsOpenMobile) return
+                this.$store.sharingIsOpenMobile = false
+            }
+        }
+        }
+    </script>
+{{/with}}

package/dist/views_static/components/top_button/top_button.hbs

@@ -1,21 +1,27 @@
-<div class="h-8" x-data="{ isVisible: false }">
-    <div class="grid h-8 grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">
-        <div class="flex justify-end h-8 col-full sm:col-main"
-        :class="{ 'bg-white': $store.footerIsVisible }">
+<div class="" x-data="{ isVisible: false }">
+    <div class="grid grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">       
+        <div class="flex justify-between h-0 col-full sm:col-main"
+        :class="{ 'bg-white h-8': $store.footerIsVisible }"
+        x-show="!$store.sharingIsVisible && isVisible"
+        x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
+        x-transition:enter-start="opacity-0 translate-y-8"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 translate-y-12"
+        @scroll.window="isVisible = ((window.pageYOffset * 2) > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+        >
+            {{> components/social_sharing/social_sharing_mobile }}
+        
             <button
-                @scroll.window="isVisible = (window.pageYOffset > (window.innerHeight || (document.documentElement || document.body).clientHeight))"
+                
                 @click="window.scrollTo({top: 0, behavior: 'smooth'})"
-                x-show="isVisible"
-                x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
-                x-transition:enter-start="opacity-0 -translate-y-8"
-                x-transition:enter-end="opacity-100 translate-y-0"
-                x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
-                x-transition:leave-start="opacity-100 translate-y-0"
-                x-transition:leave-end="opacity-0 translate-y-12"               
-                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105  [@media(min-width:1170px)]:-mr-14"
+                :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"        
+                class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} ml-auto z-100 p-2 h-max mr-5 hover:scale-105  [@media(min-width:1170px)]:-mr-14"
                 >
                 {{> components/base/image/icon _icon="arrow-up"  _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}            
             </button>
+
         </div>
     </div>
     {{! Dieses DIV ist notwendig um bei Seiten mit einem Hintergrund zu vermeiden dass unten eine Lücke entsteht bei der das hintergrundbild durchscheint}}

package/package.json

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

package/src/assets/fixtures/page/metadatabox.json

@@ -13,6 +13,7 @@
         "twitterLink": "/twitterLink-url",
         "facebookLink": "/facebookLink-url",
         "whatsappLink": "/whatsappLink-url",
-        "mailtoLink": "/mailtoLink-url"
+        "mailtoLink": "/mailtoLink-url",
+        "copyToClipboardLink": "/copyToClipboard-url"
     }
 }

package/src/assets/fixtures/page/metadatabox_comments.json

@@ -17,6 +17,7 @@
         "twitterLink": "/twitterLink-url",
         "facebookLink": "/facebookLink-url",
         "whatsappLink": "/whatsappLink-url",
-        "mailtoLink": "/mailtoLink-url"
+        "mailtoLink": "/mailtoLink-url",
+        "copyToClipboardLink": "/copyToClipboard-url"
     }
 }

package/src/assets/fixtures/page/metadatabox_more_authors.json

@@ -37,6 +37,7 @@
         "twitterLink": "/twitterLink-url",
         "facebookLink": "/facebookLink-url",
         "whatsappLink": "/whatsappLink-url",
-        "mailtoLink": "/mailtoLink-url"
+        "mailtoLink": "/mailtoLink-url",
+        "copyToClipboardLink": "/copyToClipboard-url"
     }
 }

package/src/assets/fixtures/page/metadatabox_more_authors_comments.json

@@ -41,6 +41,7 @@
         "twitterLink": "/twitterLink-url",
         "facebookLink": "/facebookLink-url",
         "whatsappLink": "/whatsappLink-url",
-        "mailtoLink": "/mailtoLink-url"
+        "mailtoLink": "/mailtoLink-url",
+        "copyToClipboardLink": "/copyToClipboard-url"
     }
 }

package/src/assets/fixtures/page/metadatabox_one_author.json

@@ -27,6 +27,7 @@
         "twitterLink": "/twitterLink-url",
         "facebookLink": "/facebookLink-url",
         "whatsappLink": "/whatsappLink-url",
-        "mailtoLink": "/mailtoLink-url"
+        "mailtoLink": "/mailtoLink-url",
+        "copyToClipboardLink": "/copyToClipboard-url"
     }
 }

package/src/assets/fixtures/page/metadatabox_one_author_comments.json

@@ -31,6 +31,7 @@
         "twitterLink": "/twitterLink-url",
         "facebookLink": "/facebookLink-url",
         "whatsappLink": "/whatsappLink-url",
-        "mailtoLink": "/mailtoLink-url"
+        "mailtoLink": "/mailtoLink-url",
+        "copyToClipboardLink": "/copyToClipboard-url"
     }
 }

package/src/assets/fixtures/page/metadatabox_one_author_without_picture.json

@@ -17,6 +17,7 @@
         "twitterLink": "/twitterLink-url",
         "facebookLink": "/facebookLink-url",
         "whatsappLink": "/whatsappLink-url",
-        "mailtoLink": "/mailtoLink-url"
+        "mailtoLink": "/mailtoLink-url",
+        "copyToClipboardLink": "/copyToClipboard-url"
     }
 }

package/src/assets/fixtures/page/story/story.inc.json

@@ -134,7 +134,8 @@
         "twitterLink": "/twitterLink-url",
         "facebookLink": "/facebookLink-url",
         "whatsappLink": "/whatsappLink-url",
-        "mailtoLink": "/mailtoLink-url"
+        "mailtoLink": "/mailtoLink-url",
+        "copyToClipboardLink": "/copyToClipboard-url"
     },
     "programReference": {
         "hasReference": true,

package/src/assets/fixtures/socialsharing/socialsharing.inc.json

@@ -2,5 +2,6 @@
     "twitterLink" : "#",
     "whatsappLink" : "#",
     "facebookLink" : "#",
-    "mailtoLink" : "#"
+    "mailtoLink" : "#",
+    "copyToClipboardLink": "#"
 }

package/src/assets/icons/icons/svgmap/copy-ds.svg

@@ -1,21 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 28.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="kontakt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 320 320" style="enable-background:new 0 0 320 320;" xml:space="preserve">
-<g>
-	<path d="M191.5,200L191.5,200l-9.5,13.2c-1.4,2-3.2,3.6-5.2,4.8c-2,1.3-4.3,2.1-6.7,2.5l0,0c-5,0.8-9.8-0.5-13.6-3.2
-		c-3.8-2.7-6.5-6.9-7.3-11.8l0,0c-0.4-2.4-0.3-4.8,0.2-7.1c0.5-2.3,1.5-4.5,2.9-6.4l9.5-13.2c5.2-7.2-5.7-15.1-11-7.9l-9.5,13.2
-		c-2.4,3.4-4.2,7.2-5.1,11.2c-0.9,4.1-1.1,8.3-0.4,12.4c1.4,8.7,6.2,15.9,12.8,20.6c6.6,4.7,15,6.9,23.6,5.5
-		c4.1-0.7,8.1-2.1,11.6-4.3c3.4-2.1,6.5-5,9-8.4l9.5-13.2C207.6,200.7,196.7,192.8,191.5,200z"/>
-	<path d="M217.6,50.2c0-5.3-4.3-9.7-9.7-9.7H63.8c-15.2,0-27.5,12.4-27.5,27.5v157.6c0,5.3,4.3,9.7,9.7,9.7s9.7-4.3,9.7-9.7V68
-		c0-4.5,3.7-8.2,8.2-8.2H208C213.3,59.8,217.6,55.5,217.6,50.2z"/>
-	<path d="M180.7,195.9l18-27.1c5.2-7.2-5.7-15.1-10.9-7.9l-18,27.2C164.6,195.3,175.5,203.1,180.7,195.9z"/>
-	<path d="M219.6,128.9c-6.6-4.7-15-6.9-23.6-5.5c-4.1,0.7-8.1,2.1-11.6,4.3c-3.5,2.2-6.6,5-9,8.4l-9.7,13.4
-		c-5.2,7.2,5.8,15.1,11,7.9v0l9.7-13.4c1.4-1.9,3.1-3.6,5.2-4.8c2.1-1.3,4.3-2.1,6.7-2.5c5-0.8,9.8,0.4,13.6,3.2
-		c3.8,2.7,6.5,6.9,7.3,11.9c0.4,2.3,0.3,4.8-0.2,7.1c-0.5,2.3-1.5,4.5-2.9,6.4l-9.7,13.4c-5.2,7.2,5.8,15.1,11,7.9l9.7-13.4
-		c2.4-3.4,4.2-7.2,5.1-11.2c0.9-4.1,1.1-8.3,0.4-12.4C231,140.9,226.2,133.6,219.6,128.9z"/>
-	<path d="M256.2,84.8H112c-15.2,0-27.5,12.4-27.5,27.5V252c0,15.1,12.4,27.5,27.5,27.5h144.2c15.1,0,27.5-12.5,27.5-27.5V112.3
-		C283.8,97.1,271.4,84.8,256.2,84.8z M264.5,252c0,4.5-3.7,8.2-8.2,8.2H112c-4.5,0-8.2-3.7-8.2-8.2V112.3c0-4.5,3.7-8.2,8.2-8.2
-		h144.2c4.5,0,8.2,3.7,8.2,8.2V252z"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="copy" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 320 320">
+  <path d="M288.4,89.9c-1-14.4-7.5-28.3-18.3-39.1-10.8-10.8-24.7-17.3-39.1-18.3-7.2-.5-14.2.4-20.7,2.6-6.9,2.3-12.9,6.2-18.1,11.3l-48.8,48.8h2.2c1.1,0,2.3.2,3.4.3,6.8.5,13.7,1.9,20.3,4.1l.6.2,37.9-37.9c11.7-11.7,32.7-9.8,46.9,4.4,14.2,14.2,16.1,35.2,4.4,46.9l-62.3,62.4c-5.6,5.6-13.6,8.3-22.5,7.5s-17.6-5.1-24.5-11.9-4.8-3.2-7.7-3.2-5.6,1.1-7.7,3.2c-4.2,4.2-4.2,11.2,0,15.5,10.8,10.8,24.7,17.3,39.1,18.3,1.3,0,2.6.2,3.9.2,5.8,0,11.4-.9,16.8-2.7,6.9-2.3,12.9-6.2,18.1-11.3l62.4-62.4c5.1-5.1,8.9-11.2,11.3-18.1,2.2-6.6,3-13.5,2.5-20.7Z"/>
+  <path d="M186.7,134.3c-10.8-10.8-24.7-17.3-39.1-18.3-7.1-.5-14.2.4-20.7,2.6-6.9,2.3-12.9,6.2-18.1,11.3l-62.4,62.4c-5.1,5.1-8.9,11.2-11.3,18.1-2.3,6.6-3.1,13.5-2.6,20.7,1,14.4,7.5,28.3,18.3,39.1,10.8,10.8,24.7,17.3,39.1,18.3,1.3,0,2.6.2,3.9.2,5.8,0,11.4-.9,16.8-2.7,6.9-2.3,12.9-6.2,18.1-11.3l48.8-48.8h-2.2c-1.1,0-2.3-.2-3.4-.3-6.8-.5-13.7-1.9-20.3-4.1l-.6-.2-37.9,37.7c-5.6,5.6-13.6,8.3-22.5,7.5-8.9-.8-17.6-5.1-24.5-11.9-6.8-6.8-11-15.3-11.9-24.1-.9-9,1.7-17.1,7.5-22.9l62.4-62.4c5.6-5.6,13.6-8.3,22.5-7.5s17.6,5.1,24.5,11.9c4.2,4.2,11.2,4.2,15.5,0,2.1-2.1,3.2-4.8,3.2-7.7s-1.1-5.6-3.2-7.7Z"/>
+</svg>