govuk_publishing_components 27.14.2 → 27.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 07e0c548e46fc4a7dcb04e7f2838f17b7fc6234804695cfbeca50d1aec4f4431
-  data.tar.gz: 33b0e798aed35a5ab8808ad6b6e0ee99a929c6d2b8da837d6acb156cf66d4f2c
+  metadata.gz: e405833a40d51e34a480d411380a552a68d49a9c398fa89fa694716e0a22131f
+  data.tar.gz: c6f710970b8ecae4c214851ee2e250b80673e38ec004bf161a1ca1042a44af3b
 SHA512:
-  metadata.gz: b48854f3ab1990a2166fbef3f8e57f2487778b7c9df6a0327e05318821b978ba3ef21f0a0865c6cc3cb714d0bff8a3fd6e102cd855fa1b28b78c32d66d92f0a0
-  data.tar.gz: 7bb47453cfc2208ffe22cb79c6493d85720a137b405709a545b3a6a6f37ee59e05b953a59c8cd067d2661038d3dbe323950b6662378ee24ee1ae8c14e98dbcd0
+  metadata.gz: a24c9485202f161b46daff7ec6b081148c8e58d52f8fed9cab8ab6f2d90b016b1d06e81abf0ffd157b75c7331d7b5151b018bbe58f580c6d8bdf94f23ee0dcab
+  data.tar.gz: b63635bfda7d6ccb8ee7e88d810f19e97343d6cb7a08075bba620764cfd609ad0b1043361e1a5b84b49c1787263119b521316b44435dd8c6566754e5635c7b0c

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -102,6 +102,7 @@ $icon-size: 20px;
 $chevron-indent-spacing: 7px;
 $black-bar-height: 50px;
 $search-width-or-height: $black-bar-height;
