govuk_publishing_components 62.0.0 → 62.2.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/_image-card.scss

@@ -6,139 +6,39 @@
   display: flex;
   display: -ms-flexbox;
   flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
+  -ms-flex-direction: row-reverse;
+  gap: govuk-spacing(2);
+  justify-content: space-between;
+  align-items: stretch;
   @include govuk-text-colour;
-  @include govuk-clearfix;
-
-  @include govuk-media-query($from: mobile, $until: tablet) {
-    display: block;
 
-    .gem-c-image-card__text-wrapper {
-      float: right;
-      padding-left: 0;
-    }
+  @include govuk-media-query($until: tablet) {
+    flex-direction: row-reverse;
+    gap: govuk-spacing(3);
   }
 }
 
-.gem-c-image-card__header-and-context-wrapper {
-  display: flex;
-  flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
+.gem-c-image-card__text-wrapper {
+  flex-grow: 1;
+  flex-basis: 50%;
 }
 
 .gem-c-image-card__image-wrapper {
+  flex-grow: 1;
+  flex-basis: 50%;
   margin: 0;
 
   @include govuk-media-query($from: tablet) {
-    margin-bottom: govuk-spacing(2);
     height: 100%;
   }
-
-  + .gem-c-image-card__text-wrapper {
-    @include govuk-media-query($until: tablet) {
-      padding-left: 0;
-    }
-  }
-}
-
-@include govuk-media-query($from: mobile, $until: tablet) {
-  .gem-c-image-card {
-    margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
-  }
-
-  .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: one-half, $at: mobile);
-  }
-
-  .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: one-half, $at: mobile);
-  }
-
-  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
-    @include govuk-grid-column($width: one-third, $float: right, $at: mobile);
-  }
-
-  .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
-    @include govuk-grid-column($width: two-thirds, $float: right, $at: mobile);
-  }
-}
-
-@include govuk-media-query($from: tablet) {
-  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
-    @include govuk-grid-column($width: one-third, $float: right, $at: tablet);
-  }
-
-  .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
-    @include govuk-grid-column($width: two-thirds, $float: right, $at: tablet);
-  }
 }
 
 .gem-c-image-card__image {
   display: block;
   height: auto;
   width: 100%;
+  border: 0;
   border-top: 1px solid $govuk-border-colour;
-  border-left: none;
-  border-right: none;
-  border-bottom: none;
-}
-
-.gem-c-image-card.gem-c-image-card--two-thirds {
-  // Change default flex-direction from column-reverse
-  // so that the image and text appear in the same row,
-  // with the image to the left
-  flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  // Wrap flex items onto a new line and ensure
-  // that items are aligned correctly
-  flex-wrap: wrap-reverse;
-  -ms-flex-wrap: wrap-reverse;
-  justify-content: flex-end;
-  align-items: flex-end;
-}
-
-.gem-c-image-card--two-thirds {
-  .gem-c-image-card__image {
-    border-top: none;
-  }
-
-  // TODO: Temporary fixes to ensure the layout
-  // renders correctly on screen sizes less than 320px wide
-  @include govuk-media-query($until: "mobile") {
-    padding: 0 govuk-spacing(3);
-  }
-
-  .gem-c-image-card__image-wrapper {
-    @include govuk-media-query($until: "mobile") {
-      margin-bottom: govuk-spacing(2);
-    }
-  }
-
-  // Ensures the font-size is 19px on all screen sizes
-  .gem-c-image-card__title-link--large-font-size-mobile,
-  .gem-c-image-card__description--large-font-size-mobile {
-    @include govuk-media-query($until: "tablet") {
-      font-size: 19px;
-      font-size: govuk-px-to-rem(19);
-    }
-  }
-}
-
-.gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
-  // The first two values set flex-grow and flex-basis to 0
-  // This ensures that the flex item does not grow or shrink
-  // The the last value, sets flex-basis to 95px
-  // padding-left is set to 15px and the image used is 80px wide
-  flex: 0 0 95px;
-  padding-right: 0;
-}
-
-.gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
-  // The first two values set flex-grow and flex-basis to 1
-  // This allows the flex item contain the image card text to grow or shrink
-  // The last value, sets flex-basis to 70%
-  // If the width of the flex-item shrinks below 70%, it will wrap onto a new line
-  flex: 1 1 70%;
 }
 
 .gem-c-image-card__title {
@@ -155,22 +55,13 @@
   // position relative and a higher z-index to put them above the after element
   &::after {
     content: "";
+    display: block;
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     right: 0;
     height: 100%;
-    $ie-background: rgba(255, 255, 255, 0);
-    background: $ie-background; // because internet explorer
-    -ms-high-contrast-adjust: none;
-  }
-
-  @include govuk-media-query($from: mobile, $until: tablet) {
-    &::after {
-      left: govuk-spacing(3);
-      right: govuk-spacing(3);
-    }
   }
 }
 
