hr-design-system-handlebars 1.110.6 → 1.110.8

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 (44) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +74 -72
  3. package/dist/views/components/content_nav/content_nav_list.hbs +2 -2
  4. package/dist/views/components/forms/backgroundBox.hbs +1 -1
  5. package/dist/views/components/forms/choice.hbs +5 -5
  6. package/dist/views/components/forms/choiceGroup.hbs +3 -3
  7. package/dist/views/components/forms/controls.hbs +1 -1
  8. package/dist/views/components/forms/error_icon.hbs +1 -1
  9. package/dist/views/components/forms/fields.hbs +1 -1
  10. package/dist/views/components/forms/input.hbs +14 -14
  11. package/dist/views/components/forms/select.hbs +9 -9
  12. package/dist/views/components/forms/textarea.hbs +7 -7
  13. package/dist/views/components/forms/webform.hbs +1 -12
  14. package/dist/views/components/podcast/components/podcast_subscribe_button.hbs +1 -1
  15. package/dist/views_static/components/content_nav/content_nav_list.hbs +2 -2
  16. package/dist/views_static/components/forms/backgroundBox.hbs +1 -1
  17. package/dist/views_static/components/forms/choice.hbs +5 -5
  18. package/dist/views_static/components/forms/choiceGroup.hbs +3 -3
  19. package/dist/views_static/components/forms/controls.hbs +1 -1
  20. package/dist/views_static/components/forms/error_icon.hbs +1 -1
  21. package/dist/views_static/components/forms/fields.hbs +1 -1
  22. package/dist/views_static/components/forms/input.hbs +14 -14
  23. package/dist/views_static/components/forms/select.hbs +9 -9
  24. package/dist/views_static/components/forms/textarea.hbs +7 -7
  25. package/dist/views_static/components/forms/webform.hbs +1 -12
  26. package/dist/views_static/components/podcast/components/podcast_subscribe_button.hbs +1 -1
  27. package/package.json +1 -1
  28. package/src/assets/fixtures/content/copytext/components/form/form_input.json +16 -16
  29. package/src/assets/fixtures/content/copytext/copytext_webform.json +4 -0
  30. package/src/assets/tailwind.css +20 -24
  31. package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json +1 -1
  32. package/src/stories/views/components/content_nav/content_nav_list.hbs +2 -2
  33. package/src/stories/views/components/forms/backgroundBox.hbs +1 -1
  34. package/src/stories/views/components/forms/choice.hbs +5 -5
  35. package/src/stories/views/components/forms/choiceGroup.hbs +3 -3
  36. package/src/stories/views/components/forms/controls.hbs +1 -1
  37. package/src/stories/views/components/forms/error_icon.hbs +1 -1
  38. package/src/stories/views/components/forms/fields.hbs +1 -1
  39. package/src/stories/views/components/forms/input.hbs +14 -14
  40. package/src/stories/views/components/forms/select.hbs +9 -9
  41. package/src/stories/views/components/forms/textarea.hbs +7 -7
  42. package/src/stories/views/components/forms/webform.hbs +1 -12
  43. package/src/stories/views/components/podcast/components/podcast_subscribe_button.hbs +1 -1
  44. package/tailwind.config.js +4 -2
package/dist/views/components/forms/textarea.hbs CHANGED
@@ -34,9 +34,9 @@
34
34
  maxlength="{{_maxLength}}"
35
35
  {{/if~}}
