Merge pull request #1047 from alphagov/release-2.3.0

Release v2.3.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.3.0 (Feature release)
+
+🆕 New features:
+
 - Add important parameter to visually hidden sass mixins
 
   Optional parameter added to `govuk-visually-hidden` and `govuk-visually-hidden-focusable` mixins (defaults to true)
@@ -43,12 +61,6 @@
 
   ([PR #1035](https://github.com/alphagov/govuk-frontend/pull/1035))
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
-
 ## 2.2.0 (Feature release)
 
 🆕 New features:

dist/VERSION.txt

@@ -1 +1 @@
-2.2.0
+2.3.0

package/all.js

@@ -1691,9 +1691,11 @@ Tabs.prototype.teardown = function () {
 
 Tabs.prototype.onHashChange = function (e) {
   var hash = window.location.hash;
-  if (!this.hasTab(hash)) {
+  var $tabWithHash = this.getTab(hash);
+  if (!$tabWithHash) {
     return
   }
+
   // Prevent changing the hash
   if (this.changingHash) {
     this.changingHash = false;
@@ -1702,15 +1704,10 @@ Tabs.prototype.onHashChange = function (e) {
 
   // Show either the active tab according to the URL's hash or the first tab
   var $previousTab = this.getCurrentTab();
-  var $activeTab = this.getTab(hash) || this.$tabs[0];
 
   this.hideTab($previousTab);
-  this.showTab($activeTab);
-  $activeTab.focus();
-};
-
-Tabs.prototype.hasTab = function (hash) {
-  return this.$module.querySelector(hash)
+  this.showTab($tabWithHash);
+  $tabWithHash.focus();
 };
 
 Tabs.prototype.hideTab = function ($tab) {
@@ -1724,7 +1721,7 @@ Tabs.prototype.showTab = function ($tab) {
 };
 
 Tabs.prototype.getTab = function (hash) {
-  return this.$module.querySelector('a[role="tab"][href="' + hash + '"]')
+  return this.$module.querySelector('.govuk-tabs__tab[href="' + hash + '"]')
 };
 
 Tabs.prototype.setAttributes = function ($tab) {

package/components/checkboxes/macro-options.json

@@ -20,6 +20,20 @@
         "description": "Options for the errorMessage component (e.g. text).",
         "isComponent": true
     },
+    {
+        "name": "formGroup",
+        "type": "object",
+        "required": false,
+        "description": "Options for the form-group wrapper",
+        "params": [
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Optional classes to add to the form group (e.g. to show error state for the whole group)"
+            }
+        ]
+    },
     {
         "name": "idPrefix",
         "type": "string",

package/components/checkboxes/template.njk

@@ -83,7 +83,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

package/components/radios/macro-options.json

@@ -20,6 +20,20 @@
         "description": "Options for the errorMessage component (e.g. text).",
         "isComponent": true
     },
+    {
+        "name": "formGroup",
+        "type": "object",
+        "required": false,
+        "description": "Options for the form-group wrapper",
+        "params": [
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Optional classes to add to the form group (e.g. to show error state for the whole group)"
+            }
+        ]
+    },
     {
         "name": "idPrefix",
         "type": "string",

package/components/radios/template.njk

@@ -86,7 +86,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

package/components/table/README.md

@@ -442,6 +442,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">rows.[].attributes</th>
+
+<td class="govuk-table__cell">object</td>
+
+<td class="govuk-table__cell">No</td>
+
+<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the cell.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">head</th>
 
 <td class="govuk-table__cell">array</td>
@@ -502,6 +514,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">head.[].attributes</th>
+
+<td class="govuk-table__cell">object</td>
+
+<td class="govuk-table__cell">No</td>
+
+<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the cell.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">caption</th>
 
 <td class="govuk-table__cell">string</td>

package/components/table/macro-options.json

@@ -40,6 +40,12 @@
                 "type": "integer",
                 "required": false,
                 "description": "Specify how many rows a cell extends."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the table cell."
             }
         ]
     },
@@ -84,6 +90,12 @@
                 "type": "integer",
                 "required": false,
                 "description": "Specify how many rows a cell extends."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the table cell."
             }
         ]
     },

package/components/table/template.njk

