Replace all instances of mobile-nav with navigation

Now that we only have a single navigation, it makes sense to remove the unused implementation and remove references to mobile-nav

__tests__/mobile-navigation.test.js → __tests__/navigation.test.js

@@ -9,8 +9,8 @@ const PORT = configPaths.testPort
 let page
 let baseUrl = 'http://localhost:' + PORT
 
-const mobileNav = '.app-mobile-nav'
-const mobileNavToggler = '.js-app-mobile-nav__toggler'
+const mobileNav = '.app-navigation'
+const mobileNavToggler = '.js-app-navigation__toggler'
 
 beforeAll(async () => {
   page = await setupPage(iPhone)
@@ -25,8 +25,8 @@ describe('Homepage', () => {
     it('falls back to making the navigation visible', async () => {
       await page.setJavaScriptEnabled(false)
       await page.goto(baseUrl, { waitUntil: 'load' })
-      const isMobileNavigationVisible = await page.waitForSelector('.js-app-mobile-nav', { visible: true, timeout: 1000 })
-      expect(isMobileNavigationVisible).toBeTruthy()
+      const isAppNavigationVisible = await page.waitForSelector('.js-app-navigation', { visible: true, timeout: 1000 })
+      expect(isAppNavigationVisible).toBeTruthy()
     })
   })
 
@@ -35,7 +35,6 @@ describe('Homepage', () => {
       it('should apply the corresponding open state class to the menu button', async () => {
         await page.setJavaScriptEnabled(true)
         await page.goto(baseUrl, { waitUntil: 'load' })
-
         await page.click(mobileNavToggler)
 
         const toggleButtonIsOpen = await page.evaluate((mobileNavToggler) =>
@@ -47,7 +46,6 @@ describe('Homepage', () => {
 
       it('should indicate the expanded state of the toggle button using aria-expanded', async () => {
         await page.goto(baseUrl, { waitUntil: 'load' })
-
         await page.click(mobileNavToggler)
 
         const toggleButtonAriaExpanded = await page.evaluate((mobileNavToggler) =>
@@ -59,19 +57,17 @@ describe('Homepage', () => {
 
       it('should indicate the open state of the navigation', async () => {
         await page.goto(baseUrl, { waitUntil: 'load' })
-
         await page.click(mobileNavToggler)
 
         const navigationIsOpen = await page.evaluate((mobileNav) =>
-          document.body.querySelector(mobileNav).classList.contains('app-mobile-nav--active'),
+          document.body.querySelector(mobileNav).classList.contains('app-navigation--active'),
         mobileNav)
 
         expect(navigationIsOpen).toBeTruthy()
       })
 
       it('should indicate the visible state of the navigation using the hidden attribute', async () => {
         await page.goto(baseUrl, { waitUntil: 'load' })
-
         await page.click(mobileNavToggler)
 
         const navigationIsHidden = await page.evaluate((mobileNav) =>

src/javascripts/application.js

@@ -4,7 +4,7 @@ import common from 'govuk-frontend/govuk/common'
 import Example from './components/example.js'
 import AppTabs from './components/tabs.js'
 import Copy from './components/copy.js'
-import MobileNav from './components/mobile-navigation.js'
+import Navigation from './components/navigation.js'
 import Search from './components/search.js'
 import OptionsTable from './components/options-table.js'
 import { getConsentCookie, isValidConsentCookie } from './components/cookie-functions.js'
@@ -45,7 +45,7 @@ nodeListForEach($codeBlocks, function ($codeBlock) {
 })
 
 // Initialise mobile navigation
-new MobileNav().init()
+new Navigation().init()
 
 // Initialise search
 var $searchContainer = document.querySelector('[data-module="app-search"]')

src/javascripts/components/mobile-navigation.js → src/javascripts/components/navigation.js

@@ -3,19 +3,19 @@ import 'govuk-frontend/govuk/vendor/polyfills/Element/prototype/classList'
 import common from 'govuk-frontend/govuk/common'
 var nodeListForEach = common.nodeListForEach
 
-var navActiveClass = 'app-mobile-nav--active'
+var navActiveClass = 'app-navigation--active'
 var navMenuButtonActiveClass = 'app-header-mobile-nav-toggler--active'
-var subNavActiveClass = 'app-mobile-nav__subnav--active'
+var subNavActiveClass = 'app-navigation__subnav--active'
 // This one has the query dot at the beginning because it's only ever used in querySelector calls
-var subNavJSClass = '.js-app-mobile-nav__subnav'
+var subNavJSClass = '.js-app-navigation__subnav'
 
-function MobileNav ($module) {
+function Navigation ($module) {
   this.$module = $module || document
 
-  this.$nav = this.$module.querySelector('.js-app-mobile-nav')
-  this.$navToggler = this.$module.querySelector('.js-app-mobile-nav__toggler')
-  this.$navButtons = this.$module.querySelectorAll('.js-app-mobile-nav__button')
-  this.$navLinks = this.$module.querySelectorAll('.js-app-mobile-nav__link')
+  this.$nav = this.$module.querySelector('.js-app-navigation')
+  this.$navToggler = this.$module.querySelector('.js-app-navigation__toggler')
+  this.$navButtons = this.$module.querySelectorAll('.js-app-navigation__button')
+  this.$navLinks = this.$module.querySelectorAll('.js-app-navigation__link')
 
   // Save the opened/closed state for the nav in memory so that we can accurately maintain state when the screen is changed from small to big and back to small
   this.mobileNavOpen = false
@@ -28,7 +28,8 @@ function MobileNav ($module) {
 // Checks if the saved window size has changed between now and when it was last recorded (on load and on viewport width changes)
 // Reapplies hidden attributes based on if the viewport has changed from big to small or vice verca
 // Saves the new window size
-MobileNav.prototype.setHiddenStates = function () {
+
+Navigation.prototype.setHiddenStates = function () {
   if (this.mql === null || !this.mql.matches) {
     if (!this.mobileNavOpen) {
       this.$nav.setAttribute('hidden', '')
@@ -58,7 +59,7 @@ MobileNav.prototype.setHiddenStates = function () {
   }
 }
 
-MobileNav.prototype.setInitialAriaStates = function () {
+Navigation.prototype.setInitialAriaStates = function () {
   this.$navToggler.setAttribute('aria-expanded', 'false')
 
   nodeListForEach(this.$navButtons, function ($button, index) {
@@ -76,7 +77,7 @@ MobileNav.prototype.setInitialAriaStates = function () {
   })
 }
 
-MobileNav.prototype.bindUIEvents = function () {
+Navigation.prototype.bindUIEvents = function () {
   var $nav = this.$nav
   var $navToggler = this.$navToggler
   var $navButtons = this.$navButtons
@@ -122,7 +123,7 @@ MobileNav.prototype.bindUIEvents = function () {
   })
 }
 
-MobileNav.prototype.init = function () {
+Navigation.prototype.init = function () {
   // Since the Mobile navigation is not included in IE8
   // We detect features we need to use only available in IE9+ https://caniuse.com/#feat=addeventlistener
   // http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
@@ -145,4 +146,4 @@ MobileNav.prototype.init = function () {
   this.bindUIEvents()
 }
 
-export default MobileNav
+export default Navigation