hr-design-system-handlebars 1.59.9 → 1.59.11

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

@@ -0,0 +1,16 @@
+<header class="mt-6 sm480:mt12">
+    <h2>
+        {{#if this.label }}
+            {{#with this.label}}
+                {{#> components/label/label_group}}
+                    {{> components/label/label _type=this.type _text=(loca this.loca)}}
+                {{/components/label/label_group}}
+            {{/with}}         
+        {{else}}   
+            {{~#if topline}}
+                <span class="block text-base font-heading">{{this.topline}}</span>
+            {{/if~}}
+        {{/if~}}
+        <span class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</span>
+    </h2>
+</header>

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

@@ -1,3 +1,5 @@
-<div class="grid bg-white grid-article">
-    {{> @partial-block }}    
+<div class="grid grid-page">
+    <div class="grid bg-white grid-article">
+        {{> @partial-block }}    
+    </div>
 </div>

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/fixtures/story_with_label.json

@@ -0,0 +1 @@
+{"topline":"Quer über den großen Sylter Deich","title":"Zwei flinke Boxer jagen die quirlige Eva und ihren Mops","shorttext":"Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. Fix quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.","hasMoreThanOneAuthor":false,"hasDwellTime":true,"isArchiveContent":false,"displayPageLead":{"isFalse":false},"teaseritem":{"isImage":true,"caption":"Bildunterschrift","copyrightWithLinks":"picture-alliance/dpa","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/connichi-106_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/connichi-106_v-16to9__small.jpg 320w, images/connichi-106_v-16to9__medium.jpg 480w, images/connichi-106_v-16to9__medium__extended.jpg 640w, images/connichi-106_v-16to9.jpg 960w, images/connichi-106_v-16to9__retina.jpg 1920w"}]}},"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"documentPublicationDate":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"userComments":{"HasOneComment":false,"quantity":"117"},"byline":"Bylinetext","authorTitle":"Steffen Rebhahn","authorImage":{"isImage":true,"caption":"Steffen Rebhahn","copyrightWithLinks":"hr","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1_small.jpg","sources":[{"sizes":"50px","srcset":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__xsmall.jpg 260w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__small.jpg 380w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__medium.jpg 480w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1.jpg 720w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__large.jpg 960w"}]}},"authorUrl":"/author-url","webviewAuthorUrl":"webview-author-url","authorItems":[{"hasProfileLink":false,"from":"Von","textAfterAuthor":"Horst Schlämmer","delimiter":", "},{"hasProfileLink":false,"from":"","textAfterAuthor":"Karl Dall","delimiter":" und "},{"hasProfileLink":true,"from":"","authorName":"Peter Lustig","delimiter":"","link":{"url":"/author-url","isTargetBlank":false}}],"copytextParagraph":[{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> 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 <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> 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 <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"isHeadline":true,"text":"Zwischenüberschrift"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> 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 <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}],"source":["Horst Schlämmer","hessenschau.de"],"geotag":[{"url":"/Frankfurt-url","title":"Frankfurt"},{"url":"/Offenbach-url","title":"Offenbach"},{"url":"/Darmstadt-url","title":"Darmstadt"}],"topictags":[{"url":"/Parteien-url","title":"Parteien"},{"url":"/Wahlen-url","title":"Wahlen"},{"url":"/Landtagswahl-url","title":"Landtagswahl"}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"},"programReference":{"hasReference":true,"name":"Program-name","link":{"url":"/Program-url","isTargetBlank":true},"displayWithTime":true,"date":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","dateSeparatorTime":"19:30"}},"label":{"type":"glosse","loca":"label_glosse"}}

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

