WIP

Gemfile

@@ -13,7 +13,7 @@ gem "gds-sso"
 gem "govspeak"
 gem "govuk_admin_template"
 gem "govuk_app_config"
-gem "govuk_publishing_components"
+gem "govuk_publishing_components", git: "https://github.com/alphagov/govuk_publishing_components.git", branch: "upgrade-to-govuk-frontend-5.1", ref: "29e8b077cdc6f69493805b67cbbec856dde008ea"
 gem "govuk_sidekiq"
 gem "has_scope"
 gem "html2text"

Gemfile.lock

@@ -1,3 +1,19 @@
+GIT
+  remote: https://github.com/alphagov/govuk_publishing_components.git
+  revision: 29e8b077cdc6f69493805b67cbbec856dde008ea
+  ref: 29e8b077cdc6f69493805b67cbbec856dde008ea
+  branch: upgrade-to-govuk-frontend-5.1
+  specs:
+    govuk_publishing_components (39.0.0)
+      govuk_app_config
+      govuk_personalisation (>= 0.7.0)
+      kramdown
+      plek
+      rails (>= 6)
+      rouge
+      sprockets (>= 3)
+      sprockets-rails
+
 GIT
   remote: https://github.com/alphagov/nested_form.git
   revision: ac43d8fe0cd3805b7309169ca8fbdd6a1527d9b5
@@ -225,15 +241,6 @@ GEM
     govuk_personalisation (0.16.0)
       plek (>= 1.9.0)
       rails (>= 6, < 8)
-    govuk_publishing_components (39.0.0)
-      govuk_app_config
-      govuk_personalisation (>= 0.7.0)
-      kramdown
-      plek
-      rails (>= 6)
-      rouge
-      sprockets (>= 3)
-      sprockets-rails
     govuk_schemas (5.0.4)
       faker (~> 3.4.1)
       json-schema (>= 2.8, < 4.4)
@@ -833,7 +840,7 @@ DEPENDENCIES
   govspeak
   govuk_admin_template
   govuk_app_config
-  govuk_publishing_components
+  govuk_publishing_components!
   govuk_schemas
   govuk_sidekiq
   govuk_test

app/assets/config/manifest.js

@@ -4,3 +4,4 @@
 
 //= link legacy-application.js
 //= link legacy-application.css
+//= link es6-components.js

app/assets/javascripts/application.js

@@ -1,4 +1,5 @@
 //= require_directory ./modules
 
-//= require govuk_publishing_components/dependencies
-//= require govuk_publishing_components/all_components
+//= require govuk_publishing_components/lib
+//= require govuk_publishing_components/components/govspeak
+//= require govuk_publishing_components/components/table

app/assets/javascripts/es6-components.js

@@ -0,0 +1,14 @@
+// These modules from govuk_publishing_components
+// depend on govuk-frontend modules. govuk-frontend
+// now targets browsers that support `type="module"`.
+//
+// To gracefully prevent execution of these scripts
+// on browsers that don't support ES6, this script
+// should be included in a `type="module"` script tag
+// which will ensure they are never loaded.
+
+//= require govuk_publishing_components/components/button
+//= require govuk_publishing_components/components/error-summary
+//= require govuk_publishing_components/components/layout-header
+//= require govuk_publishing_components/components/radio
+//= require govuk_publishing_components/components/skip-link

app/assets/stylesheets/application.scss

@@ -1,7 +1,32 @@
 $govuk-page-width: 1140px;
 
 // GOVUK Design System
-@import "govuk_publishing_components/all_components";
+@import 'govuk_publishing_components/govuk_frontend_support';
+@import 'govuk_publishing_components/component_support';
+@import 'govuk_publishing_components/components/button';
+@import 'govuk_publishing_components/components/date-input';
+@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/fieldset';
+@import 'govuk_publishing_components/components/govspeak';
+@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/lead-paragraph';
+@import 'govuk_publishing_components/components/notice';
+@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';
 @import "downtimes";
 @import "summary-card";
 @import "sidebar_components";

app/views/layouts/design_system.html.erb

@@ -7,6 +7,7 @@
 } do %>
 
   <% render "layouts/google_tag_manager" %>
+  <%= javascript_include_tag "es6-components", type: "module" %>
 
   <%= render "govuk_publishing_components/components/skip_link" %>
 

config/routes.rb

@@ -80,4 +80,5 @@
 
   mount GovukAdminTemplate::Engine, at: "/style-guide"
   mount Flipflop::Engine => "/flipflop"
+  mount GovukPublishingComponents::Engine, at: "/component-guide"
 end