Add documentation and test for govspeak margin

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: |

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",