Ensure the margin on search_with_autocomplete comes from itself and n…

…ot from child components

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 * Fix bottom border colour issue in the super nav search button ([PR #4642](https://github.com/alphagov/govuk_publishing_components/pull/4642))
 * Use govuk-spacing instead of govuk-gutter ([PR #4650](https://github.com/alphagov/govuk_publishing_components/pull/4650))
+* Ensure 'search with autocomplete' component uses its own margin bottom ([PR #4637](https://github.com/alphagov/govuk_publishing_components/pull/4637))
 
 ## 52.1.0
 

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

@@ -8,16 +8,20 @@
     raise ArgumentError, "The search_with_autocomplete component requires source_url and source_key"
   end
 
-  search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key).merge(
+  search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key, :margin_bottom).merge(
     # The `search` component has an inline label by default, but this conflicts with the accessible-
     # autocomplete component's markup and styling. Every potential use of this component is in
     # situations where we want the label not to be inline anyway, so we override the default here.
-    inline_label: false
+    inline_label: false,
+    margin_bottom: 0
   )
 
   classes = %w[gem-c-search-with-autocomplete]
   classes << "gem-c-search-with-autocomplete--large" if local_assigns[:size] == "large"
   classes << "gem-c-search-with-autocomplete--on-govuk-blue" if local_assigns[:on_govuk_blue]
+
+  margin_bottom = [*0..9].include?(local_assigns[:margin_bottom]) ? local_assigns[:margin_bottom] : 6
+  classes << "govuk-!-margin-bottom-#{margin_bottom}" if margin_bottom
 %>
 <%= tag.div(
   class: classes.join(" "),

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

@@ -60,3 +60,10 @@ examples:
       source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
       source_key: suggested_autocomplete
       label_text: <h2 class="govuk-heading-m govuk-!-margin-bottom-1">Search GOV.UK</h2>
+  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 a margin bottom value of 6.
+    data:
+      source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
+      source_key: suggested_autocomplete
+      margin_bottom: 9

spec/components/search_with_autocomplete_spec.rb

@@ -49,4 +49,47 @@ def component_name
 
     assert_select ".gem-c-search.gem-c-search--on-govuk-blue.gem-c-search--large"
   end
+
+  it "applies a margin bottom of 0" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+      margin_bottom: 0,
+    })
+    assert_select '.gem-c-search-with-autocomplete.govuk-\!-margin-bottom-0'
+  end
+
+  it "applies a valid margin bottom" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+      margin_bottom: 4,
+    })
+    assert_select '.gem-c-search-with-autocomplete.govuk-\!-margin-bottom-4'
+  end
+
+  it "defaults to a margin bottom of 6" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+    })
+    assert_select '.gem-c-search-with-autocomplete.govuk-\!-margin-bottom-6'
+  end
+
+  it "sets margin bottom to 6 if an invalid number is passed" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+      margin_bottom: -1,
+    })
+    assert_select '.gem-c-search-with-autocomplete.govuk-\!-margin-bottom-6'
+  end
+
+  it "disables margin bottom on the child search component" do
+    render_component({
+      source_url: "http://example.org/api/autocomplete",
+      source_key: "suggestions",
+    })
+    assert_select '.gem-c-search.govuk-\!-margin-bottom-0'
+  end
 end