@@ -1,11 +1,11 @@
 {{#>components/page/base/page_wrapper}}
-   
-    <h2 class="text-3xl font-headingSerif sm480:text-5xl">{{this.title}}</h2>
+    {{> components/page/base/page_header}}
 
     {{> components/page/components/shorttext _text=this.shorttext }}
 
     {{> components/page/components/metadatabox _showDate=this.hasDwellTime}}
     
+    
     {{#unless this.displayPageLead.isFalse}}
         {{#with this.teaseritem }}
             {{#if this.isImage}}

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

@@ -1,5 +1,6 @@
 import story_template from './story_article.hbs'
-import story_json from './fixtures/story.json'
+import data_story from './fixtures/story.json'
+import data_story_with_label from './fixtures/story_with_label.json'
 
 const Template = ({ ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -13,16 +14,18 @@ export default {
 
 export const Default = {
     render: Template.bind({}),
-    name: 'default',
-    args: story_json,
+    name: 'Artikel mit Topline',
+    args: data_story,
     parameters: {
         layout: 'fullscreen',
-    },
-    decorators: [
-        (Story) => {
-            return `<div class="grid grid-page">     
-                        ${Story()} 
-                    </div>`
-        },
-    ],    
+    } 
+}
+
+export const WithLabel = {
+    render: Template.bind({}),
+    name: 'Artikel mit Label',
+    args: data_story_with_label,
+    parameters: {
+        layout: 'fullscreen',
+    }  
 }

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/src/stories/views/components/teaser/cluster/teaser_cluster.stories.js

@@ -30,6 +30,9 @@ export default {
 
     parameters: {
         layout: '',
+        chromatic: {
+            diffThreshold: 0.3,
+        },
     },
 
     argTypes: {},

package/src/stories/views/components/teaser/group_teaser/group.stories.js

@@ -42,6 +42,9 @@ export default {
 
     parameters: {
         layout: 'fullscreen',
+        chromatic: {
+            diffThreshold: 0.3,
+        },
     },
 
     decorators: [

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.stories.js

@@ -15,9 +15,9 @@ export default {
     parameters: {
         chromatic: {
             viewports: [360, 768, 1024],
+            diffThreshold: 0.3,
         },
-
-        layout: 'fullscreen',
+        layout: 'fullscreen',     
     },
 
     argTypes: {},

package/src/stories/views/components/teaser/teaser_alternativ_av.stories.js

@@ -27,6 +27,7 @@ export default {
 
         chromatic: {
             viewports: [360, 1024],
+            diffThreshold: 0.3,
         },
     },
 

package/src/stories/views/components/teaser/teaser_event_calendar.stories.js

@@ -15,6 +15,9 @@ export default {
 
     parameters: {
         layout: 'fullscreen',
+        chromatic: {
+            diffThreshold: 0.3,
+        },
     },
 
     argTypes: {

package/src/stories/views/components/teaser/teaser_indextext.stories.js

@@ -17,6 +17,9 @@ export default {
 
     parameters: {
         layout: 'fullscreen',
+        chromatic: {
+            diffThreshold: 0.3,
+        },
     },
 
     argTypes: {

package/src/stories/views/components/teaser/teaser_logic/teaser_logic.stories.js

@@ -14,6 +14,9 @@ export default {
 
     parameters: {
         layout: 'fullscreen',
+        chromatic: {
+            diffThreshold: 0.3,
+        },
     },
 
     argTypes: {},

package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.stories.js

@@ -16,6 +16,9 @@ export default {
 
     parameters: {
         layout: '',
+        chromatic: {
+            diffThreshold: 0.3,
+        },
     },
 
     argTypes: {},

package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.stories.js

@@ -19,6 +19,9 @@ export default {
 
     parameters: {
         layout: '',
+        chromatic: {
+            diffThreshold: 0.3,
+        },
     },
 
     argTypes: {},

package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.stories.js

@@ -23,6 +23,11 @@ const timelineOnWhite = (args) => {
 export default {
     title: 'Komponenten/Teaser/Ticker/Komponenten',
 
+    parameters: {
+        chromatic: {
+            diffThreshold: 0.3,
+        },
+    },
     argTypes: {
         '_color': {
             description: 'Text- und Linienfarbe',

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>