Swap headings for list items in template list

I'm mainly making this change because it's useful
for the CSS that styles the hint text when the
link is focused for the link to have no parent
container.

That being said, there isn't really enough content
underneath these headings to justify them as it is.
I've wrapped them in a list instead because:
- they're structured like a list
- we already called them a `template-list`

This commit also replaces the `message-type` class
on the paragraph below where the headings went,
for consistency. It also removes the CSS for that
class as I couldn't find anywhere else that used
it now.

app/assets/stylesheets/components/message.scss

@@ -56,14 +56,6 @@ $message-type-bottom-spacing: govuk-spacing(4);
 
   }
 
-  &-type {
-    position: relative; /* needs to be non-static to have a z-index above the link :before element */
-    color: $govuk-secondary-text-colour;
-    margin: 0 0 $message-type-bottom-spacing 0;
-    padding-left: 0;
-    pointer-events: none;
-  }
-
 }
 
 .template-list {

app/templates/views/templates/_template_list.html

@@ -26,6 +26,10 @@
   <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 = [] %}
 
+    {% if not current_user.has_permissions('manage_templates') %}
+    <ul>
+    {% endif %}
+
     {% for item in template_list %}
 
       {% set item_link_content %}
@@ -73,17 +77,19 @@
       {% 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">
+        <li class="template-list-item {%- if item.ancestors %} template-list-item-hidden-by-default {%- else %} template-list-item-without-ancestors{%- endif %}">
+          {{ item_link_content }}
+          <p class="template-list-item-hint govuk-!-margin-bottom-4">
             {{ item.hint }}
           </p>
-        </div>
+        </li>
       {% endif %}
     {% endfor %}
 
+    {% if not current_user.has_permissions('manage_templates') %}
+    </ul>
+    {% endif %}
+
     {% if current_user.has_permissions('manage_templates') %}
       {{ templates_and_folders_form.templates_and_folders(param_extensions={
         "items": checkboxes_data,

app/templates/views/templates/choose-reply.html

@@ -38,29 +38,29 @@
     {{ live_search(target_selector='#template-list .template-list-item', show=True, form=search_form) }}
 
     <nav id="template-list">
+      <ul>
       {% for item in templates_and_folders %}
-        <div class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
-          <h2 class="message-name">
-            {% for ancestor in item.ancestors %}
-                <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                {{ ancestor.name }}
-              </a> <span class="message-name-separator"></span>
-            {% endfor %}
-            {% if item.is_folder %}
-              <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                <span class="live-search-relevant">{{ item.name }}</span>
-              </a>
-            {% else %}
-              <a class="govuk-link govuk-link--no-visited-state template-list-template" href="{{ url_for('.conversation_reply_with_template', service_id=current_service.id, template_id=item.id, notification_id=notification_id) }}">
-                <span class="live-search-relevant">{{ item.name }}</span>
-              </a>
-            {% endif %}
-          </h2>
-          <p class="message-type">
+        <li class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
+          {% for ancestor in item.ancestors %}
+              <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+              {{ ancestor.name }}
+            </a> <span class="message-name-separator"></span>
+          {% endfor %}
+          {% if item.is_folder %}
+            <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+              <span class="live-search-relevant">{{ item.name }}</span>
+            </a>
+          {% else %}
+            <a class="govuk-link govuk-link--no-visited-state template-list-template" href="{{ url_for('.conversation_reply_with_template', service_id=current_service.id, template_id=item.id, notification_id=notification_id) }}">
+              <span class="live-search-relevant">{{ item.name }}</span>
+            </a>
+          {% endif %}
+          <p class="template-list-item-hint govuk-hint">
             {{ item.hint }}
           </p>
-        </div>
+        </li>
       {% endfor %}
+      </ul>
     </nav>
 
 

app/templates/views/templates/copy.html

@@ -26,37 +26,37 @@
         autofocus=True
       ) }}
       <nav id="template-list">
+        <ul>
         {% for item in services_templates_and_folders %}
-          <div class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
-            <h2 class="message-name">
-              {% for ancestor in item.ancestors %}
-                {% if ancestor.is_service %}
-                  <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=ancestor.service_id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                {% else %}
-                  <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                {% endif %}
-                  {{ ancestor.name }}
-                </a> <span class="message-name-separator"></span>
-              {% endfor %}
-              {% if item.is_service %}
-                <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                  <span class="live-search-relevant">{{ item.name }}</span>
-                </a>
-              {% elif item.is_folder %}
-                <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                  <span class="live-search-relevant">{{ item.name }}</span>
-                </a>
+          <li class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
+            {% for ancestor in item.ancestors %}
+              {% if ancestor.is_service %}
+                <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=ancestor.service_id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
               {% else %}
-                <a class="govuk-link govuk-link--no-visited-state template-list-template" href="{{ url_for('.copy_template', service_id=current_service.id, template_id=item.id, from_service=item.service_id) }}">
-                  <span class="live-search-relevant">{{ item.name }}</span>
-                </a>
+                <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
               {% endif %}
-            </h2>
-            <p class="message-type">
+                {{ ancestor.name }}
+              </a> <span class="message-name-separator"></span>
+            {% endfor %}
+            {% if item.is_service %}
+              <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+                <span class="live-search-relevant">{{ item.name }}</span>
+              </a>
+            {% elif item.is_folder %}
+              <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+                <span class="live-search-relevant">{{ item.name }}</span>
+              </a>
+            {% else %}
+              <a class="govuk-link govuk-link--no-visited-state template-list-template" href="{{ url_for('.copy_template', service_id=current_service.id, template_id=item.id, from_service=item.service_id) }}">
+                <span class="live-search-relevant">{{ item.name }}</span>
+              </a>
+            {% endif %}
+            <p class="template-list-item-hint govuk-hint">
               {{ item.hint }}
             </p>
-          </div>
+          </li>
         {% endfor %}
+        </ul>
       </nav>
     {% endif %}
 

tests/app/main/views/test_templates.py

@@ -188,7 +188,7 @@ def test_should_show_page_for_choosing_a_template(
     for index, expected_link in enumerate(expected_nav_links):
         assert links_in_page[index].text.strip() == expected_link
 
-    template_links = page.select('#template-list .govuk-label a, .message-name a')
+    template_links = page.select('#template-list .govuk-label a, .template-list-item a')
 
     assert len(template_links) == len(expected_templates)