hr-design-system-handlebars 1.63.5 → 1.63.7

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.
Files changed (30) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/icons/icons/svgmap/sharing.svg +11 -0
  3. package/dist/assets/icons/icons/svgmap.min.svg +1 -1
  4. package/dist/assets/index.css +29 -37
  5. package/dist/assets/js/alpine.js +3 -0
  6. package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js +1 -0
  7. package/dist/views/components/page/index/page_test_story.hbs +36 -0
  8. package/dist/views/components/site_header/header.hbs +1 -0
  9. package/dist/views/components/social_sharing/social_sharing_compact.hbs +13 -10
  10. package/dist/views/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
  11. package/dist/views/components/top_button/top_button.hbs +1 -1
  12. package/dist/views_static/components/page/index/page_test_story.hbs +36 -0
  13. package/dist/views_static/components/site_header/header.hbs +1 -0
  14. package/dist/views_static/components/social_sharing/social_sharing_compact.hbs +13 -10
  15. package/dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
  16. package/dist/views_static/components/top_button/top_button.hbs +1 -1
  17. package/package.json +1 -1
  18. package/src/assets/icons/icons/svgmap/sharing.svg +11 -0
  19. package/src/assets/icons/icons/svgmap.min.svg +1 -1
  20. package/src/assets/js/alpine.js +3 -0
  21. package/src/stories/views/components/page/components/metadatabox.stories.js +1 -1
  22. package/src/stories/views/components/page/index/page.data.js +6 -2
  23. package/src/stories/views/components/page/index/page.stories.js +15 -0
  24. package/src/stories/views/components/page/index/page_test_story.hbs +36 -0
  25. package/src/stories/views/components/site_header/header.hbs +1 -0
  26. package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js +1 -0
  27. package/src/stories/views/components/social_sharing/social_sharing_compact.hbs +13 -10
  28. package/src/stories/views/components/social_sharing/social_sharing_compact.stories.js +1 -1
  29. package/src/stories/views/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
  30. package/src/stories/views/components/top_button/top_button.hbs +1 -1
