Merge pull request #1651 from alphagov/release-3-4-0

Release v3.4.0

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## Unreleased
+## 3.4.0 (Feature release)
 
 ### New features
 

dist/VERSION.txt

@@ -1 +1 @@
-3.3.0
+3.4.0

package/govuk/all.js

@@ -1497,6 +1497,9 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
 function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
+  if (this.$textarea) {
+    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+  }
 }
 
 CharacterCount.prototype.defaults = {
@@ -1509,10 +1512,16 @@ CharacterCount.prototype.init = function () {
   // Check for module
   var $module = this.$module;
   var $textarea = this.$textarea;
-  if (!$textarea) {
+  var $countMessage = this.$countMessage;
+
+  if (!$textarea || !$countMessage) {
     return
   }
 
+  // We move count message right after the field
+  // Kept for backwards compatibility
+  $textarea.insertAdjacentElement('afterend', $countMessage);
+
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module);
 
@@ -1530,23 +1539,16 @@ CharacterCount.prototype.init = function () {
     return
   }
 
-  // Generate and reference message
-  var boundCreateCountMessage = this.createCountMessage.bind(this);
-  this.countMessage = boundCreateCountMessage();
+  // Remove hard limit if set
+  $module.removeAttribute('maxlength');
 
-  // 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();
 
-    // Bind event changes to the textarea
-    var boundChangeEvents = this.bindChangeEvents.bind(this);
-    boundChangeEvents();
-
-    // Update count message
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-    boundUpdateCountMessage();
-  }
+  // Update count message
+  var boundUpdateCountMessage = this.updateCountMessage.bind(this);
+  boundUpdateCountMessage();
 };
 
 // Read data attributes
