A few clean-up items in the Platform Admin section

app/assets/javascripts/collapsibleCheckboxes.js

@@ -90,7 +90,7 @@
   };
   CollapsibleCheckboxes.prototype.start = function(component) {
     this.$component = $(component);
-    this.$formGroup = this.$component.find('.govuk-form-group').first();
+    this.$formGroup = this.$component.find('.usa-form-group').first();
     this.$fieldset = this.$formGroup.find('fieldset').first();
     this.$checkboxes = this.$fieldset.find('input[type=checkbox]');
     this.fieldLabel = this.$component.data('fieldLabel');

app/assets/javascripts/colourPreview.js

@@ -10,7 +10,7 @@
 
       this.$input = $(component);
 
-      this.$input.closest('.govuk-form-group').append(
+      this.$input.closest('.usa-form-group').append(
         this.$preview = $('<span class="textbox-colour-preview"></span>')
       );
 

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

@@ -357,6 +357,9 @@ td.table-empty-message {
             &:not(.pill-item--selected):hover {
                background: color("blue-warm-70v");
             }  
+            &.pill-item--selected:hover {
+               color: color("blue-60v");
+            }
          }
       }
    }

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

@@ -7,7 +7,7 @@ in the form $setting: value,
 ----------------------------------------
 */
 
-@use "uswds-global" with (
+@use "uswds-core" with (
    $theme-font-type-sans: "public-sans",
    $theme-show-notifications: false
 );

app/main/forms.py

@@ -511,7 +511,7 @@ class NestedFieldMixin:
                 }
             },
             "formGroup": {
-                "classes": "govuk-form-group--nested"
+                "classes": "usa-form-group--nested"
             },
             "asList": True,
             "items": []
@@ -720,7 +720,6 @@ def govuk_checkboxes_field_widget(self, field, wrap_in_collapsible=False, param_
             "attributes": {"id": field.name},
             "legend": {
                 "text": field.label.text,
-                "classes": "govuk-fieldset__legend--s"
             }
         },
         "asList": self.render_as_list,

app/templates/components/list-entry.html

@@ -8,7 +8,7 @@
   autocomplete=True
 ) %}
 
-  <div class="govuk-form-group">
+  <div class="usa-form-group">
     {% if hint %}
       {% set attributes = {"aria-describedby": field.name + '-hint'} %}
     {% else %}

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

@@ -93,7 +93,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

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

