From 9e8df338329a28de8a9bde1b24c86443a9172807 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 25 Sep 2020 13:02:19 +0100
Subject: [PATCH] Restore correct spacing on templates page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

During the move to GOV.UK Frontend checkboxes our template list has
started to be wrapped in a `<div>` with the `govuk-form-group` class.

This adds extra spacing, like you’d want in a regular transaction
service which might have multiple sets of form controls on a single
page.

It isn’t appropriate on our templates page, because there should be a
consistent rhythm where the space between each checkboxes is the same as
the space between the search box and the first checkbox, to the last
checkbox and the buttons. Not having this space is also consistent with
other pages with sticky grey buttons, eg the team members page.

This commit also fixes a typo in the name of one of the classes used to
control spacing between the checkboxes and search bar.
---
 app/templates/forms/fields/checkboxes/template.njk | 9 ++++++++-
 app/templates/views/templates/_template_list.html  | 7 +++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/templates/forms/fields/checkboxes/template.njk b/app/templates/forms/fields/checkboxes/template.njk
index ddd83e88c..f16afb376 100644
--- a/app/templates/forms/fields/checkboxes/template.njk
+++ b/app/templates/forms/fields/checkboxes/template.njk
@@ -6,6 +6,7 @@
 
 {#- Copied from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/template.njk
     Changes:
+    - `formGroup` option to control whether or not the checkboxes are wrapped with a `govuk-form-group` class
     - `classes` option added to `item` allow custom classes on the `.govuk-checkboxes__item` element
     - `classes` option added to `item.hint` allow custom classes on the `.govuk-hint` element (added to GOVUK Frontend in v3.5.0 - remove when we update)
     - `asList` option added the root `params` object to allow setting of the `.govuk-checkboxes` and `.govuk-checkboxes__item` element types
@@ -14,6 +15,12 @@
    instead. We need this for error messages and hints as well -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
 
+{% if 'formGroup' not in params %}
+  {% set formGroup = True %}
+{% else %}
+  {% set formGroup = params.formGroup %}
+{% endif %}
+
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
@@ -120,7 +127,7 @@
   </{{ groupElement }}>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="{% if formGroup %}govuk-form-group{% endif %} {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,
diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html
index f17fcfb07..0b30b18a1 100644
--- a/app/templates/views/templates/_template_list.html
+++ b/app/templates/views/templates/_template_list.html
@@ -23,7 +23,7 @@
     {% 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' }}">
+  <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 = [] %}
 
     {% for item in template_list %}
@@ -85,7 +85,10 @@
     {% endfor %}
 
     {% if current_user.has_permissions('manage_templates') %}
-      {{ templates_and_folders_form.templates_and_folders(param_extensions={ "items": checkboxes_data }) }}
+      {{ templates_and_folders_form.templates_and_folders(param_extensions={
+        "items": checkboxes_data,
+        "formGroup": False
+      }) }}
     {% endif %}
   </nav>
 {% endif %}