hr-design-system-handlebars 1.102.0 → 1.102.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.102.1 (Tue Sep 24 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3306: add checkbox field [#1075](https://github.com/mumprod/hr-design-system-handlebars/pull/1075) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.102.0 (Tue Sep 24 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1862,6 +1862,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .flex-none {
   flex: none;
 }
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
 .shrink {
   flex-shrink: 1;
 }
@@ -2308,6 +2311,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-border-opacity: 1;
   border-color: rgba(59, 130, 246, var(--tw-border-opacity));
 }
+.border-blue-science-hex {
+  --tw-border-opacity: 1;
+  border-color: rgba(0, 109, 193, var(--tw-border-opacity));
+}
 .border-brandnavigation-border-color {
   border-color: #005293;
   border-color: var(--color-brandnavigation-border-color);
@@ -3476,7 +3483,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727170647026;
+  counter-reset: cnt1727184436170;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3884,7 +3891,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727170647026 1;
+  counter-increment: cnt1727184436170 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3900,7 +3907,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1727170647026);
+  content: counter(cnt1727184436170);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4023,6 +4030,19 @@ select[\:has\(option\:checked\[value\%3D\%22\%22\]\)] {
 select:has(option:checked[value=""]) {
   color: transparent;
 }
+input[type="checkbox"]:checked::after {
+        position: absolute;
+        content: '';
+        width: 15px;
+        height: 6px;
+        background: transparent;
+        top: 7px;
+        left: 3px;
+        border: 3px solid white;
+        border-top: none;
+        border-right: none;
+        transform: rotate(-45deg);
+    }
 .\[-T\:\+Z\] {
   --t: +Z;
 }
@@ -5790,6 +5810,13 @@ select:has(option:checked[value=""]) {
 .last-of-type\:pb-3:last-of-type {
   padding-bottom: 0.75rem;
 }
+.checked\:border-transparent:checked {
+  border-color: transparent;
+}
+.checked\:bg-blue-congress-hex:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
+}
 .empty\:hidden:empty {
   display: none;
 }
@@ -7122,6 +7149,10 @@ select:has(option:checked[value=""]) {
     row-gap: 3.5rem;
   }
 
+  .md\:gap-y-4 {
+    row-gap: 1rem;
+  }
+
   .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.75rem * var(--tw-space-x-reverse));

package/dist/assets/js/components/forms/inputHandler.alpine.js

