Remove unused tabs options

Author: colinrotherham

packages/components/tabs/tabs.js

@@ -1,23 +1,20 @@
 class Tabs {
-  constructor($module, namespace, responsive, historyEnabled) {
+  constructor($module) {
     this.$module = $module
-    this.namespace = namespace
-    this.responsive = responsive
-    this.historyEnabled = historyEnabled
-    this.$tabs = $module.querySelectorAll(`.${this.namespace}__tab`)
+    this.$tabs = $module.querySelectorAll('.nhsuk-tabs__tab')
 
     this.keys = {
       down: 40,
       left: 37,
       right: 39,
       up: 38
     }
-    this.jsHiddenClass = `${this.namespace}__panel--hidden`
+    this.jsHiddenClass = '.nhsuk-tabs__panel--hidden'
 
     this.showEvent = new CustomEvent('tab.show')
     this.hideEvent = new CustomEvent('tab.hide')
 
-    if (typeof window.matchMedia === 'function' && this.responsive) {
+    if (typeof window.matchMedia === 'function') {
       this.setupResponsiveChecks()
     } else {
       this.setup()
@@ -58,10 +55,8 @@ class Tabs {
   setup() {
     const { $module } = this
     const { $tabs } = this
-    const $tabList = $module.querySelector(`.${this.namespace}__list`)
-    const $tabListItems = $module.querySelectorAll(
-      `.${this.namespace}__list-item`
-    )
+    const $tabList = $module.querySelector('.nhsuk-tabs__list')
+    const $tabListItems = $module.querySelectorAll('.nhsuk-tabs__list-item')
 
     if (!$tabs || !$tabList || !$tabListItems) {
       return
@@ -96,19 +91,15 @@ class Tabs {
     this.showTab($activeTab)
 
     // Handle hashchange events
-    if (this.historyEnabled) {
-      $module.boundOnHashChange = this.onHashChange.bind(this)
-      window.addEventListener('hashchange', $module.boundOnHashChange, true)
-    }
+    $module.boundOnHashChange = this.onHashChange.bind(this)
+    window.addEventListener('hashchange', $module.boundOnHashChange, true)
   }
 
   teardown() {
     const { $module } = this
     const { $tabs } = this
-    const $tabList = $module.querySelector(`.${this.namespace}__list`)
-    const $tabListItems = $module.querySelectorAll(
-      `.${this.namespace}__list-item`
-    )
+    const $tabList = $module.querySelector('.nhsuk-tabs__list')
+    const $tabListItems = $module.querySelectorAll('.nhsuk-tabs__list-item')
 
     if (!$tabs || !$tabList || !$tabListItems) {
       return
@@ -129,10 +120,8 @@ class Tabs {
       this.unsetAttributes($tab)
     })
 
-    if (this.historyEnabled) {
-      // Remove hashchange event handler
-      window.removeEventListener('hashchange', $module.boundOnHashChange, true)
-    }
+    // Remove hashchange event handler
+    window.removeEventListener('hashchange', $module.boundOnHashChange, true)
   }
 
   onHashChange() {
@@ -167,7 +156,7 @@ class Tabs {
   }
 
   getTab(hash) {
-    return this.$module.querySelector(`.${this.namespace}__tab[href="${hash}"]`)
+    return this.$module.querySelector(`.nhsuk-tabs__tab[href="${hash}"]`)
   }
 
   setAttributes($tab) {
@@ -203,7 +192,7 @@ class Tabs {
   }
 
   onTabClick(e) {
-    if (!e.target.classList.contains(`${this.namespace}__tab`)) {
+    if (!e.target.classList.contains('nhsuk-tabs__tab')) {
       e.stopPropagation()
       e.preventDefault()
     }
@@ -216,17 +205,15 @@ class Tabs {
   }
 
   createHistoryEntry($tab) {
-    if (this.historyEnabled) {
-      const $panel = this.getPanel($tab)
-
-      // Save and restore the id
-      // so the page doesn't jump when a user clicks a tab (which changes the hash)
-      const { id } = $panel
-      $panel.id = ''
-      this.changingHash = true
-      window.location.hash = Tabs.getHref($tab).slice(1)
-      $panel.id = id
-    }
+    const $panel = this.getPanel($tab)
+
+    // Save and restore the id
+    // so the page doesn't jump when a user clicks a tab (which changes the hash)
+    const { id } = $panel
+    $panel.id = ''
+    this.changingHash = true
+    window.location.hash = Tabs.getHref($tab).slice(1)
+    $panel.id = id
   }
 
   onTabKeydown(e) {
@@ -252,7 +239,7 @@ class Tabs {
     let nextTab
 
     if (nextTabListItem) {
-      nextTab = nextTabListItem.querySelector(`.${this.namespace}__tab`)
+      nextTab = nextTabListItem.querySelector('.nhsuk-tabs__tab')
     }
     if (nextTab) {
       this.hideTab(currentTab)
@@ -268,7 +255,7 @@ class Tabs {
     let previousTab
 
     if (previousTabListItem) {
-      previousTab = previousTabListItem.querySelector(`.${this.namespace}__tab`)
+      previousTab = previousTabListItem.querySelector('.nhsuk-tabs__tab')
     }
     if (previousTab) {
       this.hideTab(currentTab)
@@ -297,19 +284,19 @@ class Tabs {
 
   unhighlightTab($tab) {
     $tab.setAttribute('aria-selected', 'false')
-    $tab.parentNode.classList.remove(`${this.namespace}__list-item--selected`)
+    $tab.parentNode.classList.remove('nhsuk-tabs__list-item--selected')
     $tab.setAttribute('tabindex', '-1')
   }
 
   highlightTab($tab) {
     $tab.setAttribute('aria-selected', 'true')
-    $tab.parentNode.classList.add(`${this.namespace}__list-item--selected`)
+    $tab.parentNode.classList.add('nhsuk-tabs__list-item--selected')
     $tab.setAttribute('tabindex', '0')
   }
 
   getCurrentTab() {
     return this.$module.querySelector(
-      `.${this.namespace}__list-item--selected .${this.namespace}__tab`
+      '.nhsuk-tabs__list-item--selected .nhsuk-tabs__tab'
     )
   }
 
@@ -324,20 +311,11 @@ class Tabs {
 }
 
 /**
- * Main function to invoke tabs. Can be called as follows to alter various features
- *
- * Tabs({historyEnabled: false});
- * Tabs({responsive: false});
- * Tabs({namespace: 'my-custom-namespace'});  // Alters classes allowing alternative css
+ * Initialise tabs component
  */
-module.exports = ({
-  namespace = 'nhsuk-tabs',
-  responsive = true,
-  historyEnabled = true,
-  scope = document
-} = {}) => {
-  const tabs = scope.querySelectorAll(`[data-module="${namespace}"]`)
+module.exports = ({ scope = document } = {}) => {
+  const tabs = scope.querySelectorAll('[data-module="nhsuk-tabs"]')
   tabs.forEach((el) => {
-    new Tabs(el, namespace, responsive, historyEnabled)
+    new Tabs(el)
   })
 }