hr-design-system-handlebars 1.114.30 → 1.114.32

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

@@ -0,0 +1 @@
+{"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}],"summarizedResult":"666","isMultipleChoice":false,"votingDoc":{"showAbsoluteResult":false,"hasRedirect":false,"isVotingOver":false,"isSimpleSecured":false,"is2FSecured":false,"cmsFields":{"title":"Wie finden Sie hessenschau.de?","cookieLifetime":"12","sophoraId":"Sophora-Id","showVoteResult":false,"_resultBoxMessageText":"Danke für Ihre Abstimmung!"}}}

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

@@ -1 +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,"isMultimediaVoting":false,"hasRedirect":false,"isMultipleChoice":false,"maxAnswerCount":1,"votingSuccessText":{"richtext":"Danke für Ihre Abstimmung!"},"isSimpleSecured":false,"cookieLifetime":"12","sophoraId":"Sophora-Id","hasBarchart":true,"showAbsoluteResult":true,"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":false,"jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"{\"form_error_required\":\"Pflichtfeld\",\"form_error_max\":\"Zu viele Zeichen\",\"form_error_validurl\":\"Ungültige URL\",\"form_error_empty\":\"Darf nicht ausgefüllt werden\",\"form_error_constants_or_null\":\"Ungültiger Wert\",\"form_error_constants\":\"Ungültiger Wert\",\"form_error_max_multivalue\":\"Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten\",\"vote_error_identity_already_used\":\"Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.\",\"vote_error_token_request_count_exceeded\":\"Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.\",\"form_error_email\":\"Ungültige E-Mail-Adresse\"}","isSimpleSecured":false,"url":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","isHorizontalLayout":false,"hideVotingResult":false,"sophoraId":"Sophora-Id","fields":[{"type":{"isGroup":false,"isChoice":true,"asString":"radio"},"name":"voting","isGrouped":true,"isRequired":false,"options":[{"value":"1","label":"Gut, beste website ever","title":"Voting-Answer 1"},{"value":"2","label":"Super, allerbeste website ever","title":"Voting-Answer 2"},{"value":"3","label":"Mega, allerallerbeste website ever","title":"Voting-Answer 3"},{"value":"4","label":"Hammer, allerallerbesteste website ever","title":"Voting-Answer 4"}]}]}}
+{"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}],"summarizedResult":"666","isMultipleChoice":false,"votingDoc":{"showAbsoluteResult":true,"hasRedirect":false,"isVotingOver":false,"isSimpleSecured":false,"is2FSecured":false,"cmsFields":{"title":"Wie finden Sie hessenschau.de?","cookieLifetime":"12","sophoraId":"Sophora-Id","showVoteResult":false,"_resultBoxMessageText":"Danke für Ihre Abstimmung!"}}}

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

@@ -0,0 +1 @@
+{"teasersize":"50","realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"Wie finden Sie hessenschau.de?","backlink":"backlink-url","uuid":"UUID","headingSize":"h2","isVoting":true,"isMultiVote":true,"isMultimediaVoting":false,"hasRedirect":false,"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":false,"jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"{\"form_error_required\":\"Pflichtfeld\",\"form_error_max\":\"Zu viele Zeichen\",\"form_error_validurl\":\"Ungültige URL\",\"form_error_empty\":\"Darf nicht ausgefüllt werden\",\"form_error_constants_or_null\":\"Ungültiger Wert\",\"form_error_constants\":\"Ungültiger Wert\",\"form_error_max_multivalue\":\"Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten\",\"vote_error_identity_already_used\":\"Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich.\",\"vote_error_token_request_count_exceeded\":\"Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt.\",\"form_error_email\":\"Ungültige E-Mail-Adresse\"}","isSimpleSecured":false,"url":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","isHorizontalLayout":false,"hideVotingResult":false,"sophoraId":"Sophora-Id","fields":[{"type":{"isGroup":false,"isChoice":true,"asString":"radio"},"name":"voting","isGrouped":true,"isRequired":false,"options":[{"value":"1","label":"Gut, beste website ever","title":"Voting-Answer 1"},{"value":"2","label":"Super, allerbeste website ever","title":"Voting-Answer 2"},{"value":"3","label":"Mega, allerallerbeste website ever","title":"Voting-Answer 3"},{"value":"4","label":"Hammer, allerallerbesteste website ever","title":"Voting-Answer 4"}]}]}}

package/src/stories/views/components/voting/js/votingDs.feature.js

@@ -1,4 +1,4 @@
-import { hr$, listen, replaceAnimated } from 'hrQuery'
+import { hr$, listen, replaceAnimated, reinitializeFeature } from 'hrQuery'
 import $ from 'zepto-modules'
 
 require('zepto-modules/callbacks')
@@ -136,6 +136,17 @@ const Voting = (context) => {
             })
         }, 850)
     }
