WIP

app/assets/stylesheets/govuk_publishing_components/components/_button.scss

@@ -2,20 +2,12 @@
 @import "govuk/components/button/button";
 
 // Because govuk-frontend adds a responsive bottom margin by default for each component
-// we reset it to zero so we can set it separately using `gem-c-button--bottom-margin`
+// we reset it to zero so we can set it separately using margin classes
 // If we decide to use responsive margins consistently across components we can remove this
 .gem-c-button {
   margin-bottom: 0;
 }
 
-// this will be moved and extended into a model for general component spacing
-// once this has been decided upon and other work completed, see:
-// https://trello.com/c/KEkNsxG3/142-3-implement-customisable-spacing-for-components
-.gem-c-button--bottom-margin,
-.gem-c-button__info-text--bottom-margin {
-  @include responsive-bottom-margin;
-}
-
 .gem-c-button--inline {
   display: block;
   width: 100%;

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

@@ -1,26 +1,19 @@
 <%
   add_gem_component_stylesheet("button")
 
-  disable_ga4 ||= false
-  local_assigns[:type] ||= "submit" unless local_assigns[:href].present?
-  text ||= ""
-
-  # shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  # local_assigns[:classes] = shared_helper.classes
   button = GovukPublishingComponents::Presenters::ButtonHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class(button.classes)
   component_helper.set_margin_bottom(0) if local_assigns[:info_text]
   component_helper.add_data_attribute({ module: "govuk-button" }) if local_assigns[:href]
-
-  # if margin_bottom && !info_text
-  #   margin_class = get_margin_bottom(margin_bottom, false)
-  #   css_classes << margin_class
-  # end
+  component_helper.add_data_attribute({ ga4_attributes: button.ga4_attributes })
+  component_helper.set_type(button.type)
+  component_helper.add_aria_attribute({ labelledby: button.aria_labelledby })
+  component_helper.set_draggable("false") if local_assigns[:href]
 %>
 <% start_button_text = capture do %>
   <span>
-    <%= text %>
+    <%= button.text %>
   </span>
   <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false" aria-hidden="true">
     <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
@@ -31,7 +24,7 @@
   if button.start
     button_text = start_button_text
   else
-    button_text = text
+    button_text = button.text
   end
 %>
 

lib/govuk_publishing_components/presenters/button_helper.rb

@@ -4,12 +4,13 @@ module GovukPublishingComponents
   module Presenters
     class ButtonHelper
       attr_reader :href,
-                  # :text,
+                  :text,
                   :title,
                   :info_text,
                   :info_text_classes,
                   :rel,
                   :data_attributes,
+                  :ga4_attributes,
                   :margin_bottom,
                   :id,
                   :inline_layout,
@@ -24,13 +25,14 @@ class ButtonHelper
                   :value,
                   :classes,
                   :aria_label,
+                  :aria_labelledby,
                   :aria_controls,
                   :aria_describedby
 
       def initialize(local_assigns)
         @disable_ga4 = local_assigns[:disable_ga4]
         @href = local_assigns[:href]
-        # @text = local_assigns[:text]
+        @text = local_assigns[:text]
         @title = local_assigns[:title]
         @info_text = local_assigns[:info_text]
         @info_text_classes = %w[gem-c-button__info-text]
@@ -46,7 +48,8 @@ def initialize(local_assigns)
         @target = local_assigns[:target]
         @type = button_type(local_assigns[:type])
         @start = local_assigns[:start]
-        @data_attributes[:ga4_attributes] = ga4_attribute if start
+        # @data_attributes[:ga4_attributes] = ga4_attribute if start
+        @ga4_attributes = ga4_attribute if start
         @secondary = local_assigns[:secondary]
         @secondary_quiet = local_assigns[:secondary_quiet]
         @secondary_solid = local_assigns[:secondary_solid]
@@ -59,6 +62,7 @@ def initialize(local_assigns)
         @info_text_id = "info-text-id-#{SecureRandom.hex(4)}"
         @button_id = "button-id-#{SecureRandom.hex(4)}"
         @aria_controls = local_assigns[:aria_controls]
+        @aria_labelledby = aria_labelledby
         @aria_describedby = local_assigns[:aria_describedby]
       end
 
@@ -90,8 +94,8 @@ def html_options
         options[:role] = "button" if link?
         # options[:type] = button_type
         options[:id] = @button_id if info_text?
-        options[:aria] = { labelledby: aria_labelledby }
-        options[:rel] = rel if rel
+        # options[:aria] = { labelledby: aria_labelledby }
+        # options[:rel] = rel if rel
         options[:data] = data_attributes if data_attributes
         options[:title] = title if title
         options[:target] = target if target

spec/components/button_spec.rb

@@ -107,21 +107,10 @@ def component_name
   end
 
   it "renders info text with margin bottom" do
-    render_component(text: "Start now", info_text: "Information text", margin_bottom: true)
-
-    assert_select ".gem-c-button--bottom-margin", count: 0
-
-    assert_select ".govuk-button", text: "Start now"
-    assert_select ".gem-c-button__info-text.gem-c-button__info-text--bottom-margin", text: "Information text"
-  end
-
-  it "renders info text with variable margin bottom" do
-    render_component(text: "Start now", info_text: "Information text", margin_bottom: 6)
-
-    assert_select ".gem-c-button--bottom-margin", count: 0
-
-    assert_select ".govuk-button", text: "Start now"
-    assert_select '.gem-c-button__info-text.govuk-\!-margin-bottom-6', text: "Information text"
+    render_component(text: "Start now", info_text: "Information text", margin_bottom: 2)
+    assert_select '.gem-c-button.govuk-\!-margin-bottom-2', count: 0
+    assert_select ".gem-c-button", text: "Start now"
+    assert_select '.gem-c-button__info-text.govuk-\!-margin-bottom-2', text: "Information text"
   end
 
   it "renders rel attribute correctly" do