hr-design-system-handlebars 1.113.5 → 1.113.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/assets/index.css +57 -8
- package/dist/views/components/voting/voting_result.hbs +39 -10
- package/dist/views/components/voting/voting_success.hbs +27 -0
- package/dist/views_static/components/voting/voting_result.hbs +39 -10
- package/dist/views_static/components/voting/voting_success.hbs +27 -0
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +16 -0
- package/src/assets/fixtures/voting/voting.inc.json +23 -16
- package/src/assets/fixtures/voting/voting_error.json +10 -0
- package/src/stories/views/components/voting/fixtures/voting.json +1 -1
- package/src/stories/views/components/voting/fixtures/voting_error.json +1 -0
- package/src/stories/views/components/voting/fixtures/voting_over.json +1 -1
- package/src/stories/views/components/voting/voting_error.stories.js +3 -3
- package/src/stories/views/components/voting/voting_result.hbs +39 -10
- package/src/stories/views/components/voting/voting_result.stories.js +1 -1
- package/src/stories/views/components/voting/voting_success.hbs +27 -0
- package/src/stories/views/components/voting/voting_success.stories.js +30 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.113.6 (Wed Oct 30 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- DPE-3353 add votingresult-barchart [#1133](https://github.com/mumprod/hr-design-system-handlebars/pull/1133) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.113.5 (Wed Oct 30 2024)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -2583,6 +2583,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2583
2583
|
background-color: rgba(247, 247, 247, 1);
|
|
2584
2584
|
background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
|
|
2585
2585
|
}
|
|
2586
|
+
.bg-gray-alto {
|
|
2587
|
+
--tw-bg-opacity: 1;
|
|
2588
|
+
background-color: rgba(224, 224, 224, 1);
|
|
2589
|
+
background-color: rgba(224, 224, 224, var(--tw-bg-opacity));
|
|
2590
|
+
}
|
|
2586
2591
|
.bg-gray-concrete {
|
|
2587
2592
|
--tw-bg-opacity: 1;
|
|
2588
2593
|
background-color: rgba(243, 243, 243, 1);
|
|
@@ -2669,6 +2674,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2669
2674
|
background-color: rgba(161, 71, 2, 1);
|
|
2670
2675
|
background-color: rgba(161, 71, 2, var(--tw-bg-opacity));
|
|
2671
2676
|
}
|
|
2677
|
+
.bg-orange-spicyCarrot-hex {
|
|
2678
|
+
--tw-bg-opacity: 1;
|
|
2679
|
+
background-color: rgba(211, 70, 0, 1);
|
|
2680
|
+
background-color: rgba(211, 70, 0, var(--tw-bg-opacity));
|
|
2681
|
+
}
|
|
2672
2682
|
.bg-podcast {
|
|
2673
2683
|
background-color: #006dc1;
|
|
2674
2684
|
background-color: var(--color-podcast);
|
|
@@ -3069,6 +3079,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3069
3079
|
.pt-6 {
|
|
3070
3080
|
padding-top: 1.5rem;
|
|
3071
3081
|
}
|
|
3082
|
+
.pt-7 {
|
|
3083
|
+
padding-top: 1.75rem;
|
|
3084
|
+
}
|
|
3072
3085
|
.pt-8 {
|
|
3073
3086
|
padding-top: 2rem;
|
|
3074
3087
|
}
|
|
@@ -3241,6 +3254,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3241
3254
|
color: rgba(29, 78, 216, 1);
|
|
3242
3255
|
color: rgba(29, 78, 216, var(--tw-text-opacity));
|
|
3243
3256
|
}
|
|
3257
|
+
.text-blue-congress-hex {
|
|
3258
|
+
--tw-text-opacity: 1;
|
|
3259
|
+
color: rgba(0, 82, 147, 1);
|
|
3260
|
+
color: rgba(0, 82, 147, var(--tw-text-opacity));
|
|
3261
|
+
}
|
|
3244
3262
|
.text-brandnav-pseudo {
|
|
3245
3263
|
color: #005293;
|
|
3246
3264
|
color: var(--color-brandnav-pseudo);
|
|
@@ -3333,6 +3351,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3333
3351
|
color: #000000;
|
|
3334
3352
|
color: var(--color-navigation-text);
|
|
3335
3353
|
}
|
|
3354
|
+
.text-orange-spicyCarrot-hex {
|
|
3355
|
+
--tw-text-opacity: 1;
|
|
3356
|
+
color: rgba(211, 70, 0, 1);
|
|
3357
|
+
color: rgba(211, 70, 0, var(--tw-text-opacity));
|
|
3358
|
+
}
|
|
3336
3359
|
.text-podcast-text {
|
|
3337
3360
|
color: #006eb7;
|
|
3338
3361
|
color: var(--color-podcast-text);
|
|
@@ -3341,11 +3364,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3341
3364
|
color: #005293;
|
|
3342
3365
|
color: var(--color-primary-ds);
|
|
3343
3366
|
}
|
|
3344
|
-
.text-red-thunderbird-hex {
|
|
3345
|
-
--tw-text-opacity: 1;
|
|
3346
|
-
color: rgba(204, 26, 20, 1);
|
|
3347
|
-
color: rgba(204, 26, 20, var(--tw-text-opacity));
|
|
3348
|
-
}
|
|
3349
3367
|
.text-search-footer-text {
|
|
3350
3368
|
color: #000000;
|
|
3351
3369
|
color: var(--color-search-footer-text);
|
|
@@ -3624,7 +3642,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3624
3642
|
border-bottom-color: var(--color-secondary-ds);
|
|
3625
3643
|
}
|
|
3626
3644
|
.counter-reset {
|
|
3627
|
-
counter-reset:
|
|
3645
|
+
counter-reset: cnt1730285840555;
|
|
3628
3646
|
}
|
|
3629
3647
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
3630
3648
|
font-size: 0.75rem;
|
|
@@ -4038,7 +4056,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
4038
4056
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4039
4057
|
}
|
|
4040
4058
|
.-ordered {
|
|
4041
|
-
counter-increment:
|
|
4059
|
+
counter-increment: cnt1730285840555 1;
|
|
4042
4060
|
}
|
|
4043
4061
|
.-ordered::before {
|
|
4044
4062
|
position: absolute;
|
|
@@ -4056,7 +4074,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
4056
4074
|
--tw-text-opacity: 1;
|
|
4057
4075
|
color: rgba(0, 0, 0, 1);
|
|
4058
4076
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4059
|
-
content: counter(
|
|
4077
|
+
content: counter(cnt1730285840555);
|
|
4060
4078
|
}
|
|
4061
4079
|
/*! ****************************/
|
|
4062
4080
|
/*! DataPolicy stuff */
|
|
@@ -4223,6 +4241,20 @@ select:has(option:checked[value='']) {
|
|
|
4223
4241
|
.form-radio:checked::after {
|
|
4224
4242
|
transform: translate(-50%, -50%) scale(1);
|
|
4225
4243
|
}
|
|
4244
|
+
/* keyframes for barchart-animation */
|
|
4245
|
+
@keyframes progressAnimationDS {
|
|
4246
|
+
0% {
|
|
4247
|
+
width: 0;
|
|
4248
|
+
}
|
|
4249
|
+
}
|
|
4250
|
+
@keyframes percentageAnimationDS {
|
|
4251
|
+
0% {
|
|
4252
|
+
opacity: 0;
|
|
4253
|
+
}
|
|
4254
|
+
100% {
|
|
4255
|
+
opacity: 100;
|
|
4256
|
+
}
|
|
4257
|
+
}
|
|
4226
4258
|
.\[-T\:\+Z\] {
|
|
4227
4259
|
--t: +Z;
|
|
4228
4260
|
}
|
|
@@ -6646,6 +6678,10 @@ select:has(option:checked[value='']) {
|
|
|
6646
6678
|
margin-top: 0px;
|
|
6647
6679
|
}
|
|
6648
6680
|
|
|
6681
|
+
.sm\:mt-1 {
|
|
6682
|
+
margin-top: 0.25rem;
|
|
6683
|
+
}
|
|
6684
|
+
|
|
6649
6685
|
.sm\:mt-1\.5 {
|
|
6650
6686
|
margin-top: 0.375rem;
|
|
6651
6687
|
}
|
|
@@ -6678,6 +6714,10 @@ select:has(option:checked[value='']) {
|
|
|
6678
6714
|
margin-top: 2rem;
|
|
6679
6715
|
}
|
|
6680
6716
|
|
|
6717
|
+
.sm\:mt-9 {
|
|
6718
|
+
margin-top: 2.25rem;
|
|
6719
|
+
}
|
|
6720
|
+
|
|
6681
6721
|
.sm\:block {
|
|
6682
6722
|
display: block;
|
|
6683
6723
|
}
|
|
@@ -6835,6 +6875,10 @@ select:has(option:checked[value='']) {
|
|
|
6835
6875
|
padding-top: 0.75rem;
|
|
6836
6876
|
}
|
|
6837
6877
|
|
|
6878
|
+
.sm\:pt-9 {
|
|
6879
|
+
padding-top: 2.25rem;
|
|
6880
|
+
}
|
|
6881
|
+
|
|
6838
6882
|
.sm\:text-3xl {
|
|
6839
6883
|
font-size: 1.625rem;
|
|
6840
6884
|
line-height: 2rem;
|
|
@@ -6845,6 +6889,11 @@ select:has(option:checked[value='']) {
|
|
|
6845
6889
|
line-height: 1.5rem;
|
|
6846
6890
|
}
|
|
6847
6891
|
|
|
6892
|
+
.sm\:text-sm {
|
|
6893
|
+
font-size: 0.875rem;
|
|
6894
|
+
line-height: 1.1875rem;
|
|
6895
|
+
}
|
|
6896
|
+
|
|
6848
6897
|
.sm\:text-xl {
|
|
6849
6898
|
font-size: 1.25rem;
|
|
6850
6899
|
line-height: 1.6875rem;
|
|
@@ -4,22 +4,51 @@
|
|
|
4
4
|
|
|
5
5
|
{{#if _hideVotingResult}}
|
|
6
6
|
{{#if _isVotingOver}}
|
|
7
|
-
<p class="
|
|
7
|
+
<p class="mt-6 ml-8 text-base font-bold sm:ml-9 sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
|
|
8
8
|
{{else}}
|
|
9
|
-
{{~> components/base/image/icon _icon=(if _statusDone "status-done" "status-error") _iconmap="icons" _addClass=(if _statusDone "" "float-left w-6 h-6 text-
|
|
10
|
-
<p class="mt-6 ml-8 text-base font-bold sm:ml-9 text-
|
|
11
|
-
<div class="mt-6 sm:mt-12">
|
|
12
|
-
{{#> components/button/link_button _size="lg" _css="float-right"}}
|
|
13
|
-
{{> components/button/components/button_label _label=(loca "votingform_form_back")}}
|
|
14
|
-
{{/components/button/link_button}}
|
|
15
|
-
</div>
|
|
9
|
+
{{~> 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")}}
|
|
10
|
+
<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>
|
|
16
11
|
{{/if}}
|
|
17
12
|
{{else}}
|
|
18
|
-
|
|
13
|
+
<p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
|
|
14
|
+
|
|
15
|
+
{{#each _voteResults}}
|
|
16
|
+
<div class="flex">
|
|
17
|
+
<div class="grow">
|
|
18
|
+
<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>
|
|
19
|
+
<div class="mt-0.5 sm:mt-1 w-full bg-gray-alto rounded-full h-2">
|
|
20
|
+
<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>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="self-end flex-none w-16">
|
|
24
|
+
<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">
|
|
25
|
+
{{#if ../this.showAbsoluteResult}}{{this.count}}{{else}}{{this.percentageCount}}%{{/if}}
|
|
26
|
+
</span>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
{{/each}}
|
|
30
|
+
|
|
31
|
+
{{#unless this.showAbsoluteResult}}
|
|
32
|
+
{{#if this.showVoteResult}}
|
|
33
|
+
<p class="clear-both text-xs pt-7 sm:pt-9 font-headingSerif sm:text-sm text-gray-scorpion">
|
|
34
|
+
{{loca "votingform_vote_result"}}{{this.summarizedResult}}
|
|
35
|
+
</p>
|
|
36
|
+
{{/if}}
|
|
37
|
+
{{/unless}}
|
|
19
38
|
{{/if}}
|
|
20
39
|
|
|
21
40
|
{{#if _isVotingOver}}
|
|
22
41
|
<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>
|
|
23
42
|
{{/if}}
|
|
24
43
|
|
|
25
|
-
|
|
44
|
+
{{#unless _isResultOnRedirectPage}}
|
|
45
|
+
{{#unless this.isSimpleSecured}}
|
|
46
|
+
{{#unless _isVotingOver}}
|
|
47
|
+
<div class="mt-6 sm:mt-12">
|
|
48
|
+
{{#> components/button/link_button _size="lg" _css="float-right"}}
|
|
49
|
+
{{> components/button/components/button_label _label=(loca "votingform_form_back")}}
|
|
50
|
+
{{/components/button/link_button}}
|
|
51
|
+
</div>
|
|
52
|
+
{{/unless}}
|
|
53
|
+
{{/unless}}
|
|
54
|
+
{{/unless}}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{{#if this.votingSuccessText}}
|
|
2
|
+
{{> components/voting/voting_result
|
|
3
|
+
_title=this.title
|
|
4
|
+
_topline=this.topline
|
|
5
|
+
_resultBoxMessageTitle=(loca "votingform_title_success")
|
|
6
|
+
_resultBoxMessageText=this.votingSuccessText.richtext
|
|
7
|
+
_isInline=_isInline
|
|
8
|
+
_voteResults=this.votingResult
|
|
9
|
+
_isResultOnRedirectPage=_isResultOnRedirectPage
|
|
10
|
+
_hideVotingResult=this.hideVotingResult
|
|
11
|
+
_statusDone=_statusDone
|
|
12
|
+
|
|
13
|
+
}}
|
|
14
|
+
{{else}}
|
|
15
|
+
{{> components/voting/voting_result
|
|
16
|
+
_title=this.title
|
|
17
|
+
_topline=this.topline
|
|
18
|
+
_resultBoxMessageTitle=(loca "votingform_title_success")
|
|
19
|
+
_resultBoxMessageText=(loca "votingform_text_success")
|
|
20
|
+
_isInline=_isInline
|
|
21
|
+
_voteResults=this.votingResult
|
|
22
|
+
_isResultOnRedirectPage=_isResultOnRedirectPage
|
|
23
|
+
_hideVotingResult=this.hideVotingResult
|
|
24
|
+
_statusDone=_statusDone
|
|
25
|
+
}}
|
|
26
|
+
{{/if}}
|
|
27
|
+
|
|
@@ -4,22 +4,51 @@
|
|
|
4
4
|
|
|
5
5
|
{{#if _hideVotingResult}}
|
|
6
6
|
{{#if _isVotingOver}}
|
|
7
|
-
<p class="
|
|
7
|
+
<p class="mt-6 ml-8 text-base font-bold sm:ml-9 sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
|
|
8
8
|
{{else}}
|
|
9
|
-
{{~> components/base/image/icon _icon=(if _statusDone "status-done" "status-error") _iconmap="icons" _addClass=(if _statusDone "" "float-left w-6 h-6 text-
|
|
10
|
-
<p class="mt-6 ml-8 text-base font-bold sm:ml-9 text-
|
|
11
|
-
<div class="mt-6 sm:mt-12">
|
|
12
|
-
{{#> components/button/link_button _size="lg" _css="float-right"}}
|
|
13
|
-
{{> components/button/components/button_label _label=(loca "votingform_form_back")}}
|
|
14
|
-
{{/components/button/link_button}}
|
|
15
|
-
</div>
|
|
9
|
+
{{~> 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")}}
|
|
10
|
+
<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>
|
|
16
11
|
{{/if}}
|
|
17
12
|
{{else}}
|
|
18
|
-
|
|
13
|
+
<p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
|
|
14
|
+
|
|
15
|
+
{{#each _voteResults}}
|
|
16
|
+
<div class="flex">
|
|
17
|
+
<div class="grow">
|
|
18
|
+
<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>
|
|
19
|
+
<div class="mt-0.5 sm:mt-1 w-full bg-gray-alto rounded-full h-2">
|
|
20
|
+
<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>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="self-end flex-none w-16">
|
|
24
|
+
<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">
|
|
25
|
+
{{#if ../this.showAbsoluteResult}}{{this.count}}{{else}}{{this.percentageCount}}%{{/if}}
|
|
26
|
+
</span>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
{{/each}}
|
|
30
|
+
|
|
31
|
+
{{#unless this.showAbsoluteResult}}
|
|
32
|
+
{{#if this.showVoteResult}}
|
|
33
|
+
<p class="clear-both text-xs pt-7 sm:pt-9 font-headingSerif sm:text-sm text-gray-scorpion">
|
|
34
|
+
{{loca "votingform_vote_result"}}{{this.summarizedResult}}
|
|
35
|
+
</p>
|
|
36
|
+
{{/if}}
|
|
37
|
+
{{/unless}}
|
|
19
38
|
{{/if}}
|
|
20
39
|
|
|
21
40
|
{{#if _isVotingOver}}
|
|
22
41
|
<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>
|
|
23
42
|
{{/if}}
|
|
24
43
|
|
|
25
|
-
|
|
44
|
+
{{#unless _isResultOnRedirectPage}}
|
|
45
|
+
{{#unless this.isSimpleSecured}}
|
|
46
|
+
{{#unless _isVotingOver}}
|
|
47
|
+
<div class="mt-6 sm:mt-12">
|
|
48
|
+
{{#> components/button/link_button _size="lg" _css="float-right"}}
|
|
49
|
+
{{> components/button/components/button_label _label=(loca "votingform_form_back")}}
|
|
50
|
+
{{/components/button/link_button}}
|
|
51
|
+
</div>
|
|
52
|
+
{{/unless}}
|
|
53
|
+
{{/unless}}
|
|
54
|
+
{{/unless}}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{{#if this.votingSuccessText}}
|
|
2
|
+
{{> components/voting/voting_result
|
|
3
|
+
_title=this.title
|
|
4
|
+
_topline=this.topline
|
|
5
|
+
_resultBoxMessageTitle=(loca "votingform_title_success")
|
|
6
|
+
_resultBoxMessageText=this.votingSuccessText.richtext
|
|
7
|
+
_isInline=_isInline
|
|
8
|
+
_voteResults=this.votingResult
|
|
9
|
+
_isResultOnRedirectPage=_isResultOnRedirectPage
|
|
10
|
+
_hideVotingResult=this.hideVotingResult
|
|
11
|
+
_statusDone=_statusDone
|
|
12
|
+
|
|
13
|
+
}}
|
|
14
|
+
{{else}}
|
|
15
|
+
{{> components/voting/voting_result
|
|
16
|
+
_title=this.title
|
|
17
|
+
_topline=this.topline
|
|
18
|
+
_resultBoxMessageTitle=(loca "votingform_title_success")
|
|
19
|
+
_resultBoxMessageText=(loca "votingform_text_success")
|
|
20
|
+
_isInline=_isInline
|
|
21
|
+
_voteResults=this.votingResult
|
|
22
|
+
_isResultOnRedirectPage=_isResultOnRedirectPage
|
|
23
|
+
_hideVotingResult=this.hideVotingResult
|
|
24
|
+
_statusDone=_statusDone
|
|
25
|
+
}}
|
|
26
|
+
{{/if}}
|
|
27
|
+
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.113.
|
|
9
|
+
"version": "1.113.6",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -494,4 +494,20 @@
|
|
|
494
494
|
.form-radio:checked::after {
|
|
495
495
|
transform: translate(-50%, -50%) scale(1);
|
|
496
496
|
}
|
|
497
|
+
|
|
498
|
+
/* keyframes for barchart-animation */
|
|
499
|
+
@keyframes progressAnimationDS {
|
|
500
|
+
0% {
|
|
501
|
+
width: 0;
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
@keyframes percentageAnimationDS {
|
|
506
|
+
0% {
|
|
507
|
+
opacity: 0;
|
|
508
|
+
}
|
|
509
|
+
100% {
|
|
510
|
+
opacity: 100;
|
|
511
|
+
}
|
|
512
|
+
}
|
|
497
513
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"realTeasersize": 100,
|
|
5
5
|
"topline": "Voting-Topline",
|
|
6
6
|
"toplineSize": "h3",
|
|
7
|
-
"title": "
|
|
7
|
+
"title": "Wie finden Sie hessenschau.de?",
|
|
8
8
|
"backlink": "backlink-url",
|
|
9
9
|
"uuid": "UUID",
|
|
10
10
|
"headingSize": "h2",
|
|
@@ -14,34 +14,41 @@
|
|
|
14
14
|
"isMultipleChoice": false,
|
|
15
15
|
"maxAnswerCount": 1,
|
|
16
16
|
"votingSuccessText": {
|
|
17
|
-
"richtext": "
|
|
17
|
+
"richtext": "Danke für Ihre Abstimmung!"
|
|
18
18
|
},
|
|
19
19
|
"isSimpleSecured": true,
|
|
20
20
|
"cookieLifetime": "12",
|
|
21
21
|
"sophoraId": "Sophora-Id",
|
|
22
22
|
"hasBarchart": true,
|
|
23
|
-
"showAbsoluteResult":
|
|
23
|
+
"showAbsoluteResult": false,
|
|
24
24
|
"showVoteResult": true,
|
|
25
25
|
"summarizedResult": "666",
|
|
26
26
|
"votingResult": [
|
|
27
27
|
{
|
|
28
|
-
"label": "
|
|
29
|
-
"count": "
|
|
30
|
-
"percentageCount": "
|
|
31
|
-
"roundedPercentageCount": "
|
|
28
|
+
"label": "Gut, beste website ever",
|
|
29
|
+
"count": "27",
|
|
30
|
+
"percentageCount": "4,1",
|
|
31
|
+
"roundedPercentageCount": "4.0"
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
|
-
"label": "
|
|
35
|
-
"count": "
|
|
36
|
-
"percentageCount": "
|
|
37
|
-
"roundedPercentageCount": "
|
|
34
|
+
"label": "Super, allerbeste website ever",
|
|
35
|
+
"count": "117",
|
|
36
|
+
"percentageCount": "17,6",
|
|
37
|
+
"roundedPercentageCount": "18.0"
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
|
-
"label": "
|
|
41
|
-
"count": "
|
|
42
|
-
"percentageCount": "
|
|
43
|
-
"roundedPercentageCount": "
|
|
44
|
-
}
|
|
40
|
+
"label": "Mega, allerallerbeste website ever",
|
|
41
|
+
"count": "242",
|
|
42
|
+
"percentageCount": "36,3",
|
|
43
|
+
"roundedPercentageCount": "36.0"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"label": "Hammer, allerallerbesteste website ever",
|
|
47
|
+
"count": "280",
|
|
48
|
+
"percentageCount": "42,0",
|
|
49
|
+
"roundedPercentageCount": "42.0",
|
|
50
|
+
"isWinner": true
|
|
51
|
+
}
|
|
45
52
|
],
|
|
46
53
|
"form": {
|
|
47
54
|
"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.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"teasersize":100,"realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"
|
|
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":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"}]}}}]}]}}
|
|
@@ -0,0 +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,"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"}]}}}]}]}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"teasersize":100,"realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"
|
|
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":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"}]}}}]}]}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import votingErrorJson from './fixtures/voting_error.json'
|
|
2
2
|
|
|
3
3
|
const handlebars = require('hrHandlebars')
|
|
4
4
|
|
|
@@ -25,6 +25,6 @@ const Template = (args) => {
|
|
|
25
25
|
|
|
26
26
|
export const Voting_Error = {
|
|
27
27
|
render: Template.bind({}),
|
|
28
|
-
name: '
|
|
29
|
-
args:
|
|
28
|
+
name: 'Fehlermeldung',
|
|
29
|
+
args: votingErrorJson,
|
|
30
30
|
}
|
|
@@ -4,22 +4,51 @@
|
|
|
4
4
|
|
|
5
5
|
{{#if _hideVotingResult}}
|
|
6
6
|
{{#if _isVotingOver}}
|
|
7
|
-
<p class="
|
|
7
|
+
<p class="mt-6 ml-8 text-base font-bold sm:ml-9 sm:text-lg font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
|
|
8
8
|
{{else}}
|
|
9
|
-
{{~> components/base/image/icon _icon=(if _statusDone "status-done" "status-error") _iconmap="icons" _addClass=(if _statusDone "" "float-left w-6 h-6 text-
|
|
10
|
-
<p class="mt-6 ml-8 text-base font-bold sm:ml-9 text-
|
|
11
|
-
<div class="mt-6 sm:mt-12">
|
|
12
|
-
{{#> components/button/link_button _size="lg" _css="float-right"}}
|
|
13
|
-
{{> components/button/components/button_label _label=(loca "votingform_form_back")}}
|
|
14
|
-
{{/components/button/link_button}}
|
|
15
|
-
</div>
|
|
9
|
+
{{~> 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")}}
|
|
10
|
+
<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>
|
|
16
11
|
{{/if}}
|
|
17
12
|
{{else}}
|
|
18
|
-
|
|
13
|
+
<p class="mt-6 text-base font-bold sm:text-xl font-heading sm:mt-12">{{{_resultBoxMessageText}}}</p>
|
|
14
|
+
|
|
15
|
+
{{#each _voteResults}}
|
|
16
|
+
<div class="flex">
|
|
17
|
+
<div class="grow">
|
|
18
|
+
<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>
|
|
19
|
+
<div class="mt-0.5 sm:mt-1 w-full bg-gray-alto rounded-full h-2">
|
|
20
|
+
<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>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="self-end flex-none w-16">
|
|
24
|
+
<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">
|
|
25
|
+
{{#if ../this.showAbsoluteResult}}{{this.count}}{{else}}{{this.percentageCount}}%{{/if}}
|
|
26
|
+
</span>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
{{/each}}
|
|
30
|
+
|
|
31
|
+
{{#unless this.showAbsoluteResult}}
|
|
32
|
+
{{#if this.showVoteResult}}
|
|
33
|
+
<p class="clear-both text-xs pt-7 sm:pt-9 font-headingSerif sm:text-sm text-gray-scorpion">
|
|
34
|
+
{{loca "votingform_vote_result"}}{{this.summarizedResult}}
|
|
35
|
+
</p>
|
|
36
|
+
{{/if}}
|
|
37
|
+
{{/unless}}
|
|
19
38
|
{{/if}}
|
|
20
39
|
|
|
21
40
|
{{#if _isVotingOver}}
|
|
22
41
|
<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>
|
|
23
42
|
{{/if}}
|
|
24
43
|
|
|
25
|
-
|
|
44
|
+
{{#unless _isResultOnRedirectPage}}
|
|
45
|
+
{{#unless this.isSimpleSecured}}
|
|
46
|
+
{{#unless _isVotingOver}}
|
|
47
|
+
<div class="mt-6 sm:mt-12">
|
|
48
|
+
{{#> components/button/link_button _size="lg" _css="float-right"}}
|
|
49
|
+
{{> components/button/components/button_label _label=(loca "votingform_form_back")}}
|
|
50
|
+
{{/components/button/link_button}}
|
|
51
|
+
</div>
|
|
52
|
+
{{/unless}}
|
|
53
|
+
{{/unless}}
|
|
54
|
+
{{/unless}}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{{#if this.votingSuccessText}}
|
|
2
|
+
{{> components/voting/voting_result
|
|
3
|
+
_title=this.title
|
|
4
|
+
_topline=this.topline
|
|
5
|
+
_resultBoxMessageTitle=(loca "votingform_title_success")
|
|
6
|
+
_resultBoxMessageText=this.votingSuccessText.richtext
|
|
7
|
+
_isInline=_isInline
|
|
8
|
+
_voteResults=this.votingResult
|
|
9
|
+
_isResultOnRedirectPage=_isResultOnRedirectPage
|
|
10
|
+
_hideVotingResult=this.hideVotingResult
|
|
11
|
+
_statusDone=_statusDone
|
|
12
|
+
|
|
13
|
+
}}
|
|
14
|
+
{{else}}
|
|
15
|
+
{{> components/voting/voting_result
|
|
16
|
+
_title=this.title
|
|
17
|
+
_topline=this.topline
|
|
18
|
+
_resultBoxMessageTitle=(loca "votingform_title_success")
|
|
19
|
+
_resultBoxMessageText=(loca "votingform_text_success")
|
|
20
|
+
_isInline=_isInline
|
|
21
|
+
_voteResults=this.votingResult
|
|
22
|
+
_isResultOnRedirectPage=_isResultOnRedirectPage
|
|
23
|
+
_hideVotingResult=this.hideVotingResult
|
|
24
|
+
_statusDone=_statusDone
|
|
25
|
+
}}
|
|
26
|
+
{{/if}}
|
|
27
|
+
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import votingJson from './fixtures/voting.json'
|
|
2
|
+
|
|
3
|
+
const handlebars = require('hrHandlebars')
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Komponenten/Voting',
|
|
7
|
+
decorators: [
|
|
8
|
+
(Story) => {
|
|
9
|
+
return `<div class="grid grid-page">
|
|
10
|
+
<div class="grid bg-white grid-article">
|
|
11
|
+
${Story()}
|
|
12
|
+
</div>
|
|
13
|
+
</div>`
|
|
14
|
+
},
|
|
15
|
+
],
|
|
16
|
+
}
|
|
17
|
+
const Template = (args) => {
|
|
18
|
+
let hbsTemplate = handlebars.compile(`
|
|
19
|
+
{{#>components/forms/components/backgroundBox }}
|
|
20
|
+
{{> components/voting/voting_success }}
|
|
21
|
+
{{/components/forms/components/backgroundBox }}
|
|
22
|
+
`)
|
|
23
|
+
return hbsTemplate({ ...args })
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export const Voting_Success = {
|
|
27
|
+
render: Template.bind({}),
|
|
28
|
+
name: 'Ergebnis Barchart prozentual',
|
|
29
|
+
args: votingJson,
|
|
30
|
+
}
|