+
+    const scrollIntoVotingAndReinitialize = function (vertical) {
+        setTimeout(function () {
+            rootElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            })
+            reinitializeFeature(votingWrapper.parentNode.parentNode)
+        }, 850)
+    }
+
     /**
      * Handles click events globally
      * and delegates to concrete handlers
@@ -151,7 +162,7 @@ const Voting = (context) => {
 
     const handleFormReload = function (event) {
         event.preventDefault()
-        replaceAnimated(votingWrapper, votingTmpl, true, scrollIntoVoting)
+        replaceAnimated(votingWrapper, votingTmpl, true, scrollIntoVotingAndReinitialize)
     }
 
     const handleKeydown = function (event) {

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

@@ -1,4 +1,4 @@
-{{#>components/forms/components/backgroundBox  }}
+{{#>components/forms/components/backgroundBox _isTeaser=_isTeaser }}
     {{#with this.form}}
         {{#unless this.isVotingOver}}
             {{#unless ../this.hasRedirect}}
@@ -28,7 +28,7 @@
                         accept-charset="utf-8" 
                         autocomplete="off"
                     >
-                        {{> components/voting/components/voting_header _title=../this.title _topline=../this.topline}}
+                        {{> components/voting/components/voting_header _isTeaser=../../_isTeaser _title=../this.title _topline=../this.topline}}
                         
                         <div class="js-voting-form__bottomWrapper">
                             {{#if this.shorttext}}
@@ -66,6 +66,7 @@
                                             _statusDone=true  
                                             _resultBoxMessageTitle=(loca "votingform2F_title_success") 
                                             _resultBoxMessageText=(loca "votingform2F_text_success")
+                                            _isTeaser=../../_isTeaser
                                     }}
                                 {{else}}
                                     {{> components/voting/voting_result
@@ -74,6 +75,7 @@
                                             _hideVotingResult=this.hideVotingResult 
                                             _resultBoxMessageTitle=(loca "votingform_title_success") 
                                             _resultBoxMessageText=../this.votingSuccessText.richtext
+                                            _isTeaser=../../_isTeaser
                                     }}
                                 {{/if}}
                         </script>
@@ -85,6 +87,7 @@
                                     _showBackButton=true  
                                     _resultBoxMessageTitle=(loca "votingform_title_error") 
                                     _resultBoxMessageText=(loca "votingform_text_error")
+                                    _isTeaser=../../_isTeaser
                             }}
                         </script>
                         {{#unless this.hideVotingResult}}
@@ -95,6 +98,7 @@
                                                 _statusDone=true 
                                                 _addClass=../_addClass 
                                                 _hideVotingResult=this.hideVotingResult
+                                                _isTeaser=../../_isTeaser
                                         }}
                                     {{/unless}}
                             </script>
@@ -103,7 +107,7 @@
                 </div>
             </div>
         {{else}}
-            {{> components/voting/voting_result ../this _hideVotingResult=this.hideVotingResult}}
+            {{> components/voting/voting_result _hideVotingResult=this.hideVotingResult}}
         {{/unless}}
     {{/with}}
 {{/components/forms/components/backgroundBox }}

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

@@ -7,30 +7,23 @@ hbsTemplates['default'] = handlebars.compile(`
   {{> components/voting/voting }}   
 `)
 
-hbsTemplates['result'] = handlebars.compile(`
-    {{#>components/forms/components/backgroundBox  }}  
-        {{> components/voting/voting_result this
-                _isInline=true 
-                _statusDone=true 
-                _hideVotingResult=false
-                _resultBoxMessageText="Danke für Ihre Abstimmung!"
-        }}       
-    {{/components/forms/components/backgroundBox }}  
+hbsTemplates['teaser_50'] = handlebars.compile(`
+    {{> components/voting/voting _isTeaser=true}}   
 `)
 
 hbsTemplates['success'] = handlebars.compile(`
     {{#>components/forms/components/backgroundBox  }}  
         {{> components/voting/voting_result this  
-                _statusDone=true  
-                _resultBoxMessageTitle="Vielen Dank für Ihre Stimme." 
-                _resultBoxMessageText="Eine E-Mail zur Bestätigung Ihrer Abstimmung wurde Ihnen geschickt. Bitte prüfen Sie gegebenenfalls auch Ihren Spam-Ordner."
+                _statusDone=true 
+                _hideVotingResult=true  
+                _resultBoxMessageText="Vielen Dank für Ihre Stimme.</br>Eine E-Mail zur Bestätigung Ihrer Abstimmung wurde Ihnen geschickt. Bitte prüfen Sie gegebenenfalls auch Ihren Spam-Ordner."
         }}    
     {{/components/forms/components/backgroundBox }}  
 `)
 
 hbsTemplates['error'] = handlebars.compile(`
-    {{#>components/forms/components/backgroundBox  }}  
-        {{> components/voting/voting_result this 
+    {{#>components/forms/components/backgroundBox  }}      
+        {{> components/voting/voting_result this  
                 _isInline=true 
                 _statusDone=false 
                 _hideVotingResult=true 
@@ -45,8 +38,8 @@ const TemplateVoting = (args) => {
     return hbsTemplates['default']({ ...args })
 }
 
-const TemplateResult = (args) => {
-    return hbsTemplates['result']({ ...args })
+const TemplateVotingTeaser50 = (args) => {
+    return hbsTemplates['teaser_50']({ ...args })
 }
 
 const TemplateSuccess = (args) => {
@@ -139,6 +132,31 @@ export const voting_media_video_horizontal = {
     args: fixtures.voting_media_video_horizontal.args,
 }
 
+export const voting_teaser_50 = {
+    render: TemplateVotingTeaser50.bind({}),
+    name: 'Voting-Teaser 50%',
+    decorators: [
+        (Story) => {
+            return `<div class="sm:w-1/2 mt-12">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.voting_teaser_50.args,
+}
+
+export const voting_error = {
+    render: TemplateError.bind({}),
+    name: 'Error-Meldung',
+    args: fixtures.voting.args,
+}
+
+export const voting_success = {
+    render: TemplateSuccess.bind({}),
+    name: 'Success-Meldung',
+    args: fixtures.voting_email.args,
+}
+
 export const Snapshot = {
     render: snapshotTemplate.bind({}),
     name: 'Snapshot',

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

@@ -1,5 +1,5 @@
 {{#if ../this.is2FSecured}}
-    {{> components/voting/components/voting_header _title=this.title _topline=this.topline}}
+    {{> components/voting/components/voting_header _isTeaser=_isTeaser _title=this.title _topline=this.topline}}
     {{~> components/base/image/icon _icon=(if _statusDone "status-done" "error-ds") _iconmap="icons" _addClass=(if _statusDone "float-left w-6 h-6 text-success dark:text-success-dark fill-current mt-6 sm:mt-12" "float-left w-6 h-6 text-error dark:text-error-dark fill-current mt-6 sm:mt-12")}}
     <p class="{{#if _statusDone}}text-success dark:text-success-dark{{else}}text-error dark:text-error-dark{{/if}} mt-6 ml-8 text-base font-bold sm:ml-9 sm:text-xl font-heading sm:mt-12">{{#if _statusDone}}{{{_resultBoxMessageTitle}}}<br/>{{/if}}{{{_resultBoxMessageText}}}</p>
         {{#if _showBackButton}}
@@ -17,7 +17,7 @@
     >
 
         {{#unless ../this.hasRedirect}}
-            {{> components/voting/components/voting_header _title=this.title _topline=this.topline}}
+            {{> components/voting/components/voting_header _isTeaser=_isTeaser _title=this.title _topline=this.topline}}
         {{/unless}}
 
         {{#if _hideVotingResult}}