Merge pull request #1249 from alphagov/release-v2.9.0

Release v2.9.0

CHANGELOG.md

@@ -20,6 +20,18 @@
 
   ([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.9.0 (Feature release)
+
+🆕 New features:
+
 - Add classes to action items in the summary list component
 
   ([PR #1233](https://github.com/alphagov/govuk-frontend/pull/1233))
@@ -32,12 +44,6 @@
 
 🔧 Fixes:
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
-
 - Fix tabs bullet point character encoding issue when not enhanced
 
   Thanks [Ed Horsford](https://github.com/edwardhorsford) and [Steve Sims](https://github.com/stevesims) for their help on this one.
@@ -60,7 +66,6 @@
 
   ([PR #1242](https://github.com/alphagov/govuk-frontend/pull/1242))
 
-
 ## 2.8.0 (Feature release)
 
 🆕 New features:

dist/VERSION.txt

@@ -1 +1 @@
-2.8.0
+2.9.0

package/all.js

@@ -1801,9 +1801,7 @@ ErrorSummary.prototype.init = function () {
   if (!$module) {
     return
   }
-  window.addEventListener('load', function () {
-    $module.focus();
-  });
+  $module.focus();
 
   $module.addEventListener('click', this.handleClick.bind(this));
 };
@@ -2294,46 +2292,53 @@ Tabs.prototype.getHref = function ($tab) {
   return hash
 };
 
-function initAll () {
-  // Find all buttons with [role=button] on the document to enhance.
-  new Button(document).init();
+function initAll (options) {
+  // Set the options to an empty object by default if no options are passed.
+  options = typeof options !== 'undefined' ? options : {};
+
+  // Allow the user to initialise GOV.UK Frontend in only certain sections of the page
+  // Defaults to the entire document if nothing is set.
+  var scope = typeof options.scope !== 'undefined' ? options.scope : document;
+
+  // Find all buttons with [role=button] on the scope to enhance.
+  new Button(scope).init();
 
   // Find all global accordion components to enhance.
-  var $accordions = document.querySelectorAll('[data-module="accordion"]');
+  var $accordions = scope.querySelectorAll('[data-module="accordion"]');
   nodeListForEach($accordions, function ($accordion) {
     new Accordion($accordion).init();
   });
 
   // Find all global details elements to enhance.
-  var $details = document.querySelectorAll('details');
+  var $details = scope.querySelectorAll('details');
   nodeListForEach($details, function ($detail) {
     new Details($detail).init();
   });
 
-  var $characterCount = document.querySelectorAll('[data-module="character-count"]');
+  var $characterCount = scope.querySelectorAll('[data-module="character-count"]');
   nodeListForEach($characterCount, function ($characterCount) {
     new CharacterCount($characterCount).init();
   });
 
-  var $checkboxes = document.querySelectorAll('[data-module="checkboxes"]');
+  var $checkboxes = scope.querySelectorAll('[data-module="checkboxes"]');
   nodeListForEach($checkboxes, function ($checkbox) {
     new Checkboxes($checkbox).init();
   });
 
   // Find first error summary module to enhance.
-  var $errorSummary = document.querySelector('[data-module="error-summary"]');
+  var $errorSummary = scope.querySelector('[data-module="error-summary"]');
   new ErrorSummary($errorSummary).init();
 
   // Find first header module to enhance.
-  var $toggleButton = document.querySelector('[data-module="header"]');
+  var $toggleButton = scope.querySelector('[data-module="header"]');
   new Header($toggleButton).init();
 
-  var $radios = document.querySelectorAll('[data-module="radios"]');
+  var $radios = scope.querySelectorAll('[data-module="radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();
   });
 
-  var $tabs = document.querySelectorAll('[data-module="tabs"]');
+  var $tabs = scope.querySelectorAll('[data-module="tabs"]');
   nodeListForEach($tabs, function ($tabs) {
     new Tabs($tabs).init();
   });

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

@@ -715,9 +715,7 @@ ErrorSummary.prototype.init = function () {
   if (!$module) {
     return
   }
-  window.addEventListener('load', function () {
-    $module.focus();
-  });
+  $module.focus();
 
   $module.addEventListener('click', this.handleClick.bind(this));
 };

package/components/summary-list/macro-options.json

@@ -40,18 +40,18 @@
                 "required": false,
                 "description": "Classes to add to the value wrapper"
             },
+            {
+                "name": "actions.classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the actions wrapper"
+            },
             {
                 "name": "actions.items",
                 "type": "array",
                 "required": false,
                 "description": "Array of action item objects",
                 "params": [
-                    {
-                        "name": "classes",
-                        "type": "string",
-                        "required": false,
-                        "description": "Classes to add to the actions wrapper"
-                    },
                     {
                         "name": "href",
                         "type": "string",
@@ -75,6 +75,12 @@
                         "type": "string",
                         "required": false,
                         "description": "Actions rely on context from the surrounding content so may require additional accessible text, text supplied to this option is appended to the end, use `html` for more complicated scenarios."
+                    },
+                    {
+                        "name": "classes",
+                        "type": "string",
+                        "required": false,
+                        "description": "Classes to add to the action item"
                     }
                 ]
             }

package/components/summary-list/template.njk

@@ -1,5 +1,5 @@
 {%- macro _actionLink(action) %}
-  <a class="govuk-link" href="{{ action.href }}">
+  <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}">
     {{ action.html | safe if action.html else action.text }}
     {%- if action.visuallyHiddenText -%}
       <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>

package/components/tabs/_tabs.scss

@@ -29,7 +29,7 @@
     margin-left: govuk-spacing(5);
 
     &::before {
-      content: "— ";
+      content: "\2014 "; // "— "
       margin-left: - govuk-spacing(5);
       padding-right: govuk-spacing(1);
     }

package/helpers/_typography.scss

@@ -17,8 +17,9 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  // If using NTA, include the font-face definition
-  @if ($govuk-font-family == $govuk-font-family-nta) {
+  // If the user is using the default NTA font we need to include the font-face declarations.
+  // We do not need to include the NTA font-face declarations if alphagov/govuk_template is being used since they will already be included.
+  @if ($govuk-include-default-font-face) {
     @include _govuk-font-face-nta;
   }
 

package/objects/_main-wrapper.scss

@@ -21,12 +21,20 @@
 
 
 @mixin govuk-main-wrapper {
-  @include govuk-responsive-padding(6, "top");
-  @include govuk-responsive-padding(6, "bottom");
   // In IE11 the `main` element can be used, but is not recognized  –
   // meaning it's not defined in IE's default style sheet,
   // so it uses CSS initial value, which is inline.
   display: block;
+  padding-top: govuk-spacing(4);
+  padding-bottom: govuk-spacing(4);
+
+  @include govuk-media-query($from: tablet) {
+    // This spacing is manually adjusted to replicate the margin of
+    // govuk-heading-xl (50px) minus the spacing of back link and
+    // breadcrumbs (10px)
+    padding-top: govuk-spacing(7);
+    padding-bottom: govuk-spacing(7);
+  }
 }
 
 // Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links

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.8.0",
+  "version": "2.9.0",
   "main": "all.js",
   "sass": "all.scss",
   "engines": {

package/settings/_typography-font.scss

@@ -29,7 +29,19 @@ $govuk-font-family-tabular: $govuk-font-family-nta-tabular !default;
 
 $govuk-font-family-print: sans-serif !default;
 
+/// Include the default @font-face declarations
+///
+/// If you have set $govuk-font-family to something other than $govuk-font-family-nta this option is disabled by default.
+///
+/// If you are using $govuk-compatibility-govuktemplate this option is disabled by default.
+///
+/// @type Boolean
+/// @access public
 
+$govuk-include-default-font-face: (
+  $govuk-font-family == $govuk-font-family-nta and
+  not($govuk-compatibility-govuktemplate)
+ ) !default;
 
 // =========================================================
 // Font weights