@@ -1,22 +1,27 @@
-export default function inputHandler(element, errorMandatory, errorEmail, isEmail = false, prefilledText = '') {
+export default function inputHandler(element, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
         valid: false, 
         wasFocused: false, 
         isFocused: false,
         validEmail: false,
+        isChecked: false,
         errorMessage() { 
-            if( Boolean(isEmail)){
+            if( type == "email"){
                 return !this.valid ? errorMandatory : errorEmail
-            } else {
+            } 
+            else {
                 return errorMandatory
             }
         },
-        hideDescription() { 
-            if( Boolean(isEmail)){
-                return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))
-            } else {
-                return Boolean(!this.valid && this.wasFocused && !this.isFocused)
+        hideDescription() {
+            switch (type) {
+                case "email":
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused));
+                case "checkbox":
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked);
+                default:
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused);
             }
         },
         hideError() { 

package/dist/views/components/forms/choice.hbs

@@ -0,0 +1,97 @@
+<div class="relative flex flex-col w-full mb-6 gap-y-3 md:gap-y-4" 
+   ax-load
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
+   x-ignore
+>
+
+<div class="flex flex-row items-center w-full gap-x-4">
+
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
+      :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
+      @change="validateInput"
+      x-model="isChecked"
+      id="input{{getRandom}}"
+      {{#if _required}}
+         @focus="isFocused = true"
+         @blur="wasFocused = true; isFocused=false"
+      {{/if}}
+      type="{{#if _type}}{{_type}}{{/if}}"
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+         title="{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _formField.forHtmlAttribute}}
+         value="{{_formField.forHtmlAttribute}}"
+      {{else}}
+         {{#if _value}}
+            value="{{_value}}"
+            {{else}}
+            value="{{_defaultValue}}"
+         {{/if}}
+      {{/if}}
+      {{#if _required}} required{{/if}}
+      {{#unless _multipleChoice}}
+         {{#if _required}}
+            required
+         {{/if}}
+      {{/unless}}
+      {{#if _formField.rawAsBoolean}}
+         checked
+      {{else}}
+         {{#if _selected}}
+            checked
+         {{/if}}
+      {{/if~}}
+   >
+      
+  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
+      {{#if _hasBody}}
+        {{decorator_body}}{{#if _required}}*{{/if}}
+      {{else}}
+        {{#if _locaKey}}
+            {{loca _locaKey}}{{#if _required}}*{{/if}}
+        {{else}}
+            {{#if _label}}
+                {{{_label}}}{{#if _required}}*{{/if}}
+            {{/if}}
+        {{/if}}
+      {{/if}}
+   </label>
+   
+   {{#if _required}}
+      <div class="flex items-center self-start justify-center">
+         <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
+            {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
+         </div>
+      </div>
+   {{/if}}
+
+</div>
+
+   <div class="flex items-end justify-between h-5 font-heading">     
+      {{#if _description}}  
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      {{/if}}
+   </div>
+
+   <div class="hidden" >
+      <b>DEBUGG</b>
+      <div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+      <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>    
+   </div> 
+   
+
+   
+</div>

package/dist/views/components/forms/fields.hbs

@@ -70,7 +70,7 @@
 
                     }}
                 {{else}}
-                    {{~> modules/forms/choice
+                    {{~> components/forms/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -79,6 +79,7 @@
                         _value=this.options.[0].value
                         _required=this.isRequired
                         _selected= this.options.[0].isSelected
+                        _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}

package/dist/views/components/forms/input.hbs

@@ -1,6 +1,6 @@
 <div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
    ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-ignore
    >
    <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" 

package/dist/views_static/components/forms/choice.hbs

@@ -0,0 +1,97 @@
+<div class="relative flex flex-col w-full mb-6 gap-y-3 md:gap-y-4" 
+   ax-load
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
+   x-ignore
+>
+
+<div class="flex flex-row items-center w-full gap-x-4">
+
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
+      :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
+      @change="validateInput"
+      x-model="isChecked"
+      id="input{{getRandom}}"
+      {{#if _required}}
+         @focus="isFocused = true"
+         @blur="wasFocused = true; isFocused=false"
+      {{/if}}
+      type="{{#if _type}}{{_type}}{{/if}}"
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+         title="{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _formField.forHtmlAttribute}}
+         value="{{_formField.forHtmlAttribute}}"
+      {{else}}
+         {{#if _value}}
+            value="{{_value}}"
+            {{else}}
+            value="{{_defaultValue}}"
+         {{/if}}
+      {{/if}}
+      {{#if _required}} required{{/if}}
+      {{#unless _multipleChoice}}
+         {{#if _required}}
+            required
+         {{/if}}
+      {{/unless}}
+      {{#if _formField.rawAsBoolean}}
+         checked
+      {{else}}
+         {{#if _selected}}
+            checked
+         {{/if}}
+      {{/if~}}
+   >
+      
+  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
+      {{#if _hasBody}}
+        {{decorator_body}}{{#if _required}}*{{/if}}
+      {{else}}
+        {{#if _locaKey}}
+            {{loca _locaKey}}{{#if _required}}*{{/if}}
+        {{else}}
+            {{#if _label}}
+                {{{_label}}}{{#if _required}}*{{/if}}
+            {{/if}}
+        {{/if}}
+      {{/if}}
+   </label>
+   
+   {{#if _required}}
+      <div class="flex items-center self-start justify-center">
+         <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
+            {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
+         </div>
+      </div>
+   {{/if}}
+
+</div>
+
+   <div class="flex items-end justify-between h-5 font-heading">     
+      {{#if _description}}  
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      {{/if}}
+   </div>
+
+   <div class="hidden" >
+      <b>DEBUGG</b>
+      <div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+      <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>    
+   </div> 
+   
+
+   
+</div>

package/dist/views_static/components/forms/fields.hbs

@@ -70,7 +70,7 @@
 
                     }}
                 {{else}}
-                    {{~> modules/forms/choice
+                    {{~> components/forms/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -79,6 +79,7 @@
                         _value=this.options.[0].value
                         _required=this.isRequired
                         _selected= this.options.[0].isSelected
+                        _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}

package/dist/views_static/components/forms/input.hbs

@@ -1,6 +1,6 @@
 <div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
    ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-ignore
    >
    <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" 

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.102.0",
+  "version": "1.102.1",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/css/custom-utilities.css

@@ -457,6 +457,18 @@
     select:has(option:checked[value=""]) {
         @apply text-transparent
     }
-    
 
+    input[type="checkbox"]:checked::after {
+        position: absolute;
+        content: '';
+        width: 15px;
+        height: 6px;
+        background: transparent;
+        top: 7px;
+        left: 3px;
+        border: 3px solid white;
+        border-top: none;
+        border-right: none;
+        transform: rotate(-45deg);
+    }
 }

package/src/assets/fixtures/forms/form_checkbox.json

@@ -0,0 +1,18 @@
+{
+    "fields":[
+                {
+                   "@->jsoninclude": "forms/form_fields.inc.json",
+                   "@->contentpath": "checkbox"
+                },
+                {
+                  "@->jsoninclude": "forms/form_fields.inc.json",
+                  "@->contentpath": "checkbox",
+                  "@->overrides": [
+                     {
+                        "@->contentpath": "label",
+                        "@->value": "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."
+                     }
+                  ]
+                }
+             ]
+ }

package/src/assets/fixtures/forms/form_fields.inc.json

@@ -80,6 +80,29 @@
         "rows": "10",
         "counter": true
     },
+    "checkbox":
+    {
+        "isGrouped":false,
+        "type":{
+            "isChoice":true,
+            "asString":"checkbox"
+        },
+        "name":"checkbox",
+        "label":"Ich bin damit einverstanden.",
+        "isMeta":false,
+        "description":"Das ist der Beschreibungstext von Checkbox",
+        "isRequired":true,
+        "options":[
+            {
+                "value":"value0",
+                "isSelected":false
+            },
+            {
+                "value":"value1",
+                "isSelected":false
+            }
+        ]
+    },
     "select": {
         "type": {
             "isSelect": true,

package/src/stories/views/components/forms/choice.hbs

@@ -0,0 +1,97 @@
+<div class="relative flex flex-col w-full mb-6 gap-y-3 md:gap-y-4" 
+   ax-load
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
+   x-ignore
+>
+
+<div class="flex flex-row items-center w-full gap-x-4">
+
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"
+      :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
+      @change="validateInput"
+      x-model="isChecked"
+      id="input{{getRandom}}"
+      {{#if _required}}
+         @focus="isFocused = true"
+         @blur="wasFocused = true; isFocused=false"
+      {{/if}}
+      type="{{#if _type}}{{_type}}{{/if}}"
+      name="{{#if _name}}{{_name}}{{/if}}"
+      {{#if _locaKey}}
+         title="{{loca _locaKey}}{{#if _required}}*{{/if}}"
+      {{else}}
+         {{#if _label}}
+         title="{{_label}}{{#if _required}}*{{/if}}"
+         {{/if}}
+      {{/if}}
+      {{#if _formField.forHtmlAttribute}}
+         value="{{_formField.forHtmlAttribute}}"
+      {{else}}
+         {{#if _value}}
+            value="{{_value}}"
+            {{else}}
+            value="{{_defaultValue}}"
+         {{/if}}
+      {{/if}}
+      {{#if _required}} required{{/if}}
+      {{#unless _multipleChoice}}
+         {{#if _required}}
+            required
+         {{/if}}
+      {{/unless}}
+      {{#if _formField.rawAsBoolean}}
+         checked
+      {{else}}
+         {{#if _selected}}
+            checked
+         {{/if}}
+      {{/if~}}
+   >
+      
+  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-black md:text-sm font-headingSerif ">
+      {{#if _hasBody}}
+        {{decorator_body}}{{#if _required}}*{{/if}}
+      {{else}}
+        {{#if _locaKey}}
+            {{loca _locaKey}}{{#if _required}}*{{/if}}
+        {{else}}
+            {{#if _label}}
+                {{{_label}}}{{#if _required}}*{{/if}}
+            {{/if}}
+        {{/if}}
+      {{/if}}
+   </label>
+   
+   {{#if _required}}
+      <div class="flex items-center self-start justify-center">
+         <div class="hidden w-5 h-5 font-bold" :class="{'hidden': hideError() }">
+            {{> components/base/image/icon _icon="info2" _addClass="w-5 h-5 fill-red-700"}}
+         </div>
+      </div>
+   {{/if}}
+
+</div>
+
+   <div class="flex items-end justify-between h-5 font-heading">     
+      {{#if _description}}  
+         <div class="text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+      {{/if}}
+      {{#if _required}}
+         <div class="hidden text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      {{/if}}
+   </div>
+
+   <div class="hidden" >
+      <b>DEBUGG</b>
+      <div>isChecked:<span x-text="isChecked" class="font-bold" :class="isChecked ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+      <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
+      <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>    
+   </div> 
+   
+
+   
+</div>

package/src/stories/views/components/forms/fields.hbs

@@ -70,7 +70,7 @@
 
                     }}
                 {{else}}
-                    {{~> modules/forms/choice
+                    {{~> components/forms/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -79,6 +79,7 @@
                         _value=this.options.[0].value
                         _required=this.isRequired
                         _selected= this.options.[0].isSelected
+                        _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}

package/src/stories/views/components/forms/fixtures/form_checkbox.json

@@ -0,0 +1 @@
+{"fields":[{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true,"options":[{"value":"value0","isSelected":false},{"value":"value1","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,"options":[{"value":"value0","isSelected":false},{"value":"value1","isSelected":false}]}]}

package/src/stories/views/components/forms/form.mdx

@@ -1,5 +1,5 @@
 import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
-import * as formStories from './form.stories'
+import * as formStories from './form_textfields.stories'
 
 <Meta of={formStories} />
 

package/src/stories/views/components/forms/form_checkbox.stories.js

@@ -0,0 +1,34 @@
+
+import checkboxJson from './fixtures/form_checkbox.json'
+
+const handlebars = require('hrHandlebars')
+
+
+export default {
+    title: 'Komponenten/Formulare',
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page">
+                        <div class="grid bg-white grid-article">
+                            ${Story()}
+                        </div>
+                    </div>`
+        },
+    ],
+}
+const Template = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#>components/forms/backgroundBox  }}  
+            <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" >     
+                {{> components/forms/fields }}
+            </form>
+    {{/components/forms/backgroundBox }}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export const Checkbox = {
+    render: Template.bind({}),
+    name: 'Checkbox',
+    args: checkboxJson,
+}

package/src/stories/views/components/forms/form_select.stories.js

@@ -0,0 +1,34 @@
+
+import selectJson from './fixtures/form_select.json'
+
+const handlebars = require('hrHandlebars')
+
+
+export default {
+    title: 'Komponenten/Formulare',
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page">
+                        <div class="grid bg-white grid-article">
+                            ${Story()}
+                        </div>
+                    </div>`
+        },
+    ],
+}
+const Template = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#>components/forms/backgroundBox  }}  
+            <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" >     
+                {{> components/forms/fields }}
+            </form>
+    {{/components/forms/backgroundBox }}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export const Select = {
+    render: Template.bind({}),
+    name: 'Select',
+    args: selectJson,
+}

package/src/stories/views/components/forms/{form.stories.js → form_textfields.stories.js}

@@ -4,8 +4,6 @@ import inputMandatoryJson from './fixtures/form_input_mandatory.json'
 import inputPrefilledJson from './fixtures/form_input_prefilled.json'
 import textareaJson from './fixtures/form_textarea.json'
 import emailJson from './fixtures/form_email.json'
-import selectJson from './fixtures/form_select.json'
-
 
 const handlebars = require('hrHandlebars')
 
@@ -69,8 +67,3 @@ export const Textarea = {
     name: 'Textarea',
     args: textareaJson,
 }
-export const Select = {
-    render: Template.bind({}),
-    name: 'Select',
-    args: selectJson,
-} 

package/src/stories/views/components/forms/input.hbs

@@ -1,6 +1,6 @@
 <div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
    ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_errorEmail}}',{{#if _isEmail}}true{{else}}false{{/if}},'{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-ignore
    >
    <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" 

package/src/stories/views/components/forms/inputHandler.alpine.js

@@ -1,22 +1,27 @@
-export default function inputHandler(element, errorMandatory, errorEmail, isEmail = false, prefilledText = '') {
+export default function inputHandler(element, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
         valid: false, 
         wasFocused: false, 
         isFocused: false,
         validEmail: false,
+        isChecked: false,
         errorMessage() { 
-            if( Boolean(isEmail)){
+            if( type == "email"){
                 return !this.valid ? errorMandatory : errorEmail
-            } else {
+            } 
+            else {
                 return errorMandatory
             }
         },
-        hideDescription() { 
-            if( Boolean(isEmail)){
-                return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused))
-            } else {
-                return Boolean(!this.valid && this.wasFocused && !this.isFocused)
+        hideDescription() {
+            switch (type) {
+                case "email":
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.validEmail && this.wasFocused && !this.isFocused));
+                case "checkbox":
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked);
+                default:
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused);
             }
         },
         hideError() {