hr-design-system-handlebars 1.113.4 → 1.113.6

package/package.json

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

package/src/assets/brand/_default/conf/locatags.json

@@ -207,5 +207,8 @@
     "webform_upload_label": "Datei auswählen",
     "webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
-    "webform_send_form_back": "Zurück zum Formular"
+    "webform_send_form_back": "Zurück zum Formular",
+    "form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden"
 }

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

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

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

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

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

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

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

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

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

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

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

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -208,6 +208,9 @@
 	"webform_send_title_error": "Das hat leider nicht geklappt!",
 	"webform_send_title_success": "Vielen Dank! Die Nachricht wurde verschickt.",
 	"webform_send_form_back": "Zurück zum Formular",
+	"form_text_required": "* Pflichtfeld",
+	"form_button_reset": "Zurücksetzen",
+	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/src/assets/css/custom-utilities.css

@@ -494,4 +494,20 @@
     .form-radio:checked::after {
         transform: translate(-50%, -50%) scale(1);
     }
+
+    /* keyframes for barchart-animation */
+    @keyframes progressAnimationDS {
+        0% {
+            width: 0;
+        }
+    }
+
+    @keyframes percentageAnimationDS {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 100;
+        }
+    }
 }

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

@@ -1,3 +1,3 @@
 {
-    "error-messages": ""form_error_required":"Server: Pflichtfeld","form_error_max":"Server: Zu viele Zeichen","form_error_validurl":"Server: Ungültige URL","form_error_empty":"Server: Darf nicht ausgefüllt werden","form_error_constants_or_null":"Server: Ungültiger Wert","form_error_constants":"Server: Ungültiger Wert","form_error_max_multivalue":"Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten","vote_error_identity_already_used":"Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.","vote_error_token_request_count_exceeded":"Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.","form_error_email":"Server: Ungültige E-Mail-Adresse""
+    "error-messages": "{"form_error_required":"Server: Pflichtfeld","form_error_max":"Server: Zu viele Zeichen","form_error_validurl":"Server: Ungültige URL","form_error_empty":"Server: Darf nicht ausgefüllt werden","form_error_constants_or_null":"Server: Ungültiger Wert","form_error_constants":"Server: Ungültiger Wert","form_error_max_multivalue":"Server: Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten","vote_error_identity_already_used":"Server: Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.","vote_error_token_request_count_exceeded":"Server: Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.","form_error_email":"Server: Ungültige E-Mail-Adresse"}"
 }

package/src/assets/fixtures/voting/voting.inc.json

@@ -4,7 +4,7 @@
         "realTeasersize": 100,
         "topline": "Voting-Topline",
         "toplineSize": "h3",
-        "title": "Voting-Titel beziehungsweise Voting-Frage",
+        "title": "Wie finden Sie hessenschau.de?",
         "backlink": "backlink-url",
         "uuid": "UUID",
         "headingSize": "h2",
@@ -14,34 +14,41 @@
         "isMultipleChoice": false,
         "maxAnswerCount": 1,
         "votingSuccessText": {
-            "richtext": "Success-Text"
+            "richtext": "Danke für Ihre Abstimmung!"
         },
         "isSimpleSecured": true,
         "cookieLifetime": "12",
         "sophoraId": "Sophora-Id",
         "hasBarchart": true,
