Swap inset text top margin with padding

We're trying to standardise the margins at the parent level of components
alphagov · Feb 14, 2025 · c75ce19 · c75ce19
1 parent 49b731c
commit c75ce19
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git 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))
+
 ## 51.2.1
 
 * Fix spacing between govspeak headings and attachment ([PR #4618](https://github.com/alphagov/govuk_publishing_components/pull/4618))

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,14 @@
     break-inside: avoid;
   }
 }
+
+.govuk-inset-text {
+  margin-top: 0;
+}
+
+.gem-c-inset-text {
+  padding-top: govuk-spacing(4);
+  @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