govuk_publishing_components 24.7.1 → 24.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '074209cc8cf7975851223f792a29424abb775b78c2ed6bce585c8e46ab68bc3a'
-  data.tar.gz: a64f7263144e2b04dfe4db0d6b3021127af456eeb9f0684100b2cbd15c827ba4
+  metadata.gz: '0970bb03929bfc783d477b903ce46f8f8fa47ad800b74303f61c4f2e473a914e'
+  data.tar.gz: e1bc0b5d89be175278b988b30b85269b7128fc9fa5fbb3286b582bf66c91b7f0
 SHA512:
-  metadata.gz: 17cccd57d154c927f27966026425ace752d20ca33f2ea4bf4f55916d3573cd5e025135ac3ad3626bd90b653691b908ef26d0603c7551c2d0bc03f7383f0fddfe
-  data.tar.gz: 82364e977616a9aa28772a3486cb2c551a3272cad5be29ff6d93af3fbb6dcca86498c7d7cb61dab831649674b192b7c8c8b467e13c5cb55938428e80564b0a7c
+  metadata.gz: 7dfb6d556b81cc890eec0fa6884a7738d2c47b0b5bba80d0f8b35788682ba8cd0c4d9528370f7175c3b2361f47592fa405ebb43e8b5fa43954fc57bc23960dcc
+  data.tar.gz: 3e58e5f9b229c8c85e734b74fd2ba98db39cd9f66ba80bab12cf8ac6acc8a482a059f200d9b721e530c190a6dff73915c9641377a77afaef5506eef8d4ca9aaf

data/app/assets/javascripts/component_guide/application.js

@@ -1,2 +1,5 @@
 //= require_tree ./vendor
 //= require_tree .
+//= require ../govuk_publishing_components/dependencies
+//= require ../govuk_publishing_components/components/accordion
+//= require ../govuk_publishing_components/components/tabs

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

@@ -25,6 +25,7 @@
     govuk_browser_upgrade_dismisssed: 'settings',
     govuk_not_first_visit: 'settings',
     analytics_next_page_call: 'usage',
+    user_nation: 'settings',
     _ga: 'usage',
     _gid: 'usage',
     _gat: 'usage',

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

@@ -26,10 +26,5 @@
 }
 
 .gem-c-title__text {
-  @extend %govuk-heading-xl;
   margin: 0;
 }
-
-.gem-c-title__text--long {
-  @extend %govuk-heading-l;
-}

data/app/controllers/govuk_publishing_components/audit_controller.rb

@@ -1,22 +1,7 @@
 module GovukPublishingComponents
   class AuditController < GovukPublishingComponents::ApplicationController
     def show
