Refactoring and changes for analytics

- move much of the logic from the component into a helper
- amend code for analytics: when there is more than one button on a
  page, there is a requirement to differentiate between them

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

@@ -1,31 +1,17 @@
 <%
-  page ||= ''
-  data_attributes ||= {}
-  base_path ||= nil
-  local_assigns[:margin_bottom] ||= 3
-  already_subscribed ||= false
-  js_enhancement ||= false
-  text ||= already_subscribed ? t('components.single_page_notification_button.unsubscribe_text') : t('components.single_page_notification_button.subscribe_text')
-
+  component_helper = GovukPublishingComponents::Presenters::SinglePageNotificationButtonHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   wrapper_classes = %w(gem-c-single-page-notification-button govuk-!-display-none-print)
   wrapper_classes << shared_helper.get_margin_bottom
-  classes = "govuk-body-s gem-c-single-page-notification-button__submit"
-  module_names = %w(gem-track-click)
-  module_names << "single-page-notification-button" if js_enhancement
-
-  data_attributes[:module] = module_names.join(" ")
-  data_attributes[:category] = "Single-page-notification-button"
-  data_attributes[:action] = already_subscribed ? "Unsubscribe button" : "Subscribe button"
-  data_attributes[:label] = base_path if base_path
 %>
 <% button_text = capture do %>
-  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= text %>
+  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
 <% end %>
-<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: data_attributes do %>
-  <input type="hidden" name="base_path" value="<%= base_path %>">
+<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+  <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
   <%= content_tag(:button, button_text, {
-    class: classes,
+    class: "govuk-body-s gem-c-single-page-notification-button__submit",
     type: "submit",
   }) %>
-<% end if base_path.presence %>
+<% end if component_helper.base_path %>

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

@@ -24,7 +24,7 @@ examples:
     data:
       base_path: '/current-page-path'
       data_attributes:
-        category: fancyButtons
+        test_attribute: "testing"
   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 of 15px.
@@ -37,3 +37,13 @@ examples:
     data:
       base_path: '/current-page-path'
       js_enhancement: true
+  with_button_location:
+    description: |
+      When there is more than one button on a page, we should specify their location so that Analytics can differentiate between them.
+
+      The location should have one of two values: "top-of-page" or "bottom-of-page".
+
+      When this parameter is passed, its value is reflected in the `data-action` attribute (i.e "Unsubscribe-button-top-of-page"). When the flag is not present, `data-action` defaults to "Subscribe button" or "Unsubscribe button", depending on the state of the button.
+    data:
+      base_path: '/current-page-path'
+      button_location: 'top-of-page'

lib/govuk_publishing_components.rb

@@ -33,6 +33,7 @@
 require "govuk_publishing_components/presenters/organisation_logo_helper"
 require "govuk_publishing_components/presenters/highlight_boxes_helper"
 require "govuk_publishing_components/presenters/taxonomy_list_helper"
+require "govuk_publishing_components/presenters/single_page_notification_button_helper"
 
 require "govuk_publishing_components/app_helpers/taxon_breadcrumbs"
 require "govuk_publishing_components/app_helpers/table_helper"

spec/components/single_page_notification_button_spec.rb

@@ -51,12 +51,42 @@ def component_name
 
   it "has correct attributes for tracking by default" do
     render_component({ base_path: "/the-current-page" })
-    assert_select ".gem-c-single-page-notification-button[data-category='Single-page-notification-button'][data-action='Subscribe button'][data-label='/the-current-page']"
+    assert_select ".gem-c-single-page-notification-button[data-category='Single-page-notification-button'][data-action='Subscribe-button'][data-label='/the-current-page']"
   end
 
   it "has correct attributes for tracking when already_subscribed is true" do
     render_component({ base_path: "/the-current-page", already_subscribed: true })
 
-    assert_select ".gem-c-single-page-notification-button[data-category='Single-page-notification-button'][data-action='Unsubscribe button'][data-label='/the-current-page']"
+    assert_select ".gem-c-single-page-notification-button[data-category='Single-page-notification-button'][data-action='Unsubscribe-button'][data-label='/the-current-page']"
+  end
+
+  it "has the correct default data-action for tracking when button_location is top-of-page" do
+    render_component({ base_path: "/the-current-page", button_location: "top-of-page" })
+
+    assert_select ".gem-c-single-page-notification-button[data-action='Subscribe-button-top-of-page']"
+  end
+
+  it "has the correct data-action for tracking when button_location is top-of-page and already_subscribed is true" do
+    render_component({ base_path: "/the-current-page", button_location: "top-of-page", already_subscribed: true })
+
+    assert_select ".gem-c-single-page-notification-button[data-action='Unsubscribe-button-top-of-page']"
+  end
+
+  it "has the correct default data-action for tracking when button_location is bottom-of-page" do
+    render_component({ base_path: "/the-current-page", button_location: "bottom-of-page" })
+
+    assert_select ".gem-c-single-page-notification-button[data-action='Subscribe-button-bottom-of-page']"
+  end
+
+  it "has the correct data-action for tracking when button_location is bottom-of-page and already_subscribed is true" do
+    render_component({ base_path: "/the-current-page", button_location: "bottom-of-page", already_subscribed: true })
+
+    assert_select ".gem-c-single-page-notification-button[data-action='Unsubscribe-button-bottom-of-page']"
+  end
+
+  it "has the correct data-action for tracking when button_location has an invalid value" do
+    render_component({ base_path: "/the-current-page", button_location: "this is unacceptable" })
+
+    assert_select ".gem-c-single-page-notification-button[data-action='Subscribe-button']"
   end
 end