Revert "Re-introduce govuk checkboxes"

app/templates/views/broadcast/areas.html

@@ -1,5 +1,6 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import sticky_page_footer %}
+{% from "components/checkbox.html" import checkboxes %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/live-search.html" import live_search %}
 
@@ -16,10 +17,10 @@
     back_link=url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
   )}}
 
-  {{ live_search(target_selector='.govuk-checkboxes__item', show=show_search_form, form=search_form, label='Search by name') }}
+  {{ live_search(target_selector='.multiple-choice', show=show_search_form, form=search_form, label='Search by name') }}
 
   {% call form_wrapper() %}
-    {{ form.areas }}
+    {{ checkboxes(form.areas, hide_legend=True) }}
     {{ sticky_page_footer('Add to broadcast') }}
   {% endcall %}
 

app/templates/views/invite-user.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}

app/templates/views/manage-users/permissions.html

@@ -1,9 +1,20 @@
+{% from "components/checkbox.html" import checkbox, checkboxes_nested %}
 {% from "components/radios.html" import radio, radios, conditional_radio_panel %}
 
-{{ form.permissions_field }}
+<fieldset class="form-group">
+  <legend class="form-label heading-small">
+    Permissions
+  </legend>
+  <span class="hint">
+    All team members can see sent messages.
+  </span>
+  {% for field in form.permissions_fields %}
+    {{ checkbox(field) }}
+  {% endfor %}
+</fieldset>
 
 {% if form.folder_permissions.all_template_folders %}
-  {{ form.folder_permissions }}
+  {{ checkboxes_nested(form.folder_permissions, form.folder_permissions.children(), hide_legend=True, collapsible_opts={ 'field': 'folder' }) }}
 {% elif user and user.platform_admin %}
   <p class="bottom-gutter">
     Platform admin users can access all template folders.

app/templates/views/platform-admin/_base_template.html

@@ -1,5 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
 
 

app/templates/views/platform-admin/services.html

@@ -1,5 +1,6 @@
 {% extends "views/platform-admin/_base_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/big-number.html" import big_number, big_number_with_status %}
 {% from "components/message-count-label.html" import message_count_label %}
@@ -69,7 +70,8 @@
     {% call form_wrapper(method="get") %}
       {{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
       {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
-      {{ form.include_from_test_key }}
+      {{ checkbox(form.include_from_test_key) }}
+      </br>
       {{ govukButton({ "text": "Filter" }) }}
     {% endcall %}
   {% endset %}

app/templates/views/service-settings/email-reply-to/_verify-updates.html

@@ -1,5 +1,6 @@
 {% from "components/banner.html" import banner, banner_wrapper %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/button/macro.njk" import govukButton %}
@@ -54,7 +55,9 @@
         hint='This should be a shared inbox managed by your team, not your own email address'
       ) }}
       {% if not first_email_address and not existing_is_default %}
-        {{ form.is_default }}
+        <div class="form-group">
+          {{ checkbox(form.is_default) }}
+        </div>
       {% endif %}
       {{ page_footer('Try again') }}
     {% endcall %}

app/templates/views/service-settings/email-reply-to/add.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -23,7 +24,9 @@
       safe_error_message=True
     ) }}
     {% if not first_email_address %}
-      {{ form.is_default }}
+      <div class="form-group">
+        {{ checkbox(form.is_default) }}
+      </div>
     {% endif %}
     {{ page_footer('Add') }}
   {% endcall %}

app/templates/views/service-settings/email-reply-to/edit.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -28,7 +29,9 @@
       </p>
       {{ page_footer('Save') }}
     {% else %}
-      {{ form.is_default }}
+      <div class="form-group">
+        {{ checkbox(form.is_default) }}
+      </div>
       {{ page_footer(
         'Save',
         delete_link=url_for('.service_confirm_delete_email_reply_to', service_id=current_service.id, reply_to_email_id=reply_to_email_address_id),

app/templates/views/service-settings/email-reply-to/verify.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}

app/templates/views/service-settings/letter-contact/add.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -26,7 +27,9 @@
             highlight_placeholders=True
           ) }}
         {% if not first_contact_block %}
-          {{ form.is_default }}
+          <div class="form-group">
+            {{ checkbox(form.is_default) }}
+          </div>
         {% endif %}
         {{ page_footer('Add') }}
       {% endcall %}

app/templates/views/service-settings/letter-contact/edit.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -30,7 +31,9 @@
         This is currently your default address for {{ current_service.name }}.
       </p>
     {% else %}
-      {{ form.is_default }}
+      <div class="form-group">
+        {{ checkbox(form.is_default) }}
+      </div>
     {% endif %}
 
     {{ page_footer(

app/templates/views/service-settings/sms-sender/add.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -22,7 +23,9 @@
       hint='Up to 11 characters, letters, numbers and spaces only'
     ) }}
     {% if not first_sms_sender %}
-      {{ form.is_default }}
+      <div class="form-group">
+        {{ checkbox(form.is_default) }}
+      </div>
     {% endif %}
     {{ page_footer('Save') }}
   {% endcall %}

app/templates/views/service-settings/sms-sender/edit.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
@@ -34,7 +35,9 @@
       </p>
       {{ page_footer('Save') }}
     {% else %}
-      {{ form.is_default }}
+      <div class="form-group">
+        {{ checkbox(form.is_default) }}
+      </div>
       {% if inbound_number %}
         {{ page_footer('Save') }}
       {% else %}

