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 index 027da23ec3..c0aedc7557 100644 --- 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,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 %> - <%= text %> + <%= component_helper.button_text %> <% end %> -<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: data_attributes do %> - +<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %> + <%= 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 %> diff --git a/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml b/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml index f5eca9cf57..fc0f8b7d56 100644 --- a/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml +++ b/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' diff --git a/lib/govuk_publishing_components.rb b/lib/govuk_publishing_components.rb index feb8ddc854..27258dfc23 100644 --- a/lib/govuk_publishing_components.rb +++ b/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" diff --git a/spec/components/single_page_notification_button_spec.rb b/spec/components/single_page_notification_button_spec.rb index a6c1525117..f38041b24c 100644 --- a/spec/components/single_page_notification_button_spec.rb +++ b/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