hr-design-system-handlebars 1.67.1 → 1.67.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/main.js +2 -0
- package/CHANGELOG.md +25 -0
- package/dist/assets/index.css +3 -9
- package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js +1 -1
- package/dist/views/components/page/index/page_test_story.hbs +14 -19
- package/dist/views/components/page/story/story_article.hbs +6 -3
- package/dist/views/components/social_sharing/social_sharing_compact.hbs +42 -44
- package/dist/views/components/social_sharing/social_sharing_compact_icons.hbs +10 -1
- package/dist/views_static/components/page/index/page_test_story.hbs +14 -19
- package/dist/views_static/components/page/story/story_article.hbs +6 -3
- package/dist/views_static/components/social_sharing/social_sharing_compact.hbs +42 -44
- package/dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs +10 -1
- package/package.json +7 -2
- package/src/stories/views/components/modal/modal.stories.js +19 -1
- package/src/stories/views/components/page/index/page_test_story.hbs +14 -19
- package/src/stories/views/components/page/story/story_article.hbs +6 -3
- package/src/stories/views/components/podcast/podcast_subscribe_button.stories.js +8 -3
- package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js +1 -1
- package/src/stories/views/components/social_sharing/social_sharing_compact.hbs +42 -44
- package/src/stories/views/components/social_sharing/social_sharing_compact.stories.js +5 -12
- package/src/stories/views/components/social_sharing/social_sharing_compact_icons.hbs +10 -1
package/.storybook/main.js
CHANGED
|
@@ -9,6 +9,7 @@ const config = {
|
|
|
9
9
|
'../src/**/*.mdx',
|
|
10
10
|
'../src/**/*.stories.@(js|jsx|ts|tsx)',
|
|
11
11
|
],
|
|
12
|
+
features: { buildStoriesJson: true },
|
|
12
13
|
addons: [
|
|
13
14
|
'@storybook/addon-links',
|
|
14
15
|
{
|
|
@@ -44,6 +45,7 @@ const config = {
|
|
|
44
45
|
},
|
|
45
46
|
},
|
|
46
47
|
},
|
|
48
|
+
'@storybook/addon-interactions'
|
|
47
49
|
],
|
|
48
50
|
webpackFinal: async (config, { configType }) => {
|
|
49
51
|
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
# v1.67.3 (Thu May 02 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Socail sharing code improvements 2 [#917](https://github.com/mumprod/hr-design-system-handlebars/pull/917) ([@StefanVesper](https://github.com/StefanVesper) [@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v1.67.2 (Thu May 02 2024)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- Feature/dpe 3061 [#919](https://github.com/mumprod/hr-design-system-handlebars/pull/919) ([@szuelch](https://github.com/szuelch))
|
|
19
|
+
|
|
20
|
+
#### Authors: 1
|
|
21
|
+
|
|
22
|
+
- [@szuelch](https://github.com/szuelch)
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
1
26
|
# v1.67.1 (Mon Apr 29 2024)
|
|
2
27
|
|
|
3
28
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1461,9 +1461,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1461
1461
|
.mt-4\.5 {
|
|
1462
1462
|
margin-top: 1.125rem;
|
|
1463
1463
|
}
|
|
1464
|
-
.mt-40 {
|
|
1465
|
-
margin-top: 10rem;
|
|
1466
|
-
}
|
|
1467
1464
|
.mt-5 {
|
|
1468
1465
|
margin-top: 1.25rem;
|
|
1469
1466
|
}
|
|
@@ -1605,9 +1602,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1605
1602
|
.h-\[25px\] {
|
|
1606
1603
|
height: 25px;
|
|
1607
1604
|
}
|
|
1608
|
-
.h-\[500rem\] {
|
|
1609
|
-
height: 500rem;
|
|
1610
|
-
}
|
|
1611
1605
|
.h-\[560px\] {
|
|
1612
1606
|
height: 560px;
|
|
1613
1607
|
}
|
|
@@ -3353,7 +3347,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3353
3347
|
border-bottom-color: var(--color-secondary-ds);
|
|
3354
3348
|
}
|
|
3355
3349
|
.counter-reset {
|
|
3356
|
-
counter-reset:
|
|
3350
|
+
counter-reset: cnt1714643370762;
|
|
3357
3351
|
}
|
|
3358
3352
|
.hyphens-auto {
|
|
3359
3353
|
-webkit-hyphens: auto;
|
|
@@ -3732,7 +3726,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3732
3726
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3733
3727
|
}
|
|
3734
3728
|
.-ordered {
|
|
3735
|
-
counter-increment:
|
|
3729
|
+
counter-increment: cnt1714643370762 1;
|
|
3736
3730
|
}
|
|
3737
3731
|
.-ordered::before {
|
|
3738
3732
|
position: absolute;
|
|
@@ -3748,7 +3742,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3748
3742
|
letter-spacing: .0125em;
|
|
3749
3743
|
--tw-text-opacity: 1;
|
|
3750
3744
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3751
|
-
content: counter(
|
|
3745
|
+
content: counter(cnt1714643370762);
|
|
3752
3746
|
}
|
|
3753
3747
|
/*! ****************************/
|
|
3754
3748
|
/*! DataPolicy stuff */
|
|
@@ -52,7 +52,7 @@ export default () => ({
|
|
|
52
52
|
},
|
|
53
53
|
|
|
54
54
|
checkFooterTopForSharingBottomPos(){
|
|
55
|
-
this.$store.footerIsVisible ? this.$store.sharingBottomPos.current = window.innerHeight - document.querySelector('.js-pageFooter').getBoundingClientRect().top + 16 +'px' : null
|
|
55
|
+
this.$store.footerIsVisible ? this.$store.sharingBottomPos.current = Math.round(window.innerHeight - document.querySelector('.js-pageFooter').getBoundingClientRect().top) + 16 +'px' : null
|
|
56
56
|
},
|
|
57
57
|
|
|
58
58
|
//Holds the percentage of scrolled viewport
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
lang="de"
|
|
6
6
|
>
|
|
7
7
|
<head>
|
|
8
|
-
|
|
9
8
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
10
9
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
11
10
|
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
@@ -14,33 +13,29 @@
|
|
|
14
13
|
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
15
14
|
<meta name="publisher" content="hessenschau.de" />
|
|
16
15
|
<meta name="language" content="Deutsch" />
|
|
17
|
-
|
|
18
16
|
</head>
|
|
19
17
|
|
|
20
18
|
<body itemscope itemtype="http://schema.org/WebPage">
|
|
19
|
+
|
|
21
20
|
{{> components/site_header/header }}
|
|
21
|
+
|
|
22
22
|
{{#unless _webview}}
|
|
23
|
-
|
|
24
|
-
{{
|
|
25
|
-
|
|
26
|
-
{{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
|
|
27
|
-
{{/components/banner/header/breadcrumb_wrapper }}
|
|
28
|
-
|
|
23
|
+
{{#> components/banner/header/breadcrumb_wrapper _hasContentNav=this.structureNav.contentNav _hasBannerImage=this.hasBannerImage}}
|
|
24
|
+
{{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
|
|
25
|
+
{{/components/banner/header/breadcrumb_wrapper }}
|
|
29
26
|
{{/unless}}
|
|
30
27
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
<div class="js-pageSwap">
|
|
29
|
+
<main
|
|
30
|
+
onclick="void(0)"
|
|
31
|
+
role="main"
|
|
32
|
+
id="content"
|
|
33
|
+
class="flex flex-col items-center justify-center"
|
|
34
|
+
>
|
|
39
35
|
{{> components/page/story/story_article }}
|
|
40
36
|
{{> components/top_button/top_button }}
|
|
41
37
|
{{> components/footer/page_footer }}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
</div>
|
|
38
|
+
</main>
|
|
39
|
+
</div>
|
|
45
40
|
</body>
|
|
46
41
|
</html>
|
|
@@ -20,9 +20,12 @@
|
|
|
20
20
|
{{/if}}
|
|
21
21
|
{{/with}}
|
|
22
22
|
{{/unless}}
|
|
23
|
-
|
|
24
|
-
{{
|
|
25
|
-
|
|
23
|
+
|
|
24
|
+
{{#unless _webview}}
|
|
25
|
+
{{~#with this.socialSharing ~}}
|
|
26
|
+
{{> components/social_sharing/social_sharing_copytext}}
|
|
27
|
+
{{~/with~}}
|
|
28
|
+
{{/unless}}
|
|
26
29
|
{{~> components/content/copytext/copytext _isWebview=_webview ~}}
|
|
27
30
|
|
|
28
31
|
{{> components/page/components/comments }}
|
|
@@ -1,48 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
x-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<div :class="{ '
|
|
11
|
-
<div :
|
|
12
|
-
:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</button>
|
|
1
|
+
{{~#with this.socialSharing ~}}
|
|
2
|
+
<div x-data="stickySharingHandler"
|
|
3
|
+
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
4
|
+
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
5
|
+
x-id="['dropdown-button']"
|
|
6
|
+
class="flex self-center justify-end ml-3 grow"
|
|
7
|
+
x-intersect:leave="$store.sharingIsVisible=false"
|
|
8
|
+
x-intersect:enter="$store.sharingIsVisible=true"
|
|
9
|
+
>
|
|
10
|
+
<div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
|
|
11
|
+
<div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
|
|
12
|
+
<div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}"
|
|
13
|
+
:class="{ 'bottom-5 flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
|
|
14
|
+
'flex-col absolute mt-3' : $store.footerIsVisible == true }"
|
|
15
|
+
class="flex self-center gap-3 bg-white left-5">
|
|
16
|
+
<button
|
|
17
|
+
class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
|
|
18
|
+
x-show="!$screen('lg')"
|
|
19
|
+
x-ref="button"
|
|
20
|
+
x-on:click="toggle()"
|
|
21
|
+
:aria-expanded="open"
|
|
22
|
+
:aria-controls="$id('dropdown-button')">
|
|
23
|
+
{{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
|
|
24
|
+
</button>
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
</
|
|
26
|
+
<!-- Panel -->
|
|
27
|
+
<div
|
|
28
|
+
x-ref="panel"
|
|
29
|
+
x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
|
|
30
|
+
x-transition.origin.bottom.right
|
|
31
|
+
x-on:click.outside="close($refs.button)"
|
|
32
|
+
:id="$id('dropdown-button')"
|
|
33
|
+
class="self-center bg-white"
|
|
34
|
+
:class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
|
|
35
|
+
>
|
|
36
|
+
<ul class="flex gap-3" :class="{ 'flex-col': $store.sharingIsVisible == false }">
|
|
37
|
+
{{> components/social_sharing/social_sharing_compact_icons }}
|
|
38
|
+
</ul>
|
|
39
|
+
</div>
|
|
41
40
|
</div>
|
|
42
41
|
</div>
|
|
43
42
|
</div>
|
|
44
43
|
</div>
|
|
45
|
-
|
|
44
|
+
{{/with}}
|
|
46
45
|
<script>
|
|
47
46
|
function stickySharingHandler(){
|
|
48
47
|
return {
|
|
@@ -55,9 +54,9 @@
|
|
|
55
54
|
var isMobile= isMobileApple || isMobileOther;
|
|
56
55
|
if (navigator.share && isMobile) {
|
|
57
56
|
navigator.share({
|
|
58
|
-
title:
|
|
59
|
-
text: '
|
|
60
|
-
url:
|
|
57
|
+
title: document.title,
|
|
58
|
+
text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
|
|
59
|
+
url: window.location.href,
|
|
61
60
|
})
|
|
62
61
|
.then(() => console.log('Shared successfully'))
|
|
63
62
|
.catch((error) => console.error('Sharing failed:', error));
|
|
@@ -73,7 +72,6 @@
|
|
|
73
72
|
},
|
|
74
73
|
close(focusAfter) {
|
|
75
74
|
if (! this.open) return
|
|
76
|
-
|
|
77
75
|
this.open = false
|
|
78
76
|
this.$store.sharingIsOpen = false
|
|
79
77
|
focusAfter && focusAfter.focus()
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
{{~#with this.twitterLink ~}}
|
|
1
2
|
<li>
|
|
2
3
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
3
4
|
|
|
@@ -12,6 +13,8 @@
|
|
|
12
13
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
|
|
13
14
|
</a>
|
|
14
15
|
</li>
|
|
16
|
+
{{/with}}
|
|
17
|
+
{{~#with this.facebookLink}}
|
|
15
18
|
<li class="">
|
|
16
19
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
17
20
|
|
|
@@ -26,6 +29,8 @@
|
|
|
26
29
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
|
|
27
30
|
</a>
|
|
28
31
|
</li>
|
|
32
|
+
{{/with}}
|
|
33
|
+
{{~#with this.whatsappLink}}
|
|
29
34
|
<li class="">
|
|
30
35
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
31
36
|
|
|
@@ -40,6 +45,8 @@
|
|
|
40
45
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
|
|
41
46
|
</a>
|
|
42
47
|
</li>
|
|
48
|
+
{{/with}}
|
|
49
|
+
{{~#with this.mailtoLink}}
|
|
43
50
|
<li class="">
|
|
44
51
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
45
52
|
|
|
@@ -52,6 +59,8 @@
|
|
|
52
59
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
|
|
53
60
|
</a>
|
|
54
61
|
</li>
|
|
62
|
+
{{/with}}
|
|
63
|
+
|
|
55
64
|
<li class="">
|
|
56
65
|
<a class="{{#with ../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
57
66
|
|
|
@@ -63,4 +72,4 @@
|
|
|
63
72
|
>
|
|
64
73
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
|
|
65
74
|
</a>
|
|
66
|
-
</li>
|
|
75
|
+
</li>
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
lang="de"
|
|
6
6
|
>
|
|
7
7
|
<head>
|
|
8
|
-
|
|
9
8
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
10
9
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
11
10
|
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
@@ -14,33 +13,29 @@
|
|
|
14
13
|
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
15
14
|
<meta name="publisher" content="hessenschau.de" />
|
|
16
15
|
<meta name="language" content="Deutsch" />
|
|
17
|
-
|
|
18
16
|
</head>
|
|
19
17
|
|
|
20
18
|
<body itemscope itemtype="http://schema.org/WebPage">
|
|
19
|
+
|
|
21
20
|
{{> components/site_header/header }}
|
|
21
|
+
|
|
22
22
|
{{#unless _webview}}
|
|
23
|
-
|
|
24
|
-
{{
|
|
25
|
-
|
|
26
|
-
{{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
|
|
27
|
-
{{/components/banner/header/breadcrumb_wrapper }}
|
|
28
|
-
|
|
23
|
+
{{#> components/banner/header/breadcrumb_wrapper _hasContentNav=this.structureNav.contentNav _hasBannerImage=this.hasBannerImage}}
|
|
24
|
+
{{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
|
|
25
|
+
{{/components/banner/header/breadcrumb_wrapper }}
|
|
29
26
|
{{/unless}}
|
|
30
27
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
<div class="js-pageSwap">
|
|
29
|
+
<main
|
|
30
|
+
onclick="void(0)"
|
|
31
|
+
role="main"
|
|
32
|
+
id="content"
|
|
33
|
+
class="flex flex-col items-center justify-center"
|
|
34
|
+
>
|
|
39
35
|
{{> components/page/story/story_article }}
|
|
40
36
|
{{> components/top_button/top_button }}
|
|
41
37
|
{{> components/footer/page_footer }}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
</div>
|
|
38
|
+
</main>
|
|
39
|
+
</div>
|
|
45
40
|
</body>
|
|
46
41
|
</html>
|
|
@@ -20,9 +20,12 @@
|
|
|
20
20
|
{{/if}}
|
|
21
21
|
{{/with}}
|
|
22
22
|
{{/unless}}
|
|
23
|
-
|
|
24
|
-
{{
|
|
25
|
-
|
|
23
|
+
|
|
24
|
+
{{#unless _webview}}
|
|
25
|
+
{{~#with this.socialSharing ~}}
|
|
26
|
+
{{> components/social_sharing/social_sharing_copytext}}
|
|
27
|
+
{{~/with~}}
|
|
28
|
+
{{/unless}}
|
|
26
29
|
{{~> components/content/copytext/copytext _isWebview=_webview ~}}
|
|
27
30
|
|
|
28
31
|
{{> components/page/components/comments }}
|
|
@@ -1,48 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
x-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<div :class="{ '
|
|
11
|
-
<div :
|
|
12
|
-
:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</button>
|
|
1
|
+
{{~#with this.socialSharing ~}}
|
|
2
|
+
<div x-data="stickySharingHandler"
|
|
3
|
+
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
4
|
+
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
5
|
+
x-id="['dropdown-button']"
|
|
6
|
+
class="flex self-center justify-end ml-3 grow"
|
|
7
|
+
x-intersect:leave="$store.sharingIsVisible=false"
|
|
8
|
+
x-intersect:enter="$store.sharingIsVisible=true"
|
|
9
|
+
>
|
|
10
|
+
<div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
|
|
11
|
+
<div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
|
|
12
|
+
<div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}"
|
|
13
|
+
:class="{ 'bottom-5 flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
|
|
14
|
+
'flex-col absolute mt-3' : $store.footerIsVisible == true }"
|
|
15
|
+
class="flex self-center gap-3 bg-white left-5">
|
|
16
|
+
<button
|
|
17
|
+
class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
|
|
18
|
+
x-show="!$screen('lg')"
|
|
19
|
+
x-ref="button"
|
|
20
|
+
x-on:click="toggle()"
|
|
21
|
+
:aria-expanded="open"
|
|
22
|
+
:aria-controls="$id('dropdown-button')">
|
|
23
|
+
{{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
|
|
24
|
+
</button>
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
</
|
|
26
|
+
<!-- Panel -->
|
|
27
|
+
<div
|
|
28
|
+
x-ref="panel"
|
|
29
|
+
x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
|
|
30
|
+
x-transition.origin.bottom.right
|
|
31
|
+
x-on:click.outside="close($refs.button)"
|
|
32
|
+
:id="$id('dropdown-button')"
|
|
33
|
+
class="self-center bg-white"
|
|
34
|
+
:class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
|
|
35
|
+
>
|
|
36
|
+
<ul class="flex gap-3" :class="{ 'flex-col': $store.sharingIsVisible == false }">
|
|
37
|
+
{{> components/social_sharing/social_sharing_compact_icons }}
|
|
38
|
+
</ul>
|
|
39
|
+
</div>
|
|
41
40
|
</div>
|
|
42
41
|
</div>
|
|
43
42
|
</div>
|
|
44
43
|
</div>
|
|
45
|
-
|
|
44
|
+
{{/with}}
|
|
46
45
|
<script>
|
|
47
46
|
function stickySharingHandler(){
|
|
48
47
|
return {
|
|
@@ -55,9 +54,9 @@
|
|
|
55
54
|
var isMobile= isMobileApple || isMobileOther;
|
|
56
55
|
if (navigator.share && isMobile) {
|
|
57
56
|
navigator.share({
|
|
58
|
-
title:
|
|
59
|
-
text: '
|
|
60
|
-
url:
|
|
57
|
+
title: document.title,
|
|
58
|
+
text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
|
|
59
|
+
url: window.location.href,
|
|
61
60
|
})
|
|
62
61
|
.then(() => console.log('Shared successfully'))
|
|
63
62
|
.catch((error) => console.error('Sharing failed:', error));
|
|
@@ -73,7 +72,6 @@
|
|
|
73
72
|
},
|
|
74
73
|
close(focusAfter) {
|
|
75
74
|
if (! this.open) return
|
|
76
|
-
|
|
77
75
|
this.open = false
|
|
78
76
|
this.$store.sharingIsOpen = false
|
|
79
77
|
focusAfter && focusAfter.focus()
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
{{~#with this.twitterLink ~}}
|
|
1
2
|
<li>
|
|
2
3
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
3
4
|
|
|
@@ -12,6 +13,8 @@
|
|
|
12
13
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
|
|
13
14
|
</a>
|
|
14
15
|
</li>
|
|
16
|
+
{{/with}}
|
|
17
|
+
{{~#with this.facebookLink}}
|
|
15
18
|
<li class="">
|
|
16
19
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
17
20
|
|
|
@@ -26,6 +29,8 @@
|
|
|
26
29
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
|
|
27
30
|
</a>
|
|
28
31
|
</li>
|
|
32
|
+
{{/with}}
|
|
33
|
+
{{~#with this.whatsappLink}}
|
|
29
34
|
<li class="">
|
|
30
35
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
31
36
|
|
|
@@ -40,6 +45,8 @@
|
|
|
40
45
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
|
|
41
46
|
</a>
|
|
42
47
|
</li>
|
|
48
|
+
{{/with}}
|
|
49
|
+
{{~#with this.mailtoLink}}
|
|
43
50
|
<li class="">
|
|
44
51
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
45
52
|
|
|
@@ -52,6 +59,8 @@
|
|
|
52
59
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
|
|
53
60
|
</a>
|
|
54
61
|
</li>
|
|
62
|
+
{{/with}}
|
|
63
|
+
|
|
55
64
|
<li class="">
|
|
56
65
|
<a class="{{#with ../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
57
66
|
|
|
@@ -63,4 +72,4 @@
|
|
|
63
72
|
>
|
|
64
73
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
|
|
65
74
|
</a>
|
|
66
|
-
</li>
|
|
75
|
+
</li>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.67.
|
|
9
|
+
"version": "1.67.3",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
"preparePartialsForDelivery": "gulp preparePartialsForDelivery",
|
|
28
28
|
"create-modernizr-config": "gulp createModernizrConfig",
|
|
29
29
|
"merge-locatags": "gulp mergeLocatags",
|
|
30
|
-
"prepare": "yarn build"
|
|
30
|
+
"prepare": "yarn build",
|
|
31
|
+
"test-storybook": "test-storybook"
|
|
31
32
|
},
|
|
32
33
|
"browserslist": [
|
|
33
34
|
"last 2 versions",
|
|
@@ -46,12 +47,16 @@
|
|
|
46
47
|
"@storybook/addon-actions": "7.5.3",
|
|
47
48
|
"@storybook/addon-console": "^2.0.0",
|
|
48
49
|
"@storybook/addon-essentials": "7.5.3",
|
|
50
|
+
"@storybook/addon-interactions": "7.6.16",
|
|
49
51
|
"@storybook/addon-links": "^7.2.1",
|
|
50
52
|
"@storybook/addon-styling": "^1.3.5",
|
|
51
53
|
"@storybook/addons": "^7.2.1",
|
|
52
54
|
"@storybook/blocks": "7.2.1",
|
|
53
55
|
"@storybook/html": "^7.2.1",
|
|
54
56
|
"@storybook/html-webpack5": "7.2.1",
|
|
57
|
+
"@storybook/jest": "^0.2.3",
|
|
58
|
+
"@storybook/test-runner": "~0.16.0",
|
|
59
|
+
"@storybook/testing-library": "^0.2.2",
|
|
55
60
|
"@storybook/theming": "^7.2.1",
|
|
56
61
|
"auto": "^11.0.5",
|
|
57
62
|
"autoprefixer": "^10.4.2",
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { userEvent, within } from '@storybook/testing-library';
|
|
2
|
+
|
|
1
3
|
const handlebars = require('hrHandlebars')
|
|
2
4
|
|
|
3
5
|
const defaultModalTemplate = (args, { globals: { customConditionalToolbar } }) => {
|
|
@@ -28,7 +30,7 @@ const userConsentModalTemplate = (args, { globals: { customConditionalToolbar }
|
|
|
28
30
|
{{> components/modal/user_consent _headline=(loca "modal_user_consent_headline") _text=(loca "modal_user_consent_text") _labelOk=(loca "modal_user_consent_label_ok") _labelCancel=(loca "modal_user_consent_label_cancel")}}
|
|
29
31
|
{{/components/modal/modal}}
|
|
30
32
|
|
|
31
|
-
<a href="https://hessenschau.de" class="js-user-consent-needed" rel="noopener" target="_blank">User Consent Modal</a>
|
|
33
|
+
<a data-testid="modal-hook" href="https://hessenschau.de" class="js-user-consent-needed" rel="noopener" target="_blank">User Consent Modal</a>
|
|
32
34
|
`)
|
|
33
35
|
return hbsTemplate({ brand, ...args })
|
|
34
36
|
}
|
|
@@ -77,3 +79,19 @@ export const userConsentModal = {
|
|
|
77
79
|
},
|
|
78
80
|
}
|
|
79
81
|
|
|
82
|
+
export const openedUserConsentModal = {
|
|
83
|
+
render: userConsentModalTemplate.bind({}),
|
|
84
|
+
name: 'User Consent Modal geöffnet',
|
|
85
|
+
args: {
|
|
86
|
+
_trigger: '.js-user-consent-needed',
|
|
87
|
+
_type: 'userConsent'
|
|
88
|
+
},
|
|
89
|
+
play: async ({ canvasElement }) => {
|
|
90
|
+
const canvas = within(canvasElement);
|
|
91
|
+
|
|
92
|
+
const link = canvas.getByTestId('modal-hook');
|
|
93
|
+
|
|
94
|
+
await userEvent.click(link);
|
|
95
|
+
},
|
|
96
|
+
}
|
|
97
|
+
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
lang="de"
|
|
6
6
|
>
|
|
7
7
|
<head>
|
|
8
|
-
|
|
9
8
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
10
9
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
11
10
|
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
@@ -14,33 +13,29 @@
|
|
|
14
13
|
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
15
14
|
<meta name="publisher" content="hessenschau.de" />
|
|
16
15
|
<meta name="language" content="Deutsch" />
|
|
17
|
-
|
|
18
16
|
</head>
|
|
19
17
|
|
|
20
18
|
<body itemscope itemtype="http://schema.org/WebPage">
|
|
19
|
+
|
|
21
20
|
{{> components/site_header/header }}
|
|
21
|
+
|
|
22
22
|
{{#unless _webview}}
|
|
23
|
-
|
|
24
|
-
{{
|
|
25
|
-
|
|
26
|
-
{{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
|
|
27
|
-
{{/components/banner/header/breadcrumb_wrapper }}
|
|
28
|
-
|
|
23
|
+
{{#> components/banner/header/breadcrumb_wrapper _hasContentNav=this.structureNav.contentNav _hasBannerImage=this.hasBannerImage}}
|
|
24
|
+
{{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
|
|
25
|
+
{{/components/banner/header/breadcrumb_wrapper }}
|
|
29
26
|
{{/unless}}
|
|
30
27
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
<div class="js-pageSwap">
|
|
29
|
+
<main
|
|
30
|
+
onclick="void(0)"
|
|
31
|
+
role="main"
|
|
32
|
+
id="content"
|
|
33
|
+
class="flex flex-col items-center justify-center"
|
|
34
|
+
>
|
|
39
35
|
{{> components/page/story/story_article }}
|
|
40
36
|
{{> components/top_button/top_button }}
|
|
41
37
|
{{> components/footer/page_footer }}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
</div>
|
|
38
|
+
</main>
|
|
39
|
+
</div>
|
|
45
40
|
</body>
|
|
46
41
|
</html>
|
|
@@ -20,9 +20,12 @@
|
|
|
20
20
|
{{/if}}
|
|
21
21
|
{{/with}}
|
|
22
22
|
{{/unless}}
|
|
23
|
-
|
|
24
|
-
{{
|
|
25
|
-
|
|
23
|
+
|
|
24
|
+
{{#unless _webview}}
|
|
25
|
+
{{~#with this.socialSharing ~}}
|
|
26
|
+
{{> components/social_sharing/social_sharing_copytext}}
|
|
27
|
+
{{~/with~}}
|
|
28
|
+
{{/unless}}
|
|
26
29
|
{{~> components/content/copytext/copytext _isWebview=_webview ~}}
|
|
27
30
|
|
|
28
31
|
{{> components/page/components/comments }}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { resetComponents } from '@storybook/components'
|
|
2
|
+
import { userEvent, within } from '@storybook/testing-library';
|
|
2
3
|
import subscribeButtonJson from 'components/teaser/fixtures/teaser_podcast.json'
|
|
3
4
|
|
|
4
5
|
import subscribeButton from 'components/podcast/components/podcast_subscribe_button.hbs'
|
|
@@ -44,8 +45,12 @@ export const SubscribeButtonOpen = {
|
|
|
44
45
|
render: Template.bind({}),
|
|
45
46
|
name: 'Subscribe Button Open',
|
|
46
47
|
|
|
47
|
-
args:
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
args: subscribeButtonJson.logicItem.includeModel.podcastChannel,
|
|
49
|
+
play: async ({ canvasElement }) => {
|
|
50
|
+
const canvas = within(canvasElement);
|
|
51
|
+
|
|
52
|
+
const button = canvas.getByRole('button');
|
|
53
|
+
|
|
54
|
+
await userEvent.click(button);
|
|
50
55
|
},
|
|
51
56
|
}
|
|
@@ -52,7 +52,7 @@ export default () => ({
|
|
|
52
52
|
},
|
|
53
53
|
|
|
54
54
|
checkFooterTopForSharingBottomPos(){
|
|
55
|
-
this.$store.footerIsVisible ? this.$store.sharingBottomPos.current = window.innerHeight - document.querySelector('.js-pageFooter').getBoundingClientRect().top + 16 +'px' : null
|
|
55
|
+
this.$store.footerIsVisible ? this.$store.sharingBottomPos.current = Math.round(window.innerHeight - document.querySelector('.js-pageFooter').getBoundingClientRect().top) + 16 +'px' : null
|
|
56
56
|
},
|
|
57
57
|
|
|
58
58
|
//Holds the percentage of scrolled viewport
|
|
@@ -1,48 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
x-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<div :class="{ '
|
|
11
|
-
<div :
|
|
12
|
-
:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</button>
|
|
1
|
+
{{~#with this.socialSharing ~}}
|
|
2
|
+
<div x-data="stickySharingHandler"
|
|
3
|
+
x-on:keydown.escape.prevent.stop="close($refs.button)"
|
|
4
|
+
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
5
|
+
x-id="['dropdown-button']"
|
|
6
|
+
class="flex self-center justify-end ml-3 grow"
|
|
7
|
+
x-intersect:leave="$store.sharingIsVisible=false"
|
|
8
|
+
x-intersect:enter="$store.sharingIsVisible=true"
|
|
9
|
+
>
|
|
10
|
+
<div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
|
|
11
|
+
<div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
|
|
12
|
+
<div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}"
|
|
13
|
+
:class="{ 'bottom-5 flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
|
|
14
|
+
'flex-col absolute mt-3' : $store.footerIsVisible == true }"
|
|
15
|
+
class="flex self-center gap-3 bg-white left-5">
|
|
16
|
+
<button
|
|
17
|
+
class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
|
|
18
|
+
x-show="!$screen('lg')"
|
|
19
|
+
x-ref="button"
|
|
20
|
+
x-on:click="toggle()"
|
|
21
|
+
:aria-expanded="open"
|
|
22
|
+
:aria-controls="$id('dropdown-button')">
|
|
23
|
+
{{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
|
|
24
|
+
</button>
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
</
|
|
26
|
+
<!-- Panel -->
|
|
27
|
+
<div
|
|
28
|
+
x-ref="panel"
|
|
29
|
+
x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
|
|
30
|
+
x-transition.origin.bottom.right
|
|
31
|
+
x-on:click.outside="close($refs.button)"
|
|
32
|
+
:id="$id('dropdown-button')"
|
|
33
|
+
class="self-center bg-white"
|
|
34
|
+
:class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
|
|
35
|
+
>
|
|
36
|
+
<ul class="flex gap-3" :class="{ 'flex-col': $store.sharingIsVisible == false }">
|
|
37
|
+
{{> components/social_sharing/social_sharing_compact_icons }}
|
|
38
|
+
</ul>
|
|
39
|
+
</div>
|
|
41
40
|
</div>
|
|
42
41
|
</div>
|
|
43
42
|
</div>
|
|
44
43
|
</div>
|
|
45
|
-
|
|
44
|
+
{{/with}}
|
|
46
45
|
<script>
|
|
47
46
|
function stickySharingHandler(){
|
|
48
47
|
return {
|
|
@@ -55,9 +54,9 @@
|
|
|
55
54
|
var isMobile= isMobileApple || isMobileOther;
|
|
56
55
|
if (navigator.share && isMobile) {
|
|
57
56
|
navigator.share({
|
|
58
|
-
title:
|
|
59
|
-
text: '
|
|
60
|
-
url:
|
|
57
|
+
title: document.title,
|
|
58
|
+
text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
|
|
59
|
+
url: window.location.href,
|
|
61
60
|
})
|
|
62
61
|
.then(() => console.log('Shared successfully'))
|
|
63
62
|
.catch((error) => console.error('Sharing failed:', error));
|
|
@@ -73,7 +72,6 @@
|
|
|
73
72
|
},
|
|
74
73
|
close(focusAfter) {
|
|
75
74
|
if (! this.open) return
|
|
76
|
-
|
|
77
75
|
this.open = false
|
|
78
76
|
this.$store.sharingIsOpen = false
|
|
79
77
|
focusAfter && focusAfter.focus()
|
|
@@ -1,25 +1,18 @@
|
|
|
1
1
|
import story_template from './social_sharing_compact.hbs'
|
|
2
|
+
import socialSharing from '../page/story/fixtures/story.json'
|
|
2
3
|
|
|
4
|
+
console.log(socialSharing)
|
|
3
5
|
const Template = ({ ...args }) => {
|
|
4
|
-
// You can either use a function to create DOM elements or use a plain html string!
|
|
5
|
-
// return `<span>${topline}</span>`;
|
|
6
6
|
return story_template({ ...args })
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
10
|
title: 'Komponenten/Social Sharing',
|
|
11
|
-
}
|
|
11
|
+
}
|
|
12
12
|
|
|
13
13
|
export const Default = {
|
|
14
14
|
render: Template.bind({}),
|
|
15
15
|
name: 'Social Sharing Kompakt',
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
decorators: [
|
|
19
|
-
(Story) => {
|
|
20
|
-
return `<div class="w-full mt-40 h-[500rem]">
|
|
21
|
-
${Story()}
|
|
22
|
-
</div>`
|
|
23
|
-
},
|
|
24
|
-
],
|
|
16
|
+
args: socialSharing
|
|
17
|
+
|
|
25
18
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
{{~#with this.twitterLink ~}}
|
|
1
2
|
<li>
|
|
2
3
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
3
4
|
|
|
@@ -12,6 +13,8 @@
|
|
|
12
13
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
|
|
13
14
|
</a>
|
|
14
15
|
</li>
|
|
16
|
+
{{/with}}
|
|
17
|
+
{{~#with this.facebookLink}}
|
|
15
18
|
<li class="">
|
|
16
19
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
17
20
|
|
|
@@ -26,6 +29,8 @@
|
|
|
26
29
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
|
|
27
30
|
</a>
|
|
28
31
|
</li>
|
|
32
|
+
{{/with}}
|
|
33
|
+
{{~#with this.whatsappLink}}
|
|
29
34
|
<li class="">
|
|
30
35
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
31
36
|
|
|
@@ -40,6 +45,8 @@
|
|
|
40
45
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
|
|
41
46
|
</a>
|
|
42
47
|
</li>
|
|
48
|
+
{{/with}}
|
|
49
|
+
{{~#with this.mailtoLink}}
|
|
43
50
|
<li class="">
|
|
44
51
|
<a class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}{{#with ../../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
45
52
|
|
|
@@ -52,6 +59,8 @@
|
|
|
52
59
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
|
|
53
60
|
</a>
|
|
54
61
|
</li>
|
|
62
|
+
{{/with}}
|
|
63
|
+
|
|
55
64
|
<li class="">
|
|
56
65
|
<a class="{{#with ../this.content.trackingData}} js-load{{/with}} flex order-2 ds-button font-heading active:scale-95 w-8 h-8"
|
|
57
66
|
|
|
@@ -63,4 +72,4 @@
|
|
|
63
72
|
>
|
|
64
73
|
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
|
|
65
74
|
</a>
|
|
66
|
-
</li>
|
|
75
|
+
</li>
|