+$pseudo-underline-height: 3px;
 
 @mixin chevron($colour, $update: false) {
   @if ($update == true) {
@@ -111,7 +112,7 @@ $search-width-or-height: $black-bar-height;
     @include prefixed-transform($rotate: 45deg, $translateY: -35%);
     border-bottom: 2px solid $colour;
     border-right: 2px solid $colour;
-    content: " ";
+    content: "";
     display: inline-block;
     height: 8px;
     margin: 0 8px 0 2px;
@@ -123,7 +124,7 @@ $search-width-or-height: $black-bar-height;
 @mixin make-selectable-area-bigger {
   background: none;
   bottom: 0;
-  content: " ";
+  content: "";
   left: 0;
   position: absolute;
   right: 0;
@@ -133,11 +134,11 @@ $search-width-or-height: $black-bar-height;
 @mixin pseudo-underline {
   background: none;
   bottom: 0;
-  content: " ";
-  height: 3px;
-  left: govuk-spacing(3);
+  content: "";
+  height: $pseudo-underline-height;
+  left: govuk-spacing(5);
   position: absolute;
-  right: govuk-spacing(3);
+  right: govuk-spacing(6);
   top: auto;
 }
 
@@ -441,7 +442,7 @@ $search-width-or-height: $black-bar-height;
         font-size: govuk-px-to-rem(16px);
       }
       height: $black-bar-height;
-      padding: govuk-spacing(3);
+      padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(3) govuk-spacing(5);
       position: relative;
       text-decoration: none;
 
@@ -762,7 +763,7 @@ $search-width-or-height: $black-bar-height;
 
     &:hover {
       background: govuk-colour("black");
-      border-bottom: govuk-spacing(1) solid govuk-colour("mid-grey");
+      border-bottom: $pseudo-underline-height solid govuk-colour("mid-grey");
       color: govuk-colour("mid-grey");
     }
 

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

@@ -27,5 +27,5 @@
 <% end %>
 
 <% if button.info_text %>
-  <%= tag.span button.info_text, class: button.info_text_classes %>
+  <%= tag.span button.info_text, button.info_text_options %>
 <% end %>

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

@@ -69,7 +69,7 @@ examples:
         <h2 class="govuk-heading-l">This is a title</h2>
         <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
   with_current_account_navigation:
-    description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account`, `manage`, and `security`."
+    description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account` and `manage`."
     data:
       show_account_layout: true
       account_nav_location: "manage"

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

@@ -37,6 +37,7 @@ govuk_frontend_components:
 examples:
   default:
     data:
+      heading: How do you want to sign in?
       name: "radio-group"
       items:
       - value: "government-gateway"
@@ -45,6 +46,7 @@ examples:
         text: "Use GOV.UK Verify"
   with_small_radios:
     data:
+      heading: How do you want to sign in?
       name: "radio-group"
       small: true
       items:
@@ -52,9 +54,10 @@ examples:
         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)
+  with_bold_labels:
+    description: Used to provide better contrast between long labels and hint text.
     data:
+      heading: How do you want to sign in?
       name: "radio-group-bold"
       items:
       - value: "government-gateway"
@@ -65,9 +68,10 @@ examples:
         text: "Use GOV.UK Verify"
         hint_text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office."
         bold: true
-  with_bottom_margin:
+  with_custom_bottom_margin:
     description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of `30px` (`6`).
     data:
+      heading: How do you want to sign in?
       name: "radio-group"
       margin_bottom: 9
       items:
@@ -77,6 +81,7 @@ examples:
         text: "Use GOV.UK Verify"
   with_hint_on_form_group:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-error"
       id_prefix: "hint"
       hint: "You’ll need to prove your identity using one of the following methods"
@@ -97,10 +102,10 @@ examples:
         text: "Yes"
       - value: "no"
         text: "No"
-  with_heading:
+  with_custom_heading_size:
     description: |
-      By default, text supplied for the `legend` is wrapped inside a `h2`. 
-      
+      By default, text supplied for the `legend` is wrapped inside a `h2`.
+
       The font size of this heading can be changed using the `heading_size` option. Valid options are `s`, `m`, `l`, `xl`, defaulting to `m` if no option is passed.
     data:
       name: "radio-group-description"
@@ -113,10 +118,10 @@ examples:
         text: "Green"
       - value: "blue"
         text: "Blue"
-  with_different_heading_level:
+  with_custom_heading_level:
     description: |
       By default, text supplied for the `legend` is wrapped inside a `h2`. This can be changed using the `heading_level` option.
-        
+
       If `heading_level` is `1` and `heading_size` is not set, the text size will be `xl`.
     data:
       name: "radio-group-description"
@@ -129,22 +134,10 @@ examples:
         text: "Green"
       - value: "blue"
         text: "Blue"
-  with_heading_and_hint:
-    data:
-      name: "radio-group-heading"
-      heading: "What is your favourite colour?"
-      hint: "If your favourite is not below, pick the colour closest to it."
-      items:
-      - value: "red"
-        text: "Red"
-      - value: "green"
-        text: "Green"
-      - value: "blue"
-        text: "Blue"
-  with_page_header_and_caption:
+  with_page_heading_and_caption:
     description: |
       A caption can be added using the `heading_caption` option. Captions will only be displayed if text for the heading option is present.
-      
+
       The pattern is used across GOV.UK to show a high-level section that this page belongs to.
     data:
       name: "radio-group-heading"
@@ -167,7 +160,7 @@ examples:
         text: "Yes"
       - value: "no"
         text: "No"
-  with_description_only:
+  with_description:
     data:
       name: "radio-group-description"
       heading: "What is your favourite colour?"
@@ -217,6 +210,7 @@ examples:
         text: "Blue"
   with_hint_text_on_radios:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-hint-text"
       items:
       - value: "government-gateway"
@@ -227,6 +221,7 @@ examples:
         text: "Use GOV.UK Verify"
   with_checked_option:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-checked"
       items:
       - value: "government-gateway"
@@ -236,15 +231,17 @@ examples:
         checked: true
   with_data_attributes:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-data-attributes"
       items:
-      - value: "cool-button"
-        text: "Best button in town"
-        data_attributes: { "contextual-guidance": "cool-buttons-guidance" }
-      - value: "no-data-attributes-button"
-        text: "Worst button in town"
+      - value: "government-gateway"
+        text: "Use Government Gateway"
+      - value: "govuk-verify"
+        text: "Use GOV.UK Verify"
+        data_attributes: { "contextual-guidance": "government-gateway" }
   with_custom_id_prefix:
     data:
+      heading: How do you want to sign in?
       id_prefix: 'custom'
       name: "radio-custom-id-prefix"
       items:
@@ -255,6 +252,7 @@ examples:
   with_or_divider:
     description: "See [related service manual guidance for this pattern](https://www.gov.uk/service-manual/design/writing-for-user-interfaces#ask-questions-that-users-can-understand)"
     data:
+      heading: How do you want to sign in?
       name: "radio-group-or-divider"
       items:
       - value: "government-gateway"
@@ -267,6 +265,7 @@ examples:
   extreme:
     description: 'Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)'
     data:
+      heading: How do you want to sign in?
       id_prefix: 'extreme'
       name: "radio-custom-extreme"
       items:
@@ -289,6 +288,7 @@ examples:
         bold: true
   with_error_on_form_group:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-error"
       id_prefix: "error"
       error_message: "Please select one option"
@@ -300,6 +300,7 @@ examples:
   with_error_and_hint_on_form_group:
     description: ""
     data:
+      heading: How do you want to sign in?
       name: "radio-group-error"
       id_prefix: "error"
       error_message: "Please select one option"
@@ -311,6 +312,7 @@ examples:
         text: "Use GOV.UK Verify"
   with_error_items_on_form_group:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-error"
       id_prefix: "error"
       error_items:
@@ -325,6 +327,7 @@ examples:
         text: "Use GOV.UK Verify"
   conditional:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-conditional"
       id_prefix: "conditional"
       items:
@@ -336,7 +339,8 @@ examples:
         conditional: "You’ll need to prove your identity using GOV.UK Verify"
   conditional_checked:
     data:
-      name: "radio-group-conditional"
+      heading: How do you want to sign in?
+      name: "radio-group-conditional-checked"
       id_prefix: "conditional-checked"
       items:
       - value: "government-gateway"
@@ -348,6 +352,7 @@ examples:
         conditional: "You’ll need to prove your identity using GOV.UK Verify"
   tracking-url:
     data:
+      heading: How do you want to sign in?
       name: "radio-group-tracking-url"
       id_prefix: "tracking-url"
       items:
@@ -360,15 +365,17 @@ examples:
   inline:
     description: "When providing few options, radio buttons should be inline rather than stacked. We recommend this for two small options like yes and no, on and off"
     data:
+      heading: Have you changed your name?
       name: "inline-radios"
       inline: true
       items:
-        - value: "on"
-          text: "On"
-        - value: "off"
-          text: "Off"
+        - value: "yes"
+          text: "Yes"
+        - value: "no"
+          text: "No"
   with_custom_id_attribute:
     data:
+      heading: How do you want to sign in?
       name: "radio-group"
       id: "radio-group"
       items:

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -11,6 +11,7 @@ module GovukPublishingComponents
                   :rel,
                   :data_attributes,
                   :margin_bottom,
+                  :id,
                   :inline_layout,
                   :target,
                   :type,
@@ -49,16 +50,39 @@ module GovukPublishingComponents
         @value = local_assigns[:value]
         @classes = local_assigns[:classes]
         @aria_label = local_assigns[:aria_label]
+        @info_text_id = "info-text-id-#{SecureRandom.hex(4)}"
+        @button_id = "button-id-#{SecureRandom.hex(4)}"
       end
 
       def link?
         href.present?
       end
 
+      def info_text?
+        info_text.present?
+      end
+
+      def aria_labelledby
+        if info_text?
+          text = "#{@button_id} "
+          text << @info_text_id
+          text
+        end
+      end
+
+      def info_text_options
+        options = { class: info_text_classes }
+        options[:aria] = { hidden: true } if info_text?
+        options[:id] = @info_text_id if info_text?
+        options
+      end
+
       def html_options
         options = { class: css_classes }
         options[:role] = "button" if link?
         options[:type] = button_type
+        options[:id] = @button_id if info_text?
+        options[:aria] = { labelledby: aria_labelledby }
         options[:rel] = rel if rel
         options[:data] = data_attributes if data_attributes
         options[:title] = title if title

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.14.2".freeze
+  VERSION = "27.15.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.14.2
+  version: 27.15.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-11-25 00:00:00.000000000 Z
+date: 2021-11-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config