diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d3944d260..1d00718e77 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ useful summary for people upgrading their application, not a replication of the commit log. +## Unreleased + +* Swap inset text top margin with padding ([PR #4634](https://github.com/alphagov/govuk_publishing_components/pull/4634)) + ## 52.0.0 * Make account layout respect `for_static` ([PR #4630](https://github.com/alphagov/govuk_publishing_components/pull/4630)) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss b/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss index 5b61dc845b..2560a7e7e8 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_inset-text.scss @@ -6,3 +6,15 @@ break-inside: avoid; } } + +.gem-c-inset-text { + padding-top: govuk-spacing(4); + + .govuk-inset-text { + margin-top: 0; + } + + @include govuk-media-query($from: tablet) { + padding-top: govuk-spacing(6); + } +} diff --git a/app/views/govuk_publishing_components/components/_inset_text.html.erb b/app/views/govuk_publishing_components/components/_inset_text.html.erb index ef5e4c5852..af6fb0951f 100644 --- a/app/views/govuk_publishing_components/components/_inset_text.html.erb +++ b/app/views/govuk_publishing_components/components/_inset_text.html.erb @@ -5,13 +5,15 @@ local_assigns[:margin_bottom] ||= 6 component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) - component_helper.add_class("gem-c-inset-text govuk-inset-text gem-c-force-print-link-styles-within") + component_helper.add_class("gem-c-inset-text gem-c-force-print-link-styles-within") component_helper.set_id(id) %> <%= tag.div(**component_helper.all_attributes) do %> - <% if defined? text %> - <%= text %> - <% elsif block_given? %> - <%= yield %> - <% end %> +
+ <% if defined? text %> + <%= text %> + <% elsif block_given? %> + <%= yield %> + <% end %> +
<% end %> diff --git a/spec/components/inset_text_spec.rb b/spec/components/inset_text_spec.rb index 729a1bf20b..2083fc169a 100644 --- a/spec/components/inset_text_spec.rb +++ b/spec/components/inset_text_spec.rb @@ -8,7 +8,7 @@ def component_name it "renders inset text" do render_component(text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.") - assert_select(".govuk-inset-text.govuk-\\!-margin-bottom-6", text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.") + assert_select(".gem-c-inset-text.govuk-\\!-margin-bottom-6", text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.") end it "renders a block" do @@ -36,6 +36,6 @@ def component_name margin_bottom: 9, ) - assert_select(".govuk-inset-text.govuk-\\!-margin-bottom-9", text: "margin!") + assert_select(".gem-c-inset-text.govuk-\\!-margin-bottom-9", text: "margin!") end end