@@ -12,7 +12,7 @@
       {%- if item.format %} govuk-table__header--{{ item.format }}{% endif %}
       {%- if item.classes %} {{ item.classes }}{% endif %}"
       {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
-      {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %} scope="col">{{ item.html |safe if item.html else item.text }}</th>
+      {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %} scope="col">{{ item.html |safe if item.html else item.text }}</th>
     {% endfor %}
     </tr>
   </thead>
@@ -28,13 +28,13 @@
       {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
       {%- if cell.classes %} {{ cell.classes }}{% endif %}"
       {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-      {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
+      {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ cell.html | safe if cell.html else cell.text }}</td>
       {% else %}
       <td class="govuk-table__cell 
       {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
       {%- if cell.classes %} {{ cell.classes }}{% endif %}"
       {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-      {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
+      {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ cell.html | safe if cell.html else cell.text }}</td>
       {% endif %}
     {% endfor %}
     </tr>

package/components/tabs/tabs.js

@@ -1130,9 +1130,11 @@ Tabs.prototype.teardown = function () {
 
 Tabs.prototype.onHashChange = function (e) {
   var hash = window.location.hash;
-  if (!this.hasTab(hash)) {
+  var $tabWithHash = this.getTab(hash);
+  if (!$tabWithHash) {
     return
   }
+
   // Prevent changing the hash
   if (this.changingHash) {
     this.changingHash = false;
@@ -1141,15 +1143,10 @@ Tabs.prototype.onHashChange = function (e) {
 
   // Show either the active tab according to the URL's hash or the first tab
   var $previousTab = this.getCurrentTab();
-  var $activeTab = this.getTab(hash) || this.$tabs[0];
 
   this.hideTab($previousTab);
-  this.showTab($activeTab);
-  $activeTab.focus();
-};
-
-Tabs.prototype.hasTab = function (hash) {
-  return this.$module.querySelector(hash)
+  this.showTab($tabWithHash);
+  $tabWithHash.focus();
 };
 
 Tabs.prototype.hideTab = function ($tab) {
@@ -1163,7 +1160,7 @@ Tabs.prototype.showTab = function ($tab) {
 };
 
 Tabs.prototype.getTab = function (hash) {
-  return this.$module.querySelector('a[role="tab"][href="' + hash + '"]')
+  return this.$module.querySelector('.govuk-tabs__tab[href="' + hash + '"]')
 };
 
 Tabs.prototype.setAttributes = function ($tab) {

package/helpers/_visually-hidden.scss

@@ -9,27 +9,29 @@
 /// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
 ///   - h5bp/html5-boilerplate - Thanks!
 ///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
 /// @access public
 
-@mixin govuk-visually-hidden {
-  position: absolute;
+@mixin govuk-visually-hidden($important: true) {
+  position: absolute iff($important, !important);
 
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
+  width: 1px iff($important, !important);
+  height: 1px iff($important, !important);
+  margin: -1px iff($important, !important);
+  padding: 0 iff($important, !important);
 
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  overflow: hidden iff($important, !important);
+  clip: rect(0 0 0 0) iff($important, !important);
+  -webkit-clip-path: inset(50%) iff($important, !important);
+          clip-path: inset(50%) iff($important, !important);
 
-  border: 0;
+  border: 0 iff($important, !important);
 
   // For long content, line feeds are not interpreted as spaces and small width
   // causes content to wrap 1 word per line:
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
-  white-space: nowrap;
+  white-space: nowrap iff($important, !important);
 }
 
 /// Hide an element visually, but have it available for screen readers whilst
@@ -39,38 +41,40 @@
 /// This is slightly less opinionated about borders and padding to make it
 /// easier to style the focussed element.
 ///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
 /// @access public
 
-@mixin govuk-visually-hidden-focusable {
-  position: absolute;
+@mixin govuk-visually-hidden-focusable($important: true) {
+  position: absolute iff($important, !important);
 
-  width: 1px;
-  height: 1px;
-  margin: -1px;
+  width: 1px iff($important, !important);
+  height: 1px iff($important, !important);
+  margin: -1px iff($important, !important);
 
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  overflow: hidden iff($important, !important);
+  clip: rect(0 0 0 0) iff($important, !important);
+  -webkit-clip-path: inset(50%) iff($important, !important);
+          clip-path: inset(50%) iff($important, !important);
 
   // For long content, line feeds are not interpreted as spaces and small width
   // causes content to wrap 1 word per line:
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
-  white-space: nowrap;
+  white-space: nowrap iff($important, !important);
 
   &:active,
   &:focus {
-    position: static;
+    position: static iff($important, !important);
 
-    width: auto;
-    height: auto;
-    margin: inherit;
+    width: auto iff($important, !important);
+    height: auto iff($important, !important);
+    margin: inherit iff($important, !important);
 
-    overflow: visible;
-    clip: auto;
-    -webkit-clip-path: none;
-            clip-path: none;
+    overflow: visible iff($important, !important);
+    clip: auto iff($important, !important);
+    -webkit-clip-path: none iff($important, !important);
+            clip-path: none iff($important, !important);
 
-    white-space: inherit;
+    white-space: inherit iff($important, !important);
   }
 }

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