app/templates/views/support/form.html

@@ -1,4 +1,5 @@
 {% extends "withoutnav_template.html" %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-footer.html" import sticky_page_footer %}
 {% from "components/page-header.html" import page_header %}

app/templates/views/templates/_template_list.html

@@ -1,15 +1,13 @@
+{% from "components/checkbox.html" import unlabelled_checkbox %}
 {% from "components/message-count-label.html" import folder_contents_count, message_count_label %}
 
-{% macro format_item_name(name, separators=True) -%}
+{% macro format_item_name(name) -%}
   {%- if name is string -%}
     {{- name -}}
   {%- else -%}
     {%- for part in name -%}
-      {{- format_item_name(part, separators) -}}
-      {%- if not loop.last -%}
-        {%- if separators %}
-        <span class="message-name-separator"></span>{%- else %} {% endif -%}
-      {% endif -%}
+      {{- format_item_name(part) -}}
+      {%- if not loop.last %} <span class="message-name-separator"></span> {% endif -%}
     {%- endfor -%}
   {% endif %}
 {%- endmacro %}
@@ -23,69 +21,37 @@
     {% endif %}
   </p>
 {% else %}
-  <nav id="template-list" class="{{ 'govuk-!-margin-top-1' if (not show_template_nav and not show_search_box) else 'govuk-!margin-top-6' }}">
-    {% set checkboxes_data = [] %}
-
+  <nav id="template-list" class="{{ 'top-gutter-5px' if (not show_template_nav and not show_search_box) else '' }}">
     {% for item in template_list %}
-
-      {% set item_link_content %}
-        {% for ancestor in item.ancestors %}
-          <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-            {{- format_item_name(ancestor.name) -}}
-          </a> <span class="message-name-separator"></span>
-        {% endfor %}
-        {% if item.is_folder %}
-          <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-            <span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
-          </a>
-        {% else %}
-          <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
-            <span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
-          </a>
+      <div class="template-list-item {% if current_user.has_permissions('manage_templates') %}template-list-item-with-checkbox{% endif %} {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
+        {% if current_user.has_permissions('manage_templates') %}
+          {{ unlabelled_checkbox(
+            id='templates-or-folder-{}'.format(item.id),
+            name='templates_and_folders',
+            data=templates_and_folders_form.is_selected(item.id),
+            value=item.id,
+          ) }}
         {% endif %}
-      {% endset %}
-
-      {% set label_content %}
-        <span class="govuk-visually-hidden">
-          {%- for ancestor in item.ancestors %}{{ format_item_name(ancestor.name, separators=False) }} {% endfor -%}
-          {{ format_item_name(item.name, separators=False) -}}
-        </span>
-      {% endset %}
-
-      {% set item_meta %}
-        <span id="{{ item.id }}-item-hint" class="govuk-hint govuk-checkboxes__hint template-list-item-hint">
+        <h2 class="message-name">
+          {% for ancestor in item.ancestors %}
+            <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+              {{- format_item_name(ancestor.name) -}}
+            </a> <span class="message-name-separator"></span>
+          {% endfor %}
+          {% if item.is_folder %}
+            <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+              <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
+            </a>
+          {% else %}
+            <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
+              <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
+            </a>
+          {% endif %}
+        </h2>
+        <p class="message-type">
           {{ item.hint }}
-        </span>
-      {% endset %}
-
-      {# create the item config now to include the label content -#}
-      {# TODO: "attributes": { "aria-describedby": item.id ~ "-hint" } needs to be added but govuk-frontend-jinja doesn't currently support this -#}
-      {% set checkbox_config = {
-        "html": label_content,
-        "label": {
-          "classes": "template-list-item-label",
-        },
-        "id": "templates-or-folder-" ~ item.id,
-        "classes": "template-list-item template-list-item-with-checkbox {}".format(
-          "template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors"),
-        "after": item_link_content ~ item_meta
-      } %}
-      {% set _ = checkboxes_data.append(checkbox_config) %}
-
-      {% if not current_user.has_permissions('manage_templates') %}
-        <div class="template-list-item {%- if item.ancestors %} template-list-item-hidden-by-default {%- else %} template-list-item-without-ancestors{%- endif %}">
-          <h2 class="message-name">
-            {{ item_link_content }}
-          </h2>
-          <p class="message-type govuk-!-margin-bottom-4">
-            {{ item.hint }}
-          </p>
-        </div>
-      {% endif %}
+        </p>
+      </div>
     {% endfor %}
-
-    {% if current_user.has_permissions('manage_templates') %}
-      {{ templates_and_folders_form.templates_and_folders(param_extensions={ "items": checkboxes_data }) }}
-    {% endif %}
   </nav>
 {% endif %}

app/templates/views/templates/manage-template-folder.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/folder-path.html" import folder_path, page_title_folder_path %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox, checkboxes %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -25,7 +26,7 @@
   {% call form_wrapper(action=url_for('main.manage_template_folder', service_id=current_service.id, template_folder_id=template_folder_id)) %}
     {{ textbox(form.name, width='1-1') }}
     {% if current_user.has_permissions("manage_service") and form.users_with_permission.all_service_users %}
-      {{ form.users_with_permission }}
+      {{ checkboxes(form.users_with_permission, collapsible_opts={ 'field': 'team member' }) }}
     {% endif %}
 
     {{ page_footer(

app/templates/views/two-factor.html

@@ -1,5 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}