36
36
  {{#if _required}}required{{/if}}
37
- class="relative w-full px-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"
37
+ class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-link dark:border-link-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
38
38
  {{#if _required}}
39
- :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
39
+ :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
40
40
  {{/if}}
41
41
  >{{~#if _formField.isValid~}}
42
42
  {{{_formField.forHtmlContent}}}
@@ -46,11 +46,11 @@
46
46
  {{~else~}}
47
47
  {{~_defaultValue~}}
48
48
  {{~/if}}{{/if}}</textarea>
49
- <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
49
+ <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
50
50
 
51
51
  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
52
52
 
53
- 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">
53
+ peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-link origin-top-left transform transition-transform">
54
54
  {{#if _locaKey}}
55
55
  {{loca _locaKey}}
56
56
  {{else}}
@@ -66,13 +66,13 @@
66
66
  {{/if}}
67
67
  <div class="flex items-end justify-between h-5 font-heading">
68
68
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
69
+ <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
70
70
  {{/if}}
71
71
  {{#if _required}}
72
- <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
72
+ <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
73
73
  {{/if}}
74
74
  {{#if _maxLength}}
75
- <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
75
+ <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
76
76
  {{/if~}}
77
77
  </div>
78
78
  </div>
package/dist/views/components/forms/webform.hbs CHANGED
@@ -2,7 +2,7 @@
2
2
  {{#>components/forms/backgroundBox }}
3
3
 
4
4
 
5
- <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
5
+ <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
6
6
  {{this.title}}
7
7
  </h3>
8
8
  <div id="formWrapper">
@@ -22,17 +22,6 @@
22
22
  accept-charset="utf-8"
23
23
 
24
24
  >
25
-
26
- <div class="">
27
- <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
28
- DEBUG
29
- </div>
30
- <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
31
- <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
32
- <div>isPosting:<span x-text="isPosting" class="font-bold" :class="isPosting ? 'text-green-800' : 'text-red-700'"></span></div>
33
-
34
- </div>
35
- </div>
36
25
  {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
37
26
 
38
27
  {{> components/forms/controls }}
package/dist/views/components/podcast/components/podcast_subscribe_button.hbs CHANGED
@@ -54,7 +54,7 @@
54
54
  <ul>
55
55
  {{~#each this~}}
56
56
  <li class="{{#unless @last}}border-b{{/unless}}">
57
- <a class="{{if (isUserConsentNeeded this.podcastHosterUrl) 'js-user-consent-needed ' ''}}flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500 js-load"
57
+ <a class="{{if (isUserConsentNeeded this.podcastHosterUrl) 'js-user-consent-needed ' ''}}flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-scorpion js-load"
58
58
  title="{{this.podcastHosterName}}"
59
59
  target="_blank"
60
60
  rel="noopener noreferrer"
package/dist/views_static/components/content_nav/content_nav_list.hbs CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  {{~#if this.isGroup~}}
7
7
 
8
- {{#if ../isDropdown}}
8
+
9
9
  <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-highlight-1 text-content-nav md:mx-0 font-copy fill-content-nav">
10
10
  <div class="flex items-center h-10 p-2">{{this.title}}</div>
11
11
  <ul class="!px-0 mt-0">
@@ -19,7 +19,7 @@
19
19
  {{~/each~}}
20
20
  </ul>
21
21
  </li>
22
- {{/if}}
22
+
23
23
  {{else}}
24
24
  {{> components/content_nav/content_nav_item
25
25
  _teaserSize=../_teaserSize
package/dist/views_static/components/forms/backgroundBox.hbs CHANGED
@@ -1,3 +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" >
1
+ <div class="relative px-5 pt-6 pb-8 bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr sm:px-13 sm:pt-12 article-full-width sm:article-narrow" >
2
2
  {{> @partial-block }}
3
3
  </div>
package/dist/views_static/components/forms/choice.hbs CHANGED
@@ -9,9 +9,9 @@
9
9
  {{/unless}}
10
10
  >
11
11
  <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
12
- <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '[" border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"," border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
12
+ <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-link dark:border-link-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-link checked:border-link"," checked:bg-white checked:border-link rounded-full",""]'}}"
13
13
  {{#if _required}}
14
- :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
14
+ :class="{' border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
15
15
  {{/if}}
16
16
  {{#if _inGroup }}
17
17
  {{#if _required}}
@@ -59,7 +59,7 @@
59
59
  {{/if}}
60
60
  {{/if~}}
61
61
  >
62
- <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
62
+ <label for="input{{getRandom}}" class="items-center justify-center text-xs text-text dark:text-text-dark md:text-sm font-headingSerif ">
63
63
  {{#if _hasBody}}
64
64
  {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
65
65
  {{else}}
@@ -76,10 +76,10 @@
76
76
  {{#unless _inGroup}}
77
77
  <div class="font-heading">
78
78
  {{#if _description}}
79
- <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
79
+ <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
80
80
  {{/if}}
81
81
  {{#if _required}}
82
- <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
82
+ <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
83
83
  {{/if}}
84
84
  </div>
85
85
  {{/unless}}
package/dist/views_static/components/forms/choiceGroup.hbs CHANGED
@@ -6,7 +6,7 @@
6
6
  {{/if}}
7
7
  >
8
8
  <div class="relative flex flex-col w-full mb-6 md:mb-12 gap-y-4 md:gap-y-5">
9
- <legend class="text-lg font-bold text-black md:text-xl font-heading">
9
+ <legend class="text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">
10
10
  {{#if _hasBody}}
11
11
  {{decorator_body}}{{#if _required}}*{{/if}}
12
12
  {{else}}
@@ -39,10 +39,10 @@
39
39
  </div>
40
40
  <div class="font-heading">
41
41
  {{#if _description}}
42
- <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
42
+ <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
43
43
  {{/if}}
44
44
  {{#if _required}}
45
- <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
45
+ <div class="hidden text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
46
46
  {{/if}}
47
47
  </div>
48
48
  </div>
package/dist/views_static/components/forms/controls.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <div class="flex items-center justify-between">
2
- <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
2
+ <div class="text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
3
3
  <div class="flex items-center">
4
4
  <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">
5
5
  <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
package/dist/views_static/components/forms/error_icon.hbs CHANGED
@@ -1,3 +1,3 @@
1
1
  <div class="hidden w-5 h-5 font-bold" :class="{{_xclass}}">
2
- {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-red-700"}}
2
+ {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error"}}
3
3
  </div>
package/dist/views_static/components/forms/fields.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  {{#if this.caption}}
5
5
  <fieldset>
6
- <legend class="mb-5 font-headingSerif">{{this.caption}}</legend>
6
+ <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
7
7
  {{~> components/forms/fields}}
8
8
  </fieldset>
9
9
  {{else}}
package/dist/views_static/components/forms/input.hbs CHANGED
@@ -1,11 +1,11 @@
1
- <div class=" relative flex flex-col w-full mb-5 {{_wrapperClass}}"
1
+ <div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
2
2
  ax-load
3
3
  x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}','{{_name}}')"
4
4
  x-init="validateField()"
5
5
  x-ignore
6
6
  >
7
- <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"
8
- :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
7
+ <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-link dark:border-link-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
8
+ :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
9
9
  x-model="input{{getRandom}}"
10
10
  id="input{{getRandom}}"
11
11
  x-bind:data-is-valid="valid ? 'true' : 'false'"
@@ -42,11 +42,11 @@
42
42
  data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
43
43
  >
44
44
 
45
- <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
45
+ <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
46
46
 
47
47
  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
48
48
 
49
- 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
+ peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-link peer-focus:dark:text-text-dark origin-top-left transform transition-transform">
50
50
  {{#if _hasBody}}
51
51
  {{decorator_body}}
52
52
  {{else}}
@@ -66,30 +66,30 @@
66
66
 
67
67
  <div class="flex items-end justify-between h-5 font-heading">
68
68
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
69
+ <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
70
70
  {{/if}}
71
71
 
72
- <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
72
+ <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
73
73
 
74
74
  </div>
75
75
  <div class="hidden">
76
76
  <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
77
77
  DEBUG
78
78
  </div>
79
- <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
79
+ <div class="px-4 py-3 bg-red-100 border border-t-0 border-red-400 rounded-b text-error">
80
80
  <div>name:<span x-text="name" class="font-bold" ></span></div>
81
- <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
82
- <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
83
- <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
81
+ <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-error'"></span></div>
82
+ <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-error'"></span></div>
83
+ <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-error'"></span></div>
84
84
 
85
- <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
86
- <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
85
+ <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-error'"></span></div>
86
+ <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-error'"></span></div>
87
87
  <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
88
88
  <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
89
89
  <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
90
90
  <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
91
91
  <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
92
- <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
92
+ <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-error'"></span></div>
93
93
 
94
94
  </div>
95
95
  </div>
package/dist/views_static/components/forms/select.hbs CHANGED
@@ -4,8 +4,8 @@
4
4
  x-ignore
5
5
  >
6
6
  <select
7
- class="relative w-full h-12 pt-4 pl-4 text-gray-800 bg-white border-blue-500 appearance-none bg- pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
8
- :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
7
+ class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none text-text dark:bg-black dark:text-text-dark border-link bg- pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
8
+ :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
9
9
  x-model="select{{getRandom}}"
10
10
  id="select{{getRandom}}"
11
11
  title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -17,7 +17,7 @@
17
17
  x-on:change ="select{{getRandom}}.value != '' ? valid = true : valid = false;"
18
18
  {{/if}}
19
19
  >
20
- <option class="text-white bg-gray-400" value=""{{#if _required}} disabled{{/if}} selected>
20
+ <option class="text-text dark:text-text-dark bg-highlight-1 dark:bg-highlight-1-dark" value=""{{#if _required}} disabled{{/if}} selected>
21
21
  {{#if _locaKey}}
22
22
  {{loca _locaKey}}{{#if _required}}*{{/if}}
23
23
  {{else}}
@@ -28,27 +28,27 @@
28
28
  </option>
29
29
  {{#if _options}}
30
30
  {{~#each _options~}}
31
- <option class="text-black" value="{{this.id}}" {{#if this.isSelected}}selected{{/if}}>{{this.name}}</option>
31
+ <option class="text-gray-scorpion dark:text-text-dark" value="{{this.id}}" {{#if this.isSelected}}selected{{/if}}>{{this.name}}</option>
32
32
  {{~/each~}}
33
33
  {{else}}
34
34
  {{#each _items}}
35
- <option class="text-black" value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
35
+ <option class="text-gray-scorpion dark:text-text-dark" value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
36
36
  {{/each}}
37
37
  {{/if}}
38
38
  </select>
39
39
  <label for="select{{getRandom}}"
40
- class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-500
41
- peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
40
+ class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
41
+ peer-focus:text-link peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
42
42
  origin-top-left transform transition-transform
43
43
  ">
44
44
  {{_label}}{{#if _required}}*{{/if}}
45
45
  </label>
46
46
  <div class="flex items-end justify-between h-5 font-heading">
47
47
  {{#if _description}}
48
- <div class="pl-4 text-xs text-gray-500 " :class="{'hidden': hideDescription()}">{{_description}}</div>
48
+ <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
49
49
  {{/if}}
50
50
  {{#if _required}}
51
- <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
51
+ <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
52
52
  {{/if}}
53
53
  </div>
54
54
  <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
package/dist/views_static/components/forms/textarea.hbs CHANGED
@@ -34,9 +34,9 @@
34
34
  maxlength="{{_maxLength}}"
35
35
  {{/if~}}
36
36
  {{#if _required}}required{{/if}}
37
- class="relative w-full px-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"
37
+ class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-link dark:border-link-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
38
38
  {{#if _required}}
39
- :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
39
+ :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
40
40
  {{/if}}
41
41
  >{{~#if _formField.isValid~}}
42
42
  {{{_formField.forHtmlContent}}}
@@ -46,11 +46,11 @@
46
46
  {{~else~}}
47
47
  {{~_defaultValue~}}
48
48
  {{~/if}}{{/if}}</textarea>
49
- <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
49
+ <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
50
50
 
51
51
  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
52
52
 
53
- 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">
53
+ peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-link origin-top-left transform transition-transform">
54
54
  {{#if _locaKey}}
55
55
  {{loca _locaKey}}
56
56
  {{else}}
@@ -66,13 +66,13 @@
66
66
  {{/if}}
67
67
  <div class="flex items-end justify-between h-5 font-heading">
68
68
  {{#if _description}}
69
- <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
69
+ <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
70
70
  {{/if}}
71
71
  {{#if _required}}
72
- <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
72
+ <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
73
73
  {{/if}}
74
74
  {{#if _maxLength}}
75
- <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
75
+ <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
76
76
  {{/if~}}
77
77
  </div>
78
78
  </div>
package/dist/views_static/components/forms/webform.hbs CHANGED
@@ -2,7 +2,7 @@
2
2
  {{#>components/forms/backgroundBox }}
3
3
 
4
4
 
5
- <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
5
+ <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
6
6
  {{this.title}}
7
7
  </h3>
8
8
  <div id="formWrapper">
@@ -22,17 +22,6 @@
22
22
  accept-charset="utf-8"
23
23
 
24
24
  >
25
-
26
- <div class="">
27
- <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
28
- DEBUG
29
- </div>
30
- <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
31
- <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
32
- <div>isPosting:<span x-text="isPosting" class="font-bold" :class="isPosting ? 'text-green-800' : 'text-red-700'"></span></div>
33
-
34
- </div>
35
- </div>
36
25
  {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
37
26
 
38
27
  {{> components/forms/controls }}
package/dist/views_static/components/podcast/components/podcast_subscribe_button.hbs CHANGED
@@ -54,7 +54,7 @@
54
54
  <ul>
55
55
  {{~#each this~}}
56
56
  <li class="{{#unless @last}}border-b{{/unless}}">
57
- <a class="{{if (isUserConsentNeeded this.podcastHosterUrl) 'js-user-consent-needed ' ''}}flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500 js-load"
57
+ <a class="{{if (isUserConsentNeeded this.podcastHosterUrl) 'js-user-consent-needed ' ''}}flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-scorpion js-load"
58
58
  title="{{this.podcastHosterName}}"
59
59
  target="_blank"
60
60
  rel="noopener noreferrer"
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.110.6",
9
+ "version": "1.110.8",
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/components/form/form_input.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
- "fields":[
3
- {
4
- "type":{
5
- "isText":true,
6
- "asString":"text"
7
- },
8
- "name":"name",
9
- "label":"Name",
10
- "description":"",
11
- "defaultValue":"",
12
- "isHidden":false,
13
- "isRequired":true,
14
- "maxLength":"140"
15
- }
16
- ]
17
- }
2
+ "fields": [
3
+ {
4
+ "type": {
5
+ "isText": true,
6
+ "asString": "text"
7
+ },
8
+ "name": "name",
9
+ "label": "Name",
10
+ "description": "",
11
+ "defaultValue": "",
12
+ "isHidden": false,
13
+ "isRequired": true,
14
+ "maxLength": "140"
15
+ }
16
+ ]
17
+ }
package/src/assets/fixtures/content/copytext/copytext_webform.json CHANGED
@@ -22,6 +22,10 @@
22
22
  "@->jsoninclude": "forms/form_fields.inc.json",
23
23
  "@->contentpath": "input-text-nachname-required"
24
24
  },
25
+ {
26
+ "@->jsoninclude": "forms/form_fields.inc.json",
27
+ "@->contentpath": "select"
28
+ },
25
29
  {
26
30
  "@->jsoninclude": "forms/form_fields.inc.json",
27
31
  "@->contentpath": "checkbox-group"