Renames js- css prefix to govuk-js-

CHANGELOG.md

@@ -4,6 +4,23 @@
 
 💥 Breaking changes:
 
+- Renamed css class names `js-character-count` and `js-header-toggle`
+
+  Fixes issues with govuk-fronted javascript clashing with govuk-template/govuk-element and potentially other third-party javascript libraries using `js-` class names as hooks.
+
+  HTML markup will only need to change if nunjucks macros are not being used.
+  Update it use `govuk-js-character-count` or `govuk-js-header-toggle`.
+
+  Eg. `<textarea class="govuk-textarea govuk-js-character-count"></textarea>`
+
+  if you have any custom JavaScript relying on either `js-character-count` or `js-header-toggle`, you will
+  need to update it use `govuk-js-character-count` or `govuk-js-header-toggle`.
+
+  Eg. `document.querySelectorAll('.govuk-js-character-count')`
+  Eg. `document.querySelectorAll('.govuk-js-header-toggle')`
+
+  ([PR #1444](https://github.com/alphagov/govuk-frontend/pull/1444))
+
 - Make radios and checkboxes components easier to link to from the error summary component
 
   You should check that clicking a link from the error summary to radios or checkboxes results in the first input being focused.

src/components/character-count/character-count.js

@@ -4,7 +4,7 @@ import '../../vendor/polyfills/Element/prototype/classList'
 
 function CharacterCount ($module) {
   this.$module = $module
-  this.$textarea = $module.querySelector('.js-character-count')
+  this.$textarea = $module.querySelector('.govuk-js-character-count')
 }
 
 CharacterCount.prototype.defaults = {

src/components/character-count/character-count.test.js

@@ -50,7 +50,7 @@ describe('Character count', () => {
 
       it('counts down to the character limit', async () => {
         await goToExample()
-        await page.type('.js-character-count', 'A')
+        await page.type('.govuk-js-character-count', 'A')
 
         const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
 
@@ -59,7 +59,7 @@ describe('Character count', () => {
 
       it('uses the singular when there is only one character remaining', async () => {
         await goToExample()
-        await page.type('.js-character-count', 'A'.repeat(9))
+        await page.type('.govuk-js-character-count', 'A'.repeat(9))
 
         const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
 
@@ -69,7 +69,7 @@ describe('Character count', () => {
       describe('when the character limit is exceeded', () => {
         beforeAll(async () => {
           await goToExample()
-          await page.type('.js-character-count', 'A'.repeat(11))
+          await page.type('.govuk-js-character-count', 'A'.repeat(11))
         })
 
         it('shows the number of characters over the limit', async () => {
@@ -78,14 +78,14 @@ describe('Character count', () => {
         })
 
         it('uses the plural when the limit is exceeded by 2 or more', async () => {
-          await page.type('.js-character-count', 'A')
+          await page.type('.govuk-js-character-count', 'A')
 
           const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
           expect(message).toEqual('You have 2 characters too many')
         })
 
         it('adds error styles to the textarea', async () => {
-          const textareaClasses = await page.$eval('.js-character-count', el => el.className)
+          const textareaClasses = await page.$eval('.govuk-js-character-count', el => el.className)
           expect(textareaClasses).toContain('govuk-textarea--error')
         })
 
@@ -106,7 +106,7 @@ describe('Character count', () => {
         })
 
         it('adds error styles to the textarea', async () => {
-          const textareaClasses = await page.$eval('.js-character-count', el => el.className)
+          const textareaClasses = await page.$eval('.govuk-js-character-count', el => el.className)
           expect(textareaClasses).toContain('govuk-textarea--error')
         })
 
@@ -131,7 +131,7 @@ describe('Character count', () => {
         })
 
         it('becomes visible once the threshold is reached', async () => {
-          await page.type('.js-character-count', 'A'.repeat(8))
+          await page.type('.govuk-js-character-count', 'A'.repeat(8))
 
           const visibility = await page.$eval('.govuk-character-count__message', el => window.getComputedStyle(el).visibility)
           expect(visibility).toEqual('visible')
@@ -154,7 +154,7 @@ describe('Character count', () => {
 
       it('counts down to the word limit', async () => {
         await goToExample('with-word-count')
-        await page.type('.js-character-count', 'Hello world')
+        await page.type('.govuk-js-character-count', 'Hello world')
 
         const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
 
@@ -163,7 +163,7 @@ describe('Character count', () => {
 
       it('uses the singular when there is only one word remaining', async () => {
         await goToExample('with-word-count')
-        await page.type('.js-character-count', 'Hello '.repeat(9))
+        await page.type('.govuk-js-character-count', 'Hello '.repeat(9))
 
         const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
 
@@ -173,7 +173,7 @@ describe('Character count', () => {
       describe('when the word limit is exceeded', () => {
         beforeAll(async () => {
           await goToExample('with-word-count')
-          await page.type('.js-character-count', 'Hello '.repeat(11))
+          await page.type('.govuk-js-character-count', 'Hello '.repeat(11))
         })
 
         it('shows the number of words over the limit', async () => {
@@ -182,14 +182,14 @@ describe('Character count', () => {
         })
 
         it('uses the plural when the limit is exceeded by 2 or more', async () => {
-          await page.type('.js-character-count', 'World')
+          await page.type('.govuk-js-character-count', 'World')
 
           const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
           expect(message).toEqual('You have 2 words too many')
         })
 
         it('adds error styles to the textarea', async () => {
-          const textareaClasses = await page.$eval('.js-character-count', el => el.className)
+          const textareaClasses = await page.$eval('.govuk-js-character-count', el => el.className)
           expect(textareaClasses).toContain('govuk-textarea--error')
         })
 

src/components/character-count/template.njk

@@ -10,7 +10,7 @@
     describedBy: params.id + '-info',
     rows: params.rows,
     value: params.value,
-    classes: 'js-character-count ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes),
+    classes: 'govuk-js-character-count ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes),
     label: {
       html: params.label.html,
       text: params.label.text,

src/components/character-count/template.test.js

@@ -25,7 +25,7 @@ describe('Character count', () => {
         classes: 'app-character-count--custom-modifier'
       })
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       expect($component.hasClass('app-character-count--custom-modifier')).toBeTruthy()
     })
 
@@ -34,7 +34,7 @@ describe('Character count', () => {
         id: 'my-character-count'
       })
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       expect($component.attr('id')).toEqual('my-character-count')
     })
 
@@ -43,7 +43,7 @@ describe('Character count', () => {
         name: 'my-character-count-name'
       })
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       expect($component.attr('name')).toEqual('my-character-count-name')
     })
 
@@ -52,14 +52,14 @@ describe('Character count', () => {
         rows: '4'
       })
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       expect($component.attr('rows')).toEqual('4')
     })
 
     it('renders with default number of rows', () => {
       const $ = render('character-count', {})
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       expect($component.attr('rows')).toEqual('5')
     })
 
@@ -68,7 +68,7 @@ describe('Character count', () => {
         value: '221B Baker Street\nLondon\nNW1 6XE\n'
       })
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       expect($component.text()).toEqual('221B Baker Street\nLondon\nNW1 6XE\n')
     })
 
@@ -79,7 +79,7 @@ describe('Character count', () => {
         }
       })
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       expect($component.attr('data-attribute')).toEqual('my data value')
     })
   })
@@ -104,7 +104,7 @@ describe('Character count', () => {
         }
       })
 
-      const $textarea = $('.js-character-count')
+      const $textarea = $('.govuk-js-character-count')
       const $hint = $('.govuk-hint')
 
       const hintId = new RegExp(
@@ -136,7 +136,7 @@ describe('Character count', () => {
         }
       })
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       const $errorMessage = $('.govuk-error-message')
 
       const errorMessageId = new RegExp(
@@ -154,7 +154,7 @@ describe('Character count', () => {
         }
       })
 
-      const $component = $('.js-character-count')
+      const $component = $('.govuk-js-character-count')
       expect($component.hasClass('govuk-textarea--error')).toBeTruthy()
     })
   })
@@ -171,7 +171,7 @@ describe('Character count', () => {
         }
       })
 
-      const $component = $('.govuk-form-group > .js-character-count')
+      const $component = $('.govuk-form-group > .govuk-js-character-count')
       expect($component.length).toBeTruthy()
     })
 

src/components/header/header.js

@@ -13,7 +13,7 @@ Header.prototype.init = function () {
   }
 
   // Check for button
-  var $toggleButton = $module.querySelector('.js-header-toggle')
+  var $toggleButton = $module.querySelector('.govuk-js-header-toggle')
   if (!$toggleButton) {
     return
   }

src/components/header/header.test.js

@@ -35,7 +35,7 @@ describe('/components/header', () => {
         it('should indicate the open state of the toggle button', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
 
-          await page.click('.js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
 
           const toggleButtonIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').classList.contains('govuk-header__menu-button--open'))
           expect(toggleButtonIsOpen).toBeTruthy()
@@ -44,7 +44,7 @@ describe('/components/header', () => {
         it('should indicate the expanded state of the toggle button using aria-expanded', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
 
-          await page.click('.js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
 
           const toggleButtonAriaExpanded = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').getAttribute('aria-expanded'))
           expect(toggleButtonAriaExpanded).toBe('true')
@@ -53,7 +53,7 @@ describe('/components/header', () => {
         it('should indicate the open state of the navigation', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
 
-          await page.click('.js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
 
           const navigationIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').classList.contains('govuk-header__navigation--open'))
           expect(navigationIsOpen).toBeTruthy()
@@ -62,7 +62,7 @@ describe('/components/header', () => {
         it('should indicate the visible state of the navigation using aria-hidden', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
 
-          await page.click('.js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
 
           const navigationAriaHidden = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').getAttribute('aria-hidden'))
           expect(navigationAriaHidden).toBe('false')
@@ -73,8 +73,8 @@ describe('/components/header', () => {
         it('should indicate the open state of the toggle button', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
 
-          await page.click('.js-header-toggle')
-          await page.click('.js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
 
           const toggleButtonIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').classList.contains('govuk-header__menu-button--open'))
           expect(toggleButtonIsOpen).toBeFalsy()
@@ -83,8 +83,8 @@ describe('/components/header', () => {
         it('should indicate the expanded state of the toggle button using aria-expanded', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
 
-          await page.click('.js-header-toggle')
-          await page.click('.js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
 
           const toggleButtonAriaExpanded = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').getAttribute('aria-expanded'))
           expect(toggleButtonAriaExpanded).toBe('false')
@@ -93,8 +93,8 @@ describe('/components/header', () => {
         it('should indicate the open state of the navigation', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
 
-          await page.click('.js-header-toggle')
-          await page.click('.js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
 
           const navigationIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').classList.contains('govuk-header__navigation--open'))
           expect(navigationIsOpen).toBeFalsy()
@@ -103,8 +103,8 @@ describe('/components/header', () => {
         it('should indicate the visible state of the navigation using aria-hidden', async () => {
           await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
 
-          await page.click('.js-header-toggle')
-          await page.click('.js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
+          await page.click('.govuk-js-header-toggle')
 
           const navigationAriaHidden = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').getAttribute('aria-hidden'))
           expect(navigationAriaHidden).toBe('true')

src/components/header/template.njk

@@ -60,7 +60,7 @@
     </a>
     {% endif %}
     {% if params.navigation %}
-    <button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+    <button type="button" role="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
     <nav>
       <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
         {% for item in params.navigation %}