hr-design-system-handlebars 1.103.5 → 1.103.6

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.103.6 (Wed Oct 02 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3301: add radio-button group [#1086](https://github.com/mumprod/hr-design-system-handlebars/pull/1086) (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.103.5 (Wed Oct 02 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3501,7 +3501,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727864887124;
+  counter-reset: cnt1727866325740;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3909,7 +3909,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727864887124 1;
+  counter-increment: cnt1727866325740 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3925,7 +3925,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1727864887124);
+  content: counter(cnt1727866325740);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4061,6 +4061,21 @@ input[type="checkbox"]:checked::after {
         border-right: none;
         transform: rotate(-45deg);
     }
+input[type="radio"]::after {
+        content: '';
+        position: absolute;
+        width: 16px; 
+        height: 16px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        background-color: #005293;
+        background-color: var(--color-primary-ds);
+        border-radius: 50%;
+    }
+input[type="radio"]:checked::after {
+        transform: translate(-50%, -50%) scale(1); 
+    }
 .\[-T\:\+Z\] {
   --t: +Z;
 }
@@ -5828,6 +5843,10 @@ input[type="checkbox"]:checked::after {
 .last-of-type\:pb-3:last-of-type {
   padding-bottom: 0.75rem;
 }
+.checked\:border-blue-congress-hex:checked {
+  --tw-border-opacity: 1;
+  border-color: rgba(0, 82, 147, var(--tw-border-opacity));
+}
 .checked\:border-transparent:checked {
   border-color: transparent;
 }
@@ -5835,6 +5854,10 @@ input[type="checkbox"]:checked::after {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
+.checked\:bg-white:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
 .empty\:hidden:empty {
   display: none;
 }

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

@@ -4,7 +4,7 @@
    x-ignore
 >
 <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
-  <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"
+  <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",""]'}}"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
       @change="validateInput"
       x-model="isChecked"

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

@@ -4,7 +4,7 @@
    x-ignore
 >
 <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
-  <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"
+  <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",""]'}}"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
       @change="validateInput"
       x-model="isChecked"

package/package.json

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

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

@@ -471,4 +471,21 @@
         border-right: none;
         transform: rotate(-45deg);
     }
+
+    input[type="radio"]::after {
+        content: '';
+        position: absolute;
+        width: 16px; 
+        height: 16px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        background-color: var(--color-primary-ds);
+        border-radius: 50%;
+    }
+    
+    input[type="radio"]:checked::after {
+        transform: translate(-50%, -50%) scale(1); 
+    }
+    
 }

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

@@ -101,10 +101,10 @@
             "asString":"checkbox"
         },
         "name":"interessen",
-        "label":"Wählen Sie Ihre 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,
+        "isRequired":true,
         "options":[
             {
                 "value":"sport",
@@ -156,6 +156,39 @@
             }
         ]
     },
+    "radio-group":
+    {
+        "isGrouped":true,
+        "type":{
+            "isChoice":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
+            }
+        ]
+    },
     "select": {
         "type": {
             "isSelect": true,

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

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

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

@@ -4,7 +4,7 @@
    x-ignore
 >
 <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
-  <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"
+  <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",""]'}}"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
       @change="validateInput"
       x-model="isChecked"

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

@@ -1 +1 @@
-{"fields":[{"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}]}]}
+{"fields":[{"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":true,"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}]}]}

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

@@ -0,0 +1 @@
+{"fields":[{"isGrouped":true,"type":{"isChoice":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}]}]}

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

@@ -0,0 +1,34 @@
+
+import radioGroupJson from './fixtures/form_radio_grouped.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 Radio = {
+    render: Template.bind({}),
+    name: 'Radio',
+    args: radioGroupJson,
+}