govuk_publishing_components 24.1.0 → 24.4.0

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

@@ -31,7 +31,7 @@
 }
 
 .gem-c-layout-header--search-left {
-  .gem-c-header__menu-button {
+  .gem-c-header__menu-button.govuk-header__menu-button {
     margin-top: - govuk-spacing(7);
     left: 0;
   }
@@ -70,7 +70,7 @@
       margin-top: 0;
     }
 
-    .gem-c-header__content {
+    .gem-c-header__content.govuk-header__content {
       @include govuk-grid-column(two-thirds);
       padding-left: govuk-spacing(6);
       padding-right: govuk-spacing(1);
@@ -78,10 +78,16 @@
   }
 }
 
+.gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
+.gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
+.gem-c-layout-header__search.govuk-grid-column-one-third,
+.gem-c-layout-header__logo.govuk-grid-column-two-thirds {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .gem-c-layout-header__logo,
 .gem-c-layout-header__search {
-  padding: 0;
-
   @include govuk-media-query($until: "tablet") {
     margin-bottom: govuk-spacing(3);
   }
@@ -96,8 +102,9 @@
   }
 }
 
-.gem-c-header__content {
+.gem-c-header__content.govuk-header__content {
   width: auto;
+  padding-left: 0;
 
   @include govuk-media-query($from: desktop) {
     float: right;
@@ -159,3 +166,12 @@
     display: block;
   }
 }
+
+.govuk-header__menu-button.gem-c-header__menu-button {
+  top: govuk-spacing(4);
+  right: 0;
+}
+
+.gem-c-header__nav {
+  clear: both;
+}

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

@@ -34,6 +34,21 @@ $large-input-size: 50px;
   }
 }
 
+%gem-c-search-input-focus {
+  outline: $govuk-focus-width solid $govuk-focus-colour;
+  // Ensure outline appears outside of the element
+  outline-offset: 0;
+  // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
+  // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
+  box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+  @include govuk-if-ie8 {
+    // IE8 doesn't support `box-shadow` so double the border with
+    // `border-width`.
+    border-width: $govuk-border-width-form-element * 2;
+  }
+}
+
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include govuk-font($size: 19, $line-height: (28 / 19));
   margin: 0;
@@ -59,25 +74,14 @@ $large-input-size: 50px;
   }
 
   &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    // Ensure outline appears outside of the element
-    outline-offset: 0;
-    // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
-    // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
-    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
-
-    @include govuk-if-ie8 {
-      // IE8 doesn't support `box-shadow` so double the border with
-      // `border-width`.
-      border-width: $govuk-border-width-form-element * 2;
-    }
+    @extend %gem-c-search-input-focus;
   }
 }
 
 @include govuk-compatibility(govuk_template) {
   //  ultra specific rule overrides focus styling from govuk_template
   #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
-    @extend .gem-c-search__input[type="search"]:focus; // stylelint-disable scss/at-extend-no-missing-placeholder
+    @extend %gem-c-search-input-focus;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -141,6 +141,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   .gem-c-step-nav--large & {
     margin-left: em(5, 16);
   }
+
+  svg {
+    pointer-events: none;
+  }
 }
 
 .gem-c-step-nav__button-text {

data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss

@@ -2,6 +2,7 @@
 //
 // TODO: Replace with the print styles that will come from GOV.UK Frontend.
 
+@import "govuk_publishing_components/component_support";
 @import "../accordion";
 
 // Open all of the accordion sections.

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

@@ -1,14 +1,4 @@
 // This file should be included in an application prior to specific components
 // It provides govuk-frontend but adds no weight to the compiled CSS
 @import "components/helpers/govuk-frontend-settings";
-@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
-    )
-  )
-);
+@import "govuk/base";

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -14,7 +14,7 @@ module GovukPublishingComponents
         stylesheets = Dir["#{path}/app/assets/stylesheets/**/*.scss"]
         javascripts = Dir["#{path}/app/assets/javascripts/**/*.js"]
 
