Merge pull request #1547 from alphagov/release-v3.1.0

Release v3.1.0

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.1.0 (Feature release)
+
 ### New features
 
 #### Add attributes to the fieldset on the date input component

dist/VERSION.txt

@@ -1 +1 @@
-3.0.0
+3.1.0

package/govuk/all.js

@@ -1361,58 +1361,28 @@ Button.prototype.init = function () {
 var KEY_ENTER = 13;
 var KEY_SPACE$1 = 32;
 
-// Create a flag to know if the browser supports navtive details
-var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean';
-
 function Details ($module) {
   this.$module = $module;
 }
 
-/**
-* Handle cross-modal click events
-* @param {object} node element
-* @param {function} callback function
-*/
-Details.prototype.handleInputs = function (node, callback) {
-  node.addEventListener('keypress', function (event) {
-    var target = event.target;
-    // When the key gets pressed - check if it is enter or space
-    if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE$1) {
-      if (target.nodeName.toLowerCase() === 'summary') {
-        // Prevent space from scrolling the page
-        // and enter from submitting a form
-        event.preventDefault();
-        // Click to let the click event do all the necessary action
-        if (target.click) {
-          target.click();
-        } else {
-          // except Safari 5.1 and under don't support .click() here
-          callback(event);
-        }
-      }
-    }
-  });
+Details.prototype.init = function () {
+  if (!this.$module) {
+    return
+  }
 
-  // Prevent keyup to prevent clicking twice in Firefox when using space key
-  node.addEventListener('keyup', function (event) {
-    var target = event.target;
-    if (event.keyCode === KEY_SPACE$1) {
-      if (target.nodeName.toLowerCase() === 'summary') {
-        event.preventDefault();
-      }
-    }
-  });
+  // If there is native details support, we want to avoid running code to polyfill native behaviour.
+  var hasNativeDetails = typeof this.$module.open === 'boolean';
 
-  node.addEventListener('click', callback);
+  if (hasNativeDetails) {
+    return
+  }
+
+  this.polyfillDetails();
 };
 
-Details.prototype.init = function () {
+Details.prototype.polyfillDetails = function () {
   var $module = this.$module;
 
-  if (!$module) {
-    return
-  }
-
   // Save shortcuts to the inner summary and content elements
   var $summary = this.$summary = $module.getElementsByTagName('summary').item(0);
   var $content = this.$content = $module.getElementsByTagName('div').item(0);
@@ -1442,9 +1412,7 @@ Details.prototype.init = function () {
   //
   // We have to use the camelcase `tabIndex` property as there is a bug in IE6/IE7 when we set the correct attribute lowercase:
   // See http://web.archive.org/web/20170120194036/http://www.saliences.com/browserBugs/tabIndex.html for more information.
-  if (!NATIVE_DETAILS) {
-    $summary.tabIndex = 0;
-  }
+  $summary.tabIndex = 0;
 
   // Detect initial open state
   var openAttr = $module.getAttribute('open') !== null;
@@ -1454,20 +1422,18 @@ Details.prototype.init = function () {
   } else {
     $summary.setAttribute('aria-expanded', 'false');
     $content.setAttribute('aria-hidden', 'true');
-    if (!NATIVE_DETAILS) {
-      $content.style.display = 'none';
-    }
+    $content.style.display = 'none';
   }
 
   // Bind an event to handle summary elements
-  this.handleInputs($summary, this.setAttributes.bind(this));
+  this.polyfillHandleInputs($summary, this.polyfillSetAttributes.bind(this));
 };
 
 /**
 * Define a statechange function that updates aria-expanded and style.display
 * @param {object} summary element
 */
-Details.prototype.setAttributes = function () {
+Details.prototype.polyfillSetAttributes = function () {
   var $module = this.$module;
   var $summary = this.$summary;
   var $content = this.$content;
@@ -1478,27 +1444,54 @@ Details.prototype.setAttributes = function () {
   $summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'));
   $content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'));
 
-  if (!NATIVE_DETAILS) {
-    $content.style.display = (expanded ? 'none' : '');
+  $content.style.display = (expanded ? 'none' : '');
 
-    var hasOpenAttr = $module.getAttribute('open') !== null;
-    if (!hasOpenAttr) {
-      $module.setAttribute('open', 'open');
-    } else {
-      $module.removeAttribute('open');
-    }
+  var hasOpenAttr = $module.getAttribute('open') !== null;
+  if (!hasOpenAttr) {
+    $module.setAttribute('open', 'open');
+  } else {
+    $module.removeAttribute('open');
   }
+
   return true
 };
 
 /**
-* Remove the click event from the node element
+* Handle cross-modal click events
 * @param {object} node element
+* @param {function} callback function
 */
-Details.prototype.destroy = function (node) {
-  node.removeEventListener('keypress');
-  node.removeEventListener('keyup');
-  node.removeEventListener('click');
+Details.prototype.polyfillHandleInputs = function (node, callback) {
+  node.addEventListener('keypress', function (event) {
+    var target = event.target;
+    // When the key gets pressed - check if it is enter or space
+    if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE$1) {
+      if (target.nodeName.toLowerCase() === 'summary') {
+        // Prevent space from scrolling the page
+        // and enter from submitting a form
+        event.preventDefault();
+        // Click to let the click event do all the necessary action
+        if (target.click) {
+          target.click();
+        } else {
+          // except Safari 5.1 and under don't support .click() here
+          callback(event);
+        }
+      }
+    }
+  });
+
+  // Prevent keyup to prevent clicking twice in Firefox when using space key
+  node.addEventListener('keyup', function (event) {
+    var target = event.target;
+    if (event.keyCode === KEY_SPACE$1) {
+      if (target.nodeName.toLowerCase() === 'summary') {
+        event.preventDefault();
+      }
+    }
+  });
+
+  node.addEventListener('click', callback);
 };
 
 function CharacterCount ($module) {

package/govuk/components/accordion/README.md

@@ -12,6 +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.
 
-`id` option given to instances of the component 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)).
-
 See [options table](https://design-system.service.gov.uk/components/accordion/#options-example-default) for details.

package/govuk/components/accordion/template.njk

@@ -4,22 +4,24 @@
 <div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}" data-module="govuk-accordion" id="{{ id }}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% for item in params.items %}
-    <div class="govuk-accordion__section {% if item.expanded %}govuk-accordion__section--expanded{% endif %}">
-      <div class="govuk-accordion__section-header">
-        <h{{ headingLevel }} class="govuk-accordion__section-heading">
-          <span class="govuk-accordion__section-button" id="{{ id }}-heading-{{ loop.index }}">
-            {{ item.heading.html | safe if item.heading.html else item.heading.text }}
-          </span>
-        </h{{ headingLevel }}>
-        {% if item.summary.html or item.summary.text %}
-          <div class="govuk-accordion__section-summary govuk-body" id="{{ id }}-summary-{{ loop.index }}">
-            {{ item.summary.html | safe if item.summary.html else item.summary.text }}
-          </div>
-        {% endif %}
+    {% if item %}
+      <div class="govuk-accordion__section {% if item.expanded %}govuk-accordion__section--expanded{% endif %}">
+        <div class="govuk-accordion__section-header">
+          <h{{ headingLevel }} class="govuk-accordion__section-heading">
+            <span class="govuk-accordion__section-button" id="{{ id }}-heading-{{ loop.index }}">
+              {{ item.heading.html | safe if item.heading.html else item.heading.text }}
+            </span>
+          </h{{ headingLevel }}>
+          {% if item.summary.html or item.summary.text %}
+            <div class="govuk-accordion__section-summary govuk-body" id="{{ id }}-summary-{{ loop.index }}">
+              {{ item.summary.html | safe if item.summary.html else item.summary.text }}
+            </div>
+          {% endif %}
+        </div>
+        <div id="{{ id }}-content-{{ loop.index }}" class="govuk-accordion__section-content" aria-labelledby="{{ id }}-heading-{{ loop.index }}">
+          {{ item.content.html | safe if item.content.html else item.content.text }}
+        </div>
       </div>
-      <div id="{{ id }}-content-{{ loop.index }}" class="govuk-accordion__section-content" aria-labelledby="{{ id }}-heading-{{ loop.index }}">
-        {{ item.content.html | safe if item.content.html else item.content.text }}
-      </div>
-    </div>
+    {% endif %}
   {% endfor %}
 </div>

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

@@ -64,5 +64,11 @@
         "type": "boolean",
         "required": false,
         "description": "Prevent accidental double clicks on submit buttons from submitting forms multiple times"
+    },
+    {
+        "name": "isStartButton",
+        "type": "boolean",
+        "required": false,
+        "description": "Use for the main call to action on your service's start page."
     }
 ]

package/govuk/components/button/template.njk

@@ -37,7 +37,7 @@ treat it as an interactive element - without this it will be
 
 {#- Define common attributes we can use for both button and input types #}
 
-{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
+{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
 
 {#- Actually create a button... or a link! #}
 
@@ -49,12 +49,12 @@ treat it as an interactive element - without this it will be
 </a>
 
 {%- elseif element == 'button' %}
-<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+<button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
   {{ params.html | safe if params.html else params.text }}
 {# Indentation is intentional to output HTML nicely #}
 {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
 </button>
 
 {%- elseif element == 'input' %}
-<input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+<input value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
 {%- endif %}

package/govuk/components/checkboxes/template.njk

@@ -53,52 +53,54 @@
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if isConditional %} data-module="govuk-checkboxes"{% endif -%}>
     {% for item in params.items %}
-    {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-    {%- if item.id -%}
-      {%- set id = item.id -%}
-    {%- else -%}
-      {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-      {%- if loop.first -%}
-        {%- set id = idPrefix %}
-      {% else %}
-        {%- set id = idPrefix + "-" + loop.index -%}
-      {%- endif -%}
-    {%- endif -%}
-    {% set name = item.name if item.name else params.name %}
-    {% set conditionalId = "conditional-" + id %}
-    {% set hasHint = true if item.hint.text or item.hint.html %}
-    {% set itemHintId = id + "-item-hint" if hasHint else "" %}
-    {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
-    {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
-      {{-" checked" if item.checked }}
-      {{-" disabled" if item.disabled }}
-      {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
-      {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
-      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-      {{ govukLabel({
-        html: item.html,
-        text: item.text,
-        classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
-        attributes: item.label.attributes,
-        for: id
-      }) | indent(6) | trim }}
-      {% if hasHint %}
-      {{ govukHint({
-        id: itemHintId,
-        classes: 'govuk-checkboxes__hint',
-        attributes: item.hint.attributes,
-        html: item.hint.html,
-        text: item.hint.text
-      }) | indent(6) | trim }}
+      {% if item %}
+        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+        {%- if item.id -%}
+          {%- set id = item.id -%}
+        {%- else -%}
+          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+          {%- if loop.first -%}
+            {%- set id = idPrefix %}
+          {% else %}
+            {%- set id = idPrefix + "-" + loop.index -%}
+          {%- endif -%}
+        {%- endif -%}
+        {% set name = item.name if item.name else params.name %}
+        {% set conditionalId = "conditional-" + id %}
+        {% set hasHint = true if item.hint.text or item.hint.html %}
+        {% set itemHintId = id + "-item-hint" if hasHint else "" %}
+        {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
+        {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
+          {{-" checked" if item.checked }}
+          {{-" disabled" if item.disabled }}
+          {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
+          {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          {{ govukLabel({
+            html: item.html,
+            text: item.text,
+            classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
+            attributes: item.label.attributes,
+            for: id
+          }) | indent(6) | trim }}
+          {% if hasHint %}
+          {{ govukHint({
+            id: itemHintId,
+            classes: 'govuk-checkboxes__hint',
+            attributes: item.hint.attributes,
+            html: item.hint.html,
+            text: item.hint.text
+          }) | indent(6) | trim }}
+          {% endif %}
+        </div>
+        {% if item.conditional %}
+          <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
+            {{ item.conditional.html | safe }}
+          </div>
+        {% endif %}
       {% endif %}
-    </div>
-    {% if item.conditional %}
-      <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
-        {{ item.conditional.html | safe }}
-      </div>
-    {% endif %}
     {% endfor %}
   </div>
 {% endset -%}

package/govuk/components/date-input/template.njk

@@ -84,9 +84,8 @@
   {% call govukFieldset({
     describedBy: describedBy,
     classes: params.fieldset.classes,
-    attributes: {
-      role: "group"
-    },
+    role: 'group',
+    attributes: params.fieldset.attributes,
     legend: params.fieldset.legend
   }) %}
   {{ innerHtml | trim | safe }}