Improve patient session page banner

app/assets/stylesheets/components/_session-banner.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../vendor/nhsuk-frontend" as *;
 
 .app-session-banner {
@@ -46,4 +47,43 @@
       margin-left: #{$nhsuk-gutter-half * -1};
     }
   }
+
+  &[data-app-sticky-init] {
+    position: sticky;
+    z-index: 999;
+    top: 0;
+    right: 0;
+    left: 0;
+
+    width: 100vw;
+    margin-right: -50vw;
+    margin-left: -50vw;
+  }
+
+  &[data-stuck="true"] {
+    border-bottom-color: nhsuk-colour("grey-3");
+    box-shadow: 0 $nhsuk-border-width 0
+      color.scale(nhsuk-colour("grey-3"), $alpha: -50%);
+
+    .app-main-wrapper--xs {
+      padding-top: nhsuk-spacing(2);
+      padding-bottom: 0;
+    }
+
+    .nhsuk-breadcrumb {
+      @include nhsuk-visually-hidden;
+    }
+
+    .nhsuk-heading-l {
+      @include nhsuk-font-size(22);
+    }
+
+    .app-secondary-navigation {
+      box-shadow: none;
+    }
+
+    .app-secondary-navigation__list {
+      @include nhsuk-font-size(16);
+    }
+  }
 }

app/assets/stylesheets/core/objects/_grid.scss

@@ -21,7 +21,7 @@
 
   &[data-app-sticky-init] {
     @include nhsuk-media-query($from: large-desktop) {
-      top: #{nhsuk-spacing(9) + nhsuk-spacing(3)};
+      top: #{nhsuk-spacing(9) + nhsuk-spacing(5)};
     }
   }
 }

app/assets/stylesheets/core/objects/_index.scss

@@ -1 +1,2 @@
 @forward "grid";
+@forward "main-wrapper";

app/assets/stylesheets/core/objects/_main-wrapper.scss

@@ -0,0 +1,6 @@
+@use "../../vendor/nhsuk-frontend" as *;
+
+.app-main-wrapper--xs {
+  padding-top: nhsuk-spacing(3);
+  padding-bottom: nhsuk-spacing(3);
+}

app/components/app_breadcrumb_component.html.erb

@@ -1,4 +1,4 @@
-<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb"
+<nav class="nhsuk-breadcrumb<%= " nhsuk-breadcrumb--reverse" if @reverse %>" aria-label="Breadcrumb"
      <%= @attributes.map { |name, value| "#{name}=\"#{value}\"" }.join(" ") %>>
   <ol class="nhsuk-breadcrumb__list">
     <% @items.each do |item| %>

app/components/app_breadcrumb_component.rb

@@ -1,8 +1,9 @@
 # frozen_string_literal: true
 
 class AppBreadcrumbComponent < ViewComponent::Base
-  def initialize(items:, attributes: {})
+  def initialize(items:, reverse: false, attributes: {})
     @items = items
+    @reverse = reverse
     @attributes = attributes
   end
 

app/components/app_patient_summary_component.rb

@@ -2,12 +2,8 @@
 
 class AppPatientSummaryComponent < ViewComponent::Base
   erb_template <<-ERB
-    <h3 class="nhsuk-heading-s nhsuk-u-margin-top-1">
-      <%= patient.full_name %>
-    </h3>
-
     <%= govuk_summary_list(rows:, classes:) %>
-    
+
     <p>
       <%= link_to "View full child record", patient_path(patient) %>
     </p>
@@ -35,11 +31,7 @@ def rows
   end
 
   def classes
-    %w[
-      nhsuk-summary-list--no-border
-      app-summary-list--full-width
-      nhsuk-u-margin-bottom-2
-    ]
+    %w[app-summary-list--full-width nhsuk-u-margin-bottom-2]
   end
 
   def nhs_number_row
@@ -68,7 +60,14 @@ def date_of_birth_row
       },
       value: {
         text: patient.date_of_birth.to_fs(:long)
-      }
+      },
+      **(
+        if patient.restricted?
+          { classes: %w[nhsuk-summary-list__row--no-border] }
+        else
+          {}
+        end
+      )
     }
   end
 
@@ -79,7 +78,8 @@ def address_row
       },
       value: {
         text: format_address_multi_line(patient)
-      }
+      },
+      classes: %w[nhsuk-summary-list__row--no-border]
     }
   end
 end

app/views/patient_sessions/_header.html.erb

@@ -1,14 +1,5 @@
 <% content_for :page_title, @patient.initials %>
 
