Merge pull request #1208 from alphagov/add-optional-button-spacing

Add margin bottom support to buttons

Gemfile

@@ -12,7 +12,7 @@ gem 'sass-rails', "5.0.6"
 gem 'asset_bom_removal-rails', '~> 1.0.0'
 gem 'nokogiri', "~> 1.7"
 gem 'redis', "~> 3.3.3"
-gem 'govuk_publishing_components', '~> 1.12.1', require: false
+gem 'govuk_publishing_components', '~> 2.0.0', require: false
 gem 'govuk_app_config', '~> 0.3.0'
 
 group :development do

Gemfile.lock

@@ -109,7 +109,7 @@ GEM
     govuk_frontend_toolkit (7.2.0)
       railties (>= 3.1.0)
       sass (>= 3.2.0)
-    govuk_publishing_components (1.12.1)
+    govuk_publishing_components (2.0.0)
       govspeak (>= 5.0.3)
       govuk_frontend_toolkit
       rails (>= 5.0.0.1)
@@ -326,7 +326,7 @@ DEPENDENCIES
   govuk-lint (~> 3.3.1)
   govuk_app_config (~> 0.3.0)
   govuk_frontend_toolkit (~> 7.2.0)
-  govuk_publishing_components (~> 1.12.1)
+  govuk_publishing_components (~> 2.0.0)
   govuk_template (= 0.23.0)
   image_optim (= 0.17.1)
   jasmine-rails (~> 0.14.1)

app/assets/stylesheets/govuk-component/_button.scss

@@ -13,6 +13,13 @@
   }
 }
 
+// this will be moved and extended into a model for general component spacing
+// once this has been decided upon and other work completed, see:
+// https://trello.com/c/KEkNsxG3/142-3-implement-customisable-spacing-for-components
+.pub-c-button--bottom-margin {
+  @include responsive-bottom-margin;
+}
+
 %pub-c-button--start,
 .pub-c-button--start {
   @include bold-24($line-height: (24 / 20));

app/views/govuk_component/button.raw.html.erb

@@ -5,13 +5,15 @@
   rel ||= false
   text ||= ""
   tag_name = href ? "a" : "button"
+  margin_bottom ||= false
 %>
 <<%= tag_name %>
   class="
     pub-c-button
     <% if start == true %>
       pub-c-button--start
     <% end %>
+    <%= " pub-c-button--bottom-margin" if margin_bottom %>
   "
   <% if href %>
     href="<%= href.try(:html_safe) %>"

app/views/govuk_component/docs/button.yml

@@ -48,6 +48,11 @@ examples:
       href: "#"
       start: true
       info_text: "Sometimes you want to explain where a user is going to."
+  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
   extreme_text:
     data:
       text: "I'm a button with lots of text to test how the component scales at extremes."

app/views/govuk_component/docs/document_footer.yml

@@ -9,6 +9,8 @@ accessibility_criteria: |
 
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - 'duplicate-id' # ids used in this component are for anchoring from another component
 examples:
   from_only:
     data:

app/views/govuk_component/docs/government_navigation.yml

@@ -8,6 +8,8 @@ accessibility_criteria: |
   - Be identified as a [navigation landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_navigation)
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - 'duplicate-id' # ids used in this component are for slimmer to use when moving this component into the header
 examples:
   default:
     data: {}

app/views/govuk_component/docs/option_select.yml

@@ -85,7 +85,7 @@ examples:
       The aria_controls_id must be set to the ID of an element that’s on the page or it won’t be included.
     data:
       key: with_aria-control_set
-      title: List of options
+      title: List of options (with aria controls)
       aria_controls_id: js-update-region-id
       options_container_id: list_of_countries
       options:

test/govuk_component/button_test.rb

@@ -55,4 +55,13 @@ def component_name
     render_component(text: "Start now", rel: "nofollow preload")
     assert_select ".pub-c-button[rel='nofollow preload']", text: "Start now"
   end
+
+  test "renders margin bottom class correctly" do
+    render_component(text: "Submit")
+    assert_select ".pub-c-button", text: "Submit"
+    assert_select ".pub-c-button--bottom-margin", count: 0
+
+    render_component(text: "Submit", margin_bottom: true)
+    assert_select ".pub-c-button.pub-c-button--bottom-margin", text: "Submit"
+  end
 end