govuk_publishing_components 24.6.0 → 24.9.0

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 %>