govuk_publishing_components 35.3.4 → 35.4.0

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

@@ -537,3 +537,19 @@ $code-delete-bg: #fadddd;
 .component-doc__content-list {
   margin-top: govuk-spacing(5);
 }
+
+.component__application-name {
+  display: block;
+  @include govuk-font($size: 16);
+  font-weight: normal;
+}
+
+.component__count {
+  &:before {
+    content: "(";
+  }
+
+  &:after {
+    content: ")";
+  }
+}

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

@@ -532,10 +532,6 @@ $after-button-padding-left: govuk-spacing(4);
   margin: 0;
   padding: govuk-spacing(1) govuk-spacing(4);
 
-  @include govuk-media-query($from: "desktop") {
-    border-right: 0;
-  }
-
   @include govuk-media-query($from: 360px) {
     &:before {
       @include chevron(govuk-colour("white"));
@@ -575,7 +571,6 @@ $after-button-padding-left: govuk-spacing(4);
     right: 0;
 
     @include focus-not-focus-visible {
-      background: $govuk-brand-colour;
       border-bottom: 1px solid govuk-colour("dark-blue");
       border-left: none;
       position: relative;

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

@@ -62,12 +62,6 @@ $large-input-size: 50px;
   // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
   // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
   box-shadow: inset 0 0 0 $govuk-border-width-form-element;
-
-  @include govuk-if-ie8 {
-    // IE8 doesn't support `box-shadow` so double the border with
-    // `border-width`.
-    border-width: $govuk-border-width-form-element * 2;
-  }
 }
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
@@ -136,12 +130,6 @@ $large-input-size: 50px;
     // Also, `outline` cannot be utilised
     // here as it is already used for the yellow focus state.
     box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour("black");
-
-    @include govuk-if-ie8 {
-      // IE8 doesn't support `box-shadow` so double the border with
-      // `border-width`.
-      border-width: $govuk-border-width-form-element * 2;
-    }
   }
 
   &::-moz-focus-inner {

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

@@ -44,17 +44,6 @@
         height: 140px;
         background: govuk-colour("white");
         outline: $govuk-border-width solid transparentize(govuk-colour("black"), .9);
-
-        @include govuk-if-ie8 {
-          // IE8 incorrectly asserts the "max-width: 100%" rule to be 0
-          // because of the collapsed width on its floating container
-          // Reset the max-width so that thumbnails render at the specified
-          // width above.
-          // http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/
-          max-width: none;
-          border: $govuk-border-width solid govuk-colour("mid-grey", $legacy: "grey-3");
-        }
-
         box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4);
       }
 

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss

@@ -96,27 +96,3 @@
     border-color: #045f71;
   }
 }
-
-// This change should be removed after relevant govuk-frontend release
-
-.brand--department-for-business-and-trade {
-  .brand__color {
-    color: #cf102d;
-
-    &:link,
-    &:visited,
-    &:active {
-      color: #cf102d;
-    }
-
-    &:hover,
-    &:focus {
-      color: $govuk-focus-text-colour;
-    }
-  }
-
-  &.brand__border-color,
-  .brand__border-color {
-    border-color: #cf102d;
-  }
-}

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -55,6 +55,19 @@ module GovukPublishingComponents
             components: components_in_ruby,
           },
         ]
+
+        # applications might not have all of these things for all components
+        options = {
+          application_name: name,
+          templates_path: "app/views/components",
+          stylesheets_path: "app/assets/stylesheets/components",
+          javascripts_path: "app/assets/javascripts/components/",
+          tests_path: "spec/components/",
+          javascript_tests_path: "spec/javascripts/components/",
+          helpers_path: "app/helpers/",
+        }
+        application_components = AuditComponents.new(path, options)
+        application_components = application_components.data if application_components
       end
 
       @data = {
@@ -66,6 +79,7 @@ module GovukPublishingComponents
         component_locations: @component_locations,
         helper_references: @helper_references,
         uses_individual_asset_model: @uses_individual_asset_model,
+        application_components: application_components || [],
       }
     end
 

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -23,6 +23,7 @@ module GovukPublishingComponents
         @applications_data = sort_results(results)
         @gem_data[:components_by_application] = get_components_by_application || []
         @gem_data[:helpers_used_by_applications] = get_helpers_used_by_applications || []
+        @gem_data[:component_file_details] = combine_all_component_file_details(@gem_data[:component_file_details], @applications_data)
       end
     end
 
