govuk_publishing_components 16.10.1 → 16.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '08655ae6d9a58f9aae28373e15b632ea8c57afd01964b1f35e97da6cd6dc139c'
-  data.tar.gz: e788d563adcf94fe97fbe952941bdb1df2bb40033a5f616a4d6c6df2dee8592b
+  metadata.gz: b0f7149647a844701e08e1592bfcfcd345a5e91d7d9bf7f8a3b56dd65665d30a
+  data.tar.gz: 3154dd32d9da143993c2cdda363dac84607647af7fd463c3ca1d46429ca31fa8
 SHA512:
-  metadata.gz: 963441d25764cc36d97fd6a81ddacddcdab6057dded3788ca86385da56b1cd26f1b35d224a5f1ce14a00391d7e2fde35b9ad1403707a58eaf02e2e2bce1b5652
-  data.tar.gz: 83c4cd8d61aa04e3ac4ff85c9fe53f4b1074ef38cfb5282414f8236234ae6ccbfd20a525cf21693949c09057f69c56e05aa8688afd4c28efb426b59f4929c4d9
+  metadata.gz: 1f7ca0eeab97cc5be4c1df01908791947ef3cf76e64f863a2bf769e6b5fd90e91746a86f7862b7add278e00cdae26d03b32f3e1d740ce0559a2e3d14e0aaa75a
+  data.tar.gz: 035105c93e8e29651565ea190f571fb30fa2b029f8895624f661dcd4e5ecf9a8943cafa116a6ace28c9220a94ab1b117a04f30471c3c0db26d154650a832381b

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -4,7 +4,7 @@
   'use strict'
 
   if (document.querySelectorAll && document.addEventListener) {
-    var els = document.querySelectorAll('.js-header-toggle')
+    var els = document.querySelectorAll('a.js-header-toggle')
     var i
     var _i
     for (i = 0, _i = els.length; i < _i; i++) {

data/app/views/govuk_publishing_components/components/_checkboxes.html.erb

@@ -1,4 +1,5 @@
 <%
+  # cb_helper.css_classes generates "gem-c-checkboxes"
   cb_helper = GovukPublishingComponents::Presenters::CheckboxesHelper.new(local_assigns)
   id = cb_helper.id
 %>
@@ -17,7 +18,7 @@
           <%= tag.span error, id: "#{id}-error", class: "govuk-error-message" %>
         <% end %>
 
-        <%= tag.ul class: "govuk-checkboxes gem-c-checkboxes__list", data: {
+        <%= tag.ul class: cb_helper.list_classes, data: {
           module: ('checkboxes' if cb_helper.has_conditional),
           nested: ('true' if cb_helper.has_nested),
         } do %>

data/app/views/govuk_publishing_components/components/_radio.html.erb

@@ -4,6 +4,7 @@
 
   label ||= nil
   heading ||= nil
+  small ||= false
   is_page_heading ||= false
   hint ||= nil
   error_message ||= nil
@@ -16,6 +17,9 @@
   form_group_css_classes = %w(govuk-form-group)
   form_group_css_classes << "govuk-form-group--error" if has_error
 
+  radio_classes = %w(govuk-radios)
+  radio_classes << "govuk-radios--small" if small
+
   aria = "#{hint_id} #{"#{error_id}" if has_error}".strip if hint or has_error
 
   # check if any item is set as being conditional
@@ -53,7 +57,7 @@
       } %>
     <% end %>
 
-    <%= content_tag :div, class: "govuk-radios",
+    <%= content_tag :div, class: radio_classes,
       data: {
         module: ('radios' if has_conditional)
       } do %>

data/app/views/govuk_publishing_components/components/docs/checkboxes.yml

@@ -32,6 +32,16 @@ examples:
           value: "green"
         - label: "Blue"
           value: "blue"
+  with_small_checkboxes:
+    data:
+      name: "favourite_small_synonym"
+      heading: "What is your favourite synonym for small?"
+      small: true
+      items:
+        - label: "Tiny"
+          value: "tiny"
+        - label: "Little"
+          value: "little"
   with_a_heading_on_one_checkbox:
     description: One checkbox does not require a fieldset and therefore does not require a legend. However, if a heading is supplied, a fieldset will be included in the component and the heading used as the legend, as shown.
     data:

data/app/views/govuk_publishing_components/components/docs/radio.yml

@@ -44,6 +44,15 @@ examples:
         text: "Use Government Gateway"
       - value: "govuk-verify"
         text: "Use GOV.UK Verify"
+  with_small_radios:
+    data:
+      name: "radio-group"
+      small: true
+      items:
+      - value: "government-gateway"
+        text: "Use Government Gateway"
+      - value: "govuk-verify"
+        text: "Use GOV.UK Verify"
   with_bold:
     description: 'Used to provide better contrast between long labels and hint text, Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)'
     data:

data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb

@@ -4,7 +4,7 @@ module GovukPublishingComponents
       include ActionView::Helpers
       include ActionView::Context
 
-      attr_reader :items, :name, :css_classes, :error, :has_conditional, :has_nested, :id, :hint_text
+      attr_reader :items, :name, :css_classes, :list_classes, :error, :has_conditional, :has_nested, :id, :hint_text
 
       def initialize(options)
         @items = options[:items] || []
@@ -13,6 +13,9 @@ module GovukPublishingComponents
         @css_classes << "govuk-form-group--error" if options[:error]
         @error = true if options[:error]
 
+        @list_classes = %w(govuk-checkboxes gem-c-checkboxes__list)
+        @list_classes << "govuk-checkboxes--small" if options[:small]
+
         # check if any item is set as being conditional
         @has_conditional = options[:items].any? { |item| item.is_a?(Hash) && item[:conditional] }
         @has_nested = options[:items].any? { |item| item.is_a?(Hash) && item[:items] }

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '16.10.1'.freeze
+  VERSION = '16.11.0'.freeze
 end

data/node_modules/accessible-autocomplete/package.json

@@ -49,7 +49,7 @@
     "/"
   ],
   "_resolved": "git://github.com/alphagov/accessible-autocomplete.git#0c518b4fa79b9a95b544410858486ed9e6403c84",
-  "_shasum": "978047a05492695e21154f9ec9403d5c46ea26ff",
+  "_shasum": "8110fa374a6fa8c8f301c94e46d4513f8bb0131c",
   "_shrinkwrap": null,
   "_spec": "accessible-autocomplete@git://github.com/alphagov/accessible-autocomplete.git#add-multiselect-support",
   "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",

data/node_modules/govuk-frontend/components/checkboxes/_checkboxes.scss

@@ -8,7 +8,10 @@
 @import "../label/label";
 
 @include govuk-exports("govuk/component/checkboxes") {
-  $govuk-checkboxes-size: govuk-spacing(7);
+
+  $govuk-touch-target-size: 44px;
+  $govuk-checkboxes-size: 40px;
+  $govuk-small-checkboxes-size: 24px;
   $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
 
   .govuk-checkboxes__item {
@@ -20,7 +23,7 @@
     min-height: $govuk-checkboxes-size;
 
     margin-bottom: govuk-spacing(2);
-    padding: 0 0 0 $govuk-checkboxes-size;
+    padding-left: $govuk-checkboxes-size;
 
     clear: left;
   }
@@ -31,25 +34,33 @@
   }
 
   .govuk-checkboxes__input {
-    position: absolute;
-
-    z-index: 1;
-    top: 0;
-    left: 0;
-
-    width: $govuk-checkboxes-size;
-    height: $govuk-checkboxes-size;
+    $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2;
 
     cursor: pointer;
 
-    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
+    // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
+    // elements there.
     @include govuk-not-ie8 {
+      position: absolute;
+
+      z-index: 1;
+      top: $input-offset * -1;
+      left: $input-offset * -1;
+
+      width: $govuk-touch-target-size;
+      height: $govuk-touch-target-size;
       margin: 0;
+
       opacity: 0;
     }
 
-    // add focus outline to input element for IE8
     @include govuk-if-ie8 {
+      margin-top: 10px;
+      margin-right: $govuk-checkboxes-size / -2;
+      margin-left: $govuk-checkboxes-size / -2;
+      float: left;
+
+      // add focus outline to input
       &:focus {
         outline: $govuk-focus-width solid $govuk-focus-colour;
       }
@@ -63,16 +74,11 @@
     cursor: pointer;
     // remove 300ms pause on mobile
     -ms-touch-action: manipulation;
-    touch-action: manipulation;
+        touch-action: manipulation;
   }
 
-  .govuk-checkboxes__hint {
-    display: block;
-    padding-right: $govuk-checkboxes-label-padding-left-right;
-    padding-left: $govuk-checkboxes-label-padding-left-right;
-  }
-
-  .govuk-checkboxes__input + .govuk-checkboxes__label::before {
+  // [ ] Check box
+  .govuk-checkboxes__label::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -82,11 +88,13 @@
     height: $govuk-checkboxes-size;
     border: $govuk-border-width-form-element solid currentColor;
     background: transparent;
-
-    // padding-bottom: 1px;
   }
 
-  .govuk-checkboxes__input + .govuk-checkboxes__label::after {
+  // ✔ Check mark
+  //
+  // The check mark is a box with a border on the left and bottom side (└──),
+  // rotated 45 degrees
+  .govuk-checkboxes__label::after {
     content: "";
 
     position: absolute;
@@ -111,10 +119,16 @@
     background: transparent;
   }
 
+  .govuk-checkboxes__hint {
+    display: block;
+    padding-right: $govuk-checkboxes-label-padding-left-right;
+    padding-left: $govuk-checkboxes-label-padding-left-right;
+  }
+
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-    // Since box-shadows are removed when users customise their colours
-    // We set a transparent outline that is shown instead.
+    // 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;
@@ -136,6 +150,10 @@
     opacity: .5;
   }
 
+  // =========================================================
+  // Conditional reveals
+  // =========================================================
+
   $conditional-border-width: $govuk-border-width-mobile;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
   $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
@@ -158,4 +176,135 @@
       margin-bottom: 0;
     }
   }
