govuk_publishing_components 16.3.0 → 16.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7de582bec1d26ce7c56c59a6226ca8d296ab0a8390efb28e85fa823dfa9024e3
-  data.tar.gz: 5c988a37b2b5fd7dadb27b1fe0fc3bf6bfef1c3c81d8d58cc7811650586ed8de
+  metadata.gz: 85a25b42cf4c9b620303d39b346c9ea2e42e9ba2f8d373b59d9febc60860347e
+  data.tar.gz: af180304e40cf20db078384c3f1df96e39e7afc8ac82ad700f3443dce494a818
 SHA512:
-  metadata.gz: d520f4706524c562ba1f6bcd35a1944e2cb505e6a65aca1e911703bfa0c6ff6e33f7c43c972f9f6b266136c0b43e4b994dff2d011c4f42457b82cb012a393e78
-  data.tar.gz: 20197ed4c32a708246d284b4a24cc553435b3b9dd0b0aac8718967b136b00ec04674df152c482689138cbdfee782063d3f079f74b0c89b3e32f4d495d6bbfb65
+  metadata.gz: 36dcb8adefe3b347dda4fdfdb90ad0c68bd4e59869b836cec495a9a0cd622de9395b8f9730ac899b1c709da1874d0131f93da6e4a3d30e8d069f4d81d4d146e3
+  data.tar.gz: 97364626b0268892fa386e6fde4fff548fa7a71e6419d9421e4edbe252d7d9755b9f65fc29cff699f4cddd459b268c9dbb2de10bd22b25da67834eb832dc84f1

data/app/assets/javascripts/govuk_publishing_components/components/modal-dialogue.js

@@ -0,0 +1,92 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ModalDialogue () { }
+
+  ModalDialogue.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$dialogBox = this.$module.querySelector('.gem-c-modal-dialogue__box')
+    this.$closeButton = this.$module.querySelector('.gem-c-modal-dialogue__close-button')
+    this.$body = document.querySelector('body')
+
+    this.$module.open = this.handleOpen.bind(this)
+    this.$module.close = this.handleClose.bind(this)
+    this.$module.focusDialog = this.handleFocusDialog.bind(this)
+    this.$module.boundKeyDown = this.handleKeyDown.bind(this)
+
+    var $triggerElement = document.querySelector(
+      '[data-toggle="modal"][data-target="' + this.$module.id + '"]'
+    )
+
+    if ($triggerElement) {
+      $triggerElement.addEventListener('click', this.$module.open)
+    }
+
+    if (this.$closeButton) {
+      this.$closeButton.addEventListener('click', this.$module.close)
+    }
+  }
+
+  ModalDialogue.prototype.handleOpen = function (event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    this.$body.classList.add('app-o-template__body--modal')
+    this.$body.classList.add('app-o-template__body--blur')
+    this.$focusedElementBeforeOpen = document.activeElement
+    this.$module.style.display = 'block'
+    this.$dialogBox.focus()
+
+    document.addEventListener('keydown', this.$module.boundKeyDown, true)
+  }
+
+  ModalDialogue.prototype.handleClose = function (event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    this.$body.classList.remove('app-o-template__body--modal')
+    this.$body.classList.remove('app-o-template__body--blur')
+    this.$module.style.display = 'none'
+    this.$focusedElementBeforeOpen.focus()
+
+    document.removeEventListener('keydown', this.$module.boundKeyDown, true)
+  }
+
+  ModalDialogue.prototype.handleFocusDialog = function () {
+    this.$dialogBox.focus()
+  }
+
+  // while open, prevent tabbing to outside the dialogue
+  // and listen for ESC key to close the dialogue
+  ModalDialogue.prototype.handleKeyDown = function (event) {
+    var KEY_TAB = 9
+    var KEY_ESC = 27
+
+    switch (event.keyCode) {
+      case KEY_TAB:
+        if (event.shiftKey) {
+          if (document.activeElement === this.$dialogBox) {
+            event.preventDefault()
+            this.$closeButton.focus()
+          }
+        } else {
+          if (document.activeElement === this.$closeButton) {
+            event.preventDefault()
+            this.$dialogBox.focus()
+          }
+        }
+
+        break
+      case KEY_ESC:
+        this.$module.close()
+        break
+      default:
+        break
+    }
+  }
+
+  Modules.ModalDialogue = ModalDialogue
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -54,6 +54,7 @@
 @import "components/layout-header";
 @import "components/lead-paragraph";
 @import "components/metadata";
+@import "components/modal-dialogue";
 @import "components/notice";
 @import "components/organisation-logo";
 @import "components/panel";

data/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss

@@ -0,0 +1,137 @@
+$govuk-modal-margin: govuk-spacing(6);
+$govuk-modal-close-button-size: 44px;
+$govuk-modal-z-index: 1000;
+$govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $govuk-border-width-form-element * 2;
+
+.gem-c-modal-dialogue {
+  display: none;
+  position: fixed;
+  z-index: $govuk-modal-z-index;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  outline: 0;
+}
+
+.gem-c-modal-dialogue__box {
+  display: block;
+  position: fixed;
+  background: govuk-colour('white');
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  border: 0;
+
+  @include govuk-font($size: 19);
+  @include govuk-text-colour;
+  @include govuk-focusable;
+  @include govuk-media-query($from: tablet) {
+    position: relative;
+    top: inherit;
+    right: inherit;
+    bottom: inherit;
+    left: inherit;
+    width: auto;
+    max-width: $govuk-page-width * 2 / 3;
+    height: auto;
+    margin: $govuk-modal-margin auto;
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+  }
+}
+
+.gem-c-modal-dialogue__box--wide {
+  @include govuk-media-query($from: tablet) {
+    max-width: $govuk-page-width;
+  }
+
+  @include govuk-media-query($from: tablet, $until: $govuk-modal-wide-breakpoint) {
+    margin: $govuk-modal-margin;
+  }
+}
+
+.gem-c-modal-dialogue__overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: .8;
+  background: govuk-colour("black");
+  pointer-events: none;
+  touch-action: none;
+}
+
+.app-o-template__body--modal {
+  overflow: hidden;
+}
+
+.app-o-template__body--blur {
+  .govuk-skip-link,
+  .govuk-header,
+  .govuk-phase-banner,
+  .govuk-width-container .govuk-back-link,
+  .govuk-footer,
+  .govuk-main-wrapper {
+    filter: blur(2px);
+  }
+}
+
+.gem-c-modal-dialogue__header {
+  padding: 8px govuk-spacing(3) 10px;
+  color: govuk-colour("white");
+  background: govuk-colour("black");
+}
+
+.gem-c-modal-dialogue__logotype-crown {
+  fill: currentColor;
+  vertical-align: middle;
+}
+
+.gem-c-modal-dialogue__logotype-crown-fallback-image {
+  width: 30px;
+  height: 26px;
+  border: 0;
+  vertical-align: middle;
+}
+
+.gem-c-modal-dialogue__content {
+  padding: govuk-spacing(3);
+  background: govuk-colour("white");
+}
+
+.gem-c-modal-dialogue__close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: $govuk-modal-close-button-size;
+  height: $govuk-modal-close-button-size;
+  border: 0;
+  color: govuk-colour("white");
+  background: none;
+  cursor: pointer;
+
+  @include govuk-focusable-fill;
+  @include govuk-font($size: 36, $weight: bold, $line-height: 1.3);
+  @include govuk-media-query($until: tablet) {
+    font-size: 36px;
+    line-height: 1.3;
+  }
+
+  &:focus,
+  &:hover {
+    outline: none;
+    color: govuk-colour("black");
+    background: $govuk-focus-colour;
+  }
+}

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

@@ -5,6 +5,7 @@
   describedby ||= nil
   controls ||= nil
   data ||= nil
+  autocomplete ||= nil
 
   label ||= nil
   hint ||= nil
@@ -65,6 +66,7 @@
       id: id,
       type: type,
       data: data,
+      autocomplete: autocomplete,
       tabindex: tabindex,
       autofocus: autofocus,
       readonly: readonly,

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

@@ -0,0 +1,21 @@
+<%
+  id ||= "modal-dialogue-#{SecureRandom.hex(4)}"
+  wide ||= false
+%>
+<div class="gem-c-modal-dialogue" data-module="modal-dialogue" id="<%= id %>">
+  <div class="gem-c-modal-dialogue__overlay"></div>
+  <dialog class="gem-c-modal-dialogue__box <%= 'gem-c-modal-dialogue__box--wide' if wide %>"
+    aria-modal="true" role="dialogue" tabindex="0">
+    <div class="gem-c-modal-dialogue__header">
+      <svg role="presentation" focusable="false" class="gem-c-modal-dialogue__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="26" width="30">
+        <path fill="currentColor" fill-rule="evenodd"
+          d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+        <image src="<%= asset_path('govuk-logotype-crown.png') %>" class="gem-c-modal-dialogue__logotype-crown-fallback-image"></image>
+      </svg>
+    </div>
+    <div class="gem-c-modal-dialogue__content">
+      <%= yield %>
+    </div>
+    <button class="gem-c-modal-dialogue__close-button" aria-label="Close modal dialogue">&times;</button>
+  </dialog>
+</div>

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

@@ -103,3 +103,10 @@ examples:
       name: "name"
       value: "You can't type more"
       maxlength: 10
+  with_autocomplete:
+    data:
+      label:
+        text: "Automatically complete the field with a user's email address (in supporting browsers)"
+      name: "name"
+      type: "email"
+      autocomplete: "email"

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