-      path = Dir.pwd
-
-      components = AuditComponents.new(path)
-      applications = analyse_applications(File.expand_path("..", path))
-      compared_data = AuditComparer.new(components.data, applications)
-
-      @applications = compared_data.applications_data || []
-      @components = compared_data.gem_data || []
-    end
-
-  private
-
-    def analyse_applications(path)
-      results = []
-      applications = %w[
-        calculators
+      application_dirs = %w[
         collections
         collections-publisher
         content-data-admin
@@ -42,10 +27,29 @@ module GovukPublishingComponents
         travel-advice-publisher
         whitehall
       ].sort
+      application_dirs = [GovukPublishingComponents::ApplicationHelper.get_application_name_from_path(Rails.root)] unless ENV["MAIN_COMPONENT_GUIDE"]
+
+      gem_path = Gem.loaded_specs["govuk_publishing_components"].full_gem_path
+      gem_path = Dir.pwd if ENV["MAIN_COMPONENT_GUIDE"]
+
+      components = AuditComponents.new(gem_path, false)
+      applications = analyse_applications(File.expand_path("..", gem_path), application_dirs)
+      compared_data = AuditComparer.new(components.data, applications, false)
+
+      @applications = compared_data.applications_data || []
+      @components = compared_data.gem_data || []
+    end
+
+  private
+
+    def analyse_applications(path, application_dirs)
+      results = []
+      @applications_found = false
 
-      applications.each do |application|
+      application_dirs.each do |application|
         application_path = [path, application].join("/")
         app = AuditApplications.new(application_path, application)
+        @applications_found = true if app.data[:application_found]
         results << app.data
       end
 

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -13,6 +13,7 @@ module GovukPublishingComponents
       @components_in_use_sass = components_in_use_sass(false)
       @components_in_use_print_sass = components_in_use_sass(true)
       @components_in_use_js = components_in_use_js
+      @index_audit_summary = index_audit_summary
     end
 
     def show
@@ -161,5 +162,13 @@ module GovukPublishingComponents
         h[:url] = component_doc_path(component_doc.id) if component_example
       end
     end
+
+    def index_audit_summary
+      components_gem_path = Gem.loaded_specs["govuk_publishing_components"].full_gem_path
+      components = AuditComponents.new(components_gem_path, true)
+      application = AuditApplications.new(@application_path, GovukPublishingComponents::ApplicationHelper.get_application_name_from_path(@application_path))
+      compared_data = AuditComparer.new(components.data, [application.data], true)
+      compared_data.applications_data[0]
+    end
   end
 end

data/app/helpers/govuk_publishing_components/application_helper.rb

@@ -1,4 +1,7 @@
 module GovukPublishingComponents
   module ApplicationHelper
+    def self.get_application_name_from_path(path)
+      path.to_s.split("/")[-1]
+    end
   end
 end

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -86,8 +86,8 @@ module GovukPublishingComponents
           gem_style_references = find_code_references(file, src, /gem-c-[-_a-zA-Z]+/)
           @gem_style_references << gem_style_references if gem_style_references
         end
-      rescue StandardError
-        puts "File #{file} not found"
+      rescue StandardError => e
+        puts e.message
       end
 
       components_found.flatten.uniq.sort
@@ -108,7 +108,7 @@ module GovukPublishingComponents
     end
 
     def find_code_references(file, src, regex)
-      clean_file_path = /(?<=#{Regexp.escape(@path)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/
+      clean_file_path = /(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/
 
       return file[clean_file_path] if regex.match?(src)
     end

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -2,10 +2,10 @@ module GovukPublishingComponents
   class AuditComparer
     attr_reader :applications_data, :gem_data
 
-    def initialize(gem_data, results)
+    def initialize(gem_data, results, simple)
       if gem_data[:gem_found]
         @gem_data = gem_data
-        @applications_data = sort_results(results)
+        @applications_data = sort_results(results, simple)
         @gem_data[:components_by_application] = get_components_by_application || []
       end
     end
@@ -16,7 +16,8 @@ module GovukPublishingComponents
       key.to_s.gsub("_", " ").capitalize
     end
 
-    def sort_results(results)
+    def sort_results(results, simple)
+      @simple = simple
       data = []
 
       results.each do |result|
@@ -40,10 +41,9 @@ module GovukPublishingComponents
           warnings << warn_about_jquery_references(result[:jquery_references])
           warnings = warnings.flatten
 
-          data << {
-            name: result[:name],
-            application_found: result[:application_found],
-            summary: [
+          summary = []
+          unless @simple
+            summary = [
               {
                 name: "Components in templates",
                 value: templates[:components].flatten.uniq.sort.join(", "),
@@ -64,7 +64,13 @@ module GovukPublishingComponents
                 name: "Components in ruby",
                 value: ruby[:components].join(", "),
               },
-            ],
+            ]
+          end
+
+          data << {
+            name: result[:name],
+            application_found: result[:application_found],
+            summary: summary,
             warnings: warnings,
             warning_count: warnings.length,
             gem_style_references: result[:gem_style_references],
@@ -180,6 +186,8 @@ module GovukPublishingComponents
     end
 
     def get_components_by_application
+      return [] if @simple
+
       results = []
       found_something = false
 

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, simple)
       @data = {
         gem_found: false,
       }
-      @data = compile_data(path) if Dir.exist?(path)
+      @data = compile_data(path, simple) if Dir.exist?(path)
     end
 
   private
 
-    def compile_data(path)
+    def compile_data(path, simple)
+      @simple = simple
       templates_path = "app/views/govuk_publishing_components/components"
       stylesheets_path = "app/assets/stylesheets/govuk_publishing_components/components"
       print_stylesheets_path = "app/assets/stylesheets/govuk_publishing_components/components/print"
@@ -128,6 +129,8 @@ module GovukPublishingComponents
     end
 
     def list_all_component_details
+      return [] if @simple
+
       all_component_information = []
 
       @components.each do |component|

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

@@ -0,0 +1,126 @@
+<%
+  title = "Applications"
+  title = "This application" unless ENV["MAIN_COMPONENT_GUIDE"]
+%>
+<%= render "govuk_publishing_components/components/heading", {
+  text: title,
+  font_size: "l",
+  margin_bottom: 6
+} %>
+
+<% if @applications.any? %>
+  <%= render "govuk_publishing_components/components/details", {
+    title: "How to use this information"
+  } do %>
+    <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>
+  <% end %>
+
+  <%
+    accordion_content = nil
+    summary = nil
+  %>
+  <% application_items = @applications.map do |application| %>
+    <%
+      summary = '<strong class="govuk-tag govuk-tag--red">Application not found</strong>'
+
+      if application[:application_found]
+        summary = "Warnings: 0"
+        summary = "Warnings: <strong class=\"govuk-tag govuk-tag--red\">#{application[:warning_count]}</strong>" if application[:warning_count] > 0
+      end
+    %>
+
+    <% accordion_content = capture do %>
+      <% 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 %>
+
+        <% if application[:jquery_references].any? %>
+          <%= render "govuk_publishing_components/components/heading", {
+            text: "jQuery references",
+            font_size: "m",
+            margin_bottom: 4,
+            heading_level: 3,
+          } %>
+          <p class="govuk-body">This shows JavaScript files that might contain jQuery, which we are trying to remove our dependency on.</p>
+          <ul class="govuk-list govuk-list--bullet">
+            <% application[:jquery_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 %>
+    <% end %>
+
+    <%
+      {
+        heading: {
+          text: application[:name]
+        },
+        summary: {
+          text: sanitize(summary)
+        },
+        content: {
+          html: sanitize(accordion_content)
+        },
+      }
+    %>
+  <% end %>
+
+  <% if ENV["MAIN_COMPONENT_GUIDE"] %>
+    <%= render "govuk_publishing_components/components/accordion", {
+      items: application_items
+    } %>
+  <% else %>
+    <p class="govuk-body"><%= sanitize(summary) %></p>
+    <%= accordion_content %>
+  <% end %>
+<% else %>
+  <p class="govuk-body">No applications found.</p>
+<% end %>

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

@@ -0,0 +1,142 @@
+<% if @applications_found %>
+  <%= render "govuk_publishing_components/components/heading", {
+    text: "Components",
+    font_size: "l",
+    margin_bottom: 6,
+  } %>
+<% end %>
+
+<% if @components.any? %>
+  <% component_items = [] %>
+
+  <% component_files = capture do %>
+    <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 %>
+      </tbody>
+    </table>
+  <% end %>
+
+  <%
+    component_items << {
+      heading: {
+        text: "Component files",
+      },
+      summary: {
+        text: "Lists what files each component has",
+      },
+      content: {
+        html: component_files
+      },
+    }
+  %>
+
+  <% components_within_components = capture do %>
+    <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>
+  <% end %>
+
+  <%
+    component_items << {
+      heading: {
+        text: "Components containing other components",
+      },
+      summary: {
+        text: "Shows which components contain other components",
+      },
+      content: {
+        html: components_within_components
+      },
+    }
+  %>
+
+  <% if @applications_found %>
+    <% components_by_application = capture do %>
+      <% if @components[:components_by_application].any? %>
+        <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>
+      <% end %>
+    <% end %>
+
+    <%
+      component_items << {
+        heading: {
+          text: "Components by application",
+        },
+        summary: {
+          text: "Shows which applications use each component",
+        },
+        content: {
+          html: components_by_application
+        },
+      }
+    %>
+  <% end %>
+
+  <%= render "govuk_publishing_components/components/accordion", {
+    items: component_items
+  } %>
+<% else %>
+  <p class="govuk-body">No components found.</p>
+<% end %>

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

@@ -2,284 +2,29 @@
 
 <%= render 'govuk_publishing_components/components/title', title: "Components audit", margin_top: 0; %>
 
-<% 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>
-          </div>
-        </details>
-
-        <% #application_items = [] %>
-        <% application_items = @applications.map do |application| %>
-          <%
-            summary = '<strong class="govuk-tag govuk-tag--red">Application not found</strong>'
-
-            if application[:application_found]
-              summary = "Warnings: 0"
-              if application[:warning_count] > 0
-                summary = "Warnings: <strong class=\"govuk-tag govuk-tag--red\">#{application[:warning_count]}</strong>"
-              end
-            end
-          %>
-
-          <% accordion_content = capture do %>
-            <% 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 %>
-
-              <% if application[:jquery_references].any? %>
-                <%= render "govuk_publishing_components/components/heading", {
-                  text: "jQuery references",
-                  font_size: "m",
-                  margin_bottom: 4,
-                  heading_level: 3,
-                } %>
-                <p class="govuk-body">This shows JavaScript files that might contain jQuery, which we are trying to remove our dependency on.</p>
-                <ul class="govuk-list govuk-list--bullet">
-                  <% application[:jquery_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 %>
-          <% end %>
-
-          <%
-            {
-              heading: {
-                text: application[:name]
-              },
-              summary: {
-                text: sanitize(summary)
-              },
-              content: {
-                html: sanitize(accordion_content)
-              },
-            }
-          %>
-        <% end %>
-
-        <%= render "govuk_publishing_components/components/accordion", {
-          items: application_items
-        } %>
-      <% else %>
-        <p class="govuk-body">No applications found.</p>
-      <% end %>
-    </div>
-
-    <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? %>
-        <% component_files = capture do %>
-          <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 %>
-            </tbody>
-          </table>
-        <% end %>
-
-        <% components_within_components = capture do %>
-          <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>
-        <% end %>
-
-        <% components_by_application = capture do %>
-          <% if @components[:components_by_application].any? %>
-            <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>
-          <% else %>
-            <p class="govuk-body">Sorry, no applications found.</p>
-          <% end %>
-        <% end %>
+<% applications = capture do %>
+  <%= render "applications" %>
+<% end %>
 
-        <%
-          component_items = [
-            {
-              heading: {
-                text: "Component files",
-              },
-              summary: {
-                text: "Lists what files each component has",
-              },
-              content: {
-                html: component_files
-              },
-            },
-            {
-              heading: {
-                text: "Components containing other components",
-              },
-              summary: {
-                text: "Shows which components contain other components",
-              },
-              content: {
-                html: components_within_components
-              },
-            },
-            {
-              heading: {
-                text: "Components by application",
-              },
-              summary: {
-                text: "Shows which applications use each component",
-              },
-              content: {
-                html: components_by_application
-              },
-            },
-          ]
-        %>
+<% components = capture do %>
+  <%= render "components" %>
+<% end %>
 
-        <%= render "govuk_publishing_components/components/accordion", {
-          items: component_items
-        } %>
-      <% else %>
-        <p class="govuk-body">No components found.</p>
-      <% end %>
-    </div>
-  </div>
+<% if @applications_found %>
+  <%= render "govuk_publishing_components/components/tabs", {
+    tabs: [
+      {
+        id: "applications",
+        label: "Applications",
+        content: applications,
+      },
+      {
+        id: "components-gem",
+        label: "Components",
+        content: components,
+      }
+    ]
+  } %>
 <% else %>
-  <p class="govuk-body">Component auditing is only available when the component guide is running locally as a standalone app.</p>
+  <%= render "components" %>
 <% end %>

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -1,5 +1,21 @@
 <%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title, margin_top: 0 %>
 
+<% unless ENV["MAIN_COMPONENT_GUIDE"] %>
+  <p class="govuk-body">
+    <% if @index_audit_summary[:application_found] %>
+      Warnings:
+      <% if @index_audit_summary[:warning_count] > 0 %>
+        <strong class="govuk-tag govuk-tag--red"><%= @index_audit_summary[:warning_count] %></strong>
+      <% else %>
+        <%= @index_audit_summary[:warning_count] %>
+      <% end %>
+      <a href="/component-guide/audit" class="govuk-link">Warning details</a>
+    <% else %>
+      <strong class="govuk-tag govuk-tag--red">Application not found</strong>
+    <% end %>
+  </p>
+<% end %>
+
 <div class="component-markdown">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
   <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>

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

@@ -21,8 +21,13 @@
                 width_class = "govuk-grid-column-one-third"
               end
 
-              list_classes = %w( govuk-footer__list )
-              list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns]
+              # If the list has multiple columns and there is only one link.
+              # This is to prevent a long link wrapping in a column, which
+              # leaves an obvious blank space to the right.
+              single_item_list = (( item[:columns] == 2 || item[:columns] == 3 ) && item[:items].length == 1 )
+
+              list_classes = %w[govuk-footer__list]
+              list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns] unless single_item_list
             %>
             <div class="<%= width_class %>">
               <h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>

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

@@ -1,5 +1,6 @@
 <%
   average_title_length ||= false
+
   context ||= false
   context_locale ||= false
   context_text = context.is_a?(Hash) ? context[:text] : context
@@ -12,10 +13,13 @@
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  classes = %w(gem-c-title)
+  classes = %w[gem-c-title]
   classes << "gem-c-title--inverse" if inverse
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom)
+
+  heading_classes = %w[gem-c-title__text]
+  heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
 %>
 <%= content_tag(:div, class: classes) do %>
   <% if context %>
@@ -23,7 +27,7 @@
       <%= context_href ? link_to(context_text, context_href, class: 'gem-c-title__context-link govuk-link', data: context_data) : context_text %>
     </span>
   <% end %>
-  <h1 class="gem-c-title__text <% if average_title_length %>gem-c-title__text--<%= average_title_length %><% end %>">
+  <h1 class="<%= heading_classes.join(" ") %>">
     <%= title %>
   </h1>
 <% end %>

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

@@ -66,18 +66,19 @@ examples:
       href: "#"
       start: true
       info_text: "Sometimes you want to explain where a user is going to."
+  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 having no margin bottom."
+    data:
+      text: "Submit"
+      margin_bottom: 6
   start_now_button_with_info_text_and_margin_bottom:
+    description: "When the component requires margin bottom and has info text, the margin is applied to the info text."
     data:
       text: "Start now"
       href: "#"
       start: true
       info_text: "Sometimes you want to explain where a user is going to and have a margin bottom"
-      margin_bottom: true
-  with_margin_bottom:
-    description: "Sometimes it's useful to break up a page, for example if a button is at the bottom of a page."
-    data:
-      text: "Submit"
-      margin_bottom: true
+      margin_bottom: 6
   extreme_text:
     data:
       text: "I'm a button with lots of text to test how the component scales at extremes."

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -31,7 +31,8 @@ module GovukPublishingComponents
         @info_text = local_assigns[:info_text]
         @info_text_classes = %w[gem-c-button__info-text]
         if local_assigns[:margin_bottom]
-          @info_text_classes << "gem-c-button__info-text--bottom-margin"
+          margin_class = get_margin_bottom(local_assigns[:margin_bottom], true)
+          @info_text_classes << margin_class
         end
         @rel = local_assigns[:rel]
         @data_attributes = local_assigns[:data_attributes]
@@ -81,11 +82,21 @@ module GovukPublishingComponents
         css_classes << "gem-c-button--secondary-quiet" if secondary_quiet
         css_classes << "govuk-button--secondary" if secondary_solid
         css_classes << "govuk-button--warning" if destructive
-        css_classes << "gem-c-button--bottom-margin" if margin_bottom && !info_text
+        if margin_bottom && !info_text
+          margin_class = get_margin_bottom(margin_bottom, false)
+          css_classes << margin_class
+        end
         css_classes << "gem-c-button--inline" if inline_layout
         css_classes << classes if classes
         css_classes.join(" ")
       end
+
+      def get_margin_bottom(margin, info_text)
+        legacy_class = "gem-c-button--bottom-margin"
+        legacy_class = "gem-c-button__info-text--bottom-margin" if info_text
+
+        [*0..9].include?(margin) ? "govuk-!-margin-bottom-#{margin}" : legacy_class
+      end
     end
   end
 end

data/lib/govuk_publishing_components/presenters/public_layout_helper.rb

@@ -3,50 +3,34 @@ module GovukPublishingComponents
     class PublicLayoutHelper
       FOOTER_NAV = [
         {
-          title: "Prepare for Brexit",
+          title: "Coronavirus (COVID-19)",
           columns: 2,
           items: [
             {
-              href: "/business-uk-leaving-eu",
-              text: "Prepare your business or organisation for Brexit",
+              href: "/coronavirus",
+              text: "Coronavirus (COVID-19): guidance and support",
               attributes: {
                 data: {
                   track_category: "footerClicked",
-                  track_action: "brexitLinks",
-                  track_label: "Prepare your business or organisation for the UK leaving the EU",
-                },
-              },
-            },
-            {
-              href: "/prepare-eu-exit",
-              text: "Prepare for Brexit if you live in the UK",
-              attributes: {
-                data: {
-                  track_category: "footerClicked",
-                  track_action: "brexitLinks",
-                  track_label: "Prepare for Brexit if you live in the UK",
-                },
-              },
-            },
-            {
-              href: "/uk-nationals-living-eu",
-              text: "Living in Europe after Brexit",
-              attributes: {
-                data: {
-                  track_category: "footerClicked",
-                  track_action: "brexitLinks",
-                  track_label: "Living in Europe after Brexit",
+                  track_action: "coronavirusLinks",
+                  track_label: "Coronavirus (COVID-19): guidance and support",
                 },
               },
             },
+          ],
+        },
+        {
+          title: "Brexit",
+          columns: 1,
+          items: [
             {
-              href: "/staying-uk-eu-citizen",
-              text: "Continue to live in the UK after Brexit",
+              href: "/transition",
+              text: "Check what you need to do",
               attributes: {
                 data: {
                   track_category: "footerClicked",
-                  track_action: "brexitLinks",
-                  track_label: "Continue to live in the UK after Brexit",
+                  track_action: "transitionLinks",
+                  track_label: "Check what you need to do",
                 },
               },
             },

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.7.1".freeze
+  VERSION = "24.8.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.7.1
+  version: 24.8.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-23 00:00:00.000000000 Z
+date: 2021-03-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -592,6 +592,8 @@ files:
 - app/models/govuk_publishing_components/component_docs.rb
 - app/models/govuk_publishing_components/component_example.rb
 - app/models/govuk_publishing_components/shared_accessibility_criteria.rb
+- app/views/govuk_publishing_components/audit/_applications.html.erb
+- app/views/govuk_publishing_components/audit/_components.html.erb
 - app/views/govuk_publishing_components/audit/show.html.erb
 - app/views/govuk_publishing_components/component_guide/_application_stylesheet.html.erb
 - app/views/govuk_publishing_components/component_guide/component_doc/_call.html.erb