Add shared helper for margin bottom

app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -5,7 +5,6 @@
   // Always render the contents list above a
   // back to contents link
   position: relative;
-  margin: 0 0 govuk-spacing(4) 0;
   z-index: 1;
   background: govuk-colour("white");
   box-shadow: 0 20px 15px -10px govuk-colour("white");

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

@@ -7,7 +7,9 @@
   title ||= nil
   brand ||= false
   local_assigns[:aria] ||= {}
+  local_assigns[:margin_bottom] ||= 4
 
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 
@@ -27,6 +29,7 @@
   component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}")
   component_helper.add_class("gem-c-contents-list--alternative-line-style") if alternative_line_style
   component_helper.add_class("gem-c-contents-list--custom-title") if title
+  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
   component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
   component_helper.add_role("navigation")

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

@@ -35,6 +35,17 @@ examples:
           text: Second thing
         - href: "#third-thing"
           text: Third thing
+  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 margin bottom is `20px` (`govuk-spacing(4)`).
+    data:
+      margin_bottom: 9
+      contents:
+        - href: "#first-thing"
+          text: First thing
+        - href: "#second-thing"
+          text: Second thing
+        - href: "#third-thing"
+          text: Third thing
   underline_links:
     description: By default we do not underline links in this component even though this is the general approach on GOV.UK. This is because some of the examples below (particularly those with numbers) do not work well with underlined links. Instead, this option allows the links to be underlined where appropriate.
     data:

spec/components/contents_list_spec.rb

@@ -77,6 +77,19 @@ def contents_list_with_markup
     assert_select ".gem-c-contents-list__link.govuk-link--no-underline[href='#two']", text: "2. Two"
   end
 
+  it "applies default margin to the component" do
+    render_component(contents: contents_list)
+    assert_select '.gem-c-contents-list.govuk-\!-margin-bottom-4'
+  end
+
+  it "applies requested margin to the component" do
+    render_component(
+      contents: contents_list,
+      margin_bottom: 0,
+    )
+    assert_select '.gem-c-contents-list.govuk-\!-margin-bottom-0'
+  end
+
   it "renders a list of contents links containing special characters" do
     render_component(contents: contents_list_with_special_chars)