Merge pull request #957 from alphagov/release-1.3.0

Release v1.3.0 (feature release)

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))
+
+## 1.3.0 (feature release)
+
+🆕 New features:
+
 - Allow attributes on checkboxes/radios
 
   You can now provide attributes on checkbox and radio items
@@ -29,12 +41,6 @@
 
 🔧 Fixes:
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
-
 - Fix incorrect panel title bottom margin with optional text
 
   Margin is only added when panel text is provided

dist/VERSION.txt

@@ -1 +1 @@
-1.2.0
+1.3.0

package/components/button/_button.scss

@@ -67,7 +67,7 @@
     }
 
     // Fix unwanted button padding in Firefox
-    &:-moz-focus-inner {
+    &::-moz-focus-inner {
       padding: 0;
       border: 0;
     }

package/components/checkboxes/README.md

@@ -911,6 +911,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 checkbox input tag.</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/checkboxes/template.njk

@@ -55,7 +55,8 @@
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
-      {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}>
+      {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
       {{ govukLabel({
         html: item.html,
         text: item.text,

package/components/date-input/_date-input.scss

@@ -10,18 +10,18 @@
 @include govuk-exports("govuk/component/date-input") {
   .govuk-date-input {
     @include govuk-clearfix;
+    // font-size: 0 removes whitespace caused by inline-block
+    font-size: 0;
   }
 
   .govuk-date-input__item {
+    display: inline-block;
     margin-right: govuk-spacing(4);
     margin-bottom: 0;
-    float: left;
-    clear: none;
   }
 
   .govuk-date-input__label {
     display: block;
-    padding-bottom: 2px;
   }
 
   .govuk-date-input__input {

package/components/fieldset/_fieldset.scss

@@ -21,7 +21,7 @@
             box-sizing: border-box; // 1
     display: table;         // 2
     max-width: 100%;        // 1
-    margin-bottom: govuk-spacing(3);
+    margin-bottom: govuk-spacing(2);
     padding: 0;
     // Hack to let legends or elements within legends have margins in webkit browsers
     overflow: hidden;
@@ -33,14 +33,17 @@
 
   .govuk-fieldset__legend--xl {
     @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
   }
 
   .govuk-fieldset__legend--l {
     @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
   }
 
   .govuk-fieldset__legend--m {
     @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(3);
   }
 
   .govuk-fieldset__legend--s {

package/components/header/README.md

@@ -461,6 +461,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">navigation.{}.active</th>
+
+<td class="govuk-table__cell ">boolean</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Flag to mark the navigation item as active or not.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">navigationClasses</th>
 
 <td class="govuk-table__cell ">string</td>

package/components/hint/_hint.scss

@@ -16,14 +16,35 @@
   // Reduces margin-bottom of hint when used after the default label (no class)
   // or govuk-label--s for better vertical alignment.
 
-  // This adjustment will not work when the label is inside the <h1>, however
-  // it is unlikely that the default or govuk-label--s class would be used in
-  // this case.
+  // This adjustment will not work when the label is inside the <h1>, however it
+  // is unlikely that the default or govuk-label--s class would be used in this
+  // case.
 
-  // This adjustment will not work in browsers that do not support :not()
-  // Users with these browsers will see the default size margin (5px larger)
+  // This adjustment will not work in browsers that do not support :not(). 
+  // Users with these browsers will see the default size margin (5px larger).
 
   .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
     margin-bottom: govuk-spacing(2);
   }
+
+  // Reduces margin-bottom of hint when used after the default legend (no class)
+  // or govuk-fieldset__legend--s for better vertical alignment.
+
+  // This adjustment will not work when the legend is outside the <h1>, however
+  // it is unlikely that the default or govuk-fieldset__legend--s class would be
+  // used in this case.
+
+  // This adjustment will not work in browsers that do not support :not(). 
+  // Users with these browsers will see the default size margin (5px larger).
+
+  .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  // Reduces visual spacing of legend when there is a hint
+
+  .govuk-fieldset__legend + .govuk-hint,
+  .govuk-fieldset__legend + .govuk-hint {
+    margin-top: -(govuk-spacing(1));
+  }
 }

package/components/panel/_panel.scss

@@ -35,6 +35,10 @@
     @include govuk-font($size: 48, $weight: bold);
   }
 
+  .govuk-panel__title:last-child {
+    margin-bottom: 0;
+  }
+
   .govuk-panel__body {
     @include govuk-font($size: 36);
   }

package/components/radios/README.md

@@ -883,6 +883,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 radio input tag.</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/radios/template.njk

@@ -57,7 +57,8 @@
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
-      {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}>
+      {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
       {{ govukLabel({
         html: item.html,
         text: item.text,

package/components/tag/_tag.scss

@@ -7,7 +7,11 @@
     @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
 
     display: inline-block;
-    padding: govuk-spacing(1) 8px 0;
+    padding: 4px 8px;
+    // Since New Transport sits slightly higher than other common fonts.
+    // We use intentionally uneven padding to make it balanced, this can be
+    // removed using the version of the font that has a more common vertical spacing.
+    padding-bottom: 1px;
 
     // When a user customises their colours often the background is removed,
     // by adding a outline we ensure that the tag component still keeps it's meaning.

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

package/template.njk

@@ -1,8 +1,8 @@
-{% from "./components/skip-link/macro.njk" import govukSkipLink %}
-{% from "./components/header/macro.njk" import govukHeader %}
-{% from "./components/footer/macro.njk" import govukFooter %}
+{% from "./components/skip-link/macro.njk" import govukSkipLink -%}
+{% from "./components/header/macro.njk" import govukHeader -%}
+{% from "./components/footer/macro.njk" import govukFooter -%}
 {# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
-{% set assetUrl = assetUrl | default(assetPath) %}
+{%- set assetUrl = assetUrl | default(assetPath) -%}
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses }}">
   <head>