Got the tests to pass, so doing a commit

app/assets/javascripts/templateFolderForm.js

@@ -261,7 +261,7 @@
 
     this.countSelectedCheckboxes = function() {
       const allSelected = this.$form.find('input:checkbox:checked');
-      const templates = allSelected.filter((idx, el) => $(el).siblings('.template-list-template').length > 0).length;
+      const templates = allSelected.filter((idx, el) => $(el).siblings('.usa-template-list-template').length > 0).length;
       const folders = allSelected.filter((idx, el) => $(el).siblings('.template-list-folder').length > 0).length;
       const results = {
         'templates': templates,

app/templates/views/service-settings/set-sms.html

@@ -2,7 +2,7 @@
 {% from "components/form.html" import form_wrapper %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/uk_components/back-link/macro.njk" import govukBackLink %}
+{% from "components/us_components/back-link/macro.njk" import govukBackLink %}
 
 {% block service_page_title %}
   Send text messages

app/templates/views/templates/_template_list.html

@@ -1,4 +1,4 @@
-{% macro format_item_name(name, separators=True) -%}
+<!-- {% macro format_item_name(name, separators=True) -%}
   {%- if name is string -%}
     {{- name -}}
   {%- else -%}
@@ -30,6 +30,8 @@
 
     {% for item in template_list %}
 
+    {% set item_link_content %}{% endset %}
+
       {% set label_content %}
         <span class="usa-sr-only">
           {%- for ancestor in item.ancestors %}{{ format_item_name(ancestor.name, separators=False) }} {% endfor -%}
@@ -98,4 +100,115 @@
       }) }}
     {% endif %}
   </nav>
+{% endif %} -->
+
+
+{% macro format_item_name(name, separators=True) -%}
+{%- 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 -%}
+{%- endfor -%}
 {% endif %}
+{%- endmacro %}
+
+{% if template_list.template_folder_id and not template_list.templates_to_show %}
+<p class="template-list-empty">
+  {% if template_list.folder_is_empty %}
+  This folder is empty
+  {% else %}
+  There are no {{ 1|message_count_label(template_type, suffix='') }} templates in this folder
+  {% 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 = [] %}
+
+  {% if not current_user.has_permissions('manage_templates') %}
+  <ul>
+    {% endif %}
+
+    {% 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="usa-link 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="usa-link 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="usa-link font-body-lg usa-template-list-template">
+      <span class="live-search-relevant">
+        {%- if current_service.api_keys -%}
+        <span class="govuk-!-display-none">{{ item.id }} </span>
+        {%- endif -%}
+        {{- format_item_name(item.name) -}}
+      </span>
+    </a>
+    {% endif %}
+    {% endset %}
+
+    {% set label_content %}
+    <span class="usa-sr-only">
+      {%- 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="usa-hint template-list-item-hint">
+      {{ 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 margin-top-05",
+    },
+    "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') %}
+    <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>
+    </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,
+  "formGroup": False
+  }) }}
+  {% endif %}
+</nav>
+{% endif %}