-        find_components = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/
+        find_components = /(?<=govuk_publishing_components\/components\/)[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_-]+(?=['"])/
@@ -22,7 +22,7 @@ module GovukPublishingComponents
         @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_javascripts = /\/\/[ ]*= require govuk_publishing_components\/all_components/
+        @find_all_javascripts = /\/\/ *= require govuk_publishing_components\/all_components/
         find_javascripts = /(?<=require govuk_publishing_components\/components\/)[a-zA-Z_-]+/
 
         components_in_templates = find_components(templates, find_components, "templates") || []

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -110,8 +110,8 @@ module GovukPublishingComponents
           next if second[:components].include?("all")
 
           in_current.each do |component|
-            if @gem_data.include?("component_#{second_location}".to_sym)
-              warnings << create_warning(component, "Included in #{first_location} but not #{second_location}") if @gem_data["component_#{second_location}".to_sym].include?(component)
+            if @gem_data.include?("component_#{second_location}".to_sym) && @gem_data["component_#{second_location}".to_sym].include?(component)
+              warnings << create_warning(component, "Included in #{first_location} but not #{second_location}")
             end
           end
         end

data/app/models/govuk_publishing_components/component_example.rb

@@ -57,13 +57,14 @@ module GovukPublishingComponents
     # Safe HTML can be passed to components, simulate
     # by marking any string that comes from YAML as safe
     def html_safe_strings(obj)
-      if obj.is_a?(String)
+      case obj
+      when String
         obj.html_safe
-      elsif obj.is_a?(Hash)
+      when Hash
         obj.each do |key, value|
           obj[key] = html_safe_strings(value)
         end
-      elsif obj.is_a?(Array)
+      when Array
         obj.map! { |e| html_safe_strings(e) }
       else
         obj

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

@@ -39,98 +39,105 @@
           </div>
         </details>
 
-        <div class="gem-c-accordion" data-module="gem-c-accordion" id="accordion-with-summary-sections">
-          <% @applications.each_with_index do |application, index| %>
-            <div class="gem-c-accordion__section ">
-              <div class="gem-c-accordion__section-header">
-                <h2 class="gem-c-accordion__section-heading">
-                  <span class="gem-c-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
-                    <%= application[:name] %>
-                  </span>
-                </h2>
-                <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-<%= index %>">
-                  <% if application[:application_found] %>
-                    Warnings:
-                    <% if application[:warning_count] > 0 %>
-                      <strong class="govuk-tag govuk-tag--red"><%= application[:warning_count] %></strong>
-                    <% else %>
-                      <%= application[:warning_count] %>
-                    <% end %>
-                  <% else %>
-                    <strong class="govuk-tag govuk-tag--red">Application not found</strong>
-                  <% end %>
-                </div>
-              </div>
-              <div id="accordion-with-summary-sections-content-<%= index %>" class="gem-c-accordion__section-content" aria-labelledby="accordion-with-summary-sections-heading-<%= index %>">
-                <% 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 %>
+        <% #application_items = [] %>
+        <% application_items = @applications.map do |application| %>
+          <%
+            summary = '<strong class="govuk-tag govuk-tag--red">Application not found</strong>'
 
-                  <%= render "govuk_publishing_components/components/heading", {
-                    text: "Components used",
-                    font_size: "m",
-                    margin_bottom: 4,
-                    heading_level: 3,
-                  } %>
+            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
+          %>
 
-                  <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>
+          <% 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 %>
 
-                  <% if application[:gem_style_references].any? %>
-                    <%= render "govuk_publishing_components/components/heading", {
-                      text: "Component references",
-                      font_size: "m",
-                      margin_bottom: 4,
-                      heading_level: 3,
-                    } %>
+              <%= render "govuk_publishing_components/components/heading", {
+                text: "Components used",
+                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>
+              <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 %>
-                    </ul>
+                    </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>
+              <% 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 %>
-                <% 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 %>
-              </div>
-            </div>
+                </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 %>
-        </div>
+
+          <%
+            {
+              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 %>
@@ -144,125 +151,130 @@
       } %>
 
       <% if @components.any? %>
-        <div class="gem-c-accordion" data-module="gem-c-accordion" id="accordion-default">
-          <div class="gem-c-accordion__section ">
-            <div class="gem-c-accordion__section-header">
-              <h2 class="gem-c-accordion__section-heading">
-                <span class="gem-c-accordion__section-button" id="accordion-default-heading-1">
-                  Component files
-                </span>
-              </h2>
-              <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
-                Lists what files each component has
-              </div>
-            </div>
-            <div id="accordion-default-content-1" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-1">
-              <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>
-            </div>
-          </div>
+        <% 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 %>
 
-          <div class="gem-c-accordion__section ">
-            <div class="gem-c-accordion__section-header">
-              <h2 class="gem-c-accordion__section-heading">
-                <span class="gem-c-accordion__section-button" id="accordion-default-heading-2">
-                  Components containing components
-                </span>
-              </h2>
-              <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
-                Shows which components contain other components
-              </div>
-            </div>
-            <div id="accordion-default-content-2" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-2">
-              <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>
-            </div>
-          </div>
-          <div class="gem-c-accordion__section ">
-            <div class="gem-c-accordion__section-header">
-              <h2 class="gem-c-accordion__section-heading">
-                <span class="gem-c-accordion__section-button" id="accordion-default-heading-2">
-                  Components by application
-                </span>
-              </h2>
-              <div class="gem-c-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-2">
-                Shows which applications use each component
+        <% 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>
-            </div>
-            <div id="accordion-default-content-2" class="gem-c-accordion__section-content" aria-labelledby="accordion-default-heading-2">
-              <% 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 %>
+          </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 %>
-            </div>
-          </div>
-        </div>
+            </dl>
+          <% else %>
+            <p class="govuk-body">Sorry, no applications found.</p>
+          <% end %>
+        <% 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
+              },
+            },
+          ]
+        %>
+
+        <%= render "govuk_publishing_components/components/accordion", {
+          items: component_items
+        } %>
       <% else %>
         <p class="govuk-body">No components found.</p>
       <% end %>