govuk_publishing_components 27.13.0 → 27.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 21c2a281f7de0f79303971394f9cad3102533d7e619f660809078457687552ce
-  data.tar.gz: b246c494a88448ab43d2d2230c12a918b2107eda3217f4f44754ee5b2ef0f4de
+  metadata.gz: 59c59e65f1434263c7e36d4d89029083fe241185daba81730010af5b865ccabc
+  data.tar.gz: c4b9a4d0a73f9e0dd3068aeade2e04565e2d69b4739c9dc00c3a820c631089b3
 SHA512:
-  metadata.gz: a1a5354695ffc567bfa7547af429dfdfa0145e8c009408a4a8200731e2677f883922b228dd4d3623770483ba704eafecfe68c1a895bf2dc6b978ac3da59b5c7c
-  data.tar.gz: 344cee88bde5f7c64393028e7020dc62b62eb8794b568b05ecbf94746bb94381bf44cba4627332d8475fadb49cbdc1f79f51598bd7c7194c17eb157a925a0176
+  metadata.gz: 46b643cba9fcd36653300e4a11679f882eb1f1b5482e4811c38f580e6ad4526c60a3d2f61ecf9a4df13f5abef2c9d4b954ae4cec959159efced1c011b9dd458f
+  data.tar.gz: cd46ecdd5268be36578fecef171b2b86e7b000c750fbcc9e9000a51485e58559d14d9c9a32e9e623fff757f58559a90bab99f68aa87159bedc9737e3b29d082b

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -0,0 +1,48 @@
+/* global XMLHttpRequest */
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function SinglePageNotificationButton ($module) {
+    this.$module = $module
+    this.basePath = this.$module.querySelector('input[name="base_path"]').value
+    this.buttonLocation = this.$module.getAttribute('data-button-location')
+
+    this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath
+    // This attribute is passed through to the personalisation API to ensure the updated button has the same button_location for analytics
+    if (this.buttonLocation) this.personalisationEndpoint += '&button_location=' + this.buttonLocation
+  }
+
+  SinglePageNotificationButton.prototype.init = function () {
+    var xhr = new XMLHttpRequest()
+    xhr.open('GET', this.personalisationEndpoint, true)
+
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        var responseText = xhr.responseText
+        // if response text exists and is JSON parse-able, parse the response and get the button html
+        if (responseText && this.responseIsJSON(responseText)) {
+          var newButton = JSON.parse(responseText).button_html
+          var html = document.createElement('div')
+          html.innerHTML = newButton
+          // test that the html returned contains the button component; if yes, swap the button for the updated version
+          var responseHasButton = html.querySelector('form.gem-c-single-page-notification-button .gem-c-single-page-notification-button__submit')
+          if (responseHasButton) {
+            this.$module.outerHTML = newButton
+          }
+        }
+      }
+    }.bind(this)
+    xhr.send()
+  }
+
+  SinglePageNotificationButton.prototype.responseIsJSON = function (string) {
+    try {
+      JSON.parse(string)
+    } catch (e) {
+      return false
+    }
+    return true
+  }
+  Modules.SinglePageNotificationButton = SinglePageNotificationButton
+})(window.GOVUK.Modules)

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

@@ -1,23 +1,17 @@
 <%
-  page ||= ''
-  data_attributes ||= {}
-  base_path ||= nil
-  local_assigns[:margin_bottom] ||= 3
-  already_subscribed ||= 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"
 %>
 <% 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 %>

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

@@ -1,9 +1,10 @@
 name: Single page notification button
 description: A button that subscribes the user to email notifications to a page
 body: |
-  By default, the component displays with the "Get emails about this page" state. The component does not render without the `base_path` parameter.
+  By default, the component displays with the "Get emails about this page" state.
+  If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
 
