hr-design-system-handlebars 1.110.5 → 1.110.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/assets/index.css +27 -9
  3. package/dist/assets/js/components/forms/contactForm.alpine.js +3 -3
  4. package/dist/views/components/forms/choice.hbs +9 -3
  5. package/dist/views/components/forms/choiceGroup.hbs +1 -1
  6. package/dist/views_static/components/forms/choice.hbs +9 -3
  7. package/dist/views_static/components/forms/choiceGroup.hbs +1 -1
  8. package/package.json +1 -1
  9. package/src/assets/css/custom-utilities.css +11 -1
  10. package/src/assets/fixtures/content/copytext/copytext_webform.json +20 -0
  11. package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json +1 -1
  12. package/src/stories/views/components/forms/choice.hbs +9 -3
  13. package/src/stories/views/components/forms/choiceGroup.hbs +1 -1
  14. package/src/stories/views/components/forms/contactForm.alpine.js +3 -3
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ # v1.110.6 (Mon Oct 14 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - bugfix [#1110](https://github.com/mumprod/hr-design-system-handlebars/pull/1110) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
6
+
7
+ #### Authors: 2
8
+
9
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
10
+ - selbaciri (saad.elbaciri@hr.de)
11
+
12
+ ---
13
+
1
14
  # v1.110.5 (Mon Oct 14 2024)
2
15
 
3
16
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -3593,7 +3593,7 @@ article.indexTextDS .indexTextHighlighted .link {
3593
3593
  border-bottom-color: var(--color-secondary-ds);
3594
3594
  }
3595
3595
  .counter-reset {
3596
- counter-reset: cnt1728910132020;
3596
+ counter-reset: cnt1728913253788;
3597
3597
  }
3598
3598
  .placeholder-text-xs::-webkit-input-placeholder {
3599
3599
  font-size: 0.75rem;
@@ -4007,7 +4007,7 @@ article.indexTextDS .indexTextHighlighted .link {
4007
4007
  --tw-ring-color: rgba(255, 255, 255, 0.5);
4008
4008
  }
4009
4009
  .-ordered {
4010
- counter-increment: cnt1728910132020 1;
4010
+ counter-increment: cnt1728913253788 1;
4011
4011
  }
4012
4012
  .-ordered::before {
4013
4013
  position: absolute;
@@ -4025,7 +4025,7 @@ article.indexTextDS .indexTextHighlighted .link {
4025
4025
  --tw-text-opacity: 1;
4026
4026
  color: rgba(0, 0, 0, 1);
4027
4027
  color: rgba(0, 0, 0, var(--tw-text-opacity));
4028
- content: counter(cnt1728910132020);
4028
+ content: counter(cnt1728913253788);
4029
4029
  }
4030
4030
  /*! ****************************/
4031
4031
  /*! DataPolicy stuff */
@@ -4132,13 +4132,31 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
4132
4132
  /*! FORMULAR SELECT */
4133
4133
  /*! ****************************/
4134
4134
  /* Custom CSS to style the label when the first empty option is selected */
4135
+ select + label {
4136
+ top: 1px !important;
4137
+ --tw-translate-y: 0px !important;
4138
+ --tw-scale-x: .75 !important;
4139
+ --tw-scale-y: .75 !important;
4140
+ transform: translate(var(--tw-translate-x), 0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.75) scaleY(.75) !important;
4141
+ 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)) !important;
4142
+ }
4143
+ @supports selector(:has(+ *)) {
4144
+ select + label {
4145
+ top: 0px !important;
4146
+ --tw-translate-y: 0.75rem !important;
4147
+ --tw-scale-x: 1 !important;
4148
+ --tw-scale-y: 1 !important;
4149
+ transform: translate(var(--tw-translate-x), 0.75rem) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1) scaleY(1) !important;
4150
+ 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)) !important;
4151
+ }
4152
+ }
4135
4153
  select:has(option:checked:not([value=''])) + label {
4136
- top: 1px;
4137
- --tw-translate-y: 0px;
4138
- --tw-scale-x: .75;
4139
- --tw-scale-y: .75;
4140
- transform: translate(var(--tw-translate-x), 0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.75) scaleY(.75);
4141
- 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));
4154
+ top: 1px !important;
4155
+ --tw-translate-y: 0px !important;
4156
+ --tw-scale-x: .75 !important;
4157
+ --tw-scale-y: .75 !important;
4158
+ transform: translate(var(--tw-translate-x), 0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.75) scaleY(.75) !important;
4159
+ 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)) !important;
4142
4160
  }
