hr-design-system-handlebars 1.63.5 → 1.63.6
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/CHANGELOG.md +12 -0
- package/dist/assets/icons/icons/svgmap/sharing.svg +11 -0
- package/dist/assets/icons/icons/svgmap.min.svg +1 -1
- package/dist/assets/index.css +18 -37
- package/dist/assets/js/alpine.js +3 -0
- package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js +1 -0
- package/dist/views/components/page/index/page_test_story.hbs +36 -0
- package/dist/views/components/site_header/header.hbs +1 -0
- package/dist/views/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/dist/views/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/dist/views/components/top_button/top_button.hbs +1 -1
- package/dist/views_static/components/page/index/page_test_story.hbs +36 -0
- package/dist/views_static/components/site_header/header.hbs +1 -0
- package/dist/views_static/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/dist/views_static/components/top_button/top_button.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/icons/icons/svgmap/sharing.svg +11 -0
- package/src/assets/icons/icons/svgmap.min.svg +1 -1
- package/src/assets/js/alpine.js +3 -0
- package/src/stories/views/components/page/components/metadatabox.stories.js +1 -1
- package/src/stories/views/components/page/index/page.data.js +6 -2
- package/src/stories/views/components/page/index/page.stories.js +15 -0
- package/src/stories/views/components/page/index/page_test_story.hbs +36 -0
- package/src/stories/views/components/site_header/header.hbs +1 -0
- package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js +1 -0
- package/src/stories/views/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/src/stories/views/components/social_sharing/social_sharing_compact.stories.js +1 -1
- package/src/stories/views/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/src/stories/views/components/top_button/top_button.hbs +1 -1
package/dist/assets/index.css
CHANGED
|
@@ -1088,15 +1088,15 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1088
1088
|
.top-0\.5 {
|
|
1089
1089
|
top: 0.125rem;
|
|
1090
1090
|
}
|
|
1091
|
-
.top-1 {
|
|
1092
|
-
top: 0.25rem;
|
|
1093
|
-
}
|
|
1094
1091
|
.top-1\/2 {
|
|
1095
1092
|
top: 50%;
|
|
1096
1093
|
}
|
|
1097
1094
|
.top-10 {
|
|
1098
1095
|
top: 2.5rem;
|
|
1099
1096
|
}
|
|
1097
|
+
.top-40 {
|
|
1098
|
+
top: 10rem;
|
|
1099
|
+
}
|
|
1100
1100
|
.top-8 {
|
|
1101
1101
|
top: 2rem;
|
|
1102
1102
|
}
|
|
@@ -1446,12 +1446,18 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1446
1446
|
.mt-4\.5 {
|
|
1447
1447
|
margin-top: 1.125rem;
|
|
1448
1448
|
}
|
|
1449
|
+
.mt-40 {
|
|
1450
|
+
margin-top: 10rem;
|
|
1451
|
+
}
|
|
1449
1452
|
.mt-5 {
|
|
1450
1453
|
margin-top: 1.25rem;
|
|
1451
1454
|
}
|
|
1452
1455
|
.mt-6 {
|
|
1453
1456
|
margin-top: 1.5rem;
|
|
1454
1457
|
}
|
|
1458
|
+
.mt-60 {
|
|
1459
|
+
margin-top: 15rem;
|
|
1460
|
+
}
|
|
1455
1461
|
.mt-7 {
|
|
1456
1462
|
margin-top: 1.75rem;
|
|
1457
1463
|
}
|
|
@@ -2527,9 +2533,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2527
2533
|
.fill-blue-midnight {
|
|
2528
2534
|
fill: #023770;
|
|
2529
2535
|
}
|
|
2530
|
-
.fill-button {
|
|
2531
|
-
fill: var(--color-button);
|
|
2532
|
-
}
|
|
2533
2536
|
.fill-content-nav {
|
|
2534
2537
|
fill: #005293;
|
|
2535
2538
|
fill: var(--color-content-nav);
|
|
@@ -2579,9 +2582,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2579
2582
|
.p-2 {
|
|
2580
2583
|
padding: 0.5rem;
|
|
2581
2584
|
}
|
|
2582
|
-
.p-3 {
|
|
2583
|
-
padding: 0.75rem;
|
|
2584
|
-
}
|
|
2585
2585
|
.p-4 {
|
|
2586
2586
|
padding: 1rem;
|
|
2587
2587
|
}
|
|
@@ -3321,7 +3321,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3321
3321
|
border-bottom-color: var(--color-secondary-ds);
|
|
3322
3322
|
}
|
|
3323
3323
|
.counter-reset {
|
|
3324
|
-
counter-reset:
|
|
3324
|
+
counter-reset: cnt1712841771262;
|
|
3325
3325
|
}
|
|
3326
3326
|
.hyphens-auto {
|
|
3327
3327
|
-webkit-hyphens: auto;
|
|
@@ -3700,7 +3700,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3700
3700
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3701
3701
|
}
|
|
3702
3702
|
.-ordered {
|
|
3703
|
-
counter-increment:
|
|
3703
|
+
counter-increment: cnt1712841771262 1;
|
|
3704
3704
|
}
|
|
3705
3705
|
.-ordered::before {
|
|
3706
3706
|
position: absolute;
|
|
@@ -3716,7 +3716,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3716
3716
|
letter-spacing: .0125em;
|
|
3717
3717
|
--tw-text-opacity: 1;
|
|
3718
3718
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3719
|
-
content: counter(
|
|
3719
|
+
content: counter(cnt1712841771262);
|
|
3720
3720
|
}
|
|
3721
3721
|
/*! ****************************/
|
|
3722
3722
|
/*! DataPolicy stuff */
|
|
@@ -5172,22 +5172,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
5172
5172
|
--tw-bg-opacity: 1;
|
|
5173
5173
|
background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
|
|
5174
5174
|
}
|
|
5175
|
-
.hover\:fill-\[\#0f1419\]:hover {
|
|
5176
|
-
fill: #0f1419;
|
|
5177
|
-
}
|
|
5178
|
-
.hover\:fill-\[\#3b5999\]:hover {
|
|
5179
|
-
fill: #3b5999;
|
|
5180
|
-
}
|
|
5181
|
-
.hover\:fill-\[\#4dc247\]:hover {
|
|
5182
|
-
fill: #4dc247;
|
|
5183
|
-
}
|
|
5184
|
-
.hover\:fill-black:hover {
|
|
5185
|
-
fill: #000000;
|
|
5186
|
-
}
|
|
5187
|
-
.hover\:fill-link-dark:hover {
|
|
5188
|
-
fill: #006eb7;
|
|
5189
|
-
fill: var(--color-link-dark);
|
|
5190
|
-
}
|
|
5191
5175
|
.hover\:fill-media-button:hover {
|
|
5192
5176
|
fill: #276b9e;
|
|
5193
5177
|
fill: var(--color-media-button);
|
|
@@ -5281,9 +5265,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
5281
5265
|
.group:hover .group-hover\:static {
|
|
5282
5266
|
position: static;
|
|
5283
5267
|
}
|
|
5284
|
-
.group:hover .group-hover\:fill-button--dark {
|
|
5285
|
-
fill: var(--color-button--dark);
|
|
5286
|
-
}
|
|
5287
5268
|
.group:hover .group-hover\:fill-media-button {
|
|
5288
5269
|
fill: #276b9e;
|
|
5289
5270
|
fill: var(--color-media-button);
|
|
@@ -7335,20 +7316,20 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
7335
7316
|
}
|
|
7336
7317
|
@media (min-width: 1040px) {
|
|
7337
7318
|
|
|
7338
|
-
.socialShareDesktop
|
|
7339
|
-
|
|
7319
|
+
.socialShareDesktop\:-left-2 {
|
|
7320
|
+
left: -0.5rem;
|
|
7340
7321
|
}
|
|
7341
7322
|
|
|
7342
|
-
.socialShareDesktop\:
|
|
7343
|
-
|
|
7323
|
+
.socialShareDesktop\:bottom-auto {
|
|
7324
|
+
bottom: auto;
|
|
7344
7325
|
}
|
|
7345
7326
|
|
|
7346
7327
|
.socialShareDesktop\:top-0 {
|
|
7347
7328
|
top: 0px;
|
|
7348
7329
|
}
|
|
7349
7330
|
|
|
7350
|
-
.socialShareDesktop\:top-
|
|
7351
|
-
top:
|
|
7331
|
+
.socialShareDesktop\:top-32 {
|
|
7332
|
+
top: 8rem;
|
|
7352
7333
|
}
|
|
7353
7334
|
}
|
|
7354
7335
|
.\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1[\:has\(\%2B.-hideOnMobile\)] {
|
package/dist/assets/js/alpine.js
CHANGED
|
@@ -39,6 +39,9 @@ Alpine.store('serviceID', {
|
|
|
39
39
|
Alpine.store('navIsVisible', true)
|
|
40
40
|
Alpine.store('subNavIsVisible', false)
|
|
41
41
|
Alpine.store('footerIsVisible', false)
|
|
42
|
+
Alpine.store('globalPercent', {
|
|
43
|
+
current: '0'
|
|
44
|
+
})
|
|
42
45
|
|
|
43
46
|
// Initialization of data handlers
|
|
44
47
|
Alpine.data('mainNavigationHandler', mainNavigationHandler)
|
|
@@ -34,6 +34,7 @@ export default () => ({
|
|
|
34
34
|
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
35
35
|
winScroll > lastScrollTop ? (this.scrollingDown = true) : (this.scrollingDown = false)
|
|
36
36
|
this.percent = Math.round((winScroll / height) * 100)
|
|
37
|
+
this.$store.globalPercent.current = this.percent
|
|
37
38
|
lastScrollTop = winScroll
|
|
38
39
|
this.$store.navIsVisible = !this.isNavHidden()
|
|
39
40
|
this.$store.subNavIsVisible = !this.isSubNavHidden()
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html
|
|
3
|
+
class="no-js no-js-burgerMenu preload noMicroInteraction"
|
|
4
|
+
data-theme="hessenschau"
|
|
5
|
+
lang="de"
|
|
6
|
+
>
|
|
7
|
+
<head>
|
|
8
|
+
|
|
9
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
10
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
11
|
+
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
12
|
+
<meta name="application-name" content="hessenschau.de" />
|
|
13
|
+
<meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
|
|
14
|
+
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
15
|
+
<meta name="publisher" content="hessenschau.de" />
|
|
16
|
+
<meta name="language" content="Deutsch" />
|
|
17
|
+
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body itemscope itemtype="http://schema.org/WebPage">
|
|
21
|
+
{{> components/site_header/header }}
|
|
22
|
+
<div class="js-pageSwap">
|
|
23
|
+
<main
|
|
24
|
+
onclick="void(0)"
|
|
25
|
+
role="main"
|
|
26
|
+
id="content"
|
|
27
|
+
class="flex flex-col items-center justify-center"
|
|
28
|
+
>
|
|
29
|
+
|
|
30
|
+
{{> components/page/story/story_article }}
|
|
31
|
+
{{> components/top_button/top_button }}
|
|
32
|
+
</main>
|
|
33
|
+
|
|
34
|
+
</div>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
|
+
x-ref="headerWrapper"
|
|
5
6
|
@resize.window="resetNav()"
|
|
6
7
|
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
7
8
|
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
@@ -40,28 +40,30 @@
|
|
|
40
40
|
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
41
41
|
x-id="['dropdown-button']"
|
|
42
42
|
class="flex self-center justify-end grow "
|
|
43
|
-
x-intersect:leave="sharingIsVisible = false"
|
|
44
|
-
x-intersect:enter="sharingIsVisible = true"
|
|
43
|
+
x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
|
|
44
|
+
x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
|
|
45
|
+
|
|
45
46
|
>
|
|
46
|
-
|
|
47
|
+
{{!-- <div class="fixed left-1 top-40">
|
|
47
48
|
sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
|
|
48
49
|
open:<span x-text="open" ></span><br>
|
|
49
|
-
isDesktop:<span x-text="isDesktop" ></span>
|
|
50
|
-
|
|
50
|
+
isDesktop:<span x-text="isDesktop" ></span><br>
|
|
51
|
+
PercentScrolled:<span x-text="$store.globalPercent.current"></span>
|
|
52
|
+
</div> --}}
|
|
53
|
+
|
|
51
54
|
<div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
|
|
52
55
|
<div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
|
|
53
|
-
<div class="flex gap-3" :class="{ 'bottom-5 socialShareDesktop:top-
|
|
56
|
+
<div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
|
|
54
57
|
<button
|
|
55
|
-
class="order-2
|
|
58
|
+
class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
|
|
56
59
|
x-show="!isDesktop"
|
|
57
60
|
x-ref="button"
|
|
58
61
|
x-on:click="toggle()"
|
|
59
62
|
:aria-expanded="open"
|
|
60
63
|
:aria-controls="$id('dropdown-button')">
|
|
61
|
-
{{> components/base/image/icon _addClass="w-
|
|
64
|
+
{{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
|
|
62
65
|
</button>
|
|
63
66
|
|
|
64
|
-
|
|
65
67
|
<!-- Panel -->
|
|
66
68
|
<div
|
|
67
69
|
x-ref="panel"
|
|
@@ -69,7 +71,8 @@
|
|
|
69
71
|
x-transition.origin.right
|
|
70
72
|
x-on:click.outside="close($refs.button)"
|
|
71
73
|
:id="$id('dropdown-button')"
|
|
72
|
-
class="bg-white"
|
|
74
|
+
class="p-1 bg-white"
|
|
75
|
+
:class="sharingIsVisible ? 'h-8' : 'w-8'}"
|
|
73
76
|
>
|
|
74
77
|
<ul class="flex gap-3" :class="{ 'flex-col': ! sharingIsVisible }">
|
|
75
78
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
|
|
10
10
|
{{/with}}
|
|
11
11
|
>
|
|
12
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
12
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
|
|
13
13
|
</a>
|
|
14
14
|
</li>
|
|
15
15
|
<li class="">
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
24
24
|
{{/with}}
|
|
25
25
|
>
|
|
26
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
26
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
|
|
27
27
|
</a>
|
|
28
28
|
</li>
|
|
29
29
|
<li class="">
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
38
38
|
{{/with}}
|
|
39
39
|
>
|
|
40
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
40
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
|
|
41
41
|
</a>
|
|
42
42
|
</li>
|
|
43
43
|
<li class="">
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
50
50
|
{{/with}}
|
|
51
51
|
>
|
|
52
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
52
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
|
|
53
53
|
</a>
|
|
54
54
|
</li>
|
|
55
55
|
<li class="">
|
|
@@ -61,6 +61,6 @@
|
|
|
61
61
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
62
62
|
{{/with}}
|
|
63
63
|
>
|
|
64
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
64
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
|
|
65
65
|
</a>
|
|
66
66
|
</li>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
|
|
13
13
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
14
14
|
x-transition:leave-end="opacity-0 translate-y-12"
|
|
15
|
-
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-
|
|
15
|
+
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105 [@media(min-width:1170px)]:-mr-14"
|
|
16
16
|
>
|
|
17
17
|
{{> components/base/image/icon _icon="arrow-up" _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}
|
|
18
18
|
</button>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html
|
|
3
|
+
class="no-js no-js-burgerMenu preload noMicroInteraction"
|
|
4
|
+
data-theme="hessenschau"
|
|
5
|
+
lang="de"
|
|
6
|
+
>
|
|
7
|
+
<head>
|
|
8
|
+
|
|
9
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
10
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
11
|
+
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
12
|
+
<meta name="application-name" content="hessenschau.de" />
|
|
13
|
+
<meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
|
|
14
|
+
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
15
|
+
<meta name="publisher" content="hessenschau.de" />
|
|
16
|
+
<meta name="language" content="Deutsch" />
|
|
17
|
+
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body itemscope itemtype="http://schema.org/WebPage">
|
|
21
|
+
{{> components/site_header/header }}
|
|
22
|
+
<div class="js-pageSwap">
|
|
23
|
+
<main
|
|
24
|
+
onclick="void(0)"
|
|
25
|
+
role="main"
|
|
26
|
+
id="content"
|
|
27
|
+
class="flex flex-col items-center justify-center"
|
|
28
|
+
>
|
|
29
|
+
|
|
30
|
+
{{> components/page/story/story_article }}
|
|
31
|
+
{{> components/top_button/top_button }}
|
|
32
|
+
</main>
|
|
33
|
+
|
|
34
|
+
</div>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
|
+
x-ref="headerWrapper"
|
|
5
6
|
@resize.window="resetNav()"
|
|
6
7
|
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
7
8
|
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
@@ -40,28 +40,30 @@
|
|
|
40
40
|
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
41
41
|
x-id="['dropdown-button']"
|
|
42
42
|
class="flex self-center justify-end grow "
|
|
43
|
-
x-intersect:leave="sharingIsVisible = false"
|
|
44
|
-
x-intersect:enter="sharingIsVisible = true"
|
|
43
|
+
x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
|
|
44
|
+
x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
|
|
45
|
+
|
|
45
46
|
>
|
|
46
|
-
|
|
47
|
+
{{!-- <div class="fixed left-1 top-40">
|
|
47
48
|
sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
|
|
48
49
|
open:<span x-text="open" ></span><br>
|
|
49
|
-
isDesktop:<span x-text="isDesktop" ></span>
|
|
50
|
-
|
|
50
|
+
isDesktop:<span x-text="isDesktop" ></span><br>
|
|
51
|
+
PercentScrolled:<span x-text="$store.globalPercent.current"></span>
|
|
52
|
+
</div> --}}
|
|
53
|
+
|
|
51
54
|
<div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
|
|
52
55
|
<div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
|
|
53
|
-
<div class="flex gap-3" :class="{ 'bottom-5 socialShareDesktop:top-
|
|
56
|
+
<div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
|
|
54
57
|
<button
|
|
55
|
-
class="order-2
|
|
58
|
+
class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
|
|
56
59
|
x-show="!isDesktop"
|
|
57
60
|
x-ref="button"
|
|
58
61
|
x-on:click="toggle()"
|
|
59
62
|
:aria-expanded="open"
|
|
60
63
|
:aria-controls="$id('dropdown-button')">
|
|
61
|
-
{{> components/base/image/icon _addClass="w-
|
|
64
|
+
{{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
|
|
62
65
|
</button>
|
|
63
66
|
|
|
64
|
-
|
|
65
67
|
<!-- Panel -->
|
|
66
68
|
<div
|
|
67
69
|
x-ref="panel"
|
|
@@ -69,7 +71,8 @@
|
|
|
69
71
|
x-transition.origin.right
|
|
70
72
|
x-on:click.outside="close($refs.button)"
|
|
71
73
|
:id="$id('dropdown-button')"
|
|
72
|
-
class="bg-white"
|
|
74
|
+
class="p-1 bg-white"
|
|
75
|
+
:class="sharingIsVisible ? 'h-8' : 'w-8'}"
|
|
73
76
|
>
|
|
74
77
|
<ul class="flex gap-3" :class="{ 'flex-col': ! sharingIsVisible }">
|
|
75
78
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
|
|
10
10
|
{{/with}}
|
|
11
11
|
>
|
|
12
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
12
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
|
|
13
13
|
</a>
|
|
14
14
|
</li>
|
|
15
15
|
<li class="">
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
24
24
|
{{/with}}
|
|
25
25
|
>
|
|
26
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
26
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
|
|
27
27
|
</a>
|
|
28
28
|
</li>
|
|
29
29
|
<li class="">
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
38
38
|
{{/with}}
|
|
39
39
|
>
|
|
40
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
40
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
|
|
41
41
|
</a>
|
|
42
42
|
</li>
|
|
43
43
|
<li class="">
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
50
50
|
{{/with}}
|
|
51
51
|
>
|
|
52
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
52
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
|
|
53
53
|
</a>
|
|
54
54
|
</li>
|
|
55
55
|
<li class="">
|
|
@@ -61,6 +61,6 @@
|
|
|
61
61
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
62
62
|
{{/with}}
|
|
63
63
|
>
|
|
64
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
64
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
|
|
65
65
|
</a>
|
|
66
66
|
</li>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
|
|
13
13
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
14
14
|
x-transition:leave-end="opacity-0 translate-y-12"
|
|
15
|
-
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-
|
|
15
|
+
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105 [@media(min-width:1170px)]:-mr-14"
|
|
16
16
|
>
|
|
17
17
|
{{> components/base/image/icon _icon="arrow-up" _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}
|
|
18
18
|
</button>
|
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.63.
|
|
9
|
+
"version": "1.63.6",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
|
5
|
+
<path d="M43.9,36.8c0,3.6-3.1,6.6-6.7,6.4c-3.8-0.3-6.4-3.5-6-7.2c0-0.2-0.2-0.6-0.4-0.7c-4-2-8-4-12-6c-0.5-0.3-0.7,0-1,0.3
|
|
6
|
+
c-2.2,2.2-4.8,3-7.8,2.2C6.9,30.9,5,29,4.3,26c-0.9-3.5,0.7-7.1,3.8-8.9c3.1-1.8,7.1-1.2,9.5,1.4c0.6,0.6,0.9,0.6,1.6,0.2
|
|
7
|
+
c3.8-1.9,7.6-3.8,11.5-5.7c0.5-0.2,0.6-0.4,0.5-1c-0.5-3.5,2-6.6,5.5-7.2c3.4-0.5,6.7,1.9,7.2,5.2c0.6,3.6-1.7,6.9-5.2,7.5
|
|
8
|
+
c-2.1,0.4-4-0.1-5.5-1.6c-0.4-0.4-0.7-0.4-1.2-0.2c-3.9,2-7.7,3.9-11.6,5.8c-0.6,0.3-0.7,0.6-0.6,1.2c0.1,0.9,0,1.8,0,2.8
|
|
9
|
+
c0,0.3,0.2,0.6,0.3,0.7c4,2,8.1,4.1,12.1,6.1c0.2,0.1,0.7-0.1,0.9-0.2c3.6-3.3,9.4-1.6,10.5,3.2C43.8,35.9,43.8,36.4,43.9,36.8
|
|
10
|
+
L43.9,36.8z"/>
|
|
11
|
+
</svg>
|