@@ -102,6 +103,7 @@ module GovukPublishingComponents
             component_locations: result[:component_locations],
             helper_references: result[:helper_references],
             uses_individual_asset_model: result[:uses_individual_asset_model],
+            application_components: result[:application_components],
           }
         else
           data << {
@@ -314,5 +316,17 @@ module GovukPublishingComponents
 
       results
     end
+
+    def combine_all_component_file_details(gem_components, applications)
+      applications.each do |application|
+        next unless application[:application_components]
+
+        application[:application_components][:component_file_details].each do |component|
+          gem_components << component
+        end
+      end
+
+      gem_components.sort_by { |c| c[:name] }
+    end
   end
 end

data/app/models/govuk_publishing_components/audit_components.rb

@@ -2,16 +2,17 @@ module GovukPublishingComponents
   class AuditComponents
     attr_reader :data
 
-    def initialize(path)
+    def initialize(path, options = {})
       # 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"
-      @javascript_tests_path = "spec/javascripts/components"
-      @helpers_path = "lib/govuk_publishing_components/presenters"
-
+      @templates_path = options[:templates_path] || "app/views/govuk_publishing_components/components"
+      @stylesheets_path = options[:stylesheets_path] || "app/assets/stylesheets/govuk_publishing_components/components"
+      @print_stylesheets_path = options[:print_stylesheets_path] || "app/assets/stylesheets/govuk_publishing_components/components/print"
+      @javascripts_path = options[:javascripts_path] || "app/assets/javascripts/govuk_publishing_components/components"
+      @tests_path = options[:tests_path] || "spec/components"
+      @javascript_tests_path = options[:javascript_tests_path] || "spec/javascripts/components"
+      @helpers_path = options[:helpers_path] || "lib/govuk_publishing_components/presenters"
+
+      @application_name = options[:application_name] || "govuk_publishing_components"
       @all_templates = Dir["#{path}/#{@templates_path}/*.erb"].sort
       @templates_full_path = "#{path}/#{@templates_path}/"
 
@@ -28,36 +29,36 @@ module GovukPublishingComponents
       @data = {
         gem_found: false,
       }
+      @auditing_an_application = true unless @application_name == "govuk_publishing_components"
       @data = compile_data(path) if Dir.exist?(path)
     end
 
   private
 
     def compile_data(path)
+      data = {}
+      data[:gem_found] = true unless @auditing_an_application
       component_file_details = get_component_file_details(path)
-      helper_usage = get_helper_usage(component_file_details)
+      data[:helper_usage] = get_helper_usage(component_file_details) unless @auditing_an_application
 
       # remove the template file reference as not needed
       component_file_details.map { |detail| detail.delete(:template_file) }
 
-      {
-        gem_found: true,
-        component_code: clean_files(@all_templates, @templates_full_path).sort,
-        components_containing_components: find_all_partials_in(@all_templates),
-        component_file_details: component_file_details,
-        component_numbers: @component_numbers,
-        helper_usage: helper_usage,
-      }
+      data[:component_code] = clean_files(@all_templates, @templates_full_path).sort unless @auditing_an_application
+      data[:component_file_details] = component_file_details
+      data[:component_numbers] = @component_numbers
+      data[:components_containing_components] = find_all_partials_in(@all_templates) unless @auditing_an_application
+      data
     end
 
     def get_component_file_details(path)
       component_templates = clean_files(@all_templates, @templates_full_path).sort
       details = []
       component_templates.each do |component|
-        component_detail = {
-          name: component,
-          link: get_component_link(component),
-        }
+        component_detail = {}
+        component_detail[:name] = component
+        component_detail[:application] = @application_name
+        component_detail[:link] = get_component_link(component) unless @auditing_an_application
         file_details = [
           {
             type: "template",
@@ -102,10 +103,10 @@ module GovukPublishingComponents
       details = {}
       type = detail[:type]
       file = detail[:file]
-      details["#{type}_exists".to_sym] = false
-      # save the location of the template to later grep for helper use
-      details["#{type}_file".to_sym] = file if type == "template"
       if File.file?(file)
+        details["#{type}_exists".to_sym] = false
+        # save the location of the template to later grep for helper use
+        details["#{type}_file".to_sym] = file if type == "template"
         # we don't have separate print stylesheets anymore
         # so check the main stylesheet for print styles
         if type == "print_stylesheet"
@@ -139,8 +140,8 @@ module GovukPublishingComponents
         .gsub(".scss", "")
         .gsub(".js", "")
         .gsub("spec", "")
+        .gsub("helper.rb", "")
         .gsub(".rb", "")
-        .gsub("helper", "")
         .strip
     end
 
@@ -202,21 +203,22 @@ module GovukPublishingComponents
     def components_within_component(file)
       file = get_component_name_from_full_path(file)
       file = "#{@templates_full_path}#{file}.html.erb".sub(/.*\K\//, "/_")
-      data = File.read(file)
-      match = data.scan(/["']{1}(govuk_publishing_components\/components\/[\/a-z_-]+["']{1})/)
-      match.flatten.uniq.map(&:to_s).sort.map do |m|
-        m.gsub("govuk_publishing_components/components/", "").tr('\"\'', "")
+      if File.exist?(file)
+        data = File.read(file)
+        match = data.scan(/["']{1}(govuk_publishing_components\/components\/[\/a-z_-]+["']{1})/)
+        match.flatten.uniq.map(&:to_s).sort.map do |m|
+          m.gsub("govuk_publishing_components/components/", "").tr('\"\'', "")
+        end
       end
     end
 
     def get_asset_link(a_thing, component)
       url = "https://github.com/alphagov"
-      repo = "govuk_publishing_components"
+      repo = @application_name
       blob = "blob/main"
       link = nil
       link = "#{url}/#{repo}/#{blob}/#{@templates_path}/_#{component.gsub(' ', '_')}.html.erb" if a_thing == "template"
       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}/#{@javascript_tests_path}/#{component.gsub(' ', '-')}-spec.js" if a_thing == "javascript_test"

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

@@ -38,23 +38,15 @@
 
         <% if @other_applications %>
           <% if application[:uses_individual_asset_model] %>
-            <div class="govuk-warning-text">
-              <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
-              <strong class="govuk-warning-text__text">
-                <span class="govuk-warning-text__assistive">Warning</span>
-                  This application uses <a class="govuk-link" href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/set-up-individual-component-css-loading.md">per page asset loading</a> for components. Warnings about missing stylesheets have been suppressed.
-              </strong>
-            </div>            
+            <%= render "govuk_publishing_components/components/warning_text", {
+              text: raw("This application uses <a class=\"govuk-link\" href=\"https://github.com/alphagov/govuk_publishing_components/blob/main/docs/set-up-individual-component-css-loading.md\">per page asset loading</a> for components. Warnings about missing stylesheets have been suppressed.")
+            } %>
           <% end %>
 
           <% if application[:uses_static] %>
-            <div class="govuk-warning-text">
-              <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
-              <strong class="govuk-warning-text__text">
-                <span class="govuk-warning-text__assistive">Warning</span>
-                  This application uses <a href="https://github.com/alphagov/static" class="govuk-link">static</a>, which can contain assets for components used in more than one application. Warnings for missing component assets in this application that are already included in static have been suppressed.
-              </strong>
-            </div>            
+            <%= render "govuk_publishing_components/components/warning_text", {
+              text: raw("This application uses <a href=\"https://github.com/alphagov/static\" class=\"govuk-link\">static</a>, which can contain assets for components used in more than one application. Warnings for missing component assets in this application that are already included in static have been suppressed.")
+            } %>
           <% end %>
 
           <% application[:warnings].each do |warning| %>
@@ -74,24 +66,28 @@
           heading_level: 3,
         } %>
 
-        <dl class="govuk-summary-list">
-          <% application[:summary].each do |item| %>
-            <div class="govuk-summary-list__row">
-              <dt class="govuk-summary-list__key">
-                <%= item[:name] %> (<%= item[:value].length %>)
-              </dt>
-              <dd class="govuk-summary-list__value">
-                <% if item[:value].length > 0 %>
-                  <%= item[:value].join(", ") %>
-                <% elsif application[:uses_individual_asset_model] && item[:name] == "In stylesheets" %>
-                  Uses per page component asset loading
-                <% else %>
-                  None
-                <% end %>
-              </dd>
-            </div>
+        <% items = [] %>
+        <% application[:summary].each do |item| %>
+          <% content = capture do %>
+            <% if item[:value].length > 0 %>
+              <%= item[:value].join(", ") %>
+            <% elsif application[:uses_individual_asset_model] && item[:name] == "In stylesheets" %>
+              Uses per page component asset loading
+            <% else %>
+              None
+            <% end %>
           <% end %>
-        </dl>
+          <% 
+            items << {
+              field: "#{item[:name]} (#{item[:value].length})",
+              value: content
+            }
+          %>
+        <% end %>
+
+        <%= render "govuk_publishing_components/components/summary_list", {
+          items: items
+        } %>
 
         <% if application[:gem_style_references].any? %>
           <%= render "govuk_publishing_components/components/heading", {
@@ -127,6 +123,18 @@
             <% end %>
           </ul>
         <% end %>
+
+        <% application_components = application[:application_components] %>
+        <% if application_components[:component_file_details].any? %>
+          <%= render "govuk_publishing_components/components/heading", {
+            text: "Application components (#{application_components[:component_file_details].length})",
+            font_size: "m",
+            margin_bottom: 4,
+            heading_level: 3,
+          } %>
+          <p class="govuk-body">This is a list of components found in this application. Note that some components may appear to be missing files due to inconsistencies in directory structure and naming conventions.</p>
+          <%= render "component_contents", passed_components: application_components, show_application_name: false %>
+        <% end %>        
       <% else %>
         <p class="govuk-body">This application was not found. This could be because you do not have this repository checked out locally.</p>
       <% end %>
@@ -141,7 +149,7 @@
           text: sanitize(summary)
         },
         content: {
-          html: sanitize(accordion_content)
+          html: accordion_content
         },
       }
     %>

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

@@ -1,23 +1,67 @@
-<table class="govuk-table">
+<table class="govuk-table" <% if show_application_name %>data-audit-list<% end %>>
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th scope="col" class="govuk-table__header sticky-table-header">Component</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">Template (<%= @components[:component_numbers][:template] %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">CSS (<%= @components[:component_numbers][:stylesheet] %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">Print styles (<%= @components[:component_numbers][:print_stylesheet] %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">JS (<%= @components[:component_numbers][:javascript] %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">Test (<%= @components[:component_numbers][:test] %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">JS test (<%= @components[:component_numbers][:javascript_test] %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">Helper (<%= @components[:component_numbers][:helper] %>)</th>
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="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">
+        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">
+        Print styles
+        <% 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">
+        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="test">
+        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="javascript_test">
+        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="helper">
+        Helper
+        <% unless show_application_name %>
+          <span class="component__count"><%= passed_components[:component_numbers][:helper] %></span>
+        <% end %>
+      </th>
     </tr>
   </thead>
   <tbody class="govuk-table__body">
-    <% @components[:component_file_details].each do |component| %>
-      <tr class="govuk-table__row">
+    <% passed_components[:component_file_details].each do |component| %>
+      <tr class="govuk-table__row" data-application="<%= component[:application] %>">
         <th scope="row" class="govuk-table__header">
-          <a href="<%= component[:link] %>" class="govuk-link">
+          <% if component[:link] %>
+            <a href="<%= component[:link] %>" class="govuk-link">
+              <%= component[:name] %>
+            </a>
+          <% else %>
             <%= component[:name] %>
-          </a>
+          <% end %>
+          <% if show_application_name %>
+            <span class="component__application-name">
+              <%= component[:application] %>
+            </span>
+          <% end %>
         </th>
         <td class="govuk-table__cell">
           <% if component[:template_exists] %>

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

@@ -1,6 +1,6 @@
 <% if @other_applications %>
   <%= render "govuk_publishing_components/components/heading", {
-    text: "Components in the gem",
+    text: "Components",
     font_size: "l",
     margin_bottom: 6,
   } %>
@@ -10,7 +10,9 @@
   <% component_items = [] %>
 
   <% component_files = capture do %>
-    <%= render partial: "component_contents" %>
+    <div data-module="audit-filter">
+      <%= render "component_contents", passed_components: @components, show_application_name: true %>
+    </div>
   <% end %>
 
   <%
@@ -57,8 +59,8 @@
   %>
 
   <%= render 'items_in_applications',
-    heading: 'Components by application',
-    summary: 'Shows which applications use each component',
+    heading: 'Gem components used by applications',
+    summary: 'Shows which applications use gem components',
     content: @components[:components_by_application],
     items: component_items
   %>
@@ -97,10 +99,10 @@
   <%
     component_items << {
       heading: {
-        text: "Helpers by component",
+        text: "Helpers used by gem components",
       },
       summary: {
-        text: "Shows which components use common helpers",
+        text: "Shows which gem components use common helpers",
       },
       content: {
         html: helpers_by_component
@@ -109,7 +111,7 @@
   %>
 
   <%= render 'items_in_applications',
-    heading: 'Helpers by application',
+    heading: 'Gem helpers used by applications',
     summary: 'Shows any applications that use helpers from the components gem',
     content: @components[:helpers_used_by_applications],
     items: component_items

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

@@ -1,5 +1,9 @@
-<% content_for :title, "Component audit" %>
+<% 
+  add_gem_component_stylesheet("table")
+  add_gem_component_stylesheet("select")
+%>
 
+<% content_for :title, "Component audit" %>
 <%= render 'govuk_publishing_components/components/title', title: "Components audit", margin_top: 0; %>
 
 <% applications = capture do %>

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

@@ -2,11 +2,15 @@
   add_gem_component_stylesheet("hint")
 
   id ||= "hint-#{SecureRandom.hex(4)}"
+  is_radio_label_hint ||= false
   right_to_left ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   css_classes = %w( gem-c-hint govuk-hint )
-  css_classes << shared_helper.get_margin_bottom
+  css_classes << "govuk-radios__hint" if is_radio_label_hint
+
+  custom_margin_bottom_class = shared_helper.get_margin_bottom if [*0..9].include?(local_assigns[:margin_bottom])
+  css_classes << custom_margin_bottom_class if local_assigns[:margin_bottom]
 %>
 
 <%= tag.div id: id, class: css_classes, dir: right_to_left ? "rtl" : nil do %>

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

@@ -15,9 +15,6 @@
   css_classes << "govuk-label--s" if bold
   css_classes << "govuk-radios__label" if is_radio_label
   css_classes << "govuk-label--#{heading_size}" if heading_size
-
-  hint_text_css_classes = %w[govuk-hint]
-  hint_text_css_classes << "govuk-radios__hint" if is_radio_label
 %>
 
 <% if is_page_heading %>
@@ -29,7 +26,10 @@
 <% end %>
 
 <% if hint_text.present? %>
-  <%= tag.div id: hint_id, class: hint_text_css_classes, dir: right_to_left ? "rtl" : nil do %>
-    <%= hint_text %>
-  <% end %>
+  <%= render "govuk_publishing_components/components/hint", {
+    id: hint_id,
+    text: hint_text,
+    right_to_left: right_to_left ? "rtl" : nil,
+    is_radio_label_hint: is_radio_label
+  } %>
 <% end %>

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

@@ -2,6 +2,7 @@
   related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   ga4_tracking ||= false
+  ga4_type = local_assigns[:context] == :footer ? "contextual footer" : "related content"
   data = {}
   data[:module] = "gem-track-click"
   data[:module] << " ga4-link-tracker" if ga4_tracking
@@ -42,7 +43,8 @@
         section_index: section_index,
         section_count: ga4_tracking_counts.index_section_count,
         random: random,
-        ga4_tracking: ga4_tracking %>
+        ga4_tracking: ga4_tracking,
+        ga4_type: ga4_type %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -15,7 +15,7 @@ examples:
     data:
       text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
   with_margin_bottom:
-    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of `3` (`15px`).
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale).
     data:
       text: "You qualify if you were born in the UK before June 1960."
       margin_bottom: 9

data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb

@@ -34,7 +34,7 @@
         link_class = "govuk-link #{related_nav_helper.section_css_class("govuk-link gem-c-related-navigation__section-link", section_title, link: link, link_is_inline: (index >= section_link_limit))}"
         ga4_attributes = {
           event_name: "navigation",
-          type: "related content",
+          type: ga4_type,
           index: {
             index_section: "#{section_index}",
             index_link: "#{index}",

data/config/locales/en.yml

@@ -236,10 +236,10 @@ en:
         href: "/guidance/getting-the-energy-bills-support-scheme-discount"
       - label: Find a job
         href: "/find-a-job"
-      - label: Coronavirus (COVID-19)
-        href: "/coronavirus"
       - label: 'Universal Credit account: sign in'
         href: "/sign-in-universal-credit"
+      - label: Check your National Insurance record
+        href: "/check-national-insurance-record"
       popular_links_heading: Popular on GOV.UK
       search_text: Search GOV.UK
     metadata: