Improve patient session page banner

Make the patient session banner sticky as the user scrolls and use the same design as for session pages. The banner should collapse showing minimal information as the user scrolls

Author: murugapl

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/helpers/sessions_helper.rb

@@ -56,8 +56,17 @@ def session_status(session)
     end
   end
 
-  def session_title(session)
+  def session_title(session, include_dates: true)
     programmes = session.programmes.map(&:name).to_sentence
+<<<<<<< HEAD
+=======
+    dates =
+      (
+        if session.dates.present? && include_dates
+          "on #{session_dates(session)}"
+        end
+      )
+>>>>>>> b88b5b4ac (Improve patient session page banner)
 
     items =
       if session.generic_clinic?

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, include_dates: false), 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

@@ -658,7 +658,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