-        "showAbsoluteResult": true,
+        "showAbsoluteResult": false,
         "showVoteResult": true,
         "summarizedResult": "666",
         "votingResult": [
             {
-                "label": "Label-Result-Option-1",
-                "count": "222",
-                "percentageCount": "33,33",
-                "roundedPercentageCount": "33,0"
+                "label": "Gut, beste website ever",
+                "count": "27",
+                "percentageCount": "4,1",
+                "roundedPercentageCount": "4.0"
             },
             {
-                "label": "Label-Result-Option-2",
-                "count": "222",
-                "percentageCount": "33,33",
-                "roundedPercentageCount": "33,0"
+                "label": "Super, allerbeste website ever",
+                "count": "117",
+                "percentageCount": "17,6",
+                "roundedPercentageCount": "18.0"
             },
             {
-                "label": "Label-Result-Option-3",
-                "count": "222",
-                "percentageCount": "33,33",
-                "roundedPercentageCount": "33,0"
-            }                        
+                "label": "Mega, allerallerbeste website ever",
+                "count": "242",
+                "percentageCount": "36,3",
+                "roundedPercentageCount": "36.0"
+            },
+            {
+                "label": "Hammer, allerallerbesteste website ever",
+                "count": "280",
+                "percentageCount": "42,0",
+                "roundedPercentageCount": "42.0",
+                "isWinner": true
+            }                                    
         ],
         "form": {
             "shorttext": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",

package/src/assets/fixtures/voting/voting_error.json

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "voting/voting.inc.json",
+    "@->contentpath": "multivote-1",
+    "@->overrides": [
+        {
+            "@->contentpath": "isSimpleSecured",
+            "@->value": false
+        }
+    ]    
+}

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

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","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"},"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 (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isUpload":true,"asString":"upload"},"name":"Datei Hochladen","label":"Wählen Sie eine Datei zum Hochladen","description":"Maximale Dateigröße: 35 MB.","isRequired":true},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","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"},"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 (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isUpload":true,"asString":"upload"},"name":"Datei Hochladen","label":"Wählen Sie eine Datei zum Hochladen","description":"Maximale Dateigröße: 35 MB.","isRequired":true},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":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}]}}]}

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

@@ -1,14 +1,14 @@
 <div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
-    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
     <div class="flex items-center justify-end w-full basis-full">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
             <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
             <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="submitButtonHandler($event)"/>
+            <input type="submit" class="pl-2 cursor-pointer" value="{{loca "form_button_submit"}}" @click.prevent="submitButtonHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
-            <span class="text-base ds-button-label ">Zurücksetzen</span>        
+            <span class="text-base ds-button-label ">{{loca "form_button_reset"}}</span>        
         {{/components/button/button}}
 
     </div>

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

@@ -2,14 +2,14 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/components/success_icon}}
-                <h3 class="font-bold text-success">{{~loca "webform_send_title_success"}}</h3>       
+                <h3 class="font-bold text-success pt-0.5">{{~loca "webform_send_title_success"}}</h3>       
             {{else}}
                 {{> components/forms/components/error_icon _class="!block"}}
-                <h3 class="font-bold text-error dark:text-error-dark">{{~loca "webform_send_title_error"}}</h3>  
+                <h3 class="font-bold text-error dark:text-error-dark pt-0.5">{{~loca "webform_send_title_error"}}</h3>  
             {{/if}}
         </div>      
 </div>
