govuk_publishing_components 21.63.0 → 21.63.1

data/app/assets/javascripts/govuk_publishing_components/dependencies.js

@@ -9,9 +9,4 @@ $(document).ready(function () {
   'use strict'
 
   window.GOVUK.modules.start()
-
-  // Static has a Toggle module in here we have a GemToggle module, we can't
-  // easily change govspeak to use GemToggle but we can use the GemToggle module
-  var gemToggle = new window.GOVUK.Modules.GemToggle()
-  gemToggle.start($('[data-module=toggle]'))
 })

data/app/assets/javascripts/govuk_publishing_components/lib.js

@@ -1 +1,2 @@
+// = require_tree ./vendor/polyfills/
 // = require_tree ./lib

data/app/assets/javascripts/govuk_publishing_components/lib/toggle.js

@@ -1,15 +1,14 @@
-/* eslint-env jquery */
 /*
   Toggle the display of elements
 
-  Use as follows:
+  Basic use:
 
   <div data-module="gem-toggle">
-    <a href="#" data-controls="target" data-expanded="true">
-      Show more
+    <a href="#" data-controls="target1" data-expanded="false">
+      Show/hide
     </a>
-    <div id="target">
-      Content to be toggled
+    <div id="target1" class="js-hidden">
+      Content hidden on page load
     </div>
   </div>
 
@@ -22,89 +21,151 @@
   the `js-hidden` class to the element you wish to hide in
   your template, the module will not do this for you.
 
-  `data-controls` can contain more than one element, space
-  separated.
-
   Use `data-toggle-class` on the parent element to set the
   class that is toggled. Defaults to `js-hidden`.
 
+  Content shown by default:
+
+  <div data-module="gem-toggle">
+    <a href="#" data-controls="target2" data-expanded="true">
+      Show/hide
+    </a>
+    <div id="target2">
+      Content shown on page load
+    </div>
+  </div>
+
+  Change text when clicked:
+
+  <div data-module="gem-toggle">
+    <a href="#" data-controls="target3" data-expanded="true" data-toggled-text="Show more">
+      Show less
+    </a>
+    <div id="target3">
+      Content shown on page load, toggle text changes depending on state
+    </div>
+  </div>
+
   Use `data-toggled-text` on the trigger element to set the
   text shown when the element is toggled. Defaults to not
   changing.
 
+  Show/hide multiple elements:
+
+  <div data-module="gem-toggle">
+    <a href="#" data-controls="target4 target5" data-expanded="false">
+      Show/hide
+    </a>
+    <div id="target4" class="js-hidden">
+      Content hidden on page load
+    </div>
+    <div id="target5" class="js-hidden">
+      Content hidden on page load
+    </div>
+  </div>
+
+  `data-controls` can contain more than one element, space
+  separated.
+
+  With tracking:
+
+  <div data-module="gem-toggle">
+    <a href="#" data-controls="target6" data-expanded="true" data-track-category="category" data-track-action="action" data-toggled-text="Show more">
+      Show less
+    </a>
+    <div id="target6">
+      Content shown on page load, tracked when expanded and collapsed
+    </div>
+  </div>
+
   Use `data-track-category` and `data-track-action` together
-  to enable analytics on the element. The label will be
+  to enable analytics on the element. The track label will be
   determined based on the text present within the element
   at the time it was clicked.
 */