-<% content_for :navigation do %>
-  <%= render AppBreadcrumbComponent.new(items: [
-                                          { text: "Home", href: dashboard_path },
-                                          { text: t("sessions.index.title"), href: sessions_path },
-                                          { text: @session.location.name, href: session_path(@session) },
-                                          @breadcrumb_item,
-                                        ].compact) %>
-<% end %>
-
 <% if (outstanding_programmes = patient_outstanding_programmes(@patient, session: @session)).any? %>
   <% programmes_can_record_vaccination = outstanding_programmes.filter do |programme|
        policy(VaccinationRecord.new(patient: @patient, session: @session, programme:)).new?
@@ -19,29 +10,34 @@
   <% end %>
 <% end %>
 
-<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-2">
-  <%= @patient.full_name %>
-</h1>
+<% content_for :main_content do %>
+  <div class="app-session-banner" data-module="app-sticky">
+    <div class="nhsuk-width-container">
+        <%= render AppBreadcrumbComponent.new(items: [
+                                                { text: session_title(@session), href: session_path(@session) },
+                                                @breadcrumb_item,
+                                              ].compact, reverse: true) %>
 
-<p class="nhsuk-caption-l nhsuk-u-margin-bottom-4">
-  <%= patient_year_group(@patient, academic_year: @academic_year) %>
-</p>
+      <div class="nhsuk-main-wrapper app-main-wrapper--xs">
+        <%= h1 @patient.full_name %>
+      </div>
 
-<%= render AppStickyNavigationComponent.new do %>
-  <%= render AppSecondaryNavigationComponent.new do |nav|
-        @session.programmes_for(patient: @patient).each do |programme|
-          nav.with_item(
-            href: session_patient_programme_path(@session, @patient, programme, return_to: params[:return_to]),
-            text: programme.name,
-            selected: @programme == programme,
-            ticked: @patient.programme_status(programme, academic_year: @academic_year).vaccinated?,
-          )
-        end
-
-        nav.with_item(
-          href: session_patient_activity_path(@session, @patient, return_to: params[:return_to]),
-          text: "Session activity and notes",
-          selected: request.path.ends_with?("/activity"),
-        )
-      end %>
+      <%= render AppSecondaryNavigationComponent.new(reverse: true) do |nav|
+            @session.programmes_for(patient: @patient).each do |programme|
+              nav.with_item(
+                href: session_patient_programme_path(@session, @patient, programme, return_to: params[:return_to]),
+                text: programme.name,
+                selected: @programme == programme,
+                ticked: @patient.programme_status(programme, academic_year: @academic_year).vaccinated?,
+              )
+            end
+
+            nav.with_item(
+              href: session_patient_activity_path(@session, @patient, return_to: params[:return_to]),
+              text: "Session activity and notes",
+              selected: request.path.ends_with?("/activity"),
+            )
+          end %>
+    </div>
+  </div>
 <% end %>

spec/components/app_patient_summary_component_spec.rb

@@ -17,8 +17,6 @@
 
   let(:href) { "/patients/#{patient.id}" }
 
-  it { should have_content("SELDON, Hari") }
-
   it { should have_content("NHS number") }
 
   context "when patient has an NHS number" do

spec/features/e2e_journey_spec.rb

@@ -248,7 +248,7 @@ def then_i_should_see_that_the_patient_is_ready_for_vaccination
   end
 
   def when_i_click_on_the_register_attendance_section
-    click_link "Pilot School"
+    within(".nhsuk-breadcrumb__list") { click_link @school.name }
     within(".app-secondary-navigation") { click_link "Children" }
   end
 
@@ -285,7 +285,7 @@ def and_i_record_the_successful_vaccination
   end
 
   def then_i_see_that_the_child_is_vaccinated
-    click_on "Pilot School"
+    within(".nhsuk-breadcrumb__list") { click_link @school.name }
     within(".app-secondary-navigation") { click_on "Children" }
     expect(page).not_to have_content("Not eligible")
     choose "Vaccinated", match: :first

spec/features/manage_children_spec.rb

@@ -657,7 +657,7 @@ def when_i_click_on_record_new_vaccination
   end
 
   def then_i_see_the_community_clinic_session
-    expect(page).to have_content("Community clinic")
+    expect(page).to have_content("community clinic")
   end
 
   def when_i_go_to_the_dashboard

spec/features/parental_consent_hpv_spec.rb

@@ -199,7 +199,7 @@ def and_they_see_the_full_consent_form
   end
 
   def when_they_check_triage
-    click_on @session.location.name
+    click_on "#{@session.programmes.map(&:name).to_sentence} session at #{@session.location.name}"
     within(".app-secondary-navigation") { click_on "Children" }
     choose "Due vaccination", match: :first
     click_on "Update results"