Merge pull request #424 from alphagov/create-banner-component

Add banner component

app/assets/stylesheets/application.scss

@@ -18,7 +18,6 @@
 @import 'helpers/national_statistics_logo';
 @import 'helpers/notice';
 @import 'helpers/organisation-links';
-@import 'helpers/history-notice';
 @import 'helpers/withdrawal-notice';
 @import 'helpers/taxonomy-sidebar';
 @import 'helpers/button';
@@ -57,3 +56,4 @@
 @import 'components/subscription-links';
 @import 'components/heading';
 @import 'components/translation-nav';
+@import 'components/banner';

app/assets/stylesheets/components/_banner.scss

@@ -0,0 +1,51 @@
+.app-c-banner {
+  @include responsive-bottom-margin;
+  @include core-19;
+  @include white-links;
+  background: $govuk-blue;
+  color: $white;
+  padding: $gutter-half;
+  clear: both;
+
+  @include media(tablet) {
+    padding: $gutter-two-thirds $gutter;
+  }
+}
+
+.app-c-banner--grid {
+  @include media(tablet) {
+    padding: $gutter;
+  }
+}
+
+.app-c-banner__main {
+  margin-top: $gutter-half;
+
+  @include media(tablet) {
+    margin-top: 0;
+    margin-left: -$gutter-one-third;
+    padding-right: 0;
+    border-left: 1px solid $white;
+  }
+}
+
+.app-c-banner__aside {
+  @include media(tablet) {
+    padding-right: $gutter;
+  }
+}
+
+.app-c-banner__text {
+  @include bold-36;
+}
+
+.app-c-banner__title {
+  @include bold-27;
+  margin-bottom: $gutter-one-third;
+}
+
+.app-c-banner__desc {
+  @include core-24;
+  // Ensure the text has a line-length of around 60 characters
+  max-width: 30em;
+}

app/assets/stylesheets/views/_consultation.scss

