govuk_publishing_components 43.0.2 → 43.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 807aea002b544e9db46864e26c47fe8c43b073ac466ce0c318526df6d30cad86
-  data.tar.gz: a38681875e7616755c30d4a0fe311157d58504fe90235207bdb0965e1376d401
+  metadata.gz: 0cd528b4f8f215e98dc668b8aebbc8a70830275d42df7aadae6d26d8763ea932
+  data.tar.gz: 9406315ea8c87a29bbfe16c9243f8e05e6fb6f418ec10b41d16493891c92d9b4
 SHA512:
-  metadata.gz: 89784fa1851bee65bf7df62a94de10b874e1fd87ba6fc97246a82c7874a6e05d64164bc7e66762e3431fccc930e1688b7fec26a85c53d0b94c5bc94651b8cc58
-  data.tar.gz: 45b90baa9e36e7c25737f71a3780fc216557f1dcbb7f8e574cc9d2dcefb1cc8e67dc43670a25c3804f8f98f93d679c36a61f56437ddac264de4ea89bc28048ca
+  metadata.gz: 5bd32ba843de584bfb07f87df4c3dc7624b3fb65d7cd6f46e6f21cc711950c102edc302cc2004570908e7f18a425315983c516f97d0a370654281803a9b7b394
+  data.tar.gz: d4deba88fd859ddce5ecec74087f169b45a305f84af32a3be12b3666a70c179d6d75901f22c1f7e7dde7b788f98db806fdcf929f3f9809ec649dfd100f06198e

data/app/assets/javascripts/component_guide/application.js

@@ -3,4 +3,5 @@
 //= require ../govuk_publishing_components/dependencies
 //= require ../govuk_publishing_components/components/accordion
 //= require ../govuk_publishing_components/components/intervention
+//= require ../govuk_publishing_components/components/password-input
 //= require ../govuk_publishing_components/components/tabs

data/app/assets/javascripts/govuk_publishing_components/components/password-input.js

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/password-input/password-input.bundle.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.GovukPasswordInput = window.GOVUKFrontend.PasswordInput

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -32,7 +32,7 @@
         link: $link
       }
 
