2412 heading sizes in government frontend

app/assets/stylesheets/views/_manual.scss

@@ -142,3 +142,7 @@
     padding-right: govuk-spacing(3);
   }
 }
+
+.test-accordion-heading-s .govuk-accordion__section-heading-text {
+  font-size: 16px;
+}

app/views/content_items/hmrc_manual_updates.html.erb

@@ -9,4 +9,4 @@
   } %>
 <% end %>
 
-<%= render "content_items/manuals/manual_updates_layout" %>
+<%= render "content_items/manuals/manual_updates_layout", type: I18n.t("manuals.hmrc_manual_type") %>

app/views/content_items/manual_section.html.erb

@@ -1,7 +1,9 @@
 <% add_view_stylesheet("manual") %>
 <% content_for :header do %>
   <%= render "content_items/manuals/header", {
-    content_item: @content_item, heading_level: 1, margin_bottom: 6,
+    content_item: @content_item,
+    heading_level: 2,
+    margin_bottom: 6
   } %>
   <%= render partial: "content_items/manuals/breadcrumbs" %>
 <% end %>
@@ -20,7 +22,6 @@
           <div class="govuk-!-margin-bottom-3">
             <%= render "govuk_publishing_components/components/heading", {
               text: item[:heading][:text],
-              font_size: "m",
               margin_bottom: 1,
               id: item[:heading][:id],
             } %>

app/views/content_items/manual_updates.html.erb

@@ -1,7 +1,7 @@
 <% add_view_stylesheet("manual") %>
 <% content_for :header do %>
   <%= render "content_items/manuals/header", {
-    content_item: @content_item, heading_level: 2, margin_bottom: 6,
+    content_item: @content_item, heading_level: 2, margin_bottom: 6
   } %>
 <% end %>
 

app/views/content_items/manuals/_header.html.erb

@@ -15,7 +15,6 @@
 
     <%= render "govuk_publishing_components/components/heading", {
       text: content_item.title,
-      font_size: "l",
       inverse: true,
       id: "manual-title",
       heading_level: heading_level,

app/views/content_items/manuals/_manual_section_layout.html.erb

@@ -13,7 +13,7 @@
         <article aria-labelledby="section-title">
           <div class="govuk-grid-column-full">
             <%= render "govuk_publishing_components/components/heading", {
-              text: @content_item.document_heading.join(" - "),
+              text: "#{@content_item.title} - #{@content_item.document_heading.join(" - ")}",
               font_size: "l",
               id: "section-title",
               heading_level: 1,

app/views/content_items/manuals/_manual_updates_layout.html.erb

@@ -1,9 +1,13 @@
+<%
+  type ||= nil
+%>
+
 <% content_for :main do %>
   <%= render "govuk_publishing_components/components/back_link", {
     text: t("manuals.breadcrumb_contents"),
     href: @content_item.base_path
   } %>
   <div id="manuals-frontend" class="manuals-frontend-body">
-    <%= render "content_items/manuals/updates", content_item: @content_item %>
+    <%= render "content_items/manuals/updates", content_item: @content_item, manual_type: type %>
   </div>
 <% end %>

app/views/content_items/manuals/_updates.html.erb

@@ -1,3 +1,13 @@
+<%
+  manual_type ||= nil
+
+  if manual_type
+    text = "#{t("manuals.updates_title", title: content_item.title)} - #{manual_type}"
+  else
+    text = t("manuals.updates_title", title: content_item.title)
+  end
+%>
+
 <div class="govuk-grid-row">
   <div class="manual-body">
     <article aria-labelledby="section-title">
@@ -7,56 +17,59 @@
           heading_level: 1,
           id: "section-title",
           margin_bottom: 4,
-          text: t("manuals.updates_title", title: content_item.title),
+          text: text
         } %>
       </div>
 
       <% content_item.presented_change_notes.each do |year, updates_by_year| %>
         <div class="govuk-grid-column-two-thirds">
           <%= render "govuk_publishing_components/components/heading", {
-            text: year,
-            font_size: "l"
+            text: year
           } %>
 
-          <%= render "govuk_publishing_components/components/accordion", {
-            heading_level: 3,
-            items: updates_by_year.each.with_index(1).map do |updated_documents, index|
-              accordion_content = capture do %>
-                <% change_notes = updated_documents.last %>
-                <div class="govuk-!-margin-top-3">
-                  <% change_notes.each do |change_note_entry| %>
-                    <% change_note_items = change_note_entry.last.collect { |i| i["change_note"] } %>
-                    <% change_note = change_note_entry.flatten.last %>
-                    <% if change_note["title"].present? %>
-                      <p class="govuk-body">
-                        <%= link_to change_note["title"], change_note["base_path"], class: "govuk-link" %>
-                      </p>
-                    <% end %>
-                    <% change_note_items.each do |change_note_item| %>
-                      <%= simple_format(change_note_item, class: "govuk-body") %>
+          <div class="test-accordion-heading-s">
+            <%= render "govuk_publishing_components/components/accordion", {
+              heading_level: 3,
+              items: updates_by_year.each.with_index(1).map do |updated_documents, index|
+                accordion_content = capture do %>
+                  <% change_notes = updated_documents.last %>
+                  <div class="govuk-!-margin-top-3">
+                    <% change_notes.each do |change_note_entry| %>
+                      <% change_note_items = change_note_entry.last.collect { |i| i["change_note"] } %>
+                      <% change_note = change_note_entry.flatten.last %>
+                      <% if change_note["title"].present? %>
+                        <p class="govuk-body">
+                          <%= link_to change_note["title"], change_note["base_path"], class: "govuk-link" %>
+                        </p>
+                      <% end %>
+                      <% change_note_items.each do |change_note_item| %>
+                        <%= simple_format(change_note_item, class: "govuk-body") %>
+                      <% end %>
                     <% end %>
-                  <% end %>
-                </div>
-              <% end
-              {
-                data_attributes: {
-                  ga4_event: {
-                    event_name: 'select_content',
-                    type: 'accordion',
-                    text: sanitize_manual_update_title(updated_documents.first),
-                    index: index,
-                    index_total: updates_by_year.length,
+                  </div>
+                <% end
+                {
+                  data_attributes: {
+                    ga4_event: {
+                      event_name: 'select_content',
+                      type: 'accordion',
+                      text: sanitize_manual_update_title(updated_documents.first),
+                      index: index,
+                      index_total: updates_by_year.length,
+                    }
+                  },
+                  heading: {
+                    text: updated_documents.first,
+                  },
+                  content: {
+                    html: accordion_content
                   }
-                },
-                heading: {
-                  text: updated_documents.first,
-                },
-                content: {
-                  html: accordion_content
                 }
-              }
-            end
-          } %>
+              end
+            } %>
+          </div>
+
+
         </div>
       <% end %>
     </article>

config/locales/en.yml

@@ -483,7 +483,7 @@ en:
     updates_amendments: published amendments
     updates_description: List of updates to '%{title}'.
     updates_page_title: Updates - %{title}
-    updates_title: 'Updates: %{title}'
+    updates_title: 'Updates - %{title}'
   multi_page:
     next_page: Next
     previous_page: Previous

test/integration/manual_section_test.rb

@@ -50,7 +50,7 @@ class ManualSectionTest < ActionDispatch::IntegrationTest
   test "renders document heading" do
     setup_and_visit_manual_section
 
-    within "#manual-title.govuk-heading-l" do
+    within "#manual-title" do
       assert page.has_text?(@manual["title"])
     end
   end