govuk_publishing_components 9.5.1 → 9.5.2

data/node_modules/govuk-frontend/components/radios/_radios.scss

@@ -10,6 +10,9 @@
 @include govuk-exports("govuk/component/radios") {
   $govuk-radios-size: govuk-spacing(7);
   $govuk-radios-label-padding-left-right: govuk-spacing(3);
+  // When the default focus width is used on a curved edge it looks visually smaller.
+  // So for the circular radios we bump the default to make it look visually consistent.
+  $govuk-radios-focus-width: $govuk-focus-width + 1px;
 
   .govuk-radios__item {
     @include govuk-font($size: 19);
@@ -58,7 +61,8 @@
   }
 
   .govuk-radios__label {
-    display: block;
+    display: inline-block;
+    margin-bottom: 0;
     padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1);
     cursor: pointer;
     // remove 300ms pause on mobile
@@ -100,8 +104,13 @@
 
   // Focused state
   .govuk-radios__input:focus + .govuk-radios__label::before {
-    -webkit-box-shadow: 0 0 0 4px $govuk-focus-colour;
-            box-shadow: 0 0 0 4px $govuk-focus-colour;
+    // Since box-shadows are removed when users customise their colours
+    // We set a transparent outline that is shown instead.
+    // 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-radios-focus-width $govuk-focus-colour;
+            box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
   }
 
   // Selected state

data/node_modules/govuk-frontend/components/select/README.md

@@ -6,13 +6,13 @@ The HTML `<select>` element represents a control that provides a menu of options
 
 ## Guidance
 
-Find out when to use the Select component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/select).
+Find out when to use the select component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/select).
 
 ## Quick start examples
 
-### Component default
+### Select
 
