Preview v5: Skip initialisation when GOV.UK Frontend is not supported

src/javascripts/components/back-to-top.mjs

@@ -3,7 +3,7 @@ class BackToTop {
    * @param {Element} $module - HTML element
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

src/javascripts/components/cookie-banner.mjs

@@ -12,7 +12,7 @@ class CookieBanner {
    * @param {Element} $module - HTML element
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

src/javascripts/components/cookies-page.mjs

@@ -5,7 +5,7 @@ class CookiesPage {
    * @param {Element} $module - HTML element
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

src/javascripts/components/copy.mjs

@@ -5,7 +5,7 @@ class Copy {
    * @param {Element} $module - HTML element
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

src/javascripts/components/example-page.mjs

@@ -3,7 +3,7 @@ class ExamplePage {
    * @param {Document} $module - HTML document
    */
   constructor ($module) {
-    if (!($module instanceof Document)) {
+    if (!($module instanceof Document) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

src/javascripts/components/example.mjs

@@ -13,7 +13,7 @@ class Example {
    * @param {Element} $module - HTML element
    */
   constructor ($module) {
-    if (!($module instanceof HTMLIFrameElement)) {
+    if (!($module instanceof HTMLIFrameElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return
     }
 

src/javascripts/components/navigation.mjs

@@ -9,7 +9,7 @@ class Navigation {
    * @param {Document} $module - HTML document
    */
   constructor ($module) {
-    if (!($module instanceof Document)) {
+    if (!($module instanceof Document) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

src/javascripts/components/search.mjs

@@ -36,7 +36,7 @@ class Search {
    * @param {Element} $module - HTML element
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

src/javascripts/components/tabs.mjs

@@ -14,7 +14,7 @@ class AppTabs {
    * @param {Element} $module - HTML element
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

src/styles/page-template/index.md

@@ -12,7 +12,7 @@ Use this template to keep your pages consistent with the rest of GOV.UK.
 
 This page template combines the boilerplate markup and [components](/components/) needed for a basic GOV.UK page. It includes:
 
-- JavaScript that adds a `.js-enabled` class, which is required by components with JavaScript behaviour
+- JavaScript that adds a `.govuk-frontend-supported` class, which is required by components with JavaScript behaviour
 - the [skip link](/components/skip-link/), [header](/components/header/) and [footer](/components/footer/) components
 - the favicon, and other related theme icons
 

src/stylesheets/components/_back-to-top.scss

@@ -12,14 +12,14 @@
     margin-bottom: govuk-spacing(8);
   }
 
-  .js-enabled .app-back-to-top--fixed {
+  .govuk-frontend-supported .app-back-to-top--fixed {
     position: fixed;
     top: calc(100% - #{govuk-spacing(8)});
     bottom: auto;
     left: auto;
   }
 
-  .js-enabled .app-back-to-top--hidden .app-back-to-top__link {
+  .govuk-frontend-supported .app-back-to-top--hidden .app-back-to-top__link {
     @include govuk-visually-hidden-focusable;
   }
 }

src/stylesheets/components/_navigation.scss

@@ -78,12 +78,12 @@
   list-style: none;
 }
 
-.js-enabled .app-navigation__subnav--active {
+.govuk-frontend-supported .app-navigation__subnav--active {
   display: block;
 }
 
 .app-navigation__subnav,
-.js-enabled .app-navigation__subnav--active {
+.govuk-frontend-supported .app-navigation__subnav--active {
   @include govuk-media-query($from: tablet) {
     display: none;
   }

src/stylesheets/components/_site-search.scss

@@ -21,7 +21,7 @@ $icon-size: 40px;
   margin-bottom: govuk-spacing(2);
   float: left;
 
-  .js-enabled & {
+  .govuk-frontend-supported & {
     display: block;
   }
 
@@ -37,7 +37,7 @@ $icon-size: 40px;
     float: right;
     text-align: right;
 
-    .js-enabled & {
+    .govuk-frontend-supported & {
       text-align: left;
     }
   }
@@ -205,7 +205,7 @@ $icon-size: 40px;
   @include govuk-media-query($from: tablet) {
     display: inline-block;
 
-    .js-enabled & {
+    .govuk-frontend-supported & {
       display: none;
     }
   }

src/stylesheets/main.scss

@@ -275,7 +275,7 @@ pre code {
     outline: $govuk-focus-width solid $govuk-focus-colour;
   }
 
-  .js-enabled [data-module="app-copy"] & {
+  .govuk-frontend-supported [data-module="app-copy"] & {
     padding-top: 45px; // Allow extra space for the copy code button
   }
 }