Add margin_bottom option to success alert

The GOV.UK sucess alert component has a fixed bottom margin which is
fine in most use cases of this component.

Recently, however, the success alert component has been added to
the top of publication pages whose content has a large margin on the
top. This makes it so that the visual space between the success alert
and the content of the page is excessive, hence the need to introduce
this option to the component.

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 * Use the correct mixins for applying font in the big number component ([PR #2494](https://github.com/alphagov/govuk_publishing_components/pull/2494))
 * Remove use of govuk-font from the big number component ([PR #2493](https://github.com/alphagov/govuk_publishing_components/pull/2493))
+* Add `margin_bottom` option to success alert ([PR #2492](https://github.com/alphagov/govuk_publishing_components/pull/2492))
 
 ## 27.15.0
 

app/views/govuk_publishing_components/components/_success_alert.html.erb

@@ -1,9 +1,12 @@
 <%
   description ||= nil
   title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = %w(gem-c-success-alert govuk-notification-banner govuk-notification-banner--success)
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 
-<%= tag.div class: "gem-c-success-alert govuk-notification-banner govuk-notification-banner--success",
+<%= tag.div class: classes,
   role: "alert",
   tabindex: "-1",
   aria: {

app/views/govuk_publishing_components/components/docs/success_alert.yml

@@ -37,3 +37,9 @@ examples:
         orci. Proin semper porttitor ipsum, vel maximus justo rutrum vel.
         Morbi volutpat facilisis libero. Donec posuere eget odio non egestas.
         Nullam sed neque quis turpis.
+  with_custom_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). The default margins for the component are inherited from the [notification-banner](https://github.com/alphagov/govuk-frontend/blob/main/package/govuk/components/notification-banner/_index.scss) styles defined in the Design System.
+    data:
+      message: Message to alert the user to a successful action goes here
+      margin_bottom: 3

spec/components/success_alert_spec.rb

@@ -23,4 +23,10 @@ def component_name
     assert_select ".gem-c-success-alert", aria: { labelledby: "Bar" }
     assert_select ".govuk-notification-banner__title", id: "Bar"
   end
+
+  it "applies a custom margin-bottom class when margin_bottom is specified" do
+    render_component(message: "Foo", margin_bottom: 5)
+
+    assert_select '.gem-c-success-alert.govuk-\!-margin-bottom-5'
+  end
 end