govuk_publishing_components 62.0.0 → 62.1.0

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

@@ -7,39 +7,8 @@
 
 $gem-guide-border-width: 1px;
 
-.component-list {
-  @include govuk-text-colour;
-  @extend %govuk-list--bullet;
-
-  li {
-    margin-bottom: govuk-spacing(3);
-    @include govuk-font($size: 19);
-  }
-
-  p {
-    margin: 0;
-  }
-}
-
-.component-search {
-  display: none;
-
-  .js-enabled & {
-    display: block;
-    margin-top: govuk-spacing(9);
-  }
-}
-
-.component-guide-hidden {
-  display: none;
-}
-
 .component-doc {
   @include govuk-font($size: 16);
-
-  .component-doc-h2:first-child {
-    margin-top: 0;
-  }
 }
 
 .component-violation {
@@ -61,16 +30,6 @@ $gem-guide-border-width: 1px;
   }
 }
 
-.component-doc-h2 {
-  margin: (govuk-spacing(6) * 1.5) 0 govuk-spacing(6);
-  @include govuk-text-colour;
-  @include govuk-font($size: 27, $weight: bold);
-
-  small {
-    @include govuk-font($size: 16, $weight: bold);
-  }
-}
-
 .component-call {
   margin-top: -$gem-guide-border-width;
   margin-bottom: govuk-spacing(3);
@@ -109,7 +68,7 @@ $gem-guide-border-width: 1px;
 }
 
 .component-guide-preview {
-  padding: govuk-spacing(6);
+  padding: govuk-spacing(8) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
   border: $gem-guide-border-width solid $govuk-border-colour;
   position: relative;
 

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

@@ -108,7 +108,11 @@
     display: inline-block;
     padding: govuk-spacing(1);
     border: solid 1px govuk-colour("black");
-    color: $govuk-text-colour;
+    color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
     text-decoration: none;
+
+    &::after {
+      display: none;
+    }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -34,16 +34,11 @@
   text-decoration: none;
 }
 