-  The `base_path` is necessary for [checking if an email subscription is active on page load](https://github.com/alphagov/account-api/blob/main/docs/api.md#get-apipersonalisationcheck-email-subscriptiontopic_slug) and the creation/deletion of an email notification subscription.
+  The component does not render without the `base_path` parameter. The `base_path` is necessary for [checking if an email subscription is active on page load](https://github.com/alphagov/account-api/blob/main/docs/api.md#get-apipersonalisationcheck-email-subscriptiontopic_slug) and the creation/deletion of an email notification subscription.
 
   When the button is clicked, the `base_path` is submitted to an endpoint which proceeds to check the user's authentication status and whether they are already subscribed to the page or not. Depending on these factors, they will be routed accordingly.
 accessibility_criteria: |
@@ -23,10 +24,27 @@ 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.
     data:
       base_path: '/current-page-path'
       margin_bottom: 5
+  with_js_enhancement:
+    description: |
+      If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
+    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" or "bottom".
+
+      When this parameter is passed, its value is reflected in the `data-action` attribute (i.e "Unsubscribe-button-top"). 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'
+      js_enhancement: true
+      button_location: 'top'

data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb

@@ -0,0 +1,40 @@
+module GovukPublishingComponents
+  module Presenters
+    class SinglePageNotificationButtonHelper
+      attr_reader :already_subscribed, :data_attributes, :base_path, :js_enhancement, :button_type, :button_location
+
+      def initialize(local_assigns)
+        @local_assigns = local_assigns
+        @data_attributes = @local_assigns[:data_attributes] || {}
+        @js_enhancement = @local_assigns[:js_enhancement] || false
+        @already_subscribed = @local_assigns[:already_subscribed] || false
+        @base_path = @local_assigns[:base_path] || nil
+        @button_location = button_location_is_valid? ? @local_assigns[:button_location] : nil
+        @button_type = @local_assigns[:already_subscribed] ? "Unsubscribe" : "Subscribe"
+      end
+
+      def data
+        module_names = %w[gem-track-click]
+        module_names << "single-page-notification-button" if js_enhancement
+
+        @data_attributes[:label] = base_path
+        # data-action for tracking should have the format of e.g. "Unsubscribe-button-top", or "Subscribe-button-bottom"
+        # when button_location is not present data-action will fall back to "Unsubscribe-button"/"Subscribe-button"
+        @data_attributes[:action] = [button_type, "button", button_location].compact.join("-")
+        @data_attributes[:module] = module_names.join(" ")
+        @data_attributes[:category] = "Single-page-notification-button"
+        # This attribute is passed through to the personalisation API to ensure when a new button is returned from the API, it has the same button_location
+        @data_attributes[:button_location] = button_location
+        @data_attributes
+      end
+
+      def button_location_is_valid?
+        %w[bottom top].include? @local_assigns[:button_location]
+      end
+
+      def button_text
+        @already_subscribed ? I18n.t("components.single_page_notification_button.unsubscribe_text") : I18n.t("components.single_page_notification_button.subscribe_text")
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.13.0".freeze
+  VERSION = "27.14.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -33,6 +33,7 @@ require "govuk_publishing_components/presenters/intervention_helper"
 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"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.13.0
+  version: 27.14.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-11-17 00:00:00.000000000 Z
+date: 2021-11-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -501,6 +501,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/radio.js
 - app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js
 - app/assets/javascripts/govuk_publishing_components/components/show-password.js
+- app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
 - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
 - app/assets/javascripts/govuk_publishing_components/components/tabs.js
 - app/assets/javascripts/govuk_publishing_components/dependencies.js
@@ -968,6 +969,7 @@ files:
 - lib/govuk_publishing_components/presenters/schema_org.rb
 - lib/govuk_publishing_components/presenters/select.rb
 - lib/govuk_publishing_components/presenters/shared_helper.rb
+- lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb
 - lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb
 - lib/govuk_publishing_components/presenters/subscription_links_helper.rb
 - lib/govuk_publishing_components/presenters/taxonomy_list_helper.rb