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.
Files changed (30) hide show
  1. package/CHANGELOG.md +12 -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 +18 -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
@@ -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: cnt1712669617924;
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: cnt1712669617924 1;
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(cnt1712669617924);
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\:bottom-auto {
7339
- bottom: auto;
7319
+ .socialShareDesktop\:-left-2 {
7320
+ left: -0.5rem;
7340
7321
  }
7341
7322
 
7342
- .socialShareDesktop\:left-1 {
7343
- left: 0.25rem;
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-5 {
7351
- top: 1.25rem;
7331
+ .socialShareDesktop\:top-32 {
7332
+ top: 8rem;
7352
7333
  }
7353
7334
  }
7354
7335
  .\[\&\: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' : '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' : '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.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>