hr-design-system-handlebars 1.38.1 → 1.38.3

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.38.3 (Fri Sep 08 2023)
+
+#### 🐛 Bug Fix
+
+- adds a minimal json for socialmedia [#718](https://github.com/mumprod/hr-design-system-handlebars/pull/718) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v1.38.2 (Fri Sep 08 2023)
+
+#### 🐛 Bug Fix
+
+- - ordner und dateien angelegt in sb [#719](https://github.com/mumprod/hr-design-system-handlebars/pull/719) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.38.1 (Thu Sep 07 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1177,6 +1177,10 @@ video {
 .m-auto {
   margin: auto;
 }
+.-mx-3 {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1335,6 +1339,9 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
+.mr-6 {
+  margin-right: 1.5rem;
+}
 .mt-0 {
   margin-top: 0px;
 }
@@ -1991,6 +1998,10 @@ video {
 .border-none {
   border-style: none;
 }
+.border-\[\#797979\] {
+  --tw-border-opacity: 1;
+  border-color: rgba(121, 121, 121, var(--tw-border-opacity));
+}
 .border-\[\#e3e3e3\] {
   --tw-border-opacity: 1;
   border-color: rgba(227, 227, 227, var(--tw-border-opacity));
@@ -2281,6 +2292,9 @@ video {
 .to-purple-100 {
   --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
 }
+.fill-\[\#55acee\] {
+  fill: #55acee;
+}
 .fill-blue-congress {
   fill: #005293;
 }
@@ -3040,7 +3054,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1694100687720;
+  counter-reset: cnt1694165831182;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3275,7 +3289,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1694100687720 1;
+  counter-increment: cnt1694165831182 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3291,7 +3305,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1694100687720);
+  content: counter(cnt1694165831182);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4705,6 +4719,9 @@ video {
   border-color: #fff;
   border-color: var(--color-navigation-border-color);
 }
+.last\:pb-6:last-child {
+  padding-bottom: 1.5rem;
+}
 .last\:pr-0:last-child {
   padding-right: 0px;
 }

package/dist/assets/js/components/socialmedia/socialmediaCompact.feature.js

@@ -0,0 +1,187 @@
+import { fireEvent, getJSONCookie, hr$, listen, setJSONCookie, unlisten } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+
+const ShareCompact = (context) => {
+    const { options } = context
+    const { element: rootElement } = context
+    const isClosedClass = '-isClosed'
+    const mainButton = hr$('.c-shareCompact__mainButton', rootElement)[0]
+    const shareButtons = hr$('.c-shareCompact__shareButtons', rootElement)[0]
+    const messageDiv = hr$('.c-shareCompact__message', rootElement)[0]
+    const { url, title } = options
+    const isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i)
+    const isMobileOther = navigator.userAgent.match(
+        /(Android)|(webOS)|(Blackberry)|(Windows Phone)/i
+    )
+    const isWebview = window.parent.document.documentElement.classList.contains('webview')
+    //const isWebview = window.location.href.match(/(app)(\.[a-zA-Z]*)(\.de)/i) //App URL ...app.hr.de
+    //const isWebview = window.location.href.match(/(app)/i)
+    let cookie = {}
+    const trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10
+
+    const shareLinks = {
+        twitter: hr$('.js-shareLinkTwitter', rootElement)[0],
+        facebook: hr$('.js-shareLinkFacebook', rootElement)[0],
+        whatsapp: hr$('.js-shareLinkWhatsapp', rootElement)[0],
+        mail: hr$('.js-shareLinkMail', rootElement)[0],
+        copy2clip: hr$('.js-shareLinkCopy', rootElement)[0],
+    }
+
+    let isClosed = true
+    const readAppVersionCookie = function () {
+        cookie = getJSONCookie('appSettings') || {}
+    }
+    const writeAppVersionCookie = function () {
+        cookie = '209'
+        setJSONCookie('hsAppBuildNumber', cookie, trackingCookieLifetime)
+    }
+    const closeMenu = () => {
+        console.log('closeMenu')
+        rootElement.classList.add(isClosedClass)
+        shareButtons.classList.add('hide')
+        isClosed = true
+    }
+    const openMenu = () => {
+        console.log('openMenu')
+        rootElement.classList.remove(isClosedClass)
+        shareButtons.classList.remove('hide')
+        isClosed = false
+    }
+    const nativeShare = () => {
+        navigator
+            .share({
+                title,
+                url,
+            })
+            .then(function () {
+                console.log('Danke fürs Teilen!')
+            })
+            .catch(console.error)
+        uxAction('newSocialShareClick::mainButton-nativeShare')
+    }
+    const handleClickOnMainButton = (event) => {
+        event.stopPropagation()
+        if (isWebview) {
+            readAppVersionCookie()
+            if (isMobileApple) {
+                console.log('apple mobile browser')
+                nativeShare()
+            } else if (isMobileOther) {
+                console.log('non-apple mobile browser')
+                /*Check Build Version of App*/
+                if (cookie['fireCustomJsShareEvent'] === true) {
+                    /*Custom Event für App unter Android*/
+                    fireEvent('hr:global:shareCompactClickAndroidApp', {
+                        title: title,
+                        url: url,
+                    })
+                    console.log('Custom-Event für Android')
+                } else {
+                    fireEvent('hr:global:shareCompactClick', {
+                        origin: rootElement,
+                        currentTarget: event.currentTarget,
+                    })
+                }
+            }
+            console.log('sharing - for app channel')
+        } else {
+            if ((navigator.share && isMobileApple) || (navigator.share && isMobileOther)) {
+                console.log('native share in mobile view supported')
+                nativeShare()
+            } else {
+                fireEvent('hr:global:shareCompactClick', {
+                    origin: rootElement,
+                    currentTarget: event.currentTarget,
+                })
+            }
+            console.log('sharing - no app channel')
+        }
+    }
+
+    const copyToClipboard = (event) => {
+        const el = document.createElement('textarea')
+        el.value = url
+        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('hide')
+
+        window.setTimeout(() => {
+            messageDiv.classList.add('hide')
+        }, 2000)
+    }
+
+    const checkIfCloseOrOpen = (event) => {
+        if (isClosed) {
+            if (event.detail.origin === rootElement) {
+                uxAction('newSocialShareClick::mainButton-open')
+                openMenu()
+                listen('click', handleClickOnMainButton, document)
+            }
+        } else {
+            if (event.detail.currentTarget === mainButton) {
+                uxAction('newSocialShareClick::mainButton-close')
+            } else {
+                uxAction('newSocialShareClick::mainButton-close-outside')
+            }
+            closeMenu()
+            unlisten('click', handleClickOnMainButton, document)
+        }
+    }
+    const initializeShareLinksTracking = () => {
+        listen(
+            'click',
+            function () {
+                console.log('twitter')
+                uxAction('newSocialShareClick::twitter')
+            },
+            shareLinks.twitter
+        )
+        listen(
+            'click',
+            function () {
+                console.log('facebook')
+                uxAction('newSocialShareClick::facebook')
+            },
+            shareLinks.facebook
+        )
+        listen(
+            'click',
+            function () {
+                console.log('whatsapp')
+                uxAction('newSocialShareClick::whatsapp')
+            },
+            shareLinks.whatsapp
+        )
+        listen(
+            'click',
+            function () {
+                console.log('mail')
+                uxAction('newSocialShareClick::mail')
+            },
+            shareLinks.mail
+        )
+        listen(
+            'click',
+            function () {
+                console.log('copy2clipboard')
+                uxAction('newSocialShareClick::copy2clipboard')
+            },
+            shareLinks.copy2clip
+        )
+    }
+
+    listen('hr:global:shareCompactClick', checkIfCloseOrOpen)
+    listen('click', handleClickOnMainButton, mainButton)
+    listen('click', copyToClipboard, shareLinks.copy2clip)
+    initializeShareLinksTracking()
+    /*if (isWebview) {
+        writeAppVersionCookie()
+    }*/
+}
+export default ShareCompact

package/dist/views/components/article/components/podcast/podcast_episode_article.hbs

@@ -19,7 +19,7 @@
     aria-label='{{loca "appendix_title"}}'>
     <div class="c-appendix">
         {{#unless _webview}}
-            {{~#with this.backLinkUrl ~}}
+           {{!--  {{~#with this.backLinkUrl ~}}
                 {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
             {{~/with~}}
 
@@ -29,11 +29,11 @@
 
             {{~#with this.topictags ~}}
                 {{~> modules/topictag/topictag-list ~}}
-            {{~/with~}}
+            {{~/with~}} --}}
 
-            {{~#with this.socialSharing ~}}
-                {{~> modules/socialmedia/shareit ~}}
-            {{~/with~}}
+            {{!-- {{~#with this.socialSharing ~}}
+                {{~> components/socialmedia/socialmedia ~}}
+            {{~/with~}} --}}
         {{/unless}}
     </div>
 </aside>    

package/dist/views/components/article/components/podcast/podcast_playlist_all_episodes.hbs

@@ -11,7 +11,7 @@
                 {{~/with~}}
 
                 {{~#with this.socialSharing ~}}
-                    {{~> modules/socialmedia/shareit ~}}
+                    {{~> components/socialmedia/socialmedia ~}}
                 {{~/with~}}
             {{/unless}}
             {{~#with this.programReference~}}

package/dist/views/components/article/components/podcast/podcast_playlist_article.hbs

@@ -20,13 +20,13 @@
 
     <aside class="grid order-2 col-span-3 py-6" aria-label='{{loca "appendix_title"}}'>
         <div class="c-appendix">
-            {{#unless _webview}}
+            {{!-- {{#unless _webview}}
                 {{~#with this.backLinkUrl ~}}
                     {{~> base/link/backlink _addClass="appendix__backlink" ~}}
                 {{~/with~}}
 
                 {{~#with this.socialSharing ~}}
-                    {{~> modules/socialmedia/shareit ~}}
+                    {{~> components/socialmedia/socialmedia ~}}
                 {{~/with~}}
             {{/unless}}
             {{~#with this.programReference~}}
@@ -53,7 +53,7 @@
                         </ul>
                     </div>
                 </div>
-            {{~/with~}}
+            {{~/with~}} --}}
         </div>
     </aside>
     </div>

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

@@ -0,0 +1,78 @@
+<div class="w-full flex px-3 first:border-t last:pb-6 border-[#797979] -socialsharing">
+    <div class="flex flex-wrap justify-start p-0 m-0 -mx-3">
+        <span class="inline-flex text-2xl font-heading">{{loca "share_headline" }}</span><!--
+        -->
+        <ul class="flex flex-wrap w-full px-5 lg:px-0 -socialsharing">
+            {{~#with this.twitterLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       title="{{loca "share_twitter_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::twitter"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#55acee]" _icon="twitter" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.facebookLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       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="icon--facebook" _icon="facebook-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.whatsappLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0 list__item--whatsapp">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       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="icon--whatsapp" _icon="whatsapp-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.mailtoLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       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="icon--mailto" _icon="mail-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+
+            <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                <a class="link--shareIcon touchArea{{#with ../this.content.trackingData}} js-load{{/with}}"
+                   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="icon--print" _icon="print" _iconmap="icons" ~}}
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>

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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,61 @@
+{{~#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_twitter_linktitle" }}"
+        >
+            {{~> base/image/icon _addClass="icon--twitter" _icon="twitter" _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/article/components/podcast/podcast_episode_article.hbs

@@ -19,7 +19,7 @@
     aria-label='{{loca "appendix_title"}}'>
     <div class="c-appendix">
         {{#unless _webview}}
-            {{~#with this.backLinkUrl ~}}
+           {{!--  {{~#with this.backLinkUrl ~}}
                 {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
             {{~/with~}}
 
@@ -29,11 +29,11 @@
 
             {{~#with this.topictags ~}}
                 {{~> modules/topictag/topictag-list ~}}
-            {{~/with~}}
+            {{~/with~}} --}}
 
-            {{~#with this.socialSharing ~}}
-                {{~> modules/socialmedia/shareit ~}}
-            {{~/with~}}
+            {{!-- {{~#with this.socialSharing ~}}
+                {{~> components/socialmedia/socialmedia ~}}
+            {{~/with~}} --}}
         {{/unless}}
     </div>
 </aside>    

package/dist/views_static/components/article/components/podcast/podcast_playlist_all_episodes.hbs

@@ -11,7 +11,7 @@
                 {{~/with~}}
 
                 {{~#with this.socialSharing ~}}
-                    {{~> modules/socialmedia/shareit ~}}
+                    {{~> components/socialmedia/socialmedia ~}}
                 {{~/with~}}
             {{/unless}}
             {{~#with this.programReference~}}

package/dist/views_static/components/article/components/podcast/podcast_playlist_article.hbs

@@ -20,13 +20,13 @@
 
     <aside class="grid order-2 col-span-3 py-6" aria-label='{{loca "appendix_title"}}'>
         <div class="c-appendix">
-            {{#unless _webview}}
+            {{!-- {{#unless _webview}}
                 {{~#with this.backLinkUrl ~}}
                     {{~> base/link/backlink _addClass="appendix__backlink" ~}}
                 {{~/with~}}
 
                 {{~#with this.socialSharing ~}}
-                    {{~> modules/socialmedia/shareit ~}}
+                    {{~> components/socialmedia/socialmedia ~}}
                 {{~/with~}}
             {{/unless}}
             {{~#with this.programReference~}}
@@ -53,7 +53,7 @@
                         </ul>
                     </div>
                 </div>
-            {{~/with~}}
+            {{~/with~}} --}}
         </div>
     </aside>
     </div>

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

@@ -0,0 +1,78 @@
+<div class="w-full flex px-3 first:border-t last:pb-6 border-[#797979] -socialsharing">
+    <div class="flex flex-wrap justify-start p-0 m-0 -mx-3">
+        <span class="inline-flex text-2xl font-heading">{{loca "share_headline" }}</span><!--
+        -->
+        <ul class="flex flex-wrap w-full px-5 lg:px-0 -socialsharing">
+            {{~#with this.twitterLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       href="{{this}}"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                       title="{{loca "share_twitter_linktitle" }}"
+                        {{#with ../../this.content.trackingData}}
+                       data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::twitter"}]}'
+                        {{/with}}
+                    >
+                        {{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#55acee]" _icon="twitter" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.facebookLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       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="icon--facebook" _icon="facebook-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.whatsappLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0 list__item--whatsapp">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       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="icon--whatsapp" _icon="whatsapp-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+            {{~#with this.mailtoLink ~}}
+                <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                       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="icon--mailto" _icon="mail-ds" _iconmap="icons" ~}}
+                    </a>
+                </li>
+            {{~/with~}}
+
+            <li class="inline-flex pl-10 mr-6 lg:ml-0">
+                <a class="link--shareIcon touchArea{{#with ../this.content.trackingData}} js-load{{/with}}"
+                   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="icon--print" _icon="print" _iconmap="icons" ~}}
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>