Merge pull request #404 from alphagov/create-lead-paragraph-component

Create lead paragraph component

Gemfile

@@ -41,7 +41,7 @@ group :development, :test do
   gem 'govuk-lint'
   gem 'pry-byebug'
   gem 'jasmine-rails', '~> 0.14.0'
-  gem 'govuk_publishing_components', '~> 0.1.0'
+  gem 'govuk_publishing_components', '~> 0.2.0'
 end
 
 group :development do

Gemfile.lock

@@ -99,7 +99,7 @@ GEM
       sass (>= 3.2.0)
     govuk_navigation_helpers (6.3.0)
       gds-api-adapters (>= 43.0)
-    govuk_publishing_components (0.1.0)
+    govuk_publishing_components (0.2.0)
       govuk_frontend_toolkit
       rails (~> 5.0.0, >= 5.0.0.1)
       sass-rails (~> 5.0.4)
@@ -299,7 +299,7 @@ DEPENDENCIES
   govuk_elements_rails (= 3.0.1)
   govuk_frontend_toolkit (= 5.1.0)
   govuk_navigation_helpers (~> 6.3)
-  govuk_publishing_components (~> 0.1.0)
+  govuk_publishing_components (~> 0.2.0)
   govuk_schemas
   htmlentities (= 4.3.4)
   jasmine-rails (~> 0.14.0)

app/assets/stylesheets/application.scss

@@ -14,7 +14,6 @@
 @import 'helpers/available-languages';
 @import 'helpers/back-to-content';
 @import 'helpers/contents-list';
-@import 'helpers/description';
 @import 'helpers/sidebar-with-body';
 @import 'helpers/share-buttons';
 @import 'helpers/national_statistics_logo';
@@ -55,3 +54,4 @@
 // components
 @import 'components/print-link';
 @import 'components/download-link';
+@import 'components/lead-paragraph';

app/assets/stylesheets/components/_lead-paragraph.scss

@@ -0,0 +1,6 @@
+.app-c-lead-paragraph {
+  @include core-24;
+  @include responsive-bottom-margin;
+  // Ensure the text has a line-length of around 60 characters
+  max-width: 30em;
+}

app/assets/stylesheets/views/_case-studies.scss

