diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index 952155057..1f004f65c 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -2,7 +2,7 @@ display: flex; - li { + &-item__container { width: 25%; flex-grow: 1; text-align: left; @@ -23,8 +23,8 @@ display: flex; } - a, - &-selected-item { + &-item, + &-item--selected { display: flex; // float causes display: block in browsers without flexbox flex-direction: column; justify-content: center; @@ -34,7 +34,7 @@ padding: 10px 0; } - a { + &-item { $background: $link-colour; background: $background; color: $white; @@ -43,10 +43,6 @@ text-decoration: none; cursor: pointer; - .pill-label { - text-decoration: underline; - } - &:link, &:visited { color: $white; @@ -62,13 +58,23 @@ } } - &-selected-item { + &-item--selected { + background: inherit; border: 2px solid $black; outline: 1px solid rgba($white, 0.1); position: relative; z-index: 10; - color: $text-colour; + &:link, + &:visited { + color: $govuk-text-colour; + } + + &:hover { + color: govuk-tint($govuk-text-colour, 25%); + } + + &:active, &:focus { z-index: 1000; outline: 3px solid $yellow; @@ -76,8 +82,9 @@ } - &-label { + &-item__label { + text-decoration: underline; // reduce padding until screen is above 420px / zoomed below 300% padding-left: govuk-spacing(1); @@ -87,7 +94,7 @@ } - &-centered-item { + &-item--centered { text-align: center; padding-left: 0; } diff --git a/app/templates/components/folder-path.html b/app/templates/components/folder-path.html index 0d1900745..606b8bffc 100644 --- a/app/templates/components/folder-path.html +++ b/app/templates/components/folder-path.html @@ -6,7 +6,7 @@ link_current_item=False, root_element='h1' ) %} - <{{ root_element }} class="heading-medium folder-heading"> + <{{ root_element }} class="heading-medium folder-heading"{% if root_element == 'h1' %} id="page-header"{% endif %}> {% for folder in folders %} {% if loop.last and not link_current_item %} {% if folder.template_type or not folder.id %} diff --git a/app/templates/components/page-header.html b/app/templates/components/page-header.html index e47c43afe..a0d7c666f 100644 --- a/app/templates/components/page-header.html +++ b/app/templates/components/page-header.html @@ -2,13 +2,14 @@ {% macro page_header( h1, - back_link=None + back_link=None, + size='large' ) %} {% if back_link %} {{ govukBackLink({ "href": back_link }) }} {% endif %} -

{{ h1 }}

+

{{ h1 }}

{% endmacro %} diff --git a/app/templates/components/pill.html b/app/templates/components/pill.html index d6a416522..21dfc2844 100644 --- a/app/templates/components/pill.html +++ b/app/templates/components/pill.html @@ -6,25 +6,22 @@ big_number_args={'smaller': True}, show_count=True ) %} - + {% endmacro %} diff --git a/app/templates/views/dashboard/all-template-statistics.html b/app/templates/views/dashboard/all-template-statistics.html index 073244aa4..993d03f44 100644 --- a/app/templates/views/dashboard/all-template-statistics.html +++ b/app/templates/views/dashboard/all-template-statistics.html @@ -1,3 +1,4 @@ +{% from "components/page-header.html" import page_header %} {% from "components/message-count-label.html" import message_count_label %} {% from "components/pill.html" import pill %} {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, spark_bar_field %} @@ -10,7 +11,7 @@ {% block maincolumn_content %} -

Templates used

+ {{ page_header("Templates used") }}
{{ pill( diff --git a/app/templates/views/dashboard/monthly.html b/app/templates/views/dashboard/monthly.html index 7b804c982..aeb519288 100644 --- a/app/templates/views/dashboard/monthly.html +++ b/app/templates/views/dashboard/monthly.html @@ -1,3 +1,4 @@ +{% from "components/page-header.html" import page_header %} {% from "components/big-number.html" import big_number_with_status, big_number %} {% from "components/pill.html" import pill %} {% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading, row_heading %} @@ -12,9 +13,7 @@ {% block maincolumn_content %} -

- Messages sent -

+ {{ page_header('Messages sent') }}
{{ pill( items=years, diff --git a/app/templates/views/notifications.html b/app/templates/views/notifications.html index 9c40a27c7..80ef2a15a 100644 --- a/app/templates/views/notifications.html +++ b/app/templates/views/notifications.html @@ -1,6 +1,7 @@ {% extends "withnav_template.html" %} {% from "components/ajax-block.html" import ajax_block %} {% from "components/message-count-label.html" import message_count_label, recipient_count_label %} +{% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/textbox.html" import textbox %} {% from "components/form.html" import form_wrapper %} @@ -23,9 +24,7 @@ {% block maincolumn_content %} -

- {{ page_title }} -

+ {{ page_header(page_title) }} {% if not message_type == "letter" %} {{ ajax_block( diff --git a/app/templates/views/organisations/organisation/index.html b/app/templates/views/organisations/organisation/index.html index 7ce3c3dc1..4caa5ca0b 100644 --- a/app/templates/views/organisations/organisation/index.html +++ b/app/templates/views/organisations/organisation/index.html @@ -1,3 +1,4 @@ +{% from "components/page-header.html" import page_header %} {% from "components/big-number.html" import big_number %} {% from "components/live-search.html" import live_search %} {% from "components/message-count-label.html" import message_count_label %} @@ -10,9 +11,7 @@ {% block maincolumn_content %} -

- Usage -

+ {{ page_header('Usage', size='medium') }}
{{ pill(years, selected_year, big_number_args={'smallest': True}) }} diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html index 505d6f527..4b220b6c2 100644 --- a/app/templates/views/templates/choose.html +++ b/app/templates/views/templates/choose.html @@ -4,6 +4,7 @@ {% from "components/textbox.html" import textbox %} {% from "components/live-search.html" import live_search %} {% from "components/form.html" import form_wrapper %} +{% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% extends "withnav_template.html" %} @@ -18,9 +19,7 @@ {% if (not current_service.all_templates) and (not current_service.all_template_folders) %} -

- {{ page_title }} -

+ {{ page_header(page_title, size='medium') }}

{% if current_user.has_permissions('manage_templates') %} diff --git a/app/templates/views/usage.html b/app/templates/views/usage.html index 4b7491be4..d14de5827 100644 --- a/app/templates/views/usage.html +++ b/app/templates/views/usage.html @@ -1,6 +1,7 @@ {% from "components/big-number.html" import big_number %} {% from "components/message-count-label.html" import message_count_label %} {% from "components/table.html" import list_table, field, hidden_field_heading, row_heading, text_field %} +{% from "components/page-header.html" import page_header %} {% from "components/pill.html" import pill %} {% extends "withnav_template.html" %} @@ -11,7 +12,7 @@ {% block maincolumn_content %} -

Usage

+ {{ page_header('Usage', size='medium') }}
{{ pill(years, selected_year, big_number_args={'smallest': True}) }} diff --git a/tests/app/main/views/organisations/test_organisation.py b/tests/app/main/views/organisations/test_organisation.py index 36e1b4cdf..6f33da32d 100644 --- a/tests/app/main/views/organisations/test_organisation.py +++ b/tests/app/main/views/organisations/test_organisation.py @@ -503,7 +503,7 @@ def test_organisation_services_filters_by_financial_year( '2019 to 2020 financial year ' '2018 to 2019 financial year' ) - assert normalize_spaces(page.select_one('.pill-selected-item').text) == ( + assert normalize_spaces(page.select_one('.pill-item--selected').text) == ( expected_selected ) diff --git a/tests/app/main/views/test_activity.py b/tests/app/main/views/test_activity.py index 9c5a8c7ab..1b793f771 100644 --- a/tests/app/main/views/test_activity.py +++ b/tests/app/main/views/test_activity.py @@ -692,7 +692,7 @@ def test_redacts_templates_that_should_be_redacted( @pytest.mark.parametrize( - "message_type, tablist_visible", [ + "message_type, nav_visible", [ ('email', True), ('sms', True), ('letter', False) @@ -707,7 +707,7 @@ def test_big_numbers_dont_show_for_letters( mock_get_service_data_retention, mock_get_no_api_keys, message_type, - tablist_visible, + nav_visible, ): page = client_request.get( 'main.view_notifications', @@ -717,7 +717,7 @@ def test_big_numbers_dont_show_for_letters( page=1, ) - assert (len(page.select("[role=tablist]")) > 0) == tablist_visible + assert (len(page.select(".pill")) > 0) == nav_visible assert (len(page.select("[type=search]")) > 0) is True diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py index c748f9b92..01b9aacc9 100644 --- a/tests/app/main/views/test_dashboard.py +++ b/tests/app/main/views/test_dashboard.py @@ -950,12 +950,12 @@ def test_usage_page( mock_get_free_sms_fragment_limit.assert_called_with(SERVICE_ONE_ID, 2011) cols = page.find_all('div', {'class': 'govuk-grid-column-one-third'}) - nav = page.find('ul', {'class': 'pill', 'role': 'tablist'}) - nav_links = nav.find_all('a') + nav = page.find('ul', {'class': 'pill'}) + unselected_nav_links = nav.select('a:not(.pill-item--selected)') - assert normalize_spaces(nav.find('li', {'aria-selected': 'true'}).text) == '2011 to 2012 financial year' - assert normalize_spaces(nav_links[0].text) == '2010 to 2011 financial year' - assert normalize_spaces(nav_links[1].text) == '2009 to 2010 financial year' + assert normalize_spaces(nav.find('a', {'aria-current': 'page'}).text) == '2011 to 2012 financial year' + assert normalize_spaces(unselected_nav_links[0].text) == '2010 to 2011 financial year' + assert normalize_spaces(unselected_nav_links[1].text) == '2009 to 2010 financial year' assert '252,190' in cols[1].text assert 'Text messages' in cols[1].text @@ -992,12 +992,12 @@ def test_usage_page_with_letters( mock_get_free_sms_fragment_limit.assert_called_with(SERVICE_ONE_ID, 2011) cols = page.find_all('div', {'class': 'govuk-grid-column-one-third'}) - nav = page.find('ul', {'class': 'pill', 'role': 'tablist'}) - nav_links = nav.find_all('a') + nav = page.find('ul', {'class': 'pill'}) + unselected_nav_links = nav.select('a:not(.pill-item--selected)') - assert normalize_spaces(nav.find('li', {'aria-selected': 'true'}).text) == '2011 to 2012 financial year' - assert normalize_spaces(nav_links[0].text) == '2010 to 2011 financial year' - assert normalize_spaces(nav_links[1].text) == '2009 to 2010 financial year' + assert normalize_spaces(nav.find('a', {'aria-current': 'page'}).text) == '2011 to 2012 financial year' + assert normalize_spaces(unselected_nav_links[0].text) == '2010 to 2011 financial year' + assert normalize_spaces(unselected_nav_links[1].text) == '2009 to 2010 financial year' assert '252,190' in cols[1].text assert 'Text messages' in cols[1].text diff --git a/tests/app/main/views/test_jobs.py b/tests/app/main/views/test_jobs.py index 3fdfbf985..fc12fa040 100644 --- a/tests/app/main/views/test_jobs.py +++ b/tests/app/main/views/test_jobs.py @@ -188,7 +188,7 @@ def test_should_show_job_in_progress( ) assert [ normalize_spaces(link.text) - for link in page.select('.pill a') + for link in page.select('.pill a:not(.pill-item--selected)') ] == [ '10 sending', '0 delivered', '0 failed' ] @@ -213,7 +213,7 @@ def test_should_show_job_without_notifications( ) assert [ normalize_spaces(link.text) - for link in page.select('.pill a') + for link in page.select('.pill a:not(.pill-item--selected)') ] == [ '10 sending', '0 delivered', '0 failed' ] @@ -279,7 +279,7 @@ def test_should_show_old_job( service_id=SERVICE_ONE_ID, job_id=fake_uuid, ) - assert not page.select('.pill a') + assert not page.select('.pill') assert not page.select('p.hint') assert not page.select('a[download]') assert page.select_one('tbody').text.strip() == expected_message diff --git a/tests/app/main/views/test_template_folders.py b/tests/app/main/views/test_template_folders.py index b70a3cf79..ed8ca3533 100644 --- a/tests/app/main/views/test_template_folders.py +++ b/tests/app/main/views/test_template_folders.py @@ -429,7 +429,7 @@ def test_should_show_templates_folder_page( **expected_parent_link_args[index] ) - links_in_page = page.select('.pill a') + links_in_page = page.select('.pill a:not(.pill-item--selected)') assert len(links_in_page) == len(expected_nav_links) diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py index b53f8b874..e531a33a4 100644 --- a/tests/app/main/views/test_templates.py +++ b/tests/app/main/views/test_templates.py @@ -181,7 +181,7 @@ def test_should_show_page_for_choosing_a_template( assert normalize_spaces(page.select_one('h1').text) == expected_page_title - links_in_page = page.select('.pill a') + links_in_page = page.select('.pill a:not(.pill-item--selected)') assert len(links_in_page) == len(expected_nav_links)