Merge pull request #768 from alphagov/add-margin-to-details

Add a margin_bottom option to details component

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Support data attributes for the back-link component (PR #773)
 * Create shared helper for components (PR #759)
 * Use delegated event handlers for checkbox events (PR #770)
+* Add margin option to details component (PR #768)
 
 ## 16.1.0
 

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

@@ -1,6 +1,13 @@
-<% data_attributes ||= nil %>
-<% open ||= nil %>
-<%= tag.details class: "gem-c-details govuk-details", data: data_attributes, open: open do %>
+<%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  data_attributes ||= nil
+  open ||= nil
+  margin_bottom ||= 3
+  css_classes = %w(gem-c-details govuk-details)
+  css_classes << (shared_helper.get_margin_bottom)
+%>
+<%= tag.details class: css_classes, data: data_attributes, open: open do %>
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       <%= title %>

spec/components/details_spec.rb

@@ -22,4 +22,22 @@ def component_name
 
     assert_select "details.gem-c-details[open]"
   end
+
+  it "applies a specified bottom margin" do
+    render_component(
+      title: "Some title",
+      margin_bottom: 0
+    )
+
+    assert_select '.govuk-details.govuk-\!-margin-bottom-0'
+  end
+
+  it "defaults to the initial bottom margin if an incorrect value is passed" do
+    render_component(
+      title: "Some title",
+      margin_bottom: 12
+    )
+
+    assert_select '.govuk-details.govuk-\!-margin-bottom-3'
+  end
 end