govuk_publishing_components 13.5.1 → 13.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1b34a6949ab633d2531b0d2b43093f2167cb8bbeecb8cedd5a2e2486e322b18
-  data.tar.gz: e5dce48bed5ecfa808cfab9e469c62beb347227cf1d8c2b4fa517a50a40f8319
+  metadata.gz: db548793e2560002edb6bc2ac4fc0cf0fbcb48342d76c008de00f7b4e3519b4e
+  data.tar.gz: 7ff2b9a1602ed29bc5badfc740ec73cc615d0659c38d5441595d0b78b0a5ee68
 SHA512:
-  metadata.gz: 82593b0c529ce2ae628682419c080d671adb1abbf7f6b1e920ea5f6b416b052e623c0d570f30b10e26c887b43141a5171082eac87338e009bf2460ee0ad92b92
-  data.tar.gz: 9dac6d34ca45f7b69ed4da321bcca12196229ccf42f23fb3cf0cce2100e7d3f29ad4764135aaa6b158dd363faff634a70910a71c61769b4156d32d0f97e5973e
+  metadata.gz: 2f0a65ebf42f6cbbe6cf61b1e0be7b51964d4d6ab0219b2fae6a2b30f4f1d0cf8995722afbdb5098e0ca0b7f38a5fca9648a8592dba73850e44cda849f1105f5
+  data.tar.gz: 3fd2cc7380e755078aa4da8fa86a0af6cc9bd83144944f0cb1d154e4e363491ecb1278a5543d3c2f8abaedce4f3ddc8997d75f96bdaf77356eebea72cde9933a

data/app/assets/javascripts/govuk_publishing_components/components/select.js

@@ -0,0 +1,50 @@
+window.GOVUK = window.GOVUK || {};
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict';
+
+  Modules.TrackSelectChange = function () {
+    this.start = function (element) {
+      element.change(function(e) {
+        var selectedOption = $(this).find(":selected");
+        var trackable = '[data-track-category][data-track-action]';
+
+        if (selectedOption.is(trackable)) {
+          fireTrackingChange(selectedOption);
+        }
+      });
+
+      function fireTrackingChange(element) {
+        var options = {transport: 'beacon'},
+            category = element.attr('data-track-category'),
+            action = element.attr('data-track-action'),
+            label = element.attr('data-track-label'),
+            value = element.attr('data-track-value'),
+            dimension = element.attr('data-track-dimension'),
+            dimensionIndex = element.attr('data-track-dimension-index'),
+            extraOptions = element.attr('data-track-options');
+
+        if (label) {
+          options.label = label;
+        }
+
+        if (value) {
+          options.value = value;
+        }
+
+        if (dimension && dimensionIndex) {
+          options['dimension' + dimensionIndex] = dimension;
+        }
+
+        if (extraOptions) {
+          $.extend(options, JSON.parse(extraOptions));
+        }
+
+        if (GOVUK.analytics && GOVUK.analytics.trackEvent) {
+          GOVUK.analytics.trackEvent(category, action, options);
+        }
+      };
+    };
+  };
+})(window.GOVUK.Modules);

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

@@ -18,6 +18,7 @@
         select_tag(
           id,
           options_for_select(options, selected_option),
+          class: "govuk-select",
           data: data_attributes
         )
       %>

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

@@ -4,13 +4,14 @@
   label ||= false
 
   select_helper = GovukPublishingComponents::Presenters::SelectHelper.new(options)
+  data_module = "data-module=track-select-change" unless select_helper.data_tracking?.eql?(false)
 %>
 <% if options.any? && id && label %>
   <div class="govuk-form-group gem-c-select">
     <label class="govuk-label" for="<%= id %>">
       <%= label %>
     </label>
-    <select class="govuk-select" id="<%= id %>" name="<%= id %>">
+    <select class="govuk-select" id="<%= id %>" name="<%= id %>" <%= data_module %> >
       <%= options_for_select(select_helper.option_markup, select_helper.selected_option) %>
     </select>
   </div>

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

