Merge pull request #1261 from alphagov/pubcomp40

Upgrade and improve use of GOV.UK Publishing Components

Gemfile.lock

@@ -162,7 +162,7 @@ GEM
     govuk_personalisation (0.16.0)
       plek (>= 1.9.0)
       rails (>= 6, < 8)
-    govuk_publishing_components (39.2.2)
+    govuk_publishing_components (40.0.0)
       govuk_app_config
       govuk_personalisation (>= 0.7.0)
       kramdown
@@ -418,7 +418,7 @@ GEM
     opentelemetry-instrumentation-que (0.8.2)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-racecar (0.3.3)
+    opentelemetry-instrumentation-racecar (0.3.4)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
     opentelemetry-instrumentation-rack (0.24.5)
@@ -554,7 +554,7 @@ GEM
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 4.0)
       netrc (~> 0.8)
-    rexml (3.3.1)
+    rexml (3.3.2)
       strscan
     rouge (4.3.0)
     rspec-core (3.13.0)

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../builds
 //= link application.js
+//= link es6-components.js

app/assets/javascripts/application.js

@@ -1,3 +1,3 @@
-//= require_tree .
-//= require govuk_publishing_components/dependencies
-//= require govuk_publishing_components/all_components
+// This file is required to exist by GOV.UK Publishing Components `layout_for_admin` component but
+// currently doesn't need to contain any code. See `es6-components.js` where component JS is
+// included.

app/assets/javascripts/es6-components.js

@@ -0,0 +1,7 @@
+//= require govuk_publishing_components/lib
+//= require govuk_publishing_components/components/button
+//= require govuk_publishing_components/components/checkboxes
+//= require govuk_publishing_components/components/error-summary
+//= require govuk_publishing_components/components/layout-header
+//= require govuk_publishing_components/components/skip-link
+//= require govuk_publishing_components/components/table

app/assets/stylesheets/application.scss

@@ -1,4 +1,26 @@
-@import "govuk_publishing_components/all_components";
+@import 'govuk_publishing_components/govuk_frontend_support';
+@import 'govuk_publishing_components/component_support';
+@import 'govuk_publishing_components/components/breadcrumbs';
+@import 'govuk_publishing_components/components/button';
+@import 'govuk_publishing_components/components/checkboxes';
+@import 'govuk_publishing_components/components/document-list';
+@import 'govuk_publishing_components/components/error-alert';
+@import 'govuk_publishing_components/components/error-message';
+@import 'govuk_publishing_components/components/error-summary';
+@import 'govuk_publishing_components/components/heading';
+@import 'govuk_publishing_components/components/hint';
+@import 'govuk_publishing_components/components/input';
+@import 'govuk_publishing_components/components/label';
+@import 'govuk_publishing_components/components/layout-footer';
+@import 'govuk_publishing_components/components/layout-for-admin';
+@import 'govuk_publishing_components/components/layout-header';
+@import 'govuk_publishing_components/components/search';
+@import 'govuk_publishing_components/components/skip-link';
+@import 'govuk_publishing_components/components/success-alert';
+@import 'govuk_publishing_components/components/summary-list';
+@import 'govuk_publishing_components/components/table';
+@import 'govuk_publishing_components/components/textarea';
+@import 'govuk_publishing_components/components/title';
 
 .actions {
   margin-bottom: govuk-spacing(6);

config/application.rb

@@ -39,12 +39,6 @@ class Application < Rails::Application
     # config.time_zone = "Central Time (US & Canada)"
     # config.eager_load_paths << Rails.root.join("extras")
 
-    # Using a sass css compressor causes a scss file to be processed twice
-    # (once to build, once to compress) which breaks the usage of "unquote"
-    # to use CSS that has same function names as SCSS such as max.
-    # https://github.com/alphagov/govuk-frontend/issues/1350
-    config.assets.css_compressor = nil
-
     # Set asset path to be application specific so that we can put all GOV.UK
     # assets into an S3 bucket and distinguish app by path.
     config.assets.prefix = "/assets/search-admin"

config/environments/development.rb

@@ -73,4 +73,9 @@
 
   # Ensure latest assets are always available when using Dart SASS in watch mode
   config.assets.digest = false
+
+  # Force all the stylesheets from the `govuk_publishing_components` gem to be included in Dart Sass
+  # builds so we can use the component guide (without this, Sprockets will try and use the legacy
+  # SassC compiler to build them which we no longer include in this app)
+  config.dartsass.builds.merge!(GovukPublishingComponents::Config.all_stylesheets)
 end

config/initializers/govuk_publishing_components.rb

@@ -0,0 +1,3 @@
+GovukPublishingComponents.configure do |config|
+  config.use_es6_components = true
+end

config/routes.rb

@@ -4,6 +4,7 @@
   get "/healthcheck/ready", to: GovukHealthcheck.rack_response(
     GovukHealthcheck::ActiveRecord,
   )
+  mount GovukPublishingComponents::Engine, at: "/component-guide" if Rails.env.development?
 
   resources :boosts
   resources :recommended_links, path: "/recommended-links"