govuk_publishing_components 29.5.0 → 29.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3aa5e0fc0a38b75525aa2915acb8986988d4311a46a84aa9baaa5e3ca546ea21
-  data.tar.gz: 94a1d71770c10fc48dc306ebe1e9857680649bab32c5017ebf921a8b550617bd
+  metadata.gz: 4cef8771d15136a9e4ebbe4fc0cbedb616731c433ea12db09af6fa12c1613594
+  data.tar.gz: 721a1fb8532f1952e49aa9ff61a6aa075d3719f8a774c387319858da6c153edf
 SHA512:
-  metadata.gz: 9ca1d951afe78053a1e8213c5a55cc90bf09c826a33d76703e5549bd9734a202c591d468b59b4205b3c3f7a128270c20db128bf6604f3ec91905b70f28ae9bcf
-  data.tar.gz: f37fb440c117ff86a76376a4aa2733be0defbda0157b6c0e1b38078f2cc100f93eb33f880d29e69d98a637c2d98aef51dbd2f2a4bf3a07375ac25d4d38809c78
+  metadata.gz: f1544190ffc2c00a4f1576c84c74c89e1bc647d4916bccd72deb7f571a9b3f010ebba18abec66a1d67868b86de280dd83cbe4c5bc34677b5a1150bf1a54fdf16
+  data.tar.gz: 868c8e7d02ab075e08fa196c526c39f02e6583dada12cfbb70f0384326a22728471cffe310d16692712d985960c4f78ec1e0f3ad5e8daeae84a4596398cf21a9

data/app/assets/javascripts/govuk_publishing_components/analytics/explicit-cross-domain-links.js

