From 85e5f1e94e2a4e2ad3f773e940b5241a520df92c Mon Sep 17 00:00:00 2001
From: Nikki Ysendoorn <nikki.ysendoorn@maykinmedia.nl>
Date: Mon, 11 Mar 2024 14:53:25 +0100
Subject: [PATCH] :sparkles: [#483] add description to selectboxes and radio
 option

---
 src/formio/components/Checkbox.scss          | 10 ++++++++--
 src/formio/components/Radio.stories.js       |  1 +
 src/formio/components/Selectboxes.stories.js |  1 +
 src/formio/templates/radio.ejs               |  7 +++++++
 src/scss/components/_radio-field.scss        |  2 +-
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/formio/components/Checkbox.scss b/src/formio/components/Checkbox.scss
index 82257c24f..ab0526163 100644
--- a/src/formio/components/Checkbox.scss
+++ b/src/formio/components/Checkbox.scss
@@ -27,7 +27,7 @@
         }
       }
 
-      .utrecht-form-field__label {
+      .utrecht-form-field__label, .utrecht-form-description--openforms {
         background-color: var(--_of-utrecht-form-field-checkbox-background-color);
         --_of-checkbox-label-shift: calc(
           var(--of-utrecht-form-label-checkbox-padding-block-start) + var(--utrecht-checkbox-size)
@@ -36,7 +36,7 @@
         margin-inline-start: calc(var(--_of-checkbox-label-shift) * -1);
       }
 
-      .utrecht-form-label--checkbox {
+      .utrecht-form-label--checkbox, .utrecht-form-field-description.utrecht-form-field__description {
         padding-block-end: var(--of-utrecht-form-label-checkbox-padding-block-end);
         padding-block-start: var(--of-utrecht-form-label-checkbox-padding-block-start);
         padding-inline-end: var(--of-utrecht-form-label-checkbox-padding-inline-end);
@@ -52,6 +52,12 @@
   }
 }
 
+.openforms-theme {
+  .utrecht-custom-checkbox--openforms:not(:checked) {
+    background-color: var(--utrecht-checkbox-background-color);
+  }
+}
+
 .openforms-theme {
   .utrecht-custom-checkbox--openforms:not(:checked) {
     background-color: var(--utrecht-checkbox-background-color);
diff --git a/src/formio/components/Radio.stories.js b/src/formio/components/Radio.stories.js
index 9c5092086..d4acee9a0 100644
--- a/src/formio/components/Radio.stories.js
+++ b/src/formio/components/Radio.stories.js
@@ -21,6 +21,7 @@ export default {
           label:
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
           value: 'radioC',
+          description: 'Description optie C'
         },
       ],
     },
diff --git a/src/formio/components/Selectboxes.stories.js b/src/formio/components/Selectboxes.stories.js
index 8581391e3..1abe100f4 100644
--- a/src/formio/components/Selectboxes.stories.js
+++ b/src/formio/components/Selectboxes.stories.js
@@ -16,6 +16,7 @@ export default {
         {
           label: 'Optie B',
           value: 'selectB',
+          description: 'Description optie B'
         },
         {
           label:
diff --git a/src/formio/templates/radio.ejs b/src/formio/templates/radio.ejs
index 1540f045d..4e6e41eb9 100644
--- a/src/formio/templates/radio.ejs
+++ b/src/formio/templates/radio.ejs
@@ -22,5 +22,12 @@
     checked=true
     {% } %}
   >
+  {% if (item.description) { %}
+    <div class="utrecht-description utrecht-form-description--openforms">
+        <p class="utrecht-form-field-description utrecht-form-field__description">
+          {{ item.description }}
+        </p>
+    </div>
+  {% } %}
 </div>
 {% }) %}
diff --git a/src/scss/components/_radio-field.scss b/src/scss/components/_radio-field.scss
index d97f95fa8..07ab183ad 100644
--- a/src/scss/components/_radio-field.scss
+++ b/src/scss/components/_radio-field.scss
@@ -17,7 +17,7 @@
         margin-inline-start: var(--of-utrecht-form-label-radio-padding-inline-start);
       }
 
-      .utrecht-form-label--radio {
+      .utrecht-form-label--radio, .utrecht-form-field-description.utrecht-form-field__description {
         padding-block-end: var(--of-utrecht-form-label-radio-padding-block-end);
         padding-block-start: var(--of-utrecht-form-label-radio-padding-block-start);
         padding-inline-end: var(--of-utrecht-form-label-radio-padding-inline-end);