govuk_publishing_components 12.0.0 → 12.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ee32f536043a1a2f64756b001e8461fc1d9c1115224355d5c4df4e5e85345fb
-  data.tar.gz: ab008670e129c580ad58822896f218a3d310aba562ffa9bbad94e1ddc2cada38
+  metadata.gz: c7e628f695d27fab28cdd1c5f3ccd9f4cc64072f74d99632161415be96e071f7
+  data.tar.gz: f149159545b6d352235327dd5e1a07c9871085aed4c6eac8daec15422dd868ca
 SHA512:
-  metadata.gz: 478e64833260a3752fe680760bdfcb1b227ac8cd9cf3cacb53de5e76d8a2fc4588b1d631f223029c033e47caae2eba1abd667faf544b9b288a177fc354ba3039
-  data.tar.gz: f58a472db124e4eef3ec5f79c1087d2e112d22d4150b80cf98ba2e5d030861ad2718655c91e48835a67bdec4da05089c4fb05fac938398d3f850b2aeb09d460b
+  metadata.gz: ce62ca884692de80d481d60233ff466647d93999fb212c11d0315ca1efc1ef6febd7861dd84a57fb98d003a93ccb953da76a40342d9f7d92786fd21470b90966
+  data.tar.gz: 12db548d533afd3a89629d351840613cb4e88e46c2492bfcb6656450d4937153219a39c977f85f64e95bf2e57cf4c83e3313e370ebedef35e4229267b98b9783

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -2,6 +2,7 @@
   color: $gem-text-colour;
   padding: $gem-spacing-scale-3;
   border: $gem-border-width-mobile solid $gem-success-colour;
