feat: added radio buttons to the form content type (#156)

Author: JoblersTune

web/themes/interledger/css/components/forms.css

@@ -51,6 +51,22 @@ select {
   font-size: var(--step-0);
 }
 
+.form .radio-fields {
+  width: 100%;
+}
+
+.form .radio-fields p {
+  font-size: var(--step-0);
+  margin-bottom: var(--space-xs);
+}
+
+.form .radio-fields ul {
+  list-style: none;
+  padding-left: var(--space-s);
+  margin-bottom: var(--space-xs);
+  font-size: var(--step--1);
+}
+
 @media (max-width: 768px) {
   .form {
     margin: 0 var(--step-1);

web/themes/interledger/interledger.libraries.yml

@@ -1,5 +1,5 @@
 global-styling:
-  version: 1.6.3
+  version: 1.7.0
   css:
     theme:
       css/fonts.css: {}

web/themes/interledger/templates/node--form-field.html.twig

@@ -6,6 +6,17 @@
             tabindex="{{ node.field_input_tabindex[0].value|e('html_attr') }}" 
             value="">
     </div>
+{% elseif node.field_input_type is defined and node.field_input_type[0].value == 'radio' %}
+    <div class="{{ node.field_input_class[0].value|e('html_attr') }} radio-fields"><p>{{ node.field_input_value[0].value|default('')|e('html_attr') }}</p>
+        <ul>
+            {% for radio_field in content.field_radio_option %}
+                {% if radio_field['#entity'] is defined %}
+                    {% set radio = radio_field['#entity'] %}
+                    <li>{{ drupal_entity('node', radio.id(), 'full') }}</li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    </div>
 {% else %}
     <div class="form__input">
         {% set input_type = node.field_input_type[0].value|default('text') %}
@@ -26,3 +37,4 @@
             data-umami-event="{{ node.field_umami_event.0.value|raw }}">
     </div>
 {% endif %}
+

web/themes/interledger/templates/node--radio-field.html.twig

@@ -0,0 +1,8 @@
+<input
+    type="radio" 
+    id="{{ node.field_input_id[0].value|e('html_attr') }}" 
+    name="{{ node.field_input_name[0].value|e('html_attr') }}" 
+    value="{{ node.field_input_value[0].value|default('')|e('html_attr') }}">
+<label for="{{ node.field_input_id[0].value|e('html_attr') }}">
+    {{ node.field_input_value[0].value|e }}
+</label>