Fix headings and captions on case log questions

app/views/form/_checkbox_question.html.erb

@@ -1,5 +1,6 @@
 <%= f.govuk_check_boxes_fieldset question.id.to_sym,
-    legend: { text: question.header.html_safe, size: page_header.nil? ? "l" : "m", tag: page_header.nil? ? "h2" : "h1" },
+    caption: caption && !page_header.present? ? { text: caption.html_safe, size: "l" } : nil,
+    legend: { text: question.header.html_safe, size: !page_header.present? ? "l" : "m", tag: !page_header.present? ? "h1" : "h2" },
     hint: { text: question.hint_text } do %>
 
     <% question.answer_options.map do |key, val| %>

app/views/form/_date_question.html.erb

@@ -1,6 +1,7 @@
 <%= f.govuk_date_field question.id.to_sym,
+    caption: caption && !page_header.present? ? { text: caption.html_safe, size: "l" } : nil,
+    legend: { text: question.header.html_safe, size: !page_header.present? ? "l" : "m", tag: !page_header.present? ? "h1" : "h2" },
     hint: { text: question.hint_text },
-    legend: { text: question.header.html_safe, size: page_header.nil? ? "l" : "m", tag: page_header.nil? ? "h2" : "h1" },
     width: 20,
     **stimulus_html_attributes(question)
 %>

app/views/form/_numeric_question.html.erb

@@ -1,7 +1,8 @@
 <%= f.govuk_number_field question.id.to_sym,
+    caption: caption && !page_header.present? ? { text: caption.html_safe, size: "l" } : nil,
+    label: { text: question.header.html_safe, size: !page_header.present? ? "l" : "m", tag: !page_header.present? ? "h1" : "h2" },
     hint: { text: question.hint_text },
-    label: { text: question.header.html_safe, size: page_header.nil? ? "l" : "m", tag: page_header.nil? ? "h2" : "h1" },
     min: question.min, max: question.max, step: question.step,
-    width: 20, :readonly => question.read_only?,
+    width: question.width, :readonly => question.read_only?,
    **stimulus_html_attributes(question)
 %>

app/views/form/_radio_question.html.erb

@@ -1,7 +1,7 @@
 <%= f.govuk_radio_buttons_fieldset question.id.to_sym,
-    legend: { text: question.header.html_safe, size: page_header.nil? ? "l" : "m", tag: page_header.nil? ? "h2" : "h1" },
-    hint: { text: question.hint_text },
-    small: (question.answer_options.size > 5) do %>
+    caption: caption && !page_header.present? ? { text: caption.html_safe, size: "l" } : nil,
+    legend: { text: question.header.html_safe, size: !page_header.present? ? "l" : "m", tag: !page_header.present? ? "h1" : "h2" },
+    hint: { text: question.hint_text } do %>
 
     <% question.answer_options.map do |key, val| %>
       <% if key.starts_with?("divider") %>

app/views/form/_select_question.html.erb

@@ -3,6 +3,7 @@
     answers,
     :name,
     :name,
-    label: { text: question.header, size: page_header.nil? ? "l" : "m", tag: page_header.nil? ? "h2" : "h1" },
+    caption: caption && !page_header.present? ? { text: caption.html_safe, size: "l" } : nil,
+    label: { text: question.header, size: !page_header.present? ? "l" : "m", tag: !page_header.present? ? "h1" : "h2" },
     hint: { text: question.hint_text }
  %>

app/views/form/_text_question.html.erb

@@ -1,6 +1,7 @@
 <%= f.govuk_text_field question.id.to_sym,
+    caption: caption && !page_header.present? ? { text: caption.html_safe, size: "l" } : nil,
+    label: { text: question.header.html_safe, size: !page_header.present? ? "l" : "m", tag: !page_header.present? ? "h1" : "h2" },
     hint: { text: question.hint_text },
-    label: { text: question.header.html_safe, size: page_header.nil? ? "l" : "m", tag: page_header.nil? ? "h2" : "h1" },
-    width: 20,
+    width: question.width ? question.width : nil,
     **stimulus_html_attributes(question)
 %>

app/views/form/check_answers.html.erb

@@ -1,7 +1,10 @@
 <%= turbo_frame_tag "case_log_form", target: "_top" do %>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters-from-desktop">
-      <h1 class="govuk-heading-l">Check the answers you gave for <%= subsection.id.humanize(capitalize: false) %></h1>
+      <h1 class="govuk-heading-l">
+        <span class="govuk-caption-l"><%= subsection.id.humanize %></span>
+        Check your answers
+      </h1>
       <%= display_answered_questions_summary(subsection, @case_log) %>
       <dl class="govuk-summary-list govuk-!-margin-bottom-9">
         <% subsection.applicable_questions(@case_log).each do |question| %>

app/views/form/page.html.erb

@@ -8,11 +8,9 @@
 <%= turbo_frame_tag "case_log_form", target: "_top" do %>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds-from-desktop">
-      <span class="govuk-caption-l">
-        <%= subsection %>
-      </span>
       <% if page.header.present? %>
         <h1 class="govuk-heading-l">
+          <span class="govuk-caption-l"><%= subsection %></span>
           <%= page.header %>
         </h1>
       <% end %>
@@ -20,7 +18,7 @@
         <%= f.govuk_error_summary %>
         <% page.questions.map do |question| %>
           <div id=<%= question.id + "_div " %><%= display_question_key_div(page, question) %> >
-            <%= render partial: "form/#{question.type}_question", locals: { question: question, page_header: page.header, f: f } %>
+            <%= render partial: "form/#{question.type}_question", locals: { question: question, caption: subsection, page_header: page.header, f: f } %>
           </div>
         <% end %>
 

spec/features/form/check_answers_page_spec.rb

@@ -31,7 +31,7 @@ RSpec.describe "Form Check Answers Page" do
   context "when the user needs to check their answers for a subsection" do
     it "can be visited by URL" do
       visit("case-logs/#{id}/#{subsection}/check-answers")
-      expect(page).to have_content("Check the answers you gave for #{subsection.tr('-', ' ')}")
+      expect(page).to have_content("#{subsection.tr('-', ' ').humanize} Check your answers")
     end
 
     let(:last_question_for_subsection) { "household-number-of-other-members" }