BREAKING: Remove title component

- Removes the title component, as we now use the heading component where titles are needed. - Also replaces gem-c-title references with gem-c-heading in the inverse_header and select component - Also replaces references to the title component in spec files so that tests pass
alphagov · Feb 26, 2025 · 3dfb20e · 3dfb20e
1 parent 0e38e56
commit 3dfb20e
Show file tree

Hide file tree

Showing 21 changed files with 58 additions and 277 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* **BREAKING:** Remove title component ([PR #4653](https://github.com/alphagov/govuk_publishing_components/pull/4653))
 * Fix bottom border colour issue in the super nav search button ([PR #4642](https://github.com/alphagov/govuk_publishing_components/pull/4642))
 * Use govuk-spacing instead of govuk-gutter ([PR #4650](https://github.com/alphagov/govuk_publishing_components/pull/4650))
 * Ensure 'search with autocomplete' component uses its own margin bottom ([PR #4637](https://github.com/alphagov/govuk_publishing_components/pull/4637))

diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
@@ -85,6 +85,5 @@
 @import "components/tabs";
 @import "components/table";
 @import "components/textarea";
-@import "components/title";
 @import "components/translation-nav";
 @import "components/warning-text";
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_title.scss b/app/assets/stylesheets/govuk_publishing_components/components/_title.scss
diff --git a/app/views/govuk_publishing_components/components/_select.html.erb b/app/views/govuk_publishing_components/components/_select.html.erb
@@ -16,8 +16,11 @@
 <% if select_helper.options.any? && id && label %>
   <%= content_tag :div, class: select_helper.css_classes do %>
     <% if is_page_heading %>
-      <% add_gem_component_stylesheet("title") %>
-      <%= tag.h1 label_tag(id, label, class: select_helper.label_classes), class: "gem-c-title__text" %>
+      <% add_gem_component_stylesheet("heading") %>
+      <%= render "govuk_publishing_components/components/heading", {
+        text: label_tag(id, label, class: select_helper.label_classes),
+        heading_level: 1
+      } %>
     <% else %>
       <%= label_tag(id, label, class: select_helper.label_classes) %>
     <% end %>

diff --git a/app/views/govuk_publishing_components/components/_title.html.erb b/app/views/govuk_publishing_components/components/_title.html.erb
diff --git a/app/views/govuk_publishing_components/components/docs/heading.yml b/app/views/govuk_publishing_components/components/docs/heading.yml
@@ -106,3 +106,7 @@ examples:
       inverse: true
     context:
       dark_background: true
+  with_nested_html:
+    description: HTML can be rendered within the heading as shown.
+    data:
+      text: <label>This is a label element</label>
diff --git a/app/views/govuk_publishing_components/components/docs/inverse_header.yml b/app/views/govuk_publishing_components/components/docs/inverse_header.yml
@@ -14,9 +14,11 @@ examples:
     data:
       block: |
         <!-- example content -->
-          <%= render "govuk_publishing_components/components/title", {
-            title: "Education, Training and Skills",
-            inverse: true
+          <%= render "govuk_publishing_components/components/heading", {
+            text: "Education, Training and Skills",
+            font_size: "xl",
+            inverse: true,
+            padding: true,
           } %>
           <!-- end of example content -->
   with_custom_padding:
@@ -38,9 +40,11 @@ examples:
         full_width: true
         block: |
           <!-- example content -->
-            <%= render "govuk_publishing_components/components/title", {
-              title: "Education, Training and Skills",
-              inverse: true
+            <%= render "govuk_publishing_components/components/heading", {
+              text: "Education, Training and Skills",
+              font_size: "xl",
+              inverse: true,
+              padding: true,
             } %>
             <!-- end of example content -->
   with_subtext:
@@ -59,10 +63,12 @@ examples:
     data:
       block: |
         <!-- example content -->
-          <%= render "govuk_publishing_components/components/title", {
-            title: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
+          <%= render "govuk_publishing_components/components/heading", {
+            text: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
             inverse: true,
             context: "Notice",
+            padding: true,
+            font_size: "xl"
           } %>
           <p class="publication-header__last-changed">Published 22 April 2016</p>
           <!-- end of example content -->

diff --git a/app/views/govuk_publishing_components/components/docs/title.yml b/app/views/govuk_publishing_components/components/docs/title.yml
diff --git a/spec/component_guide/audit_applications_spec.rb b/spec/component_guide/audit_applications_spec.rb
@@ -13,7 +13,7 @@
       components_found: [
         {
           location: "template",
-          components: ["accordion", "back link", "contextual breadcrumbs", "contextual footer", "contextual sidebar", "details", "error summary", "feedback", "govspeak", "input", "layout footer", "layout for admin", "layout for public", "layout header", "notice", "skip link", "tabs", "title"],
+          components: ["accordion", "back link", "contextual breadcrumbs", "contextual footer", "contextual sidebar", "details", "error summary", "feedback", "govspeak", "heading", "input", "layout footer", "layout for admin", "layout for public", "layout header", "notice", "skip link", "tabs"],
         },
         {
           location: "stylesheet",
@@ -47,6 +47,15 @@
         feedback: ["app/views/layouts/application.html.erb"],
         govspeak: ["app/views/welcome/contextual_navigation.html.erb", "lib/1_test_file_1.rb"],
         input: ["app/views/welcome/error_summary.html.erb", "app/views/welcome/error_summary.html.erb"],
+        heading:
+        [
+          "app/views/welcome/asset_helper.html.erb",
+          "app/views/welcome/asset_helper_with_app_component.html.erb",
+          "app/views/welcome/asset_helper_with_app_view.html.erb",
+          "app/views/welcome/contextual_navigation.html.erb",
+          "app/views/welcome/error_summary.html.erb",
+          "app/views/welcome/table.html.erb",
+        ],
         "layout footer": ["app/views/layouts/dummy_admin_layout.html.erb"],
         "layout for admin": ["app/views/layouts/dummy_admin_layout.html.erb"],
         "layout for public": ["app/views/layouts/dummy_public_layout.html.erb"],
@@ -60,15 +69,6 @@
             "app/views/welcome/asset_helper_with_app_view.html.erb",
           ],
         tabs: ["app/views/welcome/error_summary.html.erb", "app/views/welcome/tabs_example.html.erb"],
-        title:
-          [
-            "app/views/welcome/asset_helper.html.erb",
-            "app/views/welcome/asset_helper_with_app_component.html.erb",
-            "app/views/welcome/asset_helper_with_app_view.html.erb",
-            "app/views/welcome/contextual_navigation.html.erb",
-            "app/views/welcome/error_summary.html.erb",
-            "app/views/welcome/table.html.erb",
-          ],
       },
       helper_references: {
         BrandHelper: ["lib/test_file_3.rb"],

diff --git a/spec/component_guide/component_index_spec.rb b/spec/component_guide/component_index_spec.rb
@@ -58,6 +58,7 @@
 @import 'govuk_publishing_components/components/error-summary';
 @import 'govuk_publishing_components/components/feedback';
 @import 'govuk_publishing_components/components/govspeak';
+@import 'govuk_publishing_components/components/heading';
 @import 'govuk_publishing_components/components/hint';
 @import 'govuk_publishing_components/components/input';
 @import 'govuk_publishing_components/components/label';
@@ -77,8 +78,7 @@
 @import 'govuk_publishing_components/components/step-by-step-nav-header';
 @import 'govuk_publishing_components/components/step-by-step-nav-related';
 @import 'govuk_publishing_components/components/tabs';
-@import 'govuk_publishing_components/components/textarea';
-@import 'govuk_publishing_components/components/title';"
+@import 'govuk_publishing_components/components/textarea';"
 
     expect(page).to have_selector(".component-doc-h2", text: "Gem components used by this app (20)")
     expect(page).to have_selector(".govuk-details__summary-text", text: "Suggested imports for this application")

diff --git a/spec/components/inverse_header_spec.rb b/spec/components/inverse_header_spec.rb
@@ -1,11 +1,11 @@
 require "rails_helper"
 
 def block
-  "<div class=\"gem-c-title gem-c-title--inverse\">
-  <p class=\"gem-c-title__context\">
+  "<div class=\"gem-c-heading gem-c-heading-inverse\">
+  <p class=\"gem-c-heading__context\">
     Publication
   </p>
-  <h1 class=\"gem-c-title__text \">
+  <h1 class=\"gem-c-heading__text \">
     HTML publication page title
   </h1>
 </div>".html_safe
@@ -23,7 +23,7 @@ def component_name
   it "renders content within a wrapper when content is provided" do
     render_component({}) { block }
 
-    assert_select ".gem-c-inverse-header div.gem-c-title"
+    assert_select ".gem-c-inverse-header div.gem-c-heading"
     assert_select ".gem-c-inverse-header h1", text: "HTML publication page title"
   end
 

diff --git a/spec/components/select_spec.rb b/spec/components/select_spec.rb
@@ -255,6 +255,6 @@ def component_name
     )
 
     assert_select "select[name=colour]"
-    assert_select ".gem-c-select h1.gem-c-title__text label.govuk-label"
+    assert_select ".gem-c-select h1.gem-c-heading__text label.govuk-label"
   end
 end