Add margin_bottom option to component wrapper helper

- add a margin_bottom option, which accepts a number from the govuk-frontend spacing scale to set margin bottom on components. Slightly tricky as it overlaps onto another option - classes - but all we have to do is check the number, generate the right class based on the number, then add it to the end of the classes as they are passed out from all_attributes
- create a new set of styles using the govuk-frontend responsive spacing scale to use with the new option. We previously used the govuk-frontend spacing override classes, but this has long been incorrect - those should be used only where an override is necessary to achieve a style
- rewrite the component wrapper helper tests a little, firstly to make more specific so that we don't have to update every test now we default output a margin class, secondly to structure and group the tests a bit more logically for readability
- update a trio of components that were broken by these changes, by removing their use of the shared helper for this same functionality and updating tests accordingly

app/assets/stylesheets/govuk_publishing_components/lib/_spacing.scss

@@ -0,0 +1,8 @@
+// styles used to provide margin in the component wrapper helper
+$margins: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
+
+@each $margin in $margins {
+  .govuk-margin-bottom-#{$margin} {
+    @include govuk-responsive-margin($margin, "bottom");
+  }
+}

app/models/govuk_publishing_components/component_wrapper_helper_options.rb

@@ -8,6 +8,7 @@ def self.description
 - `data_attributes` - accepts a hash of data attributes
 - `aria` - accepts a hash of aria attributes
 - `classes` - accepts a space separated string of classes, these should not be used for styling and must be prefixed with `js-`
+- `margin_bottom` - accepts a number 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) (defaults to no margin)
 - `role` - accepts a space separated string of roles
 - `lang` - accepts a language attribute value
 - `open` - accepts an open attribute value (true or false)

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

@@ -1,7 +1,6 @@
 <%
   add_gem_component_stylesheet("details")
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   open ||= nil
   disable_ga4 ||= false
   @ga4 ||= OpenStruct.new(index_section: 0) unless disable_ga4
@@ -25,7 +24,6 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-details govuk-details")
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless disable_ga4
   component_helper.add_data_attribute({ ga4_event: ga4_event }) unless disable_ga4
   component_helper.set_open(open)

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

@@ -3,6 +3,7 @@
 
   brand ||= false
   lang = local_assigns[:lang].presence
+  local_assigns[:margin_bottom] ||= 0
 
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   heading_helper = GovukPublishingComponents::Presenters::HeadingHelper.new(local_assigns)
@@ -13,7 +14,6 @@
   classes << heading_helper.classes
   classes << brand_helper.brand_class
   classes << brand_helper.border_color_class
-  classes << shared_helper.get_margin_bottom if [*0..9].include?(local_assigns[:margin_bottom])
 
   component_helper.add_class(classes.join(" "))
   component_helper.set_id(heading_helper.id)

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

@@ -4,12 +4,10 @@
   local_assigns[:id] ||= "hint-#{SecureRandom.hex(4)}"
   is_radio_label_hint ||= false
   right_to_left ||= false
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-hint govuk-hint")
   component_helper.add_class("govuk-radios__hint") if is_radio_label_hint
-  component_helper.add_class(shared_helper.get_margin_bottom) if [*0..9].include?(local_assigns[:margin_bottom])
 %>
 
 <%= tag.div(**component_helper.all_attributes, dir: right_to_left ? "rtl" : nil) do %>

docs/component-wrapper-helper.md

@@ -29,6 +29,7 @@ These options can be passed to any component that uses the component wrapper.
 - `data_attributes` - accepts a hash of data attributes
 - `aria` - accepts a hash of aria attributes
 - `classes` - accepts a space separated string of classes, these should not be used for styling and must be prefixed with `js-`
+- `margin_bottom` - accepts a number 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) (defaults to no margin)
 - `role` - accepts a space separated string of roles
 - `lang` - accepts a language attribute value
 - `open` - accepts an open attribute value (true or false)
@@ -64,6 +65,8 @@ The component wrapper includes several methods to make managing options easier,
   data_attributes ||= {}
   aria_attributes ||= {}
   role ||= nil
+  # margin_bottom will be applied by default, use this line to set a different default
+  local_assigns[:margin_bottom] ||= 0
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-example govuk-example") # combines the given class with any passed classes

lib/govuk_publishing_components/presenters/component_wrapper_helper.rb

