Merge pull request #288 from alphagov/add-heading-component

Add heading component

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -12,6 +12,7 @@
 @import "components/document-list";
 @import "components/error-summary";
 @import "components/fieldset";
+@import "components/heading";
 @import "components/input";
 @import "components/label";
 @import "components/radio";

app/assets/stylesheets/govuk_publishing_components/components/_heading.scss

@@ -0,0 +1,10 @@
+.gem-c-heading {
+  @include bold-27;
+  margin-top: $gutter;
+  margin-bottom: $gutter-half;
+
+  @include media(tablet) {
+    margin-top: 0;
+    margin-bottom: $gutter;
+  }
+}

app/views/govuk_publishing_components/components/_heading.html.erb

@@ -0,0 +1,11 @@
+<%
+  id = "id=#{id}" if id
+  heading_level ||= 1
+  heading_level_tag = "h#{heading_level}" if [1,2,3,4,5,6].include? heading_level
+%>
+<<%= heading_level_tag %>
+  <%= id %>
+  class="gem-c-heading"
+>
+  <%= text %>
+</<%= heading_level_tag %>>

app/views/govuk_publishing_components/components/docs/heading.yml

@@ -0,0 +1,32 @@
+name: Heading
+description: A text heading
+body: |
+  A heading tag with an optional id attribute, used predominantly to the left of content on consultations and publications.
+
+  Real world examples:
+
+  - [Publication](/government/publications/recognising-the-terrorist-threat)
+  - [Consultation](/government/consultations/proposal-for-the-future-of-rotherham-goldthorpe-jobcentre)
+accessibility_criteria: |
+  The heading must:
+
+  - be part of a correct heading structure for a page
+  - be semantically represented as a heading
+  - convey the heading level
+examples:
+  default:
+    data:
+      text: 'Download the full outcome'
+  right_to_left:
+    data:
+      text: 'مستندات'
+    context:
+      right_to_left: true
+  with_id_attribute:
+    data:
+      text: 'Detail of outcome'
+      id: 'detail_of_outcome'
+  specific_heading_level:
+    data:
+      text: 'Original consultation'
+      heading_level: 3

spec/components/heading_test_spec.rb

@@ -0,0 +1,28 @@
+require 'rails_helper'
+
+describe "Heading", type: :view do
+  def component_name
+    "heading"
+  end
+
+  it "fails to render a heading when no title is given" do
+    assert_raises do
+      render_component({})
+    end
+  end
+
+  it "renders a heading correctly" do
+    render_component(text: 'Download documents')
+    assert_select "h1.gem-c-heading", text: 'Download documents'
+  end
+
+  it "renders a different heading level" do
+    render_component(text: 'Original consultation', heading_level: 3)
+    assert_select "h3.gem-c-heading", text: 'Original consultation'
+  end
+
+  it "has a specified id attribute" do
+    render_component(text: 'Consultation description', id: 'custom-id')
+    assert_select ".gem-c-heading[id='custom-id']", text: 'Consultation description'
+  end
+end