hr-design-system-handlebars 1.100.0 → 1.100.2
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/.storybook/main.js +1 -0
- package/CHANGELOG.md +26 -0
- package/dist/assets/index.css +133 -4
- package/dist/views/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views/components/forms/backgroundBox.hbs +3 -0
- package/dist/views/components/forms/fields.hbs +95 -0
- package/dist/views/components/forms/input_single_line.hbs +72 -0
- package/dist/views/components/forms/webform.hbs +9 -0
- package/dist/views_static/components/content/copytext/copytext_body.hbs +1 -1
- package/dist/views_static/components/forms/backgroundBox.hbs +3 -0
- package/dist/views_static/components/forms/fields.hbs +95 -0
- package/dist/views_static/components/forms/input_single_line.hbs +72 -0
- package/dist/views_static/components/forms/webform.hbs +9 -0
- package/package.json +2 -1
- package/src/assets/fixtures/content/copytext/components/form/form_input.json +17 -0
- package/src/assets/fixtures/content/copytext/copytext_webform.json +24 -0
- package/src/assets/fixtures/forms/form_fields.inc.json +44 -0
- package/src/assets/fixtures/forms/form_input.json +16 -0
- package/src/stories/views/components/content/copytext/components/form/fixtures/form_input.json +1 -0
- package/src/stories/views/components/content/copytext/copytext.stories.js +7 -0
- package/src/stories/views/components/content/copytext/copytext_body.hbs +1 -1
- package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json +1 -0
- package/src/stories/views/components/forms/backgroundBox.hbs +3 -0
- package/src/stories/views/components/forms/fields.hbs +95 -0
- package/src/stories/views/components/forms/fixtures/form_input.json +1 -0
- package/src/stories/views/components/forms/form.mdx +26 -0
- package/src/stories/views/components/forms/form.stories.js +44 -0
- package/src/stories/views/components/forms/input_single_line.hbs +72 -0
- package/src/stories/views/components/forms/webform.hbs +9 -0
- package/dist/views/components/content/copytext/components/webform.hbs +0 -5
- package/dist/views_static/components/content/copytext/components/webform.hbs +0 -5
- package/src/stories/views/components/content/copytext/components/webform.hbs +0 -5
package/.storybook/main.js
CHANGED
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
# v1.100.2 (Tue Sep 10 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Formularrahmen [#1063](https://github.com/mumprod/hr-design-system-handlebars/pull/1063) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.100.1 (Mon Sep 09 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- add form input [#1057](https://github.com/mumprod/hr-design-system-handlebars/pull/1057) (saad.elbaciri@hr.de [@vascoeduardo](https://github.com/vascoeduardo) [@selbaciri](https://github.com/selbaciri))
|
|
18
|
+
|
|
19
|
+
#### Authors: 3
|
|
20
|
+
|
|
21
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
22
|
+
- selbaciri (saad.elbaciri@hr.de)
|
|
23
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
1
27
|
# v1.100.0 (Mon Sep 09 2024)
|
|
2
28
|
|
|
3
29
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -426,7 +426,17 @@ video {
|
|
|
426
426
|
font-stretch: condensed;
|
|
427
427
|
}
|
|
428
428
|
|
|
429
|
-
.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-y-0, .translate-y-12, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95 {
|
|
429
|
+
.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-75, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95, .peer-placeholder-shown\:translate-x-0, .peer-placeholder-shown\:translate-y-3, .peer-placeholder-shown\:scale-100, .peer-focus\:translate-x-0, .peer-focus\:scale-75 {
|
|
430
|
+
--tw-translate-x: 0;
|
|
431
|
+
--tw-translate-y: 0;
|
|
432
|
+
--tw-rotate: 0;
|
|
433
|
+
--tw-skew-x: 0;
|
|
434
|
+
--tw-skew-y: 0;
|
|
435
|
+
--tw-scale-x: 1;
|
|
436
|
+
--tw-scale-y: 1;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.peer-focus\:-translate-y-0 {
|
|
430
440
|
--tw-translate-x: 0;
|
|
431
441
|
--tw-translate-y: 0;
|
|
432
442
|
--tw-rotate: 0;
|
|
@@ -1117,6 +1127,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1117
1127
|
.left-8 {
|
|
1118
1128
|
left: 2rem;
|
|
1119
1129
|
}
|
|
1130
|
+
.left-\[16px\] {
|
|
1131
|
+
left: 16px;
|
|
1132
|
+
}
|
|
1120
1133
|
.left-\[4px\] {
|
|
1121
1134
|
left: 4px;
|
|
1122
1135
|
}
|
|
@@ -1175,6 +1188,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1175
1188
|
.top-full {
|
|
1176
1189
|
top: 100%;
|
|
1177
1190
|
}
|
|
1191
|
+
.top-px {
|
|
1192
|
+
top: 1px;
|
|
1193
|
+
}
|
|
1178
1194
|
.-z-40 {
|
|
1179
1195
|
z-index: -40;
|
|
1180
1196
|
}
|
|
@@ -1873,6 +1889,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1873
1889
|
.basis-full {
|
|
1874
1890
|
flex-basis: 100%;
|
|
1875
1891
|
}
|
|
1892
|
+
.origin-top-left {
|
|
1893
|
+
transform-origin: top left;
|
|
1894
|
+
}
|
|
1876
1895
|
.-translate-x-1\/2 {
|
|
1877
1896
|
--tw-translate-x: -50%;
|
|
1878
1897
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1885,6 +1904,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1885
1904
|
--tw-translate-y: -50%;
|
|
1886
1905
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1887
1906
|
}
|
|
1907
|
+
.translate-x-0 {
|
|
1908
|
+
--tw-translate-x: 0px;
|
|
1909
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1910
|
+
}
|
|
1888
1911
|
.translate-y-0 {
|
|
1889
1912
|
--tw-translate-y: 0px;
|
|
1890
1913
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1914,6 +1937,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1914
1937
|
--tw-scale-y: .5;
|
|
1915
1938
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1916
1939
|
}
|
|
1940
|
+
.scale-75 {
|
|
1941
|
+
--tw-scale-x: .75;
|
|
1942
|
+
--tw-scale-y: .75;
|
|
1943
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1944
|
+
}
|
|
1917
1945
|
.scale-y-100 {
|
|
1918
1946
|
--tw-scale-y: 1;
|
|
1919
1947
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -2248,6 +2276,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2248
2276
|
--tw-border-opacity: 1;
|
|
2249
2277
|
border-color: rgba(227, 227, 227, var(--tw-border-opacity));
|
|
2250
2278
|
}
|
|
2279
|
+
.border-blue-500 {
|
|
2280
|
+
--tw-border-opacity: 1;
|
|
2281
|
+
border-color: rgba(59, 130, 246, var(--tw-border-opacity));
|
|
2282
|
+
}
|
|
2251
2283
|
.border-brandnavigation-border-color {
|
|
2252
2284
|
border-color: #005293;
|
|
2253
2285
|
border-color: var(--color-brandnavigation-border-color);
|
|
@@ -2333,6 +2365,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2333
2365
|
border-bottom-color: #606060;
|
|
2334
2366
|
border-bottom-color: var(--color-secondary-ds);
|
|
2335
2367
|
}
|
|
2368
|
+
.border-t-transparent {
|
|
2369
|
+
border-top-color: transparent;
|
|
2370
|
+
}
|
|
2336
2371
|
.bg-\[\#d8e9f6\] {
|
|
2337
2372
|
--tw-bg-opacity: 1;
|
|
2338
2373
|
background-color: rgba(216, 233, 246, var(--tw-bg-opacity));
|
|
@@ -2768,6 +2803,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2768
2803
|
.pb-6 {
|
|
2769
2804
|
padding-bottom: 1.5rem;
|
|
2770
2805
|
}
|
|
2806
|
+
.pb-8 {
|
|
2807
|
+
padding-bottom: 2rem;
|
|
2808
|
+
}
|
|
2771
2809
|
.pb-9 {
|
|
2772
2810
|
padding-bottom: 2.25rem;
|
|
2773
2811
|
}
|
|
@@ -3060,6 +3098,14 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3060
3098
|
color: #000000;
|
|
3061
3099
|
color: var(--color-footer-text);
|
|
3062
3100
|
}
|
|
3101
|
+
.text-gray-500 {
|
|
3102
|
+
--tw-text-opacity: 1;
|
|
3103
|
+
color: rgba(107, 114, 128, var(--tw-text-opacity));
|
|
3104
|
+
}
|
|
3105
|
+
.text-gray-800 {
|
|
3106
|
+
--tw-text-opacity: 1;
|
|
3107
|
+
color: rgba(31, 41, 55, var(--tw-text-opacity));
|
|
3108
|
+
}
|
|
3063
3109
|
.text-gray-dark {
|
|
3064
3110
|
--tw-text-opacity: 1;
|
|
3065
3111
|
color: rgba(112, 112, 112, var(--tw-text-opacity));
|
|
@@ -3103,6 +3149,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3103
3149
|
color: #005293;
|
|
3104
3150
|
color: var(--color-primary-ds);
|
|
3105
3151
|
}
|
|
3152
|
+
.text-red-700 {
|
|
3153
|
+
--tw-text-opacity: 1;
|
|
3154
|
+
color: rgba(185, 28, 28, var(--tw-text-opacity));
|
|
3155
|
+
}
|
|
3106
3156
|
.text-search-footer-text {
|
|
3107
3157
|
color: #000000;
|
|
3108
3158
|
color: var(--color-search-footer-text);
|
|
@@ -3199,6 +3249,15 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3199
3249
|
color: #000000;
|
|
3200
3250
|
color: var(--color-search-footer-text);
|
|
3201
3251
|
}
|
|
3252
|
+
.placeholder-transparent::-webkit-input-placeholder {
|
|
3253
|
+
color: transparent;
|
|
3254
|
+
}
|
|
3255
|
+
.placeholder-transparent::-moz-placeholder {
|
|
3256
|
+
color: transparent;
|
|
3257
|
+
}
|
|
3258
|
+
.placeholder-transparent::placeholder {
|
|
3259
|
+
color: transparent;
|
|
3260
|
+
}
|
|
3202
3261
|
.placeholder-opacity-100::-webkit-input-placeholder {
|
|
3203
3262
|
--tw-placeholder-opacity: 1;
|
|
3204
3263
|
}
|
|
@@ -3297,6 +3356,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3297
3356
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3298
3357
|
transition-duration: 150ms;
|
|
3299
3358
|
}
|
|
3359
|
+
.transition-transform {
|
|
3360
|
+
transition-property: transform;
|
|
3361
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3362
|
+
transition-duration: 150ms;
|
|
3363
|
+
}
|
|
3300
3364
|
.delay-0 {
|
|
3301
3365
|
transition-delay: 0s;
|
|
3302
3366
|
}
|
|
@@ -3336,12 +3400,15 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3336
3400
|
.ease-out {
|
|
3337
3401
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
3338
3402
|
}
|
|
3403
|
+
.border-t-transparent {
|
|
3404
|
+
border-top-color: transparent;
|
|
3405
|
+
}
|
|
3339
3406
|
.border-b-secondary {
|
|
3340
3407
|
border-bottom-color: #606060;
|
|
3341
3408
|
border-bottom-color: var(--color-secondary-ds);
|
|
3342
3409
|
}
|
|
3343
3410
|
.counter-reset {
|
|
3344
|
-
counter-reset:
|
|
3411
|
+
counter-reset: cnt1725971545380;
|
|
3345
3412
|
}
|
|
3346
3413
|
.hyphens-auto {
|
|
3347
3414
|
-webkit-hyphens: auto;
|
|
@@ -3749,7 +3816,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3749
3816
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3750
3817
|
}
|
|
3751
3818
|
.-ordered {
|
|
3752
|
-
counter-increment:
|
|
3819
|
+
counter-increment: cnt1725971545380 1;
|
|
3753
3820
|
}
|
|
3754
3821
|
.-ordered::before {
|
|
3755
3822
|
position: absolute;
|
|
@@ -3765,7 +3832,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3765
3832
|
letter-spacing: .0125em;
|
|
3766
3833
|
--tw-text-opacity: 1;
|
|
3767
3834
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3768
|
-
content: counter(
|
|
3835
|
+
content: counter(cnt1725971545380);
|
|
3769
3836
|
}
|
|
3770
3837
|
/*! ****************************/
|
|
3771
3838
|
/*! DataPolicy stuff */
|
|
@@ -5790,6 +5857,49 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
5790
5857
|
--tw-text-opacity: 1;
|
|
5791
5858
|
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
|
5792
5859
|
}
|
|
5860
|
+
.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-x-0 {
|
|
5861
|
+
--tw-translate-x: 0px;
|
|
5862
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5863
|
+
}
|
|
5864
|
+
.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-x-0 {
|
|
5865
|
+
--tw-translate-x: 0px;
|
|
5866
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5867
|
+
}
|
|
5868
|
+
.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-y-3 {
|
|
5869
|
+
--tw-translate-y: 0.75rem;
|
|
5870
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5871
|
+
}
|
|
5872
|
+
.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-y-3 {
|
|
5873
|
+
--tw-translate-y: 0.75rem;
|
|
5874
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5875
|
+
}
|
|
5876
|
+
.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:scale-100 {
|
|
5877
|
+
--tw-scale-x: 1;
|
|
5878
|
+
--tw-scale-y: 1;
|
|
5879
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5880
|
+
}
|
|
5881
|
+
.peer:placeholder-shown ~ .peer-placeholder-shown\:scale-100 {
|
|
5882
|
+
--tw-scale-x: 1;
|
|
5883
|
+
--tw-scale-y: 1;
|
|
5884
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5885
|
+
}
|
|
5886
|
+
.peer:focus ~ .peer-focus\:-translate-y-0 {
|
|
5887
|
+
--tw-translate-y: -0px;
|
|
5888
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5889
|
+
}
|
|
5890
|
+
.peer:focus ~ .peer-focus\:translate-x-0 {
|
|
5891
|
+
--tw-translate-x: 0px;
|
|
5892
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5893
|
+
}
|
|
5894
|
+
.peer:focus ~ .peer-focus\:scale-75 {
|
|
5895
|
+
--tw-scale-x: .75;
|
|
5896
|
+
--tw-scale-y: .75;
|
|
5897
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
5898
|
+
}
|
|
5899
|
+
.peer:focus ~ .peer-focus\:text-blue-500 {
|
|
5900
|
+
--tw-text-opacity: 1;
|
|
5901
|
+
color: rgba(59, 130, 246, var(--tw-text-opacity));
|
|
5902
|
+
}
|
|
5793
5903
|
.aria-hidden\:hidden[aria-hidden="true"] {
|
|
5794
5904
|
display: none;
|
|
5795
5905
|
}
|
|
@@ -6399,6 +6509,16 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6399
6509
|
column-gap: 0.5rem;
|
|
6400
6510
|
}
|
|
6401
6511
|
|
|
6512
|
+
.sm\:rounded-br-hr {
|
|
6513
|
+
border-bottom-right-radius: 0px;
|
|
6514
|
+
border-bottom-right-radius: var(--border-radius-hr);
|
|
6515
|
+
}
|
|
6516
|
+
|
|
6517
|
+
.sm\:rounded-tl-hr {
|
|
6518
|
+
border-top-left-radius: 0px;
|
|
6519
|
+
border-top-left-radius: var(--border-radius-hr);
|
|
6520
|
+
}
|
|
6521
|
+
|
|
6402
6522
|
.sm\:bg-transparent {
|
|
6403
6523
|
background-color: transparent;
|
|
6404
6524
|
}
|
|
@@ -6427,6 +6547,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6427
6547
|
padding-right: 2.875rem;
|
|
6428
6548
|
}
|
|
6429
6549
|
|
|
6550
|
+
.sm\:px-13 {
|
|
6551
|
+
padding-left: 3.25rem;
|
|
6552
|
+
padding-right: 3.25rem;
|
|
6553
|
+
}
|
|
6554
|
+
|
|
6430
6555
|
.sm\:px-4 {
|
|
6431
6556
|
padding-left: 1rem;
|
|
6432
6557
|
padding-right: 1rem;
|
|
@@ -6480,6 +6605,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6480
6605
|
padding-top: 0px;
|
|
6481
6606
|
}
|
|
6482
6607
|
|
|
6608
|
+
.sm\:pt-12 {
|
|
6609
|
+
padding-top: 3rem;
|
|
6610
|
+
}
|
|
6611
|
+
|
|
6483
6612
|
.sm\:pt-2 {
|
|
6484
6613
|
padding-top: 0.5rem;
|
|
6485
6614
|
}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{{> components/content/copytext/components/map }}
|
|
23
23
|
{{/if~}}
|
|
24
24
|
{{~#if this.isWebForm}}
|
|
25
|
-
{{> components/
|
|
25
|
+
{{> components/forms/webform }}
|
|
26
26
|
{{/if~}}
|
|
27
27
|
{{~#if this.isNewsletter}}
|
|
28
28
|
{{> components/content/copytext/components/newsletter }}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{{#each this.fields}}
|
|
2
|
+
{{#if this.type.isGroup}}
|
|
3
|
+
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<div class="c-form__row -hasLegend">
|
|
6
|
+
<fieldset class="c-form__field-set">
|
|
7
|
+
<legend class="c-form__legend">{{this.caption}}</legend>
|
|
8
|
+
</fieldset>
|
|
9
|
+
{{~> modules/forms/fields}}
|
|
10
|
+
</div>
|
|
11
|
+
{{else}}
|
|
12
|
+
<div class="c-form__row -expanded">
|
|
13
|
+
{{~> modules/forms/fields}}
|
|
14
|
+
</div>
|
|
15
|
+
{{/if}}
|
|
16
|
+
|
|
17
|
+
{{else}}
|
|
18
|
+
|
|
19
|
+
<div class="c-form__row js-wrapper-{{this.name}}">
|
|
20
|
+
{{#if this.type.isTextarea}}
|
|
21
|
+
{{~> modules/forms/textarea
|
|
22
|
+
_name=this.name
|
|
23
|
+
_label=this.label
|
|
24
|
+
_labelClass="hide"
|
|
25
|
+
_description=this.description
|
|
26
|
+
_defaultValue=this.defaultValue
|
|
27
|
+
_counter=this.counter
|
|
28
|
+
_rows=this.rows
|
|
29
|
+
_cols=this.columns
|
|
30
|
+
_required=this.isRequired
|
|
31
|
+
_maxLength=this.maxLength
|
|
32
|
+
}}
|
|
33
|
+
{{else if this.type.isText}}
|
|
34
|
+
{{~> components/forms/input_single_line
|
|
35
|
+
_type=this.type.asString
|
|
36
|
+
_name=this.name
|
|
37
|
+
_label=this.label
|
|
38
|
+
_labelClass="hide"
|
|
39
|
+
_description=this.description
|
|
40
|
+
_defaultValue=this.defaultValue
|
|
41
|
+
_inputClass=(if this.isHidden "hide")
|
|
42
|
+
_tabindex=(if this.isHidden "-1")
|
|
43
|
+
_required=this.isRequired
|
|
44
|
+
_maxLength=this.maxLength
|
|
45
|
+
_errorMessage="Bitte füllen Sie diese Pflichtfeld aus"
|
|
46
|
+
}}
|
|
47
|
+
{{else if this.type.isSelect}}
|
|
48
|
+
{{~> modules/forms/select
|
|
49
|
+
_name=this.name
|
|
50
|
+
_label=this.label
|
|
51
|
+
_labelClass="hide"
|
|
52
|
+
_description=this.description
|
|
53
|
+
_items=this.options
|
|
54
|
+
_required=this.isRequired
|
|
55
|
+
}}
|
|
56
|
+
{{else if this.type.isChoice}}
|
|
57
|
+
{{#if this.isGrouped }}
|
|
58
|
+
{{~> modules/forms/choiceGroup
|
|
59
|
+
_type=this.type.asString
|
|
60
|
+
_name=this.name
|
|
61
|
+
_label=this.label
|
|
62
|
+
_description=this.description
|
|
63
|
+
_items=this.options
|
|
64
|
+
_required=this.isRequired
|
|
65
|
+
_multipleChoice=../_multipleChoice
|
|
66
|
+
_addClass=../_addClass
|
|
67
|
+
|
|
68
|
+
}}
|
|
69
|
+
{{else}}
|
|
70
|
+
{{~> modules/forms/choice
|
|
71
|
+
_type=this.type.asString
|
|
72
|
+
_name=this.name
|
|
73
|
+
_label=this.label
|
|
74
|
+
_labelClass=(if this.isMeta "-meta")
|
|
75
|
+
_description=this.description
|
|
76
|
+
_value=this.options.[0].value
|
|
77
|
+
_required=this.isRequired
|
|
78
|
+
_selected= this.options.[0].isSelected
|
|
79
|
+
}}
|
|
80
|
+
{{/if}}
|
|
81
|
+
{{else if this.type.isUpload}}
|
|
82
|
+
{{~> modules/forms/upload
|
|
83
|
+
_name=this.name
|
|
84
|
+
_label=this.label
|
|
85
|
+
_description=this.description
|
|
86
|
+
_multiple=false
|
|
87
|
+
_required=this.isRequired
|
|
88
|
+
_locaKeyButton="uploadForm_label_file_button"
|
|
89
|
+
}}
|
|
90
|
+
{{/if}}
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
{{/if}}
|
|
94
|
+
|
|
95
|
+
{{/each}}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
|
|
2
|
+
<input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none"
|
|
3
|
+
x-model="input{{getRandom}}"
|
|
4
|
+
id="input{{getRandom}}"
|
|
5
|
+
{{#if _required}}
|
|
6
|
+
@blur="wasFocused = true;"
|
|
7
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
8
|
+
{{/if}}
|
|
9
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
10
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
|
+
{{#if _locaKey}}
|
|
12
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
13
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
14
|
+
{{else}}
|
|
15
|
+
{{#if _label}}
|
|
16
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
17
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
18
|
+
{{/if}}
|
|
19
|
+
{{/if}}
|
|
20
|
+
{{#if _formField.forHtmlAttribute}}
|
|
21
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
22
|
+
{{else}}
|
|
23
|
+
{{#if _value}}
|
|
24
|
+
value="{{_value}}"
|
|
25
|
+
{{else}}
|
|
26
|
+
value="{{_defaultValue}}"
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/if}}
|
|
29
|
+
{{#if _maxLength}}
|
|
30
|
+
maxlength="{{_maxLength}}"
|
|
31
|
+
{{/if~}}
|
|
32
|
+
{{#if _required}} required{{/if}}
|
|
33
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
34
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
35
|
+
{{#if _autoSuggestFeature}}
|
|
36
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
37
|
+
>
|
|
38
|
+
<div class="hidden">
|
|
39
|
+
<div>DEBUGG</div>
|
|
40
|
+
<div>wasFocused:<span x-text="wasFocused"></span></div>
|
|
41
|
+
<div>valid:<span x-text="valid"></span></div>
|
|
42
|
+
<div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
|
|
43
|
+
</div>
|
|
44
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
45
|
+
|
|
46
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
47
|
+
|
|
48
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
49
|
+
{{#if _hasBody}}
|
|
50
|
+
{{decorator_body}}
|
|
51
|
+
{{else}}
|
|
52
|
+
{{#if _locaKey}}
|
|
53
|
+
{{loca _locaKey}}
|
|
54
|
+
{{else}}
|
|
55
|
+
{{#if _label}}
|
|
56
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
57
|
+
{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
{{/if}}
|
|
60
|
+
</label>
|
|
61
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
62
|
+
{{#if _description}}
|
|
63
|
+
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
|
|
64
|
+
{{/if}}
|
|
65
|
+
{{#if _required}}
|
|
66
|
+
<div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
|
|
67
|
+
{{/if}}
|
|
68
|
+
{{#if _maxLength}}
|
|
69
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
70
|
+
{{/if~}}
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
{{~#if (isStorybook)~}}
|
|
2
|
+
{{#>components/forms/backgroundBox }}
|
|
3
|
+
<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" >
|
|
4
|
+
{{> components/forms/fields }}
|
|
5
|
+
</form>
|
|
6
|
+
{{/components/forms/backgroundBox }}
|
|
7
|
+
{{~else~}}
|
|
8
|
+
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
9
|
+
{{~/if~}}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{{> components/content/copytext/components/map }}
|
|
23
23
|
{{/if~}}
|
|
24
24
|
{{~#if this.isWebForm}}
|
|
25
|
-
{{> components/
|
|
25
|
+
{{> components/forms/webform }}
|
|
26
26
|
{{/if~}}
|
|
27
27
|
{{~#if this.isNewsletter}}
|
|
28
28
|
{{> components/content/copytext/components/newsletter }}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{{#each this.fields}}
|
|
2
|
+
{{#if this.type.isGroup}}
|
|
3
|
+
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<div class="c-form__row -hasLegend">
|
|
6
|
+
<fieldset class="c-form__field-set">
|
|
7
|
+
<legend class="c-form__legend">{{this.caption}}</legend>
|
|
8
|
+
</fieldset>
|
|
9
|
+
{{~> modules/forms/fields}}
|
|
10
|
+
</div>
|
|
11
|
+
{{else}}
|
|
12
|
+
<div class="c-form__row -expanded">
|
|
13
|
+
{{~> modules/forms/fields}}
|
|
14
|
+
</div>
|
|
15
|
+
{{/if}}
|
|
16
|
+
|
|
17
|
+
{{else}}
|
|
18
|
+
|
|
19
|
+
<div class="c-form__row js-wrapper-{{this.name}}">
|
|
20
|
+
{{#if this.type.isTextarea}}
|
|
21
|
+
{{~> modules/forms/textarea
|
|
22
|
+
_name=this.name
|
|
23
|
+
_label=this.label
|
|
24
|
+
_labelClass="hide"
|
|
25
|
+
_description=this.description
|
|
26
|
+
_defaultValue=this.defaultValue
|
|
27
|
+
_counter=this.counter
|
|
28
|
+
_rows=this.rows
|
|
29
|
+
_cols=this.columns
|
|
30
|
+
_required=this.isRequired
|
|
31
|
+
_maxLength=this.maxLength
|
|
32
|
+
}}
|
|
33
|
+
{{else if this.type.isText}}
|
|
34
|
+
{{~> components/forms/input_single_line
|
|
35
|
+
_type=this.type.asString
|
|
36
|
+
_name=this.name
|
|
37
|
+
_label=this.label
|
|
38
|
+
_labelClass="hide"
|
|
39
|
+
_description=this.description
|
|
40
|
+
_defaultValue=this.defaultValue
|
|
41
|
+
_inputClass=(if this.isHidden "hide")
|
|
42
|
+
_tabindex=(if this.isHidden "-1")
|
|
43
|
+
_required=this.isRequired
|
|
44
|
+
_maxLength=this.maxLength
|
|
45
|
+
_errorMessage="Bitte füllen Sie diese Pflichtfeld aus"
|
|
46
|
+
}}
|
|
47
|
+
{{else if this.type.isSelect}}
|
|
48
|
+
{{~> modules/forms/select
|
|
49
|
+
_name=this.name
|
|
50
|
+
_label=this.label
|
|
51
|
+
_labelClass="hide"
|
|
52
|
+
_description=this.description
|
|
53
|
+
_items=this.options
|
|
54
|
+
_required=this.isRequired
|
|
55
|
+
}}
|
|
56
|
+
{{else if this.type.isChoice}}
|
|
57
|
+
{{#if this.isGrouped }}
|
|
58
|
+
{{~> modules/forms/choiceGroup
|
|
59
|
+
_type=this.type.asString
|
|
60
|
+
_name=this.name
|
|
61
|
+
_label=this.label
|
|
62
|
+
_description=this.description
|
|
63
|
+
_items=this.options
|
|
64
|
+
_required=this.isRequired
|
|
65
|
+
_multipleChoice=../_multipleChoice
|
|
66
|
+
_addClass=../_addClass
|
|
67
|
+
|
|
68
|
+
}}
|
|
69
|
+
{{else}}
|
|
70
|
+
{{~> modules/forms/choice
|
|
71
|
+
_type=this.type.asString
|
|
72
|
+
_name=this.name
|
|
73
|
+
_label=this.label
|
|
74
|
+
_labelClass=(if this.isMeta "-meta")
|
|
75
|
+
_description=this.description
|
|
76
|
+
_value=this.options.[0].value
|
|
77
|
+
_required=this.isRequired
|
|
78
|
+
_selected= this.options.[0].isSelected
|
|
79
|
+
}}
|
|
80
|
+
{{/if}}
|
|
81
|
+
{{else if this.type.isUpload}}
|
|
82
|
+
{{~> modules/forms/upload
|
|
83
|
+
_name=this.name
|
|
84
|
+
_label=this.label
|
|
85
|
+
_description=this.description
|
|
86
|
+
_multiple=false
|
|
87
|
+
_required=this.isRequired
|
|
88
|
+
_locaKeyButton="uploadForm_label_file_button"
|
|
89
|
+
}}
|
|
90
|
+
{{/if}}
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
{{/if}}
|
|
94
|
+
|
|
95
|
+
{{/each}}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
|
|
2
|
+
<input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none"
|
|
3
|
+
x-model="input{{getRandom}}"
|
|
4
|
+
id="input{{getRandom}}"
|
|
5
|
+
{{#if _required}}
|
|
6
|
+
@blur="wasFocused = true;"
|
|
7
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
8
|
+
{{/if}}
|
|
9
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
10
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
|
+
{{#if _locaKey}}
|
|
12
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
13
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
14
|
+
{{else}}
|
|
15
|
+
{{#if _label}}
|
|
16
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
17
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
18
|
+
{{/if}}
|
|
19
|
+
{{/if}}
|
|
20
|
+
{{#if _formField.forHtmlAttribute}}
|
|
21
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
22
|
+
{{else}}
|
|
23
|
+
{{#if _value}}
|
|
24
|
+
value="{{_value}}"
|
|
25
|
+
{{else}}
|
|
26
|
+
value="{{_defaultValue}}"
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/if}}
|
|
29
|
+
{{#if _maxLength}}
|
|
30
|
+
maxlength="{{_maxLength}}"
|
|
31
|
+
{{/if~}}
|
|
32
|
+
{{#if _required}} required{{/if}}
|
|
33
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
34
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
35
|
+
{{#if _autoSuggestFeature}}
|
|
36
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
37
|
+
>
|
|
38
|
+
<div class="hidden">
|
|
39
|
+
<div>DEBUGG</div>
|
|
40
|
+
<div>wasFocused:<span x-text="wasFocused"></span></div>
|
|
41
|
+
<div>valid:<span x-text="valid"></span></div>
|
|
42
|
+
<div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
|
|
43
|
+
</div>
|
|
44
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
45
|
+
|
|
46
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
47
|
+
|
|
48
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
49
|
+
{{#if _hasBody}}
|
|
50
|
+
{{decorator_body}}
|
|
51
|
+
{{else}}
|
|
52
|
+
{{#if _locaKey}}
|
|
53
|
+
{{loca _locaKey}}
|
|
54
|
+
{{else}}
|
|
55
|
+
{{#if _label}}
|
|
56
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
57
|
+
{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
{{/if}}
|
|
60
|
+
</label>
|
|
61
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
62
|
+
{{#if _description}}
|
|
63
|
+
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
|
|
64
|
+
{{/if}}
|
|
65
|
+
{{#if _required}}
|
|
66
|
+
<div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
|
|
67
|
+
{{/if}}
|
|
68
|
+
{{#if _maxLength}}
|
|
69
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
70
|
+
{{/if~}}
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
{{~#if (isStorybook)~}}
|
|
2
|
+
{{#>components/forms/backgroundBox }}
|
|
3
|
+
<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" >
|
|
4
|
+
{{> components/forms/fields }}
|
|
5
|
+
</form>
|
|
6
|
+
{{/components/forms/backgroundBox }}
|
|
7
|
+
{{~else~}}
|
|
8
|
+
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
9
|
+
{{~/if~}}
|
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.100.
|
|
9
|
+
"version": "1.100.2",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
"async-alpine": "^1.0.0",
|
|
123
123
|
"checkcss": "^2.0.9",
|
|
124
124
|
"dialog-polyfill": "^0.5.6",
|
|
125
|
+
"storybook-addon-pseudo-states": "^4.0.2",
|
|
125
126
|
"tailwindcss-counter": "^1.1.3"
|
|
126
127
|
},
|
|
127
128
|
"prettier": {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"copytextParagraph": [
|
|
3
|
+
{
|
|
4
|
+
"isHeadline": true,
|
|
5
|
+
"text": "Copytext mit Formular"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"paragraphBoxItem": {
|
|
9
|
+
"isWebForm": true,
|
|
10
|
+
"fields":[
|
|
11
|
+
{
|
|
12
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
13
|
+
"@->contentpath": "input-text-vorname"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
17
|
+
"@->contentpath": "input-text-nachname"
|
|
18
|
+
}
|
|
19
|
+
]
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
]
|
|
24
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"input-text-vorname":
|
|
3
|
+
{
|
|
4
|
+
"type":{
|
|
5
|
+
"isText":true,
|
|
6
|
+
"asString":"text"
|
|
7
|
+
},
|
|
8
|
+
"name":"vorname",
|
|
9
|
+
"label":"Vorname",
|
|
10
|
+
"description":"Das ist der Beschreibungstext von Vorname",
|
|
11
|
+
"defaultValue":"",
|
|
12
|
+
"isHidden":false,
|
|
13
|
+
"isRequired":false
|
|
14
|
+
|
|
15
|
+
},
|
|
16
|
+
"input-text-vorname-required":
|
|
17
|
+
{
|
|
18
|
+
"type":{
|
|
19
|
+
"isText":true,
|
|
20
|
+
"asString":"text"
|
|
21
|
+
},
|
|
22
|
+
"name":"vorname",
|
|
23
|
+
"label":"Vorname",
|
|
24
|
+
"description":"",
|
|
25
|
+
"defaultValue":"",
|
|
26
|
+
"isHidden":false,
|
|
27
|
+
"isRequired":true,
|
|
28
|
+
"maxLength":"20"
|
|
29
|
+
},
|
|
30
|
+
"input-text-nachname":
|
|
31
|
+
{
|
|
32
|
+
"type":{
|
|
33
|
+
"isText":true,
|
|
34
|
+
"asString":"text"
|
|
35
|
+
},
|
|
36
|
+
"name":"nachname",
|
|
37
|
+
"label":"Nachname",
|
|
38
|
+
"description":"Das ist der Beschreibungstext von Nachname",
|
|
39
|
+
"defaultValue":"",
|
|
40
|
+
"isHidden":false,
|
|
41
|
+
"isRequired":true,
|
|
42
|
+
"maxLength":"140"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"fields":[
|
|
3
|
+
{
|
|
4
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
5
|
+
"@->contentpath": "input-text-vorname"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
9
|
+
"@->contentpath": "input-text-vorname-required"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"@->jsoninclude": "forms/form_fields.inc.json",
|
|
13
|
+
"@->contentpath": "input-text-nachname"
|
|
14
|
+
}
|
|
15
|
+
]
|
|
16
|
+
}
|
package/src/stories/views/components/content/copytext/components/form/fixtures/form_input.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"fields":[{"type":{"isText":true,"asString":"text"},"name":"name","label":"Name","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}
|
|
@@ -17,6 +17,7 @@ import copytext_video_json from './fixtures/copytext_video.json'
|
|
|
17
17
|
import copytext_audio_json from './fixtures/copytext_audio.json'
|
|
18
18
|
import copytext_audio_event_stream_json from './fixtures/copytext_audio_livestream.json'
|
|
19
19
|
import copytext_livestream_json from './fixtures/copytext_livestream.json'
|
|
20
|
+
import copytext_webform_json from './fixtures/copytext_webform.json'
|
|
20
21
|
|
|
21
22
|
const Template = ({ ...args }) => {
|
|
22
23
|
return copytext({ ...args })
|
|
@@ -66,6 +67,12 @@ export const WithFiledownload = {
|
|
|
66
67
|
args: copytext_filedownload_json,
|
|
67
68
|
}
|
|
68
69
|
|
|
70
|
+
export const WithWebform = {
|
|
71
|
+
render: Template.bind({}),
|
|
72
|
+
name: 'Formular',
|
|
73
|
+
args: copytext_webform_json,
|
|
74
|
+
}
|
|
75
|
+
|
|
69
76
|
export const WithImage = {
|
|
70
77
|
render: Template.bind({}),
|
|
71
78
|
name: 'Image',
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
{{> components/content/copytext/components/map }}
|
|
23
23
|
{{/if~}}
|
|
24
24
|
{{~#if this.isWebForm}}
|
|
25
|
-
{{> components/
|
|
25
|
+
{{> components/forms/webform }}
|
|
26
26
|
{{/if~}}
|
|
27
27
|
{{~#if this.isNewsletter}}
|
|
28
28
|
{{> components/content/copytext/components/newsletter }}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"Das ist der Beschreibungstext von Nachname","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}}]}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{{#each this.fields}}
|
|
2
|
+
{{#if this.type.isGroup}}
|
|
3
|
+
|
|
4
|
+
{{#if this.caption}}
|
|
5
|
+
<div class="c-form__row -hasLegend">
|
|
6
|
+
<fieldset class="c-form__field-set">
|
|
7
|
+
<legend class="c-form__legend">{{this.caption}}</legend>
|
|
8
|
+
</fieldset>
|
|
9
|
+
{{~> modules/forms/fields}}
|
|
10
|
+
</div>
|
|
11
|
+
{{else}}
|
|
12
|
+
<div class="c-form__row -expanded">
|
|
13
|
+
{{~> modules/forms/fields}}
|
|
14
|
+
</div>
|
|
15
|
+
{{/if}}
|
|
16
|
+
|
|
17
|
+
{{else}}
|
|
18
|
+
|
|
19
|
+
<div class="c-form__row js-wrapper-{{this.name}}">
|
|
20
|
+
{{#if this.type.isTextarea}}
|
|
21
|
+
{{~> modules/forms/textarea
|
|
22
|
+
_name=this.name
|
|
23
|
+
_label=this.label
|
|
24
|
+
_labelClass="hide"
|
|
25
|
+
_description=this.description
|
|
26
|
+
_defaultValue=this.defaultValue
|
|
27
|
+
_counter=this.counter
|
|
28
|
+
_rows=this.rows
|
|
29
|
+
_cols=this.columns
|
|
30
|
+
_required=this.isRequired
|
|
31
|
+
_maxLength=this.maxLength
|
|
32
|
+
}}
|
|
33
|
+
{{else if this.type.isText}}
|
|
34
|
+
{{~> components/forms/input_single_line
|
|
35
|
+
_type=this.type.asString
|
|
36
|
+
_name=this.name
|
|
37
|
+
_label=this.label
|
|
38
|
+
_labelClass="hide"
|
|
39
|
+
_description=this.description
|
|
40
|
+
_defaultValue=this.defaultValue
|
|
41
|
+
_inputClass=(if this.isHidden "hide")
|
|
42
|
+
_tabindex=(if this.isHidden "-1")
|
|
43
|
+
_required=this.isRequired
|
|
44
|
+
_maxLength=this.maxLength
|
|
45
|
+
_errorMessage="Bitte füllen Sie diese Pflichtfeld aus"
|
|
46
|
+
}}
|
|
47
|
+
{{else if this.type.isSelect}}
|
|
48
|
+
{{~> modules/forms/select
|
|
49
|
+
_name=this.name
|
|
50
|
+
_label=this.label
|
|
51
|
+
_labelClass="hide"
|
|
52
|
+
_description=this.description
|
|
53
|
+
_items=this.options
|
|
54
|
+
_required=this.isRequired
|
|
55
|
+
}}
|
|
56
|
+
{{else if this.type.isChoice}}
|
|
57
|
+
{{#if this.isGrouped }}
|
|
58
|
+
{{~> modules/forms/choiceGroup
|
|
59
|
+
_type=this.type.asString
|
|
60
|
+
_name=this.name
|
|
61
|
+
_label=this.label
|
|
62
|
+
_description=this.description
|
|
63
|
+
_items=this.options
|
|
64
|
+
_required=this.isRequired
|
|
65
|
+
_multipleChoice=../_multipleChoice
|
|
66
|
+
_addClass=../_addClass
|
|
67
|
+
|
|
68
|
+
}}
|
|
69
|
+
{{else}}
|
|
70
|
+
{{~> modules/forms/choice
|
|
71
|
+
_type=this.type.asString
|
|
72
|
+
_name=this.name
|
|
73
|
+
_label=this.label
|
|
74
|
+
_labelClass=(if this.isMeta "-meta")
|
|
75
|
+
_description=this.description
|
|
76
|
+
_value=this.options.[0].value
|
|
77
|
+
_required=this.isRequired
|
|
78
|
+
_selected= this.options.[0].isSelected
|
|
79
|
+
}}
|
|
80
|
+
{{/if}}
|
|
81
|
+
{{else if this.type.isUpload}}
|
|
82
|
+
{{~> modules/forms/upload
|
|
83
|
+
_name=this.name
|
|
84
|
+
_label=this.label
|
|
85
|
+
_description=this.description
|
|
86
|
+
_multiple=false
|
|
87
|
+
_required=this.isRequired
|
|
88
|
+
_locaKeyButton="uploadForm_label_file_button"
|
|
89
|
+
}}
|
|
90
|
+
{{/if}}
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
{{/if}}
|
|
94
|
+
|
|
95
|
+
{{/each}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"20"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"Das ist der Beschreibungstext von Nachname","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"}]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
|
+
import * as formStories from './form.stories'
|
|
3
|
+
|
|
4
|
+
<Meta of={formStories} />
|
|
5
|
+
|
|
6
|
+
# Formular
|
|
7
|
+
|
|
8
|
+
## Beschreibung
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## Parameter
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<ArgTypes story="default" />
|
|
15
|
+
|
|
16
|
+
## Verwendung
|
|
17
|
+
|
|
18
|
+
Das Formular wird in handlebars wie folgt eingebaut:
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
{{> components/forms/form }}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
<Canvas withToolbar>
|
|
25
|
+
<Story of={formStories.Default} />
|
|
26
|
+
</Canvas>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
|
|
2
|
+
import inputJson from './fixtures/form_input.json'
|
|
3
|
+
const handlebars = require('hrHandlebars')
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Komponenten/Formulare/Input',
|
|
8
|
+
decorators: [
|
|
9
|
+
(Story) => {
|
|
10
|
+
return `<div class="grid grid-page">
|
|
11
|
+
<div class="grid bg-white grid-article">
|
|
12
|
+
${Story()}
|
|
13
|
+
</div>
|
|
14
|
+
</div>`
|
|
15
|
+
},
|
|
16
|
+
],
|
|
17
|
+
}
|
|
18
|
+
const Template = (args) => {
|
|
19
|
+
let hbsTemplate = handlebars.compile(`
|
|
20
|
+
{{#>components/forms/backgroundBox }}
|
|
21
|
+
<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" >
|
|
22
|
+
{{> components/forms/fields }}
|
|
23
|
+
</form>
|
|
24
|
+
{{/components/forms/backgroundBox }}
|
|
25
|
+
`)
|
|
26
|
+
return hbsTemplate({ ...args })
|
|
27
|
+
}
|
|
28
|
+
export const Input = {
|
|
29
|
+
render: Template.bind({}),
|
|
30
|
+
name: 'Input - Einzeiliger Text',
|
|
31
|
+
args: inputJson,
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export const InputFocused = {
|
|
35
|
+
render: Template.bind({}),
|
|
36
|
+
name: 'Input - Einzeiliger Text Focus',
|
|
37
|
+
args: inputJson,
|
|
38
|
+
parameters: {
|
|
39
|
+
pseudo: {
|
|
40
|
+
focus: ["input"],
|
|
41
|
+
|
|
42
|
+
},
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '' , valid: false, wasFocused: false}">
|
|
2
|
+
<input class="relative w-full h-12 px-4 pt-4 text-gray-800 placeholder-transparent bg-white border-blue-500 peer border-y border-t-transparent focus:outline-none"
|
|
3
|
+
x-model="input{{getRandom}}"
|
|
4
|
+
id="input{{getRandom}}"
|
|
5
|
+
{{#if _required}}
|
|
6
|
+
@blur="wasFocused = true;"
|
|
7
|
+
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
|
|
8
|
+
{{/if}}
|
|
9
|
+
type="{{#if _type}}{{_type}}{{/if}}"
|
|
10
|
+
name="{{#if _name}}{{_name}}{{/if}}"
|
|
11
|
+
{{#if _locaKey}}
|
|
12
|
+
title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
13
|
+
placeholder="placeholder:{{loca _locaKey}}{{#if _required}}*{{/if}}"
|
|
14
|
+
{{else}}
|
|
15
|
+
{{#if _label}}
|
|
16
|
+
title="{{_label}}{{#if _required}}*{{/if}}"
|
|
17
|
+
placeholder="placeholder:{{_label}}{{#if _required}}*{{/if}}"
|
|
18
|
+
{{/if}}
|
|
19
|
+
{{/if}}
|
|
20
|
+
{{#if _formField.forHtmlAttribute}}
|
|
21
|
+
value="{{_formField.forHtmlAttribute}}"
|
|
22
|
+
{{else}}
|
|
23
|
+
{{#if _value}}
|
|
24
|
+
value="{{_value}}"
|
|
25
|
+
{{else}}
|
|
26
|
+
value="{{_defaultValue}}"
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/if}}
|
|
29
|
+
{{#if _maxLength}}
|
|
30
|
+
maxlength="{{_maxLength}}"
|
|
31
|
+
{{/if~}}
|
|
32
|
+
{{#if _required}} required{{/if}}
|
|
33
|
+
{{#if _tabindex}} tabindex="{{_tabindex}}"{{/if}}
|
|
34
|
+
{{#if _autocompleteOff}} autocomplete="off"{{/if}}
|
|
35
|
+
{{#if _autoSuggestFeature}}
|
|
36
|
+
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
37
|
+
>
|
|
38
|
+
<div class="hidden">
|
|
39
|
+
<div>DEBUGG</div>
|
|
40
|
+
<div>wasFocused:<span x-text="wasFocused"></span></div>
|
|
41
|
+
<div>valid:<span x-text="valid"></span></div>
|
|
42
|
+
<div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
|
|
43
|
+
</div>
|
|
44
|
+
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
45
|
+
|
|
46
|
+
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
47
|
+
|
|
48
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-blue-500 origin-top-left transform transition-transform">
|
|
49
|
+
{{#if _hasBody}}
|
|
50
|
+
{{decorator_body}}
|
|
51
|
+
{{else}}
|
|
52
|
+
{{#if _locaKey}}
|
|
53
|
+
{{loca _locaKey}}
|
|
54
|
+
{{else}}
|
|
55
|
+
{{#if _label}}
|
|
56
|
+
{{{_label}}}{{#if _required}}*{{/if}}
|
|
57
|
+
{{/if}}
|
|
58
|
+
{{/if}}
|
|
59
|
+
{{/if}}
|
|
60
|
+
</label>
|
|
61
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
62
|
+
{{#if _description}}
|
|
63
|
+
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
|
|
64
|
+
{{/if}}
|
|
65
|
+
{{#if _required}}
|
|
66
|
+
<div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
|
|
67
|
+
{{/if}}
|
|
68
|
+
{{#if _maxLength}}
|
|
69
|
+
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
70
|
+
{{/if~}}
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
{{~#if (isStorybook)~}}
|
|
2
|
+
{{#>components/forms/backgroundBox }}
|
|
3
|
+
<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" >
|
|
4
|
+
{{> components/forms/fields }}
|
|
5
|
+
</form>
|
|
6
|
+
{{/components/forms/backgroundBox }}
|
|
7
|
+
{{~else~}}
|
|
8
|
+
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
9
|
+
{{~/if~}}
|