-.gem-c-contextual-sidebar__cta--ukraine {
-  border-top: 7px solid #fed700;
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -14px;
-    border-top: 7px solid #4b7ec1;
+.gem-c-contextual-sidebar__cta-ukraine {
+  margin-top: -7px;
+  border-top: 7px solid #4b7ec1;
+
+  .gem-c-contextual-sidebar__cta {
+    border-top: 7px solid #fed700;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -85,7 +85,7 @@
 
 .gem-c-option-select__container {
   position: relative;
-  max-height: 200px;
+  max-height: 180px;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: govuk-colour("white");
@@ -144,7 +144,7 @@
   }
 
   .gem-c-option-select__container {
-    height: 200px;
+    height: 180px;
   }
 
   .gem-c-option-select__container--large {

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

@@ -1,44 +1,12 @@
-// stylelint-disable scss/at-extend-no-missing-placeholder
+@import "govuk/components/button/button";
+
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
-  @import "govuk/components/button/button";
-
-  // Some links in Govspeak should look like buttons[1] when using:
-  // ```
-  //    {button}[Random page](https://gov.uk/random){/button}
-  // ```.
-  //
-  // To make sure that the link styles don't override the button styles this
-  // needs more specificity.
-  //
-  // Govspeak targets link by using element selectors; so the selector
-  // `.gem-c-govspeak a:link` will override `.govuk-button`. Extending
-  // `govuk-button` here gives `gem-c-govspeak .gem-c-button` and prevents the
-  // link-that-looks-like-a-button from being overriden.
-
-  // [1]: https://github.com/alphagov/govspeak#button
-  .gem-c-button {
-    @extend .govuk-button;
-  }
-
-  .govuk-button--start {
-    @extend .govuk-button--start;
-  }
-
-  @include govuk-media-query($media-type: print) {
-    .gem-c-button {
-      box-shadow: none;
-      border: 2pt solid $govuk-print-text-colour;
-
-      &,
-      & * {
-        background: none;
-        color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
-      }
+  .govuk-button {
+    margin-bottom: 32px;
 
-      &::after {
-        display: none;
-      }
+    @include govuk-media-query($until: tablet) {
+      margin-bottom: 22px;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -6,12 +6,11 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
-// stylelint-disable max-nesting-depth
+@import "govuk/components/warning-text/warning-text";
 
+// stylelint-disable max-nesting-depth
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
-  @import "govuk/components/warning-text/warning-text";
-
   .help-notice {
     $icon-size: 35px;
     $icon-spacing: 10px;

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -49,7 +49,7 @@
 
   // Links
 
-  a {
+  a:not(.govuk-button) {
     @include govuk-link-common;
     @include govuk-link-style-default;
     @include govuk-text-break-word;
@@ -75,6 +75,11 @@
     list-style: disc;
   }
 
+  .list-no-bullets {
+    list-style: none;
+    margin: 0;
+  }
+
   li {
     margin: 0 0 govuk-spacing(2);
     padding: 0;

data/app/controllers/govuk_publishing_components/applications_page_controller.rb

@@ -0,0 +1,50 @@
+module GovukPublishingComponents
+  class ApplicationsPageController < GovukPublishingComponents::ApplicationController
+    def show
+      applications = [
+        {
+          type: "public-facing",
+          apps: %w[collections email-alert-frontend feedback finder-frontend frontend government-frontend smart-answers static].sort,
+        },
+        {
+          type: "publishing",
+          apps: %w[content-data-admin collections-publisher travel-advice-publisher whitehall datagovuk_find local-links-manager places-manager support manuals-publisher service-manual-publisher short-url-manager specialist-publisher content-tagger publisher transition search-admin].sort,
+        },
+        {
+          type: "utility",
+          apps: %w[account-api signon govspeak govspeak-preview release govuk-developer-docs govuk-chat].sort,
+        },
+      ]
+
+      @cache_status = Rails.application.config.cache_store != :null_store
+      @performcache_status = Rails.application.config.action_controller.perform_caching
+
+      @applications_output = Rails.cache.fetch("applications_cache", expires_in: 5.minutes) do
+        applications_data(applications)
+      end
+    end
+
+  private
+
+    def applications_data(applications)
+      output = []
+      applications.each do |type|
+        type[:apps].each do |application|
+          app = ApplicationsPage.new(application)
+
+          output << {
+            name: app.readable_name,
+            type: type[:type],
+            link: "https://github.com/alphagov/#{application}",
+            source: app.source,
+            gem_version: app.gem_version,
+            gem_version_status: app.gem_version == GovukPublishingComponents::VERSION ? "green" : "red",
+            slimmer_version: app.slimmer_version,
+            sass_version: app.sass_version,
+          }
+        end
+      end
+      output
+    end
+  end
+end

data/app/models/govuk_publishing_components/applications_page.rb

@@ -0,0 +1,64 @@
+module GovukPublishingComponents
+  class ApplicationsPage
+    attr_reader :source
+
+    def initialize(application)
+      @application = application
+      @dir = get_directory
+      @gemfilelock = get_gemfile
+    end
+
+    def readable_name
+      @application.gsub("-", " ").capitalize
+    end
+
+    def gem_version
+      parse_file(@gemfilelock, /govuk_publishing_components \(([^)>=~ ]+)\)/)
+    end
+
+    def slimmer_version
+      parse_file(@gemfilelock, /slimmer \(([^)>=~ ]+)\)/)
+    end
+
+    def sass_version
+      parse_file(@gemfilelock, /sass-embedded \(([^)>=~ ]+)\)/)
+    end
+
+  private
+
+    def get_directory
+      app_dir = "#{File.expand_path('..')}/#{@application}"
+      Dir.exist?(app_dir) ? app_dir : false
+    end
+
+    def get_gemfile
+      @dir ? get_gemfile_local : get_gemfile_remote
+    end
+
+    def get_gemfile_local
+      lockfile = "#{@dir}/Gemfile.lock"
+      return unless File.file?(lockfile)
+
+      @source = "local"
+      File.read(lockfile)
+    end
+
+    def get_gemfile_remote
+      uri = URI("https://raw.githubusercontent.com/alphagov/#{@application}/main/Gemfile.lock")
+      result = Net::HTTP.get_response(uri)
+      if result.is_a?(Net::HTTPSuccess)
+        @source = "remote"
+        result.body
+      end
+    rescue StandardError
+      @source = nil
+    end
+
+    def parse_file(src, regex)
+      return unless src
+
+      matches = src.match(regex)
+      matches[1] if matches
+    end
+  end
+end

data/app/views/govuk_publishing_components/applications_page/_table-content.html.erb

@@ -0,0 +1,39 @@
+<% content.each do |app| %>
+  <tr class="govuk-table__row" data-filter-item>
+    <td class="govuk-table__cell">
+      <a href="<%= app[:link] %>" class="govuk-link"><%= app[:name] %></a>
+    </td>
+    <td class="govuk-table__cell">
+      <%= type %>
+    </td>
+    <td class="govuk-table__cell">
+      <% if app[:source] %>
+        <%= app[:source] %>
+      <% else %>
+        not found
+      <% end %>
+    </td>
+    <td class="govuk-table__cell">
+      <% if app[:gem_version] %>
+        <%= render "govuk_publishing_components/components/tag", {
+          text: app[:gem_version],
+          colour: app[:gem_version_status],
+        } %>
+      <% end %>
+    </td>
+    <td class="govuk-table__cell">
+      <% if app[:slimmer_version] %>
+        <%= render "govuk_publishing_components/components/tag", {
+          text: app[:slimmer_version],
+        } %>
+      <% end %>
+    </td>
+    <td class="govuk-table__cell">
+      <% if app[:sass_version] %>
+        <%= render "govuk_publishing_components/components/tag", {
+          text: app[:sass_version],
+        } %>
+      <% end %>
+    </td>
+  </tr>
+<% end %>

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

@@ -0,0 +1,37 @@
+<% content_for :title, "Applications consistency" %>
+<% add_gem_component_stylesheet("table") %>
+
+<%= render "govuk_publishing_components/components/back_link", {
+  href: "/component-guide",
+} %>
+
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Applications",
+  heading_level: 1,
+  font_size: "xl",
+  margin_bottom: 8,
+} %>
+
+<% if @cache_status && @performcache_status %>
+  <p class="govuk-body">The results below are cached for 5 minutes. If you are expecting a change and cannot see it, try again later.</p>
+<% end %>
+
+<div data-module="filter-list">
+  <table class="govuk-table">
+    <thead class="govuk-table__head">
+      <tr class="govuk-table__row">
+        <th scope="col" class="govuk-table__header sticky-table-header">Application</th>
+        <th scope="col" class="govuk-table__header sticky-table-header">Type</th>
+        <th scope="col" class="govuk-table__header sticky-table-header">Source</th>
+        <th scope="col" class="govuk-table__header sticky-table-header">Gem version</th>
+        <th scope="col" class="govuk-table__header sticky-table-header">Slimmer version</th>
+        <th scope="col" class="govuk-table__header sticky-table-header">Sass version</th>
+      </tr>
+    </thead>
+    <tbody class="govuk-table__body">
+      <%= render "table-content", content: @applications_output.select { |a| a[:type] == "public-facing" }, type: "Public facing" %>
+      <%= render "table-content", content: @applications_output.select { |a| a[:type] == "publishing" }, type: "Publishing" %>
+      <%= render "table-content", content: @applications_output.select { |a| a[:type] == "utility" }, type: "Utility" %>
+    </tbody>
+  </table>
+</div>

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

@@ -2,9 +2,13 @@
   add_gem_component_stylesheet("table")
   add_gem_component_stylesheet("select")
   add_gem_component_stylesheet("summary-list")
+  content_for :title, "Component audit"
 %>
 
-<% content_for :title, "Component audit" %>
+<%= render "govuk_publishing_components/components/back_link", {
+  href: "/component-guide",
+} %>
+
 <%= render "govuk_publishing_components/components/heading", {
     text: "Components audit",
     heading_level: 1,

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

@@ -0,0 +1,14 @@
+<% if local_assigns[:heading] %>
+  <h2 class="govuk-heading-m"><%= local_assigns[:heading] %> (<%= local_assigns[:size] %>)</h2>
+<% end %>
+<%= local_assigns[:details] if local_assigns[:details] %>
+<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
+  <% local_assigns[:components].each do |component_doc| %>
+    <li data-filter-item>
+      <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
+      <p class="govuk-body">
+        <%= component_doc.description %>
+      </p>
+    </li>
+  <% end %>
+</ul>

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

@@ -22,13 +22,13 @@
     <div class="component-markdown">
       <%= raw(@component_example.html_description) %>
     </div>
-    <h2 class="component-doc-h2">
+    <h2 class="govuk-heading-m">
       How it looks
-      <small>(<a href="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
+      <small class="govuk-!-font-size-16">(<a href="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
     </h2>
     <%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, example: @component_example } %>
 
-    <h2 class="component-doc-h2">How to call this example</h2>
+    <h2 class="govuk-heading-m govuk-!-margin-top-4">How to call this example</h2>
     <%= code_example %>
   </div>
 </div>

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

@@ -5,94 +5,69 @@
     margin_bottom: 8,
   } %>
 
-<div class="component-markdown">
+<div class="component-markdown govuk-!-margin-bottom-8">
   <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>
   <ul>
     <li>Read about how to <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/publishing-to-rubygems.md">release a new version of the gem</a></li>
     <li><a href="/component-guide/audit">View component audits</a></li>
+    <li><a href="/component-guide/applications">View application information</a></li>
   </ul>
 </div>
 
-<form role="search" data-module="filter-components" class="component-search">
-  <%= render "govuk_publishing_components/components/search", {
-    label_text: "Search components",
-  } %>
-</form>
+<div data-module="filter-list" data-filter-label="Search components">
+  <% if !ENV["MAIN_COMPONENT_GUIDE"] %>
+    <%= render partial: "component_list", locals: {
+      heading: "Components in this application",
+      size: @component_docs.length,
+      components: @component_docs,
+    } %>
 
-<% if !ENV["MAIN_COMPONENT_GUIDE"] %>
-  <h2 class="component-doc-h2">Components in this application (<%= @component_docs.length %>)</h2>
-  <ul class="component-list" id="list-components-in-this-application">
-    <% @component_docs.each do |component_doc| %>
-      <li>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-        <p>
-          <%= component_doc.description %>
-        </p>
-      </li>
+    <% details = capture do %>
+      <%= render "govuk_publishing_components/components/details", {
+        title: "Suggested imports for this application",
+        margin_bottom: 6,
+      } do %>
+        <%= render "govuk_publishing_components/components/textarea", {
+          label: {
+            text: "Add this to your application's main scss file, before your other local imports.",
+          },
+          name: "main-sass",
+          value: @components_in_use_sass,
+        } %>
+        <%= render "govuk_publishing_components/components/textarea", {
+          label: {
+            text: "Add this to your application's main js file, before your other local imports.",
+          },
+          name: "main-js",
+          value: @components_in_use_js,
+          margin_bottom: 0,
+        } %>
+      <% end %>
     <% end %>
-  </ul>
-
-  <h2 class="component-doc-h2">Gem components used by this app (<%= @used_components.length %>)</h2>
 
-  <%= render "govuk_publishing_components/components/details", {
-    title: "Suggested imports for this application",
-  } do %>
-    <%= render "govuk_publishing_components/components/textarea", {
-      label: {
-        text: "Add this to your application's main scss file, before your other local imports.",
-      },
-      name: "main-sass",
-      value: @components_in_use_sass,
+    <%= render partial: "component_list", locals: {
+      heading: "Gem components used by this app",
+      size: @used_components.length,
+      components: @used_components,
+      details: details,
     } %>
-    <%= render "govuk_publishing_components/components/textarea", {
-      label: {
-        text: "Add this to your application's main js file, before your other local imports.",
-      },
-      name: "main-js",
-      value: @components_in_use_js,
+
+    <%= render partial: "component_list", locals: {
+      heading: "Gem components not used by this app",
+      size: @unused_components.length,
+      components: @unused_components,
     } %>
+  <% else %>
+    <div id="list-all-components-in-the-gem">
+      <%= render partial: "component_list", locals: {
+        size: @gem_component_docs.length,
+        components: @gem_component_docs,
+      } %>
+    </div>
   <% end %>
-<pre>
-
-</pre>
-
-  <ul class="component-list">
-    <% @used_components.each do |component_doc| %>
-      <li>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-        <p>
-          <%= component_doc.description %>
-        </p>
-      </li>
-    <% end %>
-  </ul>
-
-  <h2 class="component-doc-h2">Gem components not used by this app (<%= @unused_components.length %>)</h2>
-  <ul class="component-list">
-    <% @unused_components.each do |component_doc| %>
-      <li>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-        <p>
-          <%= component_doc.description %>
-        </p>
-      </li>
-    <% end %>
-  </ul>
-
-<% else %>
-  <ul class="component-list" id="list-all-components-in-the-gem">
-    <% @gem_component_docs.each do |component_doc| %>
-      <li>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-        <p>
-          <%= component_doc.description %>
-        </p>
-      </li>
-    <% end %>
-  </ul>
-<% end %>
 
-<div class="component-markdown">
-  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/generate-a-new-component.md">creating a new one</a>.</p>
+  <div class="component-markdown">
+    <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/generate-a-new-component.md">creating a new one</a>.</p>
+  </div>
 </div>

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

@@ -64,18 +64,18 @@
     } %>
   </div>
 
-  <h2 class="component-doc-h2" id="how-it-looks">
+  <h2 class="govuk-heading-m" id="how-it-looks">
     <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
-    <small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
-    <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
+    <small class="govuk-!-font-size-16">(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
+    <small class="govuk-!-font-size-16">(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
   </h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
-  <h2 class="component-doc-h2" id="how-to-call-this-component">How to call this component</h2>
+  <h2 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">How to call this component</h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
 
   <% if @component_doc.govuk_frontend_components.any? %>
-    <h2 class="component-doc-h2" id="govuk-design-system">GOV.UK Design System</h2>
+    <h2 class="govuk-heading-m" id="govuk-design-system">GOV.UK Design System</h2>
     <div class="component-markdown">
       <p>This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:</p>
 
@@ -90,7 +90,7 @@
   <% if @component_doc.accessibility_criteria.present? %>
     <div class="govuk-grid-row component-accessibility-criteria" id="accessibility-acceptance-criteria">
       <div class="govuk-grid-column-two-thirds">
-        <h2 class="component-doc-h2">Accessibility acceptance criteria</h2>
+        <h2 class="govuk-heading-m">Accessibility acceptance criteria</h2>
         <div class="component-markdown">
           <%= raw(@component_doc.html_accessibility_criteria) %>
         </div>
@@ -100,7 +100,7 @@
 
   <% if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper? %>
     <div class="examples">
-      <h2 class="component-doc-h2" id="other-examples">Other examples</h2>
+      <h2 class="govuk-heading-m" id="other-examples">Other examples</h2>
 
       <% if @component_doc.uses_component_wrapper_helper? %>
         <div class="component-example" id="standard-options">