govuk_publishing_components 21.60.1 → 21.63.0

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

@@ -125,6 +125,10 @@ $gem-guide-border-width: 1px;
     background-color: govuk-colour("blue");
   }
 
+  &.black-background {
+    background-color: govuk-colour("black");
+  }
+
   &.component-output {
     padding: 0;
   }

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -44,6 +44,7 @@
 @import "components/label";
 @import "components/layout-footer";
 @import "components/layout-for-admin";
+@import "components/layout-for-public";
 @import "components/layout-header";
 @import "components/lead-paragraph";
 @import "components/metadata";

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

@@ -21,37 +21,24 @@
   border-color: govuk-colour("white");
 }
 
-.gem-c-breadcrumbs--collapse-on-mobile {
+.govuk-breadcrumbs--collapse-on-mobile {
   @include govuk-media-query($until: tablet) {
-    .govuk-breadcrumbs__list {
-      display: flex;
-    }
-
-    .govuk-breadcrumbs__list-item:not(:last-child):not(:first-child) {
-      display: none;
-    }
-
     .govuk-breadcrumbs__list-item {
       padding-top: 14px;
       padding-bottom: 14px;
     }
 
     .govuk-breadcrumbs__list-item:before {
-      margin: 0;
       top: 18px;
     }
 
-    .govuk-breadcrumbs__link {
-      position: relative;
-    }
-
     .govuk-breadcrumbs__link:after {
       content: "";
       position: absolute;
-      top: -14px;
+      top: 0;
       right: 0;
       left: 0;
-      bottom: -14px;
+      bottom: 0;
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -1 +1,9 @@
 @import "govuk/components/footer/footer";
+
+.gem-c-layout-footer--border {
+  border-top: govuk-spacing(2) solid govuk-colour("blue");
+}
+
+.gem-c-layout-footer .govuk-footer__list {
+  padding-bottom: govuk-spacing(7);
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -0,0 +1,4 @@
+.gem-c-layout-for-public {
+  margin: 0;
+  font-family: $govuk-font-family;
+}

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

@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/components/search";
+@import "govuk_publishing_components/components/skip-link";
 @import "govuk/components/header/header";
 @import "govuk/components/tag/tag";
 
@@ -18,8 +20,80 @@
   border-bottom-color: govuk-colour("dark-grey", $legacy: "grey-1");
 }
 
+.gem-c-layout-header--no-bottom-border,
+.gem-c-layout-header--no-bottom-border .govuk-header__container {
+  margin-bottom: 0;
+  border-bottom: 0;
+
+  @include govuk-media-query($until: tablet) {
+    padding-bottom: govuk-spacing(1);
+  }
+}
+
+.gem-c-layout-header--search-left {
+  .gem-c-header__menu-button {
+    margin-top: - govuk-spacing(7);
+    left: 0;
+  }
+
+  .gem-c-header__nav-wrapper {
+    position: relative;
+    padding-left: 0;
+  }
+
+  .govuk-header__navigation--end {
+    padding-top: 0;
+    text-align: left;
+  }
+
+  .gem-c-layout-header__search {
+    margin-bottom: govuk-spacing(2);
+    padding-bottom: govuk-spacing(5);
+  }
+
+  .gem-c-header__content {
+    position: relative;
+    width: 100%;
+    padding-bottom: govuk-spacing(2);
+  }
+
+  @include govuk-media-query($from: desktop) {
+    .gem-c-layout-header__search {
+      padding-bottom: govuk-spacing(1);
+    }
+
+    .govuk-header__navigation-item {
+      padding: 0 0 govuk-spacing(1) 0;
+    }
+
+    .gem-c-header__logo {
+      margin-top: 0;
+    }
+
+    .gem-c-header__content {
+      @include govuk-grid-column(two-thirds);
+      padding-left: govuk-spacing(6);
+      padding-right: govuk-spacing(1);
+    }
+  }
+}
+
+.gem-c-layout-header__logo,
+.gem-c-layout-header__search {
+  padding: 0;
+
+  @include govuk-media-query($until: "tablet") {
+    margin-bottom: govuk-spacing(3);
+  }
+}
+
 .gem-c-header__logo {
-  width: auto;
+  margin-top: govuk-spacing(1);
+  margin-bottom: govuk-spacing(3);
+
+  @include govuk-media-query($from: desktop) {
+    white-space: nowrap;
+  }
 }
 
 .gem-c-header__content {
@@ -68,3 +142,15 @@
     display: none;
   }
 }
+
+.gem-c-layout-header__search-form {
+  display: none;
+
+  &.js-visible {
+    display: block;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: block;
+  }
+}

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

@@ -1,5 +1,5 @@
 @import "govuk/components/radios/radios";
 
 .gem-c-radio__heading-text {
-  margin: 0;
+  margin: 0 0 govuk-spacing(4) 0;
 }

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

@@ -179,6 +179,12 @@ $large-input-size: 50px;
   }
 }
 
+.gem-c-search--no-border {
+  .gem-c-search__input[type="search"] {
+    border: 0;
+  }
+}
+
 .gem-c-search--large {
   .gem-c-search__label {
     @include govuk-font($size: 19, $line-height: $large-input-size);
@@ -208,3 +214,43 @@ $large-input-size: 50px;
     padding-left: 0;
   }
 }
+
+.search-toggle {
+  background-color: govuk-colour("blue");
+  background-image: image-url("govuk_publishing_components/search-button.png");
+  background-position: 0 50%;
+  background-repeat: no-repeat;
+  display: block;
+  float: right;
+  height: 30px;
+  margin: -46px 0;
+  overflow: hidden;
+  padding: 0;
+  text-indent: -5000px;
+  width: 36px;
+
+  &:focus {
+    border-width: 0;
+    box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+    outline-offset: 0;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: lighten(govuk-colour("blue"), 5%);
+  }
+
+  &.js-hidden {
+    display: none;
+  }
+
+  @include govuk-device-pixel-ratio {
+    background-size: 52.5px 35px;
+    background-position: 100% 50%;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: none;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss

@@ -4,3 +4,11 @@
 @import "govuk/settings/all";
 @import "govuk/tools/all";
 @import "govuk/helpers/all";
+$govuk-colours-organisations: map-merge(
+  $govuk-colours-organisations,
+  (
+    "foreign-commonwealth-development-office": (
+      colour: #012169
+    )
+  )
+);

data/app/models/govuk_publishing_components/audit_applications.rb

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

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -36,6 +36,7 @@ module GovukPublishingComponents
           warnings = []
           warnings << warn_about_missing_components(result[:components_found])
           warnings << warn_about_missing_assets(result[:components_found])
+          warnings << warn_about_style_overrides(result[:gem_style_references])
           warnings = warnings.flatten
 
           data << {
@@ -65,6 +66,7 @@ module GovukPublishingComponents
             ],
             warnings: warnings,
             warning_count: warnings.length,
+            gem_style_references: result[:gem_style_references],
           }
         else
           data << {
@@ -150,6 +152,17 @@ module GovukPublishingComponents
       !@gem_data[:component_code].include?(component) unless component == "all"
     end
 
+    def warn_about_style_overrides(results)
+      warnings = []
+
+      results.each do |result|
+        warnings << create_warning("Possible component style override", result) if result.include? ".scss"
+        warnings << create_warning("Possible hard coded component markup", result) if [".html", ".rb"].any? { |needle| result.include? needle }
+      end
+
+      warnings
+    end
+
     def find_missing(needle, haystack)
       (haystack - needle).flatten.sort
     end

data/app/models/govuk_publishing_components/component_example.rb

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

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

@@ -20,7 +20,11 @@
       </li>
     </ul>
     <div class="govuk-tabs__panel" id="applications">
-      <h2 class="govuk-heading-l">Applications</h2>
+      <%= 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">
@@ -66,7 +70,12 @@
                     </p>
                   <% end %>
 
-                  <h3 class="govuk-heading-m">Components used</h3>
+                  <%= 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| %>
@@ -84,6 +93,22 @@
                       </div>
                     <% end %>
                   </dl>
+
+                  <% if application[:gem_style_references].any? %>
+                    <%= render "govuk_publishing_components/components/heading", {
+                      text: "Component references",
+                      font_size: "m",
+                      margin_bottom: 4,
+                      heading_level: 3,
+                    } %>
+
+                    <p class="govuk-body">This shows instances of `gem-c-` classes found in the application. If a reference is found in a stylesheet or in code a warning is created, as this could be a style override or hard coded component markup.</p>
+                    <ul class="govuk-list govuk-list--bullet">
+                      <% application[:gem_style_references].each do |ref| %>
+                        <li><%= ref %></li>
+                      <% end %>
+                    </ul>
+                  <% end %>
                 <% else %>
                   <p class="govuk-body">This application was not found. This could be because you do not have this repository checked out locally.</p>
                 <% end %>
@@ -97,7 +122,11 @@
     </div>
 
     <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="components-gem">
-      <h2 class="govuk-heading-l">Components</h2>
+      <%= render "govuk_publishing_components/components/heading", {
+        text: "Components",
+        font_size: "l",
+        margin_bottom: 6,
+      } %>
 
       <% if @components.any? %>
         <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">