Release v3.5.0

CHANGELOG.md

@@ -4,6 +4,12 @@
 
 ### New features
 
+### Fixes
+
+## 3.5.0 (Feature release)
+
+### New features
+
 #### Add classes to the character count component's count message
 
 If you're using Nunjucks, you can now add classes to the character count component's count message using the `countMessage.classes` option.

dist/VERSION.txt

@@ -1 +1 @@
-3.4.0
+3.5.0

package/govuk/all.js

@@ -2036,12 +2036,13 @@ Radios.prototype.handleClick = function (event) {
 
     (function (global) {
 
-      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd
+      // 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.nodeType === 1) ? el : null;
+          return el;
         }
       });
 
@@ -2059,12 +2060,13 @@ Radios.prototype.handleClick = function (event) {
     if (detect) return
 
     (function (global) {
-      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739
+      // 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.nodeType === 1) ? el : null;
+          return el;
         }
       });
 

package/govuk/components/button/_button.scss

@@ -243,17 +243,13 @@
 
     display: -webkit-inline-box;
 
-    display: -webkit-inline-flex;
-
     display: -ms-inline-flexbox;
 
     display: inline-flex;
     min-height: auto;
 
     -webkit-box-pack: center;
 
-    -webkit-justify-content: center;
-
         -ms-flex-pack: center;
 
             justify-content: center;
@@ -266,12 +262,10 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-            flex-shrink: 0;
-    -webkit-align-self: center;
-        -ms-flex-item-align: center;
-            align-self: center;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    -ms-flex-item-align: center;
+        align-self: center;
   }
 
   @if $govuk-use-legacy-font {

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

@@ -87,5 +87,19 @@
         "type": "object",
         "required": false,
         "description": "HTML attributes (for example data attributes) to add to the textarea."
+    },
+    {
+        "name": "countMessage",
+        "type": "object",
+        "required": false,
+        "description": "Options for the count message",
+        "params": [
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the count message"
+            }
+        ]
     }
 ]

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

@@ -1,4 +1,5 @@
 {% from "../textarea/macro.njk" import govukTextarea %}
+{% from "../hint/macro.njk" import govukHint %}
 
 <div class="govuk-character-count" data-module="govuk-character-count"
 {%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
@@ -24,7 +25,12 @@
     errorMessage: params.errorMessage,
     attributes: params.attributes
   }) }}
-  <span id="{{ params.id }}-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-    You can enter up to {{ params.maxlength or params.maxwords }} {{'words' if params.maxwords else 'characters' }}
-  </span>
+  {{ govukHint({
+    text: 'You can enter up to ' + (params.maxlength or params.maxwords) + (' words' if params.maxwords else ' characters'),
+    id: params.id + '-info',
+    classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes),
+    attributes: {
+      'aria-live': 'polite'
+    }
+  }) }}
 </div>

package/govuk/components/checkboxes/template.njk

