govuk_publishing_components 14.0.0 → 15.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e30d0cf4decdb2a30acb643fd344d2c838e1b95dfd2de61fa50b09c6ab445af3
-  data.tar.gz: 7b30092265431a6b3f3af79ca0dec674d84f9330025b157c92aed3e3a85e915e
+  metadata.gz: 23c88deb6d387134dbbd3b685859363b74ead59e037184c74a58130e36a2dff1
+  data.tar.gz: 8defeb9c30b3c1e5f50a39b25e2b4a59c74b119dfcfd88b342cf7c140ea81df2
 SHA512:
-  metadata.gz: 719b37c68fce9e3975c95d7aad65d65eb2c7095f0737854fbc215e83ee6add078cc819d08d7094b04bbc1dcc9a6f5926ab390b844ba0a1d97454021a5df86845
-  data.tar.gz: 2b0cc16fb9a17120f29f30c66e92ad5db85cb04161ead518ebe057570c76eb6401a9e42f555f31078b0a42ea01d13e9776336dc3607fd973d17d26fbe442055e
+  metadata.gz: 9186c00000ffd5aefd70e72229c038a8dbbfcaeec112b966c3fc50aca4e90eef3ca24f5f28cd057b8af8368819d01daa2c68cbddafecdd59a15d3bda9ab6bc22
+  data.tar.gz: e9194364870a3c2039dfe6e577991561c81fb1a6ab50a489579259651068267a89db9615b2882646f8f9560eb72fcf11baf54733c932000cc93051f6ee02a071

data/app/assets/javascripts/component_guide/accessibility-test.js

@@ -132,15 +132,53 @@
         var activeElParent = _findParent(activeEl, '[data-module="test-a11y"]')
         var wrapper = activeElParent.querySelector(resultContainerSelector)
 
-        if (wrapper) {
-          var resultHTML = '<h3>(' + result.id + ') ' + result.summary + ' <a href="' + result.url + '">(see guidance)</a></h3>' +
-          '<p>' + selectorObj.reasons.join('<br />') + '</p>' +
-          '<p>Element can be found using the selector:<br /><span class="selector">' +
-          selectorObj.selector +
-          '</span></p>'
-
-          wrapper.insertAdjacentHTML('beforeend', resultHTML)
+        if (!wrapper) {
+          return
         }
+
+        // Section to announce the overall problem.
+        var headerNodeLink = document.createElement('a')
+        headerNodeLink.href = result.url
+        headerNodeLink.textContent = "(see guidance)"
+
+        var headerNode = document.createElement('h3')
+        headerNode.textContent = result.summary + ' (' + result.id + ') '
+        headerNode.appendChild(headerNodeLink)
+
+        // Section to explain the reasons
+        var reasonsListNode = document.createElement('ul')
+        selectorObj.reasons.forEach(function (reason) {
+          var listItemNode = document.createElement('li')
+          listItemNode.textContent = reason
+          reasonsListNode.appendChild(listItemNode)
+        })
+
+        var reasonsHeaderNode = document.createElement('h4')
+        reasonsHeaderNode.textContent = 'Possible reasons why:'
+
+        var reasonsNode = document.createElement('div')
+        reasonsNode.appendChild(reasonsHeaderNode)
+        reasonsNode.appendChild(reasonsListNode)
+
+        // Section to help find the element
+        var findHeader = document.createElement('h4')
+        findHeader.textContent = 'Element can be found using the selector:'
+
+        var findSelectorNode = document.createElement('span')
+        findSelectorNode.className = 'selector' 
+        findSelectorNode.textContent = selectorObj.selector
+        
+        var findNode = document.createElement('p')
+        findNode.appendChild(findHeader)
+        findNode.appendChild(findSelectorNode)
+
+        // Put all the sections together
+        var resultHTML = document.createElement('div')
+        resultHTML.appendChild(headerNode)
+        resultHTML.appendChild(reasonsNode)
+        resultHTML.appendChild(findNode)
+
+        wrapper.appendChild(resultHTML)
       })
     })
   }

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

@@ -23,6 +23,28 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         }
       });
 
+      $(scope).find('input[type=checkbox]').on('change', function(e) {
+        if (GOVUK.analytics && GOVUK.analytics.trackEvent) {
+          var $checkbox = $(e.target);
+          var category = $checkbox.data("track-category");
+          if (typeof category !== "undefined") {
+            var isChecked = $checkbox.is(":checked");
+            var uncheckTrackCategory = $checkbox.data("uncheck-track-category");
+            if (!isChecked && typeof uncheckTrackCategory !== "undefined") {
+              category = uncheckTrackCategory;
+            }
+            var action = $checkbox.data("track-action");
+            var options = $checkbox.data("track-options");
+            if (typeof options !== 'object' || options === null) {
+              options = {};
+            }
+            options['value'] = $checkbox.data("track-value");
+            options['label'] = $checkbox.data("track-label");
+            GOVUK.analytics.trackEvent(category, action, options);
+          }
+        }
+      });
+
     };
 
     this.toggleNestedCheckboxes = function(scope, checkbox) {

data/app/assets/stylesheets/component_guide/application.scss

@@ -172,12 +172,9 @@
     display: none;
   }
 
-  h3 {
-    @include govuk-font($size: 19, $weight: bold);
-  }
-
   p,
-  h3 {
+  h3,
+  h4 {
     margin-top: 0;
     margin-bottom: $govuk-gutter / 2;
   }
@@ -190,6 +187,13 @@
     margin-top: $govuk-gutter;
   }
 
+  ul {
+    margin: 0;
+    padding: 0;
+    padding-left: 1em;
+    margin-bottom: 1em;
+  }
+
   .selector {
     font-style: italic;
   }

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

@@ -114,7 +114,7 @@ examples:
         - label: "Blue"
           value: "blue"
   checkboxes_with_data_attributes:
-    description: Data attributes such as tracking can be applied if required. Note that for a checkbox this will not fire tracking events automatically, so if you want your tracking to work you'll need to write some tracking Javascript in the app around the component to detect it.
+    description: Data attributes such as tracking can be applied if required. This will fire tracking identical tracking events on check and uncheck. See below to send different events on uncheck.
     data:
       name: "With tracking"
       items:
@@ -129,6 +129,23 @@ examples:
               dimension29: "Tracked"
             }
           }
+  checkboxes_with_data_attributes_and_custom_uncheck_event_category:
+    description: It can send a different tracking event category for an uncheck. This is handled automatically
+    data:
+      name: "With tracking and a custom uncheck category"
+      items:
+        - label: "Tracked"
+          value: "tracked"
+          data_attributes: {
+            track_category: "checkboxClicked",
+            untrack_category: "checkboxUnchecked",
+            track_label: "/news-and-communications",
+            track_action: "news",
+            track_options: {
+              dimension28: 2,
+              dimension29: "Tracked"
+            }
+          }
   with_aria_controls_attributes:
     description: Aria controls attributes are applied to the checkboxes only if Javascript is enabled.
     data:

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

@@ -279,10 +279,6 @@ examples:
           <li>تابعنا باللغة العربية عبر</li>
           <li>تابعنا باللغة العربية عبر تويتر </li>
         </ul>
-  with_bold_unstyled:
-    data:
-      block: |
-        <p>This content has <strong>text in strong tags</strong>, but they are not styled as bold</p>
   with_youtube_embed:
     data:
       block: |

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '14.0.0'.freeze
+  VERSION = '15.0.0'.freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 14.0.0
+  version: 15.0.0
 platform: ruby
 authors:
 - GOV.UK Dev