govuk_publishing_components 23.15.0 → 24.3.0

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -1,12 +1,12 @@
 .gem-c-success-alert {
-  color: $gem-text-colour;
-  padding: $gem-spacing-scale-3;
-  border: $gem-border-width-mobile solid $gem-success-colour;
+  color: $govuk-text-colour;
+  padding: govuk-spacing(3);
+  border: $govuk-border-width-narrow solid $govuk-success-colour;
   @include govuk-responsive-margin(8, "bottom");
 
   @include govuk-media-query($from: tablet) {
-    padding: $gem-spacing-scale-4;
-    border-width: $gem-border-width-tablet;
+    padding: govuk-spacing(4);
+    border-width: $govuk-border-width;
   }
 }
 
@@ -17,10 +17,10 @@
 
 .gem-c-success-summary__title {
   margin-top: 0;
-  margin-bottom: $gem-spacing-scale-3;
+  margin-bottom: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-bottom: $gem-spacing-scale-4;
+    margin-bottom: govuk-spacing(4);
   }
 
   @include govuk-font(24, $weight: bold);
@@ -32,5 +32,5 @@
 }
 
 .gem-c-success-alert:focus {
-  outline: $gem-focus-width solid $gem-focus-colour;
+  outline: $govuk-focus-width solid $govuk-focus-colour;
 }

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

@@ -25,11 +25,6 @@
       float: none;
       width: 100%;
 
-      h3 {
-        @include govuk-font($size: 19, $weight: bold);
-        margin-bottom: 5px;
-      }
-
       .email-url-number {
         .email {
           word-wrap: break-word;

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

@@ -2,30 +2,38 @@
 //
 // 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.
-.govuk-accordion__section-content {
+.gem-c-accordion__section-content {
   display: block !important; // stylelint-disable-line declaration-no-important
 }
 
 // Change the colour from the blue link colour to black.
-.govuk-accordion__section-button {
+.gem-c-accordion__section-button {
   color: govuk-colour("black") !important; // stylelint-disable-line declaration-no-important
 }
 
+// Removing spacing
+.gem-c-accordion__section-header {
+  padding-bottom: govuk-spacing(1);
+}
+
 // Change the summary subheading size.
-.govuk-accordion__section-summary {
+.gem-c-accordion__section-summary {
   @include govuk-typography-common;
   @include govuk-typography-responsive($size: 16, $important: true);
+}
 
-  .govuk-accordion--condensed & {
-    @include govuk-typography-responsive($size: 14, $important: true);
-  }
+// Hide the unusable "Show all sections" button and the "Chevron" icons.
+.gem-c-accordion__open-all,
+.gem-c-accordion__icon,
+.gem-c-accordion__toggle-link {
+  display: none !important; // stylelint-disable-line declaration-no-important
 }
 
-// Hide the unusable "Open all" button and the "+" icons.
-.govuk-accordion__open-all,
-.govuk-accordion__icon {
+// Hide all hidden content
+.gem-c-accordion .govuk-visually-hidden {
   display: none !important; // stylelint-disable-line declaration-no-important
 }

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

@@ -1,7 +1,7 @@
 $grey-2: #bfc1c3;
 $white: #ffffff;
 $number-circle-size: 35px;
-$stroke-width: 3px;
+$stroke-width: 1px;
 
 .gem-c-step-nav:not(.gem-c-step-nav--large),
 .gem-c-step-nav__controls,
@@ -63,7 +63,7 @@ $stroke-width: 3px;
 }
 
 .gem-c-step-nav__circle--number {
-  border: solid 3px $grey-2;
+  border: solid 1px $grey-2;
 }
 
 .gem-c-step-nav__step,

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_-]+(?=['"])/

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

@@ -39,98 +39,105 @@
           </div>
         </details>
 
-        <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-with-summary-sections">
-          <% @applications.each_with_index do |application, index| %>
-            <div class="govuk-accordion__section ">
-              <div class="govuk-accordion__section-header">
-                <h2 class="govuk-accordion__section-heading">
-                  <span class="govuk-accordion__section-button" id="accordion-with-summary-sections-heading-<%= index %>">
-                    <%= application[:name] %>
-                  </span>
-                </h2>
-                <div class="govuk-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="govuk-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="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
-          <div class="govuk-accordion__section ">
-            <div class="govuk-accordion__section-header">
-              <h2 class="govuk-accordion__section-heading">
-                <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
-                  Component files
-                </span>
-              </h2>
-              <div class="govuk-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="govuk-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="govuk-accordion__section ">
-            <div class="govuk-accordion__section-header">
-              <h2 class="govuk-accordion__section-heading">
-                <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
-                  Components containing components
-                </span>
-              </h2>
-              <div class="govuk-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="govuk-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="govuk-accordion__section ">
-            <div class="govuk-accordion__section-header">
-              <h2 class="govuk-accordion__section-heading">
-                <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
-                  Components by application
-                </span>
-              </h2>
-              <div class="govuk-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="govuk-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 %>