hr-design-system-handlebars 1.70.3 → 1.70.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.70.4 (Wed Jun 12 2024)
+
+#### 🐛 Bug Fix
+
+- better positioning and handling of copymessage [#941](https://github.com/mumprod/hr-design-system-handlebars/pull/941) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.70.3 (Tue Jun 11 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1317,6 +1317,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .-mt-6 {
   margin-top: -1.5rem;
 }
+.-mt-8 {
+  margin-top: -2rem;
+}
 .-mt-\[18px\] {
   margin-top: -18px;
 }
@@ -1362,6 +1365,12 @@ article.indexTextDS .indexTextHighlighted .link {
 .mb-8 {
   margin-bottom: 2rem;
 }
+.ml-0 {
+  margin-left: 0px;
+}
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -3350,7 +3359,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1718128408094;
+  counter-reset: cnt1718191247598;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3729,7 +3738,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1718128408094 1;
+  counter-increment: cnt1718191247598 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3745,7 +3754,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1718128408094);
+  content: counter(cnt1718191247598);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -11,7 +11,7 @@
             <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-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : $store.footerIsVisible == true }"
+                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
                     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"

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

@@ -70,17 +70,17 @@
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
+    <div class="absolute flex flex-row items-center justify-start 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-2" _icon="status-done" _iconmap="icons" ~}}
+        {{loca "share_copy_message" }}
+    </div>
 </li>
-<div class="absolute flex flex-row items-center justify-end hidden w-full h-8 text-xs bg-white js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-    {{~> components/base/image/icon _addClass="w-6 h-6 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
-    {{loca "share_copy_message" }}
-</div>
-
 <script>
     function copyHandler(){
         return  {  
             copyToClipboard(event) {
-                const messageDiv = document.querySelector('.js-copyMessage')
+                const clickedContainer = event.currentTarget.parentNode
+                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
                 const el = document.createElement('textarea')
                 el.value = window.location.href
                 el.setAttribute('readonly', '')

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

@@ -11,7 +11,7 @@
             <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-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : $store.footerIsVisible == true }"
+                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
                     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"

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

@@ -70,17 +70,17 @@
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
+    <div class="absolute flex flex-row items-center justify-start 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-2" _icon="status-done" _iconmap="icons" ~}}
+        {{loca "share_copy_message" }}
+    </div>
 </li>
-<div class="absolute flex flex-row items-center justify-end hidden w-full h-8 text-xs bg-white js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-    {{~> components/base/image/icon _addClass="w-6 h-6 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
-    {{loca "share_copy_message" }}
-</div>
-
 <script>
     function copyHandler(){
         return  {  
             copyToClipboard(event) {
-                const messageDiv = document.querySelector('.js-copyMessage')
+                const clickedContainer = event.currentTarget.parentNode
+                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
                 const el = document.createElement('textarea')
                 el.value = window.location.href
                 el.setAttribute('readonly', '')

package/package.json

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

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

@@ -11,7 +11,7 @@
             <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-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : $store.footerIsVisible == true }"
+                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
                     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"

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

@@ -70,17 +70,17 @@
     >
         {{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
     </a>
+    <div class="absolute flex flex-row items-center justify-start 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-2" _icon="status-done" _iconmap="icons" ~}}
+        {{loca "share_copy_message" }}
+    </div>
 </li>
-<div class="absolute flex flex-row items-center justify-end hidden w-full h-8 text-xs bg-white js-copyMessage sm480:text-sm font-headingSerif dark:text-text-dark">
-    {{~> components/base/image/icon _addClass="w-6 h-6 text-green-600 mr-2" _icon="status-done" _iconmap="icons" ~}}
-    {{loca "share_copy_message" }}
-</div>
-
 <script>
     function copyHandler(){
         return  {  
             copyToClipboard(event) {
-                const messageDiv = document.querySelector('.js-copyMessage')
+                const clickedContainer = event.currentTarget.parentNode
+                const messageDiv = clickedContainer.querySelector('.js-copyMessage')
                 const el = document.createElement('textarea')
                 el.value = window.location.href
                 el.setAttribute('readonly', '')