govuk_publishing_components 29.13.0 → 29.15.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dafa42cbe074f0cac7f3d82ad2475eee0cbd895e755279ff94a0fb8862d0f7c2
-  data.tar.gz: 2b06381bc10381652f927ce42a46dc3d1a008b3e78c26646816b6f4809bd2605
+  metadata.gz: d9201a328c875b8cb5c93315a6365ea7dbc632027d0b973f9b0e700c86e01f6a
+  data.tar.gz: 78cd444356c208537d7108cda4c471774a09b140c9db3e7aec1b0899adebf968
 SHA512:
-  metadata.gz: f5adab3000ea81b5eaae1506a4d2070ac0e35bf499e4d4ca2500534a087fb67b8e79ac6012faae9590142122f432f7ea36d3c90db819a515d2b623d570e6cb70
-  data.tar.gz: 278fabdee01f0785b2fc2b26dfc07f9c122cd640cf78a8666a846d54d3b44b5e009544c1428d4ed7a24e3ea8af07cfa9d440710e8606bf19e3bc94b46d7e0b2b
+  metadata.gz: cf29058c5c655fed33c3f10e34728752117387c0006893c70dccf563862a5cc98dae584218e974b40b63b71f64aef1ea8ffb9b9f0c98dde7bbc49fcea331da99
+  data.tar.gz: 94bac53144fd6f7685976fbc884485d054ac991f07e1bee42c31707509cf6702063f3c1b9f67314e54dc48ea5f5d08ab00562a68e2af65b9b7dd0f98a7d5e1e5

data/app/assets/images/govuk_publishing_components/action-link-arrow--white.svg

@@ -0,0 +1 @@
+<svg width="39" height="39" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.01 6.818l-2.828 2.828 7.853 7.854-22 .066L0 21.5h22.035l-7.853 7.854 2.828 2.828L29.69 19.5zM39 19.5C39 30.27 30.27 39 19.5 39 9.373 39 1.05 31.28.092 21.405A19.737 19.737 0 010 19.5C0 8.73 8.73 0 19.5 0S39 8.73 39 19.5z" fill="#fff"/></svg>

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

