Release v2.6.0

CHANGELOG.md

@@ -14,6 +14,24 @@
 
 🆕 New features:
 
+- Pull Request Title goes here
+
+  Description goes here (optional)
+
+  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+
+🔧 Fixes:
+
+- Pull Request Title goes here
+
+  Description goes here (optional)
+
+  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+
+## 2.6.0 (Feature release)
+
+🆕 New features:
+
 - Enable `autocomplete` attributes for input components.
 
   You can now set the `autocomplete` attribute on input, date input and textarea components using the component macros.
@@ -26,12 +44,6 @@
 
 🔧 Fixes:
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
-
 - Include Accordion component in global namespace
 
   Accordion component was not exported and was therefore unavailable in global namespace

dist/VERSION.txt

@@ -1 +1 @@
-2.5.1
+2.6.0

package/all.js

@@ -1703,8 +1703,10 @@ Checkboxes.prototype.setAttributes = function ($input) {
   var inputIsChecked = $input.checked;
   $input.setAttribute('aria-expanded', inputIsChecked);
 
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
-  $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
+  if ($content) {
+    $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+  }
 };
 
 Checkboxes.prototype.handleClick = function (event) {
@@ -1982,8 +1984,10 @@ Radios.prototype.setAttributes = function ($input) {
   var inputIsChecked = $input.checked;
   $input.setAttribute('aria-expanded', inputIsChecked);
 
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
-  $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
+  if ($content) {
+    $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+  }
 };
 
 Radios.prototype.handleClick = function (event) {
@@ -2311,6 +2315,7 @@ function initAll () {
 }
 
 exports.initAll = initAll;
+exports.Accordion = Accordion;
 exports.Button = Button;
 exports.Details = Details;
 exports.CharacterCount = CharacterCount;

package/components/accordion/_accordion.scss

@@ -7,13 +7,11 @@
 
   .govuk-accordion {
     @include govuk-responsive-margin(6, "bottom");
-    // Border at the bottom of the whole accordion
-    border-bottom: 1px solid $govuk-border-colour;
   }
 
   // Borders between accordion sections
   .govuk-accordion__section {
-    border-top: 1px solid $govuk-border-colour;
+    padding-top: govuk-spacing(3);
   }
 
   .govuk-accordion__section-header {
@@ -28,6 +26,7 @@
   // Buttons within the sections don’t need default styling
   .govuk-accordion__section-button {
     @include govuk-font($size: 24, $weight: bold);
+    display: inline-block;
     margin-bottom: 0;
     padding-top: govuk-spacing(3);
   }
@@ -37,21 +36,32 @@
     margin-bottom: 0;
   }
 
+  // Remove the bottom margin from the last item inside the content
+  .govuk-accordion__section-content > :last-child {
+    margin-bottom: 0;
+  }
+
   // JavaScript enabled
   .js-enabled {
 
+    .govuk-accordion {
+      // Border at the bottom of the whole accordion
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+
+    // Borders between accordion sections
+    .govuk-accordion__section {
+      padding-top: 0;
+      border-top: 1px solid $govuk-border-colour;
+    }
+
     // Hide the body of collapsed sections
     .govuk-accordion__section-content {
       display: none;
       @include govuk-responsive-padding(3, "top");
       @include govuk-responsive-padding(3, "bottom");
     }
 
-    // Remove the bottom margin from the last item inside the content
-    .govuk-accordion__section-content > :last-child {
-      margin-bottom: 0;
-    }
-
     // Show the body of expanded sections
     .govuk-accordion__section--expanded .govuk-accordion__section-content {
       display: block;
@@ -83,6 +93,11 @@
     // Section headers have a grey background on hover as an additional affodance
     .govuk-accordion__section-header:hover {
       background-color: govuk-colour("grey-4");
+      // For devices that can't hover such as touch devices,
+      // remove hover state as it can be stuck in that state (iOS).
+      @media (hover: none) {
+        background-color: initial;
+      }
     }
 
     // Setting focus styles on header so that summary that is not part of the button is included in focus

package/components/checkboxes/checkboxes.js

@@ -1065,8 +1065,10 @@ Checkboxes.prototype.setAttributes = function ($input) {
   var inputIsChecked = $input.checked;
   $input.setAttribute('aria-expanded', inputIsChecked);
 
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
-  $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
+  if ($content) {
+    $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+  }
 };
 
 Checkboxes.prototype.handleClick = function (event) {

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

@@ -41,6 +41,12 @@
                 "required": false,
                 "description": "If provided, it will be used as the initial value of the input."
             },
+            {
+                "name": "autocomplete",
+                "type": "string",
+                "required": false,
+                "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"postal-code\" or \"username\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
+            },
             {
                 "name": "classes",
                 "type": "string",

package/components/date-input/template.njk

@@ -65,6 +65,7 @@
         name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
         value: item.value,
         type: "number",
+        autocomplete: item.autocomplete,
         attributes: {
           pattern: "[0-9]*"
         }

package/components/header/_header.scss

@@ -124,13 +124,18 @@
     @include govuk-font($size: 24, $weight: bold);
   }
 
+  .govuk-header__logo,
+  .govuk-header__content {
+    box-sizing: border-box;
+  }
+
   .govuk-header__logo {
     @include govuk-responsive-margin(2, "bottom");
     padding-right: govuk-spacing(8);
 
     @include mq ($from: desktop) {
       width: 33.33%;
-      padding-right: 0;
+      padding-right: $govuk-gutter-half;
       float: left;
       vertical-align: top;
     }
@@ -139,6 +144,7 @@
   .govuk-header__content {
     @include mq ($from: desktop) {
       width: 66.66%;
+      padding-left: $govuk-gutter-half;
       float: left;
     }
   }

package/components/input/macro-options.json

@@ -64,6 +64,12 @@
         "required": false,
         "description": "Classes to add to the anchor tag."
     },
+    {
+        "name": "autocomplete",
+        "type": "string",
+        "required": false,
+        "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"postal-code\" or \"username\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
+    },
     {
         "name": "attributes",
         "type": "object",

package/components/input/template.njk

@@ -39,5 +39,6 @@
   <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
 </div>

package/components/radios/radios.js

@@ -1065,8 +1065,10 @@ Radios.prototype.setAttributes = function ($input) {
   var inputIsChecked = $input.checked;
   $input.setAttribute('aria-expanded', inputIsChecked);
 
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
-  $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
+  if ($content) {
+    $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+  }
 };
 
 Radios.prototype.handleClick = function (event) {

package/components/textarea/macro-options.json

@@ -70,6 +70,12 @@
         "required": false,
         "description": "Classes to add to the textarea."
     },
+    {
+        "name": "autocomplete",
+        "type": "string",
+        "required": false,
+        "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"postal-code\" or \"username\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
+    },
     {
         "name": "attributes",
         "type": "object",

package/components/textarea/template.njk

@@ -38,5 +38,6 @@
 {% endif %}
   <textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
 </div>

package/objects/_width-container.scss

@@ -2,10 +2,6 @@
   // Limit the width of the container to the page width
   max-width: $govuk-page-width;
 
-  @include govuk-if-ie8 {
-    width: $govuk-page-width;
-  }
-
   // On mobile, add half width gutters
   margin: 0 $govuk-gutter-half;
 
@@ -19,6 +15,13 @@
   @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
     margin: 0 auto;
   }
+
+  @include govuk-if-ie8 {
+    width: $govuk-page-width;
+    // Since media queries are not supported in IE8,
+    // we need to duplicate this margin that centers the page.
+    margin: 0 auto;
+  }
 }
 
 @include govuk-exports("govuk/objects/width-container") {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "govuk-frontend",
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "main": "all.js",
   "sass": "all.scss",
   "engines": {