Merge pull request #3801 from alphagov/govuk-frontend-supported

Add class `.govuk-frontend-supported` for ES modules support
alphagov · Jun 19, 2023 · 3975de3 · 3975de3
2 parents e614b41 + 7e1d0f4
commit 3975de3
Show file tree

Hide file tree

Showing 22 changed files with 33 additions and 27 deletions.
diff --git a/docs/contributing/coding-standards/js.md b/docs/contributing/coding-standards/js.md
@@ -21,9 +21,7 @@ export class Example {
    * @param {Element} $module - HTML element to use for component
    */
   constructor ($module) {
-    $module = undefined
-
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/docs/examples/webpack/src/index.html b/docs/examples/webpack/src/index.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="/assets/stylesheets/app.min.css">
   </head>
   <body class="govuk-template__body">
-    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
 
     <div class="govuk-width-container">
       <main class="govuk-main-wrapper" id="main-content" role="main">

diff --git a/packages/govuk-frontend-review/src/views/tests/boilerplate.njk b/packages/govuk-frontend-review/src/views/tests/boilerplate.njk
@@ -5,8 +5,8 @@
     <title>Test Boilerplate</title>
     <link rel="stylesheet" href="/stylesheets/app.min.css">
   </head>
-  <body>
-    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+  <body class="govuk-template__body">
+    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
     <h1 class="govuk-heading-l">Test boilerplate</h1>
     <p class="govuk-body">
       Used during testing to inject rendered components and test specific configurations

diff --git a/packages/govuk-frontend/src/govuk/all.mjs b/packages/govuk-frontend/src/govuk/all.mjs
@@ -22,6 +22,11 @@ import { Tabs } from './components/tabs/tabs.mjs'
 function initAll (config) {
   config = typeof config !== 'undefined' ? config : {}
 
+  // Skip initialisation when GOV.UK Frontend is not supported
+  if (!document.body.classList.contains('govuk-frontend-supported')) {
+    return
+  }
+
   // Allow the user to initialise GOV.UK Frontend in only certain sections of the page
   // Defaults to the entire document if nothing is set.
   const $scope = config.scope instanceof HTMLElement ? config.scope : document

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/_index.scss b/packages/govuk-frontend/src/govuk/components/accordion/_index.scss
@@ -35,8 +35,8 @@
     margin-bottom: 0;
   }
 
-  // JavaScript enabled
-  .js-enabled {
+  // GOV.UK Frontend JavaScript enabled
+  .govuk-frontend-supported {
     .govuk-accordion {
       // Border at the bottom of the whole accordion
       border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -37,7 +37,7 @@ export class Accordion {
    * @param {AccordionConfig} [config] - Accordion config
    */
   constructor ($module, config) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -14,7 +14,7 @@ export class Button {
    * @param {ButtonConfig} [config] - Button config
    */
   constructor ($module, config) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -53,7 +53,7 @@ export class CharacterCount {
    * @param {CharacterCountConfig} [config] - Character count config
    */
   constructor ($module, config) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.unit.test.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.unit.test.mjs
@@ -8,6 +8,9 @@ describe('CharacterCount', () => {
     $container = document.createElement('div')
     $textarea = document.createElement('textarea')
 
+    // Component checks that GOV.UK Frontend is supported
+    document.body.classList.add('govuk-frontend-supported')
+
     // Component checks that required elements are present
     $textarea.classList.add('govuk-js-character-count')
     $container.appendChild($textarea)

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss
@@ -170,7 +170,7 @@
     padding-left: $conditional-padding-left;
     border-left: $conditional-border-width solid $govuk-border-colour;
 
-    .js-enabled &--hidden {
+    .govuk-frontend-supported &--hidden {
       display: none;
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/details/details.mjs b/packages/govuk-frontend/src/govuk/components/details/details.mjs
@@ -18,7 +18,7 @@ export class Details {
    * @param {Element} $module - HTML element to use for details
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
@@ -20,7 +20,7 @@ export class ErrorSummary {
     // To avoid breaking further JavaScript initialisation
     // we need to safeguard against this so things keep
     // working the same now we read the elements data attributes
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/header/_index.scss b/packages/govuk-frontend/src/govuk/components/header/_index.scss
@@ -202,12 +202,12 @@
       top: govuk-spacing(3);
     }
 
-    .js-enabled & {
+    .govuk-frontend-supported & {
       display: block;
     }
 
     &[hidden],
-    .js-enabled &[hidden] {
+    .govuk-frontend-supported &[hidden] {
       display: none;
     }
   }

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -6,7 +6,7 @@ export class Header {
    * @param {Element} $module - HTML element to use for header
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
@@ -10,7 +10,7 @@ export class NotificationBanner {
    * @param {NotificationBannerConfig} [config] - Notification banner config
    */
   constructor ($module, config) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/radios/_index.scss b/packages/govuk-frontend/src/govuk/components/radios/_index.scss
@@ -186,7 +186,7 @@
     padding-left: $conditional-padding-left;
     border-left: $conditional-border-width solid $govuk-border-colour;
 
-    .js-enabled &--hidden {
+    .govuk-frontend-supported &--hidden {
       display: none;
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
@@ -6,7 +6,7 @@ export class Radios {
    * @param {Element} $module - HTML element to use for radios
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
@@ -7,7 +7,7 @@ export class SkipLink {
    * @param {Element} $module - HTML element to use for skip link
    */
   constructor ($module) {
-    if (!($module instanceof HTMLAnchorElement)) {
+    if (!($module instanceof HTMLAnchorElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/tabs/_index.scss b/packages/govuk-frontend/src/govuk/components/tabs/_index.scss
@@ -41,8 +41,8 @@
     @include govuk-responsive-margin(8, "bottom");
   }
 
-  // JavaScript enabled
-  .js-enabled {
+  // GOV.UK Frontend JavaScript enabled
+  .govuk-frontend-supported {
 
     @include govuk-media-query($from: tablet) {
       .govuk-tabs__list {

diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -6,7 +6,7 @@ export class Tabs {
    * @param {Element} $module - HTML element to use for tabs
    */
   constructor ($module) {
-    if (!($module instanceof HTMLElement)) {
+    if (!($module instanceof HTMLElement) || !document.body.classList.contains('govuk-frontend-supported')) {
       return this
     }
 

diff --git a/packages/govuk-frontend/src/govuk/template.njk b/packages/govuk-frontend/src/govuk/template.njk
@@ -28,7 +28,7 @@
     {% endif %}
   </head>
   <body class="govuk-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-    <script{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    <script{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
     {% block bodyStart %}{% endblock %}
 
     {% block skipLink %}

diff --git a/packages/govuk-frontend/src/govuk/template.test.js b/packages/govuk-frontend/src/govuk/template.test.js
@@ -161,7 +161,7 @@ describe('Template', () => {
       expect($('body > div:last-of-type').text()).toEqual('bodyEnd')
     })
 
-    describe('inline script that adds "js-enabled" class', () => {
+    describe('inline script that adds "js-enabled" and "govuk-frontend-supported" classes', () => {
       it('should match the hash published in docs', () => {
         const $ = renderTemplate()
         const script = $('body > script').first().html()
@@ -171,7 +171,7 @@ describe('Template', () => {
 
         // A change to the inline script would be a breaking change, and it would also require
         // updating the hash published in https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#if-your-javascript-isn-t-working-properly
-        expect(`sha256-${hash}`).toEqual('sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=')
+        expect(`sha256-${hash}`).toEqual('sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=')
       })
       it('should not have a nonce attribute by default', () => {
         const $ = renderTemplate()