@@ -4,6 +4,8 @@
   var GOVUK = global.GOVUK || {}
 
   GOVUK.Gtm = {
+    PIIRemover: new GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
+
     sendPageView: function () {
       if (window.dataLayer) {
         var data = {
@@ -48,15 +50,15 @@
     },
 
     getLocation: function () {
-      return document.location.href
+      return this.PIIRemover.stripPII(document.location.href)
     },
 
     getReferrer: function () {
-      return document.referrer
+      return this.PIIRemover.stripPIIWithOverride(document.referrer, true, true)
     },
 
     getTitle: function () {
-      return document.title
+      return this.PIIRemover.stripPII(document.title)
     },
 
     // window.httpStatusCode is set in the source of the error page in static

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js

@@ -0,0 +1,135 @@
+;(function (global) {
+  'use strict'
+
+  var GOVUK = global.GOVUK || {}
+  var EMAIL_PATTERN = /[^\s=/?&#]+(?:@|%40)[^\s=/?&]+/g
+  var POSTCODE_PATTERN = /\b[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9](?!refund)[ABD-HJLNPQ-Z]{2,3}\b/gi
+  var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
+  var ESCAPE_REGEX_PATTERN = /[|\\{}()[\]^$+*?.]/g
+
+  // specific URL parameters to be redacted from accounts URLs
+  var RESET_PASSWORD_TOKEN_PATTERN = /reset_password_token=[a-zA-Z0-9-]+/g
+  var UNLOCK_TOKEN_PATTERN = /unlock_token=[a-zA-Z0-9-]+/g
+  var STATE_PATTERN = /state=.[^&]+/g
+
+  function shouldStripDates () {
+    var metas = document.querySelectorAll('meta[name="govuk:static-analytics:strip-dates"]')
+    return metas.length > 0
+  }
+
+  function shouldStripPostcodes () {
+    var metas = document.querySelectorAll('meta[name="govuk:static-analytics:strip-postcodes"]')
+    return metas.length > 0
+  }
+
+  function queryStringParametersToStrip () {
+    var meta = document.querySelector('meta[name="govuk:static-analytics:strip-query-string-parameters"]')
+    var value = false
+    if (meta) {
+      value = meta.getAttribute('content')
+    }
+    var parameters = []
+
+    if (value) {
+      var split = value.split(',')
+      for (var i = 0; i < split.length; i++) {
+        parameters.push(split[i].trim())
+      }
+    }
+
+    return parameters
+  }
+
+  var PIIRemover = function () {
+    this.stripDatePII = shouldStripDates()
+    this.stripPostcodePII = shouldStripPostcodes()
+    this.queryStringParametersToStrip = queryStringParametersToStrip()
+  }
+
+  PIIRemover.prototype.PIISafe = function (value) {
+    this.value = value
+  }
+
+  PIIRemover.prototype.stripPII = function (value) {
+    if (typeof value === 'string') {
+      return this.stripPIIFromString(value)
+    } else if (Object.prototype.toString.call(value) === '[object Array]' || Object.prototype.toString.call(value) === '[object Arguments]') {
+      return this.stripPIIFromArray(value)
+    } else if (typeof value === 'object') {
+      return this.stripPIIFromObject(value)
+    } else {
+      return value
+    }
+  }
+
+  PIIRemover.prototype.stripPIIWithOverride = function (value, enableDateStripping, enablePostcodeStripping) {
+    var oldStripDatePII = this.stripDatePII
+    var oldPostcodePII = this.stripPostcodePII
+
+    this.stripDatePII = enableDateStripping
+    this.stripPostcodePII = enablePostcodeStripping
+
+    var strippedValue = this.stripPII(value)
+
+    this.stripDatePII = oldStripDatePII
+    this.stripPostcodePII = oldPostcodePII
+
+    return strippedValue
+  }
+
+  PIIRemover.prototype.stripPIIFromString = function (string) {
+    var stripped = string.replace(EMAIL_PATTERN, '[email]')
+    stripped = stripped.replace(RESET_PASSWORD_TOKEN_PATTERN, 'reset_password_token=[reset_password_token]')
+    stripped = stripped.replace(UNLOCK_TOKEN_PATTERN, 'unlock_token=[unlock_token]')
+    stripped = stripped.replace(STATE_PATTERN, 'state=[state]')
+    stripped = this.stripQueryStringParameters(stripped)
+
+    if (this.stripDatePII === true) {
+      stripped = stripped.replace(DATE_PATTERN, '[date]')
+    }
+    if (this.stripPostcodePII === true) {
+      stripped = stripped.replace(POSTCODE_PATTERN, '[postcode]')
+    }
+    return stripped
+  }
+
+  PIIRemover.prototype.stripPIIFromObject = function (object) {
+    if (object) {
+      if (object instanceof this.PIISafe) {
+        return object.value
+      } else {
+        for (var property in object) {
+          var value = object[property]
+
+          object[property] = this.stripPII(value)
+        }
+        return object
+      }
+    }
+  }
+
+  PIIRemover.prototype.stripPIIFromArray = function (array) {
+    for (var i = 0, l = array.length; i < l; i++) {
+      var elem = array[i]
+
+      array[i] = this.stripPII(elem)
+    }
+    return array
+  }
+
+  PIIRemover.prototype.stripQueryStringParameters = function (string) {
+    for (var i = 0; i < this.queryStringParametersToStrip.length; i++) {
+      var parameter = this.queryStringParametersToStrip[i]
+      var escaped = parameter.replace(ESCAPE_REGEX_PATTERN, '\\$&')
+      var regexp = new RegExp('((?:\\?|&)' + escaped + '=)(?:[^&#\\s]*)', 'g')
+      string = string.replace(regexp, '$1[' + parameter + ']')
+    }
+
+    return string
+  }
+
+  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+  GOVUK.analyticsGA4.PIIRemover = PIIRemover
+
+  global.GOVUK = GOVUK
+})(window)

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

@@ -1,3 +1,5 @@
+// The following modules are imported in a specific order
+//= require ./analytics-ga4/pii-remover
 //= require ./analytics-ga4/gtm-page-views
 //= require ./analytics-ga4/gtm-click-tracking
 

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -10,27 +10,22 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   function GemAccordion ($module) {
     this.$module = $module
     this.sectionClass = 'govuk-accordion__section'
-    this.sectionClassExpanded = 'govuk-accordion__section--expanded'
-    this.sectionHeaderClass = 'govuk-accordion__section-header'
-    this.sectionInnerContent = 'govuk-accordion__section-content'
-    this.showAllControls = 'govuk-accordion__show-all'
-    this.sectionButton = 'govuk-accordion__section-button'
-    this.headingText = 'govuk-accordion__section-heading-text'
-
-    // Translated component content and language attribute pulled from data attributes
+    this.sectionExpandedClass = 'govuk-accordion__section--expanded'
+    this.sectionInnerContentClass = 'govuk-accordion__section-content'
+
+    this.sectionHeader = '.govuk-accordion__section-header'
+    this.showAllControls = '.govuk-accordion__show-all'
+    this.sectionButton = '.govuk-accordion__section-button'
+    this.headingText = '.govuk-accordion__section-heading-text'
+
+    // language attribute pulled from data attributes
     this.$module.actions = {}
     this.$module.actions.locale = this.$module.getAttribute('data-locale')
-    this.$module.actions.showText = this.$module.getAttribute('data-show-text')
-    this.$module.actions.hideText = this.$module.getAttribute('data-hide-text')
-    this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text')
-    this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text')
-    this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden')
   }
 
   GemAccordion.prototype.init = function () {
     // Indicate that JavaScript has worked
-    this.$module.classList.add('gem-c-accordion--active')
-    this.$module.querySelector('.' + this.showAllControls).classList.add('gem-c-accordion__show-all')
+    this.$module.querySelector(this.showAllControls).classList.add('gem-c-accordion__show-all')
 
     // Feature flag for anchor tag navigation used on manuals
     if (this.$module.getAttribute('data-anchor-navigation') === 'true') {
@@ -50,7 +45,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     var showAllAttributes = this.$module.getAttribute('data-show-all-attributes')
     if (showAllAttributes) {
       try {
-        var showAll = this.$module.querySelector('.' + this.showAllControls)
+        var showAll = this.$module.querySelector(this.showAllControls)
         var values = JSON.parse(showAllAttributes)
         var keys = Object.keys(values)
         for (var i = 0; i < keys.length; i++) {
@@ -74,7 +69,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   // Add event listeners for links to open accordion sections when navigated to using said anchor links on the page
   // Adding an event listener to all anchor link a tags in an accordion is risky but we circumvent this risk partially by only being a layer of accordion behaviour instead of any sort of change to link behaviour
   GemAccordion.prototype.addEventListenersForAnchors = function () {
-    var links = this.$module.querySelectorAll('.' + this.sectionInnerContent + ' a[href*="#"]')
+    var links = this.$module.querySelectorAll(this.sectionInnerContentClass + ' a[href*="#"]')
 
     nodeListForEach(links, function (link) {
       if (link.pathname === window.location.pathname) {
@@ -87,7 +82,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   GemAccordion.prototype.openForAnchor = function (hash) {
     var target = document.getElementById(hash)
     var $section = this.getContainingSection(target)
-    var $header = $section.querySelector('.' + this.sectionHeaderClass)
+    var $header = $section.querySelector(this.sectionHeader)
     var $expanded = this.getContainingSection($section)
     var $parent = $header.parentElement
 
@@ -95,7 +90,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     // Should the target anchor link be within the same page, open section - navigate normally
     // Should the target anchor link be within a different, closed section, open this section
     // Should the target anchor link be within a different page and different, closed section open this section
-    if ($expanded && (!$parent.classList.contains(this.sectionClassExpanded))) {
+    if ($expanded && (!$parent.classList.contains(this.sectionExpandedClass))) {
       $header.click()
     }
   }
@@ -119,11 +114,21 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
   // To track the Accordion's "Show all sections" / "Hide all sections" button click events and pass them to the GA event tracking
   GemAccordion.prototype.addAccordionOpenAllTracking = function () {
-    this.$module.querySelector('.' + this.showAllControls).addEventListener('click', function (event) {
+    this.$module.querySelector(this.showAllControls).addEventListener('click', function (event) {
       var expanded = event.target.getAttribute('aria-expanded') === 'true'
       var label = expanded ? 'Show all sections' : 'Hide all sections'
       var action = expanded ? 'accordionOpened' : 'accordionClosed'
       var options = { transport: 'beacon', label: label }
+
+      var extraOptions = event.target && event.target.getAttribute('data-track-options')
+
+      // this uses the same logic as track-click.js handleClick
+      // means we can add a custom dimensions on click
+      if (extraOptions) {
+        extraOptions = JSON.parse(extraOptions)
+        for (var k in extraOptions) options[k] = extraOptions[k]
+      }
+
       if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
         window.GOVUK.analytics.trackEvent('pageElementInteraction', action, options)
       }
@@ -131,7 +136,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   }
 
   GemAccordion.prototype.addEventListenerSections = function () {
-    var sections = this.$module.querySelectorAll('.' + this.sectionButton)
+    var sections = this.$module.querySelectorAll(this.sectionButton)
     nodeListForEach(sections, function (section) {
       section.addEventListener('click', this.addAccordionSectionTracking.bind(this, section))
     }.bind(this))
@@ -140,7 +145,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   // If the Accordion's sections are opened on click, then pass them to the GA event tracking
   GemAccordion.prototype.addAccordionSectionTracking = function (section) {
     var expanded = section.getAttribute('aria-expanded') === 'false'
-    var label = section.querySelector('.' + this.headingText).textContent
+    var label = section.querySelector(this.headingText).textContent
     var action = expanded ? 'accordionOpened' : 'accordionClosed'
     var options = { transport: 'beacon', label: label }
 

data/app/assets/javascripts/govuk_publishing_components/components/table.js

@@ -0,0 +1,52 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function Table ($module) {
+    this.$module = $module
+    this.searchInput = $module.querySelector('input[name="filter"]')
+    this.tableRows = $module.querySelectorAll('.js-govuk-table__row')
+    this.filter = $module.querySelector('.js-gem-c-table__filter')
+    this.filterCount = this.filter.querySelector('.js-filter-count')
+    this.message = $module.querySelector('.js-gem-c-table__message')
+    this.hiddenClass = 'govuk-!-display-none'
+    this.filterCountText = this.filterCount.getAttribute('data-count-text')
+    this.tableRowsContent = []
+
+    for (var i = 0; i < this.tableRows.length; i++) {
+      this.tableRowsContent.push(this.tableRows[i].textContent.toUpperCase())
+    }
+  }
+
+  Table.prototype.init = function () {
+    this.$module.updateRows = this.updateRows.bind(this)
+    this.filter.classList.remove(this.hiddenClass)
+    this.searchInput.addEventListener('input', this.$module.updateRows)
+  }
+
+  // Reads value of input and filters content
+  Table.prototype.updateRows = function () {
+    var value = this.searchInput.value
+    var hiddenRows = 0
+    var length = this.tableRows.length
+
+    for (var i = 0; i < length; i++) {
+      if (this.tableRowsContent[i].includes(value.toUpperCase())) {
+        this.tableRows[i].classList.remove(this.hiddenClass)
+      } else {
+        this.tableRows[i].classList.add(this.hiddenClass)
+        hiddenRows++
+      }
+    }
+
+    this.filterCount.textContent = (length - hiddenRows) + ' ' + this.filterCountText
+
+    if (length === hiddenRows) {
+      this.message.classList.remove(this.hiddenClass)
+    } else {
+      this.message.classList.add(this.hiddenClass)
+    }
+  }
+
+  Modules.Table = Table
+})(window.GOVUK.Modules)

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

@@ -92,6 +92,13 @@
   }
 }
 
+.gem-c-action-link--white-arrow {
+  &:before {
+    background-image: image-url("govuk_publishing_components/action-link-arrow--white.png");
+    background-image: image-url("govuk_publishing_components/action-link-arrow--white.svg"), linear-gradient(transparent, transparent);
+  }
+}
+
 .gem-c-action-link--blue-arrow {
   &:before {
     width: 36px;

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -1,92 +1 @@
-.gem-c-pagination {
-  display: block;
-  margin: govuk-spacing(8) 0;
-}
-
-.gem-c-pagination__list {
-  margin: 0;
-  padding: 0;
-}
-
-.gem-c-pagination__item {
-  @include govuk-font($size: 19);
-  list-style: none;
-
-  &:first-child {
-    margin-bottom: govuk-spacing(4);
-  }
-}
-
-.gem-c-pagination__link {
-  display: block;
-  text-decoration: none;
-  padding-bottom: govuk-spacing(4);
-
-  &:hover,
-  &:active,
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  &:hover,
-  &:active {
-    background-color: govuk-colour("light-grey", $legacy: "grey-4");
-
-    // Add govuk-link hover decoration to title if no label present
-    .gem-c-pagination__link-text--decorated {
-      @include govuk-link-decoration;
-    }
-
-    .gem-c-pagination__link-label,
-    .gem-c-pagination__link-text--decorated {
-      @include govuk-link-hover-decoration;
-    }
-  }
-
-  &:focus {
-    @include govuk-focused-text;
-
-    .gem-c-pagination__link-title {
-      border-top-color: transparent;
-    }
-
-    .gem-c-pagination__link-icon {
-      fill: $govuk-text-colour;
-    }
-  }
-}
-
-.gem-c-pagination__link-title {
-  display: block;
-  border-top: 1px solid $govuk-border-colour;
-  padding-top: govuk-spacing(3);
-}
-
-.gem-c-pagination__link-divider {
-  @include govuk-visually-hidden;
-}
-
-.gem-c-pagination__link-text {
-  @include govuk-font(19, $weight: bold);
-  margin-left: govuk-spacing(2);
-}
-
-.gem-c-pagination__link-icon {
-  @include govuk-font($size: 24, $line-height: (33.75 / 27));
-  display: inline-block;
-  margin-bottom: 1px;
-  height: .482em;
-  width: .63em;
-  fill: govuk-colour("dark-grey", $legacy: "grey-1");
-}
-
-.gem-c-pagination__link-label {
-  display: inline-block;
-  margin-top: .1em;
-  margin-left: govuk-spacing(5);
-  @include govuk-link-decoration;
-
-  @include govuk-media-query($from: tablet) {
-    margin-left: govuk-spacing(6);
-  }
-}
+@import "govuk/components/pagination/pagination";

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -6,6 +6,7 @@ module GovukPublishingComponents
       @path = path
       application_found = application_exists(path)
       components_found = []
+      @component_locations = {}
       @gem_style_references = []
       @jquery_references = []
 
@@ -25,15 +26,15 @@ module GovukPublishingComponents
         @find_all_javascripts = /\/\/ *= require govuk_publishing_components\/all_components/
         find_javascripts = /(?<=require govuk_publishing_components\/components\/)[a-zA-Z_-]+/
 
-        components_in_templates = find_components(templates, find_components, "templates") || []
-        components_in_stylesheets = find_components(stylesheets, find_stylesheets, "stylesheets") || []
-        components_in_print_stylesheets = find_components(stylesheets, find_print_stylesheets, "print_stylesheets") || []
-        components_in_javascripts = find_components(javascripts, find_javascripts, "javascripts") || []
+        components_in_templates = find_components(templates, find_components, "templates", true) || []
+        components_in_stylesheets = find_components(stylesheets, find_stylesheets, "stylesheets", false) || []
+        components_in_print_stylesheets = find_components(stylesheets, find_print_stylesheets, "print_stylesheets", false) || []
+        components_in_javascripts = find_components(javascripts, find_javascripts, "javascripts", false) || []
 
         ruby_paths = %w[/app/helpers/ /app/presenters/ /lib/]
         components_in_ruby = []
         ruby_paths.each do |ruby_path|
-          components_in_ruby << find_components(Dir["#{path}#{ruby_path}**/*.{rb,erb}"], find_components, "ruby") || []
+          components_in_ruby << find_components(Dir["#{path}#{ruby_path}**/*.{rb,erb}"], find_components, "ruby", true) || []
         end
         components_in_ruby = components_in_ruby.flatten.uniq
 
@@ -67,17 +68,32 @@ module GovukPublishingComponents
         components_found: components_found,
         gem_style_references: @gem_style_references.flatten.uniq.sort,
         jquery_references: @jquery_references.flatten.uniq.sort,
+        component_locations: @component_locations,
       }
     end
 
   private
 
-    def find_components(files, find, type)
+    def find_components(files, find, type, keep_locations)
       components_found = []
 
       files.each do |file|
         src = File.read(file)
-        components_found << find_match(find, src, type)
+
+        if keep_locations
+          components = find_match(find, src, type)
+          if components.any?
+            components_found << components
+            components.each do |component|
+              component_sym = component.to_sym
+              @component_locations[component_sym] = [] unless @component_locations[component_sym]
+              @component_locations[component_sym] << clean_file_path(file)
+              @component_locations[component_sym].sort!
+            end
+          end
+        else
+          components_found << find_match(find, src, type)
+        end
 
         if type == "javascripts"
           jquery_references = find_code_references(file, src, /\$\(/)
@@ -93,12 +109,16 @@ module GovukPublishingComponents
       components_found.flatten.uniq.sort
     end
 
+    # looks for components in the given src of a file
+    # returns an array of component names or an empty array
     def find_match(find, src, type)
       return %w[all] if src.match(@find_all_stylesheets) && type == "stylesheets"
       return %w[all] if src.match(@find_all_print_stylesheets) && type == "print_stylesheets"
       return %w[all] if src.match(@find_all_javascripts) && type == "javascripts"
 
       matches = src.scan(find)
+      return [] unless matches.any?
+
       all_matches = []
       matches.each do |match|
         all_matches << clean_file_name(match.tr('[])\'"', ""))
@@ -108,9 +128,11 @@ module GovukPublishingComponents
     end
 
     def find_code_references(file, src, regex)
-      clean_file_path = /(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/
+      return clean_file_path(file) if regex.match?(src)
+    end
 
-      return file[clean_file_path] if regex.match?(src)
+    def clean_file_path(file)
+      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/]
     end
 
     def clean_file_name(name)

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -106,6 +106,7 @@ module GovukPublishingComponents
             warning_count: warnings.length,
             gem_style_references: result[:gem_style_references],
             jquery_references: result[:jquery_references],
+            component_locations: result[:component_locations],
           }
         else
           data << {
@@ -244,28 +245,33 @@ module GovukPublishingComponents
       (haystack - needle).flatten.sort
     end
 
+    # returns details of component inclusion by applications
     def get_components_by_application
       results = []
       found_something = false
 
       @gem_data[:component_listing].each do |component|
-        found_in_applications = []
+        component_name = component[:name]
+        locations = []
 
         @applications_data.each do |application|
-          next unless application[:application_found]
+          next unless application[:application_found] && application[:component_locations][component_name.to_sym]
 
-          name = application[:name]
+          application_name = application[:name]
           found_something = true
 
-          application[:summary].each do |item|
-            found_in_applications << name if item[:value].include?(component[:name])
-          end
+          locations << {
+            name: application_name,
+            locations: application[:component_locations][component_name.to_sym],
+          }
         end
 
+        locations = locations.flatten
+
         results << {
-          component: component[:name],
-          count: found_in_applications.uniq.length,
-          list: found_in_applications.uniq.join(", "),
+          component: component_name,
+          count: locations.length,
+          locations: locations,
         }
       end
 

data/app/views/govuk_publishing_components/audit/_components.html.erb

@@ -63,10 +63,28 @@
           <% @components[:components_by_application].each do |component| %>
             <div class="govuk-summary-list__row">
               <dt class="govuk-summary-list__key">
-                <%= component[:component] %> (<%= component[:count] %>)
+                <%= component[:component] %> (<%= pluralize(component[:count], 'use') %>)
               </dt>
               <dd class="govuk-summary-list__value">
-                <%= component[:list] %>
+                <% component[:locations].each do |application| %>
+                  <% github_link = 'https://github.com/alphagov/' + application[:name] + '/blob/main/' %>
+                  <details class="govuk-details govuk-!-margin-bottom-2" data-module="govuk-details">
+                    <summary class="govuk-details__summary">
+                      <span class="govuk-details__summary-text">
+                        <%= application[:name] %> (<%= application[:locations].length %>)
+                      </span>
+                    </summary>
+                    <div class="govuk-details__text">
+                      <ul class="govuk-list govuk-list--bullet">
+                        <% application[:locations].each do |location| %>
+                          <li>
+                            <a href="<%= github_link %><%= location %>" class="govuk-link"><%= location %></a>
+                          </li>
+                        <% end %>
+                      </ul>
+                    </div>
+                  </details>
+                <% end %>
               </dd>
             </div>
           <% end %>

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

@@ -10,6 +10,7 @@
   mobile_subtext ||= false
   light_text ||= false
   blue_arrow ||= false
+  white_arrow ||= false
   simple ||= false
   simple_light ||= false
   dark_icon ||= false
@@ -29,6 +30,7 @@
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--brexit" if brexit_icon
   css_classes << "gem-c-action-link--blue-arrow" if blue_arrow
+  css_classes << "gem-c-action-link--white-arrow" if white_arrow
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--simple-light" if simple_light
   css_classes << "gem-c-action-link--with-subtext" if subtext