govuk_publishing_components 43.0.1 → 43.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ee692ce9fb25200d425b34aa5f0637ca4d0632fdbcf46d3b3ae3483662d1d29
-  data.tar.gz: 517faafdb589e9cc379af61414487579107050a3e3d01545956c0913202da2b8
+  metadata.gz: 0cd528b4f8f215e98dc668b8aebbc8a70830275d42df7aadae6d26d8763ea932
+  data.tar.gz: 9406315ea8c87a29bbfe16c9243f8e05e6fb6f418ec10b41d16493891c92d9b4
 SHA512:
-  metadata.gz: 621e5b66172186ca65e58aedfb29f6271f65ea7f888b7b2aa85f20e3c385b6528bec15168df542d40cd260d8d2453651ad7d595b8e9974baaac69e2c5ecaeffd
-  data.tar.gz: 267b3aa8d271d5a84c6b529c476f61122c43e9161c89245086ef7e170a9c0fd50805af45305639d7b8360e38765cdf63454468e6f465cce2a99dbf4869053698
+  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/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js

@@ -60,6 +60,21 @@
     }
     return "";
   }
+  /**
+  * Returns the delivery type for the current document. To differentiate between the valid empty
+  * string value and browsers that don't support PerformanceResourceTiming.deliveryType, we convert
+  * the empty string value to "(empty string)". Browsers that don't support deliveryType will return
+  * null. Despite straying from the spec, this allows us to differentiate between the two cases.
+  *
+  * @see https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-deliverytype
+  */
+  function deliveryType() {
+    var navEntry = getNavigationEntry();
+    if ("deliveryType" in navEntry) {
+      return navEntry.deliveryType || "(empty string)";
+    }
+    return undefined;
+  }
   function getNavigationEntry() {
     var navEntries = getEntriesByType("navigation");
     if (navEntries.length) {
@@ -321,7 +336,7 @@
     return str;
   }
 
-  var VERSION = "4.0.25";
+  var VERSION = "4.0.26";
   /**
   * Returns the version of the script as a float to be stored in legacy systems that do not support
   * string versions.
@@ -666,25 +681,25 @@
         startTime: processTimeMetric(entry.startTime),
         elementSelector: getNodeSelector(source.node),
         elementType: source.node.nodeName,
-      }); })
+    }); })
     : [];
     if (sessionEntries.length &&
       (entry.startTime - latestEntry.startTime >= 1000 ||
         entry.startTime - firstEntry.startTime >= 5000)) {
-        sessionValue = entry.value;
-        sessionEntries = [entry];
-        sessionAttributions = sources;
+      sessionValue = entry.value;
+      sessionEntries = [entry];
+      sessionAttributions = sources;
+      largestEntry = entry;
+    }
+    else {
+      sessionValue += entry.value;
+      sessionEntries.push(entry);
+      sessionAttributions = sessionAttributions.concat(sources);
+      if (!largestEntry || entry.value > largestEntry.value) {
         largestEntry = entry;
       }
-      else {
-        sessionValue += entry.value;
-        sessionEntries.push(entry);
-        sessionAttributions = sessionAttributions.concat(sources);
-        if (!largestEntry || entry.value > largestEntry.value) {
-          largestEntry = entry;
-        }
-      }
-      maximumSessionValue = max(maximumSessionValue, sessionValue);
+    }
+    maximumSessionValue = max(maximumSessionValue, sessionValue);
     }
   }
   function reset$2() {
@@ -1946,7 +1961,7 @@
       ].join("");
     }
     function getCustomerId() {
-      return LUX.customerid || "";
+      return String(_thisCustomerId) || "";
     }
     function avgDomDepth() {
       var aElems = document.getElementsByTagName("*");
@@ -2184,6 +2199,12 @@
       var baseUrl = _getBeaconUrl(getAllCustomData());
       var is = inlineTagSize("script");
       var ic = inlineTagSize("style");
+      var ds = docSize();
+      var ct = connectionType();
+      var dt = deliveryType();
+      // Note some page stat values (the `PS` query string) are non-numeric. To make extracting these
+      // values easier, we append an underscore "_" to the value. Values this is used for include
+      // connection type (ct) and delivery type (dt).
       var metricsQueryString =
       // only send Nav Timing and lux.js metrics on initial pageload (not for SPA page views)
       (gbNavSent ? "" : "&NT=" + getNavTiming()) +
@@ -2216,8 +2237,9 @@
       docHeight(document) +
       "dw" +
       docWidth(document) +
-      (docSize() ? "ds" + docSize() : "") + // document HTTP transfer size (bytes)
-      (connectionType() ? "ct" + connectionType() + "_" : "") + // delimit with "_" since values can be non-numeric so need a way to extract with regex in VCL
+      (ds ? "ds" + ds : "") + // document HTTP transfer size (bytes)
+      (ct ? "ct" + ct + "_" : "") + // connection type
+      (typeof dt !== "undefined" ? "dt" + dt + "_" : "") + // delivery type
       "er" +
       nErrors +
       "nt" +

data/app/assets/stylesheets/component_guide/application.scss

@@ -139,7 +139,7 @@ $gem-guide-border-width: 1px;
 
   @include govuk-media-query($media-type: print) {
     &[class*="-background"] {
-      background-color: unset;
+      background: none;
     }
   }
 }

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/_cross-service-header.scss

@@ -443,7 +443,7 @@ $govuk-header-link-underline-thickness: 3px;
   }
 
   .gem-c-one-login-header {
-    background-color: initial;
+    background: none;
     border-bottom: 2pt solid $govuk-print-text-colour;
 
     * {
@@ -456,6 +456,8 @@ $govuk-header-link-underline-thickness: 3px;
   }
 
   .gem-c-service-header {
+    background: none;
+
     .govuk-width-container {
       margin: 0;
     }

data/app/assets/stylesheets/govuk_publishing_components/components/_intervention.scss

@@ -26,7 +26,7 @@
 @include govuk-media-query($media-type: print) {
   .gem-c-intervention {
     break-inside: avoid;
-    background-color: transparent;
+    background: none;
     border-color: $govuk-print-text-colour;
 
     .govuk-body {

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -30,7 +30,9 @@
 
 @include govuk-media-query($media-type: print) {
   .gem-c-inverse-header {
-    background-color: unset;
+    background: none;
+    padding-left: 0;
+    padding-right: 0;
     border-bottom: 2pt solid $govuk-print-text-colour;
 
     &,

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -21,10 +21,39 @@
   margin-bottom: 20px;
 }
 
-// stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
+  .govuk-footer {
+    background: none;
+    margin: 25mm 0 0;
+    padding: 5mm 0 0;
+    border-top: 2pt solid $govuk-print-text-colour;
+
+    .govuk-width-container {
+      margin: 0;
+    }
+  }
+
+  .govuk-footer__meta,
+  .govuk-footer__meta-item {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  .govuk-footer__licence-description {
+    padding-right: 10mm;
+  }
+
+  .govuk-footer__copyright-logo {
+    min-width: auto;
+    padding-top: 13mm;
+    background-size: 15mm;
+    background-position: center top;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
   .gem-c-layout-footer {
-    font-size: 12pt !important;
+    font-size: 10pt !important; // stylelint-disable-line declaration-no-important
   }
 }
-// stylelint-enable declaration-no-important

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

@@ -148,8 +148,6 @@
 }
 
 .gem-c-layout-header__search-form {
-  display: none;
-
   &.js-visible {
     display: block;
   }
@@ -185,7 +183,7 @@
     .gem-c-header__product-name,
     .gem-c-environment-tag {
       color: $govuk-print-text-colour;
-      background-color: unset;
+      background: none;
     }
   }
 }

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

@@ -989,7 +989,7 @@ $after-button-padding-left: govuk-spacing(4);
     border-top: 0;
     border-bottom: 2pt solid $govuk-print-text-colour;
     margin: 0 0 5mm;
-    background-color: transparent;
+    background: none;
 
     &:has(.gem-c-layout-super-navigation-header__header-logo .govuk-visually-hidden) {
       border: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss

@@ -100,7 +100,7 @@
   .gem-c-metadata {
     break-inside: avoid;
     color: $govuk-print-text-colour !important;
-    background-color: unset;
+    background: none;
     margin-bottom: 5mm;
 
     a,

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/_phase-banner.scss

@@ -32,7 +32,7 @@
   .gem-c-phase-banner {
     &,
     & * {
-      background-color: unset !important;
+      background: none !important;
       color: $govuk-print-text-colour !important;
     }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss

@@ -22,7 +22,7 @@
 @include govuk-media-query($media-type: print) {
   .gem-c-step-nav-header {
     padding: 0 0 govuk-spacing(4) 0;
-    background: unset;
+    background: none;
     border-color: $govuk-print-text-colour;
   }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss

@@ -48,7 +48,7 @@
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-step-nav-related {
-    background: unset;
+    background: none;
     border-color: $govuk-print-text-colour;
   }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -9,7 +9,7 @@
 @include govuk-media-query($media-type: print) {
   .gem-c-success-alert {
     break-inside: avoid;
-    background-color: initial;
+    background: none;
     border-color: $govuk-print-text-colour;
 
     * {

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/assets/stylesheets/govuk_publishing_components/components/_table.scss

@@ -133,7 +133,7 @@ $table-row-even-background-colour: govuk-colour("light-grey");
 
     * {
       color: $govuk-print-text-colour !important;
-      background-color: initial !important;
+      background: none !important;
     }
 
     .govuk-table__header,

data/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss

@@ -28,7 +28,7 @@
   }
 
   .govuk-warning-text__icon {
-    background-color: transparent;
+    background: none;
     color: $govuk-print-text-colour;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss

@@ -32,7 +32,7 @@
 
       &,
       & * {
-        background-color: unset;
+        background: none;
         color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
       }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -44,15 +44,13 @@ $highlight-answer-color: govuk-colour("white");
       }
     }
 
-    // stylelint-disable declaration-no-important
     @include govuk-media-query($media-type: print) {
-      background-color: unset;
+      background: none;
 
       &,
       & * {
-        color: $govuk-print-text-colour !important;
+        color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
       }
     }
-    // stylelint-enable declaration-no-important
   }
 }

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

@@ -8,6 +8,10 @@
 @import "components/mixins/govuk-template-link-focus-override";
 @import "components/mixins/css3";
 
+$govuk-suppressed-warnings: (
+  organisation-colours
+);
+
 $gem-secondary-button-colour: #00823b;
 $gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
 $gem-secondary-button-background-colour: govuk-colour("white");

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/_layout_footer.html.erb

@@ -63,7 +63,7 @@
         <% end %>
       </div>
 
-      <hr class="govuk-footer__section-break">
+      <hr class="govuk-footer__section-break govuk-!-display-none-print">
     <% end %>
     <div class="govuk-footer__meta">
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">

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