From 44007f0feb0ca6f102149692fe017fec5aa5683e Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Thu, 1 Mar 2018 15:18:46 +0000
Subject: [PATCH] Add inverse flag to lead paragraph component

We need to be able to display the lead paragraph component as white text on a blue background for the new taxonomy topic page designs
---
 .../stylesheets/govuk-component/_lead-paragraph.scss     | 4 ++++
 app/views/govuk_component/docs/lead_paragraph.yml        | 9 +++++++++
 app/views/govuk_component/lead_paragraph.raw.html.erb    | 3 ++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/govuk-component/_lead-paragraph.scss b/app/assets/stylesheets/govuk-component/_lead-paragraph.scss
index 911ae9518..26f74eaf2 100644
--- a/app/assets/stylesheets/govuk-component/_lead-paragraph.scss
+++ b/app/assets/stylesheets/govuk-component/_lead-paragraph.scss
@@ -4,3 +4,7 @@
   // Ensure the text has a line-length of around 60 characters
   max-width: 30em;
 }
+
+.pub-c-lead-paragraph--inverse {
+  color: $white;
+}
diff --git a/app/views/govuk_component/docs/lead_paragraph.yml b/app/views/govuk_component/docs/lead_paragraph.yml
index ab17e66df..18d182e07 100644
--- a/app/views/govuk_component/docs/lead_paragraph.yml
+++ b/app/views/govuk_component/docs/lead_paragraph.yml
@@ -2,6 +2,8 @@ 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.
+
+  The lead paragraph must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA (this especially applies when [placed on a darker background](/component-guide/lead_paragraph/on_topic_page)).
 examples:
   default:
     data:
@@ -11,3 +13,10 @@ examples:
       text: 'قرارات تحقيقات وزارة الدفاع في الانتهاكات المزعومة للمادة ٢ والمادة ٣ من المعاهدة الاوروبية لحقوق الانسان خلال العمليات العسكرية في العراق.'
     context:
       right_to_left: true
+  on_topic_page:
+    description: Lead paragraphs need to support being placed on a blue background to work with the new taxonomy topic page designs
+    data:
+      text: Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.
+      inverse: true
+    context:
+      dark_background: true
diff --git a/app/views/govuk_component/lead_paragraph.raw.html.erb b/app/views/govuk_component/lead_paragraph.raw.html.erb
index a44428a4c..cd9b0157a 100644
--- a/app/views/govuk_component/lead_paragraph.raw.html.erb
+++ b/app/views/govuk_component/lead_paragraph.raw.html.erb
@@ -1,10 +1,11 @@
 <%
   text ||= ""
+  inverse ||= false
   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">
+  <p class="pub-c-lead-paragraph <% if inverse %>pub-c-lead-paragraph--inverse<% end %>">
     <%= text %>
   </p>
 <% end %>