@@ -0,0 +1,71 @@
+name: Modal dialogue (experimental)
+description: Shows only one section, with no other navigation options, until the user finishes the immediate task
+body: |
+  Use where the application has gotten into a state from which it shouldn’t or can’t proceed without input from the user or the state of the current page needs to be preserved.
+
+  In a document-centric application, for instance, adding an inline image might need the user to supply an image file, alternative text, caption and credits if not using an existing image. In other context, the user may need to search for a specific item before proceeding.
+
+  Modal instances are automatically initialised and their state can be changed programmatically using bounded functions (e.g. `$modalDialogue.open()` and `$modalDialogue.close()`)
+accessibility_criteria: |
+  The modal dialogue box must:
+
+  - receive focus on open
+  - inform the user that it is a dialogue
+  - provide a heading that says what the dialogue is about
+  - prevent mouse clicks outside the dialogue while open
+  - prevent scrolling the page while the dialogue is open
+  - prevent tabbing to outside the dialogue while open
+  - can be operable with a keyboard (allows the ESC key to close the dialogue)
+  - return focus to last focused element on close
+
+examples:
+  default:
+    embed: |
+      <button class="govuk-button" data-toggle="modal" data-target="modal-default">Open modal</button>
+      <%= component %>
+    data:
+      id: modal-default
+      block: |
+        <h1 class="govuk-heading-l">Modal title</h1>
+        <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
+  wide:
+    description: |
+      A wide version of the modal dialogue will provide the same width with the main container
+    embed: |
+      <button class="govuk-button" data-toggle="modal" data-target="modal-wide">Open wide modal</button>
+      <%= component %>
+    data:
+      id: modal-wide
+      wide: true
+      block: |
+        <h1 class="govuk-heading-l">Modal title</h1>
+          <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
+  with_form:
+    description: |
+      Modal dialogue with form elements inside to show how it prevents tabbing to outside the dialogue when open while preserving the tabindex on focusable elements
+    embed: |
+      <button class="govuk-button" data-toggle="modal" data-target="modal-with-form">Open modal with form</button>
+      <%= component %>
+    data:
+      id: modal-with-form
+      block: |
+        <h1 class="govuk-heading-l">Search contacts</h1>
+          <label class="govuk-label govuk-visually-hidden" for="contacts">Search contacts</label>
+          <div class="govuk-form-group"><input class="govuk-input" id="contacts"></div>
+          <button class="govuk-button">Insert contact</button>
+
+  with_large_content:
+    description: |
+      Modal dialogue with a large block content to show how the modal scrolls withing the page and how it prevents scrolling the page while the dialogue is open
+    embed: |
+      <button class="govuk-button" data-toggle="modal" data-target="modal-with-large-content">Open modal with large content</button>
+      <%= component %>
+    data:
+      id: modal-with-large-content
+      block: |
+        <h1 class="govuk-heading-l">Modal title</h1>
+          <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
+          <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
+          <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
+          <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
+          <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>

data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb

@@ -29,6 +29,7 @@
         },
         name: "email_survey_signup[email_address]",
         type: "email",
+        autocomplete: "email",
         describedby: "survey_explanation"
       } %>
 

data/lib/govuk_publishing_components/presenters/services.rb

@@ -5,7 +5,7 @@ module GovukPublishingComponents
     # @private
     module Services
       def self.rummager
-        @rummager ||= GdsApi::Rummager.new(Plek.find('rummager'))
+        @rummager ||= GdsApi::Rummager.new(Plek.find('search'))
       end
     end
   end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '16.3.0'.freeze
+  VERSION = '16.4.0'.freeze
 end

data/node_modules/accessible-autocomplete/package.json

@@ -49,7 +49,7 @@
     "/"
   ],
   "_resolved": "git://github.com/alphagov/accessible-autocomplete.git#0c518b4fa79b9a95b544410858486ed9e6403c84",
-  "_shasum": "fcf4cf6ffe9da73ee14f542d647bf55106594b07",
+  "_shasum": "fa8269e50fd703ac8e130d8c9196b5a52745214e",
   "_shrinkwrap": null,
   "_spec": "accessible-autocomplete@git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
   "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",

data/node_modules/govuk-frontend/all.js

@@ -1303,13 +1303,14 @@ if (detect) return
  */
 
 var KEY_SPACE = 32;
+var DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
+var debounceFormSubmitTimer = null;
 
 function Button ($module) {
   this.$module = $module;
 }
 
 /**
-* Add event handler for KeyDown
 * if the event target element has a role='button' and the event is key space pressed
 * then it prevents the default event and triggers a click event
 * @param {object} event event
@@ -1325,12 +1326,36 @@ Button.prototype.handleKeyDown = function (event) {
   }
 };
 
+/**
+* If the click quickly succeeds a previous click then nothing will happen.
+* This stops people accidentally causing multiple form submissions by
+* double clicking buttons.
+*/
+Button.prototype.debounce = function (event) {
+  var target = event.target;
+  // Check the button that is clicked on has the preventDoubleClick feature enabled
+  if (target.getAttribute('data-prevent-double-click') !== 'true') {
+    return
+  }
+
+  // If the timer is still running then we want to prevent the click from submitting the form
+  if (debounceFormSubmitTimer) {
+    event.preventDefault();
+    return false
+  }
+
+  debounceFormSubmitTimer = setTimeout(function () {
+    debounceFormSubmitTimer = null;
+  }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
+};
+
 /**
 * Initialise an event listener for keydown at document level
 * this will help listening for later inserted elements with a role="button"
 */
 Button.prototype.init = function () {
   this.$module.addEventListener('keydown', this.handleKeyDown);
+  this.$module.addEventListener('click', this.debounce);
 };
 
 /**