Merge pull request #1117 from alphagov/refactor-title-component

Update title component to meet chosen conventions

app/assets/stylesheets/govuk-component/_title-print.scss

@@ -1,3 +1,14 @@
+// scss-lint:disable SelectorFormat
+.pub-c-title__context {
+  margin: 0;
+}
+
+.pub-c-title__text {
+  margin-top: 0;
+}
+// scss-lint:enable SelectorFormat
+
+// To Be Deleted: Old Styling
 .govuk-title {
   .context {
     margin: 0;

app/assets/stylesheets/govuk-component/_title.scss

@@ -1,3 +1,23 @@
+// scss-lint:disable SelectorFormat
+.pub-c-title {
+  @include responsive-vertical-margins;
+}
+
+.pub-c-title__context {
+  @include core-24;
+  color: $secondary-text-colour;
+}
+
+.pub-c-title__text {
+  @include bold-48;
+}
+
+.pub-c-title__text--long {
+  @include bold-36;
+}
+// scss-lint:enable SelectorFormat
+
+// To Be Deleted: Old Styling
 .govuk-title {
   @include responsive-vertical-margins;
 

app/views/govuk_component/docs/title.yml

@@ -8,6 +8,12 @@ body: |
 
   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
 fixtures:
   default:
     title: My page title

app/views/govuk_component/title.raw.html.erb

@@ -1,10 +1,12 @@
 <%
-  average_title_length ||= :average
+  average_title_length ||= false
   context ||= false
 %>
-<div class="govuk-title length-<%= average_title_length %>">
+<div class="pub-c-title">
   <% if context %>
-    <p class="context"><%= context %></p>
+    <p class="pub-c-title__context"><%= context %></p>
   <% end %>
-  <h1><%= title %></h1>
+  <h1 class="pub-c-title__text <% if average_title_length %>pub-c-title__text--<%= average_title_length %><% end %>">
+    <%= title %>
+  </h1>
 </div>

test/govuk_component/title_test.rb

@@ -13,11 +13,16 @@ def component_name
 
   test "title text appears" do
     render_component(title: "Hello World")
-    assert_select ".govuk-title", text: "Hello World"
+    assert_select ".pub-c-title__text", text: "Hello World"
   end
 
   test "title context appears" do
     render_component(title: "Hello World", context: "Format")
-    assert_select ".govuk-title .context", text: "Format"
+    assert_select ".pub-c-title__context", text: "Format"
+  end
+
+  test "applies title length if supplied" do
+    render_component(title: "Hello World", context: "format", average_title_length: 'long')
+    assert_select ".pub-c-title .pub-c-title__text--long", text: "Hello World"
   end
 end