alphagov · andysellick · Dec 13, 2024 · Dec 11, 2024 · Dec 11, 2024 · Dec 13, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Add margin_bottom option to component wrapper helper ([PR #4494](https://github.com/alphagov/govuk_publishing_components/pull/4494))
 * Limit GA4 search term tracking to 500 characters ([PR #4496](https://github.com/alphagov/govuk_publishing_components/pull/4496))
 
 ## 46.3.1

diff --git a/app/models/govuk_publishing_components/component_wrapper_helper_options.rb b/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)

diff --git a/app/views/govuk_publishing_components/components/_accordion.html.erb b/app/views/govuk_publishing_components/components/_accordion.html.erb
@@ -13,8 +13,6 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.set_id(id)
   component_helper.add_class("gem-c-accordion govuk-accordion")
-  component_helper.add_class(shared_helper.get_margin_bottom)
-
   component_helper.add_data_attribute({ module: "govuk-accordion gem-accordion" })
   component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless disable_ga4
   component_helper.add_data_attribute({ ga4_expandable: "" }) unless disable_ga4

diff --git a/app/views/govuk_publishing_components/components/_action_link.html.erb b/app/views/govuk_publishing_components/components/_action_link.html.erb
@@ -2,8 +2,6 @@
   add_gem_component_stylesheet("action-link")
 
   local_assigns[:margin_bottom] ||= 0
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
   text ||= false
   nowrap_text ||= false
   href ||= false
@@ -26,7 +24,6 @@
   css_classes << "gem-c-action-link--simple-light" if simple_light
   css_classes << "gem-c-action-link--with-subtext" if subtext
   css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
-  css_classes << shared_helper.get_margin_bottom
 
   link_classes = %w(govuk-link gem-c-action-link__link gem-c-force-print-link-styles)
   link_classes << "govuk-link--inverse" if inverse

diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb
@@ -14,17 +14,16 @@
   minimal ||= false
   hide_heading ||= minimal
   link ||= false
+  local_assigns[:margin_bottom] ||= 3
 
   chart_id = "chart-id-#{SecureRandom.hex(4)}"
   table_id = "table-id-#{SecureRandom.hex(4)}"
   @external_script ||= OpenStruct.new(loaded: 0)
   @external_script[:loaded] += 1
 
   chart_helper = GovukPublishingComponents::Presenters::ChartHelper.new(local_assigns)
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-chart")
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_class("gem-c-chart--minimal") if minimal
 
   require "chartkick"

diff --git a/app/views/govuk_publishing_components/components/_chat_entry.html.erb b/app/views/govuk_publishing_components/components/_chat_entry.html.erb
@@ -9,13 +9,13 @@
   border_bottom ||= false
   disable_ga4 ||= false
   margin_top_until_tablet ||= false
+  local_assigns[:margin_bottom] ||= 6
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-chat-entry")
   component_helper.add_class("gem-c-chat-entry--border-top") if border_top
   component_helper.add_class("gem-c-chat-entry--border-bottom") if border_bottom
   component_helper.add_class("gem-c-chat-entry--margin-top-until-tablet") if margin_top_until_tablet
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
 
   unless disable_ga4

diff --git a/app/views/govuk_publishing_components/components/_contents_list.html.erb b/app/views/govuk_publishing_components/components/_contents_list.html.erb
@@ -9,7 +9,6 @@
   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)
 
@@ -29,7 +28,6 @@
   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")

diff --git a/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb b/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb
@@ -4,7 +4,6 @@
   disable_ga4 ||= false
   request.query_parameters[:disable_ga4] = disable_ga4
   navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request)
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   show_ukraine_cta = navigation.show_ukraine_cta?
   ga4_tracking_counts = OpenStruct.new(index_section_count: 0)
   ga4_tracking_counts.index_section_count = 1 if show_ukraine_cta

diff --git a/app/views/govuk_publishing_components/components/_details.html.erb b/app/views/govuk_publishing_components/components/_details.html.erb
@@ -1,14 +1,12 @@
 <%
   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
   @ga4[:index_section] += 1 unless disable_ga4
   ga4_attributes ||= {}
-
-  margin_bottom ||= 3
+  local_assigns[:margin_bottom] ||= 3
 
   unless disable_ga4
     ga4_event = {
@@ -25,7 +23,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)

diff --git a/app/views/govuk_publishing_components/components/_document_list.html.erb b/app/views/govuk_publishing_components/components/_document_list.html.erb
@@ -2,15 +2,13 @@
   add_gem_component_stylesheet("document-list")
 
   local_assigns[:margin_bottom] ||= 5
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   items ||= []
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-document-list")
   component_helper.add_class("gem-c-document-list--no-top-border") if local_assigns[:remove_top_border]
   component_helper.add_class("gem-c-document-list--no-top-border-first-child") if local_assigns[:remove_top_border_from_first_child]
   component_helper.add_class("gem-c-document-list--equal-item-spacing") if local_assigns[:equal_item_spacing]
-  component_helper.add_class(shared_helper.get_margin_bottom)
 
   extra_link_classes = "govuk-link--no-underline" if local_assigns[:remove_underline]
   title_with_context_class = " gem-c-document-list__item-title--context"

diff --git a/app/views/govuk_publishing_components/components/_govspeak.html.erb b/app/views/govuk_publishing_components/components/_govspeak.html.erb
@@ -6,13 +6,11 @@
   direction_class = "gem-c-govspeak--direction-#{direction}" if local_assigns.include?(:direction)
   disable_youtube_expansions = local_assigns.fetch(:disable_youtube_expansions) if local_assigns.include?(:disable_youtube_expansions)
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-govspeak govuk-govspeak")
   component_helper.add_class(direction_class) if direction_class
   component_helper.add_class("js-disable-youtube") if disable_youtube_expansions
   component_helper.add_class("gem-c-govspeak--inverse") if inverse
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_data_attribute({ module: "govspeak" })
 %>
 <%= tag.div(**component_helper.all_attributes) do %>

diff --git a/app/views/govuk_publishing_components/components/_heading.html.erb b/app/views/govuk_publishing_components/components/_heading.html.erb
@@ -13,7 +13,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)

