From 938c394637a8488afc878240e712d7af8493c779 Mon Sep 17 00:00:00 2001
From: Max Lehmann <max.lehmann@digital.cabinet-office.gov.uk>
Date: Fri, 13 Oct 2017 13:28:23 +0000
Subject: [PATCH] Add lead paragraph component

- Imports the lead paragraph component from government-frontend
  so that it can be shared across applications
---
 .../govuk-component/_component.scss           |  1 +
 .../govuk-component/_lead-paragraph.scss      |  6 +++
 .../govuk_component/docs/lead_paragraph.yml   | 13 +++++++
 .../lead_paragraph.raw.html.erb               | 10 +++++
 test/govuk_component/lead_paragraph_test.rb   | 39 +++++++++++++++++++
 5 files changed, 69 insertions(+)
 create mode 100644 app/assets/stylesheets/govuk-component/_lead-paragraph.scss
 create mode 100644 app/views/govuk_component/docs/lead_paragraph.yml
 create mode 100644 app/views/govuk_component/lead_paragraph.raw.html.erb
 create mode 100644 test/govuk_component/lead_paragraph_test.rb

diff --git a/app/assets/stylesheets/govuk-component/_component.scss b/app/assets/stylesheets/govuk-component/_component.scss
index 4a3abc38f..8b22e534d 100644
--- a/app/assets/stylesheets/govuk-component/_component.scss
+++ b/app/assets/stylesheets/govuk-component/_component.scss
@@ -24,3 +24,4 @@
 @import "taxonomy-sidebar";
 @import "search";
 @import "button";
+@import "lead-paragraph";
diff --git a/app/assets/stylesheets/govuk-component/_lead-paragraph.scss b/app/assets/stylesheets/govuk-component/_lead-paragraph.scss
new file mode 100644
index 000000000..911ae9518
--- /dev/null
+++ b/app/assets/stylesheets/govuk-component/_lead-paragraph.scss
@@ -0,0 +1,6 @@
+.pub-c-lead-paragraph {
+  @include core-24;
+  @include responsive-bottom-margin;
+  // Ensure the text has a line-length of around 60 characters
+  max-width: 30em;
+}
diff --git a/app/views/govuk_component/docs/lead_paragraph.yml b/app/views/govuk_component/docs/lead_paragraph.yml
new file mode 100644
index 000000000..ab17e66df
--- /dev/null
+++ b/app/views/govuk_component/docs/lead_paragraph.yml
@@ -0,0 +1,13 @@
+name: Lead paragraph
+description: The opening paragraph of content. Typically a content item’s description field.
+accessibility_criteria: |
+  The lead paragraph must be visually distinct from other paragraphs.
+examples:
+  default:
+    data:
+      text: 'UK Visas and Immigration is making changes to the Immigration Rules affecting various categories.'
+  right_to_left:
+    data:
+      text: 'قرارات تحقيقات وزارة الدفاع في الانتهاكات المزعومة للمادة ٢ والمادة ٣ من المعاهدة الاوروبية لحقوق الانسان خلال العمليات العسكرية في العراق.'
+    context:
+      right_to_left: true
diff --git a/app/views/govuk_component/lead_paragraph.raw.html.erb b/app/views/govuk_component/lead_paragraph.raw.html.erb
new file mode 100644
index 000000000..a44428a4c
--- /dev/null
+++ b/app/views/govuk_component/lead_paragraph.raw.html.erb
@@ -0,0 +1,10 @@
+<%
+  text ||= ""
+  escaped_text = html_escape_once(text.strip)
+  text = escaped_text.sub(/\s([\w\.\?\!\:]+)$/, '&nbsp;\1').html_safe
+%>
+<% if text.present? %>
+  <p class="pub-c-lead-paragraph">
+    <%= text %>
+  </p>
+<% end %>
diff --git a/test/govuk_component/lead_paragraph_test.rb b/test/govuk_component/lead_paragraph_test.rb
new file mode 100644
index 000000000..c14699e61
--- /dev/null
+++ b/test/govuk_component/lead_paragraph_test.rb
@@ -0,0 +1,39 @@
+require 'govuk_component_test_helper'
+
+class LeadParagraphTest < ComponentTestCase
+  NBSP = HTMLEntities.new.decode('&nbsp;')
+
+  def component_name
+    "lead_paragraph"
+  end
+
+  def assert_lead_paragraph_matches(text, expected_text)
+    render_component(text: text)
+    assert_select ".pub-c-lead-paragraph", text: expected_text
+  end
+
+  test "renders nothing without a description" do
+    assert_empty render_component({})
+  end
+
+  test "renders a lead paragraph" do
+    render_component(text: 'UK Visas and Immigration is making changes to the Immigration Rules affecting various categories.')
+    assert_select ".pub-c-lead-paragraph", text: "UK Visas and Immigration is making changes to the Immigration Rules affecting various#{NBSP}categories."
+  end
+
+  [
+    { text: 'this and that', expected: "this and#{NBSP}that", description: 'non breaking space between last two words' },
+    { text: 'this and that.', expected: "this and#{NBSP}that.", description: 'non breaking space between last two words with trailing space' },
+    { text: 'this and that.', expected: "this and#{NBSP}that.", description: 'non breaking space between last two words at end of sentence' },
+    { text: 'this and that. ', expected: "this and#{NBSP}that.", description: 'non breaking space between last two words with trailing space after sentence' },
+    { text: "multiline\nthis and that", expected: "multiline\nthis and#{NBSP}that", description: 'non breaking space between last two words with new lines' },
+    { text: "this and that\n\n", expected: "this and#{NBSP}that", description: 'non breaking space between last two words with multiline input' },
+    { text: "this", expected: "this", description: 'single word input gives single word output' },
+    { text: "&lt;b&gt;this&lt;b&gt; &amp; that&nbsp;thing", expected: "<b>this<b> & that#{NBSP}thing", description: 'non breaking space output is not unsafe given special characters' },
+    { text: "&lt;b&gt;this&lt;b&gt; &amp;&nbsp;that", expected: "<b>this<b> &#{NBSP}that", description: 'non breaking space output is not unsafe given concatenated special characters' }
+  ].each do |test_params|
+    test test_params[:description] do
+      assert_lead_paragraph_matches(test_params[:text], test_params[:expected])
+    end
+  end
+end