Merge pull request #3647 from alphagov/titles-to-headings

Change all title components to heading components
alphagov · Jan 31, 2025 · 3ab80c0 · 3ab80c0
2 parents 835c1e0 + 208b079
commit 3ab80c0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/app/views/development/index.html.erb b/app/views/development/index.html.erb
@@ -1,17 +1,24 @@
 <% content_for :title, "Finder Frontend" %>
 
-<div id="content">
-  <%= render "govuk_publishing_components/components/title", title: "Finder Frontend" %>
+<main class="finder-frontend-content govuk-main-wrapper">
+  <div id="content">
+    <%= render "govuk_publishing_components/components/heading", {
+      text: "Finder Frontend",
+      heading_level: 1,
+      font_size: "xl",
+      margin_bottom: 8,
+    } %>
 
-  <%= render "govuk_publishing_components/components/govspeak" do %>
-    <p>This page is only visible in development and Heroku.</p>
+    <%= render "govuk_publishing_components/components/govspeak" do %>
+      <p>This page is only visible in development and Heroku.</p>
 
-    <p>The following pages are rendered by this application:</p>
+      <p>The following pages are rendered by this application:</p>
 
-    <ul>
-    <% @rendered_pages.each do |page| %>
-      <li><%= link_to page.fetch("title"), page.fetch("link") %></li>
+      <ul>
+      <% @rendered_pages.each do |page| %>
+        <li><%= link_to page.fetch("title"), page.fetch("link") %></li>
+      <% end %>
+      </ul>
     <% end %>
-    </ul>
-  <% end %>
-</div>
+  </div>
+</main>
diff --git a/app/views/email_alert_subscriptions/new.html.erb b/app/views/email_alert_subscriptions/new.html.erb
@@ -26,8 +26,11 @@
       ga4_form: ga4_data,
     }) do %>
     <% if @signup_presenter.can_modify_choices? %>
-      <%= render partial: 'govuk_publishing_components/components/title', locals: {
-        title: @signup_presenter.name,
+      <%= render "govuk_publishing_components/components/heading", {
+        text: @signup_presenter.name,
+        heading_level: 1,
+        font_size: "xl",
+        margin_bottom: 8,
       } %>
 
       <% if @error_message.present? %>
@@ -69,8 +72,11 @@
 
     <% else %>
 
-      <%= render partial: 'govuk_publishing_components/components/title', locals: {
-        title: t("email_alert_subscriptions.new.title"),
+      <%= render "govuk_publishing_components/components/heading", {
+        text: t("email_alert_subscriptions.new.title"),
+        heading_level: 1,
+        font_size: "xl",
+        margin_bottom: 8,
       } %>
 
       <p class="govuk-body">

diff --git a/app/views/finders/_show_header.html.erb b/app/views/finders/_show_header.html.erb
@@ -25,15 +25,21 @@
         </div>
       <% elsif topic_finder?(filter_params) %>
         <%= link_to topic_finder_parent(filter_params)['title'], topic_finder_parent(filter_params)['base_path'], class: 'govuk-link topic-finder__taxon-link' %>
-        <%= render partial: 'govuk_publishing_components/components/title', locals: {
-          title: content_item.title,
+        <%= render "govuk_publishing_components/components/heading", {
+          text: content_item.title,
           inverse: inverse,
+          heading_level: 1,
+          font_size: "xl",
+          margin_bottom: 8,
         } %>
       <% else %>
-        <%= render partial: 'govuk_publishing_components/components/title', locals: {
-          title: content_item.title,
+        <%= render "govuk_publishing_components/components/heading", {
+          text: content_item.title,
           context: title_context,
           inverse: inverse,
+          heading_level: 1,
+          font_size: "xl",
+          margin_bottom: 8,
         } %>
       <% end %>
 

diff --git a/app/views/layouts/finder_layout.html.erb b/app/views/layouts/finder_layout.html.erb
@@ -2,7 +2,7 @@
 
   <%= yield :before_content %>
   <%= render "govuk_web_banners/recruitment_banner" %>
-  <main id="content" class="finder-frontend-content">
+  <main id="content" class="finder-frontend-content govuk-main-wrapper">
     <div class="finder-frontend">
       <%= yield %>
     </div>