@@ -14,6 +14,7 @@ def initialize(options)
         check_hidden_is_valid(@options[:hidden]) if @options.include?(:hidden)
         check_tabindex_is_valid(@options[:tabindex]) if @options.include?(:tabindex)
         check_dir_is_valid(@options[:dir]) if @options.include?(:dir)
+        check_margin_bottom_is_valid(@options[:margin_bottom]) if @options.include?(:margin_bottom)
       end
 
       def all_attributes
@@ -22,7 +23,10 @@ def all_attributes
         attributes[:id] = @options[:id] unless @options[:id].blank?
         attributes[:data] = @options[:data_attributes] unless @options[:data_attributes].blank?
         attributes[:aria] = @options[:aria] unless @options[:aria].blank?
-        attributes[:class] = @options[:classes] unless @options[:classes].blank?
+
+        ((@options[:classes] ||= "") << " govuk-margin-bottom-#{@options[:margin_bottom] || 3}").strip!
+        attributes[:class] = @options[:classes]
+
         attributes[:role] = @options[:role] unless @options[:role].blank?
         attributes[:lang] = @options[:lang] unless @options[:lang].blank?
         attributes[:open] = @options[:open] unless @options[:open].blank?
@@ -83,6 +87,11 @@ def set_dir(dir_attribute)
         @options[:dir] = dir_attribute
       end
 
+      def set_margin_bottom(margin_bottom)
+        check_margin_bottom_is_valid(margin_bottom)
+        @options[:margin_bottom] = margin_bottom
+      end
+
     private
 
       def check_id_is_valid(id)
@@ -170,6 +179,10 @@ def check_tabindex_is_valid(tabindex_attribute)
         end
       end
 
+      def check_margin_bottom_is_valid(margin_bottom)
+        raise(ArgumentError, "margin_bottom option (#{margin_bottom}) is not recognised") unless [*0..9].include?(margin_bottom)
+      end
+
       def check_dir_is_valid(dir_attribute)
         return if dir_attribute.nil?
 

spec/components/details_spec.rb

@@ -29,7 +29,7 @@ def component_name
       margin_bottom: 0,
     )
 
-    assert_select '.govuk-details.govuk-\!-margin-bottom-0'
+    assert_select ".govuk-details.govuk-margin-bottom-0"
   end
 
   it "applies data attributes when provided" do
@@ -56,15 +56,6 @@ def component_name
     assert_select '.govuk-details .govuk-details__summary[aria-label="label"]'
   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
-
   it "increments the GA4 index_section parameter when more than one component instance" do
     render_component(title: "first details")
     assert_select '.govuk-details[data-ga4-event=\'{"event_name":"select_content","type":"detail","text":"first details","section":"first details","index_section":1}\']'

spec/components/heading_spec.rb

@@ -76,17 +76,12 @@ def component_name
 
   it "adds margin" do
     render_component(text: "Margin 7", margin_bottom: 7)
-    assert_select '.gem-c-heading.govuk-\!-margin-bottom-7'
-  end
-
-  it "defaults to no bottom margin if an incorrect value is passed" do
-    render_component(text: "Margin wat", margin_bottom: 20)
-    assert_select "[class^='govuk-\!-margin-bottom-']", false
+    assert_select ".gem-c-heading.govuk-margin-bottom-7"
   end
 
   it "has no margin class added by default" do
     render_component(text: "No margin")
-    assert_select "[class^='govuk-\!-margin-bottom-']", false
+    assert_select ".gem-c-heading.govuk-margin-bottom-0"
   end
 
   it "adds border 1" do

spec/components/hint_spec.rb

@@ -26,19 +26,13 @@ def component_name
   it "applies a specified bottom margin" do
     render_component(text: "For example, ‘QQ 12 34 56 C’.", margin_bottom: 7)
 
-    assert_select '.govuk-hint.govuk-\!-margin-bottom-7'
+    assert_select ".govuk-hint.govuk-margin-bottom-7"
   end
 
   it "applies zero bottom margin" do
     render_component(text: "For example, ‘QQ 12 34 56 C’.", margin_bottom: 0)
 
-    assert_select '.govuk-hint.govuk-\!-margin-bottom-0'
-  end
-
-  it "does not default to the initial bottom margin if an incorrect value is passed" do
-    render_component(text: "For example, ‘QQ 12 34 56 C’.", margin_bottom: 12)
-
-    assert_select '.govuk-hint.govuk-\!-margin-bottom-3', false
+    assert_select ".govuk-hint.govuk-margin-bottom-0"
   end
 
   it "accepts js classes" do