From 3dfb20e1f9e6df0604c6f19c58ab82448c555859 Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Tue, 25 Feb 2025 14:55:22 +0000
Subject: [PATCH] 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
---
 CHANGELOG.md                                  |  1 +
 .../_all_components.scss                      |  1 -
 .../components/_title.scss                    | 56 -------------
 .../components/_select.html.erb               |  7 +-
 .../components/_title.html.erb                | 38 ---------
 .../components/docs/heading.yml               |  4 +
 .../components/docs/inverse_header.yml        | 22 ++++--
 .../components/docs/title.yml                 | 64 ---------------
 .../audit_applications_spec.rb                | 20 ++---
 spec/component_guide/component_index_spec.rb  |  4 +-
 spec/components/inverse_header_spec.rb        |  8 +-
 spec/components/select_spec.rb                |  2 +-
 spec/components/title_spec.rb                 | 78 -------------------
 .../app/views/welcome/asset_helper.html.erb   |  5 +-
 .../asset_helper_with_app_component.html.erb  |  5 +-
 .../asset_helper_with_app_view.html.erb       |  5 +-
 .../welcome/contextual_navigation.html.erb    |  2 +-
 .../app/views/welcome/error_summary.html.erb  |  5 +-
 spec/dummy/app/views/welcome/table.html.erb   |  2 +-
 spec/features/asset_helper_spec.rb            |  4 +-
 .../app_helpers/asset_helper_spec.rb          |  2 +-
 21 files changed, 58 insertions(+), 277 deletions(-)
 delete mode 100644 app/assets/stylesheets/govuk_publishing_components/components/_title.scss
 delete mode 100644 app/views/govuk_publishing_components/components/_title.html.erb
 delete mode 100644 app/views/govuk_publishing_components/components/docs/title.yml
 delete mode 100644 spec/components/title_spec.rb

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a7d39b8a4..292f7d5126 100644
--- 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
index 30c337b433..1d7979caab 100644
--- 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
deleted file mode 100644
index f37877bef9..0000000000
--- a/app/assets/stylesheets/govuk_publishing_components/components/_title.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@import "govuk_publishing_components/individual_component_support";
-
-.gem-c-title {
-  @include govuk-media-query($from: tablet) {
-    padding-top: govuk-spacing(8);
-  }
-}
-
-.gem-c-title--inverse {
-  color: govuk-colour("white");
-
-  .gem-c-title__text,
-  .gem-c-title__context {
-    color: inherit;
-  }
-}
-
-.gem-c-title__context-link {
-  text-decoration: none;
-
-  &:link,
-  &:visited {
-    color: inherit;
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:focus {
-    text-decoration: none;
-    color: $govuk-focus-text-colour;
-  }
-}
-
-.gem-c-title__text {
-  margin: 0;
-}
-
-@include govuk-media-query($media-type: print) {
-  .gem-c-title {
-    margin: 5mm 0 10mm !important; // stylelint-disable-line declaration-no-important
-  }
-
-  .gem-c-title__context {
-    margin: 0;
-  }
-
-  .gem-c-title__text {
-    margin-top: 0;
-  }
-
-  .gem-c-title--inverse {
-    color: $govuk-print-text-colour;
-  }
-}
diff --git a/app/views/govuk_publishing_components/components/_select.html.erb b/app/views/govuk_publishing_components/components/_select.html.erb
index 41faacb7cf..4fb11f01fd 100644
--- 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
deleted file mode 100644
index 5dd4cba454..0000000000
--- a/app/views/govuk_publishing_components/components/_title.html.erb
+++ /dev/null
@@ -1,38 +0,0 @@
-<%
-  add_gem_component_stylesheet("title")
-
-  average_title_length ||= false
-
-  context ||= false
-  context_locale ||= false
-  context_inside ||= false
-
-  inverse ||= false
-  local_assigns[:margin_bottom] ||= 8
-  margin_bottom = [*0..9].include?(local_assigns[:margin_bottom]) ? "govuk-!-margin-bottom-#{local_assigns[:margin_bottom]}" : "govuk-!-margin-bottom-3"
-
-  classes = %w[gem-c-title]
-  classes << "gem-c-title--inverse" if inverse
-  classes << margin_bottom
-
-  heading_classes = %w[gem-c-title__text]
-  heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
-%>
-<% @context_block = capture do %>
-  <span class="govuk-caption-xl gem-c-title__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
-    <%= context %>
-  </span>
-<% end %>
-
-<%= content_tag(:div, class: classes) do %>
-  <% if context && !context_inside %>
-    <%= @context_block %>
-  <% end %>
-
-  <h1 class="<%= heading_classes.join(" ") %>">
-    <% if context && context_inside %>
-      <%= @context_block %>
-    <% end %>
-    <%= title %>
-  </h1>
-<% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/heading.yml b/app/views/govuk_publishing_components/components/docs/heading.yml
index baad675ffd..c5827c1634 100644
--- 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
index cff99c4f3a..10846c0cac 100644
--- 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
deleted file mode 100644
index 750f383d19..0000000000
--- a/app/views/govuk_publishing_components/components/docs/title.yml
+++ /dev/null
@@ -1,64 +0,0 @@
-name: Page title
-description: A page title with optional context label
-body: |
-  This contains an optional parameter for average title length. The two valid
-  values for this parameter are 'medium' or 'long'. Medium titles are titles
-  where the average is around 30 characters or less. Long titles would have
-  an average length of nearer 50 characters or more.
-
-  On average the titles on government bits of content are 50 characters. The
-  average for bits of general guidance are nearer 27 characters long.
-accessibility_criteria: |
-  The page title must:
-
-  - be part of a correct heading structure for a page
-  - be semantically represented as a heading
-  - convey the heading level
-shared_accessibility_criteria:
-  - link
-examples:
-  default:
-    data:
-      title: My page title
-  with_context:
-    data:
-      context: Publication
-      title: My page title
-  with_context_inside:
-    description: |
-      If the context should be considered part of the page heading, you can nest the context within the <code><h1></code>.
-    data:
-      context: Publication
-      title: My page title
-      context_inside: true
-  with_context_language_labelled:
-    description: |
-      Sometimes this component appears on a page that has been translated. The title will naturally be supplied in the required language but the context string may fall back to the default. In these instances we need to label the language so the page remains semantic and screenreaders can handle the switch.
-
-      The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
-    data:
-      context: Publication
-      context_locale: en
-      title: My page title
-  long_title_with_context:
-    data:
-      context: Publication
-      title: My page title which is often really long and verbose and has lots of extra words it doesn't need
-      average_title_length: long
-  with_margin_bottom:
-    description: |
-      The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 50px.
-
-      This margin is responsive at certain sizes, see the link above for more detail. Note also that the component has a (responsive) top margin set as well, which cannot be modified.
-    data:
-      title: 'Margin bottom of 10px'
-      margin_bottom: 2
-  in_html_publication:
-    description: Page titles are used in HTML Publications ([see example](https://www.gov.uk/government/publications/fees-for-civil-and-family-courts/court-fees-for-the-high-court-county-court-and-family-court))
-    data:
-      context: Publication
-      title: HTML publication page title
-      inverse: true
-      margin_bottom: 0
-    context:
-      dark_background: true
diff --git a/spec/component_guide/audit_applications_spec.rb b/spec/component_guide/audit_applications_spec.rb
index be180ab6ac..019f43fe28 100644
--- 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
index cab419a89a..123d696865 100644
--- 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
index fcfbfb5464..c15543c7cd 100644
--- 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
index 292c7cf5d1..1b2491a757 100644
--- 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
diff --git a/spec/components/title_spec.rb b/spec/components/title_spec.rb
deleted file mode 100644
index b4cec796f2..0000000000
--- a/spec/components/title_spec.rb
+++ /dev/null
@@ -1,78 +0,0 @@
-require "rails_helper"
-
-describe "Title", type: :view do
-  def component_name
-    "title"
-  end
-
-  it "error if no title" do
-    assert_raises do
-      render_component({})
-    end
-  end
-
-  it "title text appears" do
-    render_component(title: "Hello World")
-    assert_select ".gem-c-title__text", text: "Hello World"
-  end
-
-  it "title context appears" do
-    render_component(title: "Hello World", context: "Format")
-    assert_select ".gem-c-title > .gem-c-title__context", text: "Format"
-  end
-
-  it "renders no title context inside" do
-    render_component(title: "Hello World", context: "Format")
-    assert_select ".gem-c-title__text > .gem-c-title__context", false
-  end
-
-  it "title context appears inside" do
-    render_component(title: "Hello World", context: "Format", context_inside: true)
-    assert_select ".gem-c-title__text > .gem-c-title__context", text: "Format"
-  end
-
-  it "renders no title context adjacent to title" do
-    render_component(title: "Hello World", context: "Format", context_inside: true)
-    assert_select ".gem-c-title > .gem-c-title__context", false
-  end
-
-  it "applies context language if supplied to a context string" do
-    render_component(title: "Bonjour Monde", context: "hello", context_locale: "en")
-    assert_select ".govuk-caption-xl[lang='en']"
-  end
-
-  it "applies title length if supplied" do
-    render_component(title: "Hello World", average_title_length: "long")
-    assert_select ".gem-c-title .govuk-heading-l", text: "Hello World"
-  end
-
-  it "applies the inverse flag if supplied" do
-    render_component(title: "Hello World", inverse: true)
-    assert_select ".gem-c-title--inverse", text: "Hello World"
-  end
-
-  it "has a default margin bottom of 8" do
-    render_component(title: "Margin default")
-    assert_select '.gem-c-title.govuk-\!-margin-bottom-8'
-  end
-
-  it "applies a margin bottom of 0" do
-    render_component(title: "Margin 0", margin_bottom: 0)
-    assert_select '.gem-c-title.govuk-\!-margin-bottom-0'
-  end
-
-  it "applies a valid margin bottom" do
-    render_component(title: "Margin 4", margin_bottom: 4)
-    assert_select '.gem-c-title.govuk-\!-margin-bottom-4'
-  end
-
-  it "sets margin bottom to 3 if an invalid number is passed" do
-    render_component(title: "Margin wat", margin_bottom: 17)
-    assert_select '.gem-c-title.govuk-\!-margin-bottom-3'
-  end
-
-  it "applies context language if supplied to a context link" do
-    render_component(title: "Bonjour", context: "Format", context_locale: "en")
-    assert_select ".govuk-caption-xl[lang='en']"
-  end
-end
diff --git a/spec/dummy/app/views/welcome/asset_helper.html.erb b/spec/dummy/app/views/welcome/asset_helper.html.erb
index ef8aa00055..47bad9ed0d 100644
--- a/spec/dummy/app/views/welcome/asset_helper.html.erb
+++ b/spec/dummy/app/views/welcome/asset_helper.html.erb
@@ -1,5 +1,6 @@
-<%= render "govuk_publishing_components/components/title", {
-  title: "Asset helper"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Asset helper",
+  heading_level: 1
 } %>
 
 <%= render "govuk_publishing_components/components/notice", {
diff --git a/spec/dummy/app/views/welcome/asset_helper_with_app_component.html.erb b/spec/dummy/app/views/welcome/asset_helper_with_app_component.html.erb
index a583b78885..0a89aadc18 100644
--- a/spec/dummy/app/views/welcome/asset_helper_with_app_component.html.erb
+++ b/spec/dummy/app/views/welcome/asset_helper_with_app_component.html.erb
@@ -1,5 +1,6 @@
-<%= render "govuk_publishing_components/components/title", {
-  title: "Asset helper"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Asset helper",
+  heading_level: 1
 } %>
 
 <%= render "govuk_publishing_components/components/notice", {
diff --git a/spec/dummy/app/views/welcome/asset_helper_with_app_view.html.erb b/spec/dummy/app/views/welcome/asset_helper_with_app_view.html.erb
index 0d676a80f3..e3634b842d 100644
--- a/spec/dummy/app/views/welcome/asset_helper_with_app_view.html.erb
+++ b/spec/dummy/app/views/welcome/asset_helper_with_app_view.html.erb
@@ -1,5 +1,6 @@
-<%= render "govuk_publishing_components/components/title", {
-  title: "Asset helper"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Asset helper",
+  heading_level: 1
 } %>
 
 <%= render "govuk_publishing_components/components/notice", {
diff --git a/spec/dummy/app/views/welcome/contextual_navigation.html.erb b/spec/dummy/app/views/welcome/contextual_navigation.html.erb
index 2c2c58616d..3fe243d56c 100644
--- a/spec/dummy/app/views/welcome/contextual_navigation.html.erb
+++ b/spec/dummy/app/views/welcome/contextual_navigation.html.erb
@@ -4,7 +4,7 @@
 
 <div class="grid-row">
   <div class="column-two-thirds">
-    <%= render 'govuk_publishing_components/components/title', title: @content_item ? "Contextual navigation for '#{@content_item["title"]}'" : 'Contextual navigation reference' %>
+    <%= render 'govuk_publishing_components/components/heading', text: @content_item ? "Contextual navigation for '#{@content_item["title"]}'" : 'Contextual navigation reference' %>
   </div>
 </div>
 
diff --git a/spec/dummy/app/views/welcome/error_summary.html.erb b/spec/dummy/app/views/welcome/error_summary.html.erb
index 668bd28014..56ec60deaa 100644
--- a/spec/dummy/app/views/welcome/error_summary.html.erb
+++ b/spec/dummy/app/views/welcome/error_summary.html.erb
@@ -13,8 +13,9 @@
   ]
 } %>
 
-<%= render "govuk_publishing_components/components/title", {
-  title: "My page title"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "My page title",
+  heading_level: 1
 } %>
 
 <%= render "govuk_publishing_components/components/input", {
diff --git a/spec/dummy/app/views/welcome/table.html.erb b/spec/dummy/app/views/welcome/table.html.erb
index a5a4a44437..438e030547 100644
--- a/spec/dummy/app/views/welcome/table.html.erb
+++ b/spec/dummy/app/views/welcome/table.html.erb
@@ -1,4 +1,4 @@
-<%= render 'govuk_publishing_components/components/title', title: "Table helper" %>
+<%= render 'govuk_publishing_components/components/heading', text: "Table helper", heading_level: 1 %>
 
 <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, "Income tax rates") do |t| %>
 
diff --git a/spec/features/asset_helper_spec.rb b/spec/features/asset_helper_spec.rb
index 196f4c8b5f..5249429a2f 100644
--- a/spec/features/asset_helper_spec.rb
+++ b/spec/features/asset_helper_spec.rb
@@ -12,7 +12,7 @@
       expect(page).to have_selector('link[href^="/assets/application-"][rel="stylesheet"]', visible: false)
       expect(page).to have_selector('link[href^="/assets/govuk_publishing_components/components/_notice-"][rel="stylesheet"]', visible: false)
       expect(page).to have_selector('link[href^="/assets/govuk_publishing_components/components/_details-"][rel="stylesheet"]', visible: false)
-      expect(page).not_to have_selector('link[href^="/assets/govuk_publishing_components/components/_title-"][rel="stylesheet"]', visible: false)
+      expect(page).not_to have_selector('link[href^="/assets/govuk_publishing_components/components/_heading-"][rel="stylesheet"]', visible: false)
     end
   end
 
@@ -53,7 +53,7 @@
       expect(page).to have_selector('link[href^="/assets/application-"][rel="stylesheet"]', visible: false)
       expect(page).to have_selector('link[href^="/assets/govuk_publishing_components/components/_notice-"][rel="stylesheet"]', visible: false)
       expect(page).to have_selector('link[href^="/assets/govuk_publishing_components/components/_details-"][rel="stylesheet"]', visible: false)
-      expect(page).to have_selector('link[href^="/assets/govuk_publishing_components/components/_title-"][rel="stylesheet"]', visible: false)
+      expect(page).to have_selector('link[href^="/assets/govuk_publishing_components/components/_heading-"][rel="stylesheet"]', visible: false)
     end
   end
 end
diff --git a/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb b/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb
index d38e1441b8..2f2440763a 100644
--- a/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb
+++ b/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb
@@ -19,7 +19,7 @@ def request
     end
 
     it "detect the total number of stylesheet paths" do
-      expect(get_component_css_paths.count).to eql(81)
+      expect(get_component_css_paths.count).to eql(80)
     end
 
     it "initialize empty asset helper" do