+
+  // =========================================================
+  // Small checkboxes
+  // =========================================================
+
+  .govuk-checkboxes--small {
+
+    $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;
+    $label-offset: $govuk-touch-target-size - $input-offset;
+
+    .govuk-checkboxes__item {
+      @include govuk-clearfix;
+      min-height: 0;
+      margin-bottom: 0;
+      padding-left: $label-offset;
+      float: left;
+    }
+
+    // Shift the touch target into the left margin so that the visible edge of
+    // the control is aligned
+    //
+    //   ┆What colours do you like?
+    //  ┌┆───┐
+    //  │┆[] │ Purple
+    //  └┆▲──┘
+    //  ▲┆└─ Check box pseudo element, aligned with margin
+    //  └─── Touch target (invisible input), shifted into the margin
+    .govuk-checkboxes__input {
+      @include govuk-not-ie8 {
+        left: $input-offset * -1;
+      }
+
+      @include govuk-if-ie8 {
+        margin-left: $govuk-small-checkboxes-size * -1;
+      }
+    }
+
+    // Adjust the size and position of the label.
+    //
+    // Unlike larger checkboxes, we also have to float the label in order to
+    // 'shrink' it, preventing the hover state from kicking in across the full
+    // width of the parent element.
+    .govuk-checkboxes__label {
+      margin-top: -2px;
+      padding: 13px govuk-spacing(3) 13px 1px;
+      float: left;
+
+      @include govuk-media-query($from: tablet) {
+        padding: 11px govuk-spacing(3) 10px 1px;
+      }
+    }
+
+    // [ ] Check box
+    //
+    // Reduce the size of the check box [1], vertically center it within the
+    // touch target [2]
+    .govuk-checkboxes__label::before {
+      top: $input-offset - $govuk-border-width-form-element; // 2
+      width: $govuk-small-checkboxes-size; // 1
+      height: $govuk-small-checkboxes-size; // 1
+    }
+
+    // ✔ Check mark
+    //
+    // Reduce the size of the check mark and re-align within the checkbox
+    .govuk-checkboxes__label::after {
+      top: 15px;
+      left: 6px;
+      width: 9px;
+      height: 3.5px;
+      border-width: 0 0 3px 3px;
+    }
+
+    // Fix position of hint with small checkboxes
+    //
+    // Do not use hints with small checkboxes – because they're within the input
+    // wrapper they trigger the hover state, but clicking them doesn't actually
+    // activate the control.
+    //
+    // (If you do use them, they won't look completely broken... but seriously,
+    // don't use them)
+    .govuk-checkboxes__hint {
+      padding: 0;
+      clear: both;
+    }
+
+    // Align conditional reveals with small checkboxes
+    .govuk-checkboxes__conditional {
+      $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);
+      margin-left: $margin-left;
+      padding-left: $label-offset - ($margin-left + $conditional-border-width);
+      clear: both;
+    }
+
+    // Hover state for small checkboxes.
+    //
+    // We use a hover state for small checkboxes because the touch target size
+    // is so much larger than their visible size, and so we need to provide
+    // feedback to the user as to which checkbox they will select when their
+    // cursor is outside of the visible area.
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+    }
+
+    // Because we've overridden the border-shadow provided by the focus state,
+    // we need to redefine that too.
+    //
+    // We use two box shadows, one that restores the original focus state [1]
+    // and another that then applies the hover state [2].
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+      // sass-lint:disable indentation
+      box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
+                  0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+    }
+
+    // For devices that explicitly don't support hover, don't provide a hover
+    // state (e.g. on touch devices like iOS).
+    //
+    // We can't use `@media (hover: hover)` because we wouldn't get the hover
+    // state in browsers that don't support `@media (hover)` (like Internet
+    // Explorer) – so we have to 'undo' the hover state instead.
+    @media (hover: none), (pointer: coarse) {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+        box-shadow: initial;
+      }
+
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+        box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
+      }
+    }
+  }
 }

