From 253625b6bcacf57ebbced91b7990b97815e89d2c Mon Sep 17 00:00:00 2001
From: Antonino Del Fiume <antonino.delfiume@bsi-software.com>
Date: Mon, 20 Jan 2025 15:53:20 +0100
Subject: [PATCH] Add info text and tooltip above the field

---
 .../form/checkbox/prototype/template.twig     | 51 ++++++++++---------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/content-elements/form/checkbox/prototype/template.twig b/content-elements/form/checkbox/prototype/template.twig
index a19f0f2..7e609ba 100644
--- a/content-elements/form/checkbox/prototype/template.twig
+++ b/content-elements/form/checkbox/prototype/template.twig
@@ -1,26 +1,31 @@
-{% macro render(elementId = null, elementPartId = null, formTextPartId = null, errorRequiredPartId = null, labelText = null, infoText = null, errorRequiredText = null) %}{% apply spaceless %}
-    {% deprecated 'The usage of "element.render(...)" is deprecated, use "include ... with {...}" instead. For detailed information, visit: https://github.com/bsi-software/bsi-cx-design-master-template-web/blob/main/MIGRATION_GUIDE.md"' %}
-    {% include './template.twig' %}
-{% endapply %}{% endmacro %}
+{% macro render(elementId = null, elementPartId = null, formTextPartId = null, errorRequiredPartId = null, labelText = null, infoText = null, errorRequiredText = null) %}
+	{% apply spaceless %}
+	{% deprecated 'The usage of "element.render(...)" is deprecated, use "include ... with {...}" instead. For detailed information, visit: https://github.com/bsi-software/bsi-cx-design-master-template-web/blob/main/MIGRATION_GUIDE.md"' %}
+	{% include './template.twig' %}
+	{% endapply %}
+{% endmacro %}
 
 {% apply spaceless %}
-    {% set checkboxElementId = elementId ?: 'checkbox-24CNSe' %}
-    {% set checkboxElementPartId = elementPartId ?: 'checkbox-part-Nls88s' %}
-    {% set checkboxFormTextPartId = formTextPartId ?: 'checkbox-part-text-6ycJm4' %}
-    {% set checkboxErrorRequiredPartId = errorRequiredPartId ?: 'checkbox-part-error-required-iYG8Ss' %}
-    {% set checkboxLabelText = (labelText ?: properties.checkboxLabelText) ?: bsi_cx_lorem(3) %}
-    {% set checkboxInfoText = (infoText ?: properties.checkboxInfoText) ?: "" %}
-    {% set checkboxErrorRequiredText = (errorRequiredText ?: properties.errorRequiredText) ?: 'Bitte füllen Sie dieses Feld aus.' %} {# TODO: make translatable #}
+{% set checkboxElementId = elementId ?: 'checkbox-24CNSe' %}
+{% set checkboxElementPartId = elementPartId ?: 'checkbox-part-Nls88s' %}
+{% set checkboxFormTextPartId = formTextPartId ?: 'checkbox-part-text-6ycJm4' %}
+{% set checkboxErrorRequiredPartId = errorRequiredPartId ?: 'checkbox-part-error-required-iYG8Ss' %}
+{% set checkboxLabelText = (labelText ?: properties.checkboxLabelText) ?: bsi_cx_lorem(3) %}
+{% set checkboxInfoText = (infoText ?: properties.checkboxInfoText) ?: "" %}
+{% set checkboxErrorRequiredText = (errorRequiredText ?: properties.errorRequiredText) ?: 'Bitte füllen Sie dieses Feld aus.' %}
+{# TODO: make translatable #}
 
-    <div x-data="checkbox" data-bsi-element="{{ checkboxElementId }}" class="{{ 'bsi-element-' ~ checkboxElementId }} bsi-form-checkbox-element mb-4 bsi-form-element form-check bsi-form-flex-label bsi-checkbox-spacing-visible bsi-form-switch-hide" data-bsi-element-part="{{ checkboxElementPartId }}">
-        <div class="bsi-form-input-element">
-            <input x-on:change="validateInput" class="form-check-input form-checkbox-input" type="checkbox" id="switch">
-            <div class="checkbox-label-and-tooltip">
-                <label class="form-check-label" for="switch">{{ checkboxLabelText }}</label>
-                <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ checkboxInfoText }}"></i>
-            </div>
-            <div data-bsi-element-part="{{ checkboxFormTextPartId }}" class="form-text">{{ checkboxInfoText }}</div>
-            <div data-bsi-element-part="{{ checkboxErrorRequiredPartId }}" class="invalid-feedback"> {{ checkboxErrorRequiredText }} </div>
-        </div>
-    </div>
-{% endapply %}
\ No newline at end of file
+<div x-data="checkbox" data-bsi-element="{{ checkboxElementId }}" class="{{ 'bsi-element-' ~ checkboxElementId }} bsi-form-checkbox-element mb-4 bsi-form-element form-check bsi-form-flex-label bsi-checkbox-spacing-visible bsi-form-switch-hide" data-bsi-element-part="{{ checkboxElementPartId }}">
+	<div class="bsi-form-input-element">
+		<div class="checkbox-label-and-tooltip">
+			<div tabindex = "0" data-bsi-element-part="{{ checkboxFormTextPartId }}" class="form-text">{{ checkboxInfoText }}</div>
+			<i tabindex = "0" class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ checkboxInfoText }}"></i>
+		</div>
+		<input tabindex = "0" x-on:change="validateInput" class="form-check-input form-checkbox-input" type="checkbox" id="switch">
+		<label tabindex = "0" class="form-check-label" for="switch">{{ checkboxLabelText }}</label>
+		<div tabindex = "0" data-bsi-element-part="{{ checkboxErrorRequiredPartId }}" class="invalid-feedback">
+			{{ checkboxErrorRequiredText }}
+		</div>
+	</div>
+</div>
+{% endapply %}