Merge pull request #2492 from alphagov/success_alert_margins

Add margin_bottom option to success alert
alphagov · Dec 3, 2021 · ec25df6 · ec25df6
2 parents 64cd66d + fe17ebd
commit ec25df6
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/CHANGELOG.md b/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
 

diff --git a/app/views/govuk_publishing_components/components/_success_alert.html.erb b/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: {

diff --git a/app/views/govuk_publishing_components/components/docs/success_alert.yml b/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
diff --git a/spec/components/success_alert_spec.rb b/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