diff --git a/packages/govuk-frontend-review/src/views/tests/boilerplate.njk b/packages/govuk-frontend-review/src/views/tests/boilerplate.njk index c4cad6f8f4..e8b9c179ed 100644 --- a/packages/govuk-frontend-review/src/views/tests/boilerplate.njk +++ b/packages/govuk-frontend-review/src/views/tests/boilerplate.njk @@ -5,8 +5,8 @@ Test Boilerplate - - + +

Test boilerplate

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 index ba613c4de1..42d15e33a5 100644 --- 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 index 4c14484523..17c34fa15e 100644 --- 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 index 52140baf8a..59ebdf1fa4 100644 --- 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 index ababd66fcf..3d99d18c43 100644 --- 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 index a77aea5a2d..3e032755c9 100644 --- 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 index 1b8f95cd7d..40809d91cc 100644 --- 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 index a65ab2d2ec..8ccb0e846a 100644 --- 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 index ee4b52023c..c65ca32844 100644 --- 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 index 4db9559819..d54a39ecab 100644 --- 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 index 89e86e89ba..a7d49b91e1 100644 --- 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 index 7dfa4cf1e2..a25e598f67 100644 --- 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 index 033c51de75..6d4a81d51c 100644 --- 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 index f5624694d7..9918366e04 100644 --- 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 index a84c0f19a3..830652c88d 100644 --- 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 index 78cb9ede66..ec06ddd48e 100644 --- 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 index 79e5137c01..cf755d69e1 100644 --- 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 index b33aa9b043..056bf9990d 100644 --- 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 index 67bcdd1240..71d51b36a5 100644 --- a/packages/govuk-frontend/src/govuk/template.njk +++ b/packages/govuk-frontend/src/govuk/template.njk @@ -28,7 +28,7 @@ {% endif %} - document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled'); + document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : ''); {% 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 index 149060da71..a08a32c699 100644 --- 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()