4143
4161
  select:has(option:checked[value='']) {
4144
4162
  color: transparent;
package/dist/assets/js/components/forms/contactForm.alpine.js CHANGED
@@ -134,7 +134,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
134
134
  break;
135
135
  default:
136
136
  console.log("default");
137
- replaceAnimated(
137
+ this.replaceAnimated(
138
138
  this.formWrapper,
139
139
  this.form.querySelector('#errorMessage').innerHTML,
140
140
  true
@@ -142,7 +142,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
142
142
  break;
143
143
  }
144
144
  } else {
145
- replaceAnimated(this.formWrapper, data, true);
145
+ this.replaceAnimated(this.formWrapper, data, true);
146
146
  }
147
147
  /*
148
148
  if (eventOnSuccess) {
@@ -158,7 +158,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
158
158
  })
159
159
  .catch((error) => {
160
160
  console.error('Fail:', error);
161
- replaceAnimated(
161
+ this.replaceAnimated(
162
162
  this.formWrapper,
163
163
  '<div class="c-form success">Das hat leider nicht funktioniert!</div>',
164
164
  true
package/dist/views/components/forms/choice.hbs CHANGED
@@ -10,11 +10,17 @@
10
10
  >
11
11
  <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
12
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",""]'}}"
13
- :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
13
+ {{#if _required}}
14
+ :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
15
+ {{/if}}
14
16
  {{#if _inGroup }}
15
- @change="anyChecked()"
17
+ {{#if _required}}
18
+ @change="anyChecked()"
19
+ {{/if}}
16
20
  {{else}}
17
- @change="validateChoice()"
21
+ {{#if _required}}
22
+ @change="validateChoice()"
23
+ {{/if}}
18
24
  {{/if}}
19
25
  id="input{{getRandom}}"
20
26
  {{#if _required}}
package/dist/views/components/forms/choiceGroup.hbs CHANGED
@@ -25,7 +25,7 @@
25
25
  {{> components/forms/choice
26
26
  _type=../_type
27
27
  _name=../_name
28
- _required=(if ../_isRadio ../_required false)
28
+ _required=(if ../_isRadio ../_required)
29
29
  _value=this.value
30
30
  _inGroup=true
31
31
  _label=this.label
package/dist/views_static/components/forms/choice.hbs CHANGED
@@ -10,11 +10,17 @@
10
10
  >
11
11
  <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
12
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",""]'}}"
13
- :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
13
+ {{#if _required}}
14
+ :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
15
+ {{/if}}
14
16
  {{#if _inGroup }}
15
- @change="anyChecked()"
17
+ {{#if _required}}
18
+ @change="anyChecked()"
19
+ {{/if}}
16
20
  {{else}}
17
- @change="validateChoice()"
21
+ {{#if _required}}
22
+ @change="validateChoice()"
23
+ {{/if}}
18
24
  {{/if}}
19
25
  id="input{{getRandom}}"
20
26
  {{#if _required}}
package/dist/views_static/components/forms/choiceGroup.hbs CHANGED
@@ -25,7 +25,7 @@
25
25
  {{> components/forms/choice
26
26
  _type=../_type
27
27
  _name=../_name
28
- _required=(if ../_isRadio ../_required false)
28
+ _required=(if ../_isRadio ../_required)
29
29
  _value=this.value
30
30
  _inGroup=true
31
31
  _label=this.label
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.5",
9
+ "version": "1.110.6",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/assets/css/custom-utilities.css CHANGED
@@ -447,8 +447,18 @@
447
447
  /*! FORMULAR SELECT */
448
448
  /*! ****************************/
449
449
  /* Custom CSS to style the label when the first empty option is selected */
450
+ select + label {
451
+ @apply !scale-75 !translate-y-0 !top-px;
452
+ }
453
+
454
+ @supports selector(:has(+ *)) {
455
+ select + label {
456
+ @apply !top-0 !scale-100 !translate-y-3;
457
+ }
458
+ }
459
+
450
460
  select:has(option:checked:not([value=''])) + label {
451
- @apply top-px scale-75 translate-y-0;
461
+ @apply !top-px !scale-75 !translate-y-0;
452
462
  }
453
463
 
454
464
  select:has(option:checked[value='']) {
package/src/assets/fixtures/content/copytext/copytext_webform.json CHANGED
@@ -30,6 +30,26 @@
30
30
  "@->jsoninclude": "forms/form_fields.inc.json",
31
31
  "@->contentpath": "radio-group"
32
32
  },
33
+ {
34
+ "@->jsoninclude": "forms/form_fields.inc.json",
35
+ "@->contentpath": "radio-group",
36
+ "@->overrides": [
37
+ {
38
+ "@->contentpath": "isRequired",
39
+ "@->value": false
40
+ }
41
+ ]
42
+ },
43
+ {
44
+ "@->jsoninclude": "forms/form_fields.inc.json",
45
+ "@->contentpath": "checkbox",
46
+ "@->overrides": [
47
+ {
48
+ "@->contentpath": "isRequired",
49
+ "@->value": false
50
+ }
51
+ ]
52
+ },
33
53
  {
34
54
  "@->jsoninclude": "forms/form_fields.inc.json",
35
55
  "@->contentpath": "checkbox",
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,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
1
+ {"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonUrl":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":true,"type":{"isChoice":true,"asString":"checkbox"},"name":"interessen","label":"Wählen Sie Ihre Interessen","isMeta":false,"description":"Bitte kreuzen Sie alle Interessen an, die auf Sie zutreffen. Ihre Auswahl hilft uns, Ihnen relevante Inhalte anzubieten.","isRequired":false,"options":[{"value":"sport","label":"sport","title":"sport","isSelected":false},{"value":"musik","label":"musik","title":"musik","isSelected":false},{"value":"lesen","label":"lesen","title":"lesen","isSelected":false},{"value":"reisen","label":"reisen","title":"reisen","isSelected":false},{"value":"kochen","label":"kochen","title":"kochen","isSelected":false},{"value":"filme","label":"filme","title":"filme","isSelected":false},{"value":"tanzen","label":"tanzen","title":"tanzen","isSelected":false},{"value":"fotografie","label":"fotografie","title":"fotografie","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":true,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":true,"type":{"isChoice":true,"isRadioChoice":true,"asString":"radio"},"name":"lieblingsfarbe","label":"Wählen Sie Ihre Lieblingsfarbe","isMeta":false,"description":"Bitte wählen Sie eine der folgenden Farben aus.","isRequired":false,"options":[{"value":"rot","label":"rot","title":"rot","isSelected":false},{"value":"blau","label":"blau","title":"blau","isSelected":false},{"value":"grün","label":"grün","title":"grün","isSelected":false}]},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":false},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
package/src/stories/views/components/forms/choice.hbs CHANGED
@@ -10,11 +10,17 @@
10
10
  >
11
11
  <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
12
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",""]'}}"
13
- :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
13
+ {{#if _required}}
14
+ :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
15
+ {{/if}}
14
16
  {{#if _inGroup }}
15
- @change="anyChecked()"
17
+ {{#if _required}}
18
+ @change="anyChecked()"
19
+ {{/if}}
16
20
  {{else}}
17
- @change="validateChoice()"
21
+ {{#if _required}}
22
+ @change="validateChoice()"
23
+ {{/if}}
18
24
  {{/if}}
19
25
  id="input{{getRandom}}"
20
26
  {{#if _required}}
package/src/stories/views/components/forms/choiceGroup.hbs CHANGED
@@ -25,7 +25,7 @@
25
25
  {{> components/forms/choice
26
26
  _type=../_type
27
27
  _name=../_name
28
- _required=(if ../_isRadio ../_required false)
28
+ _required=(if ../_isRadio ../_required)
29
29
  _value=this.value
30
30
  _inGroup=true
31
31
  _label=this.label
package/src/stories/views/components/forms/contactForm.alpine.js CHANGED
@@ -134,7 +134,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
134
134
  break;
135
135
  default:
136
136
  console.log("default");
137
- replaceAnimated(
137
+ this.replaceAnimated(
138
138
  this.formWrapper,
139
139
  this.form.querySelector('#errorMessage').innerHTML,
140
140
  true
@@ -142,7 +142,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
142
142
  break;
143
143
  }
144
144
  } else {
145
- replaceAnimated(this.formWrapper, data, true);
145
+ this.replaceAnimated(this.formWrapper, data, true);
146
146
  }
147
147
  /*
148
148
  if (eventOnSuccess) {
@@ -158,7 +158,7 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
158
158
  })
159
159
  .catch((error) => {
160
160
  console.error('Fail:', error);
161
- replaceAnimated(
161
+ this.replaceAnimated(
162
162
  this.formWrapper,
163
163
  '<div class="c-form success">Das hat leider nicht funktioniert!</div>',
164
164
  true