diff --git a/CHANGELOG.md b/CHANGELOG.md index 29179a61a6..1f28b584a3 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss index 7b0b08d733..c774d7aa66 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss @@ -13,17 +13,11 @@ $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; } @@ -31,20 +25,30 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey"); .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; } diff --git a/app/views/govuk_publishing_components/components/_attachment.html.erb b/app/views/govuk_publishing_components/components/_attachment.html.erb index 903e135799..ab0ae13a36 100644 --- a/app/views/govuk_publishing_components/components/_attachment.html.erb +++ b/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 %> diff --git a/spec/components/attachment_spec.rb b/spec/components/attachment_spec.rb index aa1690e0e0..adc81b2f72 100644 --- a/spec/components/attachment_spec.rb +++ b/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