govuk_publishing_components 27.14.1 → 27.17.0

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

@@ -2,16 +2,18 @@
   component_helper = GovukPublishingComponents::Presenters::SinglePageNotificationButtonHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  wrapper_classes = %w(gem-c-single-page-notification-button govuk-!-display-none-print)
+  wrapper_classes = %w(govuk-!-display-none-print)
   wrapper_classes << shared_helper.get_margin_bottom
 %>
 <% button_text = capture do %>
   <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
 <% end %>
-<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
-  <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
-  <%= content_tag(:button, button_text, {
-    class: "govuk-body-s gem-c-single-page-notification-button__submit",
-    type: "submit",
-  }) %>
+<%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %>
+  <%= tag.form class: "gem-c-single-page-notification-button", action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+    <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
+    <%= content_tag(:button, button_text, {
+      class: "govuk-body-s gem-c-single-page-notification-button__submit",
+      type: "submit",
+    }) %>
+  <% end %>
 <% end if component_helper.base_path %>

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

@@ -1,9 +1,12 @@
 <%
   description ||= nil
   title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = %w(gem-c-success-alert govuk-notification-banner govuk-notification-banner--success)
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 
-<%= tag.div class: "gem-c-success-alert govuk-notification-banner govuk-notification-banner--success",
+<%= tag.div class: classes,
   role: "alert",
   tabindex: "-1",
   aria: {

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

@@ -38,6 +38,17 @@ examples:
       suggestion_link_text: "You can now apply for a permit online."
       suggestion_link_url: "/permit"
 
+  open_suggestion_link_in_new_tab:
+    description: |
+      When sending users to another online task, you don't want to completely hijack
+      their original flow on GOV.UK. Adding the option to open links in a new tab helps to address this.
+      Link text should tell the user that the link opens in a new tab.
+      Note: "(opens in a new tab)" is added to link text if the phrase isn't included.
+    data:
+      suggestion_link_text: "You can now apply for a permit online"
+      suggestion_link_url: "www.google.com/permit"
+      new_tab: true
+
   with_data_attributes:
     description: |
       This example shows the use of `suggestion_data_attributes` and

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/app/views/govuk_publishing_components/components/docs/search.yml

@@ -69,3 +69,28 @@ examples:
       Allows the label text size to be set to `xl`, `l`, `m`, or `s`. If this is set, then `inline_label` is automatically set to `false`.
     data:
       label_size: "xl"
+  wrap_label_inside_a_heading:
+    description: |
+      Puts the label inside a heading; heading level defaults to 2 if not set.
+
+      (The size of the label can still be set with `label_size` to appear more like a heading.)
+    data:
+      wrap_label_in_a_heading: true
+      heading_level: 1
+  with_margin_bottom:
+    description: |
+      Allows the spacing at the bottom of the component to be adjusted.
+
+      This accepts a number 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 having no margin bottom.
+    data:
+      margin_bottom: 9
+  with_margin_bottom_for_the_label:
+    description: |
+      Allows the spacing between the label and the input be adjusted.
+
+      Requires `inline_label` to be false.
+
+      This accepts a number 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 having no margin bottom.
+    data:
+      label_margin_bottom: 9
+      inline_label: false

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

@@ -37,3 +37,9 @@ examples:
         orci. Proin semper porttitor ipsum, vel maximus justo rutrum vel.
         Morbi volutpat facilisis libero. Donec posuere eget odio non egestas.
         Nullam sed neque quis turpis.
+  with_custom_margin_bottom:
+    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). The default margins for the component are inherited from the [notification-banner](https://github.com/alphagov/govuk-frontend/blob/main/package/govuk/components/notification-banner/_index.scss) styles defined in the Design System.
+    data:
+      message: Message to alert the user to a successful action goes here
+      margin_bottom: 3

data/config/i18n-tasks.yml

@@ -2,3 +2,11 @@ data:
   yaml:
     write:
       line_width: -1
+search:
+  paths:
+    - app/
+    - lib/
+ignore_unused:
+  - 'components.accordion.*'
+  - 'components.related_footer_navigation.*'
+  - 'components.related_navigation.*'