diff --git a/app/views/govuk_publishing_components/components/_hint.html.erb b/app/views/govuk_publishing_components/components/_hint.html.erb
@@ -4,14 +4,11 @@
   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 %>
   <%= text %>
 <% end %>
diff --git a/app/views/govuk_publishing_components/components/_inset_text.html.erb b/app/views/govuk_publishing_components/components/_inset_text.html.erb
@@ -3,17 +3,15 @@
 
   id ||= "inset-text-#{SecureRandom.hex(4)}"
   margin_top ||= 6
-  margin_bottom ||= 6
+  local_assigns[:margin_bottom] ||= 6
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({
     margin_top: margin_top,
-    margin_bottom: margin_bottom
   })
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-inset-text govuk-inset-text gem-c-force-print-link-styles-within")
   component_helper.add_class(shared_helper.get_margin_top)
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.set_id(id)
 %>
 <%= tag.div(**component_helper.all_attributes) do %>

diff --git a/app/views/govuk_publishing_components/components/_lead_paragraph.html.erb b/app/views/govuk_publishing_components/components/_lead_paragraph.html.erb
@@ -3,12 +3,10 @@
 
   text ||= ""
   inverse ||= false
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-lead-paragraph")
   component_helper.add_class("gem-c-lead-paragraph--inverse") if inverse
-  component_helper.add_class(shared_helper.get_margin_bottom) if [*0..9].include?(local_assigns[:margin_bottom])
 %>
 <% if text.present? %>
   <%= tag.p(**component_helper.all_attributes) do %>

diff --git a/app/views/govuk_publishing_components/components/_metadata.html.erb b/app/views/govuk_publishing_components/components/_metadata.html.erb
@@ -16,8 +16,6 @@
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-metadata")
   component_helper.add_class("direction-#{direction}") if local_assigns.include?(:direction)
@@ -27,7 +25,6 @@
     component_helper.add_class("gem-c-metadata--inverse-padded") unless inverse_compress
   end
 