@@ -5,7 +5,7 @@
 {#- 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 "" %}
-<div class="{%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

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

@@ -88,7 +88,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

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

@@ -5,7 +5,7 @@
 {#- 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 "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

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

@@ -6,7 +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
+    - `formGroup` option to control whether or not the checkboxes are wrapped with a `usa-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
@@ -127,7 +127,7 @@
   </{{ groupElement }}>
 {% endset -%}
 
-<div class="{% if formGroup %}govuk-form-group{% endif %} {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="{% if formGroup %}usa-form-group{% endif %} {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

app/templates/views/cookies.html

@@ -121,7 +121,7 @@
     </div>
     <div class="cookie-settings__form-wrapper">
       <form data-module="cookie-settings">
-        <div class="govuk-form-group govuk-!-margin-top-6">
+        <div class="usa-form-group govuk-!-margin-top-6">
           <fieldset class="govuk-fieldset" aria-describedby="changed-name-hint">
             <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
               Do you want to accept analytics cookies?

app/templates/views/manage-users.html

@@ -40,6 +40,7 @@
               {% endif %}
               </span>
             </h2>
+            <h3 class="margin-bottom-05">Permissions</h3>
             <ul class="tick-cross-list-permissions">
               {% for permission, label in permissions %}
                 {{ tick_cross(

app/templates/views/templates/_template_list.html

@@ -1,108 +1,3 @@
-<!-- {% 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">
-    {% set checkboxes_data = [] %}
-
-    {% if not current_user.has_permissions('manage_templates') %}
-    <ul>
-    {% endif %}
-
-    {% 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 -%}
-          {{ 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 %}
-          <span id="{{ item.id }}-item-hint" class="usa-checkbox__label-description 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",
-        },
-        "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 %} -->
-
-
 {% macro format_item_name(name, separators=True) -%}
   {%- if name is string -%}
     {{- name -}}

tests/app/main/views/test_manage_users.py

@@ -25,6 +25,7 @@ from tests.conftest import (
         create_active_user_with_permissions(),
         (
             'Test User (you) '
+            'Permissions '
             'Can See dashboard '
             'Can Send messages '
             'Can Add and edit templates '
@@ -33,6 +34,7 @@ from tests.conftest import (
         ),
         (
             'ZZZZZZZZ zzzzzzz@example.gsa.gov '
+            'Permissions '
             'Can See dashboard '
             'Cannot Send messages '
             'Cannot Add and edit templates '
@@ -45,6 +47,7 @@ from tests.conftest import (
         create_active_user_empty_permissions(),
         (
             'Test User With Empty Permissions (you) '
+            'Permissions '
             'Cannot See dashboard '
             'Cannot Send messages '
             'Cannot Add and edit templates '
@@ -53,6 +56,7 @@ from tests.conftest import (
         ),
         (
             'ZZZZZZZZ zzzzzzz@example.gsa.gov '
+            'Permissions '
             'Can See dashboard '
             'Cannot Send messages '
             'Cannot Add and edit templates '
@@ -64,6 +68,7 @@ from tests.conftest import (
         create_active_user_view_permissions(),
         (
             'Test User With Permissions (you) '
+            'Permissions '
             'Can See dashboard '
             'Cannot Send messages '
             'Cannot Add and edit templates '
@@ -72,6 +77,7 @@ from tests.conftest import (
         ),
         (
             'ZZZZZZZZ zzzzzzz@example.gsa.gov '
+            'Permissions '
             'Can See dashboard '
             'Cannot Send messages '
             'Cannot Add and edit templates '
@@ -83,6 +89,7 @@ from tests.conftest import (
         create_active_user_manage_template_permissions(),
         (
             'Test User With Permissions (you) '
+            'Permissions '
             'Can See dashboard '
             'Cannot Send messages '
             'Can Add and edit templates '
@@ -91,6 +98,7 @@ from tests.conftest import (
         ),
         (
             'ZZZZZZZZ zzzzzzz@example.gsa.gov '
+            'Permissions '
             'Can See dashboard '
             'Cannot Send messages '
             'Cannot Add and edit templates '
@@ -102,6 +110,7 @@ from tests.conftest import (
         create_active_user_manage_template_permissions(),
         (
             'Test User With Permissions (you) '
+            'Permissions '
             'Can See dashboard '
             'Cannot Send messages '
             'Can Add and edit templates '
@@ -110,6 +119,7 @@ from tests.conftest import (
         ),
         (
             'ZZZZZZZZ zzzzzzz@example.gsa.gov '
+            'Permissions '
             'Can See dashboard '
             'Cannot Send messages '
             'Cannot Add and edit templates '
@@ -267,6 +277,7 @@ def test_should_show_caseworker_on_overview_page(
     assert normalize_spaces(page.select_one('h1').text) == 'Team members'
     assert normalize_spaces(page.select('.user-list-item')[0].text) == (
         'Test User With Permissions (you) '
+        'Permissions '
         'Can See dashboard '
         'Cannot Send messages '
         'Cannot Add and edit templates '
@@ -276,6 +287,7 @@ def test_should_show_caseworker_on_overview_page(
     # [1:5] are invited users
     assert normalize_spaces(page.select('.user-list-item')[6].text) == (
         'Test User zzzzzzz@example.gsa.gov '
+        'Permissions '
         'Cannot See dashboard '
         'Can Send messages '
         'Cannot Add and edit templates '
@@ -1154,6 +1166,7 @@ def test_cancel_invited_user_doesnt_work_if_user_not_invited_to_this_service(
 @pytest.mark.parametrize('invite_status, expected_text', [
     ('pending', (
         'invited_user@test.gsa.gov (invited) '
+        'Permissions '
         'Can See dashboard '
         'Can Send messages '
         'Cannot Add and edit templates '
@@ -1163,6 +1176,7 @@ def test_cancel_invited_user_doesnt_work_if_user_not_invited_to_this_service(
     )),
     ('cancelled', (
         'invited_user@test.gsa.gov (cancelled invite) '
+        'Permissions '
         # all permissions are greyed out
         'Cannot See dashboard '
         'Cannot Send messages '

tests/javascripts/collapsibleCheckboxes.test.js

@@ -41,7 +41,7 @@ describe('Collapsible fieldset', () => {
     // set up DOM
     document.body.innerHTML =
       `<div class="selection-wrapper" data-module="collapsible-checkboxes" data-field-label="folder">
-        <div class="govuk-form-group">
+        <div class="usa-form-group">
           <fieldset class="govuk-fieldset" id="folder_permissions" aria-describedby="users_with_permission-hint">
             <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
               Folders this team member can see
@@ -57,7 +57,7 @@ describe('Collapsible fieldset', () => {
       </div>`;
 
       wrapper = document.querySelector('.selection-wrapper');
-      formGroup = wrapper.querySelector('.govuk-form-group');
+      formGroup = wrapper.querySelector('.usa-form-group');
       fieldset = formGroup.querySelector('fieldset');
       checkboxesContainer = fieldset.querySelector('.govuk-checkboxes');
       checkboxes = checkboxesContainer.querySelectorAll('input[type=checkbox]');
@@ -321,7 +321,7 @@ describe('Collapsible fieldset', () => {
 
         // add a nested list of checkboxes to the first checkbox item
         const nestedCheckboxes = document.createElement('div');
-        nestedCheckboxes.className = 'govuk-form-group govuk-form-group--nested';
+        nestedCheckboxes.className = 'usa-form-group usa-form-group--nested';
         nestedCheckboxes.innerHTML = _checkboxes(11, 20);
         checkboxesContainer.querySelector('.govuk-checkboxes__item').appendChild(nestedCheckboxes);
 

tests/javascripts/colourPreview.test.js

@@ -18,14 +18,14 @@ describe('Colour preview', () => {
 
     // set up DOM
     document.body.innerHTML = `
-      <div class="govuk-form-group">
+      <div class="usa-form-group">
         <label class="govuk-form-label" for="colour">
           Colour
         </label>
         <input class="govuk-input govuk-input--width-6" id="colour" name="colour" rows="8" type="text" value="" data-module="colour-preview">
       </div>`;
 
-    field = document.querySelector('.govuk-form-group');
+    field = document.querySelector('.usa-form-group');
     textbox = document.querySelector('input[type=text]');
 
   });

tests/javascripts/listEntry.test.js

@@ -49,7 +49,7 @@ describe("List entry", () => {
       for (let idx = 0; idx < 10; idx++) {
         result += `
             <div class="list-entry">
-              <div class="govuk-form-group">
+              <div class="usa-form-group">
                 <label for="domains-${idx + 1}" class="govuk-label govuk-input--numbered__label">
                   <span class="usa-sr-only">domain number </span>${idx + 1}.
                 </label>
@@ -62,7 +62,7 @@ describe("List entry", () => {
     };
 
     document.body.innerHTML =
-      `<fieldset class="govuk-form-group" aria-describedby="domains-hint">
+      `<fieldset class="usa-form-group" aria-describedby="domains-hint">
         <legend class="govuk-fieldset__legend">
           Domain names
           </span>

tests/javascripts/support/helpers/html.js

@@ -20,7 +20,7 @@ function getRadios (fields, name) {
 function getRadioGroup (data) {
   let radioGroup = document.createElement('div');
 
-  radioGroup.classList.add('govuk-form-group');
+  radioGroup.classList.add('usa-form-group');
   if ('cssClasses' in data) {
     data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
   }

tests/javascripts/templateFolderForm.test.js

@@ -52,7 +52,7 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
               </div>
               <div id="move_to_new_folder_form" class="sticky-template-form" role="region" aria-label="Enter name of the new folder to move selected items to">
                 <div class="js-will-stick-at-bottom-when-scrolling">
-                  <div class="govuk-form-group">
+                  <div class="usa-form-group">
                     <label class="govuk-label" for="move_to_new_folder_name">
                       Folder name
                     </label>
@@ -65,7 +65,7 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
               </div>
               <div id="add_new_folder_form" class="sticky-template-form" role="region" aria-label="Enter name of the new folder">
                 <div class="js-will-stick-at-bottom-when-scrolling">
-                  <div class="govuk-form-group">
+                  <div class="usa-form-group">
                     <label class="govuk-label" for="add_new_folder_name">
                       Folder name
                     </label>