hr-design-system-handlebars 1.114.2 → 1.114.4

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

@@ -1,64 +1,96 @@
-{{#with this.form}}
-    {{#unless this.isVotingOver}}
-        {{#unless ../this.hasRedirect}}
-            <div class="js-load {{../_addClass}}"
-                data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'
-                data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
-                {{#if this.isSimpleSecured}}
-                    data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
-                    id="{{this.sophoraId}}"
-                {{/if}}
-            >
-        {{else}}
-            <div class="js-load {{../_addClass}}"
-                {{#if this.is2FSecured}}data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'{{/if}}
-                data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
-                {{#if this.isSimpleSecured}}
-                    data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
-                    id="{{this.sophoraId}}"
-                {{/if}}
-            >
-        {{/unless}}    
-            <div class="js-voting-wrapper">
-                <form class="js-votingForm" 
-                    action="{{this.url}}" 
-                    method="post"
-                    enctype="application/x-www-form-urlencoded" 
-                    accept-charset="utf-8" 
-                    autocomplete="off"
+{{#>components/forms/components/backgroundBox  }}
+    {{#with this.form}}
+        {{#unless this.isVotingOver}}
+            {{#unless ../this.hasRedirect}}
+                <div class="js-load {{../_addClass}}"
+                    data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'
+                    data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
+                    {{#if this.isSimpleSecured}}
+                        data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
+                        id="{{this.sophoraId}}"
+                    {{/if}}
                 >
-                    {{> components/voting/components/voting_header _title=../this.title _topline=../this.topline}}
-                    
-                    <div class="c-voting-form__bottomWrapper">
-                        {{#if this.shorttext}}
-                            <p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">{{this.shorttext}}</p>
-                        {{/if}}
-
-                        <div class="w-full mt-6 text-xs text-right sm:mt-12 font-headingSerif sm:text-sm text-gray-scorpion dark:text-text-dark">
-                            {{#if ../this.isMultipleChoice}}
-                                {{loca "votingform_open_answers_text" ../this.maxAnswerCount}}
-                            {{else}}
-                                {{loca "votingform_single_answer_text"}}
+            {{else}}
+                <div class="js-load {{../_addClass}}"
+                    {{#if this.is2FSecured}}data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'{{/if}}
+                    data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
+                    {{#if this.isSimpleSecured}}
+                        data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
+                        id="{{this.sophoraId}}"
+                    {{/if}}
+                >
+            {{/unless}}    
+                <div class="js-voting-wrapper">
+                    <form class="js-votingForm" 
+                        action="{{this.url}}" 
+                        method="post"
+                        enctype="application/x-www-form-urlencoded" 
+                        accept-charset="utf-8" 
+                        autocomplete="off"
+                    >
+                        {{> components/voting/components/voting_header _title=../this.title _topline=../this.topline}}
+                        
+                        <div class="c-voting-form__bottomWrapper">
+                            {{#if this.shorttext}}
+                                <p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">{{this.shorttext}}</p>
                             {{/if}}
-                            <span class="block float-right w-8 js-voting-counter">(0/{{../this.maxAnswerCount}})</span>
+
+                            <div class="w-full mt-6 text-xs text-right sm:mt-12 font-headingSerif sm:text-sm text-gray-scorpion dark:text-text-dark">
+                                {{#if ../this.isMultipleChoice}}
+                                    {{loca "votingform_open_answers_text" ../this.maxAnswerCount}}
+                                {{else}}
+                                    {{loca "votingform_single_answer_text"}}
+                                {{/if}}
+                                <span class="block float-right w-8 js-voting-counter">(0/{{../this.maxAnswerCount}})</span>
+                            </div>
+                            {{> components/forms/components/fields 
+                                    _multipleChoice=../this.isMultipleChoice 
+                                    _addClassGroup="!flex-col mt-2" 
+                                    _addClassChoice="has-[input:checked]:outline outline-2 outline-blue-science-hex bg-white has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" 
+                                    _addClassLabel="w-full !py-3 sm:!py-4 !pr-3 sm:!pr-4 !text-base sm:!text-lg md:!text-lg" 
+                                    _addClassLabelForDataPolicy="font-headingSerif !pt-0 !text-sm !text-gray-dark dark:!text-text-dark"
+                                    _addClassInput="!my-3 sm:!my-4 !ml-3 sm:!ml-4"
+                            }}
+                            {{#if this.is2FSecured}}
+                                <div class="float-left mt-1 text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
+                            {{/if}}                            
+                            {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="-inactive js-voting-submit-button"}}
                         </div>
-                        {{> components/forms/components/fields 
-                                _multipleChoice=../this.isMultipleChoice 
-                                _addClassGroup="!flex-col mt-2" 
-                                _addClassChoice="has-[input:checked]:outline outline-2 outline-blue-science-hex bg-white has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" 
-                                _addClassLabel="w-full !py-3 sm:!py-4 !pr-3 sm:!pr-4 !text-base sm:!text-lg md:!text-lg" 
-                                _addClassLabelForDataPolicy="font-headingSerif !pt-0 !text-sm !text-gray-dark dark:!text-text-dark"
-                                _addClassInput="!my-3 sm:!my-4 !ml-3 sm:!ml-4"
-                        }}
-                        {{#if this.is2FSecured}}
-                            <div class="float-left mt-1 text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
-                        {{/if}}                            
-                        {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="-inactive js-voting-submit-button"}}
-                    </div>
-                </form>
+                        <script type="text/html" class="js-successMessage">
+                                {{#if this.is2FSecured}}
+                                    {{{include "components/voting/voting_success_2F" _isInline=true _statusDone=true _title=../this.title _topline=../this.topline}}}
+                                {{else}}
+                                    {{{include "components/voting/voting_success" _isInline=true _voteResults=../this.votingResult _statusDone=true _title=../this.title _topline=../this.topline}}}
+                                {{/if}}
+                        </script>
+                        <script type="text/html" class="js-errorMessage">
+                                {{#if this.is2FSecured}}
+                                    {{{include "components/voting/voting_error" _isInline=true _statusDone=error _title=../this.title _topline=../this.topline}}}
+                                {{else}}
+                                    {{{include "components/voting/voting_error" _isInline=true _statusDone=false _title=../this.title _topline=../this.topline}}}
+                                {{/if}}
+                        </script>
+                        {{#unless this.hideVotingResult}}
+                            <script type="text/html" class="js-result">
+                                    {{#unless this.is2FSecured}}
+                                        {{> components/voting/voting_result 
+                                                _resultBoxMessageText=(loca "votingform_already_voted_cookie_hint") 
+                                                _voteResults=../this.votingResult 
+                                                _isResultOnRedirectPage=_isResultOnRedirectPage 
+                                                _isSimpleSecured=../this.isSimpleSecured 
+                                                _statusDone=true 
+                                                _addClass=../_addClass 
+                                                _hideVotingResult=this.hideVotingResult 
+                                                _isVotingOver=this.isVotingOver 
+                                        }}
+                                    {{/unless}}
+                            </script>
+                        {{/unless}}                                                            
+                    </form>
+                </div>
             </div>
-        </div>
-    {{else}}
-        {{> components/voting/voting_result _isVotingOver=true _title=../this.title _topline=../this.topline}}
-    {{/unless}}
-{{/with}}
+        {{else}}
+            {{> components/voting/voting_result _isVotingOver=true _title=../this.title _topline=../this.topline}}
+        {{/unless}}
+    {{/with}}
+{{/components/forms/components/backgroundBox }}

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

@@ -1,10 +1,13 @@
+import voting from './voting.hbs'
 import votingJson from './fixtures/voting.json'
 import votingOverJson from './fixtures/voting_over.json'
 import votingMultipleChoiceJson from './fixtures/voting_multiple_choice.json'
 import votingEmailJson from './fixtures/voting_email.json'
 import votingMediaJson from './fixtures/voting_media.json'
 
-const handlebars = require('hrHandlebars')
+const Template = ({ ...args }) => {
+    return voting({ ...args })
+}
 
 export default {
     title: 'Komponenten/Voting',
@@ -17,26 +20,58 @@ export default {
                     </div>`
         },
     ],
-}
-const Template = (args) => {
-    let hbsTemplate = handlebars.compile(`
-        {{#>components/forms/components/backgroundBox  }}  
-            {{> components/voting/voting }}
-        {{/components/forms/components/backgroundBox }}
-    `)
-    return hbsTemplate({ ...args })
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                     "status":""
+                    // "status":"OK"
+                    // "status":"VALIDATION_ERROR", "errors":{"vorname":"form_error_required"}
+                },
+            },
+        ],
+        layout: 'fullscreen',
+        chromatic: { disableSnapshot: true }
+    }
 }
 
 export const Default = {
     render: Template.bind({}),
     name: 'Einfachauswahl',
     args: votingJson,
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                     "status":"OK"
+                },
+            },
+        ]
+    }
 }
 
 export const Voting_Email = {
     render: Template.bind({}),
     name: 'Einfachauswahl mit E-Mail',
     args: votingEmailJson,
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                     "status":"OK"
+                },
+            },
+        ]
+    }
 }
 
 export const Voting_Media = {
@@ -53,6 +88,6 @@ export const Voting_Multiple_Choice = {
 
 export const Voting_Over = {
     render: Template.bind({}),
-    name: 'Beeendet',
+    name: 'Beendet',
     args: votingOverJson,
 }

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

@@ -1,6 +1,6 @@
 {{> components/voting/voting_result
-            _title=this.title
-            _topline=this.topline
+            _title=_title
+            _topline=_topline
             _resultBoxMessageTitle=(loca "votingform_title_error")
             _resultBoxMessageText=(loca "votingform_text_error")
             _locaKeyText="votingform_text_error"

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

@@ -13,13 +13,18 @@ export default {
                     </div>`
         },
     ],
+    parameters: { 
+        layout: 'fullscreen',
+        chromatic: { disableSnapshot: true }
+    }
 }
+
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-        {{#>components/forms/components/backgroundBox  }}  
-            {{> components/voting/voting_error }}
-        {{/components/forms/components/backgroundBox }}
-    `)
+    {{#>components/forms/components/backgroundBox  }}  
+        {{> components/voting/voting_error _title=this.title _topline=this.topline}}        
+    {{/components/forms/components/backgroundBox }}
+  `)
     return hbsTemplate({ ...args })
 }
 

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

@@ -1,62 +1,71 @@
-{{#unless _isResultOnRedirectPage}}
-    {{> components/voting/components/voting_header _title=_title _topline=_topline}}
-{{/unless}}
+<div class="{{#if this.isSimpleSecured}}js-load{{/if}}{{#if _addClass}} {{_addClass}}{{/if}}" 
+    {{#unless _isVotingOver}}
+        {{#if this.isSimpleSecured}}
+            data-hr-voting-result-cookie-ds='{"cookieLifetime":"{{this.cookieLifetime}}","votingId":"{{this.sophoraId}}"}'
+        {{/if}}
+    {{/unless}}
+>
 
-{{#if _hideVotingResult}}
-    {{#if _isVotingOver}}
-        <p class="mt-6 ml-8 text-base font-bold sm:ml-9 sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
+    {{#unless _isResultOnRedirectPage}}
+        {{> components/voting/components/voting_header _title=_title _topline=_topline}}
+    {{/unless}}
+
+    {{#if _hideVotingResult}}
+        {{#if _isVotingOver}}
+            <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-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}}
-        {{~> 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>
+        <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>
-            <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}}
-    
-    {{#if this.isMultipleChoice}}
-        {{#unless this.showAbsoluteResult}}
+        {{/each}}
+        
+        {{#if this.isMultipleChoice}}
+            {{#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}}
+        {{else}}
             {{#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}}
-    {{else}}
-        {{#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}}
-    {{/if}}    
-{{/if}}
+        {{/if}}    
+    {{/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}}
+    {{#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 _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}}
-{{/unless}}
+</div>

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

@@ -1,7 +1,7 @@
 {{#if this.votingSuccessText}}
     {{> components/voting/voting_result
-                _title=this.title
-                _topline=this.topline
+                _title=_title
+                _topline=_topline
                 _resultBoxMessageTitle=(loca "votingform_title_success")
                 _resultBoxMessageText=this.votingSuccessText.richtext
                 _isInline=_isInline
@@ -13,8 +13,8 @@
     }}
 {{else}}
     {{> components/voting/voting_result
-                _title=this.title
-                _topline=this.topline
+                _title=_title
+                _topline=_topline
                 _resultBoxMessageTitle=(loca "votingform_title_success")
                 _resultBoxMessageText=(loca "votingform_text_success")
                 _isInline=_isInline

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

@@ -14,13 +14,18 @@ export default {
                     </div>`
         },
     ],
+    parameters: { 
+        layout: 'fullscreen',
+        chromatic: { disableSnapshot: true }
+    }
 }
+
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-        {{#>components/forms/components/backgroundBox  }}  
-            {{> components/voting/voting_success }}
-        {{/components/forms/components/backgroundBox }}
-    `)
+    {{#>components/forms/components/backgroundBox  }}  
+        {{> components/voting/voting_success _title=this.title _topline=this.topline}}        
+    {{/components/forms/components/backgroundBox }}
+  `)
     return hbsTemplate({ ...args })
 }
 

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

@@ -1,6 +1,6 @@
 {{> components/voting/voting_result_2F
-            _title=this.title
-            _topline=this.topline
+            _title=_title
+            _topline=_topline
             _resultBoxMessageTitle=(loca "votingform2F_title_success")
             _resultBoxMessageText=(loca "votingform2F_text_success")
             _isInline=_isInline

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

@@ -13,13 +13,18 @@ export default {
                     </div>`
         },
     ],
+    parameters: { 
+        layout: 'fullscreen',
+        chromatic: { disableSnapshot: true }
+    }
 }
+
 const Template = (args) => {
     let hbsTemplate = handlebars.compile(`
-        {{#>components/forms/components/backgroundBox  }}  
-            {{> components/voting/voting_success_2F }}
-        {{/components/forms/components/backgroundBox }}
-    `)
+    {{#>components/forms/components/backgroundBox  }}  
+        {{> components/voting/voting_success_2F _title=this.title _topline=this.topline}}        
+    {{/components/forms/components/backgroundBox }}
+  `)
     return hbsTemplate({ ...args })
 }