govuk_publishing_components 21.59.0 → 21.61.0

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -83,9 +83,9 @@ module GovukPublishingComponents
     def components_in_use
       matches = []
 
-      files = Dir["#{@application_path}/app/views/**/*.html.erb"]
+      files = Dir["#{@application_path}/app/views/**/*.erb"]
       files.concat Dir["#{@application_path}/app/**/*.rb"]
-      files.concat Dir["#{@application_path}/lib/**/*.rb"]
+      files.concat Dir["#{@application_path}/lib/**/*.{rb,erb}"]
 
       files.each do |file|
         data = File.read(file)

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -3,40 +3,40 @@ module GovukPublishingComponents
     attr_reader :data
 
     def initialize(path, name)
-      templates = Dir["#{path}/app/views/**/*.html.erb"]
-      stylesheets = Dir["#{path}/app/assets/stylesheets/**/*.scss"]
-      javascripts = Dir["#{path}/app/assets/javascripts/**/*.js"]
-
-      find_templates = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/
+      @path = path
+      application_found = application_exists(path)
+      components_found = []
+      @gem_style_references = []
 
-      @find_all_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components/
-      find_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/)(?!print)+[a-zA-Z_-]+(?=['"])/
+      if application_found
+        templates = Dir["#{path}/app/views/**/*.erb"]
+        stylesheets = Dir["#{path}/app/assets/stylesheets/**/*.scss"]
+        javascripts = Dir["#{path}/app/assets/javascripts/**/*.js"]
 
-      @find_all_print_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components_print/
-      find_print_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/print\/)[a-zA-Z_-]+(?=['"])/
+        find_components = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/
 
-      @find_all_javascripts = /\/\/[ ]*= require govuk_publishing_components\/all_components/
-      find_javascripts = /(?<=require govuk_publishing_components\/components\/)[a-zA-Z_-]+/
+        @find_all_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components/
+        find_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/)(?!print\/)+[a-zA-Z_-]+(?=['"])/
 
-      components_in_templates = find_components(templates, find_templates, "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") || []
+        @find_all_print_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components_print/
+        find_print_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/print\/)[a-zA-Z_-]+(?=['"])/
 
-      find_ruby = /(?<=render\(["']{1}govuk_publishing_components\/components\/)[a-zA-Z_-]+/
-      ruby_paths = %w[/app/helpers/ /app/presenters/ /lib/]
+        @find_all_javascripts = /\/\/[ ]*= require govuk_publishing_components\/all_components/
+        find_javascripts = /(?<=require govuk_publishing_components\/components\/)[a-zA-Z_-]+/
 
-      components_in_ruby = []
-      ruby_paths.each do |ruby_path|
-        components_in_ruby << find_components(Dir["#{path}#{ruby_path}**/*.rb"], find_ruby, "ruby") || []
-      end
+        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_ruby = components_in_ruby.flatten.uniq
+        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") || []
+        end
+        components_in_ruby = components_in_ruby.flatten.uniq
 
-      @data = {
-        name: name,
-        application_found: application_exists(path),
-        components_found: [
+        components_found = [
           {
             location: "templates",
             components: components_in_templates,
@@ -57,7 +57,14 @@ module GovukPublishingComponents
             location: "ruby",
             components: components_in_ruby,
           },
-        ],
+        ]
+      end
+
+      @data = {
+        name: name,
+        application_found: application_found,
+        components_found: components_found,
+        gem_style_references: @gem_style_references.flatten.uniq.sort,
       }
     end
 
@@ -69,6 +76,10 @@ module GovukPublishingComponents
       files.each do |file|
         src = File.read(file)
         components_found << find_match(find, src, type)
+        gem_references = find_gem_references(file, src)
+        @gem_style_references << gem_references if gem_references
+      rescue StandardError
+        puts "File #{file} not found"
       end
 
       components_found.flatten.uniq.sort
@@ -88,6 +99,13 @@ module GovukPublishingComponents
       all_matches
     end
 
+    def find_gem_references(file, src)
+      find_gem_classes = /gem-c-[-_a-zA-Z]+/
+      clean_file_path = /(?<=#{Regexp.escape(@path)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/
+
+      return file[clean_file_path] if find_gem_classes.match?(src)
+    end
+
     def clean_file_name(name)
       name.tr("_-", " ").strip
     end

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -1,11 +1,13 @@
 module GovukPublishingComponents
   class AuditComparer
-    attr_reader :data, :gem_data
+    attr_reader :applications_data, :gem_data
 
     def initialize(gem_data, results)
-      @gem_data = gem_data
-      @data = sort_results(results)
-      @gem_data[:components_by_application] = get_components_by_application
+      if gem_data[:gem_found]
+        @gem_data = gem_data
+        @applications_data = sort_results(results)
+        @gem_data[:components_by_application] = get_components_by_application || []
+      end
     end
 
   private
@@ -18,51 +20,60 @@ module GovukPublishingComponents
       data = []
 
       results.each do |result|
-        templates = result[:components_found].find { |c| c[:location] == "templates" }
-        stylesheets = result[:components_found].find { |c| c[:location] == "stylesheets" }
-        print_stylesheets = result[:components_found].find { |c| c[:location] == "print_stylesheets" }
-        javascripts = result[:components_found].find { |c| c[:location] == "javascripts" }
-        ruby = result[:components_found].find { |c| c[:location] == "ruby" }
-
-        @all_stylesheets = true if stylesheets[:components].include?("all")
-        @all_print_stylesheets = true if print_stylesheets[:components].include?("all")
-        @all_javascripts = true if javascripts[:components].include?("all")
-
-        templates[:components] = include_any_components_within_components(templates[:components])
-
-        warnings = []
-        warnings << warn_about_missing_components(result[:components_found])
-        warnings << warn_about_missing_assets(result[:components_found])
-        warnings = warnings.flatten
-
-        data << {
-          name: result[:name],
-          application_found: result[:application_found],
-          summary: [
-            {
-              name: "Components in templates",
-              value: templates[:components].flatten.uniq.sort.join(", "),
-            },
-            {
-              name: "Components in stylesheets",
-              value: stylesheets[:components].join(", "),
-            },
-            {
-              name: "Components in print stylesheets",
-              value: print_stylesheets[:components].join(", "),
-            },
-            {
-              name: "Components in javascripts",
-              value: javascripts[:components].join(", "),
-            },
-            {
-              name: "Components in ruby",
-              value: ruby[:components].join(", "),
-            },
-          ],
-          warnings: warnings,
-          warning_count: warnings.length,
-        }
+        if result[:application_found]
+          templates = result[:components_found].find { |c| c[:location] == "templates" }
+          stylesheets = result[:components_found].find { |c| c[:location] == "stylesheets" }
+          print_stylesheets = result[:components_found].find { |c| c[:location] == "print_stylesheets" }
+          javascripts = result[:components_found].find { |c| c[:location] == "javascripts" }
+          ruby = result[:components_found].find { |c| c[:location] == "ruby" }
+
+          @all_stylesheets = true if stylesheets[:components].include?("all")
+          @all_print_stylesheets = true if print_stylesheets[:components].include?("all")
+          @all_javascripts = true if javascripts[:components].include?("all")
+
+          templates[:components] = include_any_components_within_components(templates[:components])
+
+          warnings = []
+          warnings << warn_about_missing_components(result[:components_found])
+          warnings << warn_about_missing_assets(result[:components_found])
+          warnings << warn_about_style_overrides(result[:gem_style_references])
+          warnings = warnings.flatten
+
+          data << {
+            name: result[:name],
+            application_found: result[:application_found],
+            summary: [
+              {
+                name: "Components in templates",
+                value: templates[:components].flatten.uniq.sort.join(", "),
+              },
+              {
+                name: "Components in stylesheets",
+                value: stylesheets[:components].join(", "),
+              },
+              {
+                name: "Components in print stylesheets",
+                value: print_stylesheets[:components].join(", "),
+              },
+              {
+                name: "Components in javascripts",
+                value: javascripts[:components].join(", "),
+              },
+              {
+                name: "Components in ruby",
+                value: ruby[:components].join(", "),
+              },
+            ],
+            warnings: warnings,
+            warning_count: warnings.length,
+            gem_style_references: result[:gem_style_references],
+          }
+        else
+          data << {
+            name: result[:name],
+            application_found: result[:application_found],
+          }
+        end
       end
 
       data
@@ -141,18 +152,33 @@ module GovukPublishingComponents
       !@gem_data[:component_code].include?(component) unless component == "all"
     end
 
+    def warn_about_style_overrides(results)
+      warnings = []
+
+      results.each do |result|
+        warnings << create_warning("Possible component style override", result) if result.include? ".scss"
+        warnings << create_warning("Possible hard coded component markup", result) if [".html", ".rb"].any? { |needle| result.include? needle }
+      end
+
+      warnings
+    end
+
     def find_missing(needle, haystack)
       (haystack - needle).flatten.sort
     end
 
     def get_components_by_application
       results = []
+      found_something = false
 
       @gem_data[:component_listing].each do |component|
         found_in_applications = []
 
-        @data.each do |application|
+        @applications_data.each do |application|
+          next unless application[:application_found]
+
           name = application[:name]
+          found_something = true
 
           application[:summary].each do |item|
             found_in_applications << name if item[:value].include?(component[:name])
@@ -166,7 +192,7 @@ module GovukPublishingComponents
         }
       end
 
-      results
+      results if found_something
     end
   end
 end

data/app/models/govuk_publishing_components/audit_components.rb

@@ -3,6 +3,15 @@ module GovukPublishingComponents
     attr_reader :data
 
     def initialize(path)
+      @data = {
+        gem_found: false,
+      }
+      @data = compile_data(path) if Dir.exist?(path)
+    end
+
+  private
+
+    def compile_data(path)
       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"
@@ -10,7 +19,7 @@ module GovukPublishingComponents
       tests_path = "spec/components"
       js_tests_path = "spec/javascripts/components"
 
-      templates = Dir["#{path}/#{templates_path}/*.html.erb"]
+      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"]
@@ -26,7 +35,8 @@ module GovukPublishingComponents
       @component_tests = find_files(tests, [path, tests_path].join("/"))
       @component_js_tests = find_files(js_tests, [path, js_tests_path].join("/"))
 
-      @data = {
+      {
+        gem_found: true,
         component_code: @components,
         component_stylesheets: @component_stylesheets,
         component_print_stylesheets: @component_print_stylesheets,
@@ -38,18 +48,27 @@ module GovukPublishingComponents
       }
     end
 
-  private
-
     def find_files(files, replace)
       files.map { |file| clean_file_name(file.gsub(replace, "")) }.sort
     end
 
     def clean_file_name(name)
-      name.tr("/_-", " ").gsub(".html.erb", "").gsub(".scss", "").gsub(".js", "").gsub("spec", "").gsub(".rb", "").strip
+      name.tr("/_-", " ")
+        .gsub(".html.erb", "")
+        .gsub(".erb", "")
+        .gsub(".scss", "")
+        .gsub(".js", "")
+        .gsub("spec", "")
+        .gsub(".rb", "")
+        .strip
     end
 
     def get_component_name_from_full_path(path)
-      path.gsub("/_", "/").gsub(@templates_full_path, "").gsub(".html.erb", "").tr('\"\'', "")
+      path.gsub(/.*\K\/_/, "/")
+        .gsub(@templates_full_path, "")
+        .gsub(".html.erb", "")
+        .gsub(".erb", "")
+        .tr('\"\'', "")
     end
 
     def get_component_link(component)

data/app/models/govuk_publishing_components/component_example.rb

@@ -78,6 +78,10 @@ module GovukPublishingComponents
       context["dark_background"].present?
     end
 
+    def black_background?
+      !!context["black_background"]
+    end
+
     def html_description
       markdown_to_html(description) if description.present?
     end

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

@@ -2,220 +2,257 @@
 
 <%= render 'govuk_publishing_components/components/title', title: "Components audit", margin_top: 0; %>
 
-<div class="govuk-tabs" data-module="govuk-tabs">
-  <h2 class="govuk-tabs__title">
-    Contents
-  </h2>
-  <ul class="govuk-tabs__list">
-    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
-      <a class="govuk-tabs__tab" href="#applications">
-        Applications
-      </a>
-    </li>
-    <li class="govuk-tabs__list-item">
-      <a class="govuk-tabs__tab" href="#components-gem">
-        Components
-      </a>
-    </li>
-  </ul>
-  <div class="govuk-tabs__panel" id="applications">
-    <h2 class="govuk-heading-l">Applications</h2>
+<% if ENV["MAIN_COMPONENT_GUIDE"] %>
+  <div class="govuk-tabs" data-module="govuk-tabs">
+    <h2 class="govuk-tabs__title">
+      Contents
+    </h2>
+    <ul class="govuk-tabs__list">
+      <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
+        <a class="govuk-tabs__tab" href="#applications">
+          Applications
+        </a>
+      </li>
+      <li class="govuk-tabs__list-item">
+        <a class="govuk-tabs__tab" href="#components-gem">
+          Components
+        </a>
+      </li>
+    </ul>
+    <div class="govuk-tabs__panel" id="applications">
+      <%= render "govuk_publishing_components/components/heading", {
+        text: "Applications",
+        font_size: "l",
+        margin_bottom: 6
+      } %>
 
-    <% if @applications.any? %>
-      <details class="govuk-details" data-module="govuk-details">
-        <summary class="govuk-details__summary">
-          <span class="govuk-details__summary-text">
-            How to use this information
-          </span>
-        </summary>
-        <div class="govuk-details__text">
-          <p class="govuk-body">This page shows information about component use on GOV.UK. This information has been cross referenced with the components in the gem to produce warnings where e.g. a print stylesheet for a component exists but has not been included in an application.</p>
-          <p class="govuk-body">Warnings should be investigated, although there may be a reason why the application has been configured as it is. Note that 'code' can refer to templates or ruby code.</p>
+      <% if @applications.any? %>
+        <details class="govuk-details" data-module="govuk-details">
+          <summary class="govuk-details__summary">
+            <span class="govuk-details__summary-text">
+              How to use this information
+            </span>
+          </summary>
+          <div class="govuk-details__text">
+            <p class="govuk-body">This page shows information about component use on GOV.UK. This information has been cross referenced with the components in the gem to produce warnings where e.g. a print stylesheet for a component exists but has not been included in an application.</p>
+            <p class="govuk-body">Warnings should be investigated, although there may be a reason why the application has been configured as it is. Note that 'code' can refer to templates or ruby code.</p>
+          </div>
+        </details>
+
+        <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-with-summary-sections">
+          <% @applications.each_with_index do |application, index| %>
+            <div class="govuk-accordion__section ">
+              <div class="govuk-accordion__section-header">
+                <h2 class="govuk-accordion__section-heading">
+                  <span class="govuk-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
+                    <%= application[:name] %>
+                  </span>
+                </h2>
+                <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-<%= index %>">
+                  <% if application[:application_found] %>
+                    Warnings:
+                    <% if application[:warning_count] > 0 %>
+                      <strong class="govuk-tag govuk-tag--red"><%= application[:warning_count] %></strong>
+                    <% else %>
+                      <%= application[:warning_count] %>
+                    <% end %>
+                  <% else %>
+                    <strong class="govuk-tag govuk-tag--red">Application not found</strong>
+                  <% end %>
+                </div>
+              </div>
+              <div id="accordion-with-summary-sections-content-<%= index %>" class="govuk-accordion__section-content" aria-labelledby="accordion-with-summary-sections-heading-<%= index %>">
+                <% if application[:application_found] %>
+                  <% application[:warnings].each do |warning| %>
+                    <p class="govuk-body">
+                      <strong class="govuk-tag">Warn</strong>
+                      <strong><%= warning[:component] %></strong> - <%= warning[:message] %>
+                    </p>
+                  <% end %>
+
+                  <%= render "govuk_publishing_components/components/heading", {
+                    text: "Components used",
+                    font_size: "m",
+                    margin_bottom: 4,
+                    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] %>
+                        </dt>
+                        <dd class="govuk-summary-list__value">
+                          <% if item[:value].length > 0 %>
+                            <%= item[:value] %>
+                          <% else %>
+                            None
+                          <% end %>
+                        </dd>
+                      </div>
+                    <% end %>
+                  </dl>
+
+                  <% if application[:gem_style_references].any? %>
+                    <%= render "govuk_publishing_components/components/heading", {
+                      text: "Component references",
+                      font_size: "m",
+                      margin_bottom: 4,
+                      heading_level: 3,
+                    } %>
+
+                    <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>
+                      <% end %>
+                    </ul>
+                  <% 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 %>
+              </div>
+            </div>
+          <% end %>
         </div>
-      </details>
+      <% else %>
+        <p class="govuk-body">No applications found.</p>
+      <% end %>
+    </div>
 
-      <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-with-summary-sections">
-        <% @applications.each_with_index do |application, index| %>
+    <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="components-gem">
+      <%= render "govuk_publishing_components/components/heading", {
+        text: "Components",
+        font_size: "l",
+        margin_bottom: 6,
+      } %>
+
+      <% if @components.any? %>
+        <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
           <div class="govuk-accordion__section ">
             <div class="govuk-accordion__section-header">
               <h2 class="govuk-accordion__section-heading">
-                <span class="govuk-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
-                  <%= application[:name] %>
+                <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
+                  Component files
                 </span>
               </h2>
-              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-<%= index %>">
-                <% if application[:application_found] %>
-                  Warnings:
-                  <% if application[:warning_count] > 0 %>
-                    <strong class="govuk-tag govuk-tag--red"><%= application[:warning_count] %></strong>
-                  <% else %>
-                    <%= application[:warning_count] %>
+              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
+                Lists what files each component has
+              </div>
+            </div>
+            <div id="accordion-default-content-1" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-1">
+              <table class="govuk-table">
+                <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">Stylesheet</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">Print stylesheet</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">JS</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">Test</th>
+                    <th scope="col" class="govuk-table__header sticky-table-header">JS test</th>
+                  </tr>
+                </thead>
+                <tbody class="govuk-table__body">
+                  <% @components[:component_listing].each do |component| %>
+                    <tr class="govuk-table__row">
+                      <th scope="row" class="govuk-table__header">
+                        <a href="<%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
+                      </th>
+                      <td class="govuk-table__cell">
+                        <% if component[:stylesheet] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                      <td class="govuk-table__cell">
+                        <% if component[:print_stylesheet] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                      <td class="govuk-table__cell">
+                        <% if component[:javascript] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                      <td class="govuk-table__cell">
+                        <% if component[:tests] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                      <td class="govuk-table__cell">
+                        <% if component[:js_tests] %>
+                          <strong class="govuk-tag govuk-tag--green">Yes</strong>
+                        <% end %>
+                      </td>
+                    </tr>
                   <% end %>
-                <% else %>
-                  <strong class="govuk-tag govuk-tag--red">Application not found</strong>
-                <% end %>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div class="govuk-accordion__section ">
+            <div class="govuk-accordion__section-header">
+              <h2 class="govuk-accordion__section-heading">
+                <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
+                  Components containing components
+                </span>
+              </h2>
+              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
+                Shows which components contain other components
               </div>
             </div>
-            <div id="accordion-with-summary-sections-content-<%= index %>" class="govuk-accordion__section-content" aria-labelledby="accordion-with-summary-sections-heading-<%= index %>">
-              <% if application[:application_found] %>
-                <% application[:warnings].each do |warning| %>
-                  <p class="govuk-body">
-                    <strong class="govuk-tag">Warn</strong>
-                    <strong><%= warning[:component] %></strong> - <%= warning[:message] %>
-                  </p>
+            <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
+              <dl class="govuk-summary-list">
+                <% @components[:components_containing_components].each do |component| %>
+                  <div class="govuk-summary-list__row">
+                    <dt class="govuk-summary-list__key">
+                      <a href="<%= component[:link] %>" class="govuk-link"><%= component[:component] %></a>
+                    </dt>
+                    <dd class="govuk-summary-list__value">
+                      <%= component[:sub_components].join(', ') %>
+                    </dd>
+                  </div>
                 <% end %>
-
-                <h3 class="govuk-heading-m">Components used</h3>
-
+              </dl>
+            </div>
+          </div>
+          <div class="govuk-accordion__section ">
+            <div class="govuk-accordion__section-header">
+              <h2 class="govuk-accordion__section-heading">
+                <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
+                  Components by application
+                </span>
+              </h2>
+              <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
+                Shows which applications use each component
+              </div>
+            </div>
+            <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
+              <% if @components[:components_by_application].any? %>
                 <dl class="govuk-summary-list">
-                  <% application[:summary].each do |item| %>
+                  <% @components[:components_by_application].each do |component| %>
                     <div class="govuk-summary-list__row">
                       <dt class="govuk-summary-list__key">
-                        <%= item[:name] %>
+                        <%= component[:component] %> (<%= component[:count] %>)
                       </dt>
                       <dd class="govuk-summary-list__value">
-                        <% if item[:value].length > 0 %>
-                          <%= item[:value] %>
-                        <% else %>
-                          None
-                        <% end %>
+                        <%= component[:list] %>
                       </dd>
                     </div>
                   <% end %>
                 </dl>
               <% else %>
-                <p class="govuk-body">This application was not found. This could be because you do not have this repository checked out locally.</p>
+                <p class="govuk-body">Sorry, no applications found.</p>
               <% end %>
             </div>
           </div>
-        <% end %>
-      </div>
-    <% else %>
-      <p class="govuk-body">No applications found.</p>
-    <% end %>
-  </div>
-
-  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="components-gem">
-    <h2 class="govuk-heading-l">Components</h2>
-
-    <% if @components.any? %>
-      <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
-        <div class="govuk-accordion__section ">
-          <div class="govuk-accordion__section-header">
-            <h2 class="govuk-accordion__section-heading">
-              <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
-                Component files
-              </span>
-            </h2>
-            <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
-              Lists what files each component has
-            </div>
-          </div>
-          <div id="accordion-default-content-1" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-1">
-            <table class="govuk-table">
-              <thead class="govuk-table__head">
-                <tr class="govuk-table__row">
-                  <th scope="col" class="govuk-table__header">Component</th>
-                  <th scope="col" class="govuk-table__header">Stylesheet</th>
-                  <th scope="col" class="govuk-table__header">Print stylesheet</th>
-                  <th scope="col" class="govuk-table__header">JS</th>
-                  <th scope="col" class="govuk-table__header">Test</th>
-                  <th scope="col" class="govuk-table__header">JS test</th>
-                </tr>
-              </thead>
-              <tbody class="govuk-table__body">
-                <% @components[:component_listing].each do |component| %>
-                  <tr class="govuk-table__row">
-                    <th scope="row" class="govuk-table__header">
-                      <a href="<%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
-                    </th>
-                    <td class="govuk-table__cell">
-                      <% if component[:stylesheet] %>
-                        <strong class="govuk-tag govuk-tag--green">Yes</strong>
-                      <% end %>
-                    </td>
-                    <td class="govuk-table__cell">
-                      <% if component[:print_stylesheet] %>
-                        <strong class="govuk-tag govuk-tag--green">Yes</strong>
-                      <% end %>
-                    </td>
-                    <td class="govuk-table__cell">
-                      <% if component[:javascript] %>
-                        <strong class="govuk-tag govuk-tag--green">Yes</strong>
-                      <% end %>
-                    </td>
-                    <td class="govuk-table__cell">
-                      <% if component[:tests] %>
-                        <strong class="govuk-tag govuk-tag--green">Yes</strong>
-                      <% end %>
-                    </td>
-                    <td class="govuk-table__cell">
-                      <% if component[:js_tests] %>
-                        <strong class="govuk-tag govuk-tag--green">Yes</strong>
-                      <% end %>
-                    </td>
-                  </tr>
-                <% end %>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        <div class="govuk-accordion__section ">
-          <div class="govuk-accordion__section-header">
-            <h2 class="govuk-accordion__section-heading">
-              <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
-                Components containing components
-              </span>
-            </h2>
-            <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
-              Shows which components contain other components
-            </div>
-          </div>
-          <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
-            <dl class="govuk-summary-list">
-              <% @components[:components_containing_components].each do |component| %>
-                <div class="govuk-summary-list__row">
-                  <dt class="govuk-summary-list__key">
-                    <a href="<%= component[:link] %>" class="govuk-link"><%= component[:component] %></a>
-                  </dt>
-                  <dd class="govuk-summary-list__value">
-                    <%= component[:sub_components].join(', ') %>
-                  </dd>
-                </div>
-              <% end %>
-            </dl>
-          </div>
-        </div>
-        <div class="govuk-accordion__section ">
-          <div class="govuk-accordion__section-header">
-            <h2 class="govuk-accordion__section-heading">
-              <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
-                Components by application
-              </span>
-            </h2>
-            <div class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
-              Shows which applications use each component
-            </div>
-          </div>
-          <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
-            <dl class="govuk-summary-list">
-              <% @components[:components_by_application].each do |component| %>
-                <div class="govuk-summary-list__row">
-                  <dt class="govuk-summary-list__key">
-                    <%= component[:component] %> (<%= component[:count] %>)
-                  </dt>
-                  <dd class="govuk-summary-list__value">
-                    <%= component[:list] %>
-                  </dd>
-                </div>
-              <% end %>
-            </dl>
-          </div>
         </div>
-      </div>
-    <% else %>
-      <p class="govuk-body">No components found.</p>
-    <% end %>
+      <% else %>
+        <p class="govuk-body">No components found.</p>
+      <% end %>
+    </div>
   </div>
-</div>
+<% else %>
+  <p class="govuk-body">Component auditing is only available when the component guide is running locally as a standalone app.</p>
+<% end %>