Merge pull request #1762 from alphagov/release-v3.6.0

Release v3.6.0

dist/VERSION.txt

@@ -1 +1 @@
-3.5.0
+3.6.0

package/govuk/all.js

@@ -1748,7 +1748,7 @@ Checkboxes.prototype.handleClick = function (event) {
 
   if (detect) return
 
-    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+  // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
   Element.prototype.closest = function closest(selector) {
     var node = this;
 
@@ -2026,51 +2026,41 @@ Radios.prototype.handleClick = function (event) {
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/detect.js
     var detect = (
-      'Element' in this && "nextElementSibling" in document.documentElement
+      'document' in this && "nextElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-
-    (function (global) {
-
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L28-L33
-      Object.defineProperty(Element.prototype, "nextElementSibling", {
-        get: function(){
-          var el = this.nextSibling;
-          while (el && el.nodeType !== 1) { el = el.nextSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+      get: function(){
+        var el = this.nextSibling;
+        while (el && el.nodeType !== 1) { el = el.nextSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/detect.js
     var detect = (
-      'Element' in this && 'previousElementSibling' in document.documentElement
+      'document' in this && "previousElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-    (function (global) {
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L35-L40
-      Object.defineProperty(Element.prototype, 'previousElementSibling', {
-        get: function(){
-          var el = this.previousSibling;
-          while (el && el.nodeType !== 1) { el = el.previousSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, 'previousElementSibling', {
+      get: function(){
+        var el = this.previousSibling;
+        while (el && el.nodeType !== 1) { el = el.previousSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 

package/govuk/components/button/template.njk

@@ -24,7 +24,7 @@
 {#- The SVG needs `focusable="false"` so that Internet Explorer does not
 treat it as an interactive element - without this it will be
 'focusable' when using the keyboard to navigate. #}
-<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
+<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
   <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
 </svg>
   {% endset %}

package/govuk/components/character-count/macro-options.json

@@ -59,7 +59,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

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

@@ -23,7 +23,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

package/govuk/components/date-input/macro-options.json

@@ -78,7 +78,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the error message.",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

package/govuk/components/error-summary/error-summary.js

@@ -692,7 +692,7 @@ if (detect) return
 
   if (detect) return
 
-    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+  // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
   Element.prototype.closest = function closest(selector) {
     var node = this;
 

package/govuk/components/file-upload/macro-options.json

@@ -41,7 +41,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component.",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

package/govuk/components/footer/template.njk

@@ -54,7 +54,7 @@
         treat it as an interactive element - without this it will be
         'focusable' when using the keyboard to navigate. #}
         <svg
-          role="presentation"
+          aria-hidden="true"
           focusable="false"
           class="govuk-footer__licence-logo"
           xmlns="http://www.w3.org/2000/svg"

package/govuk/components/header/template.njk

@@ -17,7 +17,7 @@
           treat it as an interactive element - without this it will be
           'focusable' when using the keyboard to navigate. #}
           <svg
-            role="presentation"
+            aria-hidden="true"
             focusable="false"
             class="govuk-header__logotype-crown"
             xmlns="http://www.w3.org/2000/svg"

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

@@ -53,7 +53,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component.",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

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

@@ -17,7 +17,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

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

@@ -73,7 +73,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

package/govuk/components/skip-link/macro-options.json

@@ -14,8 +14,8 @@
     {
         "name": "href",
         "type": "string",
-        "required": true,
-        "description": "The value of the skip link href attribute. Defaults to"
+        "required": false,
+        "description": "The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value."
     },
     {
         "name": "classes",

package/govuk/components/tabs/tabs.js

@@ -746,51 +746,41 @@ if (detect) return
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/detect.js
     var detect = (
-      'Element' in this && "nextElementSibling" in document.documentElement
+      'document' in this && "nextElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-
-    (function (global) {
-
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L28-L33
-      Object.defineProperty(Element.prototype, "nextElementSibling", {
-        get: function(){
-          var el = this.nextSibling;
-          while (el && el.nodeType !== 1) { el = el.nextSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+      get: function(){
+        var el = this.nextSibling;
+        while (el && el.nodeType !== 1) { el = el.nextSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/detect.js
     var detect = (
-      'Element' in this && 'previousElementSibling' in document.documentElement
+      'document' in this && "previousElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-    (function (global) {
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L35-L40
-      Object.defineProperty(Element.prototype, 'previousElementSibling', {
-        get: function(){
-          var el = this.previousSibling;
-          while (el && el.nodeType !== 1) { el = el.previousSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, 'previousElementSibling', {
+      get: function(){
+        var el = this.previousSibling;
+        while (el && el.nodeType !== 1) { el = el.previousSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 

package/govuk/components/tabs/template.njk

@@ -24,9 +24,9 @@
   {% for item in params.items %}
     {% if item %}
       {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-      <section class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      <div class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
         {{ item.panel.html | safe if item.panel.html else item.panel.text }}
-      </section>
+      </div>
     {% endif %}
   {% endfor %}
 </div>

package/govuk/components/tag/_tag.scss

@@ -38,7 +38,54 @@
     }
   }
 
+  // Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
   .govuk-tag--inactive {
     background-color: govuk-colour("dark-grey", $legacy: "grey-1");
   }
+
+  .govuk-tag--grey {
+    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
+    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+  }
+
+  .govuk-tag--purple {
+    color: govuk-shade(govuk-colour("purple"), 20);
+    background: govuk-tint(govuk-colour("purple"), 80);
+  }
+
+  .govuk-tag--turquoise {
+    color: govuk-shade(govuk-colour("turquoise"), 60);
+    background: govuk-tint(govuk-colour("turquoise"), 70);
+  }
+
+  .govuk-tag--blue {
+    color: govuk-shade(govuk-colour("blue"), 30);
+    background: govuk-tint(govuk-colour("blue"), 80);
+  }
+
+  .govuk-tag--yellow {
+    color: govuk-shade(govuk-colour("yellow"), 65);
+    background: govuk-tint(govuk-colour("yellow"), 75);
+  }
+
+  .govuk-tag--orange {
+    color: govuk-shade(govuk-colour("orange"), 55);
+    background: govuk-tint(govuk-colour("orange"), 70);
+  }
+
+  .govuk-tag--red {
+    color: govuk-shade(govuk-colour("red"), 30);
+    background: govuk-tint(govuk-colour("red"), 80);
+  }
+
+  .govuk-tag--pink {
+    color: govuk-shade(govuk-colour("pink"), 40);
+    background: govuk-tint(govuk-colour("pink"), 80);
+  }
+
+  .govuk-tag--green {
+    color: govuk-shade(govuk-colour("green"), 20);
+    background: govuk-tint(govuk-colour("green"), 80);
+  }
+
 }

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

@@ -47,7 +47,7 @@
         "name": "errorMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the errorMessage component (e.g. text).",
+        "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
     {

package/govuk/helpers/_spacing.scss

@@ -82,16 +82,16 @@
     @if $breakpoint == null {
 
       @if $direction == all {
-        #{$property}: $breakpoint-value iff($important, !important);
+        #{$property}: $breakpoint-value if($important, !important, null);
       } @else {
-        #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
+        #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
       }
     } @else {
       @include govuk-media-query($from: $breakpoint) {
         @if $direction == all {
-          #{$property}: $breakpoint-value iff($important, !important);
+          #{$property}: $breakpoint-value if($important, !important, null);
         } @else {
-          #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
+          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
         }
       }
     }

package/govuk/helpers/_typography.scss

@@ -53,7 +53,7 @@
 /// @access public
 
 @mixin govuk-typography-weight-regular($important: false) {
-  font-weight: $govuk-font-weight-regular iff($important, !important);
+  font-weight: $govuk-font-weight-regular if($important, !important, null);
 }
 
 /// Bold font weight helper
@@ -63,7 +63,7 @@
 /// @access public
 
 @mixin govuk-typography-weight-bold($important: false) {
-  font-weight: $govuk-font-weight-bold iff($important, !important);
+  font-weight: $govuk-font-weight-bold if($important, !important, null);
 }
 
 /// Convert line-heights specified in pixels into a relative value, unless
@@ -137,9 +137,9 @@
     // Mark rules as !important if $important is true - this will result in
     // these variables becoming strings, so this needs to happen *after* they
     // are used in calculations
-    $font-size: $font-size iff($important, !important);
-    $font-size-rem: $font-size-rem iff($important, !important);
-    $line-height: $line-height iff($important, !important);
+    $font-size: $font-size if($important, !important, null);
+    $font-size-rem: $font-size-rem if($important, !important, null);
+    $line-height: $line-height if($important, !important, null);
 
     @if $breakpoint == null {
       font-size: $font-size; // sass-lint:disable no-duplicate-properties