@@ -1,5 +1,4 @@
 .case-study {
-  @include description;
   @include sidebar-with-body;
   @include withdrawal-notice;
 

app/assets/stylesheets/views/_corporate-information-page.scss

@@ -1,5 +1,4 @@
 .corporate-information-page {
-  @include description;
   @include sidebar-with-body;
   @include organisation-links;
 

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

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

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

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

app/assets/stylesheets/views/_fatality-notice.scss

@@ -1,5 +1,4 @@
 .fatality-notice {
-  @include description;
   @include sidebar-with-body;
   @include withdrawal-notice;
 }

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

@@ -1,5 +1,4 @@
 .news-article {
-  @include description;
   @include sidebar-with-body;
   @include history-notice;
   @include withdrawal-notice;

app/assets/stylesheets/views/_publication.scss

@@ -1,5 +1,4 @@
 .publication {
-  @include description;
   @include sidebar-with-body;
   @include history-notice;
   @include withdrawal-notice;

app/assets/stylesheets/views/_specialist-document.scss

@@ -1,4 +1,3 @@
 .specialist-document {
-  @include description;
   @include sidebar-with-body;
 }

app/assets/stylesheets/views/_speech.scss

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

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

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

app/assets/stylesheets/views/_statistics_announcement.scss

@@ -1,5 +1,4 @@
 .statistics-announcement {
-  @include description;
   @include national-statistics-logo;
 
   .cancellation-notice {

app/assets/stylesheets/views/_take-part.scss

@@ -1,4 +1,3 @@
 .take-part {
-  @include description;
   @include sidebar-with-body;
 }

app/assets/stylesheets/views/_topical-event-about-page.scss

@@ -1,4 +1,3 @@
 .topical-event-about-page {
-  @include description;
   @include sidebar-with-body;
 }

app/assets/stylesheets/views/_working-group.scss

@@ -1,4 +1,3 @@
 .working-group {
-  @include description;
   @include sidebar-with-body;
 }

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

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

app/views/components/_lead-paragraph.html.erb

@@ -0,0 +1,8 @@
+<%
+  text ||= ""
+%>
+<% if text.present? %>
+  <p class="app-c-lead-paragraph">
+    <%= nbsp_between_last_two_words(text) %>
+  </p>
+<% end %>

app/views/components/docs/lead-paragraph.yml

@@ -0,0 +1,8 @@
+name: Lead paragraph
+description: A paragraph of text
+accessibility_criteria: |
+  The lead paragraph must:
+  - be visually distinct from other paragraphs
+fixtures:
+  default:
+    text: 'UK Visas and Immigration is making changes to the Immigration Rules affecting various categories.'

app/views/content_items/case_study.html.erb

@@ -3,6 +3,6 @@
 <%= render 'shared/title_and_translations', content_item: @content_item %>
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 <%= render 'shared/sidebar_image_with_body', content_item: @content_item %>
 <%= render 'shared/footer', @content_item.document_footer %>

app/views/content_items/consultation.html.erb

@@ -118,7 +118,7 @@
     </div>
     <div class="column-two-thirds consultation-summary">
       <h2>Summary</h2>
-      <%= render 'shared/description', description: @content_item.description %>
+      <%= render 'components/lead-paragraph', text: @content_item.description %>
 
       <% 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>

app/views/content_items/corporate_information_page.html.erb

@@ -7,7 +7,7 @@
     </div>
   </div>
   <%= render 'shared/title_and_translations', content_item: @content_item %>
-  <%= render 'shared/description', description: @content_item.description %>
+  <%= render 'components/lead-paragraph', text: @content_item.description %>
 
   <% @additional_body = capture do %>
     <% if @content_item.corporate_information? %>

app/views/content_items/detailed_guide.html+new_navigation.erb

@@ -12,7 +12,7 @@
     <%= render 'shared/withdrawal_notice', content_item: @content_item %>
     <%= render 'shared/metadata', content_item: @content_item %>
     <%= render 'shared/history_notice', content_item: @content_item %>
-    <%= render 'shared/description', description: @content_item.description %>
+    <%= render 'components/lead-paragraph', text: @content_item.description %>
 
     <div class="sidebar-with-body" id="contents">
       <% if @content_item.contents.any? %>

app/views/content_items/detailed_guide.html.erb

@@ -19,7 +19,7 @@
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
 <%= render 'shared/history_notice', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 
 <div
   class="grid-row sidebar-with-body"

app/views/content_items/document_collection.html+new_navigation.erb

@@ -7,7 +7,7 @@
     <%= render 'shared/withdrawal_notice', content_item: @content_item %>
     <%= render 'shared/metadata', content_item: @content_item %>
     <%= render 'shared/history_notice', content_item: @content_item %>
-    <%= render 'shared/description', description: @content_item.description %>
+    <%= render 'components/lead-paragraph', text: @content_item.description %>
     <%= render 'shared/sidebar_contents', contents: @content_item.contents %>
 
     <%= render 'document_collection_body' %>

app/views/content_items/document_collection.html.erb

@@ -4,7 +4,7 @@
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
 <%= render 'shared/history_notice', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 
 <div
   class="grid-row sidebar-with-body"

app/views/content_items/fatality_notice.html.erb

@@ -3,6 +3,6 @@
 <%= render 'shared/title_and_translations', content_item: @content_item %>
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 <%= render 'shared/sidebar_image_with_body', content_item: @content_item %>
 <%= render 'shared/footer', @content_item.document_footer %>

app/views/content_items/news_article.html.erb

@@ -4,7 +4,7 @@
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
 <%= render 'shared/history_notice', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 <%= render 'shared/sidebar_image_with_body', content_item: @content_item %>
 <%= render 'shared/share_buttons', share_urls: @content_item.share_urls %>
 <%= render 'govuk_component/document_footer', @content_item.document_footer %>

app/views/content_items/publication.html+new_navigation.erb

@@ -16,7 +16,7 @@
     <%= render 'shared/withdrawal_notice', content_item: @content_item %>
     <%= render 'shared/metadata', content_item: @content_item %>
     <%= render 'shared/history_notice', content_item: @content_item %>
-    <%= render 'shared/description', description: @content_item.description %>
+    <%= render 'components/lead-paragraph', text: @content_item.description %>
 
     <h1 class="section-title" id="documents-title">
       <%= t("publications.documents", count: @content_item.documents_count) %>

app/views/content_items/publication.html.erb

@@ -16,7 +16,7 @@
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
 <%= render 'shared/history_notice', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 
 <div class="grid-row sidebar-with-body">
   <div class="column-third">

app/views/content_items/specialist_document.html.erb

@@ -5,7 +5,7 @@
 
 <%= render 'shared/title_and_translations', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 
 <div class="grid-row sidebar-with-body">
   <% if @content_item.nested_contents.any? %>

app/views/content_items/speech.html.erb

@@ -4,6 +4,6 @@
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
 <%= render 'shared/history_notice', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 <%= render 'shared/sidebar_image_with_body', content_item: @content_item %>
 <%= render 'shared/footer', @content_item.document_footer %>

app/views/content_items/statistical_data_set.html.erb

@@ -4,6 +4,6 @@
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
 <%= render 'shared/history_notice', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 <%= render 'shared/sidebar_contents_with_body', content_item: @content_item %>
 <%= render 'shared/footer', @content_item.document_footer %>

app/views/content_items/statistics_announcement.html.erb

@@ -18,7 +18,7 @@
     <p><%= @content_item.cancellation_reason %></p>
   </div>
 <% end %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 
 <% if @content_item.release_date_changed? %>
 <div class="grid-row">

app/views/content_items/take_part.html.erb

@@ -1,5 +1,5 @@
 <%= content_for :title, @content_item.title %>
 
 <%= render 'shared/title_and_translations', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 <%= render 'shared/sidebar_image_with_body', content_item: @content_item %>

app/views/content_items/topical_event_about_page.html.erb

@@ -1,5 +1,5 @@
 <%= content_for :title, @content_item.title %>
 
 <%= render 'shared/title_and_translations', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 <%= render 'shared/sidebar_contents_with_body', content_item: @content_item %>

app/views/content_items/working_group.html.erb

@@ -1,7 +1,7 @@
 <%= content_for :title, @content_item.title %>
 
 <%= render 'shared/title_and_translations', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 
 <% @additional_body = capture do %>
   <% if @content_item.policies.any? %>

app/views/content_items/world_location_news_article.html.erb

@@ -4,7 +4,7 @@
 <%= render 'shared/withdrawal_notice', content_item: @content_item %>
 <%= render 'shared/metadata', content_item: @content_item %>
 <%= render 'shared/history_notice', content_item: @content_item %>
-<%= render 'shared/description', description: @content_item.description %>
+<%= render 'components/lead-paragraph', text: @content_item.description %>
 <%= render 'shared/sidebar_image_with_body', content_item: @content_item %>
 <%= render 'shared/share_buttons', share_urls: @content_item.share_urls %>
 <%= render 'shared/footer', @content_item.document_footer %>

lib/generators/format/templates/format.html.erb

@@ -8,4 +8,4 @@
   </div>
 </div>
 
-<%%= render 'shared/description', description: @content_item.description %>
+<%%= render 'components/lead-paragraph', text: @content_item.description %>

test/component_test_helper.rb

@@ -1,6 +1,8 @@
 require 'test_helper'
 
 class ComponentTestCase < ActionView::TestCase
+  helper Rails.application.helpers
+
   def component_name
     raise NotImplementedError, "Override this method in your test class"
   end

test/components/lead_paragraph_test.rb

@@ -0,0 +1,18 @@
+require 'component_test_helper'
+
+class LeadParagraphTest < ComponentTestCase
+  def component_name
+    "lead-paragraph"
+  end
+
+  test "renders nothing without a description" do
+    assert_empty render_component({})
+  end
+
+  test "renders a lead paragraph" do
+    nbsp = HTMLEntities.new.decode('&nbsp;')
+
+    render_component(text: 'UK Visas and Immigration is making changes to the Immigration Rules affecting various categories.')
+    assert_select ".app-c-lead-paragraph", text: "UK Visas and Immigration is making changes to the Immigration Rules affecting various#{nbsp}categories."
+  end
+end

test/integration/fatality_notice_test.rb

@@ -42,7 +42,7 @@ class FatalityNoticeTest < ActionDispatch::IntegrationTest
 
     assert_has_component_metadata_pair("see_updates_link", true)
 
-    within(".description") do
+    within(".app-c-lead-paragraph") do
       assert_text <<-DESCRIPTION
        It is with great sadness that the Ministry of Defence
        must confirm that Sir George Pomeroy Colley, died in battle