From 1e1df14bd6b721b0c663706da5d0b20af1981cac Mon Sep 17 00:00:00 2001 From: Thomas Leese Date: Wed, 18 Sep 2024 11:18:17 +0200 Subject: [PATCH] Use secondary style for upload buttons This is to match the designs in the prototype, using a newer button style that's currently being tested but not yet part of the NHS frontend. See https://github.com/nhsuk/nhsapp-frontend/issues/12 for more details. --- app/assets/stylesheets/_button.scss | 69 +++++++++++++++++-- app/views/immunisation_imports/index.html.erb | 5 +- app/views/programmes/patients.html.erb | 4 +- spec/features/cohort_imports_upload_spec.rb | 2 +- spec/features/e2e_journey_spec.rb | 2 +- ...nisation_imports_upload_duplicates_spec.rb | 2 +- .../immunisation_imports_upload_spec.rb | 4 +- 7 files changed, 72 insertions(+), 16 deletions(-) diff --git a/app/assets/stylesheets/_button.scss b/app/assets/stylesheets/_button.scss index 861ea19636..8a7181f783 100644 --- a/app/assets/stylesheets/_button.scss +++ b/app/assets/stylesheets/_button.scss @@ -4,11 +4,6 @@ $app-cis2-button-active-color: #003087; $app-cis2-button-shadow-color: #003087; $button-shadow-size: 4px; -.app-button--small { - @include nhsuk-typography-responsive(16); - padding: nhsuk-spacing(1) 12px; -} - .nhsuk-button { .nhsuk-table & { margin-bottom: 0; @@ -46,3 +41,67 @@ $button-shadow-size: 4px; top: $button-shadow-size; } } + +// Proposed secondary button style +// See https://github.com/nhsuk/nhsapp-frontend/issues/12 +// See https://github.com/nhsuk/nhs-app-design-styles-components-patterns +@mixin app-button-secondary($button-color) { + background-color: transparent; + border-bottom: 0; + border-color: $button-color; + box-shadow: 0 4px 0 $button-color; + color: $button-color; + // Adjust padding to account for removal of 2px bottom border + padding-bottom: 13px; + padding-top: 13px; + + &:link, + &:visited { + color: $button-color; + } + + &:hover { + background-color: rgba($button-color, 10%); + color: $button-color; + } + + &:focus { + background-color: $nhsuk-focus-color; + border-color: $nhsuk-focus-color; + color: $nhsuk-focus-text-color; + } + + &:active { + background-color: rgba($button-color, 15%); + border-color: $button-color; + border-bottom: 2px solid; // Reintroduce 2px bottom border + color: $button-color; + // Revert padding to account for reintroduction of 2px bottom border + padding-bottom: 12px; + padding-top: 12px; + } + + &:focus:visited:active { + // Override .nhsuk-button turning colour white + color: $button-color; + } +} + +.app-button--secondary { + @include app-button-secondary($nhsuk-link-color); +} + +.app-button--secondary-warning { + @include app-button-secondary($nhsuk-warning-button-color); +} + +.app-button--small { + @include nhsuk-typography-responsive(16); + padding: nhsuk-spacing(1) 12px; + + &.app-button--secondary, + &.app-button--secondary-warning { + padding-bottom: #{nhsuk-spacing(1) + 1px}; + padding-top: #{nhsuk-spacing(1) + 1px}; + } +} diff --git a/app/views/immunisation_imports/index.html.erb b/app/views/immunisation_imports/index.html.erb index a600d74d75..978a9c80d0 100644 --- a/app/views/immunisation_imports/index.html.erb +++ b/app/views/immunisation_imports/index.html.erb @@ -32,9 +32,8 @@ selected: true, ) end %> -

- <%= govuk_link_to "Upload new vaccination records", new_programme_immunisation_import_path %> -

+ +<%= govuk_button_link_to "Import vaccination records", new_programme_immunisation_import_path, class: "app-button--secondary" %>

Uploads

diff --git a/app/views/programmes/patients.html.erb b/app/views/programmes/patients.html.erb index 4a85314bd1..fb631f4d27 100644 --- a/app/views/programmes/patients.html.erb +++ b/app/views/programmes/patients.html.erb @@ -33,8 +33,6 @@ ) end %> -

- <%= link_to "Add children to programme cohort", new_programme_cohort_import_path(@programme) %> -

+<%= govuk_button_link_to "Import child records", new_programme_cohort_import_path(@programme), class: "app-button--secondary" %> <%= render AppPatientTableComponent.new(@patients, programme: @programme) %> diff --git a/spec/features/cohort_imports_upload_spec.rb b/spec/features/cohort_imports_upload_spec.rb index 20381f23b4..8d44fdb7ba 100644 --- a/spec/features/cohort_imports_upload_spec.rb +++ b/spec/features/cohort_imports_upload_spec.rb @@ -56,7 +56,7 @@ def when_i_visit_the_cohort_page_for_the_hpv_programme end def and_i_start_adding_children_to_the_cohort - click_on "Add children to programme cohort" + click_on "Import child records" end def then_i_should_see_the_upload_cohort_page diff --git a/spec/features/e2e_journey_spec.rb b/spec/features/e2e_journey_spec.rb index 154c2736a9..678b953131 100644 --- a/spec/features/e2e_journey_spec.rb +++ b/spec/features/e2e_journey_spec.rb @@ -83,7 +83,7 @@ def when_i_upload_the_cohort_import_containing_one_child click_on "Vaccination programmes", match: :first click_on "HPV" click_on "Cohort" - click_on "Add children to programme cohort" + click_on "Import child records" attach_file "cohort_import[csv]", csv_file.path click_on "Continue" click_on "Upload records" diff --git a/spec/features/immunisation_imports_upload_duplicates_spec.rb b/spec/features/immunisation_imports_upload_duplicates_spec.rb index 2ae30e0fad..03361de708 100644 --- a/spec/features/immunisation_imports_upload_duplicates_spec.rb +++ b/spec/features/immunisation_imports_upload_duplicates_spec.rb @@ -112,7 +112,7 @@ def when_i_go_to_the_reports_page end def and_i_click_on_the_upload_link - click_on "Upload new vaccination records" + click_on "Import vaccination records" end def and_i_upload_a_file_with_duplicate_records diff --git a/spec/features/immunisation_imports_upload_spec.rb b/spec/features/immunisation_imports_upload_spec.rb index 57bb508ec5..7441113003 100644 --- a/spec/features/immunisation_imports_upload_spec.rb +++ b/spec/features/immunisation_imports_upload_spec.rb @@ -75,11 +75,11 @@ def when_i_go_to_the_reports_page end def then_i_should_see_the_upload_link - expect(page).to have_link("Upload new vaccination records") + expect(page).to have_link("Import vaccination records") end def when_i_click_on_the_upload_link - click_on "Upload new vaccination records" + click_on "Import vaccination records" end def then_i_should_see_the_upload_page