@@ -1577,27 +1579,6 @@ CharacterCount.prototype.count = function (text) {
   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;
@@ -1624,7 +1605,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
 CharacterCount.prototype.updateCountMessage = function () {
   var countElement = this.$textarea;
   var options = this.options;
-  var countMessage = this.countMessage;
+  var countMessage = this.$countMessage;
 
   // Determine the remaining number of characters/words
   var currentLength = this.count(countElement.value);

package/govuk/components/accordion/README.md

@@ -12,4 +12,4 @@ Find out when to use the details component in your service in the [GOV.UK Design
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/accordion/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/accordion/#options-accordion-example) for details.

package/govuk/components/accordion/macro-options.json

@@ -3,7 +3,7 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "Must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
+        "description": "Must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
     },
     {
         "name": "headingLevel",

package/govuk/components/back-link/README.md

@@ -12,4 +12,4 @@ Find out when to use the back link component in your service in the [GOV.UK Desi
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/back-link/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/back-link/#options-back-link-example) for details.

package/govuk/components/back-link/_back-link.scss

@@ -17,7 +17,10 @@
 
     // Allow space for the arrow
     padding-left: 14px;
+  }
 
+  // Only add a custom underline if the component is linkable
+  .govuk-back-link[href] {
     // Use border-bottom rather than text-decoration so that the arrow is
     // underlined as well.
     border-bottom: 1px solid govuk-colour("black");
@@ -30,22 +33,22 @@
     &:focus {
       border-bottom-color: transparent;
     }
+  }
 
-    // Prepend left pointing arrow
-    &:before {
-      @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
+  // Prepend left pointing arrow
+  .govuk-back-link:before {
+    @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
 
-      content: "";
+    content: "";
 
-      // Vertically align with the parent element
-      position: absolute;
+    // Vertically align with the parent element
+    position: absolute;
 
-      top: 0;
-      bottom: 0;
-      left: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
 
-      margin: auto;
-    }
+    margin: auto;
   }
 
   @if $govuk-use-legacy-font {

package/govuk/components/breadcrumbs/README.md

@@ -12,4 +12,4 @@ Find out when to use the breadcrumbs component in your service in the [GOV.UK De
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/breadcrumbs/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/breadcrumbs/#options-breadcrumbs-example) for details.

package/govuk/components/button/README.md

@@ -12,4 +12,4 @@ Find out when to use the button component in your service in the [GOV.UK Design
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/button/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/button/#options-button-example) for details.

package/govuk/components/button/macro-options.json

@@ -20,19 +20,19 @@
     {
         "name": "name",
         "type": "string",
-        "required": true,
+        "required": false,
         "description": "Name for the `input` or `button`. This has no effect on `a` elements."
     },
     {
         "name": "type",
         "type": "string",
-        "required": true,
+        "required": false,
         "description": "Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements."
     },
     {
         "name": "value",
         "type": "string",
-        "required": true,
+        "required": false,
         "description": "Value for the `button` tag. This has no effect on `a` or `input` elements."
     },
     {

package/govuk/components/character-count/README.md

@@ -12,4 +12,4 @@ Find out when to use the character count component in your service in the [GOV.U
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/character-count/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/character-count/#options-character-count-example) for details.

package/govuk/components/character-count/character-count.js

@@ -1017,6 +1017,9 @@ if (detect) return
 function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
+  if (this.$textarea) {
+    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+  }
 }
 
 CharacterCount.prototype.defaults = {
@@ -1029,10 +1032,16 @@ CharacterCount.prototype.init = function () {
   // Check for module
   var $module = this.$module;
   var $textarea = this.$textarea;
-  if (!$textarea) {
+  var $countMessage = this.$countMessage;
+
+  if (!$textarea || !$countMessage) {
     return
   }
 
+  // We move count message right after the field
+  // Kept for backwards compatibility
+  $textarea.insertAdjacentElement('afterend', $countMessage);
+
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module);
 
@@ -1050,23 +1059,16 @@ CharacterCount.prototype.init = function () {
     return
   }
 
-  // Generate and reference message
-  var boundCreateCountMessage = this.createCountMessage.bind(this);
-  this.countMessage = boundCreateCountMessage();
+  // Remove hard limit if set
+  $module.removeAttribute('maxlength');
 
-  // 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();
 
-    // Bind event changes to the textarea
-    var boundChangeEvents = this.bindChangeEvents.bind(this);
-    boundChangeEvents();
-
-    // Update count message
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-    boundUpdateCountMessage();
-  }
+  // Update count message
+  var boundUpdateCountMessage = this.updateCountMessage.bind(this);
+  boundUpdateCountMessage();
 };
 
 // Read data attributes
@@ -1097,27 +1099,6 @@ CharacterCount.prototype.count = function (text) {
   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;
@@ -1144,7 +1125,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
 CharacterCount.prototype.updateCountMessage = function () {
   var countElement = this.$textarea;
   var options = this.options;
-  var countMessage = this.countMessage;
+  var countMessage = this.$countMessage;
 
   // Determine the remaining number of characters/words
   var currentLength = this.count(countElement.value);

package/govuk/components/character-count/template.njk

@@ -11,7 +11,7 @@
     rows: params.rows,
     value: params.value,
     formGroup: params.formGroup,
-    classes: 'govuk-js-character-count ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes),
+    classes: 'govuk-js-character-count' + (' govuk-textarea--error' if params.errorMessage) + (' ' + params.classes if params.classes),
     label: {
       html: params.label.html,
       text: params.label.text,

package/govuk/components/checkboxes/README.md

@@ -12,4 +12,4 @@ Find out when to use the checkboxes component in your service in the [GOV.UK Des
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/checkboxes/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/checkboxes/#options-checkboxes-example) for details.

package/govuk/components/date-input/README.md

@@ -12,4 +12,4 @@ Find out when to use the date input component in your service in the [GOV.UK Des
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/date-input/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/date-input/#options-date-input-example) for details.

package/govuk/components/details/README.md

@@ -12,4 +12,4 @@ Find out when to use the details component in your service in the [GOV.UK Design
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/details/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/details/#options-details-example) for details.

package/govuk/components/error-message/README.md

@@ -12,4 +12,4 @@ Find out when to use the error message component in your service in the [GOV.UK
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/error-message/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/error-message/#options-error-message-example) for details.

package/govuk/components/error-summary/README.md

@@ -12,4 +12,4 @@ Find out when to use the error summary component in your service in the [GOV.UK
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/error-summary/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/error-summary/#options-error-summary-example) for details.

package/govuk/components/fieldset/README.md

@@ -12,4 +12,4 @@ Find out when to use the fieldset component in your service in the [GOV.UK Desig
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/fieldset/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/fieldset/#options-fieldset-example) for details.

package/govuk/components/fieldset/macro-options.json

@@ -59,6 +59,6 @@
         "name": "caller",
         "type": "nunjucks-block",
         "required": false,
-        "description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block. See [checkboxes component](https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/template.njk#L86) for an example."
+        "description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block."
     }
 ]

package/govuk/components/file-upload/README.md

@@ -12,4 +12,4 @@ Find out when to use the file upload component in your service in the [GOV.UK De
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/file-upload/#options-file-upload-example) for details.

package/govuk/components/footer/README.md

@@ -12,4 +12,4 @@ Find out when to use the footer component in your service in the [GOV.UK Design
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/footer/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/footer/#options-footer-example) for details.

package/govuk/components/header/README.md

@@ -12,4 +12,4 @@ Find out when to use the header component in your service in the [GOV.UK Design
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/header/#options-example-default) for details.
+See [options table](https://design-system.service.gov.uk/components/header/#options-header-example) for details.