Merge pull request #3944 from alphagov/use-govuk-main-wrapper

Use govuk main wrapper in view templates
alphagov · Jan 10, 2025 · 67ef8c7 · 67ef8c7
2 parents c755aec + 4f50a4a
commit 67ef8c7
Show file tree

Hide file tree

Showing 30 changed files with 109 additions and 64 deletions.
diff --git a/app/views/embassies/index.html.erb b/app/views/embassies/index.html.erb
@@ -3,10 +3,15 @@
   <meta name="description" content="<%= t('embassies.meta_description') %>.">
 <% end %>
 
-<%= render "govuk_publishing_components/components/title", {
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
+
+<%= render "govuk_publishing_components/components/heading", {
   context: t('embassies.context'),
-  title: @presented_embassies.title,
-  } %>
+  text: @presented_embassies.title,
+  heading_level: 1,
+  margin_bottom: 8,
+  font_size: "xl",
+} %>
 
 <div class="govuk-main-wrapper">
   <div class="govuk-grid-row">

diff --git a/app/views/historic_appointments/index.html.erb b/app/views/historic_appointments/index.html.erb
@@ -1,15 +1,16 @@
 <% add_view_stylesheet("history_people") %>
 
-<% page_class "govuk-width-container" %>
-
 <% content_for :title, @index_page.title %>
 