+  margin-bottom: $gem-spacing-scale-4;
 
   @include media(tablet) {
     padding: $gem-spacing-scale-4;

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '12.0.0'.freeze
+  VERSION = '12.0.1'.freeze
 end

data/node_modules/govuk-frontend/all.js

@@ -1236,6 +1236,188 @@ Details.prototype.destroy = function (node) {
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+function CharacterCount ($module) {
+  this.$module = $module;
+  this.$textarea = $module.querySelector('.js-character-count');
+}
+
+CharacterCount.prototype.defaults = {
+  characterCountAttribute: 'data-maxlength',
+  wordCountAttribute: 'data-maxwords'
+};
+
+// Initialize component
+CharacterCount.prototype.init = function () {
+  // Check for module
+  var $module = this.$module;
+  var $textarea = this.$textarea;
+  if (!$textarea) {
+    return
+  }
+
+  // Read options set using dataset ('data-' values)
+  this.options = this.getDataset($module);
+
+  // Determine the limit attribute (characters or words)
+  var countAttribute = this.defaults.characterCountAttribute;
+  if (this.options.maxwords) {
+    countAttribute = this.defaults.wordCountAttribute;
+  }
+
+  // Save the element limit
+  this.maxLength = $module.getAttribute(countAttribute);
+
+  // Check for limit
+  if (!this.maxLength) {
+    return
+  }
+
+  // Generate and reference message
+  var boundCreateCountMessage = this.createCountMessage.bind(this);
+  this.countMessage = boundCreateCountMessage();
+
+  // If there's a maximum length defined and the count message exists
+  if (this.countMessage) {
+    // Remove hard limit if set
+    $module.removeAttribute('maxlength');
+
+    // Bind event changes to the textarea
+    var boundChangeEvents = this.bindChangeEvents.bind(this);
+    boundChangeEvents();
+
+    // Update count message
+    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
+    boundUpdateCountMessage();
+  }
+};
+
+// Read data attributes
+CharacterCount.prototype.getDataset = function (element) {
+  var dataset = {};
+  var attributes = element.attributes;
+  if (attributes) {
+    for (var i = 0; i < attributes.length; i++) {
+      var attribute = attributes[i];
+      var match = attribute.name.match(/^data-(.+)/);
+      if (match) {
+        dataset[match[1]] = attribute.value;
+      }
+    }
+  }
+  return dataset
+};
+
+// Counts characters or words in text
+CharacterCount.prototype.count = function (text) {
+  var length;
+  if (this.options.maxwords) {
+    var tokens = text.match(/\S+/g) || []; // Matches consecutive non-whitespace chars
+    length = tokens.length;
+  } else {
+    length = text.length;
+  }
+  return length
+};
+
+// Generate count message and bind it to the input
+// returns reference to the generated element
+CharacterCount.prototype.createCountMessage = function () {
+  var countElement = this.$textarea;
+  var elementId = countElement.id;
+  // Check for existing info count message
+  var countMessage = document.getElementById(elementId + '-info');
+  // If there is no existing info count message we add one right after the field
+  if (elementId && !countMessage) {
+    countElement.insertAdjacentHTML('afterend', '<span id="' + elementId + '-info" class="govuk-hint govuk-character-count__message" aria-live="polite"></span>');
+    this.describedBy = countElement.getAttribute('aria-describedby');
+    this.describedByInfo = this.describedBy + ' ' + elementId + '-info';
+    countElement.setAttribute('aria-describedby', this.describedByInfo);
+    countMessage = document.getElementById(elementId + '-info');
+  } else {
+  // If there is an existing info count message we move it right after the field
+    countElement.insertAdjacentElement('afterend', countMessage);
+  }
+  return countMessage
+};
+
+// Bind input propertychange to the elements and update based on the change
+CharacterCount.prototype.bindChangeEvents = function () {
+  var $textarea = this.$textarea;
+  $textarea.addEventListener('keyup', this.checkIfValueChanged.bind(this));
+
+  // Bind focus/blur events to start/stop polling
+  $textarea.addEventListener('focus', this.handleFocus.bind(this));
+  $textarea.addEventListener('blur', this.handleBlur.bind(this));
+};
+
+// Speech recognition software such as Dragon NaturallySpeaking will modify the
+// fields by directly changing its `value`. These changes don't trigger events
+// in JavaScript, so we need to poll to handle when and if they occur.
+CharacterCount.prototype.checkIfValueChanged = function () {
+  if (!this.$textarea.oldValue) this.$textarea.oldValue = '';
+  if (this.$textarea.value !== this.$textarea.oldValue) {
+    this.$textarea.oldValue = this.$textarea.value;
+    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
+    boundUpdateCountMessage();
+  }
+};
+
+// Update message box
+CharacterCount.prototype.updateCountMessage = function () {
+  var countElement = this.$textarea;
+  var options = this.options;
+  var countMessage = this.countMessage;
+
+  // Determine the remaining number of characters/words
+  var currentLength = this.count(countElement.value);
+  var maxLength = this.maxLength;
+  var remainingNumber = maxLength - currentLength;
+
+  // Set threshold if presented in options
+  var thresholdPercent = options.threshold ? options.threshold : 0;
+  var thresholdValue = maxLength * thresholdPercent / 100;
+  if (thresholdValue > currentLength) {
+    countMessage.classList.add('govuk-character-count__message--disabled');
+  } else {
+    countMessage.classList.remove('govuk-character-count__message--disabled');
+  }
+
+  // Update styles
+  if (remainingNumber < 0) {
+    countElement.classList.add('govuk-textarea--error');
+    countMessage.classList.remove('govuk-hint');
+    countMessage.classList.add('govuk-error-message');
+  } else {
+    countElement.classList.remove('govuk-textarea--error');
+    countMessage.classList.remove('govuk-error-message');
+    countMessage.classList.add('govuk-hint');
+  }
+
+  // Update message
+  var charVerb = 'remaining';
+  var charNoun = 'character';
+  var displayNumber = remainingNumber;
+  if (options.maxwords) {
+    charNoun = 'word';
+  }
+  charNoun = charNoun + ((remainingNumber === -1 || remainingNumber === 1) ? '' : 's');
+
+  charVerb = (remainingNumber < 0) ? 'too many' : 'remaining';
+  displayNumber = Math.abs(remainingNumber);
+
+  countMessage.innerHTML = 'You have ' + displayNumber + ' ' + charNoun + ' ' + charVerb;
+};
+
+CharacterCount.prototype.handleFocus = function () {
+  // Check if value changed on focus
+  this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000);
+};
+
+CharacterCount.prototype.handleBlur = function () {
+  // Cancel value checking on blur
+  clearInterval(this.valueChecker);
+};
+
 function Checkboxes ($module) {
   this.$module = $module;
   this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
@@ -1688,6 +1870,11 @@ function initAll () {
     new Details($detail).init();
   });
 
+  var $characterCount = document.querySelectorAll('[data-module="character-count"]');
+  nodeListForEach($characterCount, function ($characterCount) {
+    new CharacterCount($characterCount).init();
+  });
+
   var $checkboxes = document.querySelectorAll('[data-module="checkboxes"]');
   nodeListForEach($checkboxes, function ($checkbox) {
     new Checkboxes($checkbox).init();
@@ -1715,6 +1902,7 @@ function initAll () {
 exports.initAll = initAll;
 exports.Button = Button;
 exports.Details = Details;
+exports.CharacterCount = CharacterCount;
 exports.Checkboxes = Checkboxes;
 exports.ErrorSummary = ErrorSummary;
 exports.Header = Header;

data/node_modules/govuk-frontend/components/_all.scss

@@ -2,6 +2,7 @@
 @import "breadcrumbs/breadcrumbs";
 @import "button/button";
 @import "checkboxes/checkboxes";
+@import "character-count/character-count";
 @import "date-input/date-input";
 @import "details/details";
 @import "error-message/error-message";

data/node_modules/govuk-frontend/components/back-link/README.md

@@ -89,11 +89,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">text (or) html</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">Yes</td>
+<td class="govuk-table__cell">Yes</td>
 
-<td class="govuk-table__cell ">Text or HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored.</td>
+<td class="govuk-table__cell">Text or HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored.</td>
 
 </tr>
 
@@ -101,11 +101,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">href</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">Yes</td>
+<td class="govuk-table__cell">Yes</td>
 
-<td class="govuk-table__cell ">The value of the link href attribute</td>
+<td class="govuk-table__cell">The value of the link href attribute</td>
 
 </tr>
 
@@ -113,11 +113,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">classes</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Optional additional classes to add to the anchor tag.</td>
+<td class="govuk-table__cell">Optional additional classes to add to the anchor tag.</td>
 
 </tr>
 
@@ -125,11 +125,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">attributes</th>
 
-<td class="govuk-table__cell ">object</td>
+<td class="govuk-table__cell">object</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the anchor tag.</td>
+<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the anchor tag.</td>
 
 </tr>
 

data/node_modules/govuk-frontend/components/breadcrumbs/README.md

@@ -254,11 +254,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">items</th>
 
-<td class="govuk-table__cell ">array</td>
+<td class="govuk-table__cell">array</td>
 
-<td class="govuk-table__cell ">Yes</td>
+<td class="govuk-table__cell">Yes</td>
 
-<td class="govuk-table__cell ">Array of breadcrumbs item objects.</td>
+<td class="govuk-table__cell">Array of breadcrumbs item objects.</td>
 
 </tr>
 
@@ -266,11 +266,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">items.{}.text (or) items.{}.html</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">Yes</td>
+<td class="govuk-table__cell">Yes</td>
 
-<td class="govuk-table__cell ">Text or HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.</td>
+<td class="govuk-table__cell">Text or HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.</td>
 
 </tr>
 
@@ -278,11 +278,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">items.{}.href</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">no</td>
+<td class="govuk-table__cell">no</td>
 
-<td class="govuk-table__cell ">Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item</td>
+<td class="govuk-table__cell">Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item</td>
 
 </tr>
 
@@ -290,11 +290,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">items.{}.attributes</th>
 
-<td class="govuk-table__cell ">object</td>
+<td class="govuk-table__cell">object</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.</td>
+<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.</td>
 
 </tr>
 
@@ -302,11 +302,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">classes</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Optional additional classes to add to the breadcrumbs container.</td>
+<td class="govuk-table__cell">Optional additional classes to add to the breadcrumbs container.</td>
 
 </tr>
 
@@ -314,11 +314,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">attributes</th>
 
-<td class="govuk-table__cell ">object</td>
+<td class="govuk-table__cell">object</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the breadcrumbs container.</td>
+<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the breadcrumbs container.</td>
 
 </tr>
 

data/node_modules/govuk-frontend/components/button/README.md

@@ -55,7 +55,7 @@ Buttons are configured to perform an action and they can have a different look.
 
 #### Markup
 
-    <a href="/" role="button" class="govuk-button">
+    <a href="/" role="button" draggable="false" class="govuk-button">
       Link button
     </a>
 
@@ -74,7 +74,7 @@ Buttons are configured to perform an action and they can have a different look.
 
 #### Markup
 
-    <a href="/" role="button" class="govuk-button govuk-button--disabled">
+    <a href="/" role="button" draggable="false" class="govuk-button govuk-button--disabled">
       Disabled link button
     </a>
 
@@ -94,7 +94,7 @@ Buttons are configured to perform an action and they can have a different look.
 
 #### Markup
 
-    <a href="/" role="button" class="govuk-button govuk-button--start">
+    <a href="/" role="button" draggable="false" class="govuk-button govuk-button--start">
       Start now link button
     </a>
 
@@ -190,11 +190,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">element</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.</td>
+<td class="govuk-table__cell">Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.</td>
 
 </tr>
 
@@ -202,11 +202,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">text (or) html</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">Yes</td>
+<td class="govuk-table__cell">Yes</td>
 
-<td class="govuk-table__cell ">Text or HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.</td>
+<td class="govuk-table__cell">Text or HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.</td>
 
 </tr>
 
@@ -214,11 +214,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">name</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">Yes</td>
+<td class="govuk-table__cell">Yes</td>
 
-<td class="govuk-table__cell ">Name for the `input` or `button`. This has no effect on `a` elements.</td>
+<td class="govuk-table__cell">Name for the `input` or `button`. This has no effect on `a` elements.</td>
 
 </tr>
 
@@ -226,11 +226,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">type</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">Yes</td>
+<td class="govuk-table__cell">Yes</td>
 
-<td class="govuk-table__cell ">Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.</td>
+<td class="govuk-table__cell">Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.</td>
 
 </tr>
 
@@ -238,11 +238,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">value</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">Yes</td>
+<td class="govuk-table__cell">Yes</td>
 
-<td class="govuk-table__cell ">Value for the `button` tag. This has no effect on `a` or `input` elements.</td>
+<td class="govuk-table__cell">Value for the `button` tag. This has no effect on `a` or `input` elements.</td>
 
 </tr>
 
@@ -250,11 +250,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">disabled</th>
 
-<td class="govuk-table__cell ">boolean</td>
+<td class="govuk-table__cell">boolean</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.</td>
+<td class="govuk-table__cell">Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.</td>
 
 </tr>
 
@@ -262,11 +262,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">href</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.</td>
+<td class="govuk-table__cell">The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.</td>
 
 </tr>
 
@@ -274,11 +274,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">classes</th>
 
-<td class="govuk-table__cell ">string</td>
+<td class="govuk-table__cell">string</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Optional additional classes</td>
+<td class="govuk-table__cell">Optional additional classes</td>
 
 </tr>
 
@@ -286,11 +286,11 @@ If you are using Nunjucks,then macros take the following arguments
 
 <th class="govuk-table__header" scope="row">attributes</th>
 
-<td class="govuk-table__cell ">object</td>
+<td class="govuk-table__cell">object</td>
 
-<td class="govuk-table__cell ">No</td>
+<td class="govuk-table__cell">No</td>
 
-<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the button component.</td>
+<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the button component.</td>
 
 </tr>