hr-design-system-handlebars 1.114.87 → 1.114.89

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.114.89 (Thu Feb 13 2025)
+
+#### 🐛 Bug Fix
+
+- add voting-documentation [#1238](https://github.com/mumprod/hr-design-system-handlebars/pull/1238) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v1.114.88 (Thu Feb 13 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3535 js protection [#1237](https://github.com/mumprod/hr-design-system-handlebars/pull/1237) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.114.87 (Tue Feb 11 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -181,8 +181,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",

package/dist/assets/index.css

@@ -3828,7 +3828,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1739298110516;
+  counter-reset: cnt1739469830196;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4273,7 +4273,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1739298110516 1;
+  counter-increment: cnt1739469830196 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4291,7 +4291,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1739298110516);
+  content: counter(cnt1739469830196);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/forms/js/contactForm.alpine.js

@@ -10,6 +10,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         ajaxTimeout: 60 * 1000,
         form: this.$refs[formId],
         formWrapper: this.$refs[formId].closest("#formWrapper"),
+        honeypot: this.$refs[formId].querySelector('input[data-name="x-message"]'),
         actionUrl: this.form && this.form.getAttribute('action'),
         checkForJsonURL () {
             if (jsonUrl) {
@@ -31,10 +32,16 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         },
         submitButtonHandler(event) {
             this.$store.forms.submissionAttempted[formId] = true;
+            if (this.honeypot) {
+                this.honeypot.removeAttribute('required');
+            }
             if(this.form.reportValidity()){               
                 this.handleSubmit(event,this.form)
             } else {
-                this.scrollToElementAndCenterWithTimeout(document.activeElement, 50)                
+                this.scrollToElementAndCenterWithTimeout(document.activeElement, 50)    
+                if (this.honeypot) {
+                    this.honeypot.setAttribute('required', '');
+                }            
             }
         },
         retryHandler() {

package/dist/views/components/forms/components/fields.hbs

@@ -44,6 +44,7 @@
                     _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                     _formId=../_formId
+                    _isHoneypot=this.hasSpamProtection
                 }}
             {{else if this.type.isSelect}}
                 {{~> components/forms/components/select

package/dist/views/components/forms/components/input.hbs

@@ -14,6 +14,8 @@
       x-on:keyup ="validateField();"
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _isHoneypot}}data-name="x-message" required="" {{/if}}
+      
       {{#if _locaKey}}
          title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
          placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
@@ -35,7 +37,7 @@
       {{#if _maxLength}}
          maxlength="{{_maxLength}}"
       {{/if~}}
-      {{#if _required}} required{{/if}}
+      {{#if _required}} required=""{{/if}}
       {{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
       {{#if _autocompleteOff}} autocomplete="off"{{/if}}
       {{#if _autoSuggestFeature}}

package/dist/views/components/page/podcast/podcast_episode_article.hbs

@@ -7,7 +7,7 @@
             {{#if (isStorybook)}} 
                 {{> components/podcast/components/podcast_player_shorttext _isSinglePage=true}}
             {{else}}
-                {{> modules/story/copytext _isWebview=_webview~}}
+                {{~> components/content/copytext/copytext _isWebview=_webview ~}}
             {{/if}}
             {{> components/content/content_footer/content_footer
                     _author=this.audioAuthor

package/dist/views_static/components/forms/components/fields.hbs

@@ -44,6 +44,7 @@
                     _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                     _formId=../_formId
+                    _isHoneypot=this.hasSpamProtection
                 }}
             {{else if this.type.isSelect}}
                 {{~> components/forms/components/select

package/dist/views_static/components/forms/components/input.hbs

@@ -14,6 +14,8 @@
       x-on:keyup ="validateField();"
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _isHoneypot}}data-name="x-message" required="" {{/if}}
+      
       {{#if _locaKey}}
          title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
          placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
@@ -35,7 +37,7 @@
       {{#if _maxLength}}
          maxlength="{{_maxLength}}"
       {{/if~}}
-      {{#if _required}} required{{/if}}
+      {{#if _required}} required=""{{/if}}
       {{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
       {{#if _autocompleteOff}} autocomplete="off"{{/if}}
       {{#if _autoSuggestFeature}}

package/dist/views_static/components/page/podcast/podcast_episode_article.hbs

@@ -7,7 +7,7 @@
             {{#if (isStorybook)}} 
                 {{> components/podcast/components/podcast_player_shorttext _isSinglePage=true}}
             {{else}}
-                {{> modules/story/copytext _isWebview=_webview~}}
+                {{~> components/content/copytext/copytext _isWebview=_webview ~}}
             {{/if}}
             {{> components/content/content_footer/content_footer
                     _author=this.audioAuthor

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.114.87",
+  "version": "1.114.89",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -181,8 +181,8 @@
 	"ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
 	"ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
 	"ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
-	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
+	"ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
+	"ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
 	"ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
 	"story_infobox_intro_sr": "Weitere Informationen",
 	"story_infobox_outro_sr": "Ende der weiteren Informationen",

package/src/assets/fixtures/content/copytext/copytext_webform_simple.json

@@ -26,6 +26,10 @@
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
                         "@->contentpath": "input-text-vorname"
+                    },
+                    {
+                      "@->jsoninclude": "forms/form_fields.inc.json",
+                      "@->contentpath": "input-honeypot-required"
                     }
                 ]
                 

package/src/assets/fixtures/forms/form_fields.inc.json

@@ -24,6 +24,20 @@
         "isRequired": true,
         "maxLength": "140"
     },
+    "input-honeypot-required": {
+        "type": {
+            "isText": true,
+            "asString": "text"
+        },
+        "name": "message",
+        "label": "message",
+        "description": "message",
+        "defaultValue": "",
+        "isHidden": true,
+        "hasSpamProtection":true,
+        "isRequired": false,
+        "maxLength": "140"
+    },
     "input-text-nachname-required": {
         "type": {
             "isText": true,

package/src/stories/views/components/content/copytext/fixtures/copytext_webform_simple.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","successText":{"richtext":"Liebe Nutzerin, lieber Nutzer,<br><br>ich werde mich so schnell wie möglich um Ihr Anliegen kümmern. Hier geht's zur <a class='' href='https://www.hessenschau.de/index.html'>hessenschau.de-Startseite</a> mit aktuellen Nachrichten aus Hessen.<br><br>Viele Grüße, <br><br>Karsten Hufer"},"jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"{&quot;form_error_required&quot;:&quot;Server: Pflichtfeld&quot;,&quot;form_error_max&quot;:&quot;Server: Zu viele Zeichen&quot;,&quot;form_error_validurl&quot;:&quot;Server: Ungültige URL&quot;,&quot;form_error_empty&quot;:&quot;Server: Darf nicht ausgefüllt werden&quot;,&quot;form_error_constants_or_null&quot;:&quot;Server: Ungültiger Wert&quot;,&quot;form_error_constants&quot;:&quot;Server: Ungültiger Wert&quot;,&quot;form_error_max_multivalue&quot;:&quot;Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten&quot;,&quot;vote_error_identity_already_used&quot;:&quot;Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.&quot;,&quot;vote_error_token_request_count_exceeded&quot;:&quot;Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.&quot;,&quot;form_error_email&quot;:&quot;Server: Ungültige E-Mail-Adresse&quot;}","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","successText":{"richtext":"Liebe Nutzerin, lieber Nutzer,<br><br>ich werde mich so schnell wie möglich um Ihr Anliegen kümmern. Hier geht's zur <a class='' href='https://www.hessenschau.de/index.html'>hessenschau.de-Startseite</a> mit aktuellen Nachrichten aus Hessen.<br><br>Viele Grüße, <br><br>Karsten Hufer"},"jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"{&quot;form_error_required&quot;:&quot;Server: Pflichtfeld&quot;,&quot;form_error_max&quot;:&quot;Server: Zu viele Zeichen&quot;,&quot;form_error_validurl&quot;:&quot;Server: Ungültige URL&quot;,&quot;form_error_empty&quot;:&quot;Server: Darf nicht ausgefüllt werden&quot;,&quot;form_error_constants_or_null&quot;:&quot;Server: Ungültiger Wert&quot;,&quot;form_error_constants&quot;:&quot;Server: Ungültiger Wert&quot;,&quot;form_error_max_multivalue&quot;:&quot;Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten&quot;,&quot;vote_error_identity_already_used&quot;:&quot;Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.&quot;,&quot;vote_error_token_request_count_exceeded&quot;:&quot;Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.&quot;,&quot;form_error_email&quot;:&quot;Server: Ungültige E-Mail-Adresse&quot;}","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"message","label":"message","description":"message","defaultValue":"","isHidden":true,"hasSpamProtection":true,"isRequired":false,"maxLength":"140"}]}}]}

package/src/stories/views/components/forms/components/fields.hbs

@@ -44,6 +44,7 @@
                     _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                     _formId=../_formId
+                    _isHoneypot=this.hasSpamProtection
                 }}
             {{else if this.type.isSelect}}
                 {{~> components/forms/components/select

package/src/stories/views/components/forms/components/input.hbs

@@ -14,6 +14,8 @@
       x-on:keyup ="validateField();"
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _isHoneypot}}data-name="x-message" required="" {{/if}}
+      
       {{#if _locaKey}}
          title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
          placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
@@ -35,7 +37,7 @@
       {{#if _maxLength}}
          maxlength="{{_maxLength}}"
       {{/if~}}
-      {{#if _required}} required{{/if}}
+      {{#if _required}} required=""{{/if}}
       {{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
       {{#if _autocompleteOff}} autocomplete="off"{{/if}}
       {{#if _autoSuggestFeature}}

package/src/stories/views/components/forms/js/contactForm.alpine.js

@@ -10,6 +10,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         ajaxTimeout: 60 * 1000,
         form: this.$refs[formId],
         formWrapper: this.$refs[formId].closest("#formWrapper"),
+        honeypot: this.$refs[formId].querySelector('input[data-name="x-message"]'),
         actionUrl: this.form && this.form.getAttribute('action'),
         checkForJsonURL () {
             if (jsonUrl) {
@@ -31,10 +32,16 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         },
         submitButtonHandler(event) {
             this.$store.forms.submissionAttempted[formId] = true;
+            if (this.honeypot) {
+                this.honeypot.removeAttribute('required');
+            }
             if(this.form.reportValidity()){               
                 this.handleSubmit(event,this.form)
             } else {
-                this.scrollToElementAndCenterWithTimeout(document.activeElement, 50)                
+                this.scrollToElementAndCenterWithTimeout(document.activeElement, 50)    
+                if (this.honeypot) {
+                    this.honeypot.setAttribute('required', '');
+                }            
             }
         },
         retryHandler() {

package/src/stories/views/components/page/podcast/podcast_episode_article.hbs

@@ -7,7 +7,7 @@
             {{#if (isStorybook)}} 
                 {{> components/podcast/components/podcast_player_shorttext _isSinglePage=true}}
             {{else}}
-                {{> modules/story/copytext _isWebview=_webview~}}
+                {{~> components/content/copytext/copytext _isWebview=_webview ~}}
             {{/if}}
             {{> components/content/content_footer/content_footer
                     _author=this.audioAuthor

package/src/stories/views/components/voting/voting.mdx

@@ -0,0 +1,71 @@
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
+import * as votingStories from './voting.stories'
+
+<Meta of={votingStories} />
+
+# Voting
+
+## Beschreibung
+
+Das Voting besteht aus den Hauptkomponenten <b>voting.hbs</b>, <b>voting_media_player.hbs</b> und <b>voting_result.hbs</b>.<br/><br/>
+Diese verwenden die folgenden Unter-Komponenten:<br/>
+voting_backbutton.hbs, voting_header.hbs, voting_hint.hbs und voting_submit.hbs.<br/><br/>
+Die Funktionalität wird über diese javascript-Dateien bereitgestellt:<br/>
+votingCookieCheckerDs.feature.js, votingDs.feature.js, votingResultCookieDs.feature.js und votingValidatorDs.feature.js.<br/><br/>
+Alle genannten Dateien werden nachfolgend beschrieben.
+
+### voting.hbs
+Dies ist die Hauptkomponente. Sie kann in anderen Komponenten inkludiert werden (siehe Verwendung).
+Sie enthält im umschließenden div-Element die data-Attribute für das javascript (data-hr-voting-ds, data-hr-voting-validator-ds, data-hr-voting-cookie-checker-ds)
+und übergibt diesen jeweils Daten-Objekte.<br/>
+Die nächste Ebene ist ein div-Element mit der css-Klasse "js-voting-wrapper", anhand derer diesem div Inhalte per javascript zugefügt werden.<br/>
+Nachfolgend das form-Element, welches die Daten an den ugc-Server sendet. Die voting-Felder werden per Einbindung der Komponente fields.hbs erzeugt. Um diese den grafischen Vorlagen entsprechend darzustellen, werden diverse css-Parameter benötigt.<br/>
+Ferner enthält voting.hbs drei script-Elemente mit den jeweiligen css-Klassen js-successMessage, js-errorMessage und js-result. Mit Hilfe dieser Klassennamen wird hier jeweils die Komponente voting_result.hbs in verschiedenen Ausprägungen eingebunden.<br/>
+Am Ende von voting.hbs wird die Komponente teaser_featured_content.hbs inkludiert, welche die "Mehr zum Thema"-Links enthält.
+
+### voting_media_player.hbs
+Mit dieser Komponente werden Audios und Videos in den voting-Optionen dargestellt.
+
+### voting_result.hbs
+Diese Komponente wird per javascript in voting.hbs inkludiert und stellt - abhängig von den ihr übergebenen Parametern - das voting-Ergebnis in einem per css keyframes animierten barchart, ein Danke-Text oder eine Fehlermeldung dar.
+
+### voting_backbutton.hbs
+Enthält den "Zurück zur Abstimmung"-Button. Dieser wird nur im Fehlerfall, also in der Fehler-Message dargestellt.
+
+### voting_header.hbs
+Diese Komponente stellt Label (Voting) und Titel dar.
+
+### voting_hint.hbs
+Wird für die Anzeige diverser Hinweistexte verwendet, zB. Anzahl der Stimmen, "Werte Stimmen" bei absoluten Werten.
+
+### voting_submit.hbs
+Beinhaltet den "Abstimmen"-Button + Icon + Hinweistext.
+
+### votingDs.feature.js
+Hier sind u.a. die Handler für das Versenden des Voting-Formulars, die Verarbeitung der response vom ugc-Server sowie das Laden der voting_result-Komponente in den verschiedenen Ausprägungen definiert.
+
+### votingCookieCheckerDs.feature.js
+Prüft, ob ein voting-cookie existiert und lädt ggf. eine Message ("Sie haben bereits abgestimmt").
+
+### votingResultCookieDs.feature.js
+Setzt das voting-cookie.
+
+### votingValidatorDs.feature.js
+Steuert das enablen/disablen des Submit-Buttons sowie die Anzeige der Anzahl der gewählten Optionen (n/x).
+
+## Verwendung
+
+Das Voting wird in handlebars wie folgt eingebaut:
+
+1. Im copytext
+```html
+{{> components/voting/voting}}
+```
+2. Als Teaser
+```html
+{{> components/voting/voting _isTeaser=true}}
+```
+
+<Canvas withToolbar>
+    <Story of={votingStories.Default} />
+</Canvas>