Replace title with heading and context

- replacing instances of the title component that used margin_top: 0 with instances of the heading component
- however these titles had a context, so including a context above the heading as well, so no visual changes

app/views/find_local_council/_base_page.html.erb

@@ -6,8 +6,12 @@
 <main id="content" class="govuk-main-wrapper">
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <%= render "govuk_publishing_components/components/title", title: t('formats.local_transaction.find_council'),
-        margin_top: 0 %>
+      <%= render "govuk_publishing_components/components/heading", {
+        text: t('formats.local_transaction.find_council'),
+        font_size: "xl",
+        margin_bottom: 8,
+        heading_level: 1,
+      } %>
     </div>
     <div class="govuk-grid-column-two-thirds article-container">
       <%= yield %>

app/views/roadmap/index.html.erb

@@ -11,7 +11,12 @@
   <section class="govuk-!-padding-bottom-6 govuk-roadmap-section">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
-        <%= render "govuk_publishing_components/components/title", title: t('roadmap.hero.heading'), margin_top: 0 %>
+        <%= render "govuk_publishing_components/components/heading", {
+          text: t('roadmap.hero.heading'),
+          font_size: "xl",
+          margin_bottom: 8,
+          heading_level: 1,
+        } %>
         <p class="govuk-body govuk-roadmap__intro"><%= t('roadmap.hero.description') %></p>
       </div>
 

app/views/shared/_base_page.html.erb

@@ -3,10 +3,15 @@
 <main id="content" role="main" class="<%= main_class if local_assigns.include?(:main_class) %> govuk-main-wrapper" <%= @lang_attribute %>>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <%= render "govuk_publishing_components/components/title",
-        context: local_assigns[:context],
-        margin_top: 0,
-        title: title %>
+      <% if local_assigns[:context] %>
+        <span class="govuk-caption-xl"><%= local_assigns[:context] %></span>
+      <% end %>
+      <%= render "govuk_publishing_components/components/heading", {
+        text: title,
+        font_size: "xl",
+        margin_bottom: 8,
+        heading_level: 1,
+      } %>
     </div>
     <div class="article-container group govuk-grid-column-two-thirds">
       <div class="content-block">

app/views/simple_smart_answers/_outcome.html.erb

@@ -16,13 +16,14 @@
   data-module="ga4-auto-tracker"
   data-ga4-auto="<%= ga4_attributes %>"
 >
-  <%= render "govuk_publishing_components/components/title", {
-    context: content_item.title,
+  <% if content_item.title %>
+    <span class="govuk-caption-xl"><%= content_item.title %></span>
+  <% end %>
+  <%= render "govuk_publishing_components/components/heading", {
+    text: outcome.title,
     font_size: "l",
     margin_bottom: 4,
-    margin_top: 0,
-    average_title_length: "long",
-    title: outcome.title,
+    heading_level: 1,
   } %>
 
   <% if outcome.body %>

spec/system/licence_transaction_spec.rb

@@ -48,7 +48,7 @@
           expect(page).to have_title("Licence to kill - GOV.UK", exact: true)
         end
         within("#content") do
-          within(".gem-c-title") { expect(page).to have_title("Licence to kill") }
+          within("h1.gem-c-heading") { expect(page).to have_title("Licence to kill") }
           within(".postcode-search-form") do
             expect(page).to have_field("Enter a postcode")
             expect(page).to have_css("button", text: "Find")

spec/system/place_spec.rb

@@ -78,7 +78,7 @@
       end
 
       within("#content") do
-        within(".gem-c-title") do
+        within("h1.gem-c-heading") do
           expect(page).to have_title("Find a passport interview office")
         end
 

spec/system/transaction_spec.rb

@@ -43,7 +43,7 @@
       end
 
       within("#content") do
-        within(".gem-c-title") { expect(page).to have_title("Carrots") }
+        within("h1.gem-c-heading") { expect(page).to have_title("Carrots") }
         within(".article-container") do
           within("section.intro") do
             expect(page).to have_selector(".get-started-intro", text: "This is the introduction to carrots")
@@ -159,7 +159,7 @@
       expect(page.status_code).to eq(200)
       expect(page).to have_button_as_link("Start now", href: "http://cti-staging.voa.gov.uk/cti/inits.asp")
 
-      within(".gem-c-title") do
+      within("h1.gem-c-heading") do
         expect(page).to have_title("Check your Council Tax band (staging)")
       end