Reworking checkboxes to adhere to USWDS styling

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -51,16 +51,6 @@ p,
    font-size: size("body", 16);
 }
 
-.big-number-with-status .big-number,
-.big-number-with-status .big-number-smaller {
-   @include u-bg("primary");
-}
-
-.big-number-with-status .big-number-status,
-.big-number-with-status .big-number-status-failing {
-   @include u-bg("green-cool-40v");
-}
-
 .show-more-no-border:focus,
 .show-more:focus,
 .table-field-right-aligned a:active:before,
@@ -138,22 +128,31 @@ td.table-empty-message {
    box-shadow: none;
 }
 
-.template-list-item-without-ancestors a.template-list-folder:first-of-type {
+// .template-list-item-without-ancestors a.template-list-folder:first-of-type {
-   background-image: url(../images/folder-blue-bold.svg);
+//    background: url(../img/material-icons/folder.svg) no-repeat;
-   background-size: 30px 30px;
+// }
-}
 
 .folder-heading a.folder-heading-folder,
 .template-list-folder {
-   background-image: url(../images/folder-blue-bold.svg);
+   background: url(../img/material-icons/folder.svg) no-repeat;
+   padding-left: units(4);
+   display: inline-block; 
+   height: units(4);
    &:hover {
-      color: color("blue-warm-70v");
+      background: url(../img/material-icons/folder.svg) no-repeat;
-      background-image: url(../images/folder-blue-bold.svg);
    }
 }
 
 .folder-heading-folder {
-   background-image: url(../images/folder-black.svg);
+   background: url(../img/material-icons/folder.svg) no-repeat;
+   padding-left: units(4);
+   display: inline-block;
+   height: units(4);
+}
+
+.message-name-separator:before, .folder-heading-separator:before {
+   content: ">";
+   margin: 0 units(0.5);
 }
 
 .folder-heading a.folder-heading-folder-truncated {
@@ -162,8 +161,13 @@ td.table-empty-message {
 
 .usa-template-list-template {
    background: url(../img/material-icons/description.svg) no-repeat;
-   padding-left: 40px;
+   padding-left: units(4);
-   background-size: 30px 30px;
+   display: inline-flex; 
+   height: units(4);
+}
+
+.template-list-item-hint {
+   padding-left: units(4);
 }
 
 .js-enabled .live-search {
@@ -207,7 +211,7 @@ td.table-empty-message {
 }
 
 .spark-bar-bar {
-   font-size: units(3);
+   font-size: units(2);
    background-color: transparent;
 }
 
@@ -222,6 +226,92 @@ td.table-empty-message {
 } 
 
 .navigation-service.usa-breadcrumb {
-   padding-bottom: 0; 
+   -bottom: 0; 
 }
 
+// Dashboard
+
+.dashboard {
+   .big-number-with-status {
+      a {
+         background: color("blue-60v");
+         padding: units(2);
+         margin-bottom: units(1);
+         text-decoration: none;
+         &:hover{
+            background: color("blue-warm-70v");
+         } 
+      }
+      span {
+         color: white; 
+      }
+      .big-number-smaller {
+         display: flex; 
+         flex-direction: column;
+         .big-number-number {
+               font-size: units(5);
+               line-height: units(6);
+         }
+         .big-number-label {
+               font-size: units(3);
+         }
+      }
+      .big-number-status {
+         background: color("green-cool-40v");
+         display: flex; 
+         padding: units(1) units(2);
+      }
+   }
+   .usa-table {
+      width: 100%; 
+      caption {
+         margin-bottom: 0; 
+      }
+      .table-field-center-aligned  {
+         text-align: center; 
+      }
+      .template-statistics-table-template-name {
+         padding-left: units(4);
+         display: inline-block;
+         background-repeat: no-repeat;
+         background-image: url(../img/material-icons/description.svg);
+      }
+   }
+}
+
+.dashboard-table {
+   .file-list-filename {
+      font-weight: bold;
+   }
+   .file-list-hint {
+      margin: 0; 
+   }
+}
+
+// Tabs
+
+.tabs {
+   .pill {
+      display: flex; 
+      list-style: none;
+      padding: 0; 
+      .pill-item__container {
+         border: 1px solid color("gray-cool-10");
+         width: 25%;
+         display: flex; 
+         flex-direction: column; 
+         text-align: center; 
+         font-size: units(2);
+         a { 
+            padding: units(4);
+            .big-number-smaller {
+               font-size: units(5);
+               line-height: units(6);
+            }
+            &:not(.pill-item--selected):hover {
+               background: color("blue-warm-70v");
+            }  
+         }
+      }
+   }
+}

app/assets/sass/uswds/styles.scss

@@ -1,3 +1,3 @@
 @forward "uswds-theme";
 @forward "uswds";
-@forward "uswds-theme-custom-styles";
+@forward "uswds-theme-custom-styles";

app/templates/components/big-number.html

@@ -1,6 +1,6 @@
 {% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
   {% if link %}
-    <a class="usa-link display-block margin-bottom-1" href="{{ link }}">
+    <a class="usa-link display-flex" href="{{ link }}">
   {% endif %}
       <span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
         <span class="big-number-number">

app/templates/components/content-metadata.html

@@ -1,11 +1,9 @@
 {% macro content_metadata(data, suffix=False) %}
 <div class="content-metadata">
-  <dl>
   {% for key, value in data.items() %}
-    <dt class="content-metadata__term">{{ key }}</dt>
+    <span class="content-metadata__term">{{ key }}</span>
-    <dd class="content-metadata__definition">{{ value }}</dd>
+    <span class="content-metadata__definition">{{ value }}</span>
   {% endfor %}
-  </dl>
   {% if suffix %}
   <p class="content-metadata__suffix">{{ suffix }}</p>
   {% endif %}

app/templates/components/pill.html

@@ -11,7 +11,7 @@
       {% for label, option, link, count in items %}
         <li class="pill-item__container">
         {% if current_value == option %}
-          <a id="pill-selected-item" class="pill-item pill-item--selected usa-link {% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
+          <a id="pill-item-selected" class="pill-item pill-item--selected usa-link {% if not show_count %} pill-item--centered{% endif %}" aria-disabled="true" aria-current="page">
         {% else %}
           <a class="pill-item usa-dark-background usa-link usa-link--alt bg-primary" href="{{ link }}">
         {% endif %}

app/templates/components/table.html

@@ -1,6 +1,6 @@
 {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
-  <table class="table usa-table usa-table--borderless table-font-xsmall">
+  <table class="usa-table usa-table--borderless">
-    <caption class="heading-medium table-heading{{ ' usa-sr-only' if not caption_visible}}">
+    <caption class="font-body-lg table-heading{{ ' usa-sr-only' if not caption_visible}}">
       {{ caption }}
     </caption>
     <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
@@ -10,7 +10,7 @@
             {% if field_headings_visible %}
               {{ field_heading }}
             {% else %}
-              <span class="usa-sr-only">{{ field_heading }}</span>
+              <span>{{ field_heading }}</span>
             {% endif %}
           </th>
         {% endfor %}
@@ -65,7 +65,11 @@
 
 {% macro field(align='left', status='', border=True, colspan=None, wrap=False) -%}
 
-    {% set field_alignment = 'table-field-right-aligned' if align == 'right' else 'table-field-left-aligned' %}
+    {% set field_alignment =
+    'table-field-right-aligned' if align == 'right' else
+    'table-field-center-aligned' if align == 'center' else
+    'table-field-left-aligned'
+    %}    
     {% set border = '' if border else 'table-field-noborder' %}
     {% set wrap = 'table-field-wrap-text' if wrap else '' %}
 
@@ -165,12 +169,12 @@
       {% if notification.status|format_notification_status_as_url(notification.notification_type) %}
         </a>
       {% endif %}
-      <span class="status-hint">
+      <p class="status-hint margin-0 width-card-lg">
         {{ notification.status|format_notification_status_as_time(
           notification.created_at|format_datetime_short,
           (notification.updated_at or notification.created_at)|format_datetime_short
         ) }}
-      </span>
+        </p>
       {% if displayed_on_single_line %}</span>{% endif %}
     {% endcall %}
   {% endif %}
@@ -186,11 +190,11 @@
     <span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
       <span class="spark-bar-bar">
         {{ '{:,.0f}'.format(count) }} 
-          {% if count == 1 -%}
+          <!-- {% if count == 1 -%}
             message sent
           {% else -%}
             messages sent
-          {% endif %}
+          {% endif %} -->
       </span>
     </span>
   {% endcall %}

app/templates/components/us_components/back-link/template.njk

@@ -1,2 +1,2 @@
-<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-inline-flex margin-top-5{%- if params.classes %} {{ params.classes }}{% endif -%}"
+<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-inline-flex margin-bottom-3 {%- if params.classes %} {{ params.classes }}{% endif -%}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>

app/templates/components/us_components/checkboxes/template.njk

@@ -49,7 +49,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="govuk-checkboxes test {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if isConditional %} data-module="checkboxes"{% endif -%}>
     {% for item in params.items %}

app/templates/components/us_components/fieldset/template.njk

@@ -1,11 +1,11 @@
-<fieldset class="govuk-fieldset margin-y-5
+<fieldset class="usa-fieldset margin-y-5
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% if params.legend.html or params.legend.text %}
-  <legend class="govuk-fieldset__legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
+  <legend class="usa-legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
   {% if params.legend.isPageHeading %}
-    <h1 class="govuk-fieldset__heading">
+    <h1 class="font-body-2xl">
       {{ params.legend.html | safe if params.legend.html else params.legend.text }}
     </h1>
   {% else %}

app/templates/components/us_components/radio-label/README.md

@@ -0,0 +1,15 @@
+# Label
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+The radio label component is used in other input components, to see an example of it in use see the [text input component](https://design-system.service.gov.uk/components/text-input/).
+
+## Component options
+
+Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default--label) for details.

app/templates/components/us_components/radio-label/_label.scss

@@ -0,0 +1,45 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/label") {
+  .govuk-label {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    display: block;
+
+    margin-bottom: govuk-spacing(1);
+  }
+
+  // Modifiers that make labels look more like their equivalent headings
+
+  .govuk-label--xl {
+    @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--l {
+    @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--m {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-label--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // When the label is nested inside a heading, override the heading so that it
+  // does not have a margin. Effectively we want to be able to treat the heading
+  // as if it is not there.
+  //
+  // This breaks BEM conventions because it exists as a parent of the 'block',
+  // so we can't really consider an element.
+  .govuk-label-wrapper {
+    margin: 0;
+  }
+}

app/templates/components/us_components/radio-label/macro-options.json

@@ -0,0 +1,38 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "for",
+        "type": "string",
+        "required": true,
+        "description": "The value of the for attribute, the id of the input the label is associated with."
+    },
+    {
+        "name": "isPageHeading",
+        "type": "boolean",
+        "required": false,
+        "description": "Whether the label also acts as the heading for the page."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the label tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the label tag."
+    }
+]

app/templates/components/us_components/radio-label/macro.njk

@@ -0,0 +1,3 @@
+{% macro usaRadioLabel(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/templates/components/us_components/radio-label/template.njk

@@ -0,0 +1,15 @@
+{% if params.html or params.text %}
+{% set labelHtml %}
+<label class="usa-checkbox__label {%- if params.classes %}{{ params.classes }}{% endif %}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  {%- if params.for %} for="{{ params.for }}"{% endif %}>
+  {{ params.html | safe if params.html else params.text }}
+</label>
+{% endset %}
+
+{% if params.isPageHeading %}
+<h1 class="font-body-2xl text-bold">{{ labelHtml | safe | indent(2) }}</h1>
+{% else %}
+{{ labelHtml | safe }}
+{% endif %}
+{% endif %}

app/templates/forms/fields/checkboxes/template.njk

@@ -1,7 +1,7 @@
 {% from "components/us_components/error-message/macro.njk" import govukErrorMessage -%}
 {% from "components/us_components/fieldset/macro.njk" import govukFieldset %}
 {% from "components/us_components/hint/macro.njk" import govukHint %}
-{% from "components/us_components/label/macro.njk" import govukLabel %}
+{% from "components/us_components/radio-label/macro.njk" import usaRadioLabel %}
 
 
 {#- Copied from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/template.njk
@@ -73,7 +73,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <{{ groupElement }} class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <{{ groupElement }} class="{%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if isConditional %} data-module="checkboxes"{% endif -%}>
     {% for item in params.items %}
@@ -84,18 +84,18 @@
     {% set itemHintId = id + "-item-hint" if hasHint else "" %}
     {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
     {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <{{ groupItemElement }} class="govuk-checkboxes__item {%- if item.classes %} {{ item.classes }}{% endif %}">
+    <{{ groupItemElement }} class="usa-checkbox {%- if item.classes %} {{ item.classes }}{% endif %}">
       {%- if item.before %}{{ item.before }}{% endif -%}
-      <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
+      <input class="usa-checkbox__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
       {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
       {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-      {{ govukLabel({
+      {{ usaRadioLabel({
         html: item.html,
         text: item.text,
-        classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
+        classes: (' ' + item.label.classes if item.label.classes),
         attributes: item.label.attributes,
         for: id
       }) | indent(6) | trim }}

app/templates/main_nav.html

@@ -1,7 +1,7 @@
 {% if help %}
   {% include 'partials/tour.html' %}
 {% else %}
-<nav class="nav margin-y-5">
+<nav class="nav margin-bottom-5">
   <ul class="usa-sidenav">
   {% if current_user.has_permissions() %}
     {% if current_user.has_permissions('view_activity') %}

app/templates/service_navigation.html

@@ -1,5 +1,5 @@
 {% macro navigation_service_name(service) %}
-  <div class="navigation-service font-body-2xl bold">
+  <div class="font-body-2xl text-bold">
     {{ service.name }}
     {% if not service.active %}
       <span class="navigation-service-name navigation-service-type--suspended">Suspended</span>
@@ -7,7 +7,7 @@
   </div>
 {% endmacro %}
 
-<div class="navigation-service margin-top-2 display-flex flex-align-end flex-justify">
+<div class="navigation-service margin-top-2 display-flex flex-align-end flex-justify border-bottom padding-bottom-1">
   {% if current_service.organization_id %}
     {% if current_user.platform_admin or
       (current_user.belongs_to_organization(current_service.organization_id) and current_service.live) %}
@@ -15,5 +15,5 @@
     {% endif %}
   {% endif %}
   {{ navigation_service_name(current_service) }}
-  <a href="{{ url_for('main.choose_account') }}" class="usa-link margin-bottom-2">Switch service</a>
+  <a href="{{ url_for('main.choose_account') }}" class="usa-link">Switch service</a>
 </div>

app/templates/views/activity/counts.html

@@ -1,5 +1,5 @@
 {% from "components/pill.html" import pill %}
-<div class='bottom-gutter ajax-block-container'>
+<div class='tabs ajax-block-container'>
   {{ pill(
     status_filters,
     status

app/templates/views/dashboard/template-statistics.html

@@ -8,7 +8,7 @@
     <div class='template-statistics-table'>
       {% call(item, row_number) list_table(
         template_statistics,
-        caption="By template",
+        caption="Messages sent by template",
         caption_visible=True,
         empty_message='',
         field_headings=[

app/templates/views/get-started.html

@@ -12,7 +12,7 @@
 <h1 class="font-body-2xl margin-bottom-3">Get started</h1>
 
 <ol class="usa-process-list">
-  <li class="usa-process-list__item padding-bottom-4 margin-top-3">
+  <li class="usa-process-list__item padding-bottom-4 margin-top-2">
     <h2 class="usa-process-list__heading line-height-sans-3">Check if Notify.gov is right for you</h2>
     <p>Read about our <a class="usa-link" href="{{ url_for('main.features') }}">features</a>, <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> and <a class="usa-link" href="{{ url_for('main.roadmap') }}">roadmap</a>.</p>
   </li>

app/templates/views/templates/_template_list.html

@@ -30,33 +30,33 @@
 
     {% 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>
+        {% 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 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 item_meta %}
@@ -70,7 +70,7 @@
       {% set checkbox_config = {
         "html": label_content,
         "label": {
-          "classes": "template-list-item-label margin-top-05",
+          "classes": "template-list-item-label",
         },
         "id": "templates-or-folder-" ~ item.id,
         "classes": "template-list-item template-list-item-with-checkbox {}".format(

app/templates/withnav_template.html

@@ -7,7 +7,7 @@
 {% block main %}
   <div class="grid-container">
     {% include "service_navigation.html" %}
-    <div class="grid-row">
+    <div class="grid-row margin-top-5">
       {% if help %}
         <div class="grid-col-3">
       {% else %}
@@ -18,12 +18,12 @@
       {% if help %}
         <div class="grid-col-8">
       {% else %}
-        <div class="grid-col-9 padding-left-4 usa-prose site-prose">
+        <div class="grid-col-9 padding-left-4">
       {% endif %}
         {% block beforeContent %}
           {% block backLink %}{% endblock %}
         {% endblock %}
-        <main id="main-content" role="main">
+        <main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
         {% block content %}
           {% include 'flash_messages.html' %}
           {% block maincolumn_content %}{% endblock %}

tests/javascripts/support/helpers/html.js

@@ -43,14 +43,14 @@ function templatesAndFoldersCheckboxes (hierarchy) {
   hierarchy.forEach((node, idx) => {
 
     result += `
-      <div class="govuk-checkboxes__item template-list-item template-list-item-with-checkbox template-list-item-without-ancestors">
+      <div class="usa-checkbox template-list-item template-list-item-with-checkbox template-list-item-without-ancestors">
         <input class="usa-checkbox__input" id="templates-or-folder-${idx}" name="templates_and_folders" type="checkbox" value="templates-or-folder-${idx}">
-        <label class="usa-checkbox__label template-list-item-label margin-top-05" for="templates-or-folder-${idx}">
+        <label class="usa-checkbox__label template-list-item-label" for="templates-or-folder-${idx}">
           <span class="usa-sr-only">${node.label}</span>
+           <a href="/services/6658542f-0cad-491f-bec8-ab8457700ead/templates/all/folders/3d057d9a-51fc-45ea-8b63-0003206350a6" class="usa-link template-list-${node.type === 'folder' ? 'folder' : 'template'}">
+            <span class="live-search-relevant">${node.label}</span>
+          </a>
         </label>
-        <a href="/services/6658542f-0cad-491f-bec8-ab8457700ead/templates/all/folders/3d057d9a-51fc-45ea-8b63-0003206350a6" class="usa-link template-list-${node.type === 'folder' ? 'folder' : 'template'}">
-          <span class="live-search-relevant">${node.label}</span>
-        </a>
         ${node.meta}
       </div>`;
 

tests/javascripts/updateContent.test.js

@@ -183,7 +183,7 @@ describe('Update content', () => {
       });
 
       return `
-        <div class="bottom-gutter ajax-block-container">
+        <div class="tabs ajax-block-container">
           <ul role="tablist" class="pill">
             ${pillsHTML}
           </ul>