@@ -1,89 +1,88 @@
-;(function (global) {
-  'use strict'
-
-  var GOVUK = global.GOVUK || {}
-  GOVUK.Modules = GOVUK.Modules || {}
-
-  GOVUK.Modules.ExplicitCrossDomainLinks = function () {
-    this.start = function ($module) {
-      this.element = $module[0]
-      this.attribute = 'href'
-      this.attributeValue = this.element.getAttribute(this.attribute)
-      this.eventType = 'click'
-      if (!this.attributeValue) {
-        this.attribute = 'action'
-        this.attributeValue = this.element.getAttribute(this.attribute)
-        this.eventType = 'submit'
-      }
-
-      this.handleEvent = this.handleEvent.bind(this)
-      this.handleCookiesAccepted = this.handleCookiesAccepted.bind(this)
-      // Listens for the 'submit' event if the element is a form, and the 'click' event if it is a link
-      this.element.addEventListener(this.eventType, this.handleEvent)
-    }
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ExplicitCrossDomainLinks ($module) {
+    this.$module = $module
+  }
 
-    this.handleEvent = function (e) {
-      //  prevent default: we want the link href and/or form action to be decorated before we navigate away
-      e.preventDefault()
-      var cookieBannerEngaged = GOVUK.cookie('cookies_preferences_set')
-      var cookieConsent = GOVUK.getConsentCookie()
-
-      if (cookieBannerEngaged !== 'true') {
-        // If not engaged, append only ?cookie_consent=not-engaged
-        this.decorate(this.element, 'cookie_consent=not-engaged', this.attribute)
-      } else if (cookieConsent && cookieConsent.usage === true) {
-        this.handleCookiesAccepted()
-      } else {
-        this.decorate(this.element, 'cookie_consent=reject', this.attribute)
-      }
-
-      // remove the event listener to avoid an infinite loop
-      this.element.removeEventListener(this.eventType, this.handleEvent)
-
-      // if the element is a form, submit it. If it is a link, click it
-      if (this.eventType === 'submit') {
-        this.element.submit()
-      } else {
-        this.element.click()
-      }
+  ExplicitCrossDomainLinks.prototype.init = function () {
+    this.attribute = 'href'
+    this.attributeValue = this.$module.getAttribute(this.attribute)
+    this.eventType = 'click'
+    if (!this.attributeValue) {
+      this.attribute = 'action'
+      this.attributeValue = this.$module.getAttribute(this.attribute)
+      this.eventType = 'submit'
     }
 
-    this.handleCookiesAccepted = function () {
-      // If the cookie banner was engaged and usage cookie accepted, append ?_ga=clientid if available and cookie_consent=accept
-      var element = this.element
-      var attribute = this.attribute
-      this.decorate(element, 'cookie_consent=accept', attribute)
+    this.handleEvent = this.handleEvent.bind(this)
+    this.handleCookiesAccepted = this.handleCookiesAccepted.bind(this)
+    // Listens for the 'submit' event if the element is a form, and the 'click' event if it is a link
+    this.$module.addEventListener(this.eventType, this.handleEvent)
+  }
 
-      if (!global.ga) {
-        return
-      }
+  ExplicitCrossDomainLinks.prototype.decorate = function (element, param, attribute) {
+    var attributeValue = element.getAttribute(attribute)
 
-      global.ga(function () {
-        var trackers = global.ga.getAll()
+    if (!attributeValue) { return }
 
-        if (!trackers.length) { return }
+    if (attributeValue.indexOf('?') !== -1) {
+      attributeValue += '&' + param
+    } else {
+      attributeValue += '?' + param
+    }
 
-        var linker = new global.gaplugins.Linker(trackers[0])
-        var attrValue = element.getAttribute(attribute)
+    element.setAttribute(attribute, attributeValue)
+  }
 
-        element.setAttribute(attribute, linker.decorate(attrValue))
-      })
+  ExplicitCrossDomainLinks.prototype.handleEvent = function (e) {
+    //  prevent default: we want the link href and/or form action to be decorated before we navigate away
+    e.preventDefault()
+    var cookieBannerEngaged = window.GOVUK.cookie('cookies_preferences_set')
+    var cookieConsent = window.GOVUK.getConsentCookie()
+
+    if (cookieBannerEngaged !== 'true') {
+      // If not engaged, append only ?cookie_consent=not-engaged
+      this.decorate(this.$module, 'cookie_consent=not-engaged', this.attribute)
+    } else if (cookieConsent && cookieConsent.usage === true) {
+      this.handleCookiesAccepted()
+    } else {
+      this.decorate(this.$module, 'cookie_consent=reject', this.attribute)
     }
 
-    this.decorate = function (element, param, attribute) {
-      var attributeValue = element.getAttribute(attribute)
+    // remove the event listener to avoid an infinite loop
+    this.$module.removeEventListener(this.eventType, this.handleEvent)
 
-      if (!attributeValue) { return }
+    // if the element is a form, submit it. If it is a link, click it
+    if (this.eventType === 'submit') {
+      this.$module.submit()
+    } else {
+      this.$module.click()
+    }
+  }
 
-      if (attributeValue.indexOf('?') !== -1) {
-        attributeValue += '&' + param
-      } else {
-        attributeValue += '?' + param
-      }
+  ExplicitCrossDomainLinks.prototype.handleCookiesAccepted = function () {
+    // If the cookie banner was engaged and usage cookie accepted, append ?_ga=clientid if available and cookie_consent=accept
+    var element = this.$module
+    var attribute = this.attribute
+    this.decorate(element, 'cookie_consent=accept', attribute)
 
-      element.setAttribute(attribute, attributeValue)
+    if (!window.ga) {
+      return
     }
+
+    window.ga(function () {
+      var trackers = window.ga.getAll()
+
+      if (!trackers.length) { return }
+
+      var linker = new window.gaplugins.Linker(trackers[0])
+      var attrValue = element.getAttribute(attribute)
+
+      element.setAttribute(attribute, linker.decorate(attrValue))
+    })
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  Modules.ExplicitCrossDomainLinks = ExplicitCrossDomainLinks
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/analytics/page-content.js

@@ -13,6 +13,10 @@
         return document.querySelectorAll('[data-track-count="accordionSection"]').length
       case isDocumentCollectionPage():
         return document.querySelectorAll('.document-collection .group-title').length
+      case isNewBrowsePageLevelTwo():
+        // if there are no accordion sections on the browse level 2 page
+        // then it is a default page with only one section
+        return document.querySelectorAll('[data-track-count="accordionSection"]').length || 1
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardList"]').length
       case isMainstreamBrowsePage():
@@ -46,6 +50,8 @@
         return document.querySelectorAll('a[data-track-category="navAccordionLinkClicked"]').length
       case isDocumentCollectionPage():
         return document.querySelectorAll('.document-collection .group-document-list li a').length
+      case isNewBrowsePageLevelTwo():
+        return document.querySelectorAll('[data-track-count="contentLink"]').length
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardLink"]').length
       case isMainstreamBrowsePage():
@@ -98,6 +104,11 @@
       getMetaAttribute(metaNavigationTypeSelector) === 'leaf'
   }
 
+  function isNewBrowsePageLevelTwo () {
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'browse level 2'
+  }
+
   function isNewBrowsePage () {
     return getMetaAttribute(metaApplicationSelector) === 'collections' &&
       getMetaAttribute(metaSectionSelector) === 'new_browse_page' &&

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-click-tracking.js

@@ -0,0 +1,49 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict'
+
+  function GtmClickTracking (module) {
+    this.module = module
+    this.trackingTrigger = 'data-gtm-event-name' // elements with this attribute get tracked
+  }
+
+  GtmClickTracking.prototype.init = function () {
+    var trackClicksOn = [this.module]
+    if (!this.module.getAttribute(this.trackingTrigger)) {
+      trackClicksOn = this.module.querySelectorAll('[' + this.trackingTrigger + ']')
+    }
+
+    for (var i = 0; i < trackClicksOn.length; i++) {
+      trackClicksOn[i].addEventListener('click', this.trackClick.bind(this))
+    }
+  }
+
+  GtmClickTracking.prototype.trackClick = function (event) {
+    if (window.dataLayer) {
+      var target = event.currentTarget
+      var data = {
+        event: 'analytics',
+        event_name: target.getAttribute('data-gtm-event-name'),
+        // get entire URL apart from domain
+        link_url: window.location.href.substring(window.location.origin.length),
+        ui: JSON.parse(target.getAttribute('data-gtm-attributes'))
+      }
+      var ariaExpanded = this.checkExpandedState(target)
+      if (ariaExpanded) {
+        data.ui.state = ariaExpanded === 'false' ? 'opened' : 'closed'
+      }
+      window.dataLayer.push(data)
+    }
+  }
+
+  GtmClickTracking.prototype.checkExpandedState = function (clicked) {
+    var expanded = clicked.querySelector('[aria-expanded]')
+    if (expanded) {
+      return expanded.getAttribute('aria-expanded')
+    }
+  }
+
+  Modules.GtmClickTracking = GtmClickTracking
+})(window.GOVUK.Modules)

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

@@ -0,0 +1 @@
+//= require ./analytics-ga4/gtm-click-tracking

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

@@ -131,7 +131,6 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
     if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
       window.GOVUK.analytics.trackEvent('pageElementInteraction', action, options)
-      console.log('pageElementInteraction', action, options)
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -51,6 +51,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // giving the table a class of mc-stacked
     this.options.stacked = this.$table.classList.contains('mc-stacked')
 
+    // stacked charts require tables to use the th element in the table header
+    // if the th element is not included, then the ENABLED flag is set to false
+    // this will stop the chart and toggleLink from being rendered
+    if (this.options.stacked) {
+      var allTheTHsInTableHead = this.$table.querySelectorAll('thead th')
+      if (allTheTHsInTableHead.length === 0) {
+        this.ENABLED = false
+      }
+    }
+
     // set the negative option based on
     // giving the table a class of mc-negative
     this.options.negative = this.$table.classList.contains('mc-negative')
@@ -106,12 +116,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   MagnaCharta.prototype.apply = function () {
     if (this.ENABLED) {
-      this.constructChart()
-      this.addClassesToHeader()
-      this.applyWidths()
-      this.insert()
-      this.$table.classList.add('mc-hidden')
-      this.applyOutdent()
+      try {
+        this.constructChart()
+        this.addClassesToHeader()
+        this.applyWidths()
+        this.insert()
+        this.$table.classList.add('mc-hidden')
+        this.applyOutdent()
+      } catch (error) {
+        console.error('MagnaCharta error:', error)
+      }
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/modules.js

@@ -35,7 +35,6 @@
         for (var j = 0, k = moduleNames.length; j < k; j++) {
           var moduleName = camelCaseAndCapitalise(moduleNames[j])
           var started = element.getAttribute('data-' + moduleNames[j] + '-module-started')
-
           if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
             // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
             if (GOVUK.Modules[moduleName].prototype.init) {

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-measurer.js

@@ -157,3 +157,31 @@ if (
     LongTaskObserver.observe({ type: ["longtask"] });
   } catch (e) {}
 }
+
+// As per RFC 147[1], this adds in monitoring of the type of HTTP protocol that
+// is used when a browser loads a page.
+//
+// The User Timing API (aka window.performance) is used to record the data - to
+// avoid the use of this from breaking the JavaScript for the small number of
+// browsers that don't support it, it's been wrapped in a try/catch block plus a
+// couple of checks to prevent "is not defined" errors.
+//
+// Because the `nextHopProtocol` isn't immediately available - it seems to need
+// a request to be made before it's populated - we need to wait for the
+// `DOMContentReady` event before we can see what the HTTP version is.
+//
+// [1]: https://github.com/alphagov/govuk-rfcs/pull/148
+try {
+  if (typeof performance !== 'undefined') {
+    document.addEventListener('DOMContentLoaded', function () {
+      var getEntriesByType = performance.getEntriesByType('navigation')
+
+      if (getEntriesByType.length > 0) {
+        var httpProtocol = performance.getEntriesByType('navigation')[0].nextHopProtocol
+        LUX.addData("http-protocol", httpProtocol)
+      }
+    })
+  }
+} catch (e) {
+  console.error('Error in LUX reporting the HTTP protocol (' + window.location + '):', e)
+}

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

@@ -50,12 +50,19 @@
   // We use grid to split the container into column widths, so manage the horizontal spacing with
   // internal margins.
   margin: 0 govuk-spacing(3);
-  padding: govuk-spacing(3) 0 govuk-spacing(6) 0;
+  padding: govuk-spacing(1) 0 govuk-spacing(4) 0;
+}
+
+.gem-c-cards__list-item-wrapper {
+  // this wrapper ensures that the clickable area of the card only
+  // covers the area of the card containing text so in a grid of cards
+  // there is space above and below each link
+  padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) 0;
   position: relative;
 }
 
 .gem-c-cards__sub-heading {
-  margin: 0 govuk-spacing(6) govuk-spacing(2) 0;
+  margin-bottom: govuk-spacing(2);
 }
 
 .gem-c-cards__link {
@@ -79,7 +86,7 @@
     height: $dimension;
     position: absolute;
     right: govuk-spacing(1);
-    top: govuk-spacing(4);
+    top: govuk-spacing(3);
     @include prefixed-transform($rotate: 45deg);
     width: $dimension;
   }
@@ -98,5 +105,5 @@
 }
 
 .gem-c-cards__description {
-  margin: 0;
+  margin: 0 govuk-spacing(-6) 0 0;
 }

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

@@ -816,7 +816,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns($items: 17, $columns: 2, $selector: "li", $flow: column);
+    @include columns($items: 16, $columns: 2, $selector: "li", $flow: column);
   }
 }
 

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

@@ -16,7 +16,7 @@
   // This block is duplicated from Whitehall as a transitional step, see the
   // commit message for 2d893c10ee3f2cab27162b9aba38b12379a71d07 before making
   // changes, original version:
-  // https://github.com/alphagov/whitehall/blob/master/app/assets/stylesheets/frontend/helpers/_attachment.scss
+  // https://github.com/alphagov/whitehall/blob/main/app/assets/stylesheets/frontend/helpers/_attachment.scss
   $thumbnail-width: 99px;
 
   .attachment {

data/app/controllers/govuk_publishing_components/audit_controller.rb

@@ -13,8 +13,6 @@ module GovukPublishingComponents
         frontend
         government-frontend
         govspeak-preview
-        govuk-account-manager-prototype
-        govuk-coronavirus-vulnerable-people-form
         info-frontend
         licence-finder
         manuals-frontend
@@ -32,10 +30,9 @@ module GovukPublishingComponents
       gem_path = Gem.loaded_specs["govuk_publishing_components"].full_gem_path
       gem_path = Dir.pwd if ENV["MAIN_COMPONENT_GUIDE"]
       host_dir = File.expand_path("..")
-      path = File.expand_path("..", gem_path)
 
       @in_application = false
-      @in_application = true unless path.to_s == host_dir.to_s
+      @in_application = true unless ENV["MAIN_COMPONENT_GUIDE"]
 
       components = AuditComponents.new(gem_path, false)
       applications = analyse_applications(host_dir, application_dirs)

data/app/models/govuk_publishing_components/audit_components.rb

@@ -12,29 +12,40 @@ module GovukPublishingComponents
   private
 
     def compile_data(path, simple)
+      # simple is used to reduce effort (and therefore page load time) required
+      # when loading auditing summary on the main component guide page
       @simple = simple
-      templates_path = "app/views/govuk_publishing_components/components"
-      stylesheets_path = "app/assets/stylesheets/govuk_publishing_components/components"
-      print_stylesheets_path = "app/assets/stylesheets/govuk_publishing_components/components/print"
-      javascripts_path = "app/assets/javascripts/govuk_publishing_components/components"
-      tests_path = "spec/components"
-      js_tests_path = "spec/javascripts/components"
-
-      templates = Dir["#{path}/#{templates_path}/*.erb"]
-      stylesheets = Dir["#{path}/#{stylesheets_path}/*.scss"]
-      print_stylesheets = Dir["#{path}/#{print_stylesheets_path}/*.scss"]
-      javascripts = Dir["#{path}/#{javascripts_path}/*.js"]
-      tests = Dir["#{path}/#{tests_path}/*.rb"]
-      js_tests = Dir["#{path}/#{js_tests_path}/*.js"]
-
-      @templates_full_path = "#{path}/#{templates_path}/"
-
-      @components = find_files(templates, [path, templates_path].join("/"))
-      @component_stylesheets = find_files(stylesheets, [path, stylesheets_path].join("/"))
-      @component_print_stylesheets = find_files(print_stylesheets, [path, print_stylesheets_path].join("/"))
-      @component_javascripts = find_files(javascripts, [path, javascripts_path].join("/"))
-      @component_tests = find_files(tests, [path, tests_path].join("/"))
-      @component_js_tests = find_files(js_tests, [path, js_tests_path].join("/"))
+
+      # paths to key file locations
+      @templates_path = "app/views/govuk_publishing_components/components"
+      @stylesheets_path = "app/assets/stylesheets/govuk_publishing_components/components"
+      @print_stylesheets_path = "app/assets/stylesheets/govuk_publishing_components/components/print"
+      @javascripts_path = "app/assets/javascripts/govuk_publishing_components/components"
+      @tests_path = "spec/components"
+      @js_tests_path = "spec/javascripts/components"
+      @helpers_path = "lib/govuk_publishing_components/presenters"
+
+      # get all files in key file locations
+      templates = Dir["#{path}/#{@templates_path}/*.erb"]
+      stylesheets = Dir["#{path}/#{@stylesheets_path}/*.scss"]
+      print_stylesheets = Dir["#{path}/#{@print_stylesheets_path}/*.scss"]
+      javascripts = Dir["#{path}/#{@javascripts_path}/*.js"]
+      tests = Dir["#{path}/#{@tests_path}/*.rb"]
+      js_tests = Dir["#{path}/#{@js_tests_path}/*.js"]
+      helpers = Dir["#{path}/#{@helpers_path}/*_helper.rb"]
+
+      @templates_full_path = "#{path}/#{@templates_path}/"
+
+      # find the cleaned names of components in key file locations
+      # i.e. will show that 'component name' has a stylesheet
+      # standardised like this to be used later for easier comparison
+      @components = clean_files(templates, [path, @templates_path].join("/"))
+      @component_stylesheets = clean_files(stylesheets, [path, @stylesheets_path].join("/"))
+      @component_print_stylesheets = clean_files(print_stylesheets, [path, @print_stylesheets_path].join("/"))
+      @component_javascripts = clean_files(javascripts, [path, @javascripts_path].join("/"))
+      @component_tests = clean_files(tests, [path, @tests_path].join("/"))
+      @component_js_tests = clean_files(js_tests, [path, @js_tests_path].join("/"))
+      @component_helpers = clean_files(helpers, [path, @helpers_path].join("/"))
 
       {
         gem_found: true,
@@ -44,12 +55,13 @@ module GovukPublishingComponents
         component_javascripts: @component_javascripts,
         component_tests: @component_tests,
         component_js_tests: @component_js_tests,
+        component_helpers: @component_helpers,
         components_containing_components: find_all_partials_in(templates),
         component_listing: list_all_component_details,
       }
     end
 
-    def find_files(files, replace)
+    def clean_files(files, replace)
       files.map { |file| clean_file_name(file.gsub(replace, "")) }.sort
     end
 
@@ -61,6 +73,7 @@ module GovukPublishingComponents
         .gsub(".js", "")
         .gsub("spec", "")
         .gsub(".rb", "")
+        .gsub("helper", "")
         .strip
     end
 
@@ -72,11 +85,14 @@ module GovukPublishingComponents
         .tr('\"\'', "")
     end
 
+    # create link to component guide page for a given component e.g. 'component name'
     def get_component_link(component)
       "/component-guide/#{component.gsub(' ', '_')}"
     end
 
     def find_all_partials_in(templates)
+      return [] if @simple
+
       components = []
 
       templates.each do |template|
@@ -142,6 +158,7 @@ module GovukPublishingComponents
           javascript: check_component_has("javascript", component),
           tests: check_component_has("test", component),
           js_tests: check_component_has("js_test", component),
+          helper: check_component_has("helper", component),
         }
       end
 
@@ -154,8 +171,28 @@ module GovukPublishingComponents
       look_in = @component_javascripts if a_thing == "javascript"
       look_in = @component_tests if a_thing == "test"
       look_in = @component_js_tests if a_thing == "js_test"
+      look_in = @component_helpers if a_thing == "helper"
+
+      if look_in.include?(component)
+        return get_asset_link(a_thing, component)
+      end
+
+      false
+    end
 
-      true if look_in.include?(component)
+    def get_asset_link(a_thing, component)
+      url = "https://github.com/alphagov"
+      repo = "govuk_publishing_components"
+      blob = "blob/main"
+      link = nil
+      link = "#{url}/#{repo}/#{blob}/#{@stylesheets_path}/_#{component.gsub(' ', '-')}.scss" if a_thing == "stylesheet"
+      link = "#{url}/#{repo}/#{blob}/#{@print_stylesheets_path}/_#{component.gsub(' ', '-')}.scss" if a_thing == "print_stylesheet"
+      link = "#{url}/#{repo}/#{blob}/#{@javascripts_path}/#{component.gsub(' ', '-')}.js" if a_thing == "javascript"
+      link = "#{url}/#{repo}/#{blob}/#{@tests_path}/#{component.gsub(' ', '_')}_spec.rb" if a_thing == "test"
+      link = "#{url}/#{repo}/#{blob}/#{@js_tests_path}/#{component.gsub(' ', '-')}-spec.js" if a_thing == "js_test"
+      link = "#{url}/#{repo}/#{blob}/#{@helpers_path}/#{component.gsub(' ', '_')}_helper.rb" if a_thing == "helper"
+
+      link
     end
   end
 end

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

@@ -32,6 +32,7 @@
 
     <% accordion_content = capture do %>
       <% if application[:application_found] %>
+        <% github_link = 'https://github.com/alphagov/' + application[:name] + '/blob/main/' %>
         <% application[:warnings].each do |warning| %>
           <p class="govuk-body">
             <strong class="govuk-tag">Warn</strong>
@@ -74,7 +75,9 @@
           <p class="govuk-body">This shows instances of `gem-c-` classes found in the application. If a reference is found in a stylesheet or in code a warning is created, as this could be a style override or hard coded component markup.</p>
           <ul class="govuk-list govuk-list--bullet">
             <% application[:gem_style_references].each do |ref| %>
-              <li><%= ref %></li>
+              <li>
+                <%= link_to ref, github_link + ref, class: 'govuk-link' %>
+              </li>
             <% end %>
           </ul>
         <% end %>
@@ -86,10 +89,12 @@
             margin_bottom: 4,
             heading_level: 3,
           } %>
-          <p class="govuk-body">This shows JavaScript files that might contain jQuery, which we are trying to remove our dependency on.</p>
+          <p class="govuk-body">This shows JavaScript files that might contain jQuery, which we are trying to remove.</p>
           <ul class="govuk-list govuk-list--bullet">
             <% application[:jquery_references].each do |ref| %>
-              <li><%= ref %></li>
+              <li>
+                <%= link_to ref, github_link + ref, class: 'govuk-link' %>
+              </li>
             <% end %>
           </ul>
         <% end %>