-      if (href.indexOf('/live_stream') >= 0) {
+      if (href.includes('/live_stream')) {
         var channelId = YoutubeLinkEnhancement.parseLivestream(href)
 
         if (!this.hasDisabledEmbed($link) && channelId) {
@@ -175,23 +175,16 @@
   // This is a public class method so it can be used outside of this embed to
   // check that user input for videos will be supported in govspeak
   YoutubeLinkEnhancement.parseVideoId = function (url) {
-    var parts
+    var u
 
-    if (url.indexOf('youtube.com') > -1) {
-      var params = {}
-      parts = url.split('?')
-      if (parts.length === 1) {
-        return
-      }
-      parts = parts[1].split('&')
-      for (var i = 0; i < parts.length; i++) {
-        var part = parts[i].split('=')
-        params[part[0]] = part[1]
-      }
-      return params.v
-    } else if (url.indexOf('youtu.be') > -1) {
-      parts = url.split('/')
-      return parts.pop()
+    try {
+      u = new URL(url)
+    } catch (e) { return undefined }
+
+    if (u.host === 'www.youtube.com' || u.host === 'youtube.com') {
+      return u.searchParams.get('v') || undefined
+    } else if (u.host === 'youtu.be') {
+      return u.pathname.slice(1) // Trim the leading /
     }
   }
 

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -59,6 +59,7 @@
 @import "components/option-select";
 @import "components/organisation-logo";
 @import "components/panel";
+@import "components/password-input";
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
 @import "components/print-link";
@@ -76,6 +77,7 @@
 @import "components/step-by-step-nav";
 @import "components/subscription-links";
 @import "components/success-alert";
+@import "components/summary-card";
 @import "components/summary-list";
 @import "components/tabs";
 @import "components/table";

data/app/assets/stylesheets/govuk_publishing_components/components/_password-input.scss

@@ -0,0 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "govuk/components/password-input/password-input";

data/app/assets/stylesheets/govuk_publishing_components/components/_summary-card.scss

@@ -0,0 +1,16 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "govuk/components/summary-list/summary-list";
+
+.gem-c-summary-card {
+  .govuk-summary-list__key {
+    vertical-align: top;
+  }
+
+  .govuk-summary-list__actions {
+    width: auto;
+  }
+
+  img {
+    display: block;
+  }
+}

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

@@ -7,12 +7,24 @@
   description_text ||= t("components.chat_entry.description")
   border_top ||= false
   border_bottom ||= false
+  disable_ga4 ||= false
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-chat-entry")
   component_helper.add_class("gem-c-chat-entry--border-top") if border_top
   component_helper.add_class("gem-c-chat-entry--border-bottom") if border_bottom
   component_helper.add_class(shared_helper.get_margin_bottom)
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
+
+  unless disable_ga4
+    ga4_link_data = {
+      ga4_link: {
+        event_name: "navigation",
+        type: "callout",
+        section: "GOV.UK Chat entry",
+      }.to_json
+    }
+  end
 %>
 
 <%= tag.div(**component_helper.all_attributes) do %>
@@ -36,7 +48,7 @@
 
   <div class="gem-c-chat-entry__description">
     <%= content_tag(shared_helper.get_heading_level, class: "gem-c-chat-entry__heading") do %>
-      <%= link_to heading_text, href, class: "govuk-link" %>
+      <%= link_to heading_text, href, class: "govuk-link", data: ga4_link_data %>
     <% end %>
 
     <% if description_text %>

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

@@ -0,0 +1,78 @@
+<%
+  add_gem_component_stylesheet("password-input")
+
+  label_text ||= t("components.password_input.label")
+
+  error_text ||= nil
+  error_text_prefix ||= t("components.password_input.error_text_prefix")
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_data_attribute({ module: "govuk-password-input" })
+  component_helper.add_class('govuk-form-group')
+  component_helper.add_class('govuk-form-group--error') if error_text
+  component_helper.add_class('govuk-password-input')
+  component_helper.add_class('gem-c-password-input')
+  component_helper.add_class(shared_helper.get_margin_bottom)
+
+  uid = SecureRandom.hex(4)
+
+  label_for = uid + '-password-input'
+
+  input_name = 'password'
+  input_id = uid + '-password-input'
+
+  aria_controls = uid + '-password-input'
+
+  input_classes = %w(govuk-input govuk-password-input__input govuk-js-password-input-input)
+
+  if error_text
+    label_for << '-with-error-message'
+    input_id << '-with-error-message'
+    input_name << '-input-with-error-message'
+    input_classes << 'govuk-input--error'
+    aria_controls << '-with-error-message'
+    paragraph_id = uid + '-password-input-with-error-message-error'
+  end
+
+%>
+
+<%= tag.div(**component_helper.all_attributes) do %>
+  <%= render "govuk_publishing_components/components/label", {
+    text: label_text,
+    html_for: label_for
+  } %>
+  <% if error_text %>
+    <p id="<%= paragraph_id %>" class="govuk-error-message">
+      <span class="govuk-visually-hidden"><%= error_text_prefix %>:</span> <%= error_text %>
+    </p>
+  <% end %>
+
+  <div class="govuk-input__wrapper govuk-password-input__wrapper">
+    <%= tag.input(
+      name: input_name,
+      type: "password",
+      class: input_classes,
+      id: input_id,
+      spellcheck: false,
+      autocomplete: "current-password",
+      autocapitalize: "none",
+      aria: {
+        describedby: paragraph_id
+      }) %>
+
+    <%= tag.button(
+      type: "button",
+      class: "govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle",
+      data: {
+        module: "govuk-button"
+      },
+      hidden: true,
+      aria: {
+        controls: aria_controls,
+        label: t("components.password_input.button_aria_label")
+      }) do %>
+        <%= t("components.password_input.button") %>
+      <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,62 @@
+<%
+  add_gem_component_stylesheet("summary-card")
+
+  id ||= nil
+  title ||= nil
+  data_attributes ||= {}
+  summary_card_actions ||= []
+  rows ||=[]
+%>
+<% if title || rows.any? %>
+  <%= tag.div class: "gem-c-summary-card", id: id, data: data_attributes do %>
+    <%= tag.div class: "govuk-summary-card" do %>
+      <%= tag.div class: "govuk-summary-card__title-wrapper" do %>
+        <%= tag.h2 class: "govuk-summary-card__title" do %>
+          <%= title %>
+        <% end %>
+
+        <%= tag.ul class: "govuk-summary-card__actions" do %>
+          <% summary_card_actions.each do |action| %>
+            <%= tag.li class: "govuk-summary-card__action" do %>
+              <%= link_to sanitize(action[:label] + tag.span(" #{title}", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state #{"gem-link--destructive govuk-!-font-weight-bold" if action[:destructive]}".strip %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if rows.present? %>
+        <%= tag.div class: "govuk-summary-card__content" do %>
+          <%= tag.dl class: "govuk-summary-list" do %>
+            <% rows.each do |row| %>
+              <%= tag.div class: "govuk-summary-list__row" do %>
+                <%= tag.dt class: "govuk-summary-list__key" do %>
+                  <%= row[:key] %>
+                <% end %>
+
+                <%= tag.dt class: "govuk-summary-list__value" do %>
+                  <%= row[:value] %>
+                <% end %>
+
+                <% if row[:actions].present? %>
+                  <%= tag.dd class: "govuk-summary-list__actions" do %>
+                    <%= tag.ul class: "govuk-summary-list__actions-list" do %>
+                      <% row[:actions].each do |action| %>
+                        <%= tag.li class: "govuk-summary-list__actions-list-item" do %>
+                          <% if action[:opens_in_new_tab] %>
+                            <%= link_to sanitize(action[:label] + tag.span(" #{row[:key]} (opens in new tab)", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state", rel: "noreferrer noopener", target: "_blank" %>
+                          <% else %>
+                            <%= link_to sanitize(action[:label] + tag.span(" #{row[:key]}", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state #{"gem-link--destructive" if action[:destructive]}".strip %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -34,3 +34,8 @@ examples:
   with_margin_bottom:
     data:
       margin_bottom: 3
+  without_ga4_tracking:
+    description: |
+      Disables GA4 tracking on the component. Tracking is enabled by default. This adds a data module and data-attributes with JSON data. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      disable_ga4: true

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

@@ -0,0 +1,45 @@
+name: Password input
+description: The password input component helps users to create and enter passwords.
+govuk_frontend_components:
+  - password-input
+
+accessibility_criteria: |
+  The password input component must:
+
+    * accept focus
+    * be focusable with a keyboard
+    * be usable with a keyboard
+    * be usable with touch
+    * indicate when they have focus
+    * be recognisable as form input elements
+    * have correctly associated labels
+    * have the appropriate type of 'password'
+    * have an appropriate validation message if there was an error
+    * allow users to interact with any 'show password' button
+    * allow users to use `autocomplete` to securely create and enter passwords
+    * allow users to copy and paste into the password input
+
+  When CSS and / or JavaScript is unavailable, the component must:
+
+  * fallback to a regular input element, with the show/hide button hidden
+
+uses_component_wrapper_helper: true
+
+examples:
+  default:
+    data:
+  with_error:
+    description: If there is a validation error, passing error text will style the password input component with error styles, and semantically state that there was a validation error.
+    data:
+      error_text: Enter a password
+  with_custom_label_and_error_text:
+    description: For translations or other purposes, the text presented to the user in this component can be changed. Note that the error text prefix is hidden visually and used by assistive tools when there is an error. By default, the prefix is "Error".
+    data:
+      label_text: Secret number
+      error_text_prefix: Incompatible
+      error_text: 6 is scared of 7, so they can't be next to each other.
+  with_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). It defaults to having a margin bottom of `30px`.
+    data:
+      margin_bottom: 5

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

@@ -0,0 +1,93 @@
+name: Summary card
+description: An extension of the Summary list component. It can be used where there are multiple groups of lists to be displayed in their own discrete sections.
+accessibility_criteria: |
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when it has focus
+examples:
+  default:
+    data:
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+        - key: key two
+          value: value2
+  with_custom-id:
+    data:
+      id: custom_id
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+        - key: key two
+          value: value2
+  with_actions:
+    data:
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+        - key: key two
+          value: value2
+      summary_card_actions:
+        - label: View
+          href: "#1"
+        - label: Edit
+          href: "#2"
+  with_destructive_action:
+    data:
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+        - key: key two
+          value: value2
+      summary_card_actions:
+        - label: Delete
+          href: "#1"
+          destructive: true
+
+  with_row_actions:
+    data:
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+          actions:
+            - label: View
+              href: "#1"
+            - label: Edit
+              href: "#2"
+        - key: key two
+          value: value2
+          actions:
+            - label: View
+              href: "#1"
+            - label: Edit
+              href: "#2"
+  with_row_destructive_action:
+    data:
+      title: Title
+      rows:
+        - key: key
+          value: value
+          actions:
+            - label: View
+              href: "#1"
+            - label: Edit
+              href: "#2"
+            - label: Delete
+              href: "#3"
+              destructive: true
+  with_row_action_that_opens_in_new_tab:
+    data:
+      title: Title
+      rows:
+        - key: key
+          value: value
+          actions:
+            - label: View
+              href: "#1"
+              opens_in_new_tab: true

data/config/locales/ar.yml

@@ -148,6 +148,11 @@ ar:
       selected:
     organisation_schema:
       all_content_search_description: العثور عن كل المحتوى من %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: ترقيم الصفحات

data/config/locales/az.yml

@@ -145,6 +145,11 @@ az:
       selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-dan bütün məzmunu tap"
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Səhifələrə bölmə

data/config/locales/be.yml

@@ -151,6 +151,11 @@ be:
       selected:
     organisation_schema:
       all_content_search_description: Шукаць увесь змест з %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Месцаванне старонак

data/config/locales/bg.yml

@@ -149,6 +149,11 @@ bg:
       selected:
     organisation_schema:
       all_content_search_description: Намиране на цялото съдържание от %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Страниране

data/config/locales/bn.yml

@@ -146,6 +146,11 @@ bn:
       selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-এর সকল বিষয়বস্তু খুঁজে বের করুন"
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: পেজিনেশন

data/config/locales/cs.yml

@@ -150,6 +150,11 @@ cs:
       selected:
     organisation_schema:
       all_content_search_description: Najít veškerý obsah z %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Stránkování

data/config/locales/cy.yml

@@ -149,6 +149,11 @@ cy:
       selected:
     organisation_schema:
       all_content_search_description: Dod o hyd i'r holl gynnwys gan %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Tudalennu

data/config/locales/da.yml

@@ -146,6 +146,11 @@ da:
       selected:
     organisation_schema:
       all_content_search_description: Find alt indhold fra %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Paginering

data/config/locales/de.yml

@@ -149,6 +149,11 @@ de:
       selected:
     organisation_schema:
       all_content_search_description: Alle Inhalte von %{organisation} finden
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Seitenzahlen

data/config/locales/dr.yml

@@ -147,6 +147,11 @@ dr:
       selected:
     organisation_schema:
       all_content_search_description: تمام محتویات را از اینجا بدست بیاورید %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: صفحه گذاری

data/config/locales/el.yml

@@ -145,6 +145,11 @@ el:
       selected:
     organisation_schema:
       all_content_search_description: Εύρεση όλου του περιεχομένου από τον οργανισμό %{Organization}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Σελιδοποίηση

data/config/locales/en.yml

@@ -252,6 +252,11 @@ en:
       selected: selected
     organisation_schema:
       all_content_search_description: Find all content from %{organisation}
+    password_input:
+      label: "Password"
+      button: "Show"
+      button_aria_label: "Show password"
+      error_text_prefix: "Error"
     previous_and_next_navigation:
       next: Next
       pagination: Pagination

data/config/locales/es-419.yml

@@ -145,6 +145,11 @@ es-419:
       selected:
     organisation_schema:
       all_content_search_description: Buscar todo el contenido de %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Paginación

data/config/locales/es.yml

@@ -145,6 +145,11 @@ es:
       selected:
     organisation_schema:
       all_content_search_description: Buscar todo el contenido de %{organization}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Paginación

data/config/locales/et.yml

@@ -148,6 +148,11 @@ et:
       selected:
     organisation_schema:
       all_content_search_description: Leidke kogu ettevõtte %{organization} sisu
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Lehekülgede jaotus

data/config/locales/fa.yml

@@ -144,6 +144,11 @@ fa:
       selected:
     organisation_schema:
       all_content_search_description: یافتن تمام محتوا از %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: صفحه‌بندی

data/config/locales/fi.yml

@@ -147,6 +147,11 @@ fi:
       selected:
     organisation_schema:
       all_content_search_description: Etsi kaikki sisältö alkaen %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Sivunumerointi

data/config/locales/fr.yml

@@ -145,6 +145,11 @@ fr:
       selected:
     organisation_schema:
       all_content_search_description: Rechercher tout le contenu de %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Pagination