govuk_publishing_components 21.62.0 → 21.64.0

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/_breadcrumbs.scss

@@ -21,37 +21,24 @@
   border-color: govuk-colour("white");
 }
 
-.gem-c-breadcrumbs--collapse-on-mobile {
+.govuk-breadcrumbs--collapse-on-mobile {
   @include govuk-media-query($until: tablet) {
-    .govuk-breadcrumbs__list {
-      display: flex;
-    }
-
-    .govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
-      display: none;
-    }
-
     .govuk-breadcrumbs__list-item {
       padding-top: 14px;
       padding-bottom: 14px;
     }
 
     .govuk-breadcrumbs__list-item:before {
-      margin: 0;
       top: 18px;
     }
 
-    .govuk-breadcrumbs__link {
-      position: relative;
-    }
-
     .govuk-breadcrumbs__link:after {
       content: "";
       position: absolute;
-      top: -14px;
+      top: 0;
       right: 0;
       left: 0;
-      bottom: -14px;
+      bottom: 0;
     }
   }
 }

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/_breadcrumbs.html.erb

@@ -5,7 +5,7 @@
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
   classes = "gem-c-breadcrumbs govuk-breadcrumbs"
-  classes << " gem-c-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
+  classes << " govuk-breadcrumbs--collapse-on-mobile" if collapse_on_mobile
   classes << " gem-c-breadcrumbs--inverse" if inverse
 %>
 

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/_document_list.html.erb

@@ -33,6 +33,7 @@
               item[:link][:path],
               data: item[:link][:data_attributes],
               class: "#{item_classes} gem-c-document-list__item-link",
+              lang: item[:link][:locale].presence
             )
           else
             content_tag(
@@ -54,16 +55,24 @@
 
         <% if item[:metadata] %>
           <ul class="gem-c-document-list__item-metadata">
-            <% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %>
-              <li class="gem-c-document-list__attribute">
-                <% if item_metadata_key.to_s.eql?("public_updated_at") %>
-                  <time datetime="<%= item_metadata_value.iso8601 %>">
-                    <%= l(item_metadata_value, format: '%e %B %Y') %>
-                  </time>
-                <% else %>
-                  <%= item_metadata_value %>
+            <% item[:metadata].compact.each do |item_metadata_key, item_metadata_value| %> 
+              <% if !item_metadata_key.to_s.eql?("locale") %>
+                <% lang = item[:metadata][:locale].present? && item[:metadata][:locale][item_metadata_key].present? ? item[:metadata][:locale][item_metadata_key] : nil %>
+
+                <%= content_tag(
+                  :li, item_metadata_value,
+                  class: "gem-c-document-list__attribute",
+                  lang: lang
+                ) do %>
+                  <% if item_metadata_key.to_s.eql?("public_updated_at") %>
+                    <time datetime="<%= item_metadata_value.iso8601 %>">
+                      <%= l(item_metadata_value, format: '%e %B %Y') %>
+                    </time>
+                  <% else %>
+                    <%= item_metadata_value %>
+                  <% end %>
                 <% end %>
-              </li>
+              <% end %>
             <% end %>
           </ul>
         <% end %>

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/app/views/govuk_publishing_components/components/_radio.html.erb

@@ -53,7 +53,9 @@
           <%= tag.h1 heading, class: "gem-c-radio__heading-text govuk-fieldset__heading" %>
         <% end %>
       <% else %>
-        <%= tag.legend heading, class: legend_classes %>
+        <%= tag.legend class: legend_classes do %>
+          <%= tag.h2 heading, class: "govuk-fieldset__heading" %>
+        <% end %>
       <% end %>
     <% end %>