@@ -235,47 +126,34 @@
   }
 }
 
-.gem-c-image-card--large.gem-c-image-card {
-  display: flex;
-  margin: 0 0 govuk-spacing(6) 0;
-  @include govuk-media-query($from: tablet) {
-    display: block;
+.gem-c-image-card--two-thirds {
+  flex-direction: row-reverse;
+  gap: govuk-spacing(3);
+
+  .gem-c-image-card__text-wrapper {
+    flex: 1 1 70%;
   }
-}
 
-.gem-c-image-card--large {
   .gem-c-image-card__image-wrapper {
-    margin-bottom: govuk-spacing(2);
-    float: none;
-    width: auto;
-    max-width: 100%;
-    @include govuk-grid-column($width: one-half, $at: tablet);
-
-    & { // stylelint-disable-line no-duplicate-selectors
-      // overriding the padding from govuk-grid-column mixin
-      padding: 0;
-    }
+    flex: 0 0 80px;
+  }
 
-    @include govuk-media-query($from: tablet) {
-      padding: 0 govuk-spacing(2) 0 0;
-      margin-bottom: 0;
-    }
+  .gem-c-image-card__image {
+    border-top: none;
   }
 
-  .gem-c-image-card__text-wrapper {
-    overflow: hidden;
-    @include govuk-grid-column($width: one-half, $at: tablet);
+  @include govuk-media-query($until: "mobile") {
+    flex-direction: column-reverse;
+  }
+}
 
-    & { // stylelint-disable-line no-duplicate-selectors
-      // overriding the padding from govuk-grid-column mixin
-      padding: 0;
-    }
+.gem-c-image-card--large {
+  flex-direction: column-reverse;
+  gap: govuk-spacing(2);
 
-    @include govuk-media-query($from: tablet) {
-      float: right;
-      padding: 0 govuk-spacing(3);
-      margin-bottom: 0;
-    }
+  @include govuk-media-query($from: tablet) {
+    flex-direction: row-reverse;
+    gap: govuk-spacing(5);
   }
 
   .gem-c-image-card__title {
@@ -339,15 +217,6 @@
   @include govuk-focused-text;
 }
 
-.gem-c-image-card--no-image {
-  .gem-c-image-card__text-wrapper {
-    @include govuk-media-query($from: mobile, $until: tablet) {
-      float: left;
-      padding: 0 govuk-spacing(3);
-    }
-  }
-}
-
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-image-card__title[class*="govuk-heading-"] {

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -6,6 +6,11 @@
   margin-bottom: govuk-spacing(6);
   padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
   box-sizing: border-box;
+
+  @include govuk-media-query($until: desktop) {
+    padding-left: govuk-spacing(3);
+    padding-right: govuk-spacing(3);
+  }
 }
 
 .gem-c-inverse-header__subtext {
@@ -33,6 +38,10 @@
   color: govuk-colour("white");
 }
 
+.gem-c-inverse-header--hmrc-header {
+  background: govuk-organisation-colour("hm-revenue-customs");
+}
+
 @include govuk-media-query($media-type: print) {
   .gem-c-inverse-header {
     background: none;

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>