@@ -13,7 +13,7 @@ examples:
     data:
       label:
         text: 'Countries'
-      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us']]
+      options: [['', ''], ['France', 'fr'], ['Germany', 'de'], ['Sweden', 'se'], ['Switzerland', 'ch'], ['United Kingdom', 'gb'], ['United States', 'us'], ['The Separate Customs Territory of Taiwan, Penghu, Kinmen, and Matsu (Chinese Taipei)', 'tw']]
   with_unique_identifier:
     data:
       id: 'unique-autocomplete'

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

@@ -31,25 +31,52 @@ examples:
         selected: true
       - text: 'Option three'
         value: 'option3'
-  with_data_attributes:
-    description: Data attributes can be added to the option elements of the select. Note that the component will not do anything with them - Javascript will have to be added in the application that uses the component, for example to fire tracking events.
+  with_tracking:
+    description: 'Tracking can be enabled on the select component by passing a minimum of data_track_category and data_track_action. Other tracking attributes are optional. Note: tracking events do not currently fire within the component guide.'
     data:
       id: 'dropdown3'
-      label: 'With data attributes'
+      label: 'With tracking enabled'
       options:
       - text: 'Option one'
         value: 'option1'
         data_attributes:
-          track_category: "hello"
-          something_else: "moo"
+          track_category: 'relatedLinkClicked'
+          track_action: 1.1
+          track_label: '/link-1'
+          track_options:
+            dimension28: 1
+            dimension29: 'Link 1'
       - text: 'Option two'
         value: 'option2'
+        data_attributes:
+          track_category: 'relatedLinkClicked'
+          track_action: 1.2
+          track_label: '/link-2'
+          track_options:
+            dimension28: 2
+            dimension29: 'Link 2'
       - text: 'Option three'
         value: 'option3'
         data_attributes:
-          track_category: 'navDocumentCollectionLinkClicked'
-          track_action: 1.1
-          track_label: '/government/publications/parental-responsibility-measures-for-behaviour-and-attendance'
+          track_category: 'relatedLinkClicked'
+          track_action: 1.3
+          track_label: '/link-3'
           track_options:
-            dimension28: 2
-            dimension29: 'School behaviour and attendance: parental responsibility measures'
+            dimension28: 3
+            dimension29: 'Link 3'
+  with_data_attributes:
+    description: Other data attributes can be passed to the component if needed.
+    data:
+      id: 'dropdown4'
+      label: 'With data attributes'
+      options:
+      - text: 'Option one'
+        value: 'option1'
+        data_attributes:
+          another_attribute: "attribute 1"
+          something_else: "attribute 2"
+      - text: 'Option two'
+        value: 'option2'
+      - text: 'Option three'
+        value: 'option3'
+

data/lib/govuk_publishing_components/presenters/select.rb

@@ -8,6 +8,10 @@ module GovukPublishingComponents
         @option_markup = get_options
       end
 
+      def data_tracking?
+        @options.any? { |item| item[:data_attributes] && item[:data_attributes][:track_category] && item[:data_attributes][:track_action] }
+      end
+
     private
 
       def get_options
@@ -31,6 +35,7 @@ module GovukPublishingComponents
           key_name = "data-#{key.to_s.split('_').join('-')}"
           attrs[key_name] = value.is_a?(Hash) ? value.to_json : value
         end
+
         attrs
       end
     end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '13.5.1'.freeze
+  VERSION = '13.5.2'.freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 13.5.1
+  version: 13.5.2
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -316,6 +316,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/feedback.js
 - app/assets/javascripts/govuk_publishing_components/components/initial-focus.js
 - app/assets/javascripts/govuk_publishing_components/components/radio.js
+- app/assets/javascripts/govuk_publishing_components/components/select.js
 - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
 - app/assets/javascripts/govuk_publishing_components/dependencies.js
 - app/assets/javascripts/govuk_publishing_components/lib/current-location.js