Change button margin option

- now accepts govuk-spacing scale value for variable margin
- also still accepts former option of 'true' to add a custom margin class, so this isn't a breaking change
- will remove the 'true' option later

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Change button margin option ([PR #1998](https://github.com/alphagov/govuk_publishing_components/pull/1998)) MINOR
 * Add auditing to applications ([PR #1949](https://github.com/alphagov/govuk_publishing_components/pull/1949)) PATCH
 * Update auditing ([PR #1996](https://github.com/alphagov/govuk_publishing_components/pull/1996)) PATCH
 * Update default footer links ([PR #1989](https://github.com/alphagov/govuk_publishing_components/pull/1989)) PATCH

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

@@ -66,18 +66,19 @@ examples:
       href: "#"
       start: true
       info_text: "Sometimes you want to explain where a user is going to."
+  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 having no margin bottom."
+    data:
+      text: "Submit"
+      margin_bottom: 6
   start_now_button_with_info_text_and_margin_bottom:
+    description: "When the component requires margin bottom and has info text, the margin is applied to the info text."
     data:
       text: "Start now"
       href: "#"
       start: true
       info_text: "Sometimes you want to explain where a user is going to and have a margin bottom"
-      margin_bottom: true
-  with_margin_bottom:
-    description: "Sometimes it's useful to break up a page, for example if a button is at the bottom of a page."
-    data:
-      text: "Submit"
-      margin_bottom: true
+      margin_bottom: 6
   extreme_text:
     data:
       text: "I'm a button with lots of text to test how the component scales at extremes."

lib/govuk_publishing_components/presenters/button_helper.rb

@@ -31,7 +31,8 @@ def initialize(local_assigns)
         @info_text = local_assigns[:info_text]
         @info_text_classes = %w[gem-c-button__info-text]
         if local_assigns[:margin_bottom]
-          @info_text_classes << "gem-c-button__info-text--bottom-margin"
+          margin_class = get_margin_bottom(local_assigns[:margin_bottom], true)
+          @info_text_classes << margin_class
         end
         @rel = local_assigns[:rel]
         @data_attributes = local_assigns[:data_attributes]
@@ -81,11 +82,21 @@ def css_classes
         css_classes << "gem-c-button--secondary-quiet" if secondary_quiet
         css_classes << "govuk-button--secondary" if secondary_solid
         css_classes << "govuk-button--warning" if destructive
-        css_classes << "gem-c-button--bottom-margin" if margin_bottom && !info_text
+        if margin_bottom && !info_text
+          margin_class = get_margin_bottom(margin_bottom, false)
+          css_classes << margin_class
+        end
         css_classes << "gem-c-button--inline" if inline_layout
         css_classes << classes if classes
         css_classes.join(" ")
       end
+
+      def get_margin_bottom(margin, info_text)
+        legacy_class = "gem-c-button--bottom-margin"
+        legacy_class = "gem-c-button__info-text--bottom-margin" if info_text
+
+        [*0..9].include?(margin) ? "govuk-!-margin-bottom-#{margin}" : legacy_class
+      end
     end
   end
 end

spec/components/button_spec.rb

@@ -91,6 +91,15 @@ def component_name
     assert_select ".gem-c-button__info-text.gem-c-button__info-text--bottom-margin", text: "Information text"
   end
 
+  it "renders info text with variable margin bottom" do
+    render_component(text: "Start now", info_text: "Information text", margin_bottom: 6)
+
+    assert_select ".gem-c-button--bottom-margin", count: 0
+
+    assert_select ".govuk-button", text: "Start now"
+    assert_select '.gem-c-button__info-text.govuk-\!-margin-bottom-6', text: "Information text"
+  end
+
   it "renders rel attribute correctly" do
     render_component(text: "Start now", rel: "nofollow")
     assert_select ".govuk-button[rel='nofollow']", text: "Start now"
@@ -114,6 +123,11 @@ def component_name
     assert_select ".govuk-button.gem-c-button--bottom-margin", text: "Submit"
   end
 
+  it "renders a variable margin bottom correctly" do
+    render_component(text: "Submit", margin_bottom: 6)
+    assert_select '.govuk-button.govuk-\!-margin-bottom-6', text: "Submit"
+  end
+
   it "renders data attributes correctly for buttons" do
     render_component(
       text: "Submit",