hr-design-system-handlebars 1.100.1 → 1.100.3

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.
Files changed (31) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +54 -23
  3. package/dist/views/components/forms/backgroundBox.hbs +3 -0
  4. package/dist/views/components/forms/fields.hbs +3 -2
  5. package/dist/views/components/forms/input_single_line.hbs +18 -8
  6. package/dist/views/components/forms/textarea.hbs +76 -0
  7. package/dist/views/components/forms/webform.hbs +5 -16
  8. package/dist/views_static/components/forms/backgroundBox.hbs +3 -0
  9. package/dist/views_static/components/forms/fields.hbs +3 -2
  10. package/dist/views_static/components/forms/input_single_line.hbs +18 -8
  11. package/dist/views_static/components/forms/textarea.hbs +76 -0
  12. package/dist/views_static/components/forms/webform.hbs +5 -16
  13. package/package.json +1 -1
  14. package/src/assets/fixtures/content/copytext/copytext_webform.json +1 -1
  15. package/src/assets/fixtures/forms/form_fields.inc.json +21 -4
  16. package/src/assets/fixtures/forms/form_input.json +0 -8
  17. package/src/assets/fixtures/forms/form_input_mandatory.json +8 -0
  18. package/src/assets/fixtures/forms/form_input_prefilled.json +8 -0
  19. package/src/assets/fixtures/forms/form_textarea.json +18 -0
  20. package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json +1 -1
  21. package/src/stories/views/components/forms/backgroundBox.hbs +3 -0
  22. package/src/stories/views/components/forms/fields.hbs +3 -2
  23. package/src/stories/views/components/forms/fixtures/form_input.json +1 -1
  24. package/src/stories/views/components/forms/fixtures/form_input_mandatory.json +1 -0
  25. package/src/stories/views/components/forms/fixtures/form_input_prefilled.json +1 -0
  26. package/src/stories/views/components/forms/fixtures/form_textarea.json +1 -0
  27. package/src/stories/views/components/forms/form.stories.js +48 -15
  28. package/src/stories/views/components/forms/input_single_line.hbs +18 -8
  29. package/src/stories/views/components/forms/textarea.hbs +76 -0
  30. package/src/stories/views/components/forms/webform.hbs +5 -16
  31. package/tailwind.config.js +3 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v1.100.3 (Wed Sep 11 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - ✨ Mehrzeiliges Textfeld [#1064](https://github.com/mumprod/hr-design-system-handlebars/pull/1064) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
13
+ # v1.100.2 (Tue Sep 10 2024)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - Formularrahmen [#1063](https://github.com/mumprod/hr-design-system-handlebars/pull/1063) ([@vascoeduardo](https://github.com/vascoeduardo))
18
+
19
+ #### Authors: 1
20
+
21
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
22
+
23
+ ---
24
+
1
25
  # v1.100.1 (Mon Sep 09 2024)
2
26
 
3
27
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -459,7 +459,7 @@ video {
459
459
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
460
460
  }
461
461
 
462
- .ds-link-inset, .ds-link-inset:not(:focus-visible), .ring, .ring-1, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
462
+ .ds-link-inset, .ds-link-inset:not(:focus-visible), .ring, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
463
463
  --tw-ring-inset: ;
464
464
  --tw-ring-offset-width: 0px;
465
465
  --tw-ring-offset-color: #fff;
@@ -1136,6 +1136,9 @@ article.indexTextDS .indexTextHighlighted .link {
1136
1136
  .right-0 {
1137
1137
  right: 0px;
1138
1138
  }
1139
+ .right-4 {
1140
+ right: 1rem;
1141
+ }
1139
1142
  .right-\[50px\] {
1140
1143
  right: 50px;
1141
1144
  }
@@ -1700,6 +1703,9 @@ article.indexTextDS .indexTextHighlighted .link {
1700
1703
  .max-h-stage {
1701
1704
  max-height: 34.3125rem;
1702
1705
  }
1706
+ .min-h-12 {
1707
+ min-height: 3rem;
1708
+ }
1703
1709
  .min-h-\[88px\] {
1704
1710
  min-height: 88px;
1705
1711
  }
@@ -2342,6 +2348,14 @@ article.indexTextDS .indexTextHighlighted .link {
2342
2348
  border-color: #005293;
2343
2349
  border-color: var(--color-primary-ds);
2344
2350
  }
2351
+ .border-red-500 {
2352
+ --tw-border-opacity: 1;
2353
+ border-color: rgba(239, 68, 68, var(--tw-border-opacity));
2354
+ }
2355
+ .border-red-700 {
2356
+ --tw-border-opacity: 1;
2357
+ border-color: rgba(185, 28, 28, var(--tw-border-opacity));
2358
+ }
2345
2359
  .border-servicenavigation-border-color {
2346
2360
  border-color: #fff;
2347
2361
  border-color: var(--color-servicenavigation-border-color);
@@ -2636,6 +2650,9 @@ article.indexTextDS .indexTextHighlighted .link {
2636
2650
  fill: #006eb7;
2637
2651
  fill: var(--color-link);
2638
2652
  }
2653
+ .fill-red-700 {
2654
+ fill: #b91c1c;
2655
+ }
2639
2656
  .fill-search {
2640
2657
  fill: #000000;
2641
2658
  fill: var(--search-icon-color);
@@ -2813,6 +2830,9 @@ article.indexTextDS .indexTextHighlighted .link {
2813
2830
  padding-bottom: 16px;
2814
2831
  padding-bottom: var(--footer-padding-bottom);
2815
2832
  }
2833
+ .pb-px {
2834
+ padding-bottom: 1px;
2835
+ }
2816
2836
  .pl-10 {
2817
2837
  padding-left: 2.5rem;
2818
2838
  }
@@ -2855,6 +2875,9 @@ article.indexTextDS .indexTextHighlighted .link {
2855
2875
  .pr-8 {
2856
2876
  padding-right: 2rem;
2857
2877
  }
2878
+ .pr-9 {
2879
+ padding-right: 2.25rem;
2880
+ }
2858
2881
  .pt-0 {
2859
2882
  padding-top: 0px;
2860
2883
  }
@@ -2867,9 +2890,6 @@ article.indexTextDS .indexTextHighlighted .link {
2867
2890
  .pt-1\.5 {
2868
2891
  padding-top: 0.375rem;
2869
2892
  }
2870
- .pt-10 {
2871
- padding-top: 2.5rem;
2872
- }
2873
2893
  .pt-2 {
2874
2894
  padding-top: 0.5rem;
2875
2895
  }
@@ -3306,15 +3326,6 @@ article.indexTextDS .indexTextHighlighted .link {
3306
3326
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
3307
3327
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
3308
3328
  }
3309
- .ring-1 {
3310
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3311
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3312
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
3313
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
3314
- }
3315
- .ring-gray-900\/5 {
3316
- --tw-ring-color: rgba(17, 24, 39, 0.05);
3317
- }
3318
3329
  .ring-podcast {
3319
3330
  --tw-ring-color: var(--color-podcast);
3320
3331
  }
@@ -3420,7 +3431,7 @@ article.indexTextDS .indexTextHighlighted .link {
3420
3431
  border-bottom-color: var(--color-secondary-ds);
3421
3432
  }
3422
3433
  .counter-reset {
3423
- counter-reset: cnt1725891148652;
3434
+ counter-reset: cnt1726067254110;
3424
3435
  }
3425
3436
  .hyphens-auto {
3426
3437
  -webkit-hyphens: auto;
@@ -3828,7 +3839,7 @@ article.indexTextDS .indexTextHighlighted .link {
3828
3839
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3829
3840
  }
3830
3841
  .-ordered {
3831
- counter-increment: cnt1725891148652 1;
3842
+ counter-increment: cnt1726067254110 1;
3832
3843
  }
3833
3844
  .-ordered::before {
3834
3845
  position: absolute;
@@ -3844,7 +3855,7 @@ article.indexTextDS .indexTextHighlighted .link {
3844
3855
  letter-spacing: .0125em;
3845
3856
  --tw-text-opacity: 1;
3846
3857
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3847
- content: counter(cnt1725891148652);
3858
+ content: counter(cnt1726067254110);
3848
3859
  }
3849
3860
  /*! ****************************/
3850
3861
  /*! DataPolicy stuff */
@@ -5787,10 +5798,20 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
5787
5798
  .hover\:\!decoration-1:hover {
5788
5799
  text-decoration-thickness: 1px !important;
5789
5800
  }
5801
+ .focus\:border-y-2:focus {
5802
+ border-top-width: 2px;
5803
+ border-bottom-width: 2px;
5804
+ }
5805
+ .focus\:border-b-2:focus {
5806
+ border-bottom-width: 2px;
5807
+ }
5790
5808
  .focus\:bg-black:focus {
5791
5809
  --tw-bg-opacity: 1;
5792
5810
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
5793
5811
  }
5812
+ .focus\:pb-0:focus {
5813
+ padding-bottom: 0px;
5814
+ }
5794
5815
  .focus\:text-white:focus {
5795
5816
  --tw-text-opacity: 1;
5796
5817
  color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -6521,8 +6542,14 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
6521
6542
  column-gap: 0.5rem;
6522
6543
  }
6523
6544
 
6524
- .sm\:rounded-lg {
6525
- border-radius: 0.5rem;
6545
+ .sm\:rounded-br-hr {
6546
+ border-bottom-right-radius: 0px;
6547
+ border-bottom-right-radius: var(--border-radius-hr);
6548
+ }
6549
+
6550
+ .sm\:rounded-tl-hr {
6551
+ border-top-left-radius: 0px;
6552
+ border-top-left-radius: var(--border-radius-hr);
6526
6553
  }
6527
6554
 
6528
6555
  .sm\:bg-transparent {
@@ -6553,6 +6580,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
6553
6580
  padding-right: 2.875rem;
6554
6581
  }
6555
6582
 
6583
+ .sm\:px-13 {
6584
+ padding-left: 3.25rem;
6585
+ padding-right: 3.25rem;
6586
+ }
6587
+
6556
6588
  .sm\:px-4 {
6557
6589
  padding-left: 1rem;
6558
6590
  padding-right: 1rem;
@@ -6573,11 +6605,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
6573
6605
  padding-right: 2.375rem;
6574
6606
  }
6575
6607
 
6576
- .sm\:py-12 {
6577
- padding-top: 3rem;
6578
- padding-bottom: 3rem;
6579
- }
6580
-
6581
6608
  .sm\:py-4 {
6582
6609
  padding-top: 1rem;
6583
6610
  padding-bottom: 1rem;
@@ -6611,6 +6638,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
6611
6638
  padding-top: 0px;
6612
6639
  }
6613
6640
 
6641
+ .sm\:pt-12 {
6642
+ padding-top: 3rem;
6643
+ }
6644
+
6614
6645
  .sm\:pt-2 {
6615
6646
  padding-top: 0.5rem;
6616
6647
  }
package/dist/views/components/forms/backgroundBox.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <div class="relative px-5 pt-6 pb-8 bg-highlight-1 sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
2
+ {{> @partial-block }}
3
+ </div>
package/dist/views/components/forms/fields.hbs CHANGED
@@ -18,10 +18,9 @@
18
18
 
19
19
  <div class="c-form__row js-wrapper-{{this.name}}">
20
20
  {{#if this.type.isTextarea}}
21
- {{~> modules/forms/textarea
21
+ {{~> components/forms/textarea
22
22
  _name=this.name
23
23
  _label=this.label
24
- _labelClass="hide"
25
24
  _description=this.description
26
25
  _defaultValue=this.defaultValue
27
26
  _counter=this.counter
@@ -29,6 +28,7 @@
29
28
  _cols=this.columns
30
29
  _required=this.isRequired
31
30
  _maxLength=this.maxLength
31
+ _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
32
32
  }}
33
33
  {{else if this.type.isText}}
34
34
  {{~> components/forms/input_single_line
@@ -42,6 +42,7 @@
42
42
  _tabindex=(if this.isHidden "-1")
43
43
  _required=this.isRequired
44
44
  _maxLength=this.maxLength
45
+ _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
45
46
  }}
46
47
  {{else if this.type.isSelect}}
47
48
  {{~> modules/forms/select
package/dist/views/components/forms/input_single_line.hbs CHANGED
@@ -1,9 +1,11 @@
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"
1
+ <div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
2
+ <input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
3
+ :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-700': !valid && wasFocused && !isFocused }"
3
4
  x-model="input{{getRandom}}"
4
5
  id="input{{getRandom}}"
5
6
  {{#if _required}}
6
- @blur="wasFocused = true;"
7
+ @focus="isFocused = true"
8
+ @blur="wasFocused = true; isFocused=false"
7
9
  x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
8
10
  {{/if}}
9
11
  type="{{#if _type}}{{_type}}{{/if}}"
@@ -37,8 +39,9 @@
37
39
  >
38
40
  <div class="hidden">
39
41
  <div>DEBUGG</div>
40
- <div x-text="valid"></div>
41
- <div x-text="input{{getRandom}}.length "></div>
42
+ <div>wasFocused:<span x-text="wasFocused"></span></div>
43
+ <div>valid:<span x-text="valid"></span></div>
44
+ <div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
42
45
  </div>
43
46
  <label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
44
47
 
@@ -57,12 +60,19 @@
57
60
  {{/if}}
58
61
  {{/if}}
59
62
  </label>
60
- <div class="flex justify-between mb-5 min-h-4 font-heading mt-0.5">
63
+ {{#if _required}}
64
+ <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
65
+ <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
66
+ {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
67
+ </div>
68
+ </div>
69
+ {{/if}}
70
+ <div class="flex items-end justify-between h-5 font-heading">
61
71
  {{#if _description}}
62
- <div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused ? 'hidden' : ''"{{/if}}>{{_description}}</div>
72
+ <div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused }"{{/if}}>{{_description}}</div>
63
73
  {{/if}}
64
74
  {{#if _required}}
65
- <div class="pl-4 text-xs font-bold text-red-700 " :class="!valid && wasFocused ? '' : 'hidden'">Fehler</div>
75
+ <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused }" >{{_errorMessage}}</div>
66
76
  {{/if}}
67
77
  {{#if _maxLength}}
68
78
  <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
package/dist/views/components/forms/textarea.hbs ADDED
@@ -0,0 +1,76 @@
1
+ <div class="relative flex flex-col w-full mb-5" x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
2
+ <textarea
3
+ x-model="textarea{{getRandom}}"
4
+ id="textarea{{getRandom}}"
5
+ @focus="isFocused = true"
6
+ @blur="wasFocused = true; isFocused=false"
7
+ x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
8
+ value=""
9
+ name="{{#if _name}}{{_name}}{{/if}}"
10
+ {{#if _locaKey}}
11
+ title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
12
+ placeholder="{{loca _locaKey}}{{#if _required}}*{{/if}}"
13
+ {{else}}
14
+ {{#if _label}}
15
+ title="{{_label}}{{#if _required}} (Pflichtfeld){{/if}}"
16
+ placeholder="{{_label}}{{#if _required}}*{{/if}}"
17
+ {{/if}}
18
+ {{/if}}
19
+ {{#if _rows}}
20
+ rows="{{_rows}}"
21
+ {{/if}}
22
+ {{#if _cols}}
23
+ cols="{{_cols}}"
24
+ {{/if}}
25
+ {{#if _maxLength}}
26
+ maxlength="{{_maxLength}}"
27
+ {{/if~}}
28
+ {{#if _required}}required{{/if}}
29
+ class="relative w-full px-4 pt-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
30
+ :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
31
+ >{{#if _formField.isValid}}
32
+ {{{_formField.forHtmlContent}}}
33
+ {{else}}
34
+ {{#if _value}}
35
+ {{_value}}
36
+ {{else}}
37
+ {{_defaultValue}}
38
+ {{/if}}{{/if}}</textarea>
39
+ <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
40
+
41
+ peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
42
+
43
+ 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">
44
+ {{#if _locaKey}}
45
+ {{loca _locaKey}}
46
+ {{else}}
47
+ {{#if _label}}
48
+ {{{_label}}}{{#if _required}}*{{/if}}
49
+ {{/if}}
50
+ {{/if}}
51
+ </label>
52
+ {{#if _required}}
53
+ <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
54
+ <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
55
+ {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
56
+ </div>
57
+ </div>
58
+ {{/if}}
59
+ <div class="flex items-end justify-between h-5 font-heading">
60
+ {{#if _description}}
61
+ <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
62
+ {{/if}}
63
+ {{#if _required}}
64
+ <div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
65
+ {{/if}}
66
+ {{#if _maxLength}}
67
+ <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
68
+ {{/if~}}
69
+ </div>
70
+ <div class="hidden">
71
+ <div>DEBUGG</div>
72
+ <div>wasFocused:<span x-text="wasFocused"></span></div>
73
+ <div>valid:<span x-text="valid"></span></div>
74
+ <div>input.length:<span x-text="textarea{{getRandom}}.length "></span></div>
75
+ </div>
76
+ </div>
package/dist/views/components/forms/webform.hbs CHANGED
@@ -1,20 +1,9 @@
1
1
  {{~#if (isStorybook)~}}
2
- <form class="relative flex flex-col justify-center py-6 overflow-hidden sm:py-12 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" >
3
-
4
- <div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:max-w-xl sm:rounded-lg sm:px-10">
5
-
6
- {{> components/forms/fields }}
7
-
8
- {{!-- {{~> modules/forms/controls }}
9
-
10
- <script type="text/html" class="js-successMessage">
11
- {{{include "content/webform/components/webform-form-success" }}}
12
- </script>
13
- <script type="text/html" class="js-errorMessage">
14
- {{{include "content/webform/components/webform-form-error" }}}
15
- </script> --}}
16
- </div>
17
- </form>
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 }}
18
7
  {{~else~}}
19
8
  {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
20
9
  {{~/if~}}
package/dist/views_static/components/forms/backgroundBox.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <div class="relative px-5 pt-6 pb-8 bg-highlight-1 sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
2
+ {{> @partial-block }}
3
+ </div>
package/dist/views_static/components/forms/fields.hbs CHANGED
@@ -18,10 +18,9 @@
18
18
 
19
19
  <div class="c-form__row js-wrapper-{{this.name}}">
20
20
  {{#if this.type.isTextarea}}
21
- {{~> modules/forms/textarea
21
+ {{~> components/forms/textarea
22
22
  _name=this.name
23
23
  _label=this.label
24
- _labelClass="hide"
25
24
  _description=this.description
26
25
  _defaultValue=this.defaultValue
27
26
  _counter=this.counter
@@ -29,6 +28,7 @@
29
28
  _cols=this.columns
30
29
  _required=this.isRequired
31
30
  _maxLength=this.maxLength
31
+ _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
32
32
  }}
33
33
  {{else if this.type.isText}}
34
34
  {{~> components/forms/input_single_line
@@ -42,6 +42,7 @@
42
42
  _tabindex=(if this.isHidden "-1")
43
43
  _required=this.isRequired
44
44
  _maxLength=this.maxLength
45
+ _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
45
46
  }}
46
47
  {{else if this.type.isSelect}}
47
48
  {{~> modules/forms/select
package/dist/views_static/components/forms/input_single_line.hbs CHANGED
@@ -1,9 +1,11 @@
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"
1
+ <div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
2
+ <input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
3
+ :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-700': !valid && wasFocused && !isFocused }"
3
4
  x-model="input{{getRandom}}"
4
5
  id="input{{getRandom}}"
5
6
  {{#if _required}}
6
- @blur="wasFocused = true;"
7
+ @focus="isFocused = true"
8
+ @blur="wasFocused = true; isFocused=false"
7
9
  x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
8
10
  {{/if}}
9
11
  type="{{#if _type}}{{_type}}{{/if}}"
@@ -37,8 +39,9 @@
37
39
  >
38
40
  <div class="hidden">
39
41
  <div>DEBUGG</div>
40
- <div x-text="valid"></div>
41
- <div x-text="input{{getRandom}}.length "></div>
42
+ <div>wasFocused:<span x-text="wasFocused"></span></div>
43
+ <div>valid:<span x-text="valid"></span></div>
44
+ <div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
42
45
  </div>
43
46
  <label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
44
47
 
@@ -57,12 +60,19 @@
57
60
  {{/if}}
58
61
  {{/if}}
59
62
  </label>
60
- <div class="flex justify-between mb-5 min-h-4 font-heading mt-0.5">
63
+ {{#if _required}}
64
+ <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
65
+ <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
66
+ {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
67
+ </div>
68
+ </div>
69
+ {{/if}}
70
+ <div class="flex items-end justify-between h-5 font-heading">
61
71
  {{#if _description}}
62
- <div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused ? 'hidden' : ''"{{/if}}>{{_description}}</div>
72
+ <div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused }"{{/if}}>{{_description}}</div>
63
73
  {{/if}}
64
74
  {{#if _required}}
65
- <div class="pl-4 text-xs font-bold text-red-700 " :class="!valid && wasFocused ? '' : 'hidden'">Fehler</div>
75
+ <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused }" >{{_errorMessage}}</div>
66
76
  {{/if}}
67
77
  {{#if _maxLength}}
68
78
  <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
package/dist/views_static/components/forms/textarea.hbs ADDED
@@ -0,0 +1,76 @@
1
+ <div class="relative flex flex-col w-full mb-5" x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
2
+ <textarea
3
+ x-model="textarea{{getRandom}}"
4
+ id="textarea{{getRandom}}"
5
+ @focus="isFocused = true"
6
+ @blur="wasFocused = true; isFocused=false"
7
+ x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
8
+ value=""
9
+ name="{{#if _name}}{{_name}}{{/if}}"
10
+ {{#if _locaKey}}
11
+ title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
12
+ placeholder="{{loca _locaKey}}{{#if _required}}*{{/if}}"
13
+ {{else}}
14
+ {{#if _label}}
15
+ title="{{_label}}{{#if _required}} (Pflichtfeld){{/if}}"
16
+ placeholder="{{_label}}{{#if _required}}*{{/if}}"
17
+ {{/if}}
18
+ {{/if}}
19
+ {{#if _rows}}
20
+ rows="{{_rows}}"
21
+ {{/if}}
22
+ {{#if _cols}}
23
+ cols="{{_cols}}"
24
+ {{/if}}
25
+ {{#if _maxLength}}
26
+ maxlength="{{_maxLength}}"
27
+ {{/if~}}
28
+ {{#if _required}}required{{/if}}
29
+ class="relative w-full px-4 pt-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
30
+ :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
31
+ >{{#if _formField.isValid}}
32
+ {{{_formField.forHtmlContent}}}
33
+ {{else}}
34
+ {{#if _value}}
35
+ {{_value}}
36
+ {{else}}
37
+ {{_defaultValue}}
38
+ {{/if}}{{/if}}</textarea>
39
+ <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
40
+
41
+ peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
42
+
43
+ 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">
44
+ {{#if _locaKey}}
45
+ {{loca _locaKey}}
46
+ {{else}}
47
+ {{#if _label}}
48
+ {{{_label}}}{{#if _required}}*{{/if}}
49
+ {{/if}}
50
+ {{/if}}
51
+ </label>
52
+ {{#if _required}}
53
+ <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
54
+ <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
55
+ {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
56
+ </div>
57
+ </div>
58
+ {{/if}}
59
+ <div class="flex items-end justify-between h-5 font-heading">
60
+ {{#if _description}}
61
+ <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
62
+ {{/if}}
63
+ {{#if _required}}
64
+ <div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
65
+ {{/if}}
66
+ {{#if _maxLength}}
67
+ <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
68
+ {{/if~}}
69
+ </div>
70
+ <div class="hidden">
71
+ <div>DEBUGG</div>
72
+ <div>wasFocused:<span x-text="wasFocused"></span></div>
73
+ <div>valid:<span x-text="valid"></span></div>
74
+ <div>input.length:<span x-text="textarea{{getRandom}}.length "></span></div>
75
+ </div>
76
+ </div>
package/dist/views_static/components/forms/webform.hbs CHANGED
@@ -1,20 +1,9 @@
1
1
  {{~#if (isStorybook)~}}
2
- <form class="relative flex flex-col justify-center py-6 overflow-hidden sm:py-12 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" >
3
-
4
- <div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:max-w-xl sm:rounded-lg sm:px-10">
5
-
6
- {{> components/forms/fields }}
7
-
8
- {{!-- {{~> modules/forms/controls }}
9
-
10
- <script type="text/html" class="js-successMessage">
11
- {{{include "content/webform/components/webform-form-success" }}}
12
- </script>
13
- <script type="text/html" class="js-errorMessage">
14
- {{{include "content/webform/components/webform-form-error" }}}
15
- </script> --}}
16
- </div>
17
- </form>
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 }}
18
7
  {{~else~}}
19
8
  {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
20
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.1",
9
+ "version": "1.100.3",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/fixtures/content/copytext/copytext_webform.json CHANGED
@@ -14,7 +14,7 @@
14
14
  },
15
15
  {
16
16
  "@->jsoninclude": "forms/form_fields.inc.json",
17
- "@->contentpath": "input-text-nachname"
17
+ "@->contentpath": "input-text-vorname-required"
18
18
  }
19
19
  ]
20
20
 
package/src/assets/fixtures/forms/form_fields.inc.json CHANGED
@@ -21,13 +21,13 @@
21
21
  },
22
22
  "name":"vorname",
23
23
  "label":"Vorname",
24
- "description":"",
24
+ "description":"Das ist der Beschreibungstext (*Pflichtfeld)",
25
25
  "defaultValue":"",
26
26
  "isHidden":false,
27
27
  "isRequired":true,
28
28
  "maxLength":"20"
29
29
  },
30
- "input-text-nachname":
30
+ "input-text-vorname-prefilled":
31
31
  {
32
32
  "type":{
33
33
  "isText":true,
@@ -36,9 +36,26 @@
36
36
  "name":"nachname",
37
37
  "label":"Nachname",
38
38
  "description":"Das ist der Beschreibungstext von Nachname",
39
+ "defaultValue":"Hier steht schon was",
40
+ "isHidden":false,
41
+ "isRequired":false,
42
+ "maxLength":"140"
43
+ },
44
+ "textarea":
45
+ {
46
+ "type":{
47
+ "isTextarea":true,
48
+ "asString":"textarea"
49
+ },
50
+ "name":"textarea",
51
+ "label":"Textarea",
52
+ "description":"Das ist der Beschreibungstext von Textarea",
39
53
  "defaultValue":"",
40
54
  "isHidden":false,
41
55
  "isRequired":true,
42
- "maxLength":"140"
43
- }
56
+ "maxLength":"300",
57
+ "columns":"30",
58
+ "rows":"10",
59
+ "counter":true
60
+ }
44
61
  }
package/src/assets/fixtures/forms/form_input.json CHANGED
@@ -3,14 +3,6 @@
3
3
  {
4
4
  "@->jsoninclude": "forms/form_fields.inc.json",
5
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
6
  }
15
7
  ]
16
8
  }
package/src/assets/fixtures/forms/form_input_mandatory.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "fields":[
3
+ {
4
+ "@->jsoninclude": "forms/form_fields.inc.json",
5
+ "@->contentpath": "input-text-vorname-required"
6
+ }
7
+ ]
8
+ }
package/src/assets/fixtures/forms/form_input_prefilled.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "fields":[
3
+ {
4
+ "@->jsoninclude": "forms/form_fields.inc.json",
5
+ "@->contentpath": "input-text-vorname-prefilled"
6
+ }
7
+ ]
8
+ }
package/src/assets/fixtures/forms/form_textarea.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "fields":[
3
+ {
4
+ "@->jsoninclude": "forms/form_fields.inc.json",
5
+ "@->contentpath": "textarea"
6
+ },{
7
+ "@->jsoninclude": "forms/form_fields.inc.json",
8
+ "@->contentpath": "textarea",
9
+ "@->overrides": [
10
+ {
11
+ "@->contentpath": "isRequired",
12
+ "@->value": false
13
+ }
14
+ ]
15
+ }
16
+ ]
17
+ }
18
+
package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json CHANGED
@@ -1 +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"}]}}]}
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":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"20"}]}}]}
package/src/stories/views/components/forms/backgroundBox.hbs ADDED
@@ -0,0 +1,3 @@
1
+ <div class="relative px-5 pt-6 pb-8 bg-highlight-1 sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
2
+ {{> @partial-block }}
3
+ </div>
package/src/stories/views/components/forms/fields.hbs CHANGED
@@ -18,10 +18,9 @@
18
18
 
19
19
  <div class="c-form__row js-wrapper-{{this.name}}">
20
20
  {{#if this.type.isTextarea}}
21
- {{~> modules/forms/textarea
21
+ {{~> components/forms/textarea
22
22
  _name=this.name
23
23
  _label=this.label
24
- _labelClass="hide"
25
24
  _description=this.description
26
25
  _defaultValue=this.defaultValue
27
26
  _counter=this.counter
@@ -29,6 +28,7 @@
29
28
  _cols=this.columns
30
29
  _required=this.isRequired
31
30
  _maxLength=this.maxLength
31
+ _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
32
32
  }}
33
33
  {{else if this.type.isText}}
34
34
  {{~> components/forms/input_single_line
@@ -42,6 +42,7 @@
42
42
  _tabindex=(if this.isHidden "-1")
43
43
  _required=this.isRequired
44
44
  _maxLength=this.maxLength
45
+ _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
45
46
  }}
46
47
  {{else if this.type.isSelect}}
47
48
  {{~> modules/forms/select
package/src/stories/views/components/forms/fixtures/form_input.json CHANGED
@@ -1 +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"}]}
1
+ {"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false}]}
package/src/stories/views/components/forms/fixtures/form_input_mandatory.json ADDED
@@ -0,0 +1 @@
1
+ {"fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"20"}]}
package/src/stories/views/components/forms/fixtures/form_input_prefilled.json ADDED
@@ -0,0 +1 @@
1
+ {"fields":[{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"Das ist der Beschreibungstext von Nachname","defaultValue":"Hier steht schon was","isHidden":false,"isRequired":false,"maxLength":"140"}]}
package/src/stories/views/components/forms/fixtures/form_textarea.json ADDED
@@ -0,0 +1 @@
1
+ {"fields":[{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":false,"maxLength":"300","columns":"30","rows":"10","counter":true}]}
package/src/stories/views/components/forms/form.stories.js CHANGED
@@ -1,34 +1,62 @@
1
- import contentbox from './fields.hbs'
1
+
2
2
  import inputJson from './fixtures/form_input.json'
3
+ import inputMandatoryJson from './fixtures/form_input_mandatory.json'
4
+ import inputPrefilledJson from './fixtures/form_input_prefilled.json'
5
+ import textareaJson from './fixtures/form_textarea.json'
6
+
7
+ const handlebars = require('hrHandlebars')
3
8
 
4
- const Template = ({ ...args }) => {
5
- // You can either use a function to create DOM elements or use a plain html string!
6
- // return `<span>${topline}</span>`;
7
- return contentbox({ ...args })
8
- }
9
9
 
10
10
  export default {
11
- title: 'Komponenten/Formulare/Input',
11
+ title: 'Komponenten/Formulare/Text Felder',
12
12
  decorators: [
13
13
  (Story) => {
14
- return `<div class="relative flex flex-col justify-center overflow-hidden py-6 sm:py-12">
15
- <div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:max-w-xl sm:rounded-lg sm:px-10">
14
+ return `<div class="grid grid-page">
15
+ <div class="grid bg-white grid-article">
16
16
  ${Story()}
17
17
  </div>
18
18
  </div>`
19
19
  },
20
20
  ],
21
21
  }
22
-
22
+ const TemplateInput = (args) => {
23
+ let hbsTemplate = handlebars.compile(`
24
+ {{#>components/forms/backgroundBox }}
25
+ <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" >
26
+ {{> components/forms/fields }}
27
+ </form>
28
+ {{/components/forms/backgroundBox }}
29
+ `)
30
+ return hbsTemplate({ ...args })
31
+ }
32
+ const TemplateTextarea = (args) => {
33
+ let hbsTemplate = handlebars.compile(`
34
+ {{#>components/forms/backgroundBox }}
35
+ <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" >
36
+ {{> components/forms/fields }}
37
+ </form>
38
+ {{/components/forms/backgroundBox }}
39
+ `)
40
+ return hbsTemplate({ ...args })
41
+ }
23
42
  export const Input = {
24
- render: Template.bind({}),
25
- name: 'Input - Einzeiliger Text',
43
+ render: TemplateInput.bind({}),
44
+ name: 'Input',
26
45
  args: inputJson,
27
46
  }
28
-
47
+ export const InputMandatory = {
48
+ render: TemplateInput.bind({}),
49
+ name: 'Input:mandatory',
50
+ args: inputMandatoryJson,
51
+ }
52
+ export const InputPrefilled = {
53
+ render: TemplateInput.bind({}),
54
+ name: 'Input:prefilled',
55
+ args: inputPrefilledJson,
56
+ }
29
57
  export const InputFocused = {
30
- render: Template.bind({}),
31
- name: 'Input - Einzeiliger Text Focus',
58
+ render: TemplateInput.bind({}),
59
+ name: 'Input:focus',
32
60
  args: inputJson,
33
61
  parameters: {
34
62
  pseudo: {
@@ -36,4 +64,9 @@ export const InputFocused = {
36
64
 
37
65
  },
38
66
  }
67
+ }
68
+ export const Textarea = {
69
+ render: TemplateTextarea.bind({}),
70
+ name: 'Textarea',
71
+ args: textareaJson,
39
72
  }
package/src/stories/views/components/forms/input_single_line.hbs CHANGED
@@ -1,9 +1,11 @@
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"
1
+ <div class="relative flex flex-col w-full mb-5" x-data="{ input{{nextRandom}}: '{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
2
+ <input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
3
+ :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-700': !valid && wasFocused && !isFocused }"
3
4
  x-model="input{{getRandom}}"
4
5
  id="input{{getRandom}}"
5
6
  {{#if _required}}
6
- @blur="wasFocused = true;"
7
+ @focus="isFocused = true"
8
+ @blur="wasFocused = true; isFocused=false"
7
9
  x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false"
8
10
  {{/if}}
9
11
  type="{{#if _type}}{{_type}}{{/if}}"
@@ -37,8 +39,9 @@
37
39
  >
38
40
  <div class="hidden">
39
41
  <div>DEBUGG</div>
40
- <div x-text="valid"></div>
41
- <div x-text="input{{getRandom}}.length "></div>
42
+ <div>wasFocused:<span x-text="wasFocused"></span></div>
43
+ <div>valid:<span x-text="valid"></span></div>
44
+ <div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
42
45
  </div>
43
46
  <label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
44
47
 
@@ -57,12 +60,19 @@
57
60
  {{/if}}
58
61
  {{/if}}
59
62
  </label>
60
- <div class="flex justify-between mb-5 min-h-4 font-heading mt-0.5">
63
+ {{#if _required}}
64
+ <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
65
+ <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
66
+ {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
67
+ </div>
68
+ </div>
69
+ {{/if}}
70
+ <div class="flex items-end justify-between h-5 font-heading">
61
71
  {{#if _description}}
62
- <div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused ? 'hidden' : ''"{{/if}}>{{_description}}</div>
72
+ <div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused }"{{/if}}>{{_description}}</div>
63
73
  {{/if}}
64
74
  {{#if _required}}
65
- <div class="pl-4 text-xs font-bold text-red-700 " :class="!valid && wasFocused ? '' : 'hidden'">Fehler</div>
75
+ <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused }" >{{_errorMessage}}</div>
66
76
  {{/if}}
67
77
  {{#if _maxLength}}
68
78
  <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
package/src/stories/views/components/forms/textarea.hbs ADDED
@@ -0,0 +1,76 @@
1
+ <div class="relative flex flex-col w-full mb-5" x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: false, wasFocused: false, isFocused: false}">
2
+ <textarea
3
+ x-model="textarea{{getRandom}}"
4
+ id="textarea{{getRandom}}"
5
+ @focus="isFocused = true"
6
+ @blur="wasFocused = true; isFocused=false"
7
+ x-on:keyup ="textarea{{getRandom}}.length > 0 ? valid = true : valid = false"
8
+ value=""
9
+ name="{{#if _name}}{{_name}}{{/if}}"
10
+ {{#if _locaKey}}
11
+ title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
12
+ placeholder="{{loca _locaKey}}{{#if _required}}*{{/if}}"
13
+ {{else}}
14
+ {{#if _label}}
15
+ title="{{_label}}{{#if _required}} (Pflichtfeld){{/if}}"
16
+ placeholder="{{_label}}{{#if _required}}*{{/if}}"
17
+ {{/if}}
18
+ {{/if}}
19
+ {{#if _rows}}
20
+ rows="{{_rows}}"
21
+ {{/if}}
22
+ {{#if _cols}}
23
+ cols="{{_cols}}"
24
+ {{/if}}
25
+ {{#if _maxLength}}
26
+ maxlength="{{_maxLength}}"
27
+ {{/if~}}
28
+ {{#if _required}}required{{/if}}
29
+ class="relative w-full px-4 pt-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
30
+ :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused && !isFocused}"
31
+ >{{#if _formField.isValid}}
32
+ {{{_formField.forHtmlContent}}}
33
+ {{else}}
34
+ {{#if _value}}
35
+ {{_value}}
36
+ {{else}}
37
+ {{_defaultValue}}
38
+ {{/if}}{{/if}}</textarea>
39
+ <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
40
+
41
+ peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
42
+
43
+ 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">
44
+ {{#if _locaKey}}
45
+ {{loca _locaKey}}
46
+ {{else}}
47
+ {{#if _label}}
48
+ {{{_label}}}{{#if _required}}*{{/if}}
49
+ {{/if}}
50
+ {{/if}}
51
+ </label>
52
+ {{#if _required}}
53
+ <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
54
+ <div class="hidden w-5 h-5 font-bold" :class="{'hidden': valid || !wasFocused || isFocused }">
55
+ {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
56
+ </div>
57
+ </div>
58
+ {{/if}}
59
+ <div class="flex items-end justify-between h-5 font-heading">
60
+ {{#if _description}}
61
+ <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
62
+ {{/if}}
63
+ {{#if _required}}
64
+ <div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
65
+ {{/if}}
66
+ {{#if _maxLength}}
67
+ <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
68
+ {{/if~}}
69
+ </div>
70
+ <div class="hidden">
71
+ <div>DEBUGG</div>
72
+ <div>wasFocused:<span x-text="wasFocused"></span></div>
73
+ <div>valid:<span x-text="valid"></span></div>
74
+ <div>input.length:<span x-text="textarea{{getRandom}}.length "></span></div>
75
+ </div>
76
+ </div>
package/src/stories/views/components/forms/webform.hbs CHANGED
@@ -1,20 +1,9 @@
1
1
  {{~#if (isStorybook)~}}
2
- <form class="relative flex flex-col justify-center py-6 overflow-hidden sm:py-12 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" >
3
-
4
- <div class="relative bg-[#d8e9f6] min-w-96 min-h-96 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:max-w-xl sm:rounded-lg sm:px-10">
5
-
6
- {{> components/forms/fields }}
7
-
8
- {{!-- {{~> modules/forms/controls }}
9
-
10
- <script type="text/html" class="js-successMessage">
11
- {{{include "content/webform/components/webform-form-success" }}}
12
- </script>
13
- <script type="text/html" class="js-errorMessage">
14
- {{{include "content/webform/components/webform-form-error" }}}
15
- </script> --}}
16
- </div>
17
- </form>
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 }}
18
7
  {{~else~}}
19
8
  {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
20
9
  {{~/if~}}
package/tailwind.config.js CHANGED
@@ -167,6 +167,9 @@ module.exports = {
167
167
  maxHeight: {
168
168
  stage: '34.3125rem',
169
169
  },
170
+ minHeight: {
171
+ 12: '3rem',
172
+ },
170
173
  maxWidth: {
171
174
  '1/4': '25%',
172
175
  '1/3': '33.33333333%',