Apply margin bottom helper to big number component

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 * Make metadata component "See all updates" link href less generic ([PR #2562](https://github.com/alphagov/govuk_publishing_components/pull/2562))
 * Update feedback component to add "display none" to "maybe" (spam prevention) button ([PR #2568](https://github.com/alphagov/govuk_publishing_components/pull/2568))
+* Apply margin bottom helper to big number component ([PR #2566](https://github.com/alphagov/govuk_publishing_components/pull/2566))
 
 ## 28.1.0
 

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

@@ -1,18 +1,24 @@
 <%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   number ||= nil
   label ||= nil
   href ||= nil
   data_attributes ||= nil
   aria ||= nil
-  classes = ["gem-c-big-number__value"]
+  classes = ["gem-c-big-number"]
+  classes << shared_helper.get_margin_bottom
+
+  value_classes = ["gem-c-big-number__value"]
 
   if label.nil? && href
-    classes << "gem-c-big-number__value--decorated"
+    value_classes << "gem-c-big-number__value--decorated"
   end
+
 %>
 <% if number %>
   <% big_number_value = capture do %>
-    <%= tag.span class: classes, data: href ? nil : data_attributes do %>
+    <%= tag.span class: value_classes, data: href ? nil : data_attributes do %>
       <%= number %>
     <% end %>
 
@@ -25,7 +31,7 @@
     <% end %>
   <% end %>
   
-  <%= tag.div class: "gem-c-big-number", aria: aria do %>
+  <%= tag.div class: classes, aria: aria do %>
     <% unless href.nil? %>
       <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %>
     <% else %>

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

@@ -61,3 +61,9 @@ examples:
       label: Ministerial departments
       aria:
         hidden: true
+  with_bottom_margin:
+    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 big number margin bottom is 15px (govuk spacing 3).
+    data:
+      number: 119
+      label: Open consultations
+      margin_bottom: 9

spec/components/big_number_spec.rb

@@ -81,6 +81,15 @@ def component_name
     assert_select ".gem-c-big-number__value[data-my-cool-attribute='cool']"
   end
 
+  it "sets a custom margin bottom if the margin_bottom attribute is present" do
+    render_component({
+      number: 500,
+      margin_bottom: 5,
+    })
+
+    assert_select '.gem-c-big-number.govuk-\!-margin-bottom-5'
+  end
+
   # The space mentioned in the below test is to handle screen readers printing dictations without a space between the number and the label
   # We don't want this to get removed accidentally, hence the following test
   it "ensures that a visually hidden space is included for screen readers when a label is present" do