Add ticks to programme tabs (#3226)

When viewing a patient session, if that programme has an vaccinated
outcome for this session, we should show a tick next to the programme so
the nurses know that there's nothing further to be done for that
programme.

## Screenshot

<img width="463" alt="Screenshot 2025-03-12 at 17 31 40"
src="https://github.com/user-attachments/assets/28757caa-5a79-4880-bd96-3d402304469c"
/>

Author: thomasleese

app/assets/stylesheets/_secondary-navigation.scss

@@ -53,6 +53,18 @@
   font-weight: inherit;
 }
 
+.app-secondary-navigation__link,
+.app-secondary-navigation__current {
+  align-items: center;
+  display: flex;
+  gap: nhsuk-spacing(1);
+
+  .nhsuk-icon {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
 .app-secondary-navigation__list {
   // The list uses box-shadow rather than a border to set a 1px grey line at the
   // bottom, so that the current item appears on top of the grey line.

app/components/app_secondary_navigation_component.html.erb

@@ -2,20 +2,22 @@
   <ul class="app-secondary-navigation__list">
     <% items.each do |item| %>
       <li class="app-secondary-navigation__list-item">
-        <% if item.selected %>
-          <%= link_to item.href,
-                      class: "app-secondary-navigation__link",
-                      aria: { current: true },
-                      data: { turbo: true, turbo_action: "replace" } do %>
+        <%= link_to item.href,
+                    class: "app-secondary-navigation__link",
+                    aria: { current: item.selected || nil },
+                    data: { turbo: true, turbo_action: "replace" } do %>
+          <% if item.selected %>
             <strong class="app-secondary-navigation__current">
               <%= item %>
             </strong>
+          <% else %>
+              <%= item %>
           <% end %>
-        <% else %>
-          <%= link_to item.href,
-                      class: "app-secondary-navigation__link",
-                      data: { turbo: true, turbo_action: "replace" } do %>
-            <%= item %>
+
+          <% if item.ticked %>
+            <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" role="presentation">
+              <path d="M18.4 7.8l-8.5 8.4L5.6 12" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"></path>
+            </svg>
           <% end %>
         <% end %>
       </li>

app/components/app_secondary_navigation_component.rb

@@ -13,18 +13,19 @@ def initialize(classes: nil, attributes: {})
   end
 
   class Item < ViewComponent::Base
-    attr_reader :href, :selected
-
-    def call
-      content || @text || raise(ArgumentError, "no text or content")
-    end
-
-    def initialize(href:, text: nil, selected: false)
+    def initialize(href:, text: nil, selected: false, ticked: false)
       super
 
       @href = href
       @text = html_escape(text)
       @selected = selected
+      @ticked = ticked
     end
+
+    def call
+      content || @text || raise(ArgumentError, "no text or content")
+    end
+
+    attr_reader :href, :selected, :ticked
   end
 end

app/models/patient_session/session_outcome.rb

@@ -18,6 +18,8 @@ def initialize(patient_session)
 
   def vaccinated?(programme) = status[programme] == VACCINATED
 
+  def already_had?(programme) = status[programme] == ALREADY_HAD
+
   def not_vaccinated?(programme) =
     status[programme] != VACCINATED && status[programme] != NONE
 

app/views/patient_sessions/_header.html.erb

@@ -55,6 +55,7 @@
           href: session_patient_programme_path(@session, @patient, programme, return_to: params[:return_to]),
           text: programme.name,
           selected: @programme == programme,
+          ticked: @patient_session.session_outcome.vaccinated?(programme) || @patient_session.session_outcome.already_had?(programme),
         )
       end
 

spec/components/app_secondary_navigation_component_spec.rb

@@ -9,7 +9,8 @@
       nav.with_item(
         selected: false,
         text: "Example 2",
-        href: "https://example.com"
+        href: "https://example.com",
+        ticked: true
       )
     end
   end
@@ -18,7 +19,9 @@
 
   it { should have_css("ul.app-secondary-navigation__list") }
   it { should have_css("li.app-secondary-navigation__list-item") }
-  it { should have_css("strong.app-secondary-navigation__current") }
+
+  it { should have_css("strong.app-secondary-navigation__current").once }
+  it { should have_css(".nhsuk-icon").once }
 
   it { should have_link("Example 1", href: "https://example.com") }
   it { should have_link("Example 2", href: "https://example.com") }