Merge pull request #916 from alphagov/fix-global-tabs-class-name

Replace global `js-hidden` class with tabs panel modifier
alphagov · Jul 17, 2018 · 94f3cb7 · 94f3cb7
2 parents 7c3f0a2 + c74b1ad
commit 94f3cb7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,11 +22,9 @@
 
 🔧 Fixes:
 
-- Pull Request Title goes here
-
-  Description goes here (optional)
-
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+- Replace conflicting `js-hidden` class used within the tabs component with a new modifier class.
+  Because this class is defined and used within the JavaScript, no markup changes are required.
+  ([PR #916](https://github.com/alphagov/govuk-frontend/pull/916))
 
 
 ## 1.1.1 (fix release)

diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
@@ -116,15 +116,15 @@
         border: 1px solid $govuk-border-colour;
         border-top: 0;
 
+        &--hidden {
+          display: none;
+        }
+
         & > :last-child {
           margin-bottom: 0;
         }
       }
     }
 
   }
-
-  .js-hidden {
-    display: none;
-  }
 }
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
@@ -8,7 +8,7 @@ function Tabs ($module) {
   this.$tabs = $module.querySelectorAll('.govuk-tabs__tab')
 
   this.keys = { left: 37, right: 39, up: 38, down: 40 }
-  this.jsHiddenClass = 'js-hidden'
+  this.jsHiddenClass = 'govuk-tabs__panel--hidden'
 }
 
 Tabs.prototype.init = function () {

diff --git a/src/components/tabs/tabs.test.js b/src/components/tabs/tabs.test.js
@@ -47,14 +47,14 @@ describe('/components/tabs', () => {
       it('should display the first tab panel', async () => {
         await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
 
-        const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel').classList.contains('js-hidden'))
+        const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel').classList.contains('govuk-tabs__panel--hidden'))
         expect(tabPanelIsHidden).toBeFalsy()
       })
 
       it('should hide all the tab panels except for the first one', async () => {
         await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' })
 
-        const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel ~ .govuk-tabs__panel').classList.contains('js-hidden'))
+        const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel ~ .govuk-tabs__panel').classList.contains('govuk-tabs__panel--hidden'))
         expect(tabPanelIsHidden).toBeTruthy()
       })
     })
@@ -78,7 +78,7 @@ describe('/components/tabs', () => {
 
         const secondTabPanelIsHidden = await page.evaluate(() => {
           const secondTabAriaControls = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-controls')
-          return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('js-hidden')
+          return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('govuk-tabs__panel--hidden')
         })
         expect(secondTabPanelIsHidden).toBeFalsy()
       })
@@ -105,7 +105,7 @@ describe('/components/tabs', () => {
 
         const secondTabPanelIsHidden = await page.evaluate(() => {
           const secondTabAriaControls = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-controls')
-          return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('js-hidden')
+          return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('govuk-tabs__panel--hidden')
         })
         expect(secondTabPanelIsHidden).toBeFalsy()
       })
@@ -118,7 +118,7 @@ describe('/components/tabs', () => {
         const currentTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__tab[href="#past-week"]').getAttribute('aria-selected'))
         expect(currentTabAriaSelected).toEqual('true')
 
-        const currentTabPanelIsHidden = await page.evaluate(() => document.getElementById('past-week').classList.contains('js-hidden'))
+        const currentTabPanelIsHidden = await page.evaluate(() => document.getElementById('past-week').classList.contains('govuk-tabs__panel--hidden'))
         expect(currentTabPanelIsHidden).toBeFalsy()
       })
     })