-
+window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
-
-  Modules.GemToggle = function () {
-    this.start = function ($el) {
-      var toggleSelector = '[data-controls][data-expanded]'
-      var toggleClass = $el.attr('data-toggle-class') || 'js-hidden'
-      var trackable = '[data-track-category][data-track-action]'
-
-      $el.on('click', toggleSelector, toggle)
-      $el.find(toggleSelector).each(addAriaAttrs)
-
-      // Add the ARIA attributes with JavaScript
-      // If the JS fails and there's no interactive elements, having
-      // no aria attributes is an accurate representation.
-      function addAriaAttrs () {
-        var $toggle = $(this)
-        $toggle.attr('role', 'button')
-        $toggle.attr('aria-controls', $toggle.data('controls'))
-        $toggle.attr('aria-expanded', $toggle.data('expanded'))
-
-        var $targets = getTargetElements($toggle)
-        $targets.attr('aria-live', 'polite')
-        $targets.attr('role', 'region')
-        $toggle.data('$targets', $targets)
-      }
+  function GemToggle () { }
 
-      function toggle (event) {
-        var $toggle = $(event.target)
-        var expanded = $toggle.attr('aria-expanded') === 'true'
-        var $targets = $toggle.data('$targets')
-
-        if (expanded) {
-          $toggle.attr('aria-expanded', false)
-          $targets.addClass(toggleClass)
-        } else {
-          $toggle.attr('aria-expanded', true)
-          $targets.removeClass(toggleClass)
-        }
+  GemToggle.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$module.toggleTrigger = this.$module.querySelector('[data-controls][data-expanded]')
 
-        var toggledText = $toggle.data('toggled-text')
-        if (typeof toggledText === 'string') {
-          $toggle.data('toggled-text', $toggle.text())
-          $toggle.text(toggledText)
-        }
+    if (this.$module.toggleTrigger) {
+      this.$module.toggleClass = this.$module.getAttribute('data-toggle-class') || 'js-hidden'
 
-        if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent && $toggle.is(trackable)) {
-          track($toggle)
-        }
+      this.$module.isTrackable = this.$module.toggleTrigger.hasAttribute('data-track-category') && this.$module.toggleTrigger.hasAttribute('data-track-action')
 
-        event.preventDefault()
+      if (this.$module.isTrackable) {
+        this.$module.trackCategory = this.$module.toggleTrigger.getAttribute('data-track-category')
+        this.$module.trackAction = this.$module.toggleTrigger.getAttribute('data-track-action')
       }
 
-      function getTargetElements ($toggle) {
-        var ids = $toggle.attr('aria-controls').split(' ')
-        var selector = '#' + ids.join(', #')
+      this.addAriaAttrs()
+      this.toggleOnClick()
+    }
+  }
+
+  // Add the ARIA attributes with JavaScript
+  // If the JS fails and there's no interactive elements, having
+  // no aria attributes is an accurate representation.
+  GemToggle.prototype.addAriaAttrs = function () {
+    this.$module.toggleTrigger.setAttribute('role', 'button')
+    this.$module.toggleTrigger.setAttribute('aria-controls', this.$module.toggleTrigger.getAttribute('data-controls'))
+    this.$module.toggleTrigger.setAttribute('aria-expanded', this.$module.toggleTrigger.getAttribute('data-expanded'))
+    this.$module.targets = this.getTargetElements()
+
+    for (var i = 0; i < this.$module.targets.length; i++) {
+      this.$module.targets[i].setAttribute('aria-live', 'polite')
+      this.$module.targets[i].setAttribute('role', 'region')
+    }
+  }
 
-        return $el.find(selector)
+  GemToggle.prototype.getTargetElements = function () {
+    var ids = this.$module.toggleTrigger.getAttribute('aria-controls').split(' ')
+    var selector = '#' + ids.join(', #')
+
+    return this.$module.querySelectorAll(selector)
+  }
+
+  GemToggle.prototype.toggleOnClick = function () {
+    var that = this
+
+    this.$module.toggleTrigger.addEventListener('click', function (event) {
+      event.preventDefault()
+      var expanded = this.getAttribute('aria-expanded') === 'true'
+
+      if (expanded) {
+        this.setAttribute('aria-expanded', false)
+        for (var i = 0; i < that.$module.targets.length; i++) {
+          that.$module.targets[i].classList.add(that.$module.toggleClass)
+        }
+      } else {
+        this.setAttribute('aria-expanded', true)
+        for (var j = 0; j < that.$module.targets.length; j++) {
+          that.$module.targets[j].classList.remove(that.$module.toggleClass)
+        }
       }
 
-      function track ($toggle) {
-        var options = { label: $toggle.data('toggled-text') || $toggle.text() }
+      var toggledText = this.getAttribute('data-toggled-text')
 
-        window.GOVUK.analytics.trackEvent($toggle.data('track-category'), $toggle.data('track-action'), options)
+      if (typeof toggledText === 'string') {
+        this.setAttribute('data-toggled-text', this.innerText)
+        this.innerText = toggledText
       }
-    }
+
+      if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent && that.$module.isTrackable) {
+        that.track()
+      }
+    })
   }
+
+  GemToggle.prototype.track = function () {
+    var options = { label: this.$module.toggleTrigger.getAttribute('data-toggled-text') || this.$module.toggleTrigger.innerText }
+    window.GOVUK.analytics.trackEvent(this.$module.trackCategory, this.$module.trackAction, options)
+  }
+
+  Modules.GemToggle = GemToggle
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/closest.js

@@ -0,0 +1,23 @@
+// https://plainjs.com/javascript/traversing/get-closest-element-by-selector-39/
+// matches polyfill
+this.Element && function(ElementPrototype) {
+  ElementPrototype.matches = ElementPrototype.matches ||
+  ElementPrototype.matchesSelector ||
+  ElementPrototype.webkitMatchesSelector ||
+  ElementPrototype.msMatchesSelector ||
+  function(selector) {
+    var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
+    while (nodes[++i] && nodes[i] != node);
+    return !!nodes[i];
+  }
+}(Element.prototype);
+
+// closest polyfill
+this.Element && function(ElementPrototype) {
+  ElementPrototype.closest = ElementPrototype.closest ||
+  function(selector) {
+    var el = this;
+    while (el.matches && !el.matches(selector)) el = el.parentNode;
+    return el.matches ? el : null;
+  }
+}(Element.prototype);

data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/indexOf.js

@@ -0,0 +1,9 @@
+// https://gist.github.com/heathcliff/7161329
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(obj, start) {
+    for (var i = (start || 0), j = this.length; i < j; i++) {
+      if (this[i] === obj) { return i }
+    }
+    return -1
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_panel.scss

@@ -9,6 +9,12 @@
   @include govuk-font($size: 24, $weight: bold);
 }
 
-.gem-c-panel__prepend ~ .govuk-panel__title {
+.gem-c-panel__prepend ~ .govuk-panel__title-text {
   margin-bottom: govuk-spacing(3);
 }
+
+.gem-c-panel__append,
+.gem-c-panel__prepend,
+.govuk-panel__title-text {
+  display: block;
+}

data/app/views/govuk_publishing_components/component_guide/example.html.erb

@@ -12,7 +12,10 @@
     <div class="component-markdown">
       <%= raw(@component_example.html_description) %>
     </div>
-    <h2 class="component-doc-h2">How it looks</h2>
+    <h2 class="component-doc-h2">
+      How it looks
+      <small>(<a href="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
+    </h2>
     <%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, example: @component_example } %>
 
     <h2 class="component-doc-h2">How to call this example</h2>

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -29,7 +29,9 @@
     </div>
   </div>
 
-  <h2 class="component-doc-h2">How it looks
+  <h2 class="component-doc-h2">
+    <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
+    <small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
     <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
   </h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>

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

@@ -66,7 +66,7 @@
   </div>
 
   <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1">
-    <p class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></p>
+    <p class="gem-c-cookie-banner__confirmation-message" role="alert"><%= confirmation_message %></p>
     <button class="gem-c-cookie-banner__hide-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide</button>
   </div>
 </div>

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

@@ -4,22 +4,24 @@
   append ||= false
 %>
 <div class="gem-c-panel govuk-panel govuk-panel--confirmation">
-  <% if prepend %>
-    <div class="gem-c-panel__prepend">
-      <%= prepend %>
-    </div>
-  <% end %>
   <h2 class="govuk-panel__title">
-    <%= title %>
+    <% if prepend %>
+      <span class="gem-c-panel__prepend">
+        <%= prepend %>
+      </span>
+    <% end %>
+    <span class="govuk-panel__title-text">
+      <%= title %>
+    </span>
+    <% if append %>
+      <span class="gem-c-panel__append">
+        <%= append %>
+      </span>
+    <% end %>
   </h2>
   <% if description %>
     <div class="govuk-panel__body">
       <%= description %>
     </div>
   <% end %>
-  <% if append %>
-    <div class="gem-c-panel__append">
-      <%= append %>
-    </div>
-  <% end %>
 </div>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "21.63.0".freeze
+  VERSION = "21.63.1".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.63.0
+  version: 21.63.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-21 00:00:00.000000000 Z
+date: 2020-08-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -430,6 +430,8 @@ files:
 - app/assets/javascripts/govuk_publishing_components/vendor/json2.js
 - app/assets/javascripts/govuk_publishing_components/vendor/magna-charta.min.js
 - app/assets/javascripts/govuk_publishing_components/vendor/modernizr.js
+- app/assets/javascripts/govuk_publishing_components/vendor/polyfills/closest.js
+- app/assets/javascripts/govuk_publishing_components/vendor/polyfills/indexOf.js
 - app/assets/stylesheets/component_guide/application.scss
 - app/assets/stylesheets/component_guide/print.scss
 - app/assets/stylesheets/govuk_publishing_components/_all_components.scss