govuk_publishing_components 35.15.2 → 35.15.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e84a39ca858aeb5f82b99db7e36787fcb9de0789d216a01ae705edc8b6412e50
-  data.tar.gz: cd621c972ba4b393cd8ca2921a43e45101dcdd1330c5d1dc80eee74b11ac1556
+  metadata.gz: c5baadeb72cff594caeffb0d791d32d3d32a6135dd93bd1c6b8190ba01997865
+  data.tar.gz: '078f9bf537fe6341f5bd7d6fb859be1859d9832ad62d8cac2438c5ad5ae06b13'
 SHA512:
-  metadata.gz: ac457ab2307e9a0c5e38b494b54268c34113521a93e25d1d0bc99378b075b8ae8a9a3ba4477a6dc7249fc58e1d42be51600f3746019109eff8b31460d3ae8a6d
-  data.tar.gz: 8369bcf1d142762cd85e4c5e9a483560b1e904071dd73e500407c8abfffa692cc7f60745debae002861850a08a170a1fbc90c5b0ae7f72abe972e5ba089de898
+  metadata.gz: 03131a4e41598a5f770f188d50a8e8ac3625d2b063ab47e2cc3485a3b5611aa6367af68093c33ac315d8a1b4d956ac8921080a1b7b9e93d0f12c1e8507b684e1
+  data.tar.gz: ecbb58fc79d2026ea8f096d93803addf0ce5d75ac30ff4e6fb00a0e86fbe3eab7ce2a78b9a332a7ddc90ef69ab16ee14b8d3b8b2a69d767d678e48a1f78dc985

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -290,7 +290,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
 
         // In order to extract the number of results from resultCount (which is a string at this point (e.g. '12,345 results')), we remove the comma and
         // split string at the space character so it can be parsed as an integer
-        resultCount = resultCount.textContent.replace(',', '')
+        resultCount = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(resultCount.textContent)
+        resultCount = resultCount.replace(',', '')
         resultCount = resultCount.split(' ')[0]
 
         return parseInt(resultCount)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -57,7 +57,9 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             emergency_banner: document.querySelector('[data-ga4-emergency-banner]') ? 'true' : undefined,
             phase_banner: this.getElementAttribute('data-ga4-phase-banner') || undefined,
             devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
-            cookie_banner: document.querySelector('[data-ga4-cookie-banner]') ? 'true' : undefined
+            cookie_banner: document.querySelector('[data-ga4-cookie-banner]') ? 'true' : undefined,
+            intervention: this.getInterventionPresence(),
+            query_string: this.getQueryString()
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)
@@ -68,6 +70,20 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       return this.PIIRemover.stripPII(this.stripGaParam(document.location.href))
     },
 
