Update templates page

Includes:
- changes to the govukCheckboxesField class
  to allow params to be extended at render time
- updates to templates and folders CSS

app/assets/stylesheets/components/message.scss

@@ -24,6 +24,9 @@
   }
 }
 
+$message-text-left-spacing: 22px;
+$message-type-bottom-spacing: govuk-spacing(4);
+
 .message {
 
   &-name {
@@ -63,23 +66,14 @@
   }
 
   &-type {
-    color: $secondary-text-colour;
+    color: $govuk-secondary-text-colour;
-    margin: 0 0 govuk-spacing(4) 0;
+    margin: 0 0 $message-type-bottom-spacing 0;
+    padding-left: 0;
     pointer-events: none;
   }
 
 }
 
-#template-list {
-
-  margin-top: govuk-spacing(6);
-
-  &.top-gutter-5px {
-    margin-top: 5px;
-  }
-
-}
-
 .template-list {
 
   &-item {
@@ -123,6 +117,22 @@
 
     }
 
+    &-hint,
+    &-label {
+      padding-left: $message-text-left-spacing;
+    }
+
+    &-label {
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+
+    // Fix for GOVUK Frontend selector with high precendence
+    // https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/hint/_hint.scss
+    &-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.template-list-item-hint {
+      margin-bottom: $message-type-bottom-spacing;
+    }
+
   }
 
   &-folder {

app/main/forms.py

@@ -623,11 +623,34 @@ class govukCheckboxesField(govukCheckboxesMixin, SelectMultipleField):
     def get_items_from_options(self, field):
         return [self.get_item_from_option(option) for option in field]
 
+    def extend_params(self, params, extensions):
+        items = None
+        param_items = len(params['items']) if 'items' in params else 0
+
+        # split items off from params to make it a pure dict
+        if 'items' in extensions:
+            items = extensions['items']
+            del extensions['items']
+
+        # merge dicts
+        params.update(extensions)
+
+        # merge items
+        if items:
+            if 'items' not in params:
+                params['items'] = items
+            else:
+                for idx, _item in enumerate(items):
+                    if idx >= param_items:
+                        params['items'].append(items[idx])
+                    else:
+                        params['items'][idx].update(items[idx])
+
     # self.__call__ renders the HTML for the field by:
     # 1. delegating to self.meta.render_field which
     # 2. calls field.widget
     # this bypasses that by making self.widget a method with the same interface as widget.__call__
-    def widget(self, field, **kwargs):
+    def widget(self, field, param_extensions=None, **kwargs):
 
         # error messages
         error_message = None
@@ -1898,9 +1921,18 @@ class TemplateAndFoldersSelectionForm(Form):
             return self.move_to_new_folder_name.data
         return None
 
-    templates_and_folders = MultiCheckboxField('Choose templates or folders', validators=[
+    templates_and_folders = govukCheckboxesField(
-        required_for_ops('move-to-new-folder', 'move-to-existing-folder')
+        'Choose templates or folders',
-    ])
+        validators=[required_for_ops('move-to-new-folder', 'move-to-existing-folder')],
+        choices=[],  # added to keep order of arguments, added properly in __init__
+        param_extensions={
+            "fieldset": {
+                "legend": {
+                    "classes": "govuk-visually-hidden"
+                }
+            }
+        }
+    )
     # if no default set, it is set to None, which process_data transforms to '__NONE__'
     # this means '__NONE__' (self.ALL_TEMPLATES option) is selected when no form data has been submitted
     # set default to empty string so process_data method doesn't perform any transformation

app/templates/views/templates/_template_list.html

@@ -21,37 +21,58 @@
     {% endif %}
   </p>
 {% else %}
-  <nav id="template-list" class="{{ 'top-gutter-5px' if (not show_template_nav and not show_search_box) 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 = [] %}
+
     {% for item in template_list %}
-      <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') %}
+      {% set item_label_content %}
-          {{ unlabelled_checkbox(
+        {% for ancestor in item.ancestors %}
-            id='templates-or-folder-{}'.format(item.id),
+          <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">
-            name='templates_and_folders',
+            {{- format_item_name(ancestor.name) -}}
-            data=templates_and_folders_form.is_selected(item.id),
+          </a> <span class="message-name-separator"></span>
-            value=item.id,
+        {% 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 class="message-name">
+      {% endset %}
-          {% 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">
+      {# create the item config now to include the label content -#}
-              {{- format_item_name(ancestor.name) -}}
+      {% set checkbox_config = {
-            </a> <span class="message-name-separator"></span>
+        "html": item_label_content,
-          {% endfor %}
+        "label": {
-          {% if item.is_folder %}
+          "classes": "template-list-item-label govuk-!-font-size-24 govuk-!-font-weight-bold"
-            <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>
+        "id": "templates-or-folder-" ~ item.id,
-            </a>
+        "hint": {
-          {% else %}
+          "text": item.hint,
-            <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">
+         "classes": "template-list-item-hint"
-              <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
+        },
-            </a>
+        "classes": "template-list-item {}".format(
-          {% endif %}
+          "template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors")
-        </h2>
+      } %}
-        <p class="message-type">
+      {% set _ = checkboxes_data.append(checkbox_config) %}
-          {{ item.hint }}
+
-        </p>
+      {% if not current_user.has_permissions('manage_templates') %}
-      </div>
+        <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_label_content }}
+          </h2>
+          <p class="message-type govuk-!-margin-bottom-4">
+            {{ item.hint }}
+          </p>
+        </div>
+      {% endif %}
     {% endfor %}
+
+    {% if current_user.has_permissions('manage_templates') %}
+      {{ templates_and_folders_form.templates_and_folders(param_extensions={ "items": checkboxes_data }) }}
+    {% endif %}
   </nav>
 {% endif %}