Merge pull request #4014 from nhsuk/fix-heading-levels

Review heading levels and sizes

Author: thomasleese

app/components/app_activity_log_component.rb

@@ -3,10 +3,10 @@
 class AppActivityLogComponent < ViewComponent::Base
   erb_template <<-ERB
     <% events_by_day.each do |day, events| %>
-      <h2 class="nhsuk-heading-xs nhsuk-u-secondary-text-color
+      <h3 class="nhsuk-heading-xs nhsuk-u-secondary-text-color
                  nhsuk-u-font-weight-normal">
         <%= day.to_fs(:long) %>
-      </h2>
+      </h3>
 
       <% events.each do |event| %>
         <%= render AppLogEventComponent.new(card: true, **event) %>

app/components/app_card_component.rb

@@ -5,15 +5,15 @@ class AppCardComponent < ViewComponent::Base
     <<%= top_level_tag %> class="<%= card_classes %>">
       <div class="<%= content_classes %>">
         <% if heading.present? %>
-          <h2 class="<%= heading_classes %>">
+          <h<%= @heading_level %> class="<%= heading_classes %>">
             <% if @link_to.present? %>
               <%= link_to @link_to, class: "nhsuk-card__link" do %>
                 <%= heading %>
               <% end %>
             <% else %>
               <%= heading %>
             <% end %>
-          </h2>
+          </h<%= @heading_level %>>
         <% end %>
 
         <% if description.present? %>
@@ -31,6 +31,7 @@ class AppCardComponent < ViewComponent::Base
   def initialize(
     colour: nil,
     link_to: nil,
+    heading_level: 3,
     secondary: false,
     data: false,
     compact: false,
@@ -41,6 +42,7 @@ def initialize(
 
     @link_to = link_to
     @colour = colour
+    @heading_level = heading_level
     @secondary = secondary
     @data = data
     @compact = compact
@@ -77,10 +79,10 @@ def content_classes
     ].compact.join(" ")
   end
 
-  def heading_size
+  def heading_modifier
     if @data
       "xs"
-    elsif @feature || @secondary || @compact
+    elsif @secondary || @compact
       "s"
     else
       "m"
@@ -90,7 +92,7 @@ def heading_size
   def heading_classes
     [
       "nhsuk-card__heading",
-      "nhsuk-heading-#{heading_size}",
+      "nhsuk-heading-#{heading_modifier}",
       ("nhsuk-card__heading--feature" if @feature)
     ].compact.join(" ")
   end

app/components/app_compare_consent_form_and_patient_component.rb

@@ -4,14 +4,14 @@ class AppCompareConsentFormAndPatientComponent < ViewComponent::Base
   erb_template <<-ERB
     <div class="nhsuk-grid-row nhsuk-card-group">
       <div class="nhsuk-grid-column-one-half nhsuk-card-group__item">
-        <%= render AppCardComponent.new(colour: "blue") do |card| %>
+        <%= render AppCardComponent.new(heading_level: 2, colour: "blue") do |card| %>
           <% card.with_heading { "Consent response" } %>
           <%= govuk_summary_list(rows: consent_form_rows) %>
         <% end %>
       </div>
 
       <div class="nhsuk-grid-column-one-half nhsuk-card-group__item">
-        <%= render AppCardComponent.new(colour: "blue") do |card| %>
+        <%= render AppCardComponent.new(heading_level: 2, colour: "blue") do |card| %>
           <% card.with_heading { "Child record" } %>
           <%= govuk_summary_list(rows: patient_rows) %>
         <% end %>

app/components/app_consent_card_component.rb

@@ -25,7 +25,8 @@ def link_to
     session_patient_programme_consent_path(session, patient, programme, consent)
   end
 
-  def card_options = { link_to:, colour: "offset", compact: true }
+  def card_options =
+    { link_to:, heading_level: 6, colour: "offset", compact: true }
 
   def heading
     if consent.via_self_consent?

app/components/app_consent_form_card_component.rb

@@ -8,7 +8,7 @@ def initialize(consent_form)
   end
 
   def call
-    render AppCardComponent.new do |card|
+    render AppCardComponent.new(heading_level: 2) do |card|
       card.with_heading { "Consent response" }
 
       govuk_summary_list do |summary_list|

app/components/app_gillick_assessment_component.html.erb

@@ -1,5 +1,5 @@
 <% if gillick_assessment || can_assess? %>
-  <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Gillick assessment</h3>
+  <h5 class="nhsuk-heading-s">Gillick assessment</h5>
 
   <% if gillick_assessment %>
     <% if gillick_assessment.gillick_competent? %>

app/components/app_health_answers_card_component.rb

@@ -9,7 +9,7 @@ def initialize(objects, heading: "Answers to health questions")
   end
 
   def call
-    render AppCardComponent.new do |card|
+    render AppCardComponent.new(heading_level: 2) do |card|
       card.with_heading { heading }
       render AppHealthAnswersSummaryComponent.new(objects)
     end

app/components/app_log_event_component.rb

@@ -7,9 +7,9 @@ class AppLogEventComponent < ViewComponent::Base
     <% end %>
 
     <% if title.present? %>
-      <h3 class="<% if card %>nhsuk-card__heading <% end %>nhsuk-heading-s">
+      <h4 class="<% if card %>nhsuk-card__heading <% end %>nhsuk-heading-s">
         <%= invalidated ? tag.s(title) : title %>
-      </h3>
+      </h4>
     <% end %>
 
     <% if body.present? %>

app/components/app_parent_card_component.rb

@@ -9,7 +9,7 @@ def initialize(parent_relationship:, change_links: {})
   end
 
   def call
-    render AppCardComponent.new do |card|
+    render AppCardComponent.new(heading_level: 2) do |card|
       card.with_heading { "Parent or guardian" }
       render AppParentSummaryComponent.new(parent_relationship:, change_links:)
     end

app/components/app_patient_card_component.rb

@@ -2,7 +2,7 @@
 
 class AppPatientCardComponent < ViewComponent::Base
   erb_template <<-ERB
-    <%= render AppCardComponent.new(section: true) do |card| %>
+    <%= render AppCardComponent.new(heading_level:, section: true) do |card| %>
       <% card.with_heading { "Child’s details" } %>
 
       <% if patient.date_of_death.present? %>
@@ -29,15 +29,16 @@ class AppPatientCardComponent < ViewComponent::Base
     <% end %>
   ERB
 
-  def initialize(patient, change_links: {}, remove_links: {})
+  def initialize(patient, change_links: {}, remove_links: {}, heading_level: 3)
     super
 
     @patient = patient
     @change_links = change_links
     @remove_links = remove_links
+    @heading_level = heading_level
   end
 
   private
 
-  attr_reader :patient, :change_links, :remove_links
+  attr_reader :patient, :change_links, :remove_links, :heading_level
 end