Merge pull request #1690 from alphagov/replace_title_component_with_h…

…eading_component

Replace title component with heading component

app/assets/stylesheets/application.scss

@@ -67,3 +67,7 @@ $govuk-typography-use-rem: false;
     color: govuk-colour("white");
   }
 }
+
+.deployment__stats {
+  margin-bottom: govuk-spacing(8);
+}

app/views/applications/deploy.html.erb

@@ -11,10 +11,12 @@
     ]
   } %>
 
-  <%= render "govuk_publishing_components/components/title", {
-    title: "Deploy #{@release_tag}",
+  <%= render "govuk_publishing_components/components/heading", {
+    text: "Deploy #{@release_tag}",
     context: @application.name,
-    margin_bottom: 2
+    margin_bottom: 2,
+    font_size: "xl",
+    heading_level: 1
   } %>
   <%= render partial: "shared/badges", locals: { application: @application } %>
 </div>
@@ -37,7 +39,9 @@
 <% if @production_deploy %>
   <%= render "govuk_publishing_components/components/heading", {
     text: "Release changes",
-    margin_bottom: 4
+    margin_bottom: 4,
+    font_size: "xl",
+    heading_level: 1
   } %>
 
   <div class="release__view-diff">

app/views/applications/index.html.erb

@@ -6,8 +6,11 @@
   ]
 } %>
 
-<%= render "govuk_publishing_components/components/title", {
-  title: "Applications"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Applications",
+  font_size: "xl",
+  heading_level: 1,
+  margin_bottom: 8
 } %>
 
 <%= render partial: "applications_table", locals: { applications: @applications, environments: @environments } %>

app/views/applications/new.html.erb

@@ -11,8 +11,11 @@
 
 <%= render "shared/form_errors", resource: @application %>
 
-<%= render "govuk_publishing_components/components/title", {
-  title: "Create new application"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Create new application",
+  font_size: "xl",
+  heading_level: 1,
+  margin_bottom: 8
 } %>
 
 <%= render "govuk_publishing_components/components/lead_paragraph", {

app/views/deployments/recent.html.erb

@@ -9,8 +9,11 @@
     ]
   } %>
 
-<%= render "govuk_publishing_components/components/title", {
-  title: "Recent deployments"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Recent deployments",
+  font_size: "xl",
+  heading_level: 1,
+  margin_bottom: 8
 } %>
 
 <%= form_tag(activity_path, method: :get) do %>

app/views/deployments/show.html.erb

@@ -11,8 +11,11 @@
   ]
 } %>
 
-<%= render "govuk_publishing_components/components/title", {
-  title: "Deploy ##{@deployment.id}"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Deploy ##{@deployment.id}",
+  font_size: "xl",
+  heading_level: 1,
+  margin_bottom: 8
 } %>
 
 <div class="govuk-body">

app/views/shared/_application_header.html.erb

@@ -3,10 +3,12 @@
     breadcrumbs: [ root_crumb, { title: application.name, } ]
   } %>
 
-  <%= render "govuk_publishing_components/components/title", {
-    title: "#{application.name}",
+  <%= render "govuk_publishing_components/components/heading", {
+    text: "#{application.name}",
     context: application.shortname,
-    margin_bottom: 2
+    margin_bottom: 2,
+    font_size: "xl",
+    heading_level: 1
   } %>
 
   <%= render partial: "shared/badges", locals: { application: application } %>

app/views/sites/show.html.erb

@@ -2,8 +2,11 @@
 
 <%= render "shared/form_errors", resource: site_settings %>
 
-<%= render "govuk_publishing_components/components/title", {
-  title: "Settings"
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Settings",
+  font_size: "xl",
+  heading_level: 1,
+  margin_bottom: 8
 } %>
 
 

app/views/stats/index.html.erb

@@ -8,14 +8,24 @@
   ]
 } %>
 
-<%= render "govuk_publishing_components/components/title", {
-  title: "Deployments per month"
-} %>
+<div class="deployment__stats">
+  <%= render "govuk_publishing_components/components/heading", {
+    text: "Deployments per month",
+    font_size: "xl",
+    heading_level: 1,
+    margin_bottom: 8
+  } %>
 
-<%= line_chart @stats.per_month, width: "100%", height: "450px", legend: false, download: true %>
+  <%= line_chart @stats.per_month, width: "100%", height: "450px", legend: false, download: true %>
+</div>
 
-<%= render "govuk_publishing_components/components/title", {
-  title: "Deployments per year"
-} %>
+<div class="deployment__stats">
+  <%= render "govuk_publishing_components/components/heading", {
+    text: "Deployments per year",
+    font_size: "xl",
+    heading_level: 1,
+    margin_bottom: 8
+  } %>
 
-<%= column_chart @stats.per_year, width: "100%", height: "250px", legend: false, download: true %>
+  <%= column_chart @stats.per_year, width: "100%", height: "250px", legend: false, download: true %>
+</div>

test/functional/applications_controller_test.rb

@@ -90,12 +90,12 @@ class ApplicationsControllerTest < ActionController::TestCase
 
     should "show the application name" do
       get :show, params: { id: @app.id }
-      assert_select ".gem-c-title .gem-c-title__text", text: @app.name
+      assert_select ".gem-c-heading .gem-c-heading__text", text: @app.name
     end
 
     should "show the application shortname" do
       get :show, params: { id: @app.id }
-      assert_select ".gem-c-title .gem-c-title__context", text: @app.shortname
+      assert_select ".gem-c-heading .gem-c-heading__context", text: @app.shortname
     end
 
     should "show manual deployed status" do
@@ -152,7 +152,7 @@ class ApplicationsControllerTest < ActionController::TestCase
 
       should "show the application" do
         get :show, params: { id: @app.id }
-        assert_select ".gem-c-title .gem-c-title__text", text: @app.name
+        assert_select ".gem-c-heading .gem-c-heading__text", text: @app.name
       end
 
       should "set the commit history in reverse order" do
@@ -289,8 +289,8 @@ class ApplicationsControllerTest < ActionController::TestCase
 
     should "show that we are trying to deploy the release" do
       get :deploy, params: { id: @app.id, tag: @release_tag }
-      assert_select ".gem-c-title .gem-c-title__text", "Deploy #{@release_tag}"
-      assert_select ".gem-c-title .gem-c-title__context", text: @app.name
+      assert_select ".gem-c-heading .gem-c-heading__text", "Deploy #{@release_tag}"
+      assert_select ".gem-c-heading .gem-c-heading__context", text: @app.name
     end
 
     should "indicate which releases are current and about to be deployed" do

test/integration/stats_page_test.rb

@@ -7,7 +7,7 @@ class StatsPageTest < ActionDispatch::IntegrationTest
 
   test "page with global stats" do
     visit stats_path
-    assert page.has_selector?(".gem-c-title__text", text: "Deployments per month")
+    assert page.has_selector?(".gem-c-heading__text", text: "Deployments per month")
   end
 
   test "page with stats for an application" do