-<span class="font-copy">
+<span class="font-copy text-text dark:text-text-dark">
     {{#if _locaKeyText}}
         {{loca _locaKeyText}}
     {{else}}

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

@@ -19,7 +19,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         formInit(){
             this.checkForJsonURL()
             this.$store.forms.submissionAttempted[formId] = false; 
-            this.$store.forms.errorMessages = JSON.parse( "{" + errorMessages.replace(/"/g,'"') + "}")
+            this.$store.forms.errorMessages = JSON.parse(errorMessages.replace(/"/g,'"'))
         },
         submitButtonHandler(event) {
             if(this.form.reportValidity()){
@@ -30,7 +30,8 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
         },
         retryHandler() {
             this.wasPosted = false;
-            this.wasPostedWithError = false;  
+            this.wasPostedWithError = false;
+            this.formWrapper.scrollIntoView({ behavior: 'smooth' })
         },
         handleValidationErrors(errors) {
             console.log('Validation Errors:', errors);
@@ -95,11 +96,13 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
                                     console.log("OK");
                                     this.wasPosted = true;
                                     this.wasPostedWithSuccess = true;
+                                    this.formWrapper.scrollIntoView({ behavior: 'smooth' })
                                     break;
                                 default:
                                     console.log("default");
                                     this.wasPosted = true;
                                     this.wasPostedWithError = true;
+                                    this.formWrapper.scrollIntoView({ behavior: 'smooth' })
                                     break;
                             }
                         } else {

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

@@ -11,7 +11,7 @@
                 x-init="formInit()"
                 x-ignore
 
-                @submit.prevent="submitData"
+                @submit.prevent
                 id="form{{getRandom}}"     
                 class="relative flex flex-col justify-center overflow-hidden group" 
                 action="{{this.url}}" 

package/src/stories/views/components/voting/fixtures/voting.json

@@ -1 +1 @@
-{"teasersize":100,"realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"Voting-Titel beziehungsweise Voting-Frage","backlink":"backlink-url","uuid":"UUID","headingSize":"h2","isVoting":true,"isMultiVote":true,"hasRedirect":true,"isMultipleChoice":false,"maxAnswerCount":1,"votingSuccessText":{"richtext":"Success-Text"},"isSimpleSecured":true,"cookieLifetime":"12","sophoraId":"Sophora-Id","hasBarchart":true,"showAbsoluteResult":true,"showVoteResult":true,"summarizedResult":"666","votingResult":[{"label":"Label-Result-Option-1","count":"222","percentageCount":"33,33","roundedPercentageCount":"33,0"},{"label":"Label-Result-Option-2","count":"222","percentageCount":"33,33","roundedPercentageCount":"33,0"},{"label":"Label-Result-Option-3","count":"222","percentageCount":"33,33","roundedPercentageCount":"33,0"}],"form":{"shorttext":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.","isVotingOver":false,"is2FSecured":true,"jsonUrl":"json-url","errorMessages":"Error-Messages","isSimpleSecured":true,"url":"action-url","isHorizontalLayout":false,"hideVotingResult":true,"fields":[{"type":{"isGroup":false,"isChoice":true,"asString":"radio"},"name":"multivote-1","isGrouped":true,"isRequired":false,"options":[{"value":"1","label":"Answer 1","title":"Voting-Answer 1","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"2","label":"Answer 2","title":"Voting-Answer 2","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"3","label":"Answer 3","title":"Voting-Answer 3","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}}]}]}}
+{"teasersize":100,"realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"Wie finden Sie hessenschau.de?","backlink":"backlink-url","uuid":"UUID","headingSize":"h2","isVoting":true,"isMultiVote":true,"hasRedirect":true,"isMultipleChoice":false,"maxAnswerCount":1,"votingSuccessText":{"richtext":"Danke für Ihre Abstimmung!"},"isSimpleSecured":true,"cookieLifetime":"12","sophoraId":"Sophora-Id","hasBarchart":true,"showAbsoluteResult":false,"showVoteResult":true,"summarizedResult":"666","votingResult":[{"label":"Gut, beste website ever","count":"27","percentageCount":"4,1","roundedPercentageCount":"4.0"},{"label":"Super, allerbeste website ever","count":"117","percentageCount":"17,6","roundedPercentageCount":"18.0"},{"label":"Mega, allerallerbeste website ever","count":"242","percentageCount":"36,3","roundedPercentageCount":"36.0"},{"label":"Hammer, allerallerbesteste website ever","count":"280","percentageCount":"42,0","roundedPercentageCount":"42.0","isWinner":true}],"form":{"shorttext":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.","isVotingOver":false,"is2FSecured":true,"jsonUrl":"json-url","errorMessages":"Error-Messages","isSimpleSecured":true,"url":"action-url","isHorizontalLayout":false,"hideVotingResult":true,"fields":[{"type":{"isGroup":false,"isChoice":true,"asString":"radio"},"name":"multivote-1","isGrouped":true,"isRequired":false,"options":[{"value":"1","label":"Answer 1","title":"Voting-Answer 1","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"2","label":"Answer 2","title":"Voting-Answer 2","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"3","label":"Answer 3","title":"Voting-Answer 3","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}}]}]}}

package/src/stories/views/components/voting/fixtures/voting_error.json

@@ -0,0 +1 @@
+{"teasersize":100,"realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"Wie finden Sie hessenschau.de?","backlink":"backlink-url","uuid":"UUID","headingSize":"h2","isVoting":true,"isMultiVote":true,"hasRedirect":true,"isMultipleChoice":false,"maxAnswerCount":1,"votingSuccessText":{"richtext":"Danke für Ihre Abstimmung!"},"isSimpleSecured":false,"cookieLifetime":"12","sophoraId":"Sophora-Id","hasBarchart":true,"showAbsoluteResult":false,"showVoteResult":true,"summarizedResult":"666","votingResult":[{"label":"Gut, beste website ever","count":"27","percentageCount":"4,1","roundedPercentageCount":"4.0"},{"label":"Super, allerbeste website ever","count":"117","percentageCount":"17,6","roundedPercentageCount":"18.0"},{"label":"Mega, allerallerbeste website ever","count":"242","percentageCount":"36,3","roundedPercentageCount":"36.0"},{"label":"Hammer, allerallerbesteste website ever","count":"280","percentageCount":"42,0","roundedPercentageCount":"42.0","isWinner":true}],"form":{"shorttext":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.","isVotingOver":false,"is2FSecured":true,"jsonUrl":"json-url","errorMessages":"Error-Messages","isSimpleSecured":true,"url":"action-url","isHorizontalLayout":false,"hideVotingResult":true,"fields":[{"type":{"isGroup":false,"isChoice":true,"asString":"radio"},"name":"multivote-1","isGrouped":true,"isRequired":false,"options":[{"value":"1","label":"Answer 1","title":"Voting-Answer 1","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"2","label":"Answer 2","title":"Voting-Answer 2","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"3","label":"Answer 3","title":"Voting-Answer 3","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}}]}]}}

package/src/stories/views/components/voting/fixtures/voting_over.json

@@ -1 +1 @@
-{"teasersize":100,"realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"Voting-Titel beziehungsweise Voting-Frage","backlink":"backlink-url","uuid":"UUID","headingSize":"h2","isVoting":true,"isMultiVote":true,"hasRedirect":true,"isMultipleChoice":false,"maxAnswerCount":1,"votingSuccessText":{"richtext":"Success-Text"},"isSimpleSecured":true,"cookieLifetime":"12","sophoraId":"Sophora-Id","hasBarchart":true,"showAbsoluteResult":true,"showVoteResult":true,"summarizedResult":"666","votingResult":[{"label":"Label-Result-Option-1","count":"222","percentageCount":"33,33","roundedPercentageCount":"33,0"},{"label":"Label-Result-Option-2","count":"222","percentageCount":"33,33","roundedPercentageCount":"33,0"},{"label":"Label-Result-Option-3","count":"222","percentageCount":"33,33","roundedPercentageCount":"33,0"}],"form":{"shorttext":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.","isVotingOver":true,"is2FSecured":true,"jsonUrl":"json-url","errorMessages":"Error-Messages","isSimpleSecured":true,"url":"action-url","isHorizontalLayout":false,"hideVotingResult":true,"fields":[{"type":{"isGroup":false,"isChoice":true,"asString":"radio"},"name":"multivote-1","isGrouped":true,"isRequired":false,"options":[{"value":"1","label":"Answer 1","title":"Voting-Answer 1","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"2","label":"Answer 2","title":"Voting-Answer 2","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"3","label":"Answer 3","title":"Voting-Answer 3","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}}]}]}}
+{"teasersize":100,"realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"Wie finden Sie hessenschau.de?","backlink":"backlink-url","uuid":"UUID","headingSize":"h2","isVoting":true,"isMultiVote":true,"hasRedirect":true,"isMultipleChoice":false,"maxAnswerCount":1,"votingSuccessText":{"richtext":"Danke für Ihre Abstimmung!"},"isSimpleSecured":true,"cookieLifetime":"12","sophoraId":"Sophora-Id","hasBarchart":true,"showAbsoluteResult":false,"showVoteResult":true,"summarizedResult":"666","votingResult":[{"label":"Gut, beste website ever","count":"27","percentageCount":"4,1","roundedPercentageCount":"4.0"},{"label":"Super, allerbeste website ever","count":"117","percentageCount":"17,6","roundedPercentageCount":"18.0"},{"label":"Mega, allerallerbeste website ever","count":"242","percentageCount":"36,3","roundedPercentageCount":"36.0"},{"label":"Hammer, allerallerbesteste website ever","count":"280","percentageCount":"42,0","roundedPercentageCount":"42.0","isWinner":true}],"form":{"shorttext":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.","isVotingOver":true,"is2FSecured":true,"jsonUrl":"json-url","errorMessages":"Error-Messages","isSimpleSecured":true,"url":"action-url","isHorizontalLayout":false,"hideVotingResult":true,"fields":[{"type":{"isGroup":false,"isChoice":true,"asString":"radio"},"name":"multivote-1","isGrouped":true,"isRequired":false,"options":[{"value":"1","label":"Answer 1","title":"Voting-Answer 1","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"2","label":"Answer 2","title":"Voting-Answer 2","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"3","label":"Answer 3","title":"Voting-Answer 3","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}}]}]}}

package/src/stories/views/components/voting/voting_error.stories.js

@@ -1,4 +1,4 @@
-import votingJson from './fixtures/voting.json'
+import votingErrorJson from './fixtures/voting_error.json'
 
 const handlebars = require('hrHandlebars')
 
@@ -25,6 +25,6 @@ const Template = (args) => {
 
 export const Voting_Error = {
     render: Template.bind({}),
-    name: 'Voting Fehlermeldung',
-    args: votingJson,
+    name: 'Fehlermeldung',
+    args: votingErrorJson,
 }

package/src/stories/views/components/voting/voting_result.hbs

@@ -4,22 +4,51 @@
 
 {{#if _hideVotingResult}}
     {{#if _isVotingOver}}
-        <p class="c-teaser__text text__copytext">{{{_resultBoxMessageText}}}</p>
+        <p class="mt-6 ml-8 text-base font-bold sm:ml-9 sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
     {{else}}
-        {{~> components/base/image/icon _icon=(if _statusDone "status-done" "status-error") _iconmap="icons" _addClass=(if _statusDone "" "float-left w-6 h-6 text-red-thunderbird-hex fill-current mt-6 sm:mt-12")}}
-        <p class="mt-6 ml-8 text-base font-bold sm:ml-9 text-red-thunderbird-hex sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
-        <div class="mt-6 sm:mt-12">
-            {{#> components/button/link_button _size="lg" _css="float-right"}}
-                {{> components/button/components/button_label _label=(loca "votingform_form_back")}}
-            {{/components/button/link_button}}
-        </div>
+        {{~> components/base/image/icon _icon=(if _statusDone "status-done" "status-error") _iconmap="icons" _addClass=(if _statusDone "" "float-left w-6 h-6 text-error dark:text-error-dark fill-current mt-6 sm:mt-12")}}
+        <p class="mt-6 ml-8 text-base font-bold sm:ml-9 text-error sm:text-lg font-heading sm:mt-12 dark:text-error-dark">{{{_resultBoxMessageText}}}</p>
     {{/if}}
 {{else}}
-
+    <p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
+    
+    {{#each _voteResults}}
+        <div class="flex">
+            <div class="grow">
+                <div class="{{#if @first}}mt-7 sm:mt-9{{else}}mt-3 sm:mt-4{{/if}} text-base sm:text-lg font-copy dark:text-text-dark">{{this.label}}</div>
+                <div class="mt-0.5 sm:mt-1 w-full bg-gray-alto rounded-full h-2">
+                    <div class="{{#if this.isWinner}}bg-orange-spicyCarrot-hex{{else}}bg-blue-congress-hex{{/if}} h-2 rounded-full" style="width:{{this.roundedPercentageCount}}%;animation: progressAnimationDS 5s"></div>
+                </div>
+            </div>
+            <div class="self-end flex-none w-16">
+                <span class="float-right block mt-2 text-2xl font-bold font-headingSerif {{#if this.isWinner}}text-orange-spicyCarrot-hex{{else}}text-blue-congress-hex{{/if}}" style="animation: percentageAnimationDS 5s">
+                    {{#if ../this.showAbsoluteResult}}{{this.count}}{{else}}{{this.percentageCount}}%{{/if}}
+                </span>
+            </div>
+        </div>
+    {{/each}}
+    
+    {{#unless this.showAbsoluteResult}}
+        {{#if this.showVoteResult}}
+            <p class="clear-both text-xs pt-7 sm:pt-9 font-headingSerif sm:text-sm text-gray-scorpion">
+                {{loca "votingform_vote_result"}}{{this.summarizedResult}}
+            </p>
+        {{/if}}
+    {{/unless}}    
 {{/if}}
 
 {{#if _isVotingOver}}
     <p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12 dark:text-text-dark">{{loca "votingform_voting_finished"}}</p>
 {{/if}}
 
-
+{{#unless _isResultOnRedirectPage}}
+    {{#unless this.isSimpleSecured}}
+        {{#unless _isVotingOver}}
+            <div class="mt-6 sm:mt-12">
+                {{#> components/button/link_button _size="lg" _css="float-right"}}
+                    {{> components/button/components/button_label _label=(loca "votingform_form_back")}}
+                {{/components/button/link_button}}
+            </div>            
+        {{/unless}}
+    {{/unless}}
+{{/unless}}

package/src/stories/views/components/voting/voting_result.stories.js

@@ -25,6 +25,6 @@ const Template = (args) => {
 
 export const Voting_Over = {
     render: Template.bind({}),
-    name: 'Voting beeendet',
+    name: 'Beeendet',
     args: votingOverJson,
 }