hr-design-system-handlebars 1.83.10 → 1.83.12

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.83.12 (Wed Jul 24 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3264 - Webview: Abstand von Dachzeile nach oben [#1029](https://github.com/mumprod/hr-design-system-handlebars/pull/1029) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.83.11 (Wed Jul 24 2024)
+
+#### 🐛 Bug Fix
+
+- Social Sharing Tracking- first time show added [#1028](https://github.com/mumprod/hr-design-system-handlebars/pull/1028) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.83.10 (Tue Jul 23 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3322,7 +3322,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1721748234466;
+  counter-reset: cnt1721832713933;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3730,7 +3730,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1721748234466 1;
+  counter-increment: cnt1721832713933 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3746,7 +3746,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1721748234466);
+  content: counter(cnt1721832713933);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6153,6 +6153,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-right: 1.625rem;
   }
 
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
   .sm\:mt-1 {
     margin-top: 0.25rem;
   }

package/dist/assets/js/components/social_sharing/socialSharingHandler.alpine.js

@@ -4,7 +4,8 @@ export default (module) => ({
     open: false,
     sharingIsVisible: true,
     isDesktop: true,
-    
+    sharingModuleWasNeverShown: true,
+    desktopSharingModuleWasNeverShown: true,
     toggle() {
         
         var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
@@ -38,6 +39,19 @@ export default (module) => ({
         if(trackClick) {
             uxAction('socialShareClick::'+module+'::sharingIconClose');
         }
+    },
+    sharingModuleShown(desktop){
+
+        if(this.sharingModuleWasNeverShown && !desktop){
+            console.log('Sharing Module '+module+' was shown for the first time!!!');
+            uxAction('socialShareClick::'+module+'::shown');
+            this.sharingModuleWasNeverShown = false;
+        }
+        if(this.desktopSharingModuleWasNeverShown && desktop){
+            console.log('Sharing Module '+module+'Desktop was shown for the first time!!!');
+            uxAction('socialShareClick::'+module+'Desktop::shown');
+            this.desktopSharingModuleWasNeverShown = false;
+        }
     }
     
 })

package/dist/views/components/page/base/page_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page">
+<div class="grid grid-page{{#if _webview}} mt-4 sm:mt-0{{/if}}">
     <{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-baseline bg-white dark:bg-black grid-article">
         {{> @partial-block }}    
     </{{#if _isArticle}}article{{else}}div{{/if}}>

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

@@ -1,4 +1,5 @@
-{{#>components/page/base/page_wrapper _isArticle=true}}
+{{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
+
     {{> components/page/base/page_header}}
 
     {{> components/page/components/shorttext _text=this.shorttext }}

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

@@ -1,5 +1,12 @@
 {{~#with this.socialSharing ~}}
-    <div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="" class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+    <div 
+        x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" 
+        x-init="" 
+        class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        x-data="socialSharingHandler('vertical-desktop')"
+        x-intersect="sharingModuleShown()"
+        ax-load 
+        x-ignore
         {{#if ../_useSticky}}
         :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
                 'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,

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

@@ -19,7 +19,8 @@
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"
-                x-show="$store.sharingIsVisible"              
+                x-show="$store.sharingIsVisible" 
+                x-intersect="sharingModuleShown()"            
                 >
                     {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
             </button>
@@ -28,6 +29,7 @@
                 :class="{ 'hidden': !$store.sharingIsOpen.metadatabox,'flex': $store.sharingIsOpen.metadatabox }"           
                 :id="$id('dropdown-button')"
                 class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
+                x-intersect="sharingModuleShown(true)"
             >
                 <ul class="flex gap-3">  
                     {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox" _trackingData=../this.trackingData}}

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

@@ -18,6 +18,7 @@
             :aria-expanded="open"
             :aria-controls="$id('dropdown-button')"
             aria-label='{{loca "share_linktitle" }}'
+            x-intersect="sharingModuleShown()"
             >
                 {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
         </button>

package/dist/views_static/components/page/base/page_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page">
+<div class="grid grid-page{{#if _webview}} mt-4 sm:mt-0{{/if}}">
     <{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-baseline bg-white dark:bg-black grid-article">
         {{> @partial-block }}    
     </{{#if _isArticle}}article{{else}}div{{/if}}>

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

@@ -1,4 +1,5 @@
-{{#>components/page/base/page_wrapper _isArticle=true}}
+{{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
+
     {{> components/page/base/page_header}}
 
     {{> components/page/components/shorttext _text=this.shorttext }}

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

@@ -1,5 +1,12 @@
 {{~#with this.socialSharing ~}}
-    <div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="" class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+    <div 
+        x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" 
+        x-init="" 
+        class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        x-data="socialSharingHandler('vertical-desktop')"
+        x-intersect="sharingModuleShown()"
+        ax-load 
+        x-ignore
         {{#if ../_useSticky}}
         :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
                 'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,

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

@@ -19,7 +19,8 @@
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"
-                x-show="$store.sharingIsVisible"              
+                x-show="$store.sharingIsVisible" 
+                x-intersect="sharingModuleShown()"            
                 >
                     {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
             </button>
@@ -28,6 +29,7 @@
                 :class="{ 'hidden': !$store.sharingIsOpen.metadatabox,'flex': $store.sharingIsOpen.metadatabox }"           
                 :id="$id('dropdown-button')"
                 class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
+                x-intersect="sharingModuleShown(true)"
             >
                 <ul class="flex gap-3">  
                     {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox" _trackingData=../this.trackingData}}

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

@@ -18,6 +18,7 @@
             :aria-expanded="open"
             :aria-controls="$id('dropdown-button')"
             aria-label='{{loca "share_linktitle" }}'
+            x-intersect="sharingModuleShown()"
             >
                 {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
         </button>

package/package.json

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

package/src/stories/views/components/page/base/page_wrapper.hbs

@@ -1,4 +1,4 @@
-<div class="grid grid-page">
+<div class="grid grid-page{{#if _webview}} mt-4 sm:mt-0{{/if}}">
     <{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-baseline bg-white dark:bg-black grid-article">
         {{> @partial-block }}    
     </{{#if _isArticle}}article{{else}}div{{/if}}>

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

@@ -1,4 +1,5 @@
-{{#>components/page/base/page_wrapper _isArticle=true}}
+{{#>components/page/base/page_wrapper _isArticle=true _webview=_webview}}
+
     {{> components/page/base/page_header}}
 
     {{> components/page/components/shorttext _text=this.shorttext }}

package/src/stories/views/components/page/story/story_main.stories.js

@@ -11,7 +11,6 @@ const Template = ({ ...args }) => {
     // return `<span>${topline}</span>`;
     return story_template({ ...args })
 }
-
 export default {
     title: 'Seiten/Artikel',
 }
@@ -24,7 +23,17 @@ export const Default = {
         layout: 'fullscreen',
     }
 }
-
+export const Webview = {
+    render: Template.bind({}),
+    name: 'Webview Artikel mit Topline',
+    args: {
+        ...data_story,
+        _webview: true
+    },
+    parameters: {
+        layout: 'fullscreen',
+    }
+}
 export const WithSquareImage = {
     render: Template.bind({}),
     name: 'Artikel mit 1:1-Bild',
@@ -72,3 +81,4 @@ export const WithAudio = {
         layout: 'fullscreen',
     }
 }
+

package/src/stories/views/components/social_sharing/socialSharingHandler.alpine.js

@@ -4,7 +4,8 @@ export default (module) => ({
     open: false,
     sharingIsVisible: true,
     isDesktop: true,
-    
+    sharingModuleWasNeverShown: true,
+    desktopSharingModuleWasNeverShown: true,
     toggle() {
         
         var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
@@ -38,6 +39,19 @@ export default (module) => ({
         if(trackClick) {
             uxAction('socialShareClick::'+module+'::sharingIconClose');
         }
+    },
+    sharingModuleShown(desktop){
+
+        if(this.sharingModuleWasNeverShown && !desktop){
+            console.log('Sharing Module '+module+' was shown for the first time!!!');
+            uxAction('socialShareClick::'+module+'::shown');
+            this.sharingModuleWasNeverShown = false;
+        }
+        if(this.desktopSharingModuleWasNeverShown && desktop){
+            console.log('Sharing Module '+module+'Desktop was shown for the first time!!!');
+            uxAction('socialShareClick::'+module+'Desktop::shown');
+            this.desktopSharingModuleWasNeverShown = false;
+        }
     }
     
 })

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

@@ -1,5 +1,12 @@
 {{~#with this.socialSharing ~}}
-    <div x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" x-init="" class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+    <div 
+        x-show="$screen('lg') && $store.sharingIsVisible == false && document.querySelector('.copytextWrapper').offsetHeight > 220" 
+        x-init="" 
+        class="{{#unless ../_useSticky}}top-0 {{/unless}}sticky w-10 col-start-2 pt-6 z-100 h-fit"
+        x-data="socialSharingHandler('vertical-desktop')"
+        x-intersect="sharingModuleShown()"
+        ax-load 
+        x-ignore
         {{#if ../_useSticky}}
         :class="{'top-[142px]':  $store.sectionNavIsVisible && $store.subNavIsVisible && $screen('lg') ,
                 'top-[106px]':  $store.sectionNavIsVisible && !$store.subNavIsVisible && $screen('lg') ,

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

@@ -19,7 +19,8 @@
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"
-                x-show="$store.sharingIsVisible"              
+                x-show="$store.sharingIsVisible" 
+                x-intersect="sharingModuleShown()"            
                 >
                     {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
             </button>
@@ -28,6 +29,7 @@
                 :class="{ 'hidden': !$store.sharingIsOpen.metadatabox,'flex': $store.sharingIsOpen.metadatabox }"           
                 :id="$id('dropdown-button')"
                 class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
+                x-intersect="sharingModuleShown(true)"
             >
                 <ul class="flex gap-3">  
                     {{> components/social_sharing/social_sharing_icons _socialSharingType="metadatabox" _trackingData=../this.trackingData}}

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

@@ -18,6 +18,7 @@
             :aria-expanded="open"
             :aria-controls="$id('dropdown-button')"
             aria-label='{{loca "share_linktitle" }}'
+            x-intersect="sharingModuleShown()"
             >
                 {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
         </button>