@@ -1,50 +1,14 @@
 .consultation {
   @include sidebar-with-body;
-  @include history-notice;
   @include withdrawal-notice;
   @include share-buttons;
 
-  .consultation-notice {
-    @include notice;
+  .consultation-date {
+    @include core-24;
   }
 
-  .consultation-banner {
-    @include responsive-bottom-margin;
-    @include core-19;
-    @include white-links;
-    background-color: $govuk-blue;
-    color: $white;
-    padding: $gutter-half;
-
-    @include media(tablet) {
-      padding: $gutter;
-    }
-
-    h2 {
-      @include bold-27;
-      margin-bottom: $gutter-one-third;
-    }
-
-    .consultation-dates {
-      @include media(tablet) {
-        padding-right: $gutter;
-      }
-    }
-
-    .consultation-summary {
-      margin-top: $gutter-half;
-
-      @include media(tablet) {
-        margin-top: 0;
-        margin-left: -$gutter-one-third;
-        padding-right: 0;
-        border-left: 1px solid $white;
-      }
-    }
-
-    .consultation-date {
-      @include core-24;
-    }
+  .consultation-notice {
+    @include notice;
   }
 
   .original-consultation {

app/assets/stylesheets/views/_detailed-guide.scss

@@ -1,6 +1,5 @@
 .detailed-guide {
   @include sidebar-with-body;
-  @include history-notice;
   @include withdrawal-notice;
   @include taxonomy-sidebar;
 

app/assets/stylesheets/views/_document-collection.scss

@@ -1,6 +1,5 @@
 .document-collection {
   @include sidebar-with-body;
-  @include history-notice;
   @include withdrawal-notice;
   @include taxonomy-sidebar;
 

app/assets/stylesheets/views/_news-article.scss

@@ -1,6 +1,5 @@
 .news-article {
   @include sidebar-with-body;
-  @include history-notice;
   @include withdrawal-notice;
   @include share-buttons;
 

app/assets/stylesheets/views/_publication.scss

@@ -1,6 +1,5 @@
 .publication {
   @include sidebar-with-body;
-  @include history-notice;
   @include withdrawal-notice;
   @include national-statistics-logo;
   @include taxonomy-sidebar;

app/assets/stylesheets/views/_speech.scss

@@ -1,6 +1,5 @@
 .speech {
   @include sidebar-with-body;
-  @include history-notice;
   @include withdrawal-notice;
 
   .direction-rtl & {

app/assets/stylesheets/views/_statistical-data-set.scss

@@ -1,5 +1,4 @@
 .statistical-data-set {
   @include sidebar-with-body;
-  @include history-notice;
   @include withdrawal-notice;
 }

app/assets/stylesheets/views/_world-location-news-article.scss

@@ -1,6 +1,5 @@
 .world-location-news-article {
   @include sidebar-with-body;
-  @include history-notice;
   @include withdrawal-notice;
   @include share-buttons;
 

app/views/components/_banner.html.erb

@@ -0,0 +1,32 @@
+<%
+  title ||= false
+  aside ||= false
+  large_text = !title && !aside
+%>
+
+<% content_block = capture do %>
+  <% if title %>
+    <h2 class="app-c-banner__title"><%= title %></h2>
+  <% end %>
+  <p class="app-c-banner__<% if large_text %>text<% else %>desc<% end %>">
+    <%= text %>
+  </p>
+<% end %>
+
+<% if aside %>
+ <div class="app-c-banner app-c-banner--grid">
+  <div class="grid-row app-c-banner__aside">
+    <div class="column-third">
+      <p><%= aside %></p>
+    </div>
+
+    <div class="column-two-thirds app-c-banner__main">
+      <%= content_block %>
+    </div>
+  </div>
+ </div>
+<% else %>
+  <div class="app-c-banner">
+      <%= content_block %>
+  </div>
+<% end %>

app/views/components/docs/banner.yml

@@ -0,0 +1,18 @@
+name: Banner
+description: A page banner, designed to highlight important information
+body: Passing an aside to the banner will mean the banner renders in a grid layout.
+accessibility_criteria: |
+  The banner must:
+
+  - be visually distinct from other content on the page
+  - have a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+fixtures:
+  default:
+    text: 'This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government'
+  banner_with_title:
+    title: 'Summary'
+    text: 'This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government'
+  banner_with_aside:
+    title: 'Summary'
+    text: 'This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government'
+    aside: 'This consultation ran from 9:30am on 30 January 2017 to 5pm on 28 February 2017'

app/views/content_items/consultation.html.erb

@@ -83,41 +83,28 @@
     </header>
 <% end %>
 
-<div class="consultation-banner">
-  <div class="grid-row">
-    <div class="column-third consultation-dates">
-
-        <% if @content_item.closed? %>
-          <p>
-            This consultation ran from<br /><span class="consultation-date"><time datetime="<%= @content_item.opening_date_time %>"><%= @content_item.opening_date %></time> to
-            <time datetime="<%= @content_item.closing_date_time %>"><%= @content_item.closing_date %></time></span>
-          </p>
-        <% elsif @content_item.open? %>
-          <p>
-            This consultation closes at<br />
-            <span class="consultation-date"><time datetime="<%= @content_item.closing_date_time %>"><%= @content_item.closing_date %></time></span>
-          </p>
-        <% elsif @content_item.unopened? %>
-          <p>
-            This consultation opens <% if @content_item.opening_date_midnight? %>on<% else %>at<% end %><br />
-            <span class="consultation-date"><time datetime="<%= @content_item.opening_date_time %>"><%= @content_item.opening_date %></time></span>
-          </p>
-          <p>
-            It closes at<br />
-            <span class="consultation-date"><time datetime="<%= @content_item.closing_date_time %>"><%= @content_item.closing_date %></time></span>
-          </p>
-        <% end %>
-    </div>
-    <div class="column-two-thirds consultation-summary">
-      <h2>Summary</h2>
-      <%= render 'components/lead-paragraph', text: @content_item.description %>
+<% consultation_date = capture do %>
+  <% if @content_item.closed? %>
+    This consultation ran from<br /><span class="consultation-date"><time datetime="<%= @content_item.opening_date_time %>"><%= @content_item.opening_date %></time> to
+    <time datetime="<%= @content_item.closing_date_time %>"><%= @content_item.closing_date %></time></span>
+  <% elsif @content_item.open? %>
+    This consultation closes at<br />
+    <span class="consultation-date"><time datetime="<%= @content_item.closing_date_time %>"><%= @content_item.closing_date %></time></span>
+  <% elsif @content_item.unopened? %>
+    This consultation opens <% if @content_item.opening_date_midnight? %>on<% else %>at<% end %><br />
+    <span class="consultation-date"><time datetime="<%= @content_item.opening_date_time %>"><%= @content_item.opening_date %></time></span><br />
+    It closes at<br />
+    <span class="consultation-date"><time datetime="<%= @content_item.closing_date_time %>"><%= @content_item.closing_date %></time></span>
+  <% end %>
+<% end %>
 
-      <% if @content_item.held_on_another_website? %>
-        <p><strong>This consultation <% if @content_item.closed? %>was<% else %>is being<% end %> held on <a href="<%= @content_item.held_on_another_website_url %>">another website</a>.</strong></p>
-      <% end %>
-    </div>
-  </div>
-</div>
+<% consultation_desc = capture do %>
+  <%= @content_item.description %>
+  <% if @content_item.held_on_another_website? %>
+    <strong>This consultation <% if @content_item.closed? %>was<% else %>is being<% end %> held on <a href="<%= @content_item.held_on_another_website_url %>">another website</a>.</strong>
+  <% end %>
+<% end %>
+<%= render 'components/banner', text: consultation_desc, title: 'Summary', aside: consultation_date %>
 
 <% if @content_item.final_outcome? %>
   </section>

app/views/shared/_history_notice.html.erb

@@ -1,5 +1,3 @@
 <% if content_item.historically_political? %>
-  <div class="history-notice">
-    <h2>This was published under the <%= content_item.publishing_government %></h2>
-  </div>
+  <%= render 'components/banner', text: "This was published under the #{content_item.publishing_government}" %>
 <% end %>

test/components/banner_test.rb

@@ -0,0 +1,39 @@
+require 'component_test_helper'
+
+class BannerTest < ComponentTestCase
+  def component_name
+    "banner"
+  end
+
+  test "fails to render a banner when no text is given" do
+    assert_raise do
+      render_component({})
+    end
+  end
+
+  test "renders a banner with text correctly" do
+    render_component(title: 'Summary', text: 'This was published under the 2010 to 2015 Conservative government')
+
+    assert_select ".app-c-banner--grid", false
+    assert_select ".app-c-banner__desc", text: 'This was published under the 2010 to 2015 Conservative government'
+  end
+
+  test "renders a banner with title and text correctly" do
+    render_component(title: 'Summary', text: 'This was published under the 2010 to 2015 Conservative government')
+
+    assert_select ".app-c-banner--grid", false
+    assert_select ".app-c-banner__title", text: 'Summary'
+    assert_select ".app-c-banner__desc", text: 'This was published under the 2010 to 2015 Conservative government'
+  end
+
+  test "renders a banner with title, text and aside correctly" do
+    render_component(title: 'Summary',
+                      text: 'This was published under the 2010 to 2015 Conservative government',
+                      aside: 'This consultation ran from 9:30am on 30 January 2017 to 5pm on 28 February 2017')
+
+    assert_select ".app-c-banner--grid"
+    assert_select ".app-c-banner__title", text: 'Summary'
+    assert_select ".app-c-banner__desc", text: 'This was published under the 2010 to 2015 Conservative government'
+    assert_select ".app-c-banner__aside p", text: 'This consultation ran from 9:30am on 30 January 2017 to 5pm on 28 February 2017'
+  end
+end

test/integration/detailed_guide_test.rb

@@ -49,7 +49,7 @@ class DetailedGuideTest < ActionDispatch::IntegrationTest
   test "historically political detailed guide" do
     setup_and_visit_content_item('political_detailed_guide')
 
-    within ".history-notice" do
+    within ".app-c-banner" do
       assert page.has_text?('This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government')
     end
   end

test/integration/document_collection_test.rb

@@ -124,7 +124,7 @@ class DocumentCollectionTest < ActionDispatch::IntegrationTest
   test "historically political collection" do
     setup_and_visit_content_item('document_collection_political')
 
-    within ".history-notice" do
+    within ".app-c-banner" do
       assert page.has_text?('This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government')
     end
   end

test/integration/news_article_test.rb

@@ -47,7 +47,7 @@ class NewsArticleTest < ActionDispatch::IntegrationTest
   test "renders history notice" do
     setup_and_visit_content_item("news_article_history_mode")
 
-    within ".history-notice" do
+    within ".app-c-banner" do
       assert page.has_text?("This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government")
     end
   end

test/integration/publication_test.rb

@@ -54,7 +54,7 @@ class PublicationTest < ActionDispatch::IntegrationTest
   test "historically political publication" do
     setup_and_visit_content_item('political_publication')
 
-    within ".history-notice" do
+    within ".app-c-banner" do
       assert page.has_text?('This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government')
     end
   end

test/integration/statistical_data_set_test.rb

@@ -39,7 +39,7 @@ class StatisticalDataSetTest < ActionDispatch::IntegrationTest
   test "historically political statistical data set" do
     setup_and_visit_content_item('statistical_data_set_political')
 
-    within ".history-notice" do
+    within ".app-c-banner" do
       assert page.has_text?('This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government')
     end
   end