alphagov · AshGDS · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Allow every component's CSS files to render on a component's preview page ([PR #5055](https://github.com/alphagov/govuk_publishing_components/pull/5055))
+
 ## 61.1.1
 
 * Adjustments to how Ga4FormTracker sets text on submit ([PR #4994](https://github.com/alphagov/govuk_publishing_components/pull/4994))

diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
@@ -26,7 +26,6 @@
 @import "components/contextual-guidance";
 @import "components/contextual-sidebar";
 @import "components/cookie-banner";
-@import "components/copy-to-clipboard";
 @import "components/cross-service-header";
 @import "components/date-input";
 @import "components/details";

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss b/app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
diff --git a/app/controllers/govuk_publishing_components/component_guide_controller.rb b/app/controllers/govuk_publishing_components/component_guide_controller.rb
@@ -35,13 +35,30 @@ def example
     def preview
       @component_examples = []
       @component_doc = component_docs.get(params[:component])
+
+      all_components = true if params[:all_components] == "true"
+      @all_gem_component_docs = []
+      if all_components
+
+        # We need a list of components with no CSS, as trying to render their CSS will result in a crash in the view
+        excluded_components = %w[contextual_breadcrumbs contextual_footer contextual_sidebar copy_to_clipboard google_tag_manager_script list machine_readable_metadata meta_tags]
+
+        # Remove components without CSS, and the current component. The current component is excluded as the view will handle rendering its CSS.
+        @all_gem_component_docs = gem_component_docs.all.reject { |component| component.id.in?(excluded_components) || component.id == @component_doc.id }
+
+        @render_component_first = params[:render_component_first] == "true" unless @component_doc.id.in?(excluded_components)
+      end
+
       @preview = true
 
       if params[:example].present?
         @component_examples.push(@component_doc.examples.find { |f| f.id == params[:example] })
       else
         @component_examples = @component_doc.examples
       end
+
+      percy = true if params[:percy] == "true"
+      @preview_title = preview_title(@component_doc, @component_examples, all_components, @render_component_first, percy)
     end
 
     def components_in_use_sass
@@ -168,5 +185,17 @@ def component_breadcrumb(component_doc, component_example = nil)
         h[:url] = component_doc_path(component_doc.id) if component_example
       end
     end
+
+    def preview_title(component, component_examples, _all_components, _render_component_first, percy)
+      title = [component.name]
+
+      if component_examples.length == 1 && !percy
+        title[0] << ": #{component_examples.first.name} preview"
+      end
+
+      title << "- #{GovukPublishingComponents::Config.component_guide_title}" unless percy
+
+      title.join(" ")
+    end
   end
 end
diff --git a/app/views/govuk_publishing_components/component_guide/preview.html.erb b/app/views/govuk_publishing_components/component_guide/preview.html.erb
@@ -1,9 +1,15 @@
 <% content_for :application_stylesheet do %>
+  <% if @render_component_first %>
+    <% add_gem_component_stylesheet(@component_doc.id.gsub("_", "-")) %>
+  <% end %>
+  <% @all_gem_component_docs.each do |component| %>
+    <% add_gem_component_stylesheet(component.id.gsub("_", "-")) %>
+  <% end %>
+
   <% if @component_doc.source == "application" && application_stylesheet_in_use? %>
     <%= render "application_stylesheet" %>
   <% end %>
 <% end %>
-
 <% @component_examples.each do |example| %>
   <div class="component-guide-preview-page">
     <% if @component_examples.length > 1 %>

diff --git a/app/views/layouts/govuk_publishing_components/application.html.erb b/app/views/layouts/govuk_publishing_components/application.html.erb
@@ -26,15 +26,7 @@
 <html lang="en" class="<%= "govuk-template" unless @preview %> govuk-template--rebranded">
   <head>
     <meta charset="utf-8">
-    <title>
-      <% if @preview %>
-        <%= @component_doc.name %><% if @component_examples.length == 1 %>:
-          <%= @component_examples.first.name %>
-        <% end %>
-        preview -
-      <% end %>
-      <%= yield :title %><% if content_for(:title) %> - <% end %><%= GovukPublishingComponents::Config.component_guide_title %>
-    </title>
+    <title><% if @preview %><%= @preview_title %><% else %><%= yield :title %><% if content_for(:title) %> - <% end %><%= GovukPublishingComponents::Config.component_guide_title %><% end %></title>
     <meta name="robots" content="noindex,nofollow,noimageindex">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%= csrf_meta_tags %>

diff --git a/spec/components/all_components_spec.rb b/spec/components/all_components_spec.rb
@@ -44,7 +44,7 @@
         expect(File).to exist(rspec_file)
       end
 
-      it "has a correctly named SCSS file", not_applicable: component_name.in?(%w[contextual_breadcrumbs contextual_footer contextual_sidebar google_tag_manager_script list machine_readable_metadata meta_tags]) do
+      it "has a correctly named SCSS file", not_applicable: component_name.in?(%w[contextual_breadcrumbs contextual_footer contextual_sidebar copy_to_clipboard google_tag_manager_script list machine_readable_metadata meta_tags]) do
         css_file = "#{__dir__}/../../app/assets/stylesheets/govuk_publishing_components/components/_#{component_name.tr('_', '-')}.scss"
 
         expect(File).to exist(css_file)

diff --git a/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb b/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb
@@ -20,7 +20,7 @@ def request
     end
 
     it "detect the total number of stylesheet paths" do
-      expect(get_component_css_paths.count).to be(88)
+      expect(get_component_css_paths.count).to be(87)
     end
 
     it "initialize empty asset helper" do

diff --git a/spec/visual_regression_tests/all_components_spec.rb b/spec/visual_regression_tests/all_components_spec.rb
@@ -25,8 +25,10 @@
 
     component_links = find("#list-all-components-in-the-gem")
       .all("a")
-      .map do |link|
-        URI("#{link[:href]}/preview")
+      .flat_map do |link|
+        [
+          URI("#{link[:href]}/preview?percy=true&all_components=true"),
+        ]
       end
 
     # The public layout component has two previews - one with multiple versions
@@ -38,11 +40,9 @@
 
       visit(link)
 
-      name = title.gsub(/(: Default|) preview - Component Guide/, "")
-
       page.find(:css, "body > #wrapper", wait: 10)
 
-      page.percy_snapshot(name)
+      page.percy_snapshot(title)
     end
 
     travel_back