govuk_publishing_components 21.63.0 → 21.65.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/_action-link.scss

@@ -4,13 +4,13 @@
   &:before {
     content: "";
     display: table-cell;
-    width: 50px;
+    width: 60px;
     height: 45px;
     background: image-url("govuk_publishing_components/action-link-arrow.png");
     background: image-url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;
     background-position: 0 50%;
-    background-size: 37px auto;
+    background-size: 45px auto;
   }
 
   @include govuk-media-query($until: tablet) {
@@ -141,6 +141,12 @@
   }
 }
 
+.gem-c-action-link--transparent-icon {
+  &:before {
+    background-image: image-url("govuk_publishing_components/action-link-arrow--transparent.svg");
+  }
+}
+
 .gem-c-action-link--nhs {
   &:before {
     width: 80px;

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

@@ -13,6 +13,7 @@
   dark_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
+  transparent_icon ||= false
   data ||= nil
   classes ||= nil
 
@@ -20,6 +21,7 @@
   css_classes << "gem-c-action-link--light-text" if light_text
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
   css_classes << "gem-c-action-link--small-icon" if small_icon
+  css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--with-subtext" if subtext

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/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 %>
 

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

@@ -2,12 +2,16 @@
   size ||= ""
   no_border ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(gem-c-search gem-c-search--on-white)
+  classes = %w(gem-c-search)
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
   classes << "gem-c-search--large" if size == 'large'
   classes << "gem-c-search--no-border" if no_border
-  classes << "gem-c-search--on-govuk-blue" if local_assigns[:on_govuk_blue].eql?(true)
+  if local_assigns[:on_govuk_blue].eql?(true)
+    classes << "gem-c-search--on-govuk-blue"
+  else
+    classes << "gem-c-search--on-white"
+  end
   classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label)
 
   value ||= ""

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

@@ -28,7 +28,7 @@
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <div class="<%= classes %>" data-module="track-click">
+  <h2 class="<%= classes %>" data-module="track-click">
     <span class="gem-c-step-nav-header__part-of">Part of</span>
     <% if path %>
       <a href="<%= path %>"
@@ -51,5 +51,5 @@
         <%= title %>
       </span>
     <% end %>
-  </div>
+  </h2>
 <% end %>

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

@@ -36,6 +36,14 @@ examples:
       light_text: true
     context:
       dark_background: true
+  with_transparent_svg:
+    data:
+      text: Find out what you need to do
+      href: "/page"
+      light_text: true
+      transparent_icon: true
+    context:
+      dark_background: true
   with_subtext:
     data:
       text: Emergency something