+    getSearch: function () {
+      return window.location.search
+    },
+
+    getQueryString: function () {
+      var queryString = this.getSearch()
+      if (queryString) {
+        queryString = this.PIIRemover.stripPIIWithOverride(queryString, true, true)
+        queryString = this.stripGaParam(queryString)
+        queryString = queryString.substring(1) // removes the '?' character from the start.
+        return queryString
+      }
+    },
+
     getReferrer: function (referrer) {
       referrer = this.stripGaParam(referrer || document.referrer)
       return this.PIIRemover.stripPIIWithOverride(referrer, true, true)
@@ -76,7 +92,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
     // remove GA parameters of the form _ga=2320.021-012302 or _gl=02.10320.01230-123
     stripGaParam: function (str) {
       str = str.replace(/(_ga=[0-9.-]+)/g, '_ga=[id]')
-      str = str.replace(/(_gl=[0-9.-]+)/g, '_gl=[id]')
+      str = str.replace(/(_gl=[a-zA-Z0-9._\-*]+)/g, '_gl=[id]')
       return str
     },
 
@@ -112,11 +128,12 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
 
     getLanguage: function () {
       var content = document.getElementById('content')
+      var html = document.querySelector('html')
       if (content) {
         return content.getAttribute('lang') || this.nullValue
-      } else {
-        return this.nullValue
       }
+      // html.getAttribute('lang') is untested - Jasmine would not allow lang to be set on <html>.
+      return html.getAttribute('lang') || this.nullValue
     },
 
     getHistory: function () {
@@ -129,6 +146,25 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       return (withdrawn === 'withdrawn') ? 'true' : 'false'
     },
 
+    getInterventionPresence: function () {
+      /* If the user hides the banner using JS, a cookie is set to hide it on future page loads.
+       * Therefore we need to start the intervention banner early so that it hides if this cookie exists.
+       * Without this, our pageview object will track the banner as visible before it gets hidden. */
+
+      var intervention = document.querySelector('[data-ga4-intervention-banner]')
+
+      if (intervention) {
+        window.GOVUK.modules.start(intervention)
+        var interventionHidden = intervention.getAttribute('hidden') === '' || intervention.getAttribute('hidden')
+
+        if (interventionHidden) {
+          return undefined
+        }
+        return 'true'
+      }
+      return undefined
+    },
+
     splitLongMetaContent: function (metatag) {
       var tag = this.getMetaContent(metatag)
       if (tag) {

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -150,6 +150,22 @@
   }
 }
 
+.gem-c-action-link--dark-large-icon {
+  &:before {
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
+    height: 34px;
+    width: 40px;
+    background-repeat: no-repeat;
+    background-size: 32px auto;
+    background-position: 0 2px;
+  }
+
+  @include govuk-media-query($until: tablet) {
+    margin-bottom: govuk-spacing(2);
+  }
+}
+
 .gem-c-action-link--dark-icon,
 .gem-c-action-link--small-icon {
   max-width: none;

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

@@ -13,11 +13,8 @@
   margin: 0 govuk-spacing(-3);
 
   display: grid;
-  grid-auto-flow: row;
-  // Use CSS grid to calculate the number of rows
-  grid-template-rows: auto;
-  // Use the tallest cell in the grid to set the height for all rows
-  grid-auto-rows: fractions(1);
+  grid-auto-flow: row;   // Use CSS grid to calculate the number of rows
+  grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid
   grid-template-columns: fractions(1);
 
   @include govuk-media-query($from: "tablet") {

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

@@ -16,6 +16,7 @@
   simple ||= false
   simple_light ||= false
   dark_icon ||= false
+  dark_large_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
   brexit_icon ||= false
@@ -27,6 +28,7 @@
   css_classes = %w(gem-c-action-link)
   css_classes << "gem-c-action-link--light-text" if light_text
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
+  css_classes << "gem-c-action-link--dark-large-icon" if dark_large_icon
   css_classes << "gem-c-action-link--small-icon" if small_icon
   css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon

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

@@ -11,6 +11,8 @@
 
   data_attributes ||= {}
   suggestion_data_attributes ||= {}
+  dismiss_data_attributes ||= {}
+  dismiss_link_data_attributes ||= {}
   data_attributes[:module] = "intervention"
   data_attributes["intervention-name"] = name
 
@@ -30,6 +32,11 @@
   intervention_helper = GovukPublishingComponents::Presenters::InterventionHelper.new(options)
   dismiss_href = intervention_helper.dismiss_link
 
+  ga4_tracking ||= false
+  suggestion_data_attributes[:module] = "#{suggestion_data_attributes[:module]} ga4-link-tracker".strip if ga4_tracking
+  suggestion_data_attributes[:ga4_link] = { event_name: "navigation", type: "intervention", section: suggestion_text, index: 1, index_total: 1 }.to_json if ga4_tracking
+  data_attributes[:ga4_intervention_banner] = "" if ga4_tracking # Added to the parent element for the GA4 pageview object to use
+
   suggestion_tag_options = {
     class: "govuk-link",
     href: suggestion_link_url,
@@ -51,6 +58,9 @@
     data: data_attributes,
   }
   section_options.merge!({ hidden: true }) if hide
+
+  dismiss_link_data_attributes[:module] = "#{dismiss_link_data_attributes[:module]} ga4-event-tracker".strip if ga4_tracking
+  dismiss_link_data_attributes[:ga4_event] = { event_name: "select_content", type: "intervention", section: suggestion_text, action: 'closed' }.to_json if ga4_tracking
 %>
 <% if intervention_helper.show? %>
   <%= tag.section **section_options do %>
@@ -62,8 +72,8 @@
     </p>
 
     <% if dismiss_text %>
-      <p class="govuk-body">
-        <%= tag.a class: "govuk-link js-dismiss-link", href: dismiss_href do %>
+      <%= tag.p class: "govuk-body", data: dismiss_data_attributes do %>
+        <%= tag.a class: "govuk-link js-dismiss-link", href: dismiss_href, data: dismiss_link_data_attributes do %>
           <svg class="gem-c-intervention__dismiss-icon"
             width="19" height="19" viewBox="0 0 19 19"
             aria-hidden="true"
@@ -74,7 +84,7 @@
           </svg>
           <%= dismiss_text %>
         <% end %>
-      </p>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -115,6 +115,11 @@ examples:
       text: Coronavirus (COVID-19)
       href: "/my-test-page"
       dark_icon: true
+  with_dark_large_icon:
+    data:
+      text: Coronavirus (COVID-19)
+      href: "/my-test-page"
+      dark_large_icon: true
   with_brexit_icon_and_custom_font_size:
     data:
       text: Guidance for businesses

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

@@ -65,8 +65,8 @@ examples:
 
   with_data_attributes:
     description: |
-      This example shows the use of `suggestion_data_attributes` and
-      `dismiss_data_attributes` for click tracking.
+      This example shows the use of `suggestion_data_attributes`,
+      `dismiss_data_attributes` for click tracking on the dismiss section <p> tag, and `dismiss_link_data_attributes` for adding attributes to the dismiss link <a> tag.
 
       Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
@@ -87,3 +87,15 @@ examples:
         track-dimension: Hide this suggestion
         track-dimension-index: 29
         track-label: hide the intervention
+      dismiss_link_data_attributes:
+        track-category: example
+  with_ga4_tracking:
+    description: |
+      Enables GA4 tracking on the banner. This includes link tracking on the component itself, event tracking on the 'Hide' link, and allows pageviews to record the presence of the banner on page load.
+    data:
+      ga4_tracking: true
+      suggestion_text: Based on your browsing you might be interested in
+      suggestion_link_text: "Travel abroad: step by step"
+      suggestion_link_url: /travel-abroad
+      dismiss_text: Hide this suggestion
+      name: another-campaign-name

data/config/locales/en.yml

@@ -241,6 +241,8 @@ en:
         href: "/sign-in-universal-credit"
       - label: Check your National Insurance record
         href: "/check-national-insurance-record"
+      - label: 'Check MOT history of a vehicle'
+        href: /check-mot-history
       popular_links_heading: Popular on GOV.UK
       search_text: Search GOV.UK
     metadata:

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.15.2".freeze
+  VERSION = "35.15.4".freeze
 end

data/node_modules/axe-core/axe.d.ts

@@ -164,9 +164,9 @@ declare namespace axe {
   interface NodeResult {
     html: string;
     impact?: ImpactValue;
-    target: string[];
+    target: UnlabelledFrameSelector;
     xpath?: string[];
-    ancestry?: string[];
+    ancestry?: UnlabelledFrameSelector;
     any: CheckResult[];
     all: CheckResult[];
     none: CheckResult[];
@@ -181,8 +181,11 @@ declare namespace axe {
     relatedNodes?: RelatedNode[];
   }
   interface RelatedNode {
-    target: string[];
     html: string;
+    target: UnlabelledFrameSelector;
+    xpath?: string[];
+    ancestry?: UnlabelledFrameSelector;
+    element?: HTMLElement;
   }
   interface RuleLocale {
     [key: string]: {
@@ -193,7 +196,7 @@ declare namespace axe {
   interface CheckMessages {
     pass: string | { [key: string]: string };
     fail: string | { [key: string]: string };
-    incomplete: string | { [key: string]: string };
+    incomplete?: string | { [key: string]: string };
   }
   interface CheckLocale {
     [key: string]: CheckMessages;
@@ -257,10 +260,31 @@ declare namespace axe {
     brand?: string;
     application?: string;
   }
+  interface CheckHelper {
+    async: () => (result: boolean | undefined | Error) => void;
+    data: (data: unknown) => void;
+    relatedNodes: (nodes: Element[]) => void;
+  }
+  interface AfterResult {
+    id: string;
+    data?: unknown;
+    relatedNodes: SerialDqElement[];
+    result: boolean | undefined;
+    node: SerialDqElement;
+  }
   interface Check {
     id: string;
-    evaluate?: Function | string;
-    after?: Function | string;
+    evaluate?:
+      | string
+      | ((
+          this: CheckHelper,
+          node: Element,
+          options: unknown,
+          virtualNode: VirtualNode
+        ) => boolean | undefined | void);
+    after?:
+      | string
+      | ((results: AfterResult[], options: unknown) => AfterResult[]);
     options?: any;
     matches?: string;
     enabled?: boolean;
@@ -280,9 +304,10 @@ declare namespace axe {
     all?: string[];
     none?: string[];
     tags?: string[];
-    matches?: string;
+    matches?: string | ((node: Element, virtualNode: VirtualNode) => boolean);
     reviewOnFail?: boolean;
-    metadata?: Omit<RuleMetadata, 'ruleId'>;
+    actIds?: string[];
+    metadata?: Omit<RuleMetadata, 'ruleId' | 'tags' | 'actIds'>;
   }
   interface AxePlugin {
     id: string;
@@ -346,7 +371,8 @@ declare namespace axe {
   type AxeReporter<T = unknown> = (
     rawResults: RawResult[],
     option: RunOptions,
-    callback: (report: T) => void
+    resolve: (report: T) => void,
+    reject: (error: Error) => void
   ) => void;
 
   interface VirtualNode {
@@ -367,6 +393,42 @@ declare namespace axe {
     shadowSelect: (selector: CrossTreeSelector) => Element | null;
     shadowSelectAll: (selector: CrossTreeSelector) => Element[];
     getStandards(): Required<Standards>;
+    DqElement: new (
+      elm: Element,
+      options?: { absolutePaths?: boolean }
+    ) => SerialDqElement;
+    uuid: (
+      options?: { random?: Uint8Array | Array<number> },
+      buf?: Uint8Array | Array<number>,
+      offset?: number
+    ) => string | Uint8Array | Array<number>;
+  }
+
+  interface Aria {
+    getRoleType: (role: string | Element | VirtualNode | null) => string | null;
+  }
+
+  interface Dom {
+    isFocusable: (node: Element | VirtualNode) => boolean;
+    isNativelyFocusable: (node: Element | VirtualNode) => boolean;
+  }
+
+  type AccessibleTextOptions = {
+    inControlContext?: boolean;
+    inLabelledByContext?: boolean;
+  };
+
+  interface Text {
+    accessibleText: (
+      element: Element,
+      options?: AccessibleTextOptions
+    ) => string;
+  }
+
+  interface Commons {
+    aria: Aria;
+    dom: Dom;
+    text: Text;
   }
 
   interface EnvironmentData {
@@ -380,6 +442,7 @@ declare namespace axe {
   let version: string;
   let plugins: any;
   let utils: Utils;
+  let commons: Commons;
 
   /**
    * Source string to use as an injected script in Selenium