From c32e2a8bbd48002ffbffdf870c67bc7f57f48a46 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Tue, 22 Oct 2024 10:50:54 +0100
Subject: [PATCH] Add documentation and test for govspeak margin

- forgot to add in https://github.com/alphagov/govuk_publishing_components/pull/4325
---
 .../components/docs/govspeak.yml                  |  9 ++++++++-
 spec/components/govspeak_spec.rb                  | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/views/govuk_publishing_components/components/docs/govspeak.yml b/app/views/govuk_publishing_components/components/docs/govspeak.yml
index 07647e6065..57f560b6e1 100644
--- a/app/views/govuk_publishing_components/components/docs/govspeak.yml
+++ b/app/views/govuk_publishing_components/components/docs/govspeak.yml
@@ -32,9 +32,16 @@ examples:
       inverse: true
       block: |
         <h2>This is a title</h2>
-        <p>This is some body text with <a href="https://example.com">a link</a>.</p>
+          <p>This is some body text with <a href="https://example.com">a link</a>.</p>
     context:
       dark_background: true
+  with_margin_bottom:
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to no margin bottom, as spacing below is normally provided by elements within the component.
+    data:
+      margin_bottom: 9
+      block: |
+        <h2>This is a title</h2>
+          <p>This is some body text with <a href="https://example.com">a link</a>.</p>
   heading_levels:
     data:
       block: |
diff --git a/spec/components/govspeak_spec.rb b/spec/components/govspeak_spec.rb
index f9e5004d12..490014d028 100644
--- a/spec/components/govspeak_spec.rb
+++ b/spec/components/govspeak_spec.rb
@@ -21,6 +21,21 @@ def component_name
     assert_select ".gem-c-govspeak.gem-c-govspeak--inverse h2", text: "inverse"
   end
 
+  it "applies default margin to the component" do
+    render_component(
+      content: "<h2>content</h2>".html_safe,
+    )
+    assert_select '.gem-c-govspeak.govuk-\!-margin-bottom-0'
+  end
+
+  it "applies margin to the component" do
+    render_component(
+      content: "<h2>content</h2>".html_safe,
+      margin_bottom: 6,
+    )
+    assert_select '.gem-c-govspeak.govuk-\!-margin-bottom-6'
+  end
+
   it "renders right to left content correctly" do
     render_component(
       direction: "rtl",