Merge pull request #657 from alphagov/add-inverted-option-to-metadata…

…-component Add inverse option to metadata component
alphagov · Dec 4, 2018 · 94b48f2 · 94b48f2
2 parents b10e641 + 66967b7
commit 94b48f2
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Add inverse option to metadata component (PR #657)
 * Modify warning text component (PR #655)
 
 ## 12.17.0

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss b/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;
 }
 

diff --git a/app/views/govuk_publishing_components/components/_metadata.html.erb b/app/views/govuk_publishing_components/components/_metadata.html.erb
@@ -6,22 +6,27 @@
   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>
       <dd class="gem-c-metadata__definition">
-        <%= render 'govuk_publishing_components/components/metadata/sentence', items: from, toggle_id: "from" %>
+        <%= render 'govuk_publishing_components/components/metadata/sentence', items: from, toggle_id: "from-#{SecureRandom.hex(4)}" %>
       </dd>
     <% end %>
     <% if part_of.any? %>
       <dt class="gem-c-metadata__term"><%= t("govuk_component.metadata.part_of", default: "Part of") %>:</dt>
       <dd class="gem-c-metadata__definition">
-        <%= render 'govuk_publishing_components/components/metadata/sentence', items: part_of, toggle_id: "part-of" %>
+        <%= render 'govuk_publishing_components/components/metadata/sentence', items: part_of, toggle_id: "part-of-#{SecureRandom.hex(4)}" %>
       </dd>
     <% end %>
     <% if local_assigns.include?(:history) %>
@@ -54,10 +59,10 @@
         <% if definition.any? %>
           <dt class="gem-c-metadata__term"><%= title %>:</dt>
           <dd class="gem-c-metadata__definition">
-            <%= render 'govuk_publishing_components/components/metadata/sentence', items: definition, toggle_id: index %>
+            <%= render 'govuk_publishing_components/components/metadata/sentence', items: definition, toggle_id: "#{index}-#{SecureRandom.hex(4)}" %>
           </dd>
         <% end %>
       <% end %>
     <% end %>
   </dl>
-</div>
+<% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/metadata.yml b/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
diff --git a/spec/components/metadata_spec.rb b/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