hr-design-system-handlebars 1.101.3 → 1.102.1

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

@@ -1,30 +1,70 @@
-<div class="relative flex flex-col w-full mb-5 " ax-load=""
-    x-data="inputHandler('select9339','Bitte wählen Sie eine Option aus', false, '')">
+<div class="relative flex flex-col w-full mb-5 "
+   ax-load
+   x-data="selectHandler('select{{nextRandom}}')"
+   x-ignore
+>
     <select
-        class="relative w-full h-12 pt-4 pl-4 text-gray-800 border-blue-500 appearance-none bg- pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
-        :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }" x-model="select9339"
-        id="select9339" name="options" title="Wählen Sie eine Option" aria-label="Wählen Sie eine Option" >
-        <option value="" selected></option> 
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-        <option value="3">Option 3</option> 
+        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"
+        :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
+        x-model="select{{getRandom}}"
+        id="select{{getRandom}}"
+        title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
+        name="{{#if _name}}{{_name}}{{/if}}"
+        {{#if _required}}required{{/if}}
+        {{#if _required}}
+            @focus="isFocused = true;"
+            @blur="wasFocused = true; isFocused=false"
+            x-on:change ="select{{getRandom}}.value != '' ? valid = true : valid = false;"
+        {{/if}}
+        >
+        <option  class="text-white bg-gray-400" value=""{{#if _required}} disabled{{/if}} selected>
+            {{#if _locaKey}}
+                {{loca _locaKey}}{{#if _required}}*{{/if}}
+            {{else}}
+                {{#if _label}}
+                    {{_label}}{{#if _required}}*{{/if}}
+                {{/if}}
+            {{/if}}
+        </option>
+        {{#if _options}}
+            {{~#each _options~}}
+                <option class="text-black" value="{{this.id}}" {{#if this.isSelected}}selected{{/if}}>{{this.name}}</option>
+            {{~/each~}}
+        {{else}}
+            {{#each _items}}
+                <option class="text-black" value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
+            {{/each}}
+        {{/if}}
     </select>
-    <label for="select9339"
+    <label for="select{{getRandom}}"
         class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-500
-              
               peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
-              
-           
-
               origin-top-left transform transition-transform 
-">
-        
-    Wen möchten Sie erreichen?*
+    ">      
+        {{_label}}{{#if _required}}*{{/if}}
     </label>
-    <!-- Optional custom dropdown arrow icon -->
-    <div class="absolute transform -translate-y-1/2 pointer-events-none right-3 top-1/2">
-        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-        </svg>
+    <div class="flex items-end justify-between h-5 font-heading">     
+        {{#if _description}}  
+            <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
+        {{/if}}
+        {{#if _required}}
+            <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+        {{/if}}
     </div>
+    <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">
+        {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-blue-500 dark:fill-text-dark "}}
+    </div>
+    <div class="hidden">
+      <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+         DEBUG
+      </div>
+      <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <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>select:<span x-text="select{{getRandom}}" class="font-bold" ></span></div>
+      </div>  
+   </div>  
 </div>

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.101.3",
+  "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

@@ -454,4 +454,21 @@
         @apply top-px scale-75 translate-y-0
     }
 
+    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

@@ -1,104 +1,144 @@
 {
-    "input-text-vorname":
-    {
-        "type":{
-            "isText":true,
-            "asString":"text"
+    "input-text-vorname": {
+        "type": {
+            "isText": true,
+            "asString": "text"
         },
-        "name":"vorname",
-        "label":"Vorname",
-        "description":"Das ist der Beschreibungstext von Vorname",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":false
-        
+        "name": "vorname",
+        "label": "Vorname",
+        "description": "Das ist der Beschreibungstext von Vorname",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": false
     },
-    "input-text-vorname-required":
-    {
-        "type":{
-            "isText":true,
-            "asString":"text"
+    "input-text-vorname-required": {
+        "type": {
+            "isText": true,
+            "asString": "text"
         },
-        "name":"vorname",
-        "label":"Vorname",
-        "description":"Das ist der Beschreibungstext (*Pflichtfeld)",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":true,
-        "maxLength":"140"
+        "name": "vorname",
+        "label": "Vorname",
+        "description": "Das ist der Beschreibungstext (*Pflichtfeld)",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "maxLength": "140"
     },
-    "input-text-nachname-required":
-    {
-        "type":{
-            "isText":true,
-            "asString":"text"
+    "input-text-nachname-required": {
+        "type": {
+            "isText": true,
+            "asString": "text"
         },
-        "name":"nachname",
-        "label":"Nachname",
-        "description":"",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":true,
-        "maxLength":"140"
+        "name": "nachname",
+        "label": "Nachname",
+        "description": "",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "maxLength": "140"
     },
-    "input-text-vorname-prefilled":
-    {
-        "type":{
-            "isText":true,
-            "asString":"text"
+    "input-text-vorname-prefilled": {
+        "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"
+        "name": "nachname",
+        "label": "Nachname",
+        "description": "Das ist der Beschreibungstext von Nachname",
+        "defaultValue": "Hier steht schon was",
+        "isHidden": false,
+        "isRequired": false,
+        "maxLength": "140"
     },
-    "input-email":
-    {
-        "type":{
-            "isText":true,
-            "isEmail":true,
-            "asString":"email"
+    "input-email": {
+        "type": {
+            "isText": true,
+            "isEmail": true,
+            "asString": "email"
         },
-        "name":"email",
-        "label":"Email",
-        "description":"Das ist der Beschreibungstext von Email",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":true,
-        "maxLength":"140"
+        "name": "email",
+        "label": "Email",
+        "description": "Das ist der Beschreibungstext von Email",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "maxLength": "140"
     },
-    "textarea":
+    "textarea": {
+        "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
+    },
+    "checkbox":
     {
+        "isGrouped":false,
         "type":{
-            "isTextarea":true,
-            "asString":"textarea"
+            "isChoice":true,
+            "asString":"checkbox"
         },
-        "name":"textarea",
-        "label":"Textarea",
-        "description":"Das ist der Beschreibungstext von Textarea",
-        "defaultValue":"",
-        "isHidden":false,
+        "name":"checkbox",
+        "label":"Ich bin damit einverstanden.",
+        "isMeta":false,
+        "description":"Das ist der Beschreibungstext von Checkbox",
         "isRequired":true,
-        "maxLength":"300",
-        "columns":"30",
-        "rows":"10",
-        "counter":true
+        "options":[
+            {
+                "value":"value0",
+                "isSelected":false
+            },
+            {
+                "value":"value1",
+                "isSelected":false
+            }
+        ]
     },
-    "select":
-    {
-        "type":{
-            "isSelect":true,
-            "asString":"select"
+    "select": {
+        "type": {
+            "isSelect": true,
+            "asString": "select"
         },
-        "name":"Select Name",
-        "label":"Select Label",
-        "description":"Das ist der Beschreibungstext von Select",
-        "defaultValue":"",
-        "isHidden":false,
-        "isRequired":false
-        
-    }           
- }
+        "name": "Select Name",
+        "label": "Wen möchten Sie erreichen?",
+        "description": "Das ist der Beschreibungstext von Select",
+        "defaultValue": "",
+        "isHidden": false,
+        "isRequired": true,
+        "options": [
+            {
+                "id": "option1",
+                "value": "option1",
+                "selected": false,
+                "label": "Option 1"
+            },
+            {
+                "id": "option2",
+                "value": "option2",
+                "selected": false,
+                "label": "Option 2"
+            },
+            {
+                "id": "option3",
+                "value": "option3",
+                "selected": false,
+                "label": "Option 3"
+            },
+            {
+                "id": "option4",
+                "value": "option4",
+                "selected": false,
+                "label": "Option 4"
+            }
+        ]
+    }
+}

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

@@ -1,8 +1,18 @@
 {
-   "fields":[
-               {
-                  "@->jsoninclude": "forms/form_fields.inc.json",
-                  "@->contentpath": "select"
-               }
+    "fields": [
+        {
+            "@->jsoninclude": "forms/form_fields.inc.json",
+            "@->contentpath": "select"
+        },
+        {
+            "@->jsoninclude": "forms/form_fields.inc.json",
+            "@->contentpath": "select",
+            "@->overrides": [
+                {
+                    "@->contentpath": "isRequired",
+                    "@->value": false
+                }
             ]
+        }
+    ]
 }

package/src/assets/js/alpine.js

@@ -20,6 +20,7 @@ AsyncAlpine.init(Alpine)
     
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
+    .data('selectHandler', ()=> import('components/forms/selectHandler.alpine.js'))
     .start()
 
 window.Alpine = Alpine

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

@@ -54,6 +54,7 @@
                     _description=this.description
                     _items=this.options
                     _required=this.isRequired
+                    _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
@@ -69,7 +70,7 @@
 
                     }}
                 {{else}}
-                    {{~> modules/forms/choice
+                    {{~> components/forms/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -78,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/fixtures/form_select.json

@@ -1 +1 @@
-{"fields":[{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Select Label","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":false}]}
+{"fields":[{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":false,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]}]}

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,
-}