govuk_publishing_components 65.2.2 → 66.0.1

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -2,7 +2,6 @@
 
 (function (root) {
   'use strict'
-  window.GOVUK = window.GOVUK || {}
 
   var DEFAULT_COOKIE_CONSENT = {
     essential: true,

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-settings.js

@@ -1,6 +1,3 @@
-window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
-
 (function (Modules) {
   function CookieSettings ($module) {
     this.$module = $module
@@ -57,7 +54,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
         if (name === 'usage' && !value) {
           window.GOVUK.stopSendingAnalytics = true
-          window.GOVUK.LUX = {}
         }
       }
     }

data/app/assets/javascripts/govuk_publishing_components/lib/extend-object.js

@@ -1,6 +1,5 @@
 (function (root) {
   'use strict'
-  window.GOVUK = window.GOVUK || {}
 
   window.GOVUK.extendObject = function (obj) {
     obj = obj || {}

data/app/assets/javascripts/govuk_publishing_components/lib/filter-list.js

@@ -1,6 +1,3 @@
-window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
-
 (function (Modules) {
   'use strict'
 

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

@@ -1,7 +1,5 @@
 // = require govuk_publishing_components/lib/govspeak/magna-charta
 
-window.GOVUK = window.GOVUK || {};
-
 (function (GOVUK) {
   'use strict'
 

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

@@ -1,6 +1,4 @@
 // This is a non-jQuery version of Magna Charta: https://github.com/alphagov/magna-charta
-window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
   function MagnaCharta ($module, options) {

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

@@ -1,7 +1,5 @@
 (function () {
   'use strict'
-  window.GOVUK = window.GOVUK || {}
-  var GOVUK = window.GOVUK || {}
 
   var YoutubeLinkEnhancement = function ($element, $classOverride) {
     this.$element = $element
@@ -262,5 +260,5 @@
     }
   }
 
-  GOVUK.GovspeakYoutubeLinkEnhancement = YoutubeLinkEnhancement
+  window.GOVUK.GovspeakYoutubeLinkEnhancement = YoutubeLinkEnhancement
 })()

data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js

@@ -1,6 +1,3 @@
-window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
-
 (function (Modules) {
   function InitialFocus ($module) {
     this.$module = $module

data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js

@@ -2,8 +2,6 @@
   Toggle the class 'focus' on input boxes on element focus/blur
   Used by the search component but generic enough for reuse
 */
-window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
   function GemToggleInputClassOnFocus ($module) {

data/app/assets/javascripts/govuk_publishing_components/lib/toggle.js

@@ -67,8 +67,6 @@
   `data-controls` can contain more than one element, space
   separated.
 */
-window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
   function GemToggle ($module) {

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -1,7 +1,6 @@
 // see https://github.com/alphagov/govuk_publishing_components/blob/main/docs/lib/trigger_event.md
 (function (root) {
   'use strict'
-  window.GOVUK = window.GOVUK || {}
 
   window.GOVUK.triggerEvent = function (element, eventName, parameters) {
     var params = parameters || {}

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

@@ -1,3 +1,4 @@
+//= require govuk_publishing_components/initialise-vars
 //= require govuk_publishing_components/analytics-ga4
 //= require govuk_publishing_components/domain-config
 

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

@@ -1,10 +1,11 @@
+// This initialises the window.GOVUK object for all GOVUK Modules in the gem.
+// Technically this isn't needed as our GA4 script loads first and initialises things for us, but we should keep this here so that our modules can work independently of GA4.
+//= require ./initialise-vars
+
 ;(function (global) {
   'use strict'
 
-  var GOVUK = global.GOVUK || {}
-  GOVUK.Modules = GOVUK.Modules || {}
-
-  GOVUK.modules = {
+  window.GOVUK.modules = {
     find: function (container) {
       container = container || document
 
@@ -35,16 +36,16 @@
         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) {
+          if (typeof window.GOVUK.Modules[moduleName] === 'function' && !started) {
             try {
-              if (GOVUK.Modules[moduleName].prototype.init) {
+              if (window.GOVUK.Modules[moduleName].prototype.init) {
                 // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend V4 Modules
-                new GOVUK.Modules[moduleName](element).init()
+                new window.GOVUK.Modules[moduleName](element).init()
               } else {
                 // GOV.UK Frontend V5 Modules - removed component init() methods and initialise in constructor
                 // https://github.com/alphagov/govuk-design-system-architecture/blob/main/decision-records/010-remove-init-method.md
                 /* eslint-disable no-new */
-                new GOVUK.Modules[moduleName](element)
+                new window.GOVUK.Modules[moduleName](element)
               }
               element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
             } catch (e) {
@@ -73,6 +74,4 @@
       }
     }
   }
-
-  global.GOVUK = GOVUK
 })(window)

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

@@ -477,6 +477,71 @@ $code-delete-bg: #fadddd;
   }
 }
 
+.table-container {
+  container-type: inline-size;
+  container-name: page;
+}
+
+.table-wrapper {
+  .govuk-table {
+    display: block;
+    overflow-x: scroll;
+  }
+}
+
+@container page (width > 1040px) {
+  $w: 960px;
+
+  .table-wrapper {
+    position: relative;
+    z-index: 0;
+    box-sizing: border-box;
+    margin-left: calc(((-100cqw + $w) / 2) - 1px);
+    margin-right: calc(((-100cqw + $w) / 2) - 1px);
+    background: #ffffff;
+    padding: 15px;
+
+    .govuk-table {
+      width: auto;
+      display: table;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
+.govuk-tabs {
+  $w: 920px;
+
+  @container page (width > 1040px) {
+    .table-wrapper {
+      margin-left: calc(((-100cqw + $w) / 2) - 1px);
+      margin-right: calc(((-100cqw + $w) / 2) - 1px);
+
+      &::before,
+      &::after {
+        content: "";
+        z-index: -1;
+        position: absolute;
+        top: -1px;
+        bottom: -1px;
+        width: calc((100cqw - 960px) / 2);
+        box-sizing: border-box;
+        border-top: solid 1px $govuk-border-colour;
+        border-bottom: solid 1px $govuk-border-colour;
+      }
+
+      &::before {
+        left: 0;
+      }
+
+      &::after {
+        right: 0;
+      }
+    }
+  }
+}
+
 // Note: This is a temporary override to ensure the background color on component preview
 // pages remains white, this can be removed once the --rebrand flag is removed from govuk-frontend
 .govuk-template--rebranded {

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

@@ -4,6 +4,9 @@ $feedback-prompt-border-top-colour: $govuk-blue-tint-50;
 .gem-c-feedback {
   background: govuk-colour("white");
   margin-top: govuk-spacing(6);
+  background-color: $feedback-prompt-background-colour;
+  color: govuk-colour("black");
+  border-top: 1px solid $feedback-prompt-border-top-colour;
 
   @include govuk-media-query($from: desktop) {
     margin-top: govuk-spacing(9);
@@ -27,9 +30,7 @@ $feedback-prompt-border-top-colour: $govuk-blue-tint-50;
 }
 
 .gem-c-feedback__prompt {
-  background-color: $feedback-prompt-background-colour;
   color: govuk-colour("black");
-  border-top: 1px solid $feedback-prompt-border-top-colour;
   outline: 0;
 }
 
@@ -201,10 +202,10 @@ $feedback-prompt-border-top-colour: $govuk-blue-tint-50;
 
 .gem-c-feedback__form {
   padding: govuk-spacing(3);
-  border-top: 1px solid $govuk-border-colour;
 
   @include govuk-media-query($from: tablet) {
     padding: govuk-spacing(6);
+    padding-bottom: 0;
   }
 }
 
@@ -233,6 +234,15 @@ $feedback-prompt-border-top-colour: $govuk-blue-tint-50;
   }
 }
 
+.gem-c-feedback__button-wrapper {
+  @include govuk-media-query($from: tablet) {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: govuk-spacing(2);
+  }
+}
+
 .gem-c-feedback__email-link {
   display: inline-block;
   margin-top: govuk-spacing(4);

data/app/controllers/govuk_publishing_components/applications_page_controller.rb

@@ -4,7 +4,7 @@ module GovukPublishingComponents
       applications = [
         {
           type: "public-facing",
-          apps: %w[collections email-alert-frontend feedback finder-frontend frontend smart-answers].sort,
+          apps: %w[collections email-alert-frontend feedback finder-frontend frontend govuk_publishing_components smart-answers].sort,
         },
         {
           type: "publishing",

data/app/views/govuk_publishing_components/applications_page/show.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Applications consistency" %>
+<% content_for :body_classes, "table-container" %>
 
 <%= render "govuk_publishing_components/components/back_link", {
   href: "/component-guide",
@@ -16,22 +17,24 @@
 <% end %>
 
 <div data-module="filter-list">
-  <table class="govuk-table">
-    <thead class="govuk-table__head">
-      <tr class="govuk-table__row">
-        <th scope="col" class="govuk-table__header sticky-table-header">Application</th>
-        <th scope="col" class="govuk-table__header sticky-table-header">Type</th>
-        <th scope="col" class="govuk-table__header sticky-table-header">Source</th>
-        <th scope="col" class="govuk-table__header sticky-table-header">Gem version</th>
-        <th scope="col" class="govuk-table__header sticky-table-header">Sass version</th>
-        <th scope="col" class="govuk-table__header sticky-table-header">Ruby version</th>
-        <th scope="col" class="govuk-table__header sticky-table-header">Yarn version</th>
-      </tr>
-    </thead>
-    <tbody class="govuk-table__body">
-      <%= render "table-content", content: @applications_output.select { |a| a[:type] == "public-facing" }, type: "Public facing" %>
-      <%= render "table-content", content: @applications_output.select { |a| a[:type] == "publishing" }, type: "Publishing" %>
-      <%= render "table-content", content: @applications_output.select { |a| a[:type] == "utility" }, type: "Utility" %>
-    </tbody>
-  </table>
+  <div class="table-wrapper">
+    <table class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th scope="col" class="govuk-table__header sticky-table-header">Application</th>
+          <th scope="col" class="govuk-table__header sticky-table-header">Type</th>
+          <th scope="col" class="govuk-table__header sticky-table-header">Source</th>
+          <th scope="col" class="govuk-table__header sticky-table-header">Gem version</th>
+          <th scope="col" class="govuk-table__header sticky-table-header">Sass version</th>
+          <th scope="col" class="govuk-table__header sticky-table-header">Ruby version</th>
+          <th scope="col" class="govuk-table__header sticky-table-header">Yarn version</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <%= render "table-content", content: @applications_output.select { |a| a[:type] == "public-facing" }, type: "Public facing" %>
+        <%= render "table-content", content: @applications_output.select { |a| a[:type] == "publishing" }, type: "Publishing" %>
+        <%= render "table-content", content: @applications_output.select { |a| a[:type] == "utility" }, type: "Utility" %>
+      </tbody>
+    </table>
+  </div>
 </div>

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

@@ -1,153 +1,155 @@
 <p class="govuk-body">
   Numbers in table headers show column totals. Numbers in table cells show number of lines in files. Note that component test files cannot currently be detected in applications that use minitest instead of Rspec.</p>
 </p>
-<table class="govuk-table">
-  <thead class="govuk-table__head">
-    <tr class="govuk-table__row" <% if show_application_name %> data-audit-headings<% end %>>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="total">Component</th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="template" title="Component has a template">
-        Template
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:template] %></span>
-        <% end %>
-      </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="stylesheet" title="Component has a stylesheet">
-        CSS
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:stylesheet] %></span>
-        <% end %>
-      </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="print_stylesheet" title="Component has print styles">
-        Print CSS
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:print_stylesheet] %></span>
-        <% end %>
-      </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="javascript" title="Component has JavaScript">
-        JS
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:javascript] %></span>
-        <% end %>
-      </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="javascript_test" title="Component has a JavaScript test file">
-        JS test
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:javascript_test] %></span>
-        <% end %>
-      </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="uses-govuk-frontend-css" title="Component includes styles imported from govuk-frontend">
-        GF CSS
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:uses_govuk_frontend_css] %></span>
-        <% end %>
-      </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="uses-govuk-frontend-js" title="Component includes JavaScript imported from govuk-frontend">
-        GF JS
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:uses_govuk_frontend_js] %></span>
-        <% end %>
-      </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="test" title="Component has a test file">
-        Test
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:test] %></span>
-        <% end %>
-      </th>
-      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="helper" title="Component has a helper file">
-        Helper
-        <% unless show_application_name %>
-          <span class="component__count"><%= passed_components[:component_numbers][:helper] %></span>
-        <% end %>
-      </th>
-    </tr>
-  </thead>
-  <tbody class="govuk-table__body" <% if show_application_name %> data-audit-list<% end %>>
-    <% passed_components[:component_file_details].each do |component| %>
-      <tr class="govuk-table__row" data-application="<%= component[:application] %>">
-        <th scope="row" class="govuk-table__header" data-component-type="total">
-          <% if component[:link] %>
-            <a href="<%= component[:link] %>" class="govuk-link">
-              <%= component[:name] %>
-            </a>
-          <% else %>
-            <%= component[:name] %>
-          <% end %>
-          <% if show_application_name %>
-            <span class="component__application-name">
-              <%= component[:application] %>
-            </span>
+<div class="table-wrapper">
+  <table class="govuk-table">
+    <thead class="govuk-table__head">
+      <tr class="govuk-table__row" <% if show_application_name %> data-audit-headings<% end %>>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="total">Component</th>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="template" title="Component has a template">
+          Template
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:template] %></span>
           <% end %>
         </th>
-        <td class="govuk-table__cell" data-component-type="template">
-          <% if component[:template_exists] %>
-            <a href="<%= component[:template_link] %>" class="govuk-link" title="This file has <%= component[:template_lines] %> lines">
-              <%= component[:template_lines] %>
-              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> template</span>
-            </a>
-          <% end %>
-        </td>
-        <td class="govuk-table__cell" data-component-type="stylesheet">
-          <% if component[:stylesheet_exists] %>
-            <a href="<%= component[:stylesheet_link] %>" class="govuk-link" title="This file has <%= component[:stylesheet_lines] %> lines">
-              <%= component[:stylesheet_lines] %>
-              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> stylesheet</span>
-            </a>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="stylesheet" title="Component has a stylesheet">
+          CSS
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:stylesheet] %></span>
           <% end %>
-        </td>
-        <td class="govuk-table__cell" data-component-type="print_stylesheet">
-          <% if component[:print_stylesheet_exists] %>
-            <span title="This component has a print stylesheet">
-              Yes
-            </span>
+        </th>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="print_stylesheet" title="Component has print styles">
+          Print CSS
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:print_stylesheet] %></span>
           <% end %>
-        </td>
-        <td class="govuk-table__cell" data-component-type="javascript">
-          <% if component[:javascript_exists] %>
-            <a href="<%= component[:javascript_link] %>" class="govuk-link" title="This file has <%= component[:javascript_lines] %> lines">
-              <%= component[:javascript_lines] %>
-              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript</span>
-            </a>
+        </th>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="javascript" title="Component has JavaScript">
+          JS
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:javascript] %></span>
           <% end %>
-        </td>
-        <td class="govuk-table__cell" data-component-type="javascript_test">
-          <% if component[:javascript_test_exists] %>
-            <a href="<%= component[:javascript_test_link] %>" class="govuk-link" title="This file has <%= component[:javascript_test_lines] %> lines">
-              <%= component[:javascript_test_lines] %>
-              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript test</span>
-            </a>
+        </th>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="javascript_test" title="Component has a JavaScript test file">
+          JS test
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:javascript_test] %></span>
           <% end %>
-        </td>
-        <td class="govuk-table__cell" data-component-type="uses-govuk-frontend-css">
-          <% if component[:uses_govuk_frontend_css] %>
-            <span title="Component includes styles imported from govuk-frontend">
-              Yes
-            </span>
+        </th>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="uses-govuk-frontend-css" title="Component includes styles imported from govuk-frontend">
+          GF CSS
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:uses_govuk_frontend_css] %></span>
           <% end %>
-        </td>
-        <td class="govuk-table__cell" data-component-type="uses-govuk-frontend-js">
-          <% if component[:uses_govuk_frontend_js] %>
-            <span title="Component includes JavaScript imported from govuk-frontend">
-              Yes
-            </span>
+        </th>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="uses-govuk-frontend-js" title="Component includes JavaScript imported from govuk-frontend">
+          GF JS
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:uses_govuk_frontend_js] %></span>
           <% end %>
-        </td>
-        <td class="govuk-table__cell" data-component-type="test">
-          <% if component[:test_exists] %>
-            <a href="<%= component[:test_link] %>" class="govuk-link" title="This file has <%= component[:test_lines] %> lines">
-              <%= component[:test_lines] %>
-              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
-            </a>
+        </th>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="test" title="Component has a test file">
+          Test
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:test] %></span>
           <% end %>
-        </td>
-        <td class="govuk-table__cell" data-component-type="helper">
-          <% if component[:helper_exists] %>
-            <a href="<%= component[:helper_link] %>" class="govuk-link" title="This file has <%= component[:helper_lines] %> lines">
-              <%= component[:helper_lines] %>
-              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> helper</span>
-            </a>
+        </th>
+        <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="helper" title="Component has a helper file">
+          Helper
+          <% unless show_application_name %>
+            <span class="component__count"><%= passed_components[:component_numbers][:helper] %></span>
           <% end %>
-        </td>
+        </th>
       </tr>
-    <% end %>
-  </tbody>
-</table>
+    </thead>
+    <tbody class="govuk-table__body" <% if show_application_name %> data-audit-list<% end %>>
+      <% passed_components[:component_file_details].each do |component| %>
+        <tr class="govuk-table__row" data-application="<%= component[:application] %>">
+          <th scope="row" class="govuk-table__header" data-component-type="total">
+            <% if component[:link] %>
+              <a href="<%= component[:link] %>" class="govuk-link">
+                <%= component[:name] %>
+              </a>
+            <% else %>
+              <%= component[:name] %>
+            <% end %>
+            <% if show_application_name %>
+              <span class="component__application-name">
+                <%= component[:application] %>
+              </span>
+            <% end %>
+          </th>
+          <td class="govuk-table__cell" data-component-type="template">
+            <% if component[:template_exists] %>
+              <a href="<%= component[:template_link] %>" class="govuk-link" title="This file has <%= component[:template_lines] %> lines">
+                <%= component[:template_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> template</span>
+              </a>
+            <% end %>
+          </td>
+          <td class="govuk-table__cell" data-component-type="stylesheet">
+            <% if component[:stylesheet_exists] %>
+              <a href="<%= component[:stylesheet_link] %>" class="govuk-link" title="This file has <%= component[:stylesheet_lines] %> lines">
+                <%= component[:stylesheet_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> stylesheet</span>
+              </a>
+            <% end %>
+          </td>
+          <td class="govuk-table__cell" data-component-type="print_stylesheet">
+            <% if component[:print_stylesheet_exists] %>
+              <span title="This component has a print stylesheet">
+                Yes
+              </span>
+            <% end %>
+          </td>
+          <td class="govuk-table__cell" data-component-type="javascript">
+            <% if component[:javascript_exists] %>
+              <a href="<%= component[:javascript_link] %>" class="govuk-link" title="This file has <%= component[:javascript_lines] %> lines">
+                <%= component[:javascript_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript</span>
+              </a>
+            <% end %>
+          </td>
+          <td class="govuk-table__cell" data-component-type="javascript_test">
+            <% if component[:javascript_test_exists] %>
+              <a href="<%= component[:javascript_test_link] %>" class="govuk-link" title="This file has <%= component[:javascript_test_lines] %> lines">
+                <%= component[:javascript_test_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript test</span>
+              </a>
+            <% end %>
+          </td>
+          <td class="govuk-table__cell" data-component-type="uses-govuk-frontend-css">
+            <% if component[:uses_govuk_frontend_css] %>
+              <span title="Component includes styles imported from govuk-frontend">
+                Yes
+              </span>
+            <% end %>
+          </td>
+          <td class="govuk-table__cell" data-component-type="uses-govuk-frontend-js">
+            <% if component[:uses_govuk_frontend_js] %>
+              <span title="Component includes JavaScript imported from govuk-frontend">
+                Yes
+              </span>
+            <% end %>
+          </td>
+          <td class="govuk-table__cell" data-component-type="test">
+            <% if component[:test_exists] %>
+              <a href="<%= component[:test_link] %>" class="govuk-link" title="This file has <%= component[:test_lines] %> lines">
+                <%= component[:test_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
+              </a>
+            <% end %>
+          </td>
+          <td class="govuk-table__cell" data-component-type="helper">
+            <% if component[:helper_exists] %>
+              <a href="<%= component[:helper_link] %>" class="govuk-link" title="This file has <%= component[:helper_lines] %> lines">
+                <%= component[:helper_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> helper</span>
+              </a>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

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

@@ -1,4 +1,5 @@
 <% content_for :title, "Component audit" %>
+<% content_for :body_classes, "table-container" %>
 
 <%= render "govuk_publishing_components/components/back_link", {
   href: "/component-guide",