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 nhsuk/nhsapp-frontend#12 for more details.

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};
+  }
+}

app/views/immunisation_imports/index.html.erb

@@ -32,9 +32,8 @@
         selected: true,
       )
     end %>
-<p class="app-action-list">
-  <%= govuk_link_to "Upload new vaccination records", new_programme_immunisation_import_path %>
-</p>
+
+<%= govuk_button_link_to "Import vaccination records", new_programme_immunisation_import_path, class: "app-button--secondary" %>
 
 <div class="nhsuk-table__panel-with-heading-tab">
   <h3 class="nhsuk-table__heading-tab">Uploads</h3>

app/views/programmes/patients.html.erb

@@ -33,8 +33,6 @@
       )
     end %>
 
-<p class="app-action-list">
-  <%= link_to "Add children to programme cohort", new_programme_cohort_import_path(@programme) %>
-</p>
+<%= govuk_button_link_to "Import child records", new_programme_cohort_import_path(@programme), class: "app-button--secondary" %>
 
 <%= render AppPatientTableComponent.new(@patients, programme: @programme) %>

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

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"

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

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