Merge pull request #2225 from alphagov/govuk-frontend-v5

Govuk frontend v5

Gemfile.lock

@@ -225,7 +225,7 @@ GEM
     govuk_personalisation (0.16.0)
       plek (>= 1.9.0)
       rails (>= 6, < 8)
-    govuk_publishing_components (39.2.4)
+    govuk_publishing_components (40.0.0)
       govuk_app_config
       govuk_personalisation (>= 0.7.0)
       kramdown
@@ -416,7 +416,7 @@ GEM
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-active_support (~> 0.1)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-active_job (0.7.2)
+    opentelemetry-instrumentation-active_job (0.7.3)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
     opentelemetry-instrumentation-active_model_serializers (0.20.1)
@@ -666,7 +666,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
     rinku (2.0.6)
     rouge (4.3.0)

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,6 @@
 //= 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 "popular_links";

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

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

test/integration/homepage_popular_links_test.rb

@@ -26,7 +26,7 @@ class HomepagePopularLinksTest < JavascriptIntegrationTest
       assert page.has_text?("Edition")
       assert page.has_text?(@popular_links.version_number)
       assert page.has_text?("Status")
-      assert page.has_text?("PUBLISHED")
+      assert page.has_text?("Published")
       assert page.has_css?(".govuk-tag--green")
     end
 
@@ -42,7 +42,7 @@ class HomepagePopularLinksTest < JavascriptIntegrationTest
     should "render new draft popular links with edit option when 'Create new edition' button is clicked" do
       click_button("Create new edition")
       within(:css, ".govuk-tag--yellow") do
-        assert page.has_content?("DRAFT")
+        assert page.has_content?("Draft")
       end
     end
   end
@@ -54,7 +54,7 @@ class HomepagePopularLinksTest < JavascriptIntegrationTest
       assert page.has_text?("Edition")
       assert page.has_text?(@popular_links.version_number)
       assert page.has_text?("Status")
-      assert page.has_text?("DRAFT")
+      assert page.has_text?("Draft")
       assert page.has_css?(".govuk-tag--yellow")
       assert page.has_text?("Edit popular links")
     end
@@ -64,15 +64,15 @@ class HomepagePopularLinksTest < JavascriptIntegrationTest
       assert row[0].has_text?("Edition")
       assert row[0].has_text?("1")
       assert row[1].has_text?("Status")
-      assert row[1].has_text?("PUBLISHED")
+      assert row[1].has_text?("Published")
 
       click_button("Create new edition")
 
       row = find_all(".govuk-summary-list__row")
       assert row[0].has_text?("Edition")
       assert row[0].has_text?("2")
       assert row[1].has_text?("Status")
-      assert row[1].has_text?("DRAFT")
+      assert row[1].has_text?("Draft")
     end
   end
 
@@ -143,7 +143,7 @@ class HomepagePopularLinksTest < JavascriptIntegrationTest
     should "publish latest edition when 'Publish' is clicked" do
       click_button("Publish")
 
-      assert page.has_text?("PUBLISHED")
+      assert page.has_text?("Published")
       assert page.has_text?("Popular links successfully published.")
     end
   end