Add inverse option to metadata component

- changes all text and links to white, for use on dark backgrounds

app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss

@@ -3,13 +3,32 @@
   @include core-16;
   @include responsive-bottom-margin;
   @extend %contain-floats;
+
+  a {
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+  }
 }
 
 .gem-c-metadata.direction-rtl {
   direction: rtl;
   text-align: start;
 }
 
+.gem-c-metadata--inverse {
+  color: govuk-colour('white');
+
+  a:link,
+  a:active,
+  a:visited {
+    color: govuk-colour('white');
+  }
+
+  a:focus {
+    color: govuk-colour('black');
+  }
+}
+
 .gem-c-metadata__term {
   margin-top: 0.5em;
   line-height: normal;
@@ -43,14 +62,9 @@
     float: left;
     width: 70%;
   }
-
-  a {
-    @extend %govuk-link;
-  }
 }
 
 .gem-c-metadata__definition-link {
-  @extend %govuk-link;
   text-decoration: none;
 }
 

app/views/govuk_publishing_components/components/_metadata.html.erb

@@ -6,11 +6,16 @@
   part_of = Array(part_of)
 
   other ||= nil
+  inverse ||= false
 
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
+
+  classes = %w(gem-c-metadata)
+  classes << "direction-#{direction}" if local_assigns.include?(:direction)
+  classes << "gem-c-metadata--inverse" if inverse
 %>
-<div class="gem-c-metadata<%= direction_class %>" data-module="gem-toggle">
+<%= content_tag :div, class: classes, data: { module: "gem-toggle" } do %>
   <dl data-module="track-click">
     <% if from.any? %>
       <dt class="gem-c-metadata__term"><%= t("govuk_component.metadata.from", default: "From") %>:</dt>
@@ -60,4 +65,4 @@
       <% end %>
     <% end %>
   </dl>
-</div>
+<% end %>

app/views/govuk_publishing_components/components/docs/metadata.yml

@@ -335,3 +335,23 @@ examples:
       first_published: 14 June 2014
       other:
         Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
+  on_a_dark_background:
+    data:
+      inverse: true
+      from: [
+        "<a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>",
+        "<a href='/government/organisations/cabinet-office'>Cabinet Office</a>",
+        "<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy &amp; Industrial Strategy</a>",
+        "<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign &amp; Commonwealth Office</a>",
+        "<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>",
+        "<a href=\"/government/organisations/department-for-environment-food-rural-affairs\">Department for Environment, Food &amp; Rural Affairs</a>",
+        "<a href=\"/government/organisations/department-for-work-pensions\">Department for work and pensions</a>",
+        "<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign and Commonwealth Office</a>"
+      ]
+      first_published: 14 June 2014
+      last_updated: 10 September 2015
+      see_updates_link: true
+      other:
+        Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
+    context:
+      dark_background: true

spec/components/metadata_spec.rb

@@ -192,6 +192,12 @@ def component_name
     assert_no_truncation(links.length)
   end
 
+  it "renders the component on a dark background" do
+    render_component(from: "<a href='/link'>Department</a>", inverse: true)
+
+    assert_select ".gem-c-metadata.gem-c-metadata--inverse"
+  end
+
   def assert_truncation(length, limit)
     assert_select "span", count: 1
     assert_select "dd > a", count: limit