Merge pull request #3409 from alphagov/type-module-changes

Use type=module for application.js

Gemfile.lock

@@ -191,7 +191,7 @@ GEM
     govuk_personalisation (0.16.0)
       plek (>= 1.9.0)
       rails (>= 6, < 8)
-    govuk_publishing_components (41.1.1)
+    govuk_publishing_components (42.0.0)
       govuk_app_config
       govuk_personalisation (>= 0.7.0)
       kramdown

app/assets/javascripts/analytics-ga4/ga4-finder-tracker.js

@@ -1,4 +1,3 @@
-//= require govuk_publishing_components/vendor/polyfills-govuk-frontend-v4/Element/prototype/closest.js
 ;(function (global) {
   'use strict'
 

app/assets/stylesheets/components/_expander.scss

@@ -19,7 +19,7 @@
   }
 }
 
-.js-enabled {
+.govuk-frontend-supported {
   .app-c-expander__heading {
     position: relative;
     padding: 10px 8px 5px 43px;

app/assets/stylesheets/components/_mobile-filters.scss

@@ -7,7 +7,7 @@
 .app-mobile-filters-link {
   display: none;
 
-  .js-enabled & {
+  .govuk-frontend-supported & {
     display: inline-block;
     margin-left: govuk-spacing(3);
     margin-bottom: govuk-spacing(4);
@@ -40,7 +40,7 @@
 
 // facet container should be hidden on mobile if
 // javascript is available
-.js-enabled .facets {
+.govuk-frontend-supported .facets {
   @include govuk-media-query($until: tablet) {
     display: none;
 
@@ -70,7 +70,7 @@
 // all filter styles are applicable on mobile only
 // and when javascript is enabled
 @include govuk-media-query($until: tablet) {
-  .js-enabled {
+  .govuk-frontend-supported {
     .facets__box {
       border-left: 5px solid #b1b4b6;
       padding-left: govuk-spacing(2);

app/assets/stylesheets/finder_frontend.scss

@@ -42,7 +42,7 @@ mark {
 .filter-form {
   position: relative;
 
-  .js-enabled & .button__wrapper {
+  .govuk-frontend-supported & .button__wrapper {
     display: none;
   }
 
@@ -201,7 +201,7 @@ mark {
   border-radius: govuk-em(5, 16px);
   background-color: govuk-colour("light-grey");
 
-  .js-enabled & {
+  .govuk-frontend-supported & {
     padding: govuk-em(8, 16px) govuk-em(8, 16px) govuk-em(8, 16px) govuk-em(24, 16px);
   }
 }
@@ -213,7 +213,7 @@ mark {
   position: relative;
   z-index: 1;
 
-  .js-enabled & {
+  .govuk-frontend-supported & {
     margin-left: govuk-em(5, 16px);
   }
 }
@@ -236,7 +236,7 @@ mark {
   background: none;
   border: 0;
 
-  .js-enabled & {
+  .govuk-frontend-supported & {
     display: inline-block;
     border: 1px solid transparent;
 

app/views/development/index.html.erb

@@ -1,15 +1,17 @@
 <% content_for :title, "Finder Frontend" %>
 
-<%= render "govuk_publishing_components/components/title", title: "Finder Frontend" %>
+<div id="content">
+  <%= render "govuk_publishing_components/components/title", title: "Finder Frontend" %>
 
-<%= render "govuk_publishing_components/components/govspeak" do %>
-  <p>This page is only visible in development and Heroku.</p>
+  <%= render "govuk_publishing_components/components/govspeak" do %>
+    <p>This page is only visible in development and Heroku.</p>
 
-  <p>The following pages are rendered by this application:</p>
+    <p>The following pages are rendered by this application:</p>
 
-  <ul>
-  <% @rendered_pages.each do |page| %>
-    <li><%= link_to page.fetch("title"), page.fetch("link") %></li>
+    <ul>
+    <% @rendered_pages.each do |page| %>
+      <li><%= link_to page.fetch("title"), page.fetch("link") %></li>
+    <% end %>
+    </ul>
   <% end %>
-  </ul>
-<% end %>
+</div>

app/views/layouts/development_layout.html.erb

@@ -15,7 +15,7 @@
     <%=
       render_component_stylesheets
     %>
-    <%= javascript_include_tag "application", integrity: false %>
+    <%= javascript_include_tag "application", integrity: false, type: "module" %>
     <%= javascript_include_tag 'es6-components', integrity: false, type: "module" %>
     <meta name="robots" content="noindex">
   </head>

app/views/layouts/finder_layout.html.erb

@@ -15,8 +15,8 @@
     <%=
       render_component_stylesheets
     %>
-    <%= javascript_include_tag 'test-dependencies.js' if Rails.env.test? %>
-    <%= javascript_include_tag 'application', integrity: false %>
+    <%= javascript_include_tag 'test-dependencies.js', type: "module" if Rails.env.test? %>
+    <%= javascript_include_tag 'application', integrity: false, type: "module" %>
     <%= javascript_include_tag 'es6-components', integrity: false, type: "module" %>
     <%= csrf_meta_tags %>
     <%= yield :head %>

app/views/layouts/search_layout.html.erb

@@ -11,7 +11,7 @@
     <%=
       render_component_stylesheets
     %>
-    <%= javascript_include_tag 'application', integrity: false %>
+    <%= javascript_include_tag 'application', integrity: false, type: "module" %>
     <% if @content_item %>
       <%= render 'govuk_publishing_components/components/meta_tags', content_item: @content_item.as_hash %>
     <% end %>

features/step_definitions/filtering_steps.rb

@@ -668,7 +668,7 @@
 end
 
 When(/^I click the (.*) remove control$/) do |filter|
-  expect(page).to have_css(".js-enabled")
+  expect(page).to have_css(".govuk-frontend-supported")
 
   button = page.find("span[class='facet-tag__text']", text: filter).sibling("button[data-module='remove-filter-link']")
   button.click

spec/javascripts/live_search_spec.js

@@ -236,7 +236,7 @@ describe('liveSearch', function () {
   })
 
   it('should show the filter results button if the GOVUK.support.history returns false', function () {
-    // Hide the filter button (this is done in the CSS under the .js-enabled selector normally)
+    // Hide the filter button (this is done in the CSS under the .govuk-frontend-supported selector normally)
     $form.find('.js-live-search-fallback').hide()
     expect($form.find('.js-live-search-fallback').is(':visible')).toBe(false)
     GOVUK.support.history = function () { return false }