[#2685] Template for inputs with parent list-item style

src/open_inwoner/accounts/templates/accounts/registration_necessary.html

@@ -8,7 +8,7 @@
             {% get_solo 'configurations.SiteConfiguration' as config %}
             <h1 class="utrecht-heading-1">{% trans "Registratie voltooien" %}</h1><br>
             {% if config.registration_text %}<p class="utrecht-paragraph">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
-            <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form" novalidate>
+            <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form form__choice-list" novalidate>
                 {% csrf_token %}
 
                 {% if form.first_name %}
@@ -71,18 +71,19 @@ <h3 class="utrecht-heading-3">{% trans "Notification preferences" %}</h3>
 
                 {# Choice of zaken notification channel #}
                 {% if form.case_notification_channel %}
-                    <h3 class="utrecht-heading-4">{% trans "How do you want to receive notifications about cases?" %}</h3>
-                        <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>
+                    <p class="utrecht-paragraph choice-list__p">{% trans "Hoe wilt u deze notificaties ontvangen?" %}</p>
+                    {% with form.case_notification_channel as field %}
+                        {% choice_list_list single=True cols=True %}
+                            {% for choice in field.field.choices %}
+                                {% choice_list_item input_type_radio=True choice=choice name=field.name data=field.value index=forloop.counter initial=field.form.initial icon_symbol=choice.1|get_icon_symbol %}
+                            {% endfor %}
+                        {% endchoice_list_list %}
+                    {% endwith %}
                 {% endif %}
 
+                <div class="choice-list__information--bottom-border">
+                </div>
+
                 {% form_actions primary_icon='east' primary_text="Voltooi registratie" fullwidth=True %}
             </form>
         {% endrender_column %}

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

@@ -0,0 +1,7 @@
+{% load l10n form_tags icon_tags %}
+
+{# List component for changing the parent styles, when child is clicked #}
+
+<ul class="choice-list {% if single %}choice-list--single{% else %}choice-list-multiple{% endif %} {% if cols %}choice-list--cols-2{% endif %}">
+    {{ contents }}
+</ul>

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

@@ -0,0 +1,33 @@
+{% load l10n form_tags icon_tags %}
+
+{# Item component for changing the parent styles, when child is clicked #}
+
+<li class="choice-list__item {% if input_type_radio %}{% else %}radiochoice-list-multiple__item{% endif %}">
+    {% if input_type_radio %}
+        <label class="choice-list__label {% if bold_label %}choice-list__label--large{% endif %}" for="id_{{ name }}_{{ index }}">
+            <input type="{% if input_type_radio %}radio{% else %}checkbox{% endif %}" class="choice-list__radio" id="id_{{ name }}_{{ index }}" name="{{ name }}" value="{{ choice.0|unlocalize }}" {% if choice.0 in data or checked %}checked="checked"{% endif %}>
+            <div class="choice-list__content">
+                {% if bold_label %}<h2 class="choice-list__heading">Kies {{ choice.1 }}</h2>{% endif %}
+                <p class="choice-list__p">{{ choice.1 }}</p>
+            </div>
+            {% if icon_symbol %}
+                {% icon icon_symbol outlined=True extra_classes="icon--large" %}
+            {% endif %}
+        </label>
+
+    {% else %}
+        <div class="choice-list-multiple__content">
+            <div class="form__control">
+                <div class="checkbox">
+                    <input type="checkbox" class="checkbox__input" id="id_{{ name }}_{{ index }}" name="{{ name }}" value="{{ choice.0|unlocalize }}" {% if choice.0 in data or checked %}checked="checked"{% endif %}>
+                    <label class="checkbox__label" for="id_{{ name }}_{{ index }}">
+                        {% if icon_symbol %}
+                            {% icon icon_symbol outlined=True extra_classes="icon--large" %}
+                        {% endif %}
+                        <p class="checkbox__p">{{ choice.1 }}</p>
+                    </label>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+</li>

src/open_inwoner/components/templatetags/form_tags.py

@@ -3,6 +3,7 @@
 from django.template.loader import render_to_string
 from django.utils.translation import gettext as _
 
+from open_inwoner.components.templatetags.helpers import create_content_wrapper
 from open_inwoner.components.utils import safe_resolve
 
 register = template.Library()
@@ -263,22 +264,48 @@ def choice_radio(choice, **kwargs):
     return {**kwargs, "choice": choice}
 
 
-@register.inclusion_tag("components/Form/ChoiceRadioStacked.html")
-def choice_radio_stacked(choice, **kwargs):
+@register.tag()
+def choice_list_list(parser, token):
+    """
+    renders a list containing list items (with inputs from a choice field.)
+
+    Usage:
+        {% choice_list_list single=True cols=False %}
+            {% for choice in field.field.choices %}
+                {% choice_list_item input_type=True choice=choice name=field.name data=field.value index=forloop.counter initial=field.form.initial icon_symbol=False %}
+            {% endfor %}
+        {% endchoice_list_list %}
+
+    Available options::
+    + single: bool | Whether the choice to be rendered can select only one option
+    - cols: bool | Whether a horizontal grid needs to be rendered with two columns
+
+    Extra context:
+        - contents: string (HTML) | this is the context between the choice_list_list and endchoice_list_list tags
+    """
+    return create_content_wrapper(
+        "choice_list_list", "components/Form/ChoiceList.html"
+    )(parser, token)
+
+
+@register.inclusion_tag("components/Form/ChoiceListItem.html")
+def choice_list_item(choice, **kwargs):
     """
-    Display radio input rendered from a choice field.
+    Display parent labels surrounding inputs rendered from a choice field.
 
     Args:
-        choice: the choice to be rendered
-        name: the name of the form field
-        data: the value of a form field field
-        index: the index of a for-loop when looping over choices
-        initial: the initial value of the field
-        icon_class: the icon to be displayed at the top of the
-            radio stack
+        + choice: the choice to be rendered
+        + name: the name of the form field
+        + data: the value of a form field field
+        - index: the index of a for-loop when looping over choices
+        - initial: the initial value of the field
+        - input_type_radio: bool | if this is true, show radiobutton, else show checkbox
+        - icon_symbol: bool | if there should be an icon, and if so: specify the icon to be displayed at the top of the input stack
+        - bold_label: bool | If the label should contain a bold heading
 
     Usage:
-        {% choice_radio_stacked choice=choice name=field.name ... icon_class=choice.1|get_icon_class %}
+        {% choice_radio_list_item input_type_radio=True choice=choice name=field.name data=field.value index=forloop.counter initial=field.form.initial icon_symbol=False bold_label=False %}
+        {% choice_radio_list_item input_type_radio=False choice=choice name=field.name data=field.value index=forloop.counter initial=field.form.initial icon_symbol=choice.1|get_icon_symbol bold_label=True %}
     """
     return {**kwargs, "choice": choice}
 
@@ -481,8 +508,9 @@ def render(self, context):
         return rendered
 
 
+# delete?
 @register.filter
-def get_icon_class(key: str) -> str:
+def get_icon_symbol(key: str) -> str:
     mapping = {
         "Alleen digitaal": "computer",
         "Digitaal en per brief": "mail",

src/open_inwoner/components/templatetags/icon_tags.py

@@ -12,7 +12,7 @@ def icon(icon, **kwargs):
     Fontawesome Brands: https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=brands
 
     Usage:
-        {% icon "arrow-forward" %}
+        {% icon "arrow-forward" outlined=True %}
 
     Variables:
         + icon: string | what icon to display.

src/open_inwoner/scss/components/File/File.scss

@@ -80,7 +80,6 @@
   }
 
   &__file + .file__data {
-    background-color: greenyellow;
     margin-top: var(--spacing-small);
   }
 

src/open_inwoner/scss/components/Form/ChoiceList.scss

@@ -2,9 +2,10 @@
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--spacing-medium);
   margin: 0;
   padding: 0;
+  width: 100%;
 
   &__heading {
     font-family: var(--font-family-heading);
@@ -48,11 +49,53 @@
     justify-content: space-between;
     flex-direction: row-reverse;
     cursor: pointer;
+    padding: var(--spacing-medium) var(--spacing-large);
+  }
+
+  &__label--large {
     padding: var(--spacing-large);
   }
 
+  &--cols-2 {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: auto auto;
+    grid-row-gap: 0;
+    grid-column-gap: var(--spacing-extra-large);
+    width: calc(100% - var(--spacing-extra-large));
+
+    .choice-list__content {
+      max-width: 100%;
+    }
+
+    & .choice-list__label {
+      flex-direction: column-reverse;
+      text-align: center;
+
+      [class*='icons'] {
+        margin-bottom: var(--spacing-small);
+      }
+
+      .choice-list__content {
+        margin-bottom: var(--spacing-large);
+      }
+    }
+
+    @media (max-width: 500px) {
+      display: flex;
+      row-gap: var(--spacing-medium);
+      width: 100%;
+    }
+  }
+
   /// Single selection radiobutton
 
+  &--single {
+    .choice-list__item {
+      min-height: initial;
+    }
+  }
+
   input[type='radio'] {
     /// Display for accessibility
     appearance: none;
@@ -76,7 +119,7 @@
   }
 
   &__item.selected {
-    border: var(--border-width-thin) solid var(--color-secondary-lighter);
+    border: var(--border-width-thin) solid var(--color-secondary);
     border-left-width: 3px;
 
     .choice-list__label {
@@ -94,15 +137,18 @@
   }
 
   &__information {
-    border-bottom: 1px solid var(--color-gray-light);
     border-top: 1px solid var(--color-gray-light);
-    margin: var(--spacing-large) 0;
-    padding: var(--spacing-large) 0;
-    max-width: var(--form-width);
+    margin: var(--spacing-large) 0 0 0;
+    padding: var(--spacing-large) 0 0 0;
 
     .choice-list__p {
       margin: var(--spacing-large) 0 0 0;
     }
+
+    &--bottom-border {
+      border-bottom: 1px solid var(--color-gray-light);
+      margin-bottom: var(--spacing-giant);
+    }
   }
 
   /// Multiple selection checkbox
@@ -125,7 +171,6 @@
 
   &-multiple__item {
     border: var(--border-width-thin) solid var(--color-white);
-    max-width: var(--form-width);
   }
 
   &-multiple__item .choice-list-multiple__content .checkbox__label {
@@ -155,7 +200,6 @@
       & .checkbox__label {
         padding-left: 0;
         padding-right: calc(2 * var(--gutter-width));
-        //position: relative;
         width: 100%;
       }
 
@@ -186,6 +230,23 @@
       left: auto;
       right: var(--spacing-medium);
     }
+
+    // Rare case: if icons would be added to checkbox list
+    .checkbox__label {
+      &:has(.icon--large) {
+        display: flex;
+        flex-direction: column;
+
+        .checkbox .checkbox__label:before {
+          position: static;
+          transform: initial;
+        }
+      }
+      [class*='icons'].icon--large {
+        position: initial;
+        transform: initial;
+      }
+    }
   }
 
   &-multiple__item input[type='checkbox'] {

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

@@ -285,6 +285,13 @@
     cursor: default;
     pointer-events: none;
   }
+
+  &__choice-list {
+    @media (max-width: 767px) {
+      gap: var(--spacing-large);
+      max-width: var(--form-width);
+    }
+  }
 }
 
 /// Specific forms

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

@@ -45,25 +45,3 @@
     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/scss/components/Icon/Icon.scss

@@ -7,3 +7,7 @@
     color: var(--color-danger);
   }
 }
+
+*[class*='icon'].icon--large {
+  font-size: 40px;
+}

src/open_inwoner/templates/pages/kvk/branches.html

@@ -5,7 +5,7 @@
     {% render_grid %}
         {% render_column start=4 span=6 %}
             <h1 class="utrecht-heading-1" id="title">{% trans "Log in" %}</h1>
-            <form method="POST" id="eherkenning-branch-form" class="form">
+            <form method="POST" id="eherkenning-branch-form" class="form  form__choice-list">
                 {% csrf_token %}
                 {% if form.branch_number.errors %}
                     {% errors errors=form.branch_number.errors %}