Release v2.1.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.1.0 (Feature release)
+
+🆕 New features:
+
 - Allow additional 'meta' content in the footer
 
   You can now pass additional 'meta' content (as `meta.html` or `meta.text`)
@@ -42,12 +60,6 @@
 
   ([PR #998](https://github.com/alphagov/govuk-frontend/pull/998))
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
-
 🔧 Fixes:
 
 - Fix mobile menu button submitting parent forms
@@ -81,12 +93,6 @@
 
   ([PR #1002](https://github.com/alphagov/govuk-frontend/pull/1002))
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
-
 ## 2.0.0 (Breaking change)
 
 💥 Breaking changes:

dist/VERSION.txt

@@ -1 +1 @@
-2.0.0
+2.1.0

package/all.js

@@ -1655,16 +1655,18 @@ Tabs.prototype.hidePanel = function (tab) {
 
 Tabs.prototype.unhighlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'false');
+  $tab.classList.remove('govuk-tabs__tab--selected');
   $tab.setAttribute('tabindex', '-1');
 };
 
 Tabs.prototype.highlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'true');
+  $tab.classList.add('govuk-tabs__tab--selected');
   $tab.setAttribute('tabindex', '0');
 };
 
 Tabs.prototype.getCurrentTab = function () {
-  return this.$module.querySelector('[role=tab][aria-selected=true]')
+  return this.$module.querySelector('.govuk-tabs__tab--selected')
 };
 
 // this is because IE doesn't always return the actual value but a relative full path

package/components/back-link/macro-options.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": "The value of the link href attribute."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the anchor tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the anchor tag."
+    }
+]

package/components/breadcrumbs/README.md

@@ -288,6 +288,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">items.{}.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 breadcrumb anchor item.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">classes</th>
 
 <td class="govuk-table__cell ">string</td>

package/components/breadcrumbs/macro-options.json

@@ -0,0 +1,40 @@
+[
+    {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "Array of breadcrumbs item objects.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "If `html` is set, this is not required. Text to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": true,
+                "description": "If `text` is set, this is not required. HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "href",
+                "type": "string",
+                "required": false,
+                "description": "Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item."
+            }
+        ]
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the breadcrumbs container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the breadcrumbs container."
+    }
+]

package/components/breadcrumbs/template.njk

@@ -3,7 +3,7 @@
   {% for item in params.items %}
     {% if item.href %}
     <li class="govuk-breadcrumbs__list-item">
-      <a class="govuk-breadcrumbs__link" href="{{ item.href }}">{{ item.html | safe if item.html else item.text }}</a>
+      <a class="govuk-breadcrumbs__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
     </li>
     {% else %}
     <li class="govuk-breadcrumbs__list-item" aria-current="page">{{ item.html | safe if item.html else item.text }}</li>

package/components/button/_button.scss

@@ -18,9 +18,7 @@
     @include govuk-font($size: 19, $line-height: 19px);
     @include govuk-focusable;
 
-    -webkit-box-sizing: border-box;
-
-            box-sizing: border-box;
+    box-sizing: border-box;
     display: inline-block;
     position: relative;
     width: 100%;
@@ -31,8 +29,7 @@
     border-radius: 0;
     color: $govuk-button-text-colour;
     background-color: $govuk-button-colour;
-    -webkit-box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour;
-            box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+    box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
     text-align: center;
     vertical-align: top;
     cursor: pointer;
@@ -79,8 +76,7 @@
 
     &:active {
       top: $button-shadow-size;
-      -webkit-box-shadow: none;
-              box-shadow: none;
+      box-shadow: none;
 
       @include govuk-if-ie8 {
         border-bottom-width: 0;
@@ -138,8 +134,7 @@
 
     &:active {
       top: 0;
-      -webkit-box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour;
-              box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+      box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
       @include govuk-if-ie8 {
         border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
       }

package/components/button/macro-options.json

@@ -0,0 +1,62 @@
+[
+    {
+        "name": "element",
+        "type": "string",
+        "required": false,
+        "description": "Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`."
+    },
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
+    },
+    {
+        "name": "name",
+        "type": "string",
+        "required": true,
+        "description": "Name for the `input` or `button`. This has no effect on `a` elements."
+    },
+    {
+        "name": "type",
+        "type": "string",
+        "required": true,
+        "description": "Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements."
+    },
+    {
+        "name": "value",
+        "type": "string",
+        "required": true,
+        "description": "Value for the `button` tag. This has no effect on `a` or `input` elements."
+    },
+    {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": "Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically."
+    },
+    {
+        "name": "href",
+        "type": "string",
+        "required": false,
+        "description": "The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the button component."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the button component."
+    }
+]

package/components/checkboxes/_checkboxes.scss

@@ -74,8 +74,7 @@
 
   .govuk-checkboxes__input + .govuk-checkboxes__label::before {
     content: "";
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
+    box-sizing: border-box;
     position: absolute;
     top: 0;
     left: 0;
@@ -119,8 +118,7 @@
     // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
     outline: $govuk-focus-width solid transparent;
     outline-offset: $govuk-focus-width;
-    -webkit-box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
-            box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
+    box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 
   // Selected state