-[Preview the select component](http://govuk-frontend-review.herokuapp.com/components/select/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/preview)
 
 #### Markup
 
@@ -34,13 +34,13 @@ Find out when to use the Select component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'select/macro.njk' import govukSelect %}
+    {% from "select/macro.njk" import govukSelect %}
 
     {{ govukSelect({
       "id": "select-1",
       "name": "select-1",
       "label": {
-        "html": "Label text goes here"
+        "text": "Label text goes here"
       },
       "items": [
         {
@@ -60,9 +60,9 @@ Find out when to use the Select component in your service in the [GOV.UK Design
       ]
     }) }}
 
-### Select--with-hint-text-and-error
+### Select with hint text and error message
 
-[Preview the select--with-hint-text-and-error example](http://govuk-frontend-review.herokuapp.com/components/select/with-hint-text-and-error/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/with-hint-text-and-error-message/preview)
 
 #### Markup
 
@@ -92,7 +92,7 @@ Find out when to use the Select component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'select/macro.njk' import govukSelect %}
+    {% from "select/macro.njk" import govukSelect %}
 
     {{ govukSelect({
       "id": "select-2",
@@ -122,9 +122,9 @@ Find out when to use the Select component in your service in the [GOV.UK Design
       ]
     }) }}
 
-### Select--with-label-as-page-heading
+### Select with label as page heading
 
-[Preview the select--with-label-as-page-heading example](http://govuk-frontend-review.herokuapp.com/components/select/with-label-as-page-heading/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/with-label-as-page-heading/preview)
 
 #### Markup
 
@@ -149,13 +149,13 @@ Find out when to use the Select component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'select/macro.njk' import govukSelect %}
+    {% from "select/macro.njk" import govukSelect %}
 
     {{ govukSelect({
       "id": "select-3",
       "name": "select-3",
       "label": {
-        "html": "Label text goes here",
+        "text": "Label text goes here",
         "isPageHeading": true
       },
       "items": [

data/node_modules/govuk-frontend/components/skip-link/README.md

@@ -6,13 +6,13 @@ Skip link component. Make skip links visible when they are tabbed to. You'll nee
 
 ## Guidance
 
-Find out when to use the Skip link component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/skip-link).
+Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link).
 
 ## Quick start examples
 
-### Component default
+### Skip link
 
-[Preview the skip-link component](http://govuk-frontend-review.herokuapp.com/components/skip-link/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/skip-link/preview)
 
 #### Markup
 
@@ -20,7 +20,7 @@ Find out when to use the Skip link component in your service in the [GOV.UK Desi
 
 #### Macro
 
-    {% from 'skip-link/macro.njk' import govukSkipLink %}
+    {% from "skip-link/macro.njk" import govukSkipLink %}
 
     {{ govukSkipLink({
       "text": "Skip to main content",

data/node_modules/govuk-frontend/components/table/README.md

@@ -6,13 +6,13 @@ Table description.
 
 ## Guidance
 
-Find out when to use the Table component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/table).
+Find out when to use the table component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/table).
 
 ## Quick start examples
 
-### Component default
+### Table
 
-[Preview the table component](http://govuk-frontend-review.herokuapp.com/components/table/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/preview)
 
 #### Markup
 
@@ -55,7 +55,7 @@ Find out when to use the Table component in your service in the [GOV.UK Design S
 
 #### Macro
 
-    {% from 'table/macro.njk' import govukTable %}
+    {% from "table/macro.njk" import govukTable %}
 
     {{ govukTable({
       "rows": [
@@ -101,9 +101,9 @@ Find out when to use the Table component in your service in the [GOV.UK Design S
       ]
     }) }}
 
-### Table--table-with-head
+### Table table with head
 
-[Preview the table--table-with-head example](http://govuk-frontend-review.herokuapp.com/components/table/table-with-head/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/table-with-head/preview)
 
 #### Markup
 
@@ -158,7 +158,7 @@ Find out when to use the Table component in your service in the [GOV.UK Design S
 
 #### Macro
 
-    {% from 'table/macro.njk' import govukTable %}
+    {% from "table/macro.njk" import govukTable %}
 
     {{ govukTable({
       "head": [
@@ -217,15 +217,15 @@ Find out when to use the Table component in your service in the [GOV.UK Design S
       ]
     }) }}
 
-### Table--table-with-caption-and-head
+### Table table with head and caption
 
-[Preview the table--table-with-caption-and-head example](http://govuk-frontend-review.herokuapp.com/components/table/table-with-caption-and-head/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/table-with-head-and-caption/preview)
 
 #### Markup
 
     <table class="govuk-table">
 
-      <caption class="govuk-table__caption govuk-heading-m">Caption 1 : Months and rates</caption>
+      <caption class="govuk-table__caption govuk-heading-m">Caption 1: Months and rates</caption>
 
       <thead class="govuk-table__head">
         <tr class="govuk-table__row">
@@ -276,10 +276,10 @@ Find out when to use the Table component in your service in the [GOV.UK Design S
 
 #### Macro
 
-    {% from 'table/macro.njk' import govukTable %}
+    {% from "table/macro.njk" import govukTable %}
 
     {{ govukTable({
-      "caption": "Caption 1 : Months and rates",
+      "caption": "Caption 1: Months and rates",
       "captionClasses": "govuk-heading-m",
       "firstCellIsHeader": true,
       "head": [

data/node_modules/govuk-frontend/components/table/_table.scss

@@ -16,13 +16,13 @@
   .govuk-table__header {
     @include govuk-typography-weight-bold;
 
-    padding: govuk-em(govuk-spacing(2), 19px) govuk-em(govuk-spacing(4), 19px) govuk-em(govuk-spacing(2), 19px) 0;
+    padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
   }
 
   .govuk-table__cell {
-    padding: govuk-em(govuk-spacing(2), 19px) govuk-em(govuk-spacing(4), 19px) govuk-em(govuk-spacing(2), 19px) 0;
+    padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
   }

data/node_modules/govuk-frontend/components/tabs/README.md

@@ -6,13 +6,13 @@ Component for conditionally revealing content, using tabs and tabs panels.
 
 ## Guidance
 
-Find out when to use the Tabs component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/tabs).
+Find out when to use the tabs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs).
 
 ## Quick start examples
 
-### Component default
+### Tabs
 
-[Preview the tabs component](http://govuk-frontend-review.herokuapp.com/components/tabs/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tabs/preview)
 
 #### Markup
 
@@ -177,7 +177,7 @@ Find out when to use the Tabs component in your service in the [GOV.UK Design Sy
 
 #### Macro
 
-    {% from 'tabs/macro.njk' import govukTabs %}
+    {% from "tabs/macro.njk" import govukTabs %}
 
     {{ govukTabs({
       "items": [

data/node_modules/govuk-frontend/components/tabs/_tabs.scss

@@ -8,6 +8,7 @@
     @include govuk-font($size: 19);
     @include govuk-text-colour;
     @include govuk-responsive-margin(1, "top");
+    @include govuk-responsive-margin(6, "bottom");
   }
 
   .govuk-tabs__title {

data/node_modules/govuk-frontend/components/tag/README.md

@@ -6,13 +6,13 @@ Phase tags are mostly used inside phase banners as an indication of the state of
 
 ## Guidance
 
-Find out when to use the Tag component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/tag).
+Find out when to use the tag component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tag).
 
 ## Quick start examples
 
-### Component default
+### Tag
 
-[Preview the tag component](http://govuk-frontend-review.herokuapp.com/components/tag/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tag/preview)
 
 #### Markup
 
@@ -22,15 +22,15 @@ Find out when to use the Tag component in your service in the [GOV.UK Design Sys
 
 #### Macro
 
-    {% from 'tag/macro.njk' import govukTag %}
+    {% from "tag/macro.njk" import govukTag %}
 
     {{ govukTag({
       "text": "alpha"
     }) }}
 
-### Tag--inactive
+### Tag inactive
 
-[Preview the tag--inactive example](http://govuk-frontend-review.herokuapp.com/components/tag/inactive/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tag/inactive/preview)
 
 #### Markup
 
@@ -40,7 +40,7 @@ Find out when to use the Tag component in your service in the [GOV.UK Design Sys
 
 #### Macro
 
-    {% from 'tag/macro.njk' import govukTag %}
+    {% from "tag/macro.njk" import govukTag %}
 
     {{ govukTag({
       "text": "alpha",

data/node_modules/govuk-frontend/components/tag/_tag.scss

@@ -9,6 +9,12 @@
     display: inline-block;
     padding: govuk-spacing(1) 8px 0;
 
+    // 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.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
     color: govuk-colour("white");
     background-color: govuk-colour("blue");
     letter-spacing: 1px;

data/node_modules/govuk-frontend/components/textarea/README.md

@@ -6,13 +6,13 @@ A multi-line text field.
 
 ## Guidance
 
-Find out when to use the Textarea component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/textarea).
+Find out when to use the textarea component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/textarea).
 
 ## Quick start examples
 
-### Component default
+### Textarea
 
-[Preview the textarea component](http://govuk-frontend-review.herokuapp.com/components/textarea/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/preview)
 
 #### Markup
 
@@ -30,7 +30,7 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
 
 #### Macro
 
-    {% from 'textarea/macro.njk' import govukTextarea %}
+    {% from "textarea/macro.njk" import govukTextarea %}
 
     {{ govukTextarea({
       "name": "more-detail",
@@ -43,9 +43,9 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
       }
     }) }}
 
-### Textarea--with error message
+### Textarea with error message
 
-[Preview the textarea--with error message example](http://govuk-frontend-review.herokuapp.com/components/textarea/with error message/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-error-message/preview)
 
 #### Markup
 
@@ -63,7 +63,7 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
 
 #### Macro
 
-    {% from 'textarea/macro.njk' import govukTextarea %}
+    {% from "textarea/macro.njk" import govukTextarea %}
 
     {{ govukTextarea({
       "name": "no-ni-reason",
@@ -76,9 +76,9 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
       }
     }) }}
 
-### Textarea--with default value
+### Textarea with default value
 
-[Preview the textarea--with default value example](http://govuk-frontend-review.herokuapp.com/components/textarea/with default value/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-default-value/preview)
 
 #### Markup
 
@@ -95,7 +95,7 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
 
 #### Macro
 
-    {% from 'textarea/macro.njk' import govukTextarea %}
+    {% from "textarea/macro.njk" import govukTextarea %}
 
     {{ govukTextarea({
       "id": "full-address",
@@ -106,9 +106,9 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
       }
     }) }}
 
-### Textarea--with custom rows
+### Textarea with custom rows
 
-[Preview the textarea--with custom rows example](http://govuk-frontend-review.herokuapp.com/components/textarea/with custom rows/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-custom-rows/preview)
 
 #### Markup
 
@@ -122,7 +122,7 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
 
 #### Macro
 
-    {% from 'textarea/macro.njk' import govukTextarea %}
+    {% from "textarea/macro.njk" import govukTextarea %}
 
     {{ govukTextarea({
       "id": "full-address",
@@ -133,9 +133,9 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
       "rows": 8
     }) }}
 
-### Textarea--with label as page heading
+### Textarea with label as page heading
 
-[Preview the textarea--with label as page heading example](http://govuk-frontend-review.herokuapp.com/components/textarea/with label as page heading/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-label-as-page-heading/preview)
 
 #### Markup
 
@@ -152,7 +152,7 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig
 
 #### Macro
 
-    {% from 'textarea/macro.njk' import govukTextarea %}
+    {% from "textarea/macro.njk" import govukTextarea %}
 
     {{ govukTextarea({
       "id": "textarea-with-page-heading",

data/node_modules/govuk-frontend/components/warning-text/README.md

@@ -6,13 +6,13 @@ Use bold text with an exclamation icon if there are consequences - for example,
 
 ## Guidance
 
-Find out when to use the Warning text component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/warning-text).
+Find out when to use the warning text component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/warning-text).
 
 ## Quick start examples
 
-### Component default
+### Warning text
 
-[Preview the warning-text component](http://govuk-frontend-review.herokuapp.com/components/warning-text/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/warning-text/preview)
 
 #### Markup
 
@@ -26,7 +26,7 @@ Find out when to use the Warning text component in your service in the [GOV.UK D
 
 #### Macro
 
-    {% from 'warning-text/macro.njk' import govukWarningText %}
+    {% from "warning-text/macro.njk" import govukWarningText %}
 
     {{ govukWarningText({
       "text": "You can be fined up to £5,000 if you don’t register.",