Add inverse header component

CHANGELOG.md

@@ -1,3 +1,7 @@
+# unreleased
+
+* Add new inverse header component.
+
 # 5.4.1
 
 * Remove worldwide organisation links from the payload used by the `related_navigation` component, as they're not required.

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -19,3 +19,4 @@
 @import "components/step-by-step-nav-header";
 @import "components/step-by-step-nav-related";
 @import "components/feedback";
+@import "components/inverse-header";

app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -0,0 +1,5 @@
+.gem-c-inverse-header {
+  width: 100%;
+  background-color: $govuk-blue;
+  padding: $gutter-half;
+}

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

@@ -0,0 +1,6 @@
+<% block = yield %>
+<% unless block.empty? %>
+  <header class="gem-c-inverse-header">
+    <%= block %>
+  </header>
+<% end %>

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

@@ -0,0 +1,41 @@
+name: Inverse header
+description: A wrapper to contain header content in white text
+body: |
+  This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content, neither does it enforce the white text it requires. Implemented to accomodate topic and list page headings and breadcrumbs but unopinionated about its contents.
+
+accessibility_criteria: |
+  The component must:
+
+  * be used in conjunction with content that renders a text contrast ratio higher than 4.5:1
+  against the header colour to meet WCAG AA.
+
+examples:
+  default:
+    data:
+      block: |
+        <div class="pub-c-title pub-c-title--inverse">
+          <h1 class="pub-c-title__text ">
+            Education, Training and Skills
+          </h1>
+        </div>
+  with_breadcrumbs_and_paragraph:
+    data:
+      block: |
+        <div class="govuk-breadcrumbs " data-module="track-click">
+          <ol>
+            <li class="">
+                <a data-track-category="breadcrumbClicked" data-track-action="1" data-track-label="/section" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Section&quot;}" class="govuk-breadcrumbs--inverse" aria-current="false" href="/section">Section</a>
+            </li>
+            <li class="">
+                <a data-track-category="breadcrumbClicked" data-track-action="2" data-track-label="#content" data-track-options="{&quot;dimension28&quot;:&quot;2&quot;,&quot;dimension29&quot;:&quot;Education of disadvantaged children&quot;}" class="govuk-breadcrumbs--inverse breadcrumb-for-current-page " aria-current="page" href="#content">Education of disadvantaged children</a>
+            </li>
+          </ol>
+        </div>
+        <div class="pub-c-title pub-c-title--inverse">
+          <h1 class="pub-c-title__text ">
+            Education, Training and Skills
+          </h1>
+        </div>
+        <p class="pub-c-lead-paragraph pub-c-lead-paragraph--inverse">
+          Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early&nbsp;years.
+        </p>

spec/components/inverse_header_spec.rb

@@ -0,0 +1,33 @@
+require 'rails_helper'
+
+def component_path
+  "govuk_publishing_components/components/inverse_header"
+end
+
+def block
+  "<div class=\"pub-c-title pub-c-title--inverse\">
+  <p class=\"pub-c-title__context\">
+    Publication
+  </p>
+  <h1 class=\"pub-c-title__text \">
+    HTML publication page title
+  </h1>
+</div>".html_safe
+end
+
+describe "Inverse header", type: :view do
+  def component_name
+    "inverse_header"
+  end
+
+  it "renders nothing when no data is given" do
+    assert_empty render_component({})
+  end
+
+  it "renders content within a wrapper when content is provided" do
+    render(component_path, {}) { block }
+
+    assert_select ".gem-c-inverse-header div.pub-c-title"
+    assert_select ".gem-c-inverse-header h1", text: "HTML publication page title"
+  end
+end