hr-design-system-handlebars 1.114.115 → 1.114.117

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 CHANGED
@@ -1,3 +1,28 @@
1
+ # v1.114.117 (Thu Mar 06 2025)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Converting no-js hint blocks back to noscript [#1258](https://github.com/mumprod/hr-design-system-handlebars/pull/1258) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
6
+
7
+ #### Authors: 1
8
+
9
+ - [@Paul-Atreidis](https://github.com/Paul-Atreidis)
10
+
11
+ ---
12
+
13
+ # v1.114.116 (Tue Mar 04 2025)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - Add social sharing ticker item component [#1257](https://github.com/mumprod/hr-design-system-handlebars/pull/1257) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
18
+
19
+ #### Authors: 2
20
+
21
+ - [@eduardo-hr](https://github.com/eduardo-hr)
22
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
23
+
24
+ ---
25
+
1
26
  # v1.114.115 (Tue Mar 04 2025)
2
27
 
3
28
  #### 🐛 Bug Fix
@@ -3860,7 +3860,7 @@ article #commentList {
3860
3860
  border-bottom-color: var(--color-secondary-ds);
3861
3861
  }
3862
3862
  .counter-reset {
3863
- counter-reset: cnt1741083625936;
3863
+ counter-reset: cnt1741255979082;
3864
3864
  }
3865
3865
  .animate-delay-100 {
3866
3866
  --tw-animate-delay: 100ms;
@@ -4305,7 +4305,7 @@ html { scroll-behavior: smooth; }
4305
4305
  --tw-ring-color: rgba(255, 255, 255, 0.5);
4306
4306
  }
4307
4307
  .-ordered {
4308
- counter-increment: cnt1741083625936 1;
4308
+ counter-increment: cnt1741255979082 1;
4309
4309
  }
4310
4310
  .-ordered::before {
4311
4311
  position: absolute;
@@ -4323,7 +4323,7 @@ html { scroll-behavior: smooth; }
4323
4323
  --tw-text-opacity: 1;
4324
4324
  color: rgba(0, 0, 0, 1);
4325
4325
  color: rgba(0, 0, 0, var(--tw-text-opacity));
4326
- content: counter(cnt1741083625936);
4326
+ content: counter(cnt1741255979082);
4327
4327
  }
4328
4328
  /*! ****************************/
4329
4329
  /*! DataPolicy stuff */
@@ -2,7 +2,7 @@
2
2
  <h3 class="text-2xl font-headingSerif">
3
3
  {{loca "ext_service_datapolicy_headline" this.externalServiceConfig.externalServiceName}}
4
4
  </h3>
5
- <div id="externalService_form">
5
+
6
6
  <p class="pt-4 text-base font-copy">
7
7
  {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
8
8
  </p>
@@ -24,8 +24,8 @@
24
24
  {{#*inline "htmlProperties"}}{{/inline}}
25
25
  </div>
26
26
  </div>
27
- </div>
28
- <div id="externalService_form_hint">
27
+
28
+ <noscript>
29
29
  <div class="p-4 mt-6 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
30
30
  <p class="font-bold">Hinweis</p>
31
31
  <p class="pt-4 text-base font-copy">
@@ -40,5 +40,5 @@
40
40
  {{#*inline "htmlProperties"~}}
41
41
  {{~/inline}}
42
42
  </div>
43
- </div>
43
+ </noscript>
44
44
  </div>
@@ -30,19 +30,19 @@
30
30
  >
31
31
  {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }}
32
32
  {{#if this.hasSpamProtection }}
33
- <div id="webform_form_spam_hint">
33
+ <noscript>
34
34
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
35
35
  <p class="font-bold">Hinweis</p>
36
36
  <p>Bitte aktivieren Sie JavaScript, um dieses Formular absenden zu können.</p>
37
37
  </div>
38
- </div>
38
+ </noscript>
39
39
  {{else}}
40
- <div id="webform_form_hint">
40
+ <noscript>
41
41
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
42
42
  <p class="font-bold">Hinweis</p>
43
43
  <p>Javascript ist deaktiviert. Das Formular kann aber weiterhin normal benutzt werden.</p>
44
44
  </div>
45
- </div>
45
+ </noscript>
46
46
  {{/if}}
47
47
 
48
48
  {{> components/forms/components/controls }}
@@ -1,7 +1,6 @@
1
1
  <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
2
2
  {{this.title}}
3
3
  </h3>
4
- <div id="newsletter_form">
5
4
  <div id="formWrapper">
6
5
  <form class="relative flex flex-col justify-center overflow-hidden group"
7
6
  id="form{{nextRandom}}"
@@ -53,11 +52,10 @@
53
52
  </div>
54
53
  </form>
55
54
  </div>
56
- </div>
57
- <div id="newsletter_form_hint">
55
+ <noscript>
58
56
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
59
57
  <p class="font-bold">Hinweis</p>
60
58
  <p>Bitte aktivieren Sie JavaScript, um den Newsletter zu abonnieren.</p>
61
59
  <p>Alternativ können Sie die verfügbaren Newsletter-Abonnements des HR <a href="https://hessenschau-nl.sr.de/newsletter-login.php" class="" target="_blank"><strong>hier</strong></a> abschließen / verwalten / beenden. </p>
62
60
  </div>
63
- </div>
61
+ </noscript>
@@ -0,0 +1,36 @@
1
+ {{~#with this.socialSharing ~}}
2
+ <div
3
+ x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
4
+ class="flex self-center justify-end ml-3 print:hidden grow"
5
+ x-on:resize.window="$store.sharingIsOpen.ticker = false"
6
+ x-on:keydown.escape.prevent.stop="close()"
7
+ @click.outside="close()"
8
+ x-on:resize.window="$store.sharingIsOpen.tickerItem{{getRandom}} = false"
9
+ ax-load
10
+ x-ignore
11
+ >
12
+ <div class="relative right-0 flex gap-3 bg-white md:h-auto" >
13
+ <button
14
+ 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 lg:hidden"
15
+ x-ref="button"
16
+ x-on:click="toggle()"
17
+ :aria-expanded="open"
18
+ :aria-controls="$id('dropdown-button')"
19
+ aria-label="{{loca "share_linktitle" }}"
20
+
21
+ >
22
+ {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
23
+ </button>
24
+ <div
25
+ x-ref="panel"
26
+ :class="{ 'hidden': !$store.sharingIsOpen.tickerItem{{getRandom}},'flex': $store.sharingIsOpen.tickerItem{{getRandom}} }"
27
+ :id="$id('dropdown-button')"
28
+ class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
29
+ >
30
+ <ul class="flex gap-3">
31
+ {{> components/social_sharing/social_sharing_icons _socialSharingType="tickerItem" _trackingData=../this.trackingData}}
32
+ </ul>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ {{/with}}
@@ -30,7 +30,7 @@
30
30
  >
31
31
  {{> components/voting/components/voting_header _isTeaser=../../_isTeaser _title=../this.title _topline=../this.topline}}
32
32
 
33
- <div id="voting_form">
33
+
34
34
  <div class="js-voting-form__bottomWrapper">
35
35
  {{#if this.shorttext}}
36
36
  <p class="mt-3 text-base font-copy sm:text-lg dark:text-text-dark">{{this.shorttext}}</p>
@@ -61,7 +61,7 @@
61
61
  {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="js-voting-submit-button"}}
62
62
  </div>
63
63
  </div>
64
- </div>
64
+
65
65
  <script type="text/html" class="js-successMessage">
66
66
  {{#if this.is2FSecured}}
67
67
  {{> components/voting/voting_result
@@ -112,12 +112,12 @@
112
112
  {{> components/voting/voting_result _hideVotingResult=this.hideVotingResult}}
113
113
  {{/unless}}
114
114
  {{/with}}
115
- <div id="voting_form_hint">
115
+ <noscript>
116
116
  <div class="p-4 mt-6 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
117
117
  <p class="font-bold">Hinweis</p>
118
118
  <p>Bitte aktivieren Sie JavaScript, um bei einem Voting abstimmen zu können.</p>
119
119
  </div>
120
- </div>
120
+ </noscript>
121
121
  {{/components/forms/components/backgroundBox }}
122
122
 
123
123
  {{!--Featured Content--}}
@@ -2,7 +2,7 @@
2
2
  <h3 class="text-2xl font-headingSerif">
3
3
  {{loca "ext_service_datapolicy_headline" this.externalServiceConfig.externalServiceName}}
4
4
  </h3>
5
- <div id="externalService_form">
5
+
6
6
  <p class="pt-4 text-base font-copy">
7
7
  {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
8
8
  </p>
@@ -24,8 +24,8 @@
24
24
  {{#*inline "htmlProperties"}}{{/inline}}
25
25
  </div>
26
26
  </div>
27
- </div>
28
- <div id="externalService_form_hint">
27
+
28
+ <noscript>
29
29
  <div class="p-4 mt-6 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
30
30
  <p class="font-bold">Hinweis</p>
31
31
  <p class="pt-4 text-base font-copy">
@@ -40,5 +40,5 @@
40
40
  {{#*inline "htmlProperties"~}}
41
41
  {{~/inline}}
42
42
  </div>
43
- </div>
43
+ </noscript>
44
44
  </div>
@@ -30,19 +30,19 @@
30
30
  >
31
31
  {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }}
32
32
  {{#if this.hasSpamProtection }}
33
- <div id="webform_form_spam_hint">
33
+ <noscript>
34
34
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
35
35
  <p class="font-bold">Hinweis</p>
36
36
  <p>Bitte aktivieren Sie JavaScript, um dieses Formular absenden zu können.</p>
37
37
  </div>
38
- </div>
38
+ </noscript>
39
39
  {{else}}
40
- <div id="webform_form_hint">
40
+ <noscript>
41
41
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
42
42
  <p class="font-bold">Hinweis</p>
43
43
  <p>Javascript ist deaktiviert. Das Formular kann aber weiterhin normal benutzt werden.</p>
44
44
  </div>
45
- </div>
45
+ </noscript>
46
46
  {{/if}}
47
47
 
48
48
  {{> components/forms/components/controls }}
@@ -1,7 +1,6 @@
1
1
  <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
2
2
  {{this.title}}
3
3
  </h3>
4
- <div id="newsletter_form">
5
4
  <div id="formWrapper">
6
5
  <form class="relative flex flex-col justify-center overflow-hidden group"
7
6
  id="form{{nextRandom}}"
@@ -53,11 +52,10 @@
53
52
  </div>
54
53
  </form>
55
54
  </div>
56
- </div>
57
- <div id="newsletter_form_hint">
55
+ <noscript>
58
56
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
59
57
  <p class="font-bold">Hinweis</p>
60
58
  <p>Bitte aktivieren Sie JavaScript, um den Newsletter zu abonnieren.</p>
61
59
  <p>Alternativ können Sie die verfügbaren Newsletter-Abonnements des HR <a href="https://hessenschau-nl.sr.de/newsletter-login.php" class="" target="_blank"><strong>hier</strong></a> abschließen / verwalten / beenden. </p>
62
60
  </div>
63
- </div>
61
+ </noscript>
@@ -0,0 +1,36 @@
1
+ {{~#with this.socialSharing ~}}
2
+ <div
3
+ x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
4
+ class="flex self-center justify-end ml-3 print:hidden grow"
5
+ x-on:resize.window="$store.sharingIsOpen.ticker = false"
6
+ x-on:keydown.escape.prevent.stop="close()"
7
+ @click.outside="close()"
8
+ x-on:resize.window="$store.sharingIsOpen.tickerItem{{getRandom}} = false"
9
+ ax-load
10
+ x-ignore
11
+ >
12
+ <div class="relative right-0 flex gap-3 bg-white md:h-auto" >
13
+ <button
14
+ 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 lg:hidden"
15
+ x-ref="button"
16
+ x-on:click="toggle()"
17
+ :aria-expanded="open"
18
+ :aria-controls="$id('dropdown-button')"
19
+ aria-label="{{loca "share_linktitle" }}"
20
+
21
+ >
22
+ {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
23
+ </button>
24
+ <div
25
+ x-ref="panel"
26
+ :class="{ 'hidden': !$store.sharingIsOpen.tickerItem{{getRandom}},'flex': $store.sharingIsOpen.tickerItem{{getRandom}} }"
27
+ :id="$id('dropdown-button')"
28
+ class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
29
+ >
30
+ <ul class="flex gap-3">
31
+ {{> components/social_sharing/social_sharing_icons _socialSharingType="tickerItem" _trackingData=../this.trackingData}}
32
+ </ul>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ {{/with}}
@@ -30,7 +30,7 @@
30
30
  >
31
31
  {{> components/voting/components/voting_header _isTeaser=../../_isTeaser _title=../this.title _topline=../this.topline}}
32
32
 
33
- <div id="voting_form">
33
+
34
34
  <div class="js-voting-form__bottomWrapper">
35
35
  {{#if this.shorttext}}
36
36
  <p class="mt-3 text-base font-copy sm:text-lg dark:text-text-dark">{{this.shorttext}}</p>
@@ -61,7 +61,7 @@
61
61
  {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="js-voting-submit-button"}}
62
62
  </div>
63
63
  </div>
64
- </div>
64
+
65
65
  <script type="text/html" class="js-successMessage">
66
66
  {{#if this.is2FSecured}}
67
67
  {{> components/voting/voting_result
@@ -112,12 +112,12 @@
112
112
  {{> components/voting/voting_result _hideVotingResult=this.hideVotingResult}}
113
113
  {{/unless}}
114
114
  {{/with}}
115
- <div id="voting_form_hint">
115
+ <noscript>
116
116
  <div class="p-4 mt-6 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
117
117
  <p class="font-bold">Hinweis</p>
118
118
  <p>Bitte aktivieren Sie JavaScript, um bei einem Voting abstimmen zu können.</p>
119
119
  </div>
120
- </div>
120
+ </noscript>
121
121
  {{/components/forms/components/backgroundBox }}
122
122
 
123
123
  {{!--Featured Content--}}
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.114.115",
9
+ "version": "1.114.117",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
@@ -2,7 +2,7 @@
2
2
  <h3 class="text-2xl font-headingSerif">
3
3
  {{loca "ext_service_datapolicy_headline" this.externalServiceConfig.externalServiceName}}
4
4
  </h3>
5
- <div id="externalService_form">
5
+
6
6
  <p class="pt-4 text-base font-copy">
7
7
  {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
8
8
  </p>
@@ -24,8 +24,8 @@
24
24
  {{#*inline "htmlProperties"}}{{/inline}}
25
25
  </div>
26
26
  </div>
27
- </div>
28
- <div id="externalService_form_hint">
27
+
28
+ <noscript>
29
29
  <div class="p-4 mt-6 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
30
30
  <p class="font-bold">Hinweis</p>
31
31
  <p class="pt-4 text-base font-copy">
@@ -40,5 +40,5 @@
40
40
  {{#*inline "htmlProperties"~}}
41
41
  {{~/inline}}
42
42
  </div>
43
- </div>
43
+ </noscript>
44
44
  </div>
@@ -30,19 +30,19 @@
30
30
  >
31
31
  {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }}
32
32
  {{#if this.hasSpamProtection }}
33
- <div id="webform_form_spam_hint">
33
+ <noscript>
34
34
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
35
35
  <p class="font-bold">Hinweis</p>
36
36
  <p>Bitte aktivieren Sie JavaScript, um dieses Formular absenden zu können.</p>
37
37
  </div>
38
- </div>
38
+ </noscript>
39
39
  {{else}}
40
- <div id="webform_form_hint">
40
+ <noscript>
41
41
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
42
42
  <p class="font-bold">Hinweis</p>
43
43
  <p>Javascript ist deaktiviert. Das Formular kann aber weiterhin normal benutzt werden.</p>
44
44
  </div>
45
- </div>
45
+ </noscript>
46
46
  {{/if}}
47
47
 
48
48
  {{> components/forms/components/controls }}
@@ -1,7 +1,6 @@
1
1
  <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
2
2
  {{this.title}}
3
3
  </h3>
4
- <div id="newsletter_form">
5
4
  <div id="formWrapper">
6
5
  <form class="relative flex flex-col justify-center overflow-hidden group"
7
6
  id="form{{nextRandom}}"
@@ -53,11 +52,10 @@
53
52
  </div>
54
53
  </form>
55
54
  </div>
56
- </div>
57
- <div id="newsletter_form_hint">
55
+ <noscript>
58
56
  <div class="p-4 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
59
57
  <p class="font-bold">Hinweis</p>
60
58
  <p>Bitte aktivieren Sie JavaScript, um den Newsletter zu abonnieren.</p>
61
59
  <p>Alternativ können Sie die verfügbaren Newsletter-Abonnements des HR <a href="https://hessenschau-nl.sr.de/newsletter-login.php" class="" target="_blank"><strong>hier</strong></a> abschließen / verwalten / beenden. </p>
62
60
  </div>
63
- </div>
61
+ </noscript>
@@ -0,0 +1,36 @@
1
+ {{~#with this.socialSharing ~}}
2
+ <div
3
+ x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
4
+ class="flex self-center justify-end ml-3 print:hidden grow"
5
+ x-on:resize.window="$store.sharingIsOpen.ticker = false"
6
+ x-on:keydown.escape.prevent.stop="close()"
7
+ @click.outside="close()"
8
+ x-on:resize.window="$store.sharingIsOpen.tickerItem{{getRandom}} = false"
9
+ ax-load
10
+ x-ignore
11
+ >
12
+ <div class="relative right-0 flex gap-3 bg-white md:h-auto" >
13
+ <button
14
+ 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 lg:hidden"
15
+ x-ref="button"
16
+ x-on:click="toggle()"
17
+ :aria-expanded="open"
18
+ :aria-controls="$id('dropdown-button')"
19
+ aria-label="{{loca "share_linktitle" }}"
20
+
21
+ >
22
+ {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
23
+ </button>
24
+ <div
25
+ x-ref="panel"
26
+ :class="{ 'hidden': !$store.sharingIsOpen.tickerItem{{getRandom}},'flex': $store.sharingIsOpen.tickerItem{{getRandom}} }"
27
+ :id="$id('dropdown-button')"
28
+ class="self-center bg-white h-8 absolute right-[50px] md:relative md:right-0 md:h-auto hidden lg:flex"
29
+ >
30
+ <ul class="flex gap-3">
31
+ {{> components/social_sharing/social_sharing_icons _socialSharingType="tickerItem" _trackingData=../this.trackingData}}
32
+ </ul>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ {{/with}}
@@ -30,7 +30,7 @@
30
30
  >
31
31
  {{> components/voting/components/voting_header _isTeaser=../../_isTeaser _title=../this.title _topline=../this.topline}}
32
32
 
33
- <div id="voting_form">
33
+
34
34
  <div class="js-voting-form__bottomWrapper">
35
35
  {{#if this.shorttext}}
36
36
  <p class="mt-3 text-base font-copy sm:text-lg dark:text-text-dark">{{this.shorttext}}</p>
@@ -61,7 +61,7 @@
61
61
  {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="js-voting-submit-button"}}
62
62
  </div>
63
63
  </div>
64
- </div>
64
+
65
65
  <script type="text/html" class="js-successMessage">
66
66
  {{#if this.is2FSecured}}
67
67
  {{> components/voting/voting_result
@@ -112,12 +112,12 @@
112
112
  {{> components/voting/voting_result _hideVotingResult=this.hideVotingResult}}
113
113
  {{/unless}}
114
114
  {{/with}}
115
- <div id="voting_form_hint">
115
+ <noscript>
116
116
  <div class="p-4 mt-6 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
117
117
  <p class="font-bold">Hinweis</p>
118
118
  <p>Bitte aktivieren Sie JavaScript, um bei einem Voting abstimmen zu können.</p>
119
119
  </div>
120
- </div>
120
+ </noscript>
121
121
  {{/components/forms/components/backgroundBox }}
122
122
 
123
123
  {{!--Featured Content--}}