[#2638] Update design for radio group

src/open_inwoner/components/templates/components/Form/ChoiceRadioStacked.html

@@ -0,0 +1,20 @@
+{% load l10n form_tags icon_tags %}
+
+
+{% spaceless %}
+
+{% if icon_class %}
+{% icon icon_class %}
+{% endif %}
+
+{% initial_match as checked %}
+<label class="radio__label" for="id_{{ name }}_{{ index }}">{{ choice.1 }}</label>
+<input
+    class="radio__input"
+    type="radio"
+    name="{{ name }}"
+    value="{{ choice.0|unlocalize }}"
+    id="id_{{ name }}_{{ index }}"
+    {% if choice.0 in data or checked %}checked="checked"{% endif %}
+/>
+{% endspaceless %}

src/open_inwoner/components/templatetags/form_tags.py

@@ -263,6 +263,20 @@ def choice_radio(choice, **kwargs):
     return {**kwargs, "choice": choice}
 
 
+@register.inclusion_tag("components/Form/ChoiceRadioStacked.html")
+def choice_radio_stacked(choice, **kwargs):
+    """
+    Displaying a radio input that is rendered from a choice field.
+
+    Usage:
+        {% choice_radio form.radio_field %}
+
+    Variables:
+        + choice: The choice that needs to be rendered.
+    """
+    return {**kwargs, "choice": choice}
+
+
 @register.inclusion_tag(WIDGET_TEMPLATES["RADIO"])
 def choice_radio_multiple(field, **kwargs):
     """
@@ -473,3 +487,12 @@ def render(self, context):
         corrected_kwargs["classes"] = get_form_classes(**corrected_kwargs)
         rendered = render_to_string("components/Form/Form.html", corrected_kwargs)
         return rendered
+
+
+@register.filter
+def get_icon_class(key: str) -> str:
+    mapping = {
+        "Alleen digitaal": "computer",
+        "Digitaal en per brief": "mail",
+    }
+    return mapping.get(key, None)

src/open_inwoner/scss/components/Form/Radio.scss

@@ -45,3 +45,25 @@
     content: '\e876';
   }
 }
+
+.radios {
+  &--spaced {
+    display: flex;
+    justify-content: space-evenly;
+  }
+}
+
+.radio-group {
+  padding: var(--spacing-large);
+
+  &--stacked {
+    display: inline-block;
+    text-align: center;
+  }
+  .radio__label {
+    display: block;
+  }
+  .radio__input {
+    display: inline-block;
+  }
+}

src/open_inwoner/templates/pages/profile/notifications.html

@@ -1,5 +1,5 @@
 {% extends 'master.html' %}
-{% load i18n l10n grid_tags form_tags icon_tags button_tags %}
+{% load i18n l10n grid_tags form_tags icon_tags button_tags icon_tags %}
 
 {% block content %}
     {% render_grid %}
@@ -49,8 +49,17 @@ <h3 class="utrecht-heading-3">{% trans "Ontvang berichten over" %}</h3>
                 </div>
             </div>
 
+            {# Choice of zaken notification channel #}
             <h3 class="utrecht-heading-4">{% trans "How do you want to receive notifications about cases?" %}</h3>
-            {% choice_radio_multiple form.case_notification_channel %}
+                <div class="radios radios--spaced">
+                    {% with form.case_notification_channel as field %}
+                        {% for choice in field.field.choices %}
+                        <div class="radio-group radio-group--stacked choice-list-multiple__item">
+                            {% choice_radio_stacked choice=choice name=field.name data=field.value index=forloop.counter initial=field.form.initial icon_class=choice.1|get_icon_class %}
+                        </div>
+                    {% endfor %}
+                    {% endwith %}
+                </div>
 
             <div class="form__actions form__actions--fullwidth">
                 {% button text=_("Sla wijzigingen op") primary=True type="submit" form_id="change-notifications" %}