@@ -88,7 +88,7 @@
           {% if hasHint %}
           {{ govukHint({
             id: itemHintId,
-            classes: 'govuk-checkboxes__hint',
+            classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes),
             attributes: item.hint.attributes,
             html: item.hint.html,
             text: item.hint.text

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

@@ -2,7 +2,7 @@
     {
         "name": "id",
         "type": "string",
-        "required": false,
+        "required": true,
         "description": "This is used for the main component and to compose id attribute for each item."
     },
     {

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

@@ -7,7 +7,7 @@
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %}
 
-{% if params.items %}
+{% if params.items | length %}
   {% set dateInputItems = params.items %}
 {% else %}
   {% set dateInputItems = [
@@ -65,7 +65,8 @@
         classes: "govuk-date-input__input " + (item.classes if item.classes),
         name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
         value: item.value,
-        type: "number",
+        type: "text",
+        inputmode: "numeric",
         autocomplete: item.autocomplete,
         pattern: item.pattern if item.pattern else "[0-9]*",
         attributes: item.attributes

package/govuk/components/error-summary/macro-options.json

@@ -15,13 +15,13 @@
         "name": "descriptionText",
         "type": "string",
         "required": false,
-        "description": "If `descriptionHtml` is set, this is not required. Text to use for the description of the errors. If `descriptionHtml` is provided,  `descriptionText` will be ignored."
+        "description": "Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`."
     },
     {
         "name": "descriptionHtml",
         "type": "string",
-        "required": true,
-        "description": "If `descriptionText` is set, this is not required. HTML to use for the description of the errors. If `descriptionHtml` is provided, `descriptionText` will be ignored."
+        "required": false,
+        "description": "HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`."
     },
     {
         "name": "errorList",

package/govuk/components/footer/_footer.scss

@@ -77,19 +77,6 @@
     }
   }
 
-  // Internet Explorer 8 does not support `:not()` selectors, so don't conditionally show underlines.
-  @include govuk-not-ie8 {
-    .govuk-footer__inline-list .govuk-footer__link,
-    .govuk-footer__list .govuk-footer__link {
-      text-decoration: none;
-
-      &:hover:not(:focus),
-      &:active:not(:focus) {
-        text-decoration: underline;
-      }
-    }
-  }
-
   .govuk-footer__section-break {
     margin: 0; // Reset `<hr>` default margins
     @include govuk-responsive-margin(8, "bottom");
@@ -99,20 +86,16 @@
 
   .govuk-footer__meta {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap; // Support: Flexbox
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; // Support: Flexbox
     -webkit-box-align: end;
-    -webkit-align-items: flex-end;
         -ms-flex-align: end;
             align-items: flex-end; // Support: Flexbox
     -webkit-box-pack: center;
-    -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center; // Support: Flexbox
   }
@@ -125,20 +108,18 @@
 
   .govuk-footer__meta-item--grow {
     -webkit-box-flex: 1;
-    -webkit-flex: 1;
         -ms-flex: 1;
             flex: 1; // Support: Flexbox
-    @include mq ($until: tablet) {
-      -webkit-flex-basis: 320px;
-          -ms-flex-preferred-size: 320px;
-              flex-basis: 320px; // Support: Flexbox
+    @include govuk-media-query ($until: tablet) {
+      -ms-flex-preferred-size: 320px;
+          flex-basis: 320px; // Support: Flexbox
     }
   }
 
   .govuk-footer__licence-logo {
     display: inline-block;
     margin-right: govuk-spacing(2);
-    @include mq ($until: desktop) {
+    @include govuk-media-query ($until: desktop) {
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
@@ -183,22 +164,20 @@
   .govuk-footer__heading {
     @include govuk-responsive-margin(7, "bottom");
     padding-bottom: govuk-spacing(4);
-    @include mq ($until: tablet) {
+    @include govuk-media-query ($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
     border-bottom: 1px solid $govuk-footer-border;
   }
 
   .govuk-footer__navigation {
     display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap; // Support: Flexbox
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; // Support: Flexbox
   }
 
   .govuk-footer__section {
@@ -209,28 +188,24 @@
     vertical-align: top;
     // Ensure columns take up equal width (typically one-half:one-half)
     -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; // Support: Flexbox
-    -webkit-flex-shrink: 1;
-        -ms-flex-negative: 1;
-            flex-shrink: 1; // Support: Flexbox
-    @include mq ($until: desktop) {
+    -ms-flex-negative: 1;
+        flex-shrink: 1; // Support: Flexbox
+    @include govuk-media-query ($until: desktop) {
       // Make sure columns do not drop below 200px in width
       // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -webkit-flex-basis: 200px;
-          -ms-flex-preferred-size: 200px;
-              flex-basis: 200px; // Support: Flexbox
+      -ms-flex-preferred-size: 200px;
+          flex-basis: 200px; // Support: Flexbox
     }
   }
 
   // If there are only two sections, set the layout to be two-third:one-third on desktop
-  @include mq ($from: desktop) {
+  @include govuk-media-query ($from: desktop) {
     // We match the first section with `:first-child`.
     // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
     .govuk-footer__section:first-child:nth-last-child(2) {
       -webkit-box-flex: 2;
-      -webkit-flex-grow: 2;
           -ms-flex-positive: 2;
               flex-grow: 2; // Support: Flexbox
     }
@@ -245,7 +220,7 @@
             column-gap: $govuk-gutter; // Support: Columns
   }
 
-  @include mq ($from: desktop) {
+  @include govuk-media-query ($from: desktop) {
     .govuk-footer__list--columns-2 {
       -webkit-column-count: 2;
          -moz-column-count: 2;

package/govuk/components/footer/template.njk

@@ -1,12 +1,12 @@
 <footer class="govuk-footer {{ params.classes if params.classes }}" role="contentinfo"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
-    {% if params.navigation %}
+    {% if params.navigation | length %}
       <div class="govuk-footer__navigation">
         {% for nav in params.navigation %}
           <div class="govuk-footer__section">
             <h2 class="govuk-footer__heading govuk-heading-m">{{ nav.title }}</h2>
-            {% if nav.items %}
+            {% if nav.items | length %}
               {% set listClasses %}
                 {% if nav.columns %}
                   govuk-footer__list--columns-{{ nav.columns }}
@@ -33,7 +33,7 @@
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
         {% if params.meta %}
           <h2 class="govuk-visually-hidden">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
-          {% if params.meta.items %}
+          {% if params.meta.items | length %}
             <ul class="govuk-footer__inline-list">
               {% for item in params.meta.items %}
                 <li class="govuk-footer__inline-list-item">