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.
alphagov · Aug 8, 2019 · d5f0ac3 · d5f0ac3
1 parent fb51504
commit d5f0ac3
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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