Merge pull request #1318 from alphagov/allow-lead-para-blue-background

Add inverse flag to lead paragraph component

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;
+}

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

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 %>