-  component_helper.add_class(shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
   component_helper.add_data_attribute({ module: "metadata" })
 
   disable_ga4 ||= false

diff --git a/app/views/govuk_publishing_components/components/_notice.html.erb b/app/views/govuk_publishing_components/components/_notice.html.erb
@@ -15,10 +15,8 @@
   show_banner_title ||= false
   heading_level = show_banner_title ? "h3" : "h2"
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-notification-banner gem-c-notice")
-  component_helper.add_class(shared_helper.get_margin_bottom)
 
   component_helper.add_aria_attribute({ label: "Notice" })
   component_helper.add_aria_attribute({ live: "polite" }) if aria_live

diff --git a/app/views/govuk_publishing_components/components/_password_input.html.erb b/app/views/govuk_publishing_components/components/_password_input.html.erb
@@ -2,7 +2,7 @@
   add_gem_component_stylesheet("password-input")
 
   label_text ||= t("components.password_input.label")
-
+  local_assigns[:margin_bottom] ||= 3
   error_text ||= nil
   error_text_prefix ||= t("components.password_input.error_text_prefix")
 
@@ -15,7 +15,6 @@
 
   name ||= "password"
 
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_data_attribute({
     module: "govuk-password-input",
@@ -30,7 +29,6 @@
   component_helper.add_class('govuk-form-group--error') if error_text
   component_helper.add_class('govuk-password-input')
   component_helper.add_class('gem-c-password-input')
-  component_helper.add_class(shared_helper.get_margin_bottom)
 
   uid = SecureRandom.hex(4)
 

diff --git a/app/views/govuk_publishing_components/components/_radio.html.erb b/app/views/govuk_publishing_components/components/_radio.html.erb
@@ -31,7 +31,6 @@
   hint ||= nil
   error_message ||= nil
   error_items ||= []
-  margin_bottom = margin_bottom ||= 6
 
   has_error = error_message || error_items.any?
   hint_id = "hint-#{SecureRandom.hex(4)}" if hint
@@ -40,7 +39,6 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-form-group")
   component_helper.add_class("govuk-form-group--error") if has_error
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.set_id(id)
 
   radio_classes = %w(govuk-radios)

diff --git a/app/views/govuk_publishing_components/components/_signup_link.html.erb b/app/views/govuk_publishing_components/components/_signup_link.html.erb
@@ -12,7 +12,6 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-signup-link govuk-!-display-none-print")
-  component_helper.add_class(shared_helper.get_margin_bottom)
   component_helper.add_class("gem-c-signup-link--link-only") unless heading
   component_helper.add_class("gem-c-signup-link--with-background-and-border") if background
 %>

diff --git a/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb b/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
@@ -1,18 +1,17 @@
 <%
   add_gem_component_stylesheet("single-page-notification-button")
 
+  local_assigns[:margin_bottom] ||= 3
+
   spnb_helper = GovukPublishingComponents::Presenters::SinglePageNotificationButtonHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
 
-  wrapper_classes = %w(govuk-!-display-none-print)
-  wrapper_classes << shared_helper.get_margin_bottom
-
   ga4_data_attributes = ga4_data_attributes ||= nil
   ga4_link_data_attributes = ga4_data_attributes[:ga4_link] if ga4_data_attributes
   ga4_link_data_attributes[:url] = spnb_helper.form_action if ga4_link_data_attributes
 
-  component_helper.add_class(wrapper_classes.join(" "))
+  component_helper.add_class("govuk-!-display-none-print")
   component_helper.add_data_attribute({ module: ga4_data_attributes[:module] }) if ga4_data_attributes
 %>
 <% button_text = capture do %>

diff --git a/docs/component-wrapper-helper.md b/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)
@@ -67,6 +68,7 @@ The component wrapper includes several methods to make managing options easier,
   data_attributes ||= {}
   aria_attributes ||= {}
   role ||= nil
+  local_assigns[:margin_bottom] ||= 4
 
   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
@@ -78,6 +80,7 @@ The component wrapper includes several methods to make managing options easier,
   component_helper.set_open(true) # can pass true or false
   component_helper.set_tabindex(1)
   component_helper.set_dir("rtl")
+  component_helper.set_margin_bottom(3) # can pass any number from 1 to 9
 %>
 <%= tag.div(**component_helper.all_attributes) do %>
   component content

diff --git a/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb b/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?
+
+        ((@options[:classes] ||= "") << " govuk-!-margin-bottom-#{@options[:margin_bottom]}").strip! if @options[:margin_bottom]
         attributes[:class] = @options[:classes] unless @options[:classes].blank?
+
         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?
 

diff --git a/spec/components/details_spec.rb b/spec/components/details_spec.rb
@@ -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}\']'