-<% page_class "historic-appointments-index govuk-width-container" %>
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing historic-appointments-index" %>
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-three-quarters">
-    <%= render "govuk_publishing_components/components/title", {
+    <%= render "govuk_publishing_components/components/heading", {
       context: "History",
-      title: @index_page.title,
+      text: @index_page.title,
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "xl",
     } %>
   </div>
 </div>

diff --git a/app/views/historic_appointments/past_foreign_secretaries/_show_person.html.erb b/app/views/historic_appointments/past_foreign_secretaries/_show_person.html.erb
@@ -1,9 +1,15 @@
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render "govuk_publishing_components/components/title", {
+    <%= render "govuk_publishing_components/components/heading", {
       context: "Past Foreign Secretaries",
-      title: current_person,
+      text: current_person,
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "xl",
     } %>
+
     <%= render "govuk_publishing_components/components/lead_paragraph", {
       text: time_active,
     } %>

diff --git a/app/views/historic_appointments/past_foreign_secretaries/austen_chamberlain.html.erb b/app/views/historic_appointments/past_foreign_secretaries/austen_chamberlain.html.erb
@@ -1,7 +1,5 @@
 <% content_for :title, "History of Sir Austen Chamberlain" %>
 
-<% page_class "govuk-width-container" %>
-
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "Sir Austen Chamberlain",
   time_active: "Foreign Secretary June 1924 to June 1929",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/charles_fox.html.erb b/app/views/historic_appointments/past_foreign_secretaries/charles_fox.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title,  "History of Charles James Fox" %>
-<% page_class "govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "Charles James Fox",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/edward_grey.html.erb b/app/views/historic_appointments/past_foreign_secretaries/edward_grey.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title, "History of Sir Edward Grey" %>
-<% page_class "historic-people-show govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "Sir Edward Grey, Viscount Grey of Fallodon",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/edward_wood.html.erb b/app/views/historic_appointments/past_foreign_secretaries/edward_wood.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title, "History of Edward Frederick Lindley Wood" %>
-<% page_class "historic-people-show govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "Edward Frederick Lindley Wood, Viscount Halifax",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/george_curzon.html.erb b/app/views/historic_appointments/past_foreign_secretaries/george_curzon.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title, "History of George Nathaniel Curzon" %>
-<% page_class "govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "George Nathaniel Curzon",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/george_gordon.html.erb b/app/views/historic_appointments/past_foreign_secretaries/george_gordon.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title, "History of George Hamilton Gordon" %>
-<% page_class "historic-people-show govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "George Hamilton Gordon, Earl of Aberdeen",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/george_gower.html.erb b/app/views/historic_appointments/past_foreign_secretaries/george_gower.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title, "History of George Leveson Gower" %>
-<% page_class "govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "George Leveson Gower, Earl Granville",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/henry_petty_fitzmaurice.html.erb b/app/views/historic_appointments/past_foreign_secretaries/henry_petty_fitzmaurice.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title, "History of Henry Petty–Fitzmaurice" %>
-<% page_class "historic-people-show govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "Henry Petty-Fitzmaurice, Marquess of Lansdowne",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/robert_cecil.html.erb b/app/views/historic_appointments/past_foreign_secretaries/robert_cecil.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title, "History of Robert Cecil" %>
-<% page_class "historic-people-show govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "Robert Cecil, Marquess of Salisbury",

diff --git a/app/views/historic_appointments/past_foreign_secretaries/william_grenville.html.erb b/app/views/historic_appointments/past_foreign_secretaries/william_grenville.html.erb
@@ -1,5 +1,4 @@
 <% content_for :title, "History of William Wyndham Grenville" %>
-<% page_class "govuk-width-container" %>
 
 <%= render layout: "historic_appointments/past_foreign_secretaries/show_person", locals: {
   current_person: "William Wyndham Grenville, Lord Grenville",

diff --git a/app/views/ministers/index.html.erb b/app/views/ministers/index.html.erb
@@ -2,12 +2,15 @@
 
 <% content_for :title, t("ministers.govuk_title") %>
 
-<% page_class "ministers-index" %>
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing ministers-index" %>
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render "govuk_publishing_components/components/title", {
-      title: t("ministers.title"),
+    <%= render "govuk_publishing_components/components/heading", {
+      text: t("ministers.title"),
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "xl",
     } %>
 
     <% unless @presented_ministers.is_during_reshuffle? %>

diff --git a/app/views/organisations/_courts_header.html.erb b/app/views/organisations/_courts_header.html.erb
@@ -1,7 +1,12 @@
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds organisation__margin-bottom">
-    <%= render "govuk_publishing_components/components/title", {
-      title: @header.org.title
+    <%= render "govuk_publishing_components/components/heading", {
+      text: @header.org.title,
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "xl",
     } %>
 
     <div class="organisation__parent-organisations brand--<%= @organisation.brand %>">

diff --git a/app/views/organisations/index.html.erb b/app/views/organisations/index.html.erb
@@ -1,5 +1,7 @@
 <% add_view_stylesheet("organisations") %>
 
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
+
 <% content_for :title, t("organisations.index_title", title: @presented_organisations.title) %>
 
 <% content_for :meta_tags do %>
@@ -9,8 +11,11 @@
 <div data-module="list-filter">
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <%= render "govuk_publishing_components/components/title", {
-          title: @presented_organisations.title
+      <%= render "govuk_publishing_components/components/heading", {
+        text: @presented_organisations.title,
+        heading_level: 1,
+        margin_bottom: 8,
+        font_size: "xl",
       } %>
 
       <form class="filter-list__form" data-filter="form" role="search" aria-label="Departments, agencies and public bodies">

diff --git a/app/views/past_prime_ministers/show.html.erb b/app/views/past_prime_ministers/show.html.erb
@@ -1,11 +1,14 @@
 <% content_for :title, @past_prime_minister.page_title %>
-<% page_class "govuk-width-container" %>
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render "govuk_publishing_components/components/title", {
+    <%= render "govuk_publishing_components/components/heading", {
       context: I18n.t("past_prime_ministers.context"),
-      title: @past_prime_minister.title,
+      text: @past_prime_minister.title,
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "xl",
     } %>
 
     <%= render "govuk_publishing_components/components/lead_paragraph", {

diff --git a/app/views/people/_header.html.erb b/app/views/people/_header.html.erb
@@ -1,8 +1,13 @@
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
+
 <header class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render "govuk_publishing_components/components/title", {
+    <%= render "govuk_publishing_components/components/heading", {
       context: person.current_roles_title,
-      title: person.title
+      text: person.title,
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "xl",
     } %>
   </div>
 

diff --git a/app/views/roles/_header.html.erb b/app/views/roles/_header.html.erb
@@ -1,9 +1,14 @@
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
+
 <header class="govuk-grid-row <%= direction_rtl_class %>" <%= dir_attribute %> <%= lang_attribute %>>
   <div class="govuk-grid-column-two-thirds">
-    <%= render "govuk_publishing_components/components/title", {
+    <%= render "govuk_publishing_components/components/heading", {
       context: t("roles.ministerial"),
       context_locale: t_fallback("roles.ministerial"),
-      title: role.title
+      text: role.title,
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "xl",
     } %>
   </div>
 

diff --git a/app/views/step_nav/show.html.erb b/app/views/step_nav/show.html.erb
@@ -2,12 +2,18 @@
 <% content_for :meta_tags do %>
   <meta name="description" content="<%= step_by_step.description %>">
 <% end %>
+
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render 'govuk_publishing_components/components/title',
-        title: step_by_step.title,
-        average_title_length: 'long',
-        margin_bottom: 6 %>
+    <%= render "govuk_publishing_components/components/heading", {
+      text: step_by_step.title,
+      heading_level: 1,
+      margin_bottom: 6,
+      font_size: "l",
+    } %>
+
     <%= render "govuk_publishing_components/components/govspeak", {
     } do %>
       <%= step_by_step.introduction %>

diff --git a/app/views/topical_events/show.html.erb b/app/views/topical_events/show.html.erb
@@ -10,7 +10,7 @@
 <% add_view_stylesheet("topical_events") %>
 
 <% content_for :title, @topical_event.title %>
-<% page_class "topical-events-show" %>
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing topical-events-show" %>
 
 <% content_for :meta_tags do %>
   <%= tag("meta", name: "description", content: @topical_event.description) if @topical_event.description %>
@@ -19,10 +19,11 @@
   <% if @topical_event.slug == "her-majesty-queen-elizabeth-ii" %>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
-
-      <%= render "govuk_publishing_components/components/title", {
-        title: "Her Majesty Queen Elizabeth&nbsp;II".html_safe,
-
+      <%= render "govuk_publishing_components/components/heading", {
+        text: "Her Majesty Queen Elizabeth&nbsp;II".html_safe,
+        heading_level: 1,
+        margin_bottom: 8,
+        font_size: "xl",
       } %>
     </div>
   </div>
@@ -32,10 +33,12 @@
     <% end %>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-
-      <%= render "govuk_publishing_components/components/title", {
-        title: @topical_event.title,
-        context: (I18n.t("topical_events.archived") if @topical_event.archived?)
+      <%= render "govuk_publishing_components/components/heading", {
+        context: (I18n.t("topical_events.archived") if @topical_event.archived?),
+        text: @topical_event.title,
+        heading_level: 1,
+        margin_bottom: 8,
+        font_size: "xl",
       } %>
     </div>
   </div>

diff --git a/app/views/world/index.html.erb b/app/views/world/index.html.erb
@@ -1,12 +1,15 @@
 <% content_for :title, @presented_index.title %>
-<% page_class "world-locations" %>
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing world-locations" %>
 <% add_view_stylesheet("world_index") %>
 
 <div data-module="list-filter">
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <%= render "govuk_publishing_components/components/title", {
-        title: @presented_index.title
+      <%= render "govuk_publishing_components/components/heading", {
+        text: @presented_index.title,
+        heading_level: 1,
+        margin_bottom: 8,
+        font_size: "xl",
       } %>
 
       <p class="govuk-body"><%= t('world_locations.content.find_out') %></p>

diff --git a/app/views/world_location_news/show.html.erb b/app/views/world_location_news/show.html.erb
@@ -1,15 +1,19 @@
 <% content_for :title, @world_location_news.title %>
 
+<% page_class "govuk-main-wrapper govuk-main-wrapper--auto-spacing" %>
+
 <% content_for :meta_tags do %>
   <%= tag("meta", name: "description", content: @world_location_news.description) if @world_location_news.description %>
 <% end %>
 
 <div class="govuk-grid-row" <%= dir_attribute %> <%= lang_attribute %>>
   <div class="govuk-grid-column-two-thirds">
-    <%= render "govuk_publishing_components/components/title", {
-      title: @world_location_news.title,
-      margin_top: 0,
+    <%= render "govuk_publishing_components/components/heading", {
       context: I18n.t("world_location_news.types.#{@world_location_news.type}"),
+      text: @world_location_news.title,
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "xl",
     } %>
   </div>
 

diff --git a/app/views/world_wide_taxons/_page_header.html.erb b/app/views/world_wide_taxons/_page_header.html.erb
@@ -1,8 +1,10 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render "govuk_publishing_components/components/title", {
-      title: presented_taxon.title,
-      average_title_length: 'long'
+    <%= render "govuk_publishing_components/components/heading", {
+      text: presented_taxon.title,
+      heading_level: 1,
+      margin_bottom: 8,
+      font_size: "l",
     } %>
 
     <%= render 'govuk_publishing_components/components/lead_paragraph', text: presented_taxon.description %>

diff --git a/app/views/world_wide_taxons/accordion.html.erb b/app/views/world_wide_taxons/accordion.html.erb
@@ -1,4 +1,5 @@
-<% content_for :page_class, "world-taxon-page world-taxon-page--accordion" %>
+<% content_for :page_class, "govuk-main-wrapper govuk-main-wrapper--auto-spacing world-taxon-page world-taxon-page--accordion" %>
+
 <%=
   render(
     partial: 'common',

diff --git a/spec/features/content_store_organisations_spec.rb b/spec/features/content_store_organisations_spec.rb
@@ -15,7 +15,7 @@
   end
 
   scenario "renders page title" do
-    expect(page.has_css?(".gem-c-title__text", text: organisations_content_hash[:title])).to be(true)
+    expect(page.has_css?(".gem-c-heading__text", text: organisations_content_hash[:title])).to be(true)
   end
 
   scenario "has autodiscovery links to the API" do

diff --git a/spec/features/ministers_spec.rb b/spec/features/ministers_spec.rb
@@ -11,7 +11,7 @@
     end
 
     scenario "renders page title" do
-      expect(page).to have_selector(".gem-c-title__text", text: I18n.t("ministers.title"))
+      expect(page).to have_selector(".gem-c-heading__text", text: I18n.t("ministers.title"))
     end
 
     scenario "renders the lead paragraph with anchor links" do

diff --git a/spec/features/step_nav_page_spec.rb b/spec/features/step_nav_page_spec.rb
@@ -13,8 +13,7 @@
   end
 
   it "renders the title" do
-    expect(page).to have_selector(".gem-c-title")
-    expect(page).to have_selector(".gem-c-title__text", text: "Learn to drive a car: step by step")
+    expect(page).to have_selector(".gem-c-heading__text", text: "Learn to drive a car: step by step")
   end
 
   it "renders the step by step navigation component" do

diff --git a/spec/features/world_index_spec.rb b/spec/features/world_index_spec.rb
@@ -17,7 +17,7 @@
     end
 
     scenario "renders the page title" do
-      expect(page).to have_selector(".gem-c-title__text", text: "Help and services around the world")
+      expect(page).to have_selector(".gem-c-heading__text", text: "Help and services around the world")
     end
 
     scenario "renders a link to all foreign office posts" do