hr-design-system-handlebars 1.101.2 → 1.101.3

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.101.3 (Tue Sep 24 2024)
+
+#### ⚠️ Pushed to `main`
+
+- Merge branch 'main' of https://github.com/mumprod/hr-design-system-handlebars into main ([@vascoeduardo](https://github.com/vascoeduardo))
+- ✨ DPE-3290 Dropdown ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.101.2 (Mon Sep 23 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -426,7 +426,7 @@ video {
         font-stretch: condensed;
     }
 
-.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-75, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95, .peer-placeholder-shown\:translate-x-0, .peer-placeholder-shown\:translate-y-3, .peer-placeholder-shown\:scale-100, .peer-focus\:translate-x-0, .peer-focus\:scale-75 {
+.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .translate-x-0, .translate-y-0, .translate-y-12, .translate-y-3, .translate-y-8, .-rotate-45, .rotate-180, .rotate-45, .scale-100, .scale-50, .scale-75, .scale-y-100, .scale-y-90, .transform, .is-loading::after, label, .hover\:scale-105, .active\:scale-95, .peer-placeholder-shown\:translate-x-0, .peer-placeholder-shown\:translate-y-3, .peer-placeholder-shown\:scale-100, .peer-focus\:translate-x-0, .peer-focus\:translate-y-0, .peer-focus\:scale-75 {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -1136,6 +1136,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .right-0 {
   right: 0px;
 }
+.right-3 {
+  right: 0.75rem;
+}
 .right-4 {
   right: 1rem;
 }
@@ -1922,6 +1925,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-translate-y: 3rem;
   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));
 }
+.translate-y-3 {
+  --tw-translate-y: 0.75rem;
+  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));
+}
 .translate-y-8 {
   --tw-translate-y: 2rem;
   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));
@@ -1938,6 +1945,11 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-rotate: 45deg;
   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));
 }
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
 .scale-50 {
   --tw-scale-x: .5;
   --tw-scale-y: .5;
@@ -3454,7 +3466,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727102904220;
+  counter-reset: cnt1727163839066;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3862,7 +3874,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727102904220 1;
+  counter-increment: cnt1727163839066 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3878,7 +3890,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1727102904220);
+  content: counter(cnt1727163839066);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -3977,6 +3989,24 @@ article.indexTextDS .indexTextHighlighted .link {
 ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
         display: none;
     }
+/*! ****************************/
+/*! FORMULAR SELECT          */
+/*! ****************************/
+/* Custom CSS to style the label when the first empty option is selected */
+select[\:has\(option\:checked\:not\(\[value\%3D\%22\%22\]\)\)] + label {
+  top: 1px;
+  --tw-translate-y: 0px;
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  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));
+}
+select:has(option:checked:not([value=""])) + label {
+  top: 1px;
+  --tw-translate-y: 0px;
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  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));
+}
 .\[-T\:\+Z\] {
   --t: +Z;
 }
@@ -5939,6 +5969,9 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
   --tw-scale-y: 1;
   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));
 }
+.peer:focus ~ .peer-focus\:top-px {
+  top: 1px;
+}
 .peer:focus ~ .peer-focus\:-translate-y-0 {
   --tw-translate-y: -0px;
   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));
@@ -5947,6 +5980,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
   --tw-translate-x: 0px;
   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));
 }
+.peer:focus ~ .peer-focus\:translate-y-0 {
+  --tw-translate-y: 0px;
+  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));
+}
 .peer:focus ~ .peer-focus\:scale-75 {
   --tw-scale-x: .75;
   --tw-scale-y: .75;

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

@@ -47,7 +47,7 @@
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                 }}
             {{else if this.type.isSelect}}
-                {{~> modules/forms/select
+                {{~> components/forms/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"

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

@@ -0,0 +1,30 @@
+<div class="relative flex flex-col w-full mb-5 " ax-load=""
+    x-data="inputHandler('select9339','Bitte wählen Sie eine Option aus', false, '')">
+    <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> 
+    </select>
+    <label for="select9339"
+        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>
+    <!-- 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>
+</div>

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

@@ -47,7 +47,7 @@
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                 }}
             {{else if this.type.isSelect}}
-                {{~> modules/forms/select
+                {{~> components/forms/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"

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

@@ -0,0 +1,30 @@
+<div class="relative flex flex-col w-full mb-5 " ax-load=""
+    x-data="inputHandler('select9339','Bitte wählen Sie eine Option aus', false, '')">
+    <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> 
+    </select>
+    <label for="select9339"
+        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>
+    <!-- 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>
+</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.2",
+  "version": "1.101.3",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

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

@@ -446,4 +446,12 @@
     ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
         display: none;
     }
+    /*! ****************************/
+    /*! FORMULAR SELECT          */
+    /*! ****************************/
+    /* Custom CSS to style the label when the first empty option is selected */
+    select:has(option:checked:not([value=""])) + label{
+        @apply top-px scale-75 translate-y-0
+    }
+
 }

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

@@ -86,5 +86,19 @@
         "columns":"30",
         "rows":"10",
         "counter":true
-    }            
+    },
+    "select":
+    {
+        "type":{
+            "isSelect":true,
+            "asString":"select"
+        },
+        "name":"Select Name",
+        "label":"Select Label",
+        "description":"Das ist der Beschreibungstext von Select",
+        "defaultValue":"",
+        "isHidden":false,
+        "isRequired":false
+        
+    }           
  }

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

@@ -0,0 +1,8 @@
+{
+   "fields":[
+               {
+                  "@->jsoninclude": "forms/form_fields.inc.json",
+                  "@->contentpath": "select"
+               }
+            ]
+}

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

@@ -47,7 +47,7 @@
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
                 }}
             {{else if this.type.isSelect}}
-                {{~> modules/forms/select
+                {{~> components/forms/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"

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

@@ -0,0 +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}]}

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

@@ -4,6 +4,8 @@ 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')
 
@@ -66,4 +68,9 @@ export const Textarea = {
     render: Template.bind({}),
     name: 'Textarea',
     args: textareaJson,
-}
+}
+export const Select = {
+    render: Template.bind({}),
+    name: 'Select',
+    args: selectJson,
+} 

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

@@ -0,0 +1,30 @@
+<div class="relative flex flex-col w-full mb-5 " ax-load=""
+    x-data="inputHandler('select9339','Bitte wählen Sie eine Option aus', false, '')">
+    <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> 
+    </select>
+    <label for="select9339"
+        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>
+    <!-- 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>
+</div>