hr-design-system-handlebars 1.103.4 → 1.103.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 +16 -3
- package/dist/assets/index.css +26 -6
- package/dist/assets/js/components/externalService/externalServiceDs.feature.js +5 -2
- package/dist/views/components/forms/choice.hbs +1 -1
- package/dist/views/components/page/base/page_wrapper.hbs +1 -1
- package/dist/views_static/components/forms/choice.hbs +1 -1
- package/dist/views_static/components/page/base/page_wrapper.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +17 -0
- package/src/assets/fixtures/forms/form_fields.inc.json +35 -2
- package/src/assets/fixtures/forms/form_radio_grouped.json +8 -0
- package/src/stories/views/components/externalService/externalServiceDs.feature.js +5 -2
- package/src/stories/views/components/externalService/fixtures/external_service_with_datapolicy.json +0 -16
- package/src/stories/views/components/forms/choice.hbs +1 -1
- package/src/stories/views/components/forms/fixtures/form_checkbox_grouped.json +1 -1
- package/src/stories/views/components/forms/fixtures/form_radio_grouped.json +1 -0
- package/src/stories/views/components/forms/form_radio_grouped.stories.js +34 -0
- package/src/stories/views/components/page/base/page_wrapper.hbs +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
|
-
# v1.103.
|
|
1
|
+
# v1.103.6 (Wed Oct 02 2024)
|
|
2
2
|
|
|
3
3
|
#### 🐛 Bug Fix
|
|
4
4
|
|
|
5
|
-
-
|
|
5
|
+
- DPE-3301: add radio-button group [#1086](https://github.com/mumprod/hr-design-system-handlebars/pull/1086) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
10
|
+
- selbaciri (saad.elbaciri@hr.de)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v1.103.5 (Wed Oct 02 2024)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- - align items to start of grid in article element [#1085](https://github.com/mumprod/hr-design-system-handlebars/pull/1085) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
19
|
|
|
7
20
|
#### Authors: 1
|
|
8
21
|
|
|
9
|
-
- [@
|
|
22
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
23
|
|
|
11
24
|
---
|
|
12
25
|
|
package/dist/assets/index.css
CHANGED
|
@@ -2059,9 +2059,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2059
2059
|
.items-center {
|
|
2060
2060
|
align-items: center;
|
|
2061
2061
|
}
|
|
2062
|
-
.items-baseline {
|
|
2063
|
-
align-items: baseline;
|
|
2064
|
-
}
|
|
2065
2062
|
.items-stretch {
|
|
2066
2063
|
align-items: stretch;
|
|
2067
2064
|
}
|
|
@@ -3504,7 +3501,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3504
3501
|
border-bottom-color: var(--color-secondary-ds);
|
|
3505
3502
|
}
|
|
3506
3503
|
.counter-reset {
|
|
3507
|
-
counter-reset:
|
|
3504
|
+
counter-reset: cnt1727866325740;
|
|
3508
3505
|
}
|
|
3509
3506
|
.hyphens-auto {
|
|
3510
3507
|
-webkit-hyphens: auto;
|
|
@@ -3912,7 +3909,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3912
3909
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3913
3910
|
}
|
|
3914
3911
|
.-ordered {
|
|
3915
|
-
counter-increment:
|
|
3912
|
+
counter-increment: cnt1727866325740 1;
|
|
3916
3913
|
}
|
|
3917
3914
|
.-ordered::before {
|
|
3918
3915
|
position: absolute;
|
|
@@ -3928,7 +3925,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3928
3925
|
letter-spacing: .0125em;
|
|
3929
3926
|
--tw-text-opacity: 1;
|
|
3930
3927
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3931
|
-
content: counter(
|
|
3928
|
+
content: counter(cnt1727866325740);
|
|
3932
3929
|
}
|
|
3933
3930
|
/*! ****************************/
|
|
3934
3931
|
/*! DataPolicy stuff */
|
|
@@ -4064,6 +4061,21 @@ input[type="checkbox"]:checked::after {
|
|
|
4064
4061
|
border-right: none;
|
|
4065
4062
|
transform: rotate(-45deg);
|
|
4066
4063
|
}
|
|
4064
|
+
input[type="radio"]::after {
|
|
4065
|
+
content: '';
|
|
4066
|
+
position: absolute;
|
|
4067
|
+
width: 16px;
|
|
4068
|
+
height: 16px;
|
|
4069
|
+
top: 50%;
|
|
4070
|
+
left: 50%;
|
|
4071
|
+
transform: translate(-50%, -50%) scale(0);
|
|
4072
|
+
background-color: #005293;
|
|
4073
|
+
background-color: var(--color-primary-ds);
|
|
4074
|
+
border-radius: 50%;
|
|
4075
|
+
}
|
|
4076
|
+
input[type="radio"]:checked::after {
|
|
4077
|
+
transform: translate(-50%, -50%) scale(1);
|
|
4078
|
+
}
|
|
4067
4079
|
.\[-T\:\+Z\] {
|
|
4068
4080
|
--t: +Z;
|
|
4069
4081
|
}
|
|
@@ -5831,6 +5843,10 @@ input[type="checkbox"]:checked::after {
|
|
|
5831
5843
|
.last-of-type\:pb-3:last-of-type {
|
|
5832
5844
|
padding-bottom: 0.75rem;
|
|
5833
5845
|
}
|
|
5846
|
+
.checked\:border-blue-congress-hex:checked {
|
|
5847
|
+
--tw-border-opacity: 1;
|
|
5848
|
+
border-color: rgba(0, 82, 147, var(--tw-border-opacity));
|
|
5849
|
+
}
|
|
5834
5850
|
.checked\:border-transparent:checked {
|
|
5835
5851
|
border-color: transparent;
|
|
5836
5852
|
}
|
|
@@ -5838,6 +5854,10 @@ input[type="checkbox"]:checked::after {
|
|
|
5838
5854
|
--tw-bg-opacity: 1;
|
|
5839
5855
|
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
5840
5856
|
}
|
|
5857
|
+
.checked\:bg-white:checked {
|
|
5858
|
+
--tw-bg-opacity: 1;
|
|
5859
|
+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
|
5860
|
+
}
|
|
5841
5861
|
.empty\:hidden:empty {
|
|
5842
5862
|
display: none;
|
|
5843
5863
|
}
|
|
@@ -80,7 +80,10 @@ const ExternalService = function (context) {
|
|
|
80
80
|
break
|
|
81
81
|
case 'instagram-post':
|
|
82
82
|
createInstagramEmbed()
|
|
83
|
-
break
|
|
83
|
+
break
|
|
84
|
+
case 'instagram-story':
|
|
85
|
+
createInstagramEmbed()
|
|
86
|
+
break
|
|
84
87
|
case 'twitter':
|
|
85
88
|
createTwitterEmbed()
|
|
86
89
|
break
|
|
@@ -288,7 +291,7 @@ const ExternalService = function (context) {
|
|
|
288
291
|
const createInstagramEmbed = function () {
|
|
289
292
|
loadScript('instagram-js', '//www.instagram.com/embed.js', true)
|
|
290
293
|
embedCode = options.embedCode
|
|
291
|
-
var
|
|
294
|
+
var instagramPostEmbedCode =
|
|
292
295
|
"<blockquote class='instagram-media' data-instgrm-captioned " +
|
|
293
296
|
"data-instgrm-permalink='" +
|
|
294
297
|
embedCode +
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
6
|
<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
|
|
7
|
-
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
|
|
7
|
+
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '[" border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"," border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
|
|
8
8
|
:class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
|
|
9
9
|
@change="validateInput"
|
|
10
10
|
x-model="isChecked"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div class="grid grid-page{{#if _webview}} mt-4 sm:mt-0{{/if}}">
|
|
2
|
-
<{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-
|
|
2
|
+
<{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-start bg-white dark:bg-black grid-article">
|
|
3
3
|
{{> @partial-block }}
|
|
4
4
|
</{{#if _isArticle}}article{{else}}div{{/if}}>
|
|
5
5
|
</div>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
6
|
<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
|
|
7
|
-
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
|
|
7
|
+
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '[" border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"," border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
|
|
8
8
|
:class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
|
|
9
9
|
@change="validateInput"
|
|
10
10
|
x-model="isChecked"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div class="grid grid-page{{#if _webview}} mt-4 sm:mt-0{{/if}}">
|
|
2
|
-
<{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-
|
|
2
|
+
<{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-start bg-white dark:bg-black grid-article">
|
|
3
3
|
{{> @partial-block }}
|
|
4
4
|
</{{#if _isArticle}}article{{else}}div{{/if}}>
|
|
5
5
|
</div>
|
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.103.
|
|
9
|
+
"version": "1.103.6",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -471,4 +471,21 @@
|
|
|
471
471
|
border-right: none;
|
|
472
472
|
transform: rotate(-45deg);
|
|
473
473
|
}
|
|
474
|
+
|
|
475
|
+
input[type="radio"]::after {
|
|
476
|
+
content: '';
|
|
477
|
+
position: absolute;
|
|
478
|
+
width: 16px;
|
|
479
|
+
height: 16px;
|
|
480
|
+
top: 50%;
|
|
481
|
+
left: 50%;
|
|
482
|
+
transform: translate(-50%, -50%) scale(0);
|
|
483
|
+
background-color: var(--color-primary-ds);
|
|
484
|
+
border-radius: 50%;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
input[type="radio"]:checked::after {
|
|
488
|
+
transform: translate(-50%, -50%) scale(1);
|
|
489
|
+
}
|
|
490
|
+
|
|
474
491
|
}
|
|
@@ -101,10 +101,10 @@
|
|
|
101
101
|
"asString":"checkbox"
|
|
102
102
|
},
|
|
103
103
|
"name":"interessen",
|
|
104
|
-
"label":"Wählen Sie Ihre Interessen
|
|
104
|
+
"label":"Wählen Sie Ihre Interessen",
|
|
105
105
|
"isMeta":false,
|
|
106
106
|
"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.",
|
|
107
|
-
"isRequired":
|
|
107
|
+
"isRequired":true,
|
|
108
108
|
"options":[
|
|
109
109
|
{
|
|
110
110
|
"value":"sport",
|
|
@@ -156,6 +156,39 @@
|
|
|
156
156
|
}
|
|
157
157
|
]
|
|
158
158
|
},
|
|
159
|
+
"radio-group":
|
|
160
|
+
{
|
|
161
|
+
"isGrouped":true,
|
|
162
|
+
"type":{
|
|
163
|
+
"isChoice":true,
|
|
164
|
+
"asString":"radio"
|
|
165
|
+
},
|
|
166
|
+
"name":"lieblingsfarbe",
|
|
167
|
+
"label":"Wählen Sie Ihre Lieblingsfarbe",
|
|
168
|
+
"isMeta":false,
|
|
169
|
+
"description":"Bitte wählen Sie eine der folgenden Farben aus.",
|
|
170
|
+
"isRequired":true,
|
|
171
|
+
"options":[
|
|
172
|
+
{
|
|
173
|
+
"value":"rot",
|
|
174
|
+
"label":"rot",
|
|
175
|
+
"title":"rot",
|
|
176
|
+
"isSelected":false
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"value":"blau",
|
|
180
|
+
"label":"blau",
|
|
181
|
+
"title":"blau",
|
|
182
|
+
"isSelected":false
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"value":"grün",
|
|
186
|
+
"label":"grün",
|
|
187
|
+
"title":"grün",
|
|
188
|
+
"isSelected":false
|
|
189
|
+
}
|
|
190
|
+
]
|
|
191
|
+
},
|
|
159
192
|
"select": {
|
|
160
193
|
"type": {
|
|
161
194
|
"isSelect": true,
|
|
@@ -80,7 +80,10 @@ const ExternalService = function (context) {
|
|
|
80
80
|
break
|
|
81
81
|
case 'instagram-post':
|
|
82
82
|
createInstagramEmbed()
|
|
83
|
-
break
|
|
83
|
+
break
|
|
84
|
+
case 'instagram-story':
|
|
85
|
+
createInstagramEmbed()
|
|
86
|
+
break
|
|
84
87
|
case 'twitter':
|
|
85
88
|
createTwitterEmbed()
|
|
86
89
|
break
|
|
@@ -288,7 +291,7 @@ const ExternalService = function (context) {
|
|
|
288
291
|
const createInstagramEmbed = function () {
|
|
289
292
|
loadScript('instagram-js', '//www.instagram.com/embed.js', true)
|
|
290
293
|
embedCode = options.embedCode
|
|
291
|
-
var
|
|
294
|
+
var instagramPostEmbedCode =
|
|
292
295
|
"<blockquote class='instagram-media' data-instgrm-captioned " +
|
|
293
296
|
"data-instgrm-permalink='" +
|
|
294
297
|
embedCode +
|
package/src/stories/views/components/externalService/fixtures/external_service_with_datapolicy.json
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
"ARD_Mediathek_Video": {
|
|
3
3
|
"externalServiceConfig": {
|
|
4
4
|
"makeConfigurable": true,
|
|
5
|
-
"makeDatapolicyCheck": true,
|
|
6
5
|
"embedAsIFrame": true,
|
|
7
6
|
"externalServiceId": "ard_mediathek",
|
|
8
7
|
"externalServiceEmbedType": "iFrame",
|
|
@@ -16,7 +15,6 @@
|
|
|
16
15
|
"ARTE_concert_new": {
|
|
17
16
|
"externalServiceConfig": {
|
|
18
17
|
"makeConfigurable": true,
|
|
19
|
-
"makeDatapolicyCheck": true,
|
|
20
18
|
"embedAsIFrame": true,
|
|
21
19
|
"externalServiceId": "arte_concert_new",
|
|
22
20
|
"externalServiceEmbedType": "iFrame",
|
|
@@ -31,7 +29,6 @@
|
|
|
31
29
|
"Datawrapper_CDN_NoResponsiveFixedHeightReload": {
|
|
32
30
|
"externalServiceConfig": {
|
|
33
31
|
"makeConfigurable": true,
|
|
34
|
-
"makeDatapolicyCheck": true,
|
|
35
32
|
"embedAsIFrame": false,
|
|
36
33
|
"externalServiceId": "datawrapper_cdn",
|
|
37
34
|
"externalServiceEmbedType": "js",
|
|
@@ -47,7 +44,6 @@
|
|
|
47
44
|
"Datawrapper_CDN_NoResponsiveFixedHeight": {
|
|
48
45
|
"externalServiceConfig": {
|
|
49
46
|
"makeConfigurable": true,
|
|
50
|
-
"makeDatapolicyCheck": true,
|
|
51
47
|
"embedAsIFrame": false,
|
|
52
48
|
"externalServiceId": "datawrapper_cdn",
|
|
53
49
|
"externalServiceEmbedType": "js",
|
|
@@ -63,7 +59,6 @@
|
|
|
63
59
|
"Datawrapper_CDN_NoResponsiveAspectRatio": {
|
|
64
60
|
"externalServiceConfig": {
|
|
65
61
|
"makeConfigurable": true,
|
|
66
|
-
"makeDatapolicyCheck": true,
|
|
67
62
|
"embedAsIFrame": false,
|
|
68
63
|
"externalServiceId": "datawrapper_cdn",
|
|
69
64
|
"externalServiceEmbedType": "js",
|
|
@@ -79,7 +74,6 @@
|
|
|
79
74
|
"Datawrapper_CDN": {
|
|
80
75
|
"externalServiceConfig": {
|
|
81
76
|
"makeConfigurable": true,
|
|
82
|
-
"makeDatapolicyCheck": true,
|
|
83
77
|
"embedAsIFrame": false,
|
|
84
78
|
"externalServiceId": "datawrapper_cdn",
|
|
85
79
|
"externalServiceEmbedType": "js",
|
|
@@ -95,7 +89,6 @@
|
|
|
95
89
|
"Esri": {
|
|
96
90
|
"externalServiceConfig": {
|
|
97
91
|
"makeConfigurable": true,
|
|
98
|
-
"makeDatapolicyCheck": false,
|
|
99
92
|
"embedAsIFrame": true,
|
|
100
93
|
"externalServiceId": "esri",
|
|
101
94
|
"externalServiceEmbedType": "iFrame",
|
|
@@ -111,7 +104,6 @@
|
|
|
111
104
|
"Facebook": {
|
|
112
105
|
"externalServiceConfig": {
|
|
113
106
|
"makeConfigurable": true,
|
|
114
|
-
"makeDatapolicyCheck": false,
|
|
115
107
|
"embedAsIFrame": false,
|
|
116
108
|
"externalServiceId": "facebook-post",
|
|
117
109
|
"externalServiceEmbedType": "js",
|
|
@@ -125,7 +117,6 @@
|
|
|
125
117
|
"Flourish": {
|
|
126
118
|
"externalServiceConfig": {
|
|
127
119
|
"makeConfigurable": true,
|
|
128
|
-
"makeDatapolicyCheck": false,
|
|
129
120
|
"embedAsIFrame": true,
|
|
130
121
|
"externalServiceId": "flourish",
|
|
131
122
|
"externalServiceEmbedType": "iFrame",
|
|
@@ -140,7 +131,6 @@
|
|
|
140
131
|
"Giphy": {
|
|
141
132
|
"externalServiceConfig": {
|
|
142
133
|
"makeConfigurable": true,
|
|
143
|
-
"makeDatapolicyCheck": false,
|
|
144
134
|
"embedAsIFrame": true,
|
|
145
135
|
"externalServiceId": "giphy",
|
|
146
136
|
"externalServiceEmbedType": "iFrame",
|
|
@@ -154,7 +144,6 @@
|
|
|
154
144
|
"Instagram": {
|
|
155
145
|
"externalServiceConfig": {
|
|
156
146
|
"makeConfigurable": true,
|
|
157
|
-
"makeDatapolicyCheck": false,
|
|
158
147
|
"embedAsIFrame": false,
|
|
159
148
|
"externalServiceId": "instagram",
|
|
160
149
|
"externalServiceEmbedType": "js",
|
|
@@ -168,7 +157,6 @@
|
|
|
168
157
|
"Twitter": {
|
|
169
158
|
"externalServiceConfig": {
|
|
170
159
|
"makeConfigurable": true,
|
|
171
|
-
"makeDatapolicyCheck": false,
|
|
172
160
|
"embedAsIFrame": false,
|
|
173
161
|
"externalServiceId": "twitter-post",
|
|
174
162
|
"externalServiceEmbedType": "js",
|
|
@@ -182,7 +170,6 @@
|
|
|
182
170
|
"Vimeo": {
|
|
183
171
|
"externalServiceConfig": {
|
|
184
172
|
"makeConfigurable": true,
|
|
185
|
-
"makeDatapolicyCheck": false,
|
|
186
173
|
"embedAsIFrame": true,
|
|
187
174
|
"externalServiceId": "vimeo",
|
|
188
175
|
"externalServiceEmbedType": "iFrame",
|
|
@@ -196,7 +183,6 @@
|
|
|
196
183
|
"Youtube": {
|
|
197
184
|
"externalServiceConfig": {
|
|
198
185
|
"makeConfigurable": true,
|
|
199
|
-
"makeDatapolicyCheck": false,
|
|
200
186
|
"embedAsIFrame": true,
|
|
201
187
|
"externalServiceId": "youtube",
|
|
202
188
|
"externalServiceEmbedType": "iFrame",
|
|
@@ -211,7 +197,6 @@
|
|
|
211
197
|
"Youtube_360": {
|
|
212
198
|
"externalServiceConfig": {
|
|
213
199
|
"makeConfigurable": true,
|
|
214
|
-
"makeDatapolicyCheck": false,
|
|
215
200
|
"embedAsIFrame": true,
|
|
216
201
|
"externalServiceId": "youtube360",
|
|
217
202
|
"externalServiceEmbedType": "iFrame",
|
|
@@ -227,7 +212,6 @@
|
|
|
227
212
|
"Wahl_Gemeinde_Ergebnis": {
|
|
228
213
|
"externalServiceConfig": {
|
|
229
214
|
"makeConfigurable": false,
|
|
230
|
-
"makeDatapolicyCheck": false,
|
|
231
215
|
"embedAsIFrame": false,
|
|
232
216
|
"externalServiceId": "wahl-gemeinde-ergebnis",
|
|
233
217
|
"externalServiceEmbedType": "js",
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
6
|
<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
|
|
7
|
-
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
|
|
7
|
+
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '[" border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"," border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
|
|
8
8
|
:class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
|
|
9
9
|
@change="validateInput"
|
|
10
10
|
x-model="isChecked"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"fields":[{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen
|
|
1
|
+
{"fields":[{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":true,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]}]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"fields":[{"isGrouped":true,"type":{"isChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]}]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
|
|
2
|
+
import radioGroupJson from './fixtures/form_radio_grouped.json'
|
|
3
|
+
|
|
4
|
+
const handlebars = require('hrHandlebars')
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Komponenten/Formulare',
|
|
9
|
+
decorators: [
|
|
10
|
+
(Story) => {
|
|
11
|
+
return `<div class="grid grid-page">
|
|
12
|
+
<div class="grid bg-white grid-article">
|
|
13
|
+
${Story()}
|
|
14
|
+
</div>
|
|
15
|
+
</div>`
|
|
16
|
+
},
|
|
17
|
+
],
|
|
18
|
+
}
|
|
19
|
+
const Template = (args) => {
|
|
20
|
+
let hbsTemplate = handlebars.compile(`
|
|
21
|
+
{{#>components/forms/backgroundBox }}
|
|
22
|
+
<form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >
|
|
23
|
+
{{> components/forms/fields }}
|
|
24
|
+
</form>
|
|
25
|
+
{{/components/forms/backgroundBox }}
|
|
26
|
+
`)
|
|
27
|
+
return hbsTemplate({ ...args })
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export const Radio = {
|
|
31
|
+
render: Template.bind({}),
|
|
32
|
+
name: 'Radio',
|
|
33
|
+
args: radioGroupJson,
|
|
34
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div class="grid grid-page{{#if _webview}} mt-4 sm:mt-0{{/if}}">
|
|
2
|
-
<{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-
|
|
2
|
+
<{{#if _isArticle}}article{{else}}div{{/if}} class="grid items-start bg-white dark:bg-black grid-article">
|
|
3
3
|
{{> @partial-block }}
|
|
4
4
|
</{{#if _isArticle}}article{{else}}div{{/if}}>
|
|
5
5
|
</div>
|