Swap inset text top margin with padding

We're trying to standardise the margins at the parent level of components
alphagov · Feb 20, 2025 · 13311ad · 13311ad
1 parent 58c9e43
commit 13311ad
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Use component wrapper on 'add another' component ([PR #4632](https://github.com/alphagov/govuk_publishing_components/pull/4632))
 * Use component wrapper on 'copy to clipboard' component ([PR #4633](https://github.com/alphagov/govuk_publishing_components/pull/4633))
 * **BREAKING** Remove custom_header and custom_layout options ([PR #4635](https://github.com/alphagov/govuk_publishing_components/pull/4635))
+* Swap inset text top margin with padding ([PR #4634](https://github.com/alphagov/govuk_publishing_components/pull/4634))
 
 ## 51.2.1
 

diff --git 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
@@ -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 %>
+  <div class="govuk-inset-text">
+    <% if defined? text %>
+      <%= text %>
+    <% elsif block_given? %>
+      <%= yield %>
+    <% end %>
+  </div>
 <% end %>
diff --git 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