From 51fde90f793b6ede6c0cb99738be4eff9b17047b Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Fri, 18 Aug 2023 11:30:30 -0400 Subject: [PATCH] A few clean-up items in the Platform Admin section --- .../javascripts/collapsibleCheckboxes.js | 2 +- app/assets/javascripts/colourPreview.js | 2 +- .../uswds/_uswds-theme-custom-styles.scss | 3 + app/assets/sass/uswds/_uswds-theme.scss | 2 +- app/main/forms.py | 3 +- app/templates/components/list-entry.html | 2 +- .../us_components/checkboxes/template.njk | 2 +- .../us_components/input/template.njk | 2 +- .../us_components/radios/template.njk | 2 +- .../us_components/textarea/template.njk | 2 +- .../forms/fields/checkboxes/template.njk | 4 +- app/templates/views/cookies.html | 2 +- app/templates/views/manage-users.html | 1 + .../views/templates/_template_list.html | 105 ------------------ tests/app/main/views/test_manage_users.py | 14 +++ .../javascripts/collapsibleCheckboxes.test.js | 6 +- tests/javascripts/colourPreview.test.js | 4 +- tests/javascripts/listEntry.test.js | 4 +- tests/javascripts/support/helpers/html.js | 2 +- tests/javascripts/templateFolderForm.test.js | 4 +- 20 files changed, 40 insertions(+), 128 deletions(-) diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js index c6625f0a2..cbf95bbf1 100644 --- a/app/assets/javascripts/collapsibleCheckboxes.js +++ b/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'); diff --git a/app/assets/javascripts/colourPreview.js b/app/assets/javascripts/colourPreview.js index 20b5e0498..05d82e64b 100644 --- a/app/assets/javascripts/colourPreview.js +++ b/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 = $('') ); diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index 3bbc9ddbb..818c5cb8b 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/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"); + } } } } diff --git a/app/assets/sass/uswds/_uswds-theme.scss b/app/assets/sass/uswds/_uswds-theme.scss index 339cbd5e4..b588e264d 100644 --- a/app/assets/sass/uswds/_uswds-theme.scss +++ b/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 ); diff --git a/app/main/forms.py b/app/main/forms.py index a23736ced..185a581fa 100644 --- a/app/main/forms.py +++ b/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, diff --git a/app/templates/components/list-entry.html b/app/templates/components/list-entry.html index ae80f5950..f96f88017 100644 --- a/app/templates/components/list-entry.html +++ b/app/templates/components/list-entry.html @@ -8,7 +8,7 @@ autocomplete=True ) %} -
+
{% if hint %} {% set attributes = {"aria-describedby": field.name + '-hint'} %} {% else %} diff --git a/app/templates/components/us_components/checkboxes/template.njk b/app/templates/components/us_components/checkboxes/template.njk index e15bc8b1f..2eeb21fe7 100644 --- a/app/templates/components/us_components/checkboxes/template.njk +++ b/app/templates/components/us_components/checkboxes/template.njk @@ -93,7 +93,7 @@
{% endset -%} -
+
{% if params.fieldset %} {% call govukFieldset({ describedBy: describedBy, diff --git a/app/templates/components/us_components/input/template.njk b/app/templates/components/us_components/input/template.njk index 8813370c5..b4d8ce555 100644 --- a/app/templates/components/us_components/input/template.njk +++ b/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 "" %} -
+
{{ govukLabel({ html: params.label.html, text: params.label.text, diff --git a/app/templates/components/us_components/radios/template.njk b/app/templates/components/us_components/radios/template.njk index 5ef8b832c..0ee1a77c2 100644 --- a/app/templates/components/us_components/radios/template.njk +++ b/app/templates/components/us_components/radios/template.njk @@ -88,7 +88,7 @@
{% endset -%} -
+
{% if params.fieldset %} {% call govukFieldset({ describedBy: describedBy, diff --git a/app/templates/components/us_components/textarea/template.njk b/app/templates/components/us_components/textarea/template.njk index 56d9cc333..49c5642ba 100644 --- a/app/templates/components/us_components/textarea/template.njk +++ b/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 "" %} -
+
{{ govukLabel({ html: params.label.html, text: params.label.text, diff --git a/app/templates/forms/fields/checkboxes/template.njk b/app/templates/forms/fields/checkboxes/template.njk index 7e2ccd927..1d3fe69ee 100644 --- a/app/templates/forms/fields/checkboxes/template.njk +++ b/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 @@ {% endset -%} -
+
{% if params.fieldset %} {% call govukFieldset({ describedBy: describedBy, diff --git a/app/templates/views/cookies.html b/app/templates/views/cookies.html index 11f918c05..75823d624 100644 --- a/app/templates/views/cookies.html +++ b/app/templates/views/cookies.html @@ -121,7 +121,7 @@
-
+
Do you want to accept analytics cookies? diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html index cb5cbe245..0cd442548 100644 --- a/app/templates/views/manage-users.html +++ b/app/templates/views/manage-users.html @@ -40,6 +40,7 @@ {% endif %} +

Permissions

    {% for permission, label in permissions %} {{ tick_cross( diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html index 6c5a6294f..65b49c2bb 100644 --- a/app/templates/views/templates/_template_list.html +++ b/app/templates/views/templates/_template_list.html @@ -1,108 +1,3 @@ - - - {% macro format_item_name(name, separators=True) -%} {%- if name is string -%} {{- name -}} diff --git a/tests/app/main/views/test_manage_users.py b/tests/app/main/views/test_manage_users.py index 355328ae1..5a25c12e8 100644 --- a/tests/app/main/views/test_manage_users.py +++ b/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 ' diff --git a/tests/javascripts/collapsibleCheckboxes.test.js b/tests/javascripts/collapsibleCheckboxes.test.js index 121f97353..bea3c7432 100644 --- a/tests/javascripts/collapsibleCheckboxes.test.js +++ b/tests/javascripts/collapsibleCheckboxes.test.js @@ -41,7 +41,7 @@ describe('Collapsible fieldset', () => { // set up DOM document.body.innerHTML = `
    -
    +
    Folders this team member can see @@ -57,7 +57,7 @@ describe('Collapsible fieldset', () => {
    `; 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); diff --git a/tests/javascripts/colourPreview.test.js b/tests/javascripts/colourPreview.test.js index ab37f8e7e..855c2a048 100644 --- a/tests/javascripts/colourPreview.test.js +++ b/tests/javascripts/colourPreview.test.js @@ -18,14 +18,14 @@ describe('Colour preview', () => { // set up DOM document.body.innerHTML = ` -
    +
    `; - field = document.querySelector('.govuk-form-group'); + field = document.querySelector('.usa-form-group'); textbox = document.querySelector('input[type=text]'); }); diff --git a/tests/javascripts/listEntry.test.js b/tests/javascripts/listEntry.test.js index 78bda9718..73032c4de 100644 --- a/tests/javascripts/listEntry.test.js +++ b/tests/javascripts/listEntry.test.js @@ -49,7 +49,7 @@ describe("List entry", () => { for (let idx = 0; idx < 10; idx++) { result += `
    -
    +
    @@ -62,7 +62,7 @@ describe("List entry", () => { }; document.body.innerHTML = - `
    + `
    Domain names diff --git a/tests/javascripts/support/helpers/html.js b/tests/javascripts/support/helpers/html.js index 2420fa2d6..49e139909 100644 --- a/tests/javascripts/support/helpers/html.js +++ b/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)); } diff --git a/tests/javascripts/templateFolderForm.test.js b/tests/javascripts/templateFolderForm.test.js index 2a10912db..b6e8215d5 100644 --- a/tests/javascripts/templateFolderForm.test.js +++ b/tests/javascripts/templateFolderForm.test.js @@ -52,7 +52,7 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
    -
    +
    @@ -65,7 +65,7 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
    -
    +