hr-design-system-handlebars 1.59.10 → 1.59.12

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.59.12 (Tue Feb 27 2024)
+
+#### 🐛 Bug Fix
+
+- add comments [#864](https://github.com/mumprod/hr-design-system-handlebars/pull/864) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v1.59.11 (Tue Feb 27 2024)
+
+#### ⚠️ Pushed to `main`
+
+- :sparkles: DPE-2816 Sticky sharing ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.59.10 (Mon Feb 26 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1004,6 +1004,9 @@ article.indexText ul {
 .bottom-15 {
   bottom: 3.75rem;
 }
+.bottom-5 {
+  bottom: 1.25rem;
+}
 .bottom-feature-box-height {
   bottom: 0;
   bottom: var(--feature-box-height);
@@ -1011,12 +1014,18 @@ article.indexText ul {
 .left-0 {
   left: 0px;
 }
+.left-1 {
+  left: 0.25rem;
+}
 .left-1\/2 {
   left: 50%;
 }
 .left-2\/4 {
   left: 50%;
 }
+.left-5 {
+  left: 1.25rem;
+}
 .left-\[4px\] {
   left: 4px;
 }
@@ -1044,6 +1053,9 @@ article.indexText ul {
 .top-0\.5 {
   top: 0.125rem;
 }
+.top-1 {
+  top: 0.25rem;
+}
 .top-1\/2 {
   top: 50%;
 }
@@ -1153,6 +1165,9 @@ article.indexText ul {
 .m-4 {
   margin: 1rem;
 }
+.m-8 {
+  margin: 2rem;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1197,6 +1212,10 @@ article.indexText ul {
   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;
@@ -1510,12 +1529,18 @@ article.indexText ul {
 .h-8 {
   height: 2rem;
 }
+.h-96 {
+  height: 24rem;
+}
 .h-\[19px\] {
   height: 19px;
 }
 .h-\[25px\] {
   height: 25px;
 }
+.h-\[500rem\] {
+  height: 500rem;
+}
 .h-\[9px\] {
   height: 9px;
 }
@@ -1880,6 +1905,9 @@ article.indexText ul {
 .justify-around {
   justify-content: space-around;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
 .gap-5 {
   gap: 1.25rem;
 }
@@ -2446,6 +2474,9 @@ article.indexText ul {
 .fill-blue-midnight {
   fill: #023770;
 }
+.fill-button {
+  fill: var(--color-button);
+}
 .fill-content-nav {
   fill: #005293;
   fill: var(--color-content-nav);
@@ -3244,7 +3275,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1708967595192;
+  counter-reset: cnt1709060823021;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3567,7 +3598,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1708967595192 1;
+  counter-increment: cnt1709060823021 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3583,7 +3614,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1708967595192);
+  content: counter(cnt1709060823021);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5166,6 +5197,9 @@ article.indexText ul {
 .group:hover .group-hover\:static {
   position: static;
 }
+.group:hover .group-hover\:fill-button--dark {
+  fill: var(--color-button--dark);
+}
 .group:hover .group-hover\:fill-media-button {
   fill: #276b9e;
   fill: var(--color-media-button);

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

@@ -0,0 +1,12 @@
+{{~#if (isStorybook)~}}
+    <div id="commentList" class="my-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>
+            <span class="block clear-both mt-3 text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif dark:text-text-dark">Kommentar-Dummy</span>
+        </h2>
+        <p class="mx-8 my-6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
+    </div>
+{{~else~}}
+    {{> content/comments/components/comments ~}}
+{{~/if~}}

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

@@ -10,7 +10,7 @@
             {{> components/page/components/commentlink }}
         </div>
 
-        {{> components/page/components/socialsharing }}
+        {{> components/social_sharing/social_sharing_compact _isVertical=false}}
 
     </div>
 </div>

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

@@ -23,4 +23,6 @@
 
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
+    {{> components/page/components/comments }}
+
 {{/components/page/base/page_wrapper}}

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

@@ -0,0 +1,73 @@
+<div x-data="{
+        open: false,
+        sharingIsVisible: true,
+        toggle() {
+            var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
+            var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+            var isMobile= isMobileApple || isMobileOther;
+            if (navigator.share && isMobile) {
+                navigator.share({
+                    title: 'Awesome Content',
+                    text: 'Check out this awesome content!',
+                    url: 'https://example.com',
+                })
+                .then(() => console.log('Shared successfully'))
+                .catch((error) => console.error('Sharing failed:', error));
+            } else {
+                if (this.open) {
+                    return this.close()
+                }
+                this.$refs.button.focus()
+                this.open = true
+            }
+            
+        },
+        close(focusAfter) {
+            if (! this.open) return
+
+            this.open = false
+
+            focusAfter && focusAfter.focus()
+        }
+    }"
+    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 x-text="sharingIsVisible" class="fixed left-1 top-1"></div>
+    <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height left-0 w-full': !sharingIsVisible }">
+        <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
+            <div class="flex gap-3" :class="{ 'bottom-5 left-5 flex-col absolute bg-white': !sharingIsVisible }">
+                <button 
+                    class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
+                    :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+                    x-ref="button"
+                    x-on:click="toggle()"
+                    :aria-expanded="open"
+                    :aria-controls="$id('dropdown-button')">
+                    {{> components/base/image/icon _addClass="w-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
+                </button> 
+
+
+                <!-- Panel -->
+                <div
+                    x-ref="panel"
+                    x-show="open"
+                    x-transition.origin.right
+                    x-on:click.outside="close($refs.button)"
+                    :id="$id('dropdown-button')"
+                    style="display: none;"
+                    class="bg-white"
+                >
+                    <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">
+                        
+                        {{> components/social_sharing/social_sharing_compact_icons }}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,66 @@
+<li>
+    <a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_x_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#0f1419] " _icon="x" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_facebook_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#3b5999] " _icon="facebook" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_whatsapp_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#4dc247] " _icon="whatsapp" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        title="{{loca "share_mail_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#006dc1] " _icon="mail" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="javascript:window.print()"
+        title="{{loca "share_print_linktitle" }}"
+        {{#with ../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#606060] " _icon="print" _iconmap="icons" ~}}
+    </a>
+</li>

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

@@ -0,0 +1,12 @@
+{{~#if (isStorybook)~}}
+    <div id="commentList" class="my-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>
+            <span class="block clear-both mt-3 text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif dark:text-text-dark">Kommentar-Dummy</span>
+        </h2>
+        <p class="mx-8 my-6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
+    </div>
+{{~else~}}
+    {{> content/comments/components/comments ~}}
+{{~/if~}}

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

@@ -10,7 +10,7 @@
             {{> components/page/components/commentlink }}
         </div>
 
-        {{> components/page/components/socialsharing }}
+        {{> components/social_sharing/social_sharing_compact _isVertical=false}}
 
     </div>
 </div>

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

@@ -23,4 +23,6 @@
 
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
+    {{> components/page/components/comments }}
+
 {{/components/page/base/page_wrapper}}

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

@@ -0,0 +1,73 @@
+<div x-data="{
+        open: false,
+        sharingIsVisible: true,
+        toggle() {
+            var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
+            var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+            var isMobile= isMobileApple || isMobileOther;
+            if (navigator.share && isMobile) {
+                navigator.share({
+                    title: 'Awesome Content',
+                    text: 'Check out this awesome content!',
+                    url: 'https://example.com',
+                })
+                .then(() => console.log('Shared successfully'))
+                .catch((error) => console.error('Sharing failed:', error));
+            } else {
+                if (this.open) {
+                    return this.close()
+                }
+                this.$refs.button.focus()
+                this.open = true
+            }
+            
+        },
+        close(focusAfter) {
+            if (! this.open) return
+
+            this.open = false
+
+            focusAfter && focusAfter.focus()
+        }
+    }"
+    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 x-text="sharingIsVisible" class="fixed left-1 top-1"></div>
+    <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height left-0 w-full': !sharingIsVisible }">
+        <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
+            <div class="flex gap-3" :class="{ 'bottom-5 left-5 flex-col absolute bg-white': !sharingIsVisible }">
+                <button 
+                    class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
+                    :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+                    x-ref="button"
+                    x-on:click="toggle()"
+                    :aria-expanded="open"
+                    :aria-controls="$id('dropdown-button')">
+                    {{> components/base/image/icon _addClass="w-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
+                </button> 
+
+
+                <!-- Panel -->
+                <div
+                    x-ref="panel"
+                    x-show="open"
+                    x-transition.origin.right
+                    x-on:click.outside="close($refs.button)"
+                    :id="$id('dropdown-button')"
+                    style="display: none;"
+                    class="bg-white"
+                >
+                    <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">
+                        
+                        {{> components/social_sharing/social_sharing_compact_icons }}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,66 @@
+<li>
+    <a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_x_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#0f1419] " _icon="x" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_facebook_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#3b5999] " _icon="facebook" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_whatsapp_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#4dc247] " _icon="whatsapp" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        title="{{loca "share_mail_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#006dc1] " _icon="mail" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="javascript:window.print()"
+        title="{{loca "share_print_linktitle" }}"
+        {{#with ../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#606060] " _icon="print" _iconmap="icons" ~}}
+    </a>
+</li>

package/package.json

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

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

@@ -0,0 +1,12 @@
+{{~#if (isStorybook)~}}
+    <div id="commentList" class="my-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>
+            <span class="block clear-both mt-3 text-2xl sm480:text-3xl sm480:leading-9 font-headingSerif dark:text-text-dark">Kommentar-Dummy</span>
+        </h2>
+        <p class="mx-8 my-6">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
+    </div>
+{{~else~}}
+    {{> content/comments/components/comments ~}}
+{{~/if~}}

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

@@ -10,7 +10,7 @@
             {{> components/page/components/commentlink }}
         </div>
 
-        {{> components/page/components/socialsharing }}
+        {{> components/social_sharing/social_sharing_compact _isVertical=false}}
 
     </div>
 </div>

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

@@ -23,4 +23,6 @@
 
     {{~> components/content/copytext/copytext _isWebview=_webview ~}}
 
+    {{> components/page/components/comments }}
+
 {{/components/page/base/page_wrapper}}

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

@@ -0,0 +1,73 @@
+<div x-data="{
+        open: false,
+        sharingIsVisible: true,
+        toggle() {
+            var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
+            var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
+            var isMobile= isMobileApple || isMobileOther;
+            if (navigator.share && isMobile) {
+                navigator.share({
+                    title: 'Awesome Content',
+                    text: 'Check out this awesome content!',
+                    url: 'https://example.com',
+                })
+                .then(() => console.log('Shared successfully'))
+                .catch((error) => console.error('Sharing failed:', error));
+            } else {
+                if (this.open) {
+                    return this.close()
+                }
+                this.$refs.button.focus()
+                this.open = true
+            }
+            
+        },
+        close(focusAfter) {
+            if (! this.open) return
+
+            this.open = false
+
+            focusAfter && focusAfter.focus()
+        }
+    }"
+    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 x-text="sharingIsVisible" class="fixed left-1 top-1"></div>
+    <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height left-0 w-full': !sharingIsVisible }">
+        <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
+            <div class="flex gap-3" :class="{ 'bottom-5 left-5 flex-col absolute bg-white': !sharingIsVisible }">
+                <button 
+                    class="order-2 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
+                    :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+                    x-ref="button"
+                    x-on:click="toggle()"
+                    :aria-expanded="open"
+                    :aria-controls="$id('dropdown-button')">
+                    {{> components/base/image/icon _addClass="w-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
+                </button> 
+
+
+                <!-- Panel -->
+                <div
+                    x-ref="panel"
+                    x-show="open"
+                    x-transition.origin.right
+                    x-on:click.outside="close($refs.button)"
+                    :id="$id('dropdown-button')"
+                    style="display: none;"
+                    class="bg-white"
+                >
+                    <ul class="flex gap-3"  :class="{ 'flex-col': ! sharingIsVisible }">
+                        
+                        {{> components/social_sharing/social_sharing_compact_icons }}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,16 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as SocialSharingStories from './social_sharing_compact.stories'
+
+<Meta of={SocialSharingStories} />
+
+# Podcast Player Playlist (Channel)
+
+## Beschreibung
+
+
+## Verwendung
+
+
+<Canvas withToolbar>
+  <Story of={SocialSharingStories.Default} />
+</Canvas>

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

@@ -0,0 +1,25 @@
+import story_template from './social_sharing_compact.hbs'
+
+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 h-[500rem]">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+}

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

@@ -0,0 +1,66 @@
+<li>
+    <a class="{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_x_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#0f1419] " _icon="x" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_facebook_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#3b5999] " _icon="facebook" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="{{loca "share_whatsapp_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#4dc247] " _icon="whatsapp" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="{{this}}"
+        title="{{loca "share_mail_linktitle" }}"
+        {{#with ../../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#006dc1] " _icon="mail" _iconmap="icons" ~}}
+    </a>
+</li>
+<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"
+        :class="{ 'w-8 h-8': sharingIsVisible, 'w-12 h-12': !sharingIsVisible }"
+        href="javascript:window.print()"
+        title="{{loca "share_print_linktitle" }}"
+        {{#with ../this.content.trackingData}}
+            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
+        {{/with}}
+    >
+        {{~> components/base/image/icon _addClass="w-full h-full fill-[#606060] " _icon="print" _iconmap="icons" ~}}
+    </a>
+</li>

package/dist/views/components/socialmedia/socialmedia_compact.hbs

@@ -1,25 +0,0 @@
-<div class="c-shareCompact">
-    <div class="c-shareCompact__wrapper -isClosed js-share-compact-wrapper js-load"
-         data-hr-share-compact='{"title":"{{../this.escapedTitle}}", "url":"{{../this.socialSharingUrl}}" }'>
-        <div class="c-shareCompact__mainButton">
-            <button class="link--shareIcon touchArea "
-                    id="{{../this.anchor}}-s"
-                    rel="noopener noreferrer"
-                    title="{{loca "share_headline" }}"
-            >
-                {{~> base/image/icon _addClass="icon--teilen-button" _icon="teilen-button" _iconmap="icons" ~}}
-            </button>
-
-        </div>
-        <div class="c-shareCompact__shareButtons hide">
-            <ul>
-                {{~> modules/socialmedia/shareCompact-icons ~}}
-            </ul>
-        </div>
-        <div class="c-shareCompact__message hide">
-            {{~> base/image/icon _addClass="" _icon="status-done" _iconmap="icons" ~}}
-            {{loca "ticker_sharing_message" }}
-        </div>
-    </div>
-
-</div>

package/dist/views/components/socialmedia/socialmedia_compact_icons.hbs

@@ -1,61 +0,0 @@
-{{~#with this.twitterLink ~}}
-    <li class="c-shareCompact__item">
-        <a class="c-shareCompact__link touchArea js-shareLinkTwitter"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_x_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--twitter" _icon="x" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.facebookLink ~}}
-    <li class="c-shareCompact__item">
-        <a class="c-shareCompact__link touchArea js-shareLinkFacebook"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_facebook_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--facebook" _icon="facebook" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.whatsappLink ~}}
-    <li class="c-shareCompact__item -whatsapp">
-        <a class="c-shareCompact__link touchArea js-shareLinkWhatsapp"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_whatsapp_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--whatsapp" _icon="whatsapp" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.mailtoLink ~}}
-    <li class="c-shareCompact__item ">
-        <a class="c-shareCompact__link touchArea js-shareLinkMail"
-           href="{{this}}"
-           title="{{loca "share_mail_linktitle" }}"
-            {{#with ../../this.content.trackingData}}
-           data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-mailto"}]}'
-            {{/with}}
-        >
-            {{~> base/image/icon _addClass="icon--mailto" _icon="mail" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-
-<li class="c-shareCompact__item -copy">
-    <button class="c-shareCompact__link touchArea js-shareLinkCopy"
-
-            title="{{loca "share_copy_linktitle" }}"
-        {{#with ../../this.content.trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-copy"}]}'
-        {{/with}}
-    >
-        {{~> base/image/icon _addClass="icon--mailto" _icon="copy" _iconmap="icons" ~}}
-    </button>
-</li>

package/dist/views_static/components/socialmedia/socialmedia_compact.hbs

@@ -1,25 +0,0 @@
-<div class="c-shareCompact">
-    <div class="c-shareCompact__wrapper -isClosed js-share-compact-wrapper js-load"
-         data-hr-share-compact='{"title":"{{../this.escapedTitle}}", "url":"{{../this.socialSharingUrl}}" }'>
-        <div class="c-shareCompact__mainButton">
-            <button class="link--shareIcon touchArea "
-                    id="{{../this.anchor}}-s"
-                    rel="noopener noreferrer"
-                    title="{{loca "share_headline" }}"
-            >
-                {{~> base/image/icon _addClass="icon--teilen-button" _icon="teilen-button" _iconmap="icons" ~}}
-            </button>
-
-        </div>
-        <div class="c-shareCompact__shareButtons hide">
-            <ul>
-                {{~> modules/socialmedia/shareCompact-icons ~}}
-            </ul>
-        </div>
-        <div class="c-shareCompact__message hide">
-            {{~> base/image/icon _addClass="" _icon="status-done" _iconmap="icons" ~}}
-            {{loca "ticker_sharing_message" }}
-        </div>
-    </div>
-
-</div>

package/dist/views_static/components/socialmedia/socialmedia_compact_icons.hbs

@@ -1,61 +0,0 @@
-{{~#with this.twitterLink ~}}
-    <li class="c-shareCompact__item">
-        <a class="c-shareCompact__link touchArea js-shareLinkTwitter"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_x_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--twitter" _icon="x" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.facebookLink ~}}
-    <li class="c-shareCompact__item">
-        <a class="c-shareCompact__link touchArea js-shareLinkFacebook"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_facebook_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--facebook" _icon="facebook" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.whatsappLink ~}}
-    <li class="c-shareCompact__item -whatsapp">
-        <a class="c-shareCompact__link touchArea js-shareLinkWhatsapp"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_whatsapp_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--whatsapp" _icon="whatsapp" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.mailtoLink ~}}
-    <li class="c-shareCompact__item ">
-        <a class="c-shareCompact__link touchArea js-shareLinkMail"
-           href="{{this}}"
-           title="{{loca "share_mail_linktitle" }}"
-            {{#with ../../this.content.trackingData}}
-           data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-mailto"}]}'
-            {{/with}}
-        >
-            {{~> base/image/icon _addClass="icon--mailto" _icon="mail" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-
-<li class="c-shareCompact__item -copy">
-    <button class="c-shareCompact__link touchArea js-shareLinkCopy"
-
-            title="{{loca "share_copy_linktitle" }}"
-        {{#with ../../this.content.trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-copy"}]}'
-        {{/with}}
-    >
-        {{~> base/image/icon _addClass="icon--mailto" _icon="copy" _iconmap="icons" ~}}
-    </button>
-</li>

package/src/stories/views/components/socialmedia/socialmedia_compact.hbs

@@ -1,25 +0,0 @@
-<div class="c-shareCompact">
-    <div class="c-shareCompact__wrapper -isClosed js-share-compact-wrapper js-load"
-         data-hr-share-compact='{"title":"{{../this.escapedTitle}}", "url":"{{../this.socialSharingUrl}}" }'>
-        <div class="c-shareCompact__mainButton">
-            <button class="link--shareIcon touchArea "
-                    id="{{../this.anchor}}-s"
-                    rel="noopener noreferrer"
-                    title="{{loca "share_headline" }}"
-            >
-                {{~> base/image/icon _addClass="icon--teilen-button" _icon="teilen-button" _iconmap="icons" ~}}
-            </button>
-
-        </div>
-        <div class="c-shareCompact__shareButtons hide">
-            <ul>
-                {{~> modules/socialmedia/shareCompact-icons ~}}
-            </ul>
-        </div>
-        <div class="c-shareCompact__message hide">
-            {{~> base/image/icon _addClass="" _icon="status-done" _iconmap="icons" ~}}
-            {{loca "ticker_sharing_message" }}
-        </div>
-    </div>
-
-</div>

package/src/stories/views/components/socialmedia/socialmedia_compact_icons.hbs

@@ -1,61 +0,0 @@
-{{~#with this.twitterLink ~}}
-    <li class="c-shareCompact__item">
-        <a class="c-shareCompact__link touchArea js-shareLinkTwitter"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_x_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--twitter" _icon="x" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.facebookLink ~}}
-    <li class="c-shareCompact__item">
-        <a class="c-shareCompact__link touchArea js-shareLinkFacebook"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_facebook_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--facebook" _icon="facebook" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.whatsappLink ~}}
-    <li class="c-shareCompact__item -whatsapp">
-        <a class="c-shareCompact__link touchArea js-shareLinkWhatsapp"
-           href="{{this}}"
-           target="_blank"
-           rel="noopener noreferrer"
-           title="{{loca "share_whatsapp_linktitle" }}"
-        >
-            {{~> base/image/icon _addClass="icon--whatsapp" _icon="whatsapp" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-{{~#with this.mailtoLink ~}}
-    <li class="c-shareCompact__item ">
-        <a class="c-shareCompact__link touchArea js-shareLinkMail"
-           href="{{this}}"
-           title="{{loca "share_mail_linktitle" }}"
-            {{#with ../../this.content.trackingData}}
-           data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-mailto"}]}'
-            {{/with}}
-        >
-            {{~> base/image/icon _addClass="icon--mailto" _icon="mail" _iconmap="icons" ~}}
-        </a>
-    </li>
-{{~/with~}}
-
-<li class="c-shareCompact__item -copy">
-    <button class="c-shareCompact__link touchArea js-shareLinkCopy"
-
-            title="{{loca "share_copy_linktitle" }}"
-        {{#with ../../this.content.trackingData}}
-            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": {{this.secondLevelId}},"clickLabel": "newSocialShareClick::compact-copy"}]}'
-        {{/with}}
-    >
-        {{~> base/image/icon _addClass="icon--mailto" _icon="copy" _iconmap="icons" ~}}
-    </button>
-</li>