data/node_modules/govuk-frontend/components/checkboxes/template.njk

@@ -54,15 +54,15 @@
     {% set name = item.name if item.name else params.name %}
     {% set conditionalId = "conditional-" + id %}
     {% set hasHint = true if item.hint.text or item.hint.html %}
-    {% set itemHintId = id + '-item-hint' %}
+    {% set itemHintId = id + "-item-hint" if hasHint else "" %}
+    {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
+    {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
     <div class="govuk-checkboxes__item">
       <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
-      {#- fieldset is false by default -#}
-      {%- if (not hasFieldset) and ((describedBy | length) > 0) %} aria-describedby="{{ describedBy }}"{% endif -%}
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
-      {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+      {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
       {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
       {{ govukLabel({
         html: item.html,

data/node_modules/govuk-frontend/components/fieldset/template.njk

@@ -4,13 +4,13 @@
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% if params.legend.html or params.legend.text %}
   <legend class="govuk-fieldset__legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
-  {%- if params.legend.isPageHeading %}
+  {% if params.legend.isPageHeading %}
     <h1 class="govuk-fieldset__heading">
       {{ params.legend.html | safe if params.legend.html else params.legend.text }}
     </h1>
   {% else %}
     {{ params.legend.html | safe if params.legend.html else params.legend.text }}
-  {% endif -%}
+  {% endif %}
   </legend>
   {% endif %}
 {{ caller() if caller }} {#- if statement allows usage of `call` to be optional -#}

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

@@ -8,7 +8,10 @@
 @import "../label/label";
 
 @include govuk-exports("govuk/component/radios") {
-  $govuk-radios-size: govuk-spacing(7);
+
+  $govuk-touch-target-size: 44px;
+  $govuk-radios-size: 40px;
+  $govuk-small-radios-size: 24px;
   $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.
@@ -18,13 +21,12 @@
     @include govuk-font($size: 19);
 
     display: block;
-
     position: relative;
 
     min-height: $govuk-radios-size;
 
     margin-bottom: govuk-spacing(2);
-    padding: 0 0 0 $govuk-radios-size;
+    padding-left: $govuk-radios-size;
 
     clear: left;
   }
@@ -35,25 +37,33 @@
   }
 
   .govuk-radios__input {
-    position: absolute;
-
-    z-index: 1;
-    top: 0;
-    left: 0;
-
-    width: $govuk-radios-size;
-    height: $govuk-radios-size;
+    $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2;
 
     cursor: pointer;
 
-    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8.
+    // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
+    // elements there.
     @include govuk-not-ie8 {
+      position: absolute;
+
+      z-index: 1;
+      top: $input-offset * -1;
+      left: $input-offset * -1;
+
+      width: $govuk-touch-target-size;
+      height: $govuk-touch-target-size;
       margin: 0;
+
       opacity: 0;
     }
 
-    // add focus outline to input element for IE8
     @include govuk-if-ie8 {
+      margin-top: 10px;
+      margin-right: $govuk-radios-size / -2;
+      margin-left: $govuk-radios-size / -2;
+      float: left;
+
+      // add focus outline to input
       &:focus {
         outline: $govuk-focus-width solid $govuk-focus-colour;
       }
@@ -67,16 +77,11 @@
     cursor: pointer;
     // remove 300ms pause on mobile
     -ms-touch-action: manipulation;
-    touch-action: manipulation;
-  }
-
-  .govuk-radios__hint {
-    display: block;
-    padding-right: $govuk-radios-label-padding-left-right;
-    padding-left: $govuk-radios-label-padding-left-right;
+        touch-action: manipulation;
   }
 
-  .govuk-radios__input + .govuk-radios__label::before {
+  // ( ) Radio ring
+  .govuk-radios__label::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -91,7 +96,11 @@
     background: transparent;
   }
 
-  .govuk-radios__input + .govuk-radios__label::after {
+  //  •  Radio button
+  //
+  // We create the 'button' entirely out of 'border' so that they remain
+  // 'filled' even when colours are overridden in the browser.
+  .govuk-radios__label::after {
     content: "";
 
     position: absolute;
@@ -107,10 +116,16 @@
     background: currentColor;
   }
 
+  .govuk-radios__hint {
+    display: block;
+    padding-right: $govuk-radios-label-padding-left-right;
+    padding-left: $govuk-radios-label-padding-left-right;
+  }
+
   // Focused state
   .govuk-radios__input:focus + .govuk-radios__label::before {
-    // Since box-shadows are removed when users customise their colours
-    // We set a transparent outline that is shown instead.
+    // 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;
@@ -132,7 +147,10 @@
     opacity: .5;
   }
 
-  // Inline variant
+  // =========================================================
+  // Inline radios
+  // =========================================================
+
   .govuk-radios--inline {
     @include mq ($from: tablet) {
       @include govuk-clearfix;
@@ -153,6 +171,10 @@
     }
   }
 
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
   .govuk-radios__divider {
     $govuk-divider-size: $govuk-radios-size !default;
     @include govuk-font($size: 19);
@@ -162,6 +184,10 @@
     text-align: center;
   }
 
+  // =========================================================
+  // Conditional reveals
+  // =========================================================
+
   $conditional-border-width: $govuk-border-width-mobile;
   // Calculate the amount of padding needed to keep the border centered against the radios.
   $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
@@ -184,4 +210,139 @@
       margin-bottom: 0;
     }
   }
+
+  // =========================================================
+  // Small checkboxes
+  // =========================================================
+
+  .govuk-radios--small {
+
+    $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
+    $label-offset: $govuk-touch-target-size - $input-offset;
+
+    .govuk-radios__item {
+      @include govuk-clearfix;
+      min-height: 0;
+      margin-bottom: 0;
+      padding-left: $label-offset;
+      float: left;
+    }
+
+    // Shift the touch target into the left margin so that the visible edge of
+    // the control is aligned
+    //
+    //   ┆Which colour is your favourite?
+    //  ┌┆───┐
+    //  │┆() │ Purple
+    //  └┆▲──┘
+    //  ▲┆└─ Radio pseudo element, aligned with margin
+    //  └─── Touch target (invisible input), shifted into the margin
+    .govuk-radios__input {
+      @include govuk-not-ie8 {
+        left: $input-offset * -1;
+      }
+
+      @include govuk-if-ie8 {
+        margin-left: $govuk-small-radios-size * -1;
+      }
+    }
+
+    // Adjust the size and position of the label.
+    //
+    // Unlike larger radios, we also have to float the label in order to
+    // 'shrink' it, preventing the hover state from kicking in across the full
+    // width of the parent element.
+    .govuk-radios__label {
+      margin-top: -2px;
+      padding: 13px govuk-spacing(3) 13px 1px;
+      float: left;
+
+      @include govuk-media-query($from: tablet) {
+        padding: 11px govuk-spacing(3) 10px 1px;
+      }
+    }
+
+    // ( ) Radio ring
+    //
+    // Reduce the size of the control [1], vertically centering it within the
+    // touch target [2]
+    .govuk-radios__label::before {
+      top: $input-offset - $govuk-border-width-form-element; // 2
+      width: $govuk-small-radios-size; // 1
+      height: $govuk-small-radios-size; // 1
+    }
+
+    //  •  Radio button
+    //
+    // Reduce the size of the 'button' and center it within the ring
+    .govuk-radios__label::after {
+      top: 14px;
+      left: 6px;
+      border-width: 6px;
+    }
+
+    // Fix position of hint with small radios
+    //
+    // Do not use hints with small radios – because they're within the input
+    // wrapper they trigger the hover state, but clicking them doesn't actually
+    // activate the control.
+    //
+    // (If you do use them, they won't look completely broken... but seriously,
+    // don't use them)
+    .govuk-radios__hint {
+      padding: 0;
+      clear: both;
+      pointer-events: none;
+    }
+
+    // Align conditional reveals with small radios
+    .govuk-radios__conditional {
+      $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
+      margin-left: $margin-left;
+      padding-left: $label-offset - ($margin-left + $conditional-border-width);
+      clear: both;
+    }
+
+    .govuk-radios__divider {
+      width: $govuk-small-radios-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
+    // Hover state for small radios.
+    //
+    // We use a hover state for small radios because the touch target size
+    // is so much larger than their visible size, and so we need to provide
+    // feedback to the user as to which radio they will select when their
+    // cursor is outside of the visible area.
+    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+    }
+
+    // Because we've overridden the border-shadow provided by the focus state,
+    // we need to redefine that too.
+    //
+    // We use two box shadows, one that restores the original focus state [1]
+    // and another that then applies the hover state [2].
+    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+      // sass-lint:disable indentation
+      box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
+                  0 0 0 $govuk-hover-width        $govuk-hover-colour; // 2
+    }
+
+    // For devices that explicitly don't support hover, don't provide a hover
+    // state (e.g. on touch devices like iOS).
+    //
+    // We can't use `@media (hover: hover)` because we wouldn't get the hover
+    // state in browsers that don't support `@media (hover)` (like Internet
+    // Explorer) – so we have to 'undo' the hover state instead.
+    @media (hover: none), (pointer: coarse) {
+      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+        box-shadow: initial;
+      }
+
+      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+        box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+      }
+    }
+  }
 }

data/node_modules/govuk-frontend/objects/_form-group.scss

@@ -5,6 +5,7 @@
 @include govuk-exports("govuk/objects/form-group") {
 
   .govuk-form-group {
+    @include govuk-clearfix;
     @include govuk-responsive-margin(6, "bottom");
 
     .govuk-form-group:last-of-type {

data/node_modules/govuk-frontend/package.json

@@ -2,26 +2,26 @@
   "_args": [
     [
       {
-        "raw": "govuk-frontend@2.9.0",
+        "raw": "govuk-frontend@2.10.0",
         "scope": null,
         "escapedName": "govuk-frontend",
         "name": "govuk-frontend",
-        "rawSpec": "2.9.0",
-        "spec": "2.9.0",
+        "rawSpec": "2.10.0",
+        "spec": "2.10.0",
         "type": "version"
       },
       "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ"
     ]
   ],
-  "_from": "govuk-frontend@2.9.0",
+  "_from": "govuk-frontend@2.10.0",
   "_hasShrinkwrap": false,
-  "_id": "govuk-frontend@2.9.0",
+  "_id": "govuk-frontend@2.10.0",
   "_inCache": true,
   "_location": "/govuk-frontend",
   "_nodeVersion": "10.15.1",
   "_npmOperationalInternal": {
     "host": "s3://npm-registry-packages",
-    "tmp": "tmp/govuk-frontend_2.9.0_1552926783752_0.3498067304922825"
+    "tmp": "tmp/govuk-frontend_2.10.0_1555055585302_0.0635054432296085"
   },
   "_npmUser": {
     "name": "govuk-patterns-and-tools",
@@ -30,21 +30,21 @@
   "_npmVersion": "6.4.1",
   "_phantomChildren": {},
   "_requested": {
-    "raw": "govuk-frontend@2.9.0",
+    "raw": "govuk-frontend@2.10.0",
     "scope": null,
     "escapedName": "govuk-frontend",
     "name": "govuk-frontend",
-    "rawSpec": "2.9.0",
-    "spec": "2.9.0",
+    "rawSpec": "2.10.0",
+    "spec": "2.10.0",
     "type": "version"
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-2.9.0.tgz",
-  "_shasum": "bc3ee6ee124d19e2d1ff4802c9eb7ea15039a205",
+  "_resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-2.10.0.tgz",
+  "_shasum": "c3302db7187696797ca52541d7cb16cadee7d485",
   "_shrinkwrap": null,
-  "_spec": "govuk-frontend@2.9.0",
+  "_spec": "govuk-frontend@2.10.0",
   "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
   "author": {
     "name": "GOV.UK Design System Team",
@@ -59,12 +59,12 @@
   "devDependencies": {},
   "directories": {},
   "dist": {
-    "integrity": "sha512-aE8Jg82H76qpMPKtnnvZbkmDQAzAtuc5uMEffkWo0fv6sWEwTISrqUF5jXWZ8tmtdWF8JGeAp71oSCL2x+RkFg==",
-    "shasum": "bc3ee6ee124d19e2d1ff4802c9eb7ea15039a205",
-    "tarball": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-2.9.0.tgz",
+    "integrity": "sha512-Tfo76yz5ybFMX1heojeiWAyxUx0gABM2/hfMk1zu+9hWvApmfxeTaQOJkje4jeo1ybRo+FhgKFqqAzkBOOUnqg==",
+    "shasum": "c3302db7187696797ca52541d7cb16cadee7d485",
+    "tarball": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-2.10.0.tgz",
     "fileCount": 257,
-    "unpackedSize": 1354165,
-    "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcj8hACRA9TVsSAnZWagAA6FcP/16vi1XjsyKkH9TbRauq\nzMzGD3K6jL6Isgudc1leiLlsBV3tIdB/0QE5s3B4gC4qg18QuuYKvIvRgrIe\nv2A8TTrtomGc998YySjReR4J+OGoBe5d8jweRHgu95x5o6nElekZPwJF+ROC\nvJMtoNjz0cnh35MRq/f3m7VYtRnfNIeKbnLkQNfSOEJyKYaw8aEbBPGFWAVd\nZFgswK8IpbJw32eM6R0J/+50Oa2anF67vbV+zw25PFh3IGddKqsbhLp2bPQd\nbYpO9tV5Xc/1gbvXKkyTHCl25gkURrhONmb+EuX0UpBVmyFq/sPjQlWU9cYk\nB5ecmok5MK2AZ4DnhPeqR2uUKRF5nWcb6jN3kQCPusQ0SLTERFYRFbO+SL/b\njq/WmdawYqvta3UrU/jl0XpCXT3B3lRE8ee1zvZ5UOLte7RpZcZfa5BDmp6X\nVz6f53tzY1Ryn96ub3MSumvZ0yforKjy+/XJ51KD7oar26ulTNjUZdBMImha\nUdJgtr573EiHaIfE/EL+UB93X1uJ6OI8dhaDjGRVvaCRgLJdeHrI8oaAJhPP\nMCsBGdkkeydKPYlYGo3sFUMVeyns/45OyL7Mm1xw67I5u/N8O9Uwxocw2MRP\nLDGkk1mD5prJeNZ5BmfaeSS6HZrQHO8lGMEjZW6ccoNjanFTvaVaEsXanl+x\niO8T\r\n=74aj\r\n-----END PGP SIGNATURE-----\r\n"
+    "unpackedSize": 1365294,
+    "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsEPiCRA9TVsSAnZWagAABYcQAJk38n/9YbuZlUtjPNJq\n08cGptMVEFy4DWvQed/wf0nBmlKX07sWUPwAOs0T2fB9E7jVqfATsG9fOdlT\nzfX6vmrWWMZMZ6TklvDf8qIg6mxp8PGy6yemZoP+maoZ4Ab+fHw54MxU2SIJ\nIPFQ/ky3VthzSZo2jdPiEB0UgmJJEK4wmBITVgp8f8lMukkpSpmHPqWeXEoH\nkec4D/2ga6ICbu1JhdTmwu//P+I0BW8M7Xfv4pCY3tJ56F3ZBIVReM5vfM2p\n4J3tl+2+RNXZ/tERmGUmYg/fp3YNx2hE6EWfpQDTs2bewTf1iYZBV5mExmnv\nNKY3cVC7/gYm49Sc7e3edZAwN7QAgujUrcVcE0h7yWGUcx9dcCqMaHHOcQ1i\nh7bc9V2VCyJs4uaEGc5S5YCE1Jzm0hTV5+bQ4i7oKF9WyEWaYpj+UzOb8h1d\nwzd3Jd9VxnWV4Ahzy1r4hwt0BNrZo+9dB2gcVi/Nb+H5yQdC7CpZm38YVAy1\nsY8X8dMBQPjNdzd9j/fcM3QYlWB2xWqRXAhx/YQhw91TpAsvqPQ1Xeh8NQX8\nHQHtRmXHMgItO72nueLPEyDbgjqGfLIYVSYqdSHytWe7uczcKTg4AQPMWK9K\nZ6/KwDuDCysJngFNfdR7lJPFD1hAucp8fujBuezk48HAr1jbGKrMj2+c/EDT\nRNaI\r\n=YoFh\r\n-----END PGP SIGNATURE-----\r\n"
   },
   "engines": {
     "node": ">= 4.2.0"
@@ -92,5 +92,5 @@
     "url": "git+https://github.com/alphagov/govuk-frontend.git"
   },
   "sass": "all.scss",
-  "version": "2.9.0"
+  "version": "2.10.0"
 }

data/node_modules/govuk-frontend/settings/_colours-applied.scss

@@ -105,6 +105,14 @@ $govuk-border-colour: govuk-colour("grey-2") !default;
 
 $govuk-input-border-colour: govuk-colour("black") !default;
 
+/// Input hover colour
+///
+/// Used for hover states on form controls
+///
+/// @type Colour
+/// @access public
+
+$govuk-hover-colour: govuk-colour("grey-3") !default;
 
 
 // =============================================================================

data/node_modules/govuk-frontend/settings/_measurements.scss

@@ -97,3 +97,10 @@ $govuk-border-width-form-group-error: $govuk-border-width !default;
 /// @access public
 
 $govuk-focus-width: 3px !default;
+
+/// Hover width for form controls with a hover state
+///
+/// @type Number
+/// @access public
+
+$govuk-hover-width: 10px !default;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 16.10.1
+  version: 16.11.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-04-09 00:00:00.000000000 Z
+date: 2019-04-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govspeak