Merge pull request #4669 from alphagov/attachment-spacing

Adjust attachment component spacing

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Adjust attachment component spacing ([PR #4669](https://github.com/alphagov/govuk_publishing_components/pull/4669))
 * Add custom css exclude list to Asset Helper ([PR #4656](https://github.com/alphagov/govuk_publishing_components/pull/4656))
 * Rubocop is now configured for rails and rspec defaults ([PR #4660](https://github.com/alphagov/govuk_publishing_components/pull/4660))
 

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

@@ -13,38 +13,42 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
   position: relative;
   @include govuk-font(19);
   @include govuk-clearfix;
-
-  .govuk-details {
-    margin: govuk-spacing(3) 0;
-  }
 }
 
 .gem-c-attachment__thumbnail {
   position: relative;
   width: auto;
-  margin-right: govuk-spacing(5);
-  margin-bottom: govuk-spacing(3);
   padding: $thumbnail-border-width;
   float: left;
 }
 
 .gem-c-attachment__thumbnail-image {
   display: block;
   width: auto; // for IE8
-  max-width: $thumbnail-width;
-  height: $thumbnail-height;
+  max-width: calc($thumbnail-width / 1.5);
+  height: calc($thumbnail-height / 1.5);
   border: $thumbnail-border-colour; // for IE9 & IE10
   outline: $thumbnail-border-width solid $thumbnail-border-colour;
   background: $thumbnail-background;
   box-shadow: $thumbnail-shadow-width $thumbnail-shadow-colour;
   fill: $thumbnail-icon-border-colour;
   stroke: $thumbnail-icon-border-colour;
+
+  @include govuk-media-query($from: tablet) {
+    max-width: $thumbnail-width;
+    height: $thumbnail-height;
+  }
 }
 
 .gem-c-attachment__details {
-  padding-left: $thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5);
+  padding-left: calc(($thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5)) / 1.5);
+
+  @include govuk-media-query($from: tablet) {
+    padding-left: $thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5);
+  }
 
   .gem-c-details {
+    margin-top: govuk-spacing(3);
     word-break: break-word;
     word-wrap: break-word;
   }

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

@@ -8,6 +8,7 @@
   attributes = []
   url_data_attributes ||= {}
   details_ga4_attributes ||= {}
+  local_assigns[:margin_bottom] ||= 6
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -126,6 +127,7 @@
       <%= render "govuk_publishing_components/components/details", {
         title: t("components.attachment.request_format_cta"),
         ga4_attributes: details_ga4_attributes,
+        margin_bottom: 0,
       } do %>
         <%= t("components.attachment.request_format_details_html", alternative_format_contact_email: attachment.alternative_format_contact_email) %>
       <% end %>

spec/components/attachment_spec.rb

@@ -283,16 +283,16 @@ def assert_thumbnail(type, src: nil)
   end
 
   it "accepts margin_bottom" do
-    render_component(attachment: { title: "Attachment", url: "https://gov.uk/attachment" }, margin_bottom: 6)
-    assert_select '.gem-c-attachment[class~="govuk-!-margin-bottom-6"]'
+    render_component(attachment: { title: "Attachment", url: "https://gov.uk/attachment" }, margin_bottom: 1)
+    assert_select '.gem-c-attachment[class~="govuk-!-margin-bottom-1"]'
 
     render_component(attachment: { title: "Attachment", url: "https://gov.uk/attachment" }, margin_bottom: 3)
     assert_select '.gem-c-attachment[class~="govuk-!-margin-bottom-3"]'
   end
 
-  it "defaults to no margin_bottom" do
+  it "defaults to margin_bottom of 6" do
     render_component(attachment: { title: "Attachment", url: "https://gov.uk/attachment" })
-    assert_select '.gem-c-attachment:not([class*="govuk-!-margin-bottom-"])'
+    assert_select '.gem-c-attachment[class~="govuk-!-margin-bottom-6"]'
   end
 
   it "includes GA4 tracking on HTML attachment links by default" do