Merge pull request #3689 from alphagov/metadata-inverse-padding

Add metadata inverse no padding option

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add metadata inverse no padding option ([PR #3689](https://github.com/alphagov/govuk_publishing_components/pull/3689))
+
 ## 35.20.1
 
 * Adjustments to the navbar for the homepage ([PR #3666](https://github.com/alphagov/govuk_publishing_components/pull/3666))

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

@@ -25,11 +25,14 @@
 .gem-c-metadata--inverse {
   background-color: govuk-colour("blue");
   color: govuk-colour("white");
-  padding: govuk-spacing(2);
 
   a {
     @include govuk-link-style-inverse;
   }
+}
+
+.gem-c-metadata--inverse-padded {
+  padding: govuk-spacing(2);
 
   .gem-c-metadata__list {
     margin: govuk-spacing(2);

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

@@ -9,14 +9,21 @@
 
   other ||= nil
   inverse ||= false
+  inverse_compress ||= false
 
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   classes = %w(gem-c-metadata)
   classes << "direction-#{direction}" if local_assigns.include?(:direction)
-  classes << "gem-c-metadata--inverse" if inverse
+
+  if inverse && inverse_compress
+    classes << "gem-c-metadata--inverse"
+  elsif inverse
+    classes << "gem-c-metadata--inverse gem-c-metadata--inverse-padded"
+  end
+
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 
   ga4_tracking ||= false

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

@@ -355,6 +355,26 @@ examples:
       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>)
+  on_a_dark_background_without_padding:
+    description: By default the inverse option includes extra spacing around the component. This option removes this padding. Note that both the `inverse` and `inverse_compress` options must be supplied.
+    data:
+      inverse: true
+      inverse_compress: 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>)
   with_custom_margin_bottom:
     description: |
       The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to the `margin-bottom` values defined in the [responsive-bottom-margin mixin](https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss#L1)

spec/components/metadata_spec.rb

@@ -197,7 +197,14 @@ def component_name
   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.gem-c-metadata--inverse-padded"
+  end
+
+  it "renders the component on a dark background without extra padding" do
+    render_component(from: "<a href='/link'>Department</a>", inverse: true, inverse_compress: true)
+
     assert_select ".gem-c-metadata.gem-c-metadata--inverse"
+    assert_select ".gem-c-metadata.gem-c-metadata--inverse.gem-c-metadata--inverse-padded", false
   end
 
   it "applies a custom margin-bottom class if margin_bottom is specified" do