Remove dependency on no-js and has-js classes (#318)

* Remove dependency on no-js and has-js classes

* Fix tabs unit tests

src/components/button/_button.scss

@@ -142,18 +142,20 @@
 .btn--mobile {
   @extend .btn--ghost;
   @extend .btn--small;
+
   $size: 0.6rem;
+
   position: relative;
   padding-right: $size * 2.5;
 
   &::before {
     content: '';
-    background: url('#{$static}/img/icons/icons--chevron-down-white.svg') no-repeat center center;
-    height: $size;
-    width: $size;
     position: absolute;
     top: 11px;
     right: 8px;
+    width: $size;
+    height: $size;
+    background: url('#{$static}/img/icons/icons--chevron-down-white.svg') no-repeat center center;
     background-size: $size $size;
   }
 
@@ -166,8 +168,4 @@
   @include mq(m) {
     display: none;
   }
-
-  .no-js & {
-    display: none;
-  }
 }

src/components/details/_details.scss

@@ -21,7 +21,7 @@ $details-caret-width: 1.1rem;
     pointer-events: none;
   }
 
-  &--has-js & {
+  &--initialised & {
     &__summary {
       padding: 0 0 0 ($details-caret-width + 0.4rem);
       color: $color-links;

src/components/details/collapsible.js

@@ -34,7 +34,7 @@ export class Collapsible {
 
     this.summary.addEventListener('click', this.toggle.bind(this));
 
-    this.details.classList.add('details--has-js');
+    this.details.classList.add('details--initialised');
   }
 
   toggle(event) {

src/components/header/_header-nav.scss

@@ -70,16 +70,12 @@
   }
 }
 
-.has-js {
-  .header-nav--mobile {
-    @include mq(xs, m) {
-      max-height: 0;
-      overflow: hidden;
-      opacity: 0;
-
-      .nav__item {
-        display: none;
-      }
+.header-nav--mobile {
+  @include mq(xs, m) {
+    opacity: 0;
+    max-height: 0;
+    .nav__item {
+      display: none;
     }
   }
 }

src/components/header/_macro.njk

@@ -85,7 +85,7 @@
                               "text": params.toggleButton.text,
                               "ariaControls": params.navigation.id,
                               "ariaLabel": params.toggleButton.ariaLabel,
-                              "classes": "btn--mobile js-toggle-main"
+                              "classes": "btn--mobile u-d-no js-toggle-main"
                           }) }}
                       </div>
                   {% endif %}

src/components/header/header-nav.js

@@ -1,15 +1,16 @@
 import domReady from 'js/domready';
 
-export const attrExpanded = 'aria-expanded';
-export const attrHidden = 'aria-hidden';
-export const hideClass = 'header-nav--mobile';
-export const openClass = 'open';
+const attrExpanded = 'aria-expanded';
+const attrHidden = 'aria-hidden';
+const hideClass = 'header-nav--mobile';
+const openClass = 'open';
 
 export default class NavToggle {
   constructor(toggle, nav) {
     this.toggle = toggle;
     this.nav = nav;
     this.toggleNavBinding = this.toggleNav.bind(this);
+    this.toggle.classList.remove('u-d-no');
   }
 
   registerEvents() {
@@ -37,12 +38,12 @@ export default class NavToggle {
 }
 
 export function mobileNav() {
-  const toggleMainBtn = document.getElementsByClassName('js-toggle-main')[0];
-  const mainNavList = document.getElementsByClassName('js-header-nav')[0];
+  const toggleMainBtn = document.querySelector('.js-toggle-main');
+  const mainNavList = document.querySelector('.js-header-nav');
 
-  if (!toggleMainBtn) return;
-
-  new NavToggle(toggleMainBtn, mainNavList).registerEvents();
+  if (toggleMainBtn) {
+    new NavToggle(toggleMainBtn, mainNavList).registerEvents();
+  }
 }
 
 domReady(mobileNav);

src/components/tabs/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsTabs(params) %}
     <section role="region" class="tabs">
-        <h2 class="tabs__title u-fs-m u-vh">{{params.title}}</h2>
+        <h2 class="tabs__title u-fs-m">{{params.title}}</h2>
         <ul class="tabs__list">
             {% for tab in params.tabs %}
                 <li id="tabId{{loop.index}}Item" class="tab__list-item"><a href="#tabId{{loop.index}}" class="tab" data=ga="click" data-ga-category="tabs" data-ga-action="Show: {{tab.title}}" data-ga-label="Show: {{tab.title}}">{{tab.title}}</a></li>

src/components/tabs/_tabs.scss

@@ -2,102 +2,86 @@
   margin-bottom: 1rem;
 }
 
-.tabs__title {
-  .no-js & {
-    // We visually hide the title with u-vh and need to undo with no-js
-    position: relative;
-    width: auto;
-    height: auto;
-    margin: 0 0 1rem;
-  }
-}
-
 // Tabs - list
 .tabs__list {
-  margin: 0;
+  margin: 0 0 1rem 0;
   padding: 0;
   overflow: visible;
-  border-bottom: 1px solid $color-borders;
+  border-bottom: none;
 
-  .no-js &,
-  &--list {
-    border-bottom: none;
-    margin: 0 0 1rem 0;
-    padding-left: 0;
+  &--row {
+    margin: 0;
+    border-bottom: 1px solid $color-borders;
   }
 }
 
 .tab__list-item {
-  list-style: none;
-  display: inline;
-  margin: 0;
+  display: list-item;
   box-sizing: border-box;
+  margin: 0 0 0.3rem;
+  list-style: none;
 
-  .no-js &,
-  &--list {
-    // No-js & mobile display styling as table of contents
-    list-style: none;
-    display: list-item;
-    margin-bottom: 0.3rem;
+  &--row {
+    display: inline;
   }
 }
 
-.tab:not(.tab--list) {
-  .has-js & {
-    position: relative;
-    margin: 0 0.1rem 0 0;
-    padding: 0.5rem 1rem;
-    background: lighten($color-borders, 10%);
-    border: 1px solid lighten($color-borders, 10%);
-    border-radius: 3px 3px 0 0;
-    overflow: visible;
-    text-decoration: none;
+.tab--row {
+  position: relative;
+  margin: 0 0.1rem 0 0;
+  padding: 0.5rem 1rem;
+  background: lighten($color-borders, 10%);
+  border: 1px solid lighten($color-borders, 10%);
+  border-radius: 3px 3px 0 0;
+  overflow: visible;
+  text-decoration: none;
 
-    display: inline-block;
-    height: 2.5rem;
+  display: inline-block;
+  height: 2.5rem;
 
-    &:hover {
-      background-color: $color-borders;
-      border-color: $color-borders;
-    }
+  &:hover {
+    background-color: $color-borders;
+    border-color: $color-borders;
+  }
 
-    &:focus {
-      outline: 3px solid $color-focus;
-      outline-offset: 3px;
-    }
+  &:focus {
+    outline: 3px solid $color-focus;
+    outline-offset: 3px;
+  }
 
-    &[aria-selected='true'] {
-      // Tab when selected
-      border-radius: 3px 3px 0 0;
-      background-color: $color-white;
-      border-color: $color-borders;
-      font-weight: 700;
+  &[aria-selected='true'] {
+    // Tab when selected
+    border-radius: 3px 3px 0 0;
+    background-color: $color-white;
+    border-color: $color-borders;
+    font-weight: 700;
 
-      &:after {
-        // hides the lower border of the active tab.
-        position: absolute;
-        z-index: 3;
-        bottom: -3px;
-        right: 0;
-        left: 0;
-        height: 0.35rem;
-        background: $color-white;
-        box-shadow: none;
-        content: '';
-      }
+    &:after {
+      // hides the lower border of the active tab.
+      position: absolute;
+      z-index: 3;
+      bottom: -3px;
+      right: 0;
+      left: 0;
+      height: 0.35rem;
+      background: $color-white;
+      box-shadow: none;
+      content: '';
     }
   }
 }
 
 // Tabs - Panels
 .tabs__panel {
+  z-index: 10;
+  position: relative;
   margin-bottom: 1rem;
   padding-top: 1rem;
-  position: relative;
-  z-index: 10;
+
   &--hidden {
     display: none;
   }
+
   &:focus {
     outline: 3px solid $color-focus;
   }

src/components/tabs/tabs.js

@@ -6,11 +6,12 @@
 import domready from 'js/domready';
 import matchMedia from 'js/utils/matchMedia';
 
-export const classTabs = 'tabs';
-export const classTab = 'tab';
-export const classTabList = 'tabs__list';
-export const classTabListItems = 'tab__list-item';
-export const classTabsPanel = 'tabs__panel';
+const classTabs = 'tabs';
+const classTab = 'tab';
+const classTabTitle = 'tabs__title';
+const classTabList = 'tabs__list';
+const classTabListItems = 'tab__list-item';
+const classTabsPanel = 'tabs__panel';
 
 const matchMediaUtil = matchMedia;
 
@@ -20,15 +21,18 @@ export default class Tabs {
     this.boundTabKeydown = this.onTabKeydown.bind(this);
 
     this.component = component;
+    this.tabsTitle = component.querySelector(`.${classTabTitle}`);
     this.tabs = [...component.getElementsByClassName(classTab)];
     this.tabList = component.getElementsByClassName(classTabList);
     this.tabListItems = [...component.getElementsByClassName(classTabListItems)];
     this.tabPanels = [...component.getElementsByClassName(classTabsPanel)];
 
     this.jsHiddenClass = 'tabs__panel--hidden';
-    this.jsTabListAsListClass = 'tabs__list--list';
-    this.jsTabItemAsListClass = 'tab__list-item--list';
-    this.jsTabAsListClass = 'tab--list';
+    this.jsTabListAsRowClass = 'tabs__list--row';
+    this.jsTabItemAsRowClass = 'tab__list-item--row';
+    this.jsTabAsListClass = 'tab--row';
+
+    this.tabsTitle.classList.add('u-vh');
 
     if (matchMediaUtil.hasMatchMedia()) {
       this.setupViewportChecks();
@@ -57,20 +61,20 @@ export default class Tabs {
 
   makeTabs() {
     this.tabList[0].setAttribute('role', 'tablist');
-    this.tabList[0].classList.remove(this.jsTabListAsListClass);
+    this.tabList[0].classList.add(this.jsTabListAsRowClass);
 
     this.tabPanels.forEach(panel => {
       panel.setAttribute('tabindex', '0');
     });
 
     this.tabListItems.forEach(item => {
       item.setAttribute('role', 'presentation');
-      item.classList.remove(this.jsTabItemAsListClass);
+      item.classList.add(this.jsTabItemAsRowClass);
     });
 
     this.tabs.forEach(tab => {
       this.setAttributes(tab);
-      tab.classList.remove(this.jsTabAsListClass);
+      tab.classList.add(this.jsTabAsListClass);
 
       tab.addEventListener('click', this.boundTabClick, true);
       tab.addEventListener('keydown', this.boundTabKeydown, true);
@@ -86,21 +90,21 @@ export default class Tabs {
 
   makeList() {
     this.tabList[0].removeAttribute('role');
-    this.tabList[0].classList.add(this.jsTabListAsListClass);
+    this.tabList[0].classList.remove(this.jsTabListAsRowClass);
 
     this.tabPanels.forEach(panel => {
       panel.removeAttribute('tabindex', '0');
     });
 
     this.tabListItems.forEach(item => {
       item.removeAttribute('role', 'presentation');
-      item.classList.add(this.jsTabItemAsListClass);
+      item.classList.remove(this.jsTabItemAsRowClass);
     });
 
     this.tabs.forEach(tab => {
       tab.removeEventListener('click', this.boundTabClick, true);
       tab.removeEventListener('keydown', this.boundTabKeydown, true);
-      tab.classList.add(this.jsTabAsListClass);
+      tab.classList.remove(this.jsTabAsListClass);
       this.unsetAttributes(tab);
     });