hr-design-system-handlebars 1.114.2 → 1.114.3

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 })
 }