From d5f0ac3ba571d9b6e75b3d0cd4a5db1442099cd0 Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Thu, 8 Aug 2019 01:32:02 +0000
Subject: [PATCH] Add inverse flag to contents list component

We have a need to use the contents list component within a topic page header, which has a blue background.
---
 .../components/_contents-list.scss            | 19 +++++++++++++++++++
 .../components/_contents_list.html.erb        |  6 +++++-
 .../components/docs/contents_list.yml         | 12 ++++++++++++
 spec/components/contents_list_spec.rb         |  5 +++++
 4 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss
index ad0daa1b0e..2059636ab9 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss
@@ -10,12 +10,27 @@
   box-shadow: 0 20px 15px -10px govuk-colour("white");
 }
 
+.gem-c-contents-list--inverse {
+  background: transparent;
+  box-shadow: none;
+}
+
 .gem-c-contents-list__title {
   @include govuk-text-colour;
   @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
   margin: 0;
 }
 
+.gem-c-contents-list--inverse .gem-c-contents-list__title,
+.gem-c-contents-list--inverse .gem-c-contents-list__link:link,
+.gem-c-contents-list--inverse .gem-c-contents-list__link:visited {
+  color: govuk-colour("white");
+}
+
+.gem-c-contents-list--inverse .gem-c-contents-list__link:focus {
+  color: $govuk-focus-text-colour;
+}
+
 .gem-c-contents-list__list,
 .gem-c-contents-list__nested-list {
   @include govuk-text-colour;
@@ -76,6 +91,10 @@
     }
   }
 
+  .gem-c-contents-list--inverse &:before {
+    color: govuk-colour("white");
+  }
+
   // Focus styles on IE8 and older include the
   // left margin, creating an odd white box with
   // orange border around the em dash.
diff --git a/app/views/govuk_publishing_components/components/_contents_list.html.erb b/app/views/govuk_publishing_components/components/_contents_list.html.erb
index 19b667862c..a119458c97 100644
--- a/app/views/govuk_publishing_components/components/_contents_list.html.erb
+++ b/app/views/govuk_publishing_components/components/_contents_list.html.erb
@@ -2,6 +2,7 @@
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new
   format_numbers ||= false
   underline_links ||= false
+  inverse ||= false
   contents ||= []
   aria_label ||= ''
   nested = !!contents.find { |c| c[:items] && c[:items].any? }
@@ -19,7 +20,10 @@
 <% if contents.any? %>
   <nav
     role="navigation"
-    class="gem-c-contents-list <%= 'gem-c-contents-list--no-underline' unless underline_links %> <%= brand_helper.brand_class %>"
+    class="gem-c-contents-list
+      <%= 'gem-c-contents-list--inverse' if inverse %>
+      <%= 'gem-c-contents-list--no-underline' unless underline_links %>
+      <%= brand_helper.brand_class %>"
     data-module="track-click"
     <% if aria_label.present? %>
       aria-label="<%= aria_label %>"
diff --git a/app/views/govuk_publishing_components/components/docs/contents_list.yml b/app/views/govuk_publishing_components/components/docs/contents_list.yml
index af7fdc4c14..7844d6f493 100644
--- a/app/views/govuk_publishing_components/components/docs/contents_list.yml
+++ b/app/views/govuk_publishing_components/components/docs/contents_list.yml
@@ -215,4 +215,16 @@ examples:
             text: Guidance and regulation
           - href: "#third-thing"
             text: Consultations
+  inverse:
+    description: Displays with no background colour, no box shadow and white text, for use on (for example) the [inverse header](/component-guide/inverse_header)
+    data:
+      inverse: true
+      contents:
+        - href: "#item-1"
+          text: "Item 1"
+        - href: "#item-2"
+          text: "Item 2"
+    context:
+      dark_background: true
+
 
diff --git a/spec/components/contents_list_spec.rb b/spec/components/contents_list_spec.rb
index 676d9ba2af..cdab50d8c5 100644
--- a/spec/components/contents_list_spec.rb
+++ b/spec/components/contents_list_spec.rb
@@ -137,4 +137,9 @@ def assert_tracking_link(name, value, total = 1)
     render_component(contents: nested_contents_list, hide_title: true)
     assert_select ".gem-c-contents-list__title", false
   end
+
+  it "adds an inverse class if inverse flag is passed" do
+    render_component(contents: nested_contents_list, inverse: true)
+    assert_select ".gem-c-contents-list--inverse"
+  end
 end