@@ -1067,6 +1067,9 @@ article.indexTextDS .indexTextHighlighted .link {
1067
1067
  .right-0 {
1068
1068
  right: 0px;
1069
1069
  }
1070
+ .right-\[60px\] {
1071
+ right: 60px;
1072
+ }
1070
1073
  .right-auto {
1071
1074
  right: auto;
1072
1075
  }
@@ -1088,15 +1091,15 @@ article.indexTextDS .indexTextHighlighted .link {
1088
1091
  .top-0\.5 {
1089
1092
  top: 0.125rem;
1090
1093
  }
1091
- .top-1 {
1092
- top: 0.25rem;
1093
- }
1094
1094
  .top-1\/2 {
1095
1095
  top: 50%;
1096
1096
  }
1097
1097
  .top-10 {
1098
1098
  top: 2.5rem;
1099
1099
  }
1100
+ .top-40 {
1101
+ top: 10rem;
1102
+ }
1100
1103
  .top-8 {
1101
1104
  top: 2rem;
1102
1105
  }
@@ -1446,12 +1449,18 @@ article.indexTextDS .indexTextHighlighted .link {
1446
1449
  .mt-4\.5 {
1447
1450
  margin-top: 1.125rem;
1448
1451
  }
1452
+ .mt-40 {
1453
+ margin-top: 10rem;
1454
+ }
1449
1455
  .mt-5 {
1450
1456
  margin-top: 1.25rem;
1451
1457
  }
1452
1458
  .mt-6 {
1453
1459
  margin-top: 1.5rem;
1454
1460
  }
1461
+ .mt-60 {
1462
+ margin-top: 15rem;
1463
+ }
1455
1464
  .mt-7 {
1456
1465
  margin-top: 1.75rem;
1457
1466
  }
@@ -2527,9 +2536,6 @@ article.indexTextDS .indexTextHighlighted .link {
2527
2536
  .fill-blue-midnight {
2528
2537
  fill: #023770;
2529
2538
  }
2530
- .fill-button {
2531
- fill: var(--color-button);
2532
- }
2533
2539
  .fill-content-nav {
2534
2540
  fill: #005293;
2535
2541
  fill: var(--color-content-nav);
@@ -2579,9 +2585,6 @@ article.indexTextDS .indexTextHighlighted .link {
2579
2585
  .p-2 {
2580
2586
  padding: 0.5rem;
2581
2587
  }
2582
- .p-3 {
2583
- padding: 0.75rem;
2584
- }
2585
2588
  .p-4 {
2586
2589
  padding: 1rem;
2587
2590
  }
@@ -3321,7 +3324,7 @@ article.indexTextDS .indexTextHighlighted .link {
3321
3324
  border-bottom-color: var(--color-secondary-ds);
3322
3325
  }
3323
3326
  .counter-reset {
3324
- counter-reset: cnt1712669617924;
3327
+ counter-reset: cnt1712845768365;
3325
3328
  }
3326
3329
  .hyphens-auto {
3327
3330
  -webkit-hyphens: auto;
@@ -3700,7 +3703,7 @@ article.indexTextDS .indexTextHighlighted .link {
3700
3703
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3701
3704
  }
3702
3705
  .-ordered {
3703
- counter-increment: cnt1712669617924 1;
3706
+ counter-increment: cnt1712845768365 1;
3704
3707
  }
3705
3708
  .-ordered::before {
3706
3709
  position: absolute;
@@ -3716,7 +3719,7 @@ article.indexTextDS .indexTextHighlighted .link {
3716
3719
  letter-spacing: .0125em;
3717
3720
  --tw-text-opacity: 1;
3718
3721
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3719
- content: counter(cnt1712669617924);
3722
+ content: counter(cnt1712845768365);
3720
3723
  }
3721
3724
  /*! ****************************/
3722
3725
  /*! DataPolicy stuff */
@@ -5172,22 +5175,6 @@ article.indexTextDS .indexTextHighlighted .link {
5172
5175
  --tw-bg-opacity: 1;
5173
5176
  background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
5174
5177
  }
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
5178
  .hover\:fill-media-button:hover {
5192
5179
  fill: #276b9e;
5193
5180
  fill: var(--color-media-button);
@@ -5281,9 +5268,6 @@ article.indexTextDS .indexTextHighlighted .link {
5281
5268
  .group:hover .group-hover\:static {
5282
5269
  position: static;
5283
5270
  }
5284
- .group:hover .group-hover\:fill-button--dark {
5285
- fill: var(--color-button--dark);
5286
- }
5287
5271
  .group:hover .group-hover\:fill-media-button {
5288
5272
  fill: #276b9e;
5289
5273
  fill: var(--color-media-button);
@@ -6001,6 +5985,10 @@ article.indexTextDS .indexTextHighlighted .link {
6001
5985
  position: absolute;
6002
5986
  }
6003
5987
 
5988
+ .md\:relative {
5989
+ position: relative;
5990
+ }
5991
+
6004
5992
  .md\:left-0 {
6005
5993
  left: 0px;
6006
5994
  }
@@ -6009,6 +5997,10 @@ article.indexTextDS .indexTextHighlighted .link {
6009
5997
  left: auto;
6010
5998
  }
6011
5999
 
6000
+ .md\:right-0 {
6001
+ right: 0px;
6002
+ }
6003
+
6012
6004
  .md\:top-12 {
6013
6005
  top: 3rem;
6014
6006
  }
@@ -7335,20 +7327,20 @@ article.indexTextDS .indexTextHighlighted .link {
7335
7327
  }
7336
7328
  @media (min-width: 1040px) {
7337
7329
 
7338
- .socialShareDesktop\:bottom-auto {
7339
- bottom: auto;
7330
+ .socialShareDesktop\:-left-2 {
7331
+ left: -0.5rem;
7340
7332
  }
7341
7333
 
7342
- .socialShareDesktop\:left-1 {
7343
- left: 0.25rem;
7334
+ .socialShareDesktop\:bottom-auto {
7335
+ bottom: auto;
7344
7336
  }
7345
7337
 
7346
7338
  .socialShareDesktop\:top-0 {
7347
7339
  top: 0px;
7348
7340
  }
7349
7341
 
7350
- .socialShareDesktop\:top-5 {
7351
- top: 1.25rem;
7342
+ .socialShareDesktop\:top-32 {
7343
+ top: 8rem;
7352
7344
  }
7353
7345
  }
7354
7346
  .\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1[\:has\(\%2B.-hideOnMobile\)] {
@@ -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
- <div class="fixed left-1 top-1">
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
- </div>
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-5 left-5 socialShareDesktop:left-1 flex-col absolute bg-white': !sharingIsVisible }">
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 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
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-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
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 absolute right-[60px] z-100 md:relative md:right-0' : 'relative right-0 z-1 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:fill-[#0f1419] " _icon="x-ds" _iconmap="icons" ~}}
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:fill-[#3b5999] " _icon="facebook-ds" _iconmap="icons" ~}}
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:fill-[#4dc247] " _icon="whatsapp-ds" _iconmap="icons" ~}}
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:fill-black " _icon="kontakt-ds" _iconmap="icons" ~}}
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:fill-link-dark " _icon="copy-ds" _iconmap="icons" ~}}
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-3 h-max mr-5 [@media(min-width:1170px)]:-mr-14"
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
- <div class="fixed left-1 top-1">
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
- </div>
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-5 left-5 socialShareDesktop:left-1 flex-col absolute bg-white': !sharingIsVisible }">
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 w-8 h-8 ds-button font-heading active:scale-95 hover:scale-105 group"
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-full h-full fill-button group-hover:fill-button--dark" _icon="teilen-button" _iconmap="icons" }}
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 absolute right-[60px] z-100 md:relative md:right-0' : 'relative right-0 z-1 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:fill-[#0f1419] " _icon="x-ds" _iconmap="icons" ~}}
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:fill-[#3b5999] " _icon="facebook-ds" _iconmap="icons" ~}}
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:fill-[#4dc247] " _icon="whatsapp-ds" _iconmap="icons" ~}}
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:fill-black " _icon="kontakt-ds" _iconmap="icons" ~}}
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:fill-link-dark " _icon="copy-ds" _iconmap="icons" ~}}
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-3 h-max mr-5 [@media(min-width:1170px)]:-mr-14"
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.5",
9
+ "version": "1.63.7",
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>