From f01759293ecda68e1016a464ad4a21276a9f99d7 Mon Sep 17 00:00:00 2001
From: alex-ju <alex-ju@users.noreply.github.com>
Date: Wed, 10 Jan 2018 13:22:52 +0000
Subject: [PATCH] Refactor tabs.js to use 'js-' prefixes for DOM manipulation

---
 src/javascripts/components/tabs.js | 40 +++++++++++++++++++-----------
 src/javascripts/main.js            |  2 +-
 views/partials/_example.njk        | 14 +++++------
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/javascripts/components/tabs.js b/src/javascripts/components/tabs.js
index 30bc96c861..c3f25c3b3b 100644
--- a/src/javascripts/components/tabs.js
+++ b/src/javascripts/components/tabs.js
@@ -7,17 +7,29 @@
 
     // Reset tabs and containers
     resetTabs: function (id) {
+      // Check if we have an id
+      if (!id) {
+        console.error('id is undefined')
+        return
+      }
+
       var $example = $(id).parent()
 
       // Reset state
-      $example.find('.app-c-tabs__item').removeClass('app-c-tabs__item--current')
-      $example.find('.app-c-tabs__heading').removeClass('app-c-tabs__heading--current')
-      $example.find('.app-c-tabs__item a').removeAttr('aria-selected')
-      $example.find('.app-c-tabs__container').hide().attr('aria-hidden', 'true')
+      $example.find('.js-tabs__item').removeClass('app-c-tabs__item--current')
+      $example.find('.js-tabs__heading').removeClass('app-c-tabs__heading--current')
+      $example.find('.js-tabs__item a').removeAttr('aria-selected')
+      $example.find('.js-tabs__container').hide().attr('aria-hidden', 'true')
     },
 
     // Activate current tab
     activateCurrentTab: function (id) {
+      // Check if we have an id
+      if (!id) {
+        console.error('id is undefined')
+        return
+      }
+
       // Reset tabs
       GOVUK.tabs.resetTabs(id)
 
@@ -58,31 +70,31 @@
       GOVUK.tabs.resetTabs('#' + id)
     },
 
-    init: function () {
+    init: function (selector) {
       // If more than one container
-      var $examples = $('.app-c-example-wrapper')
+      var $examples = $(selector)
       $.each($examples, function (key, obj) {
-        if ($(obj).find('.app-c-tabs__container').length > 1) {
+        if ($(obj).find('.js-tabs__container').length > 1) {
           // Hide all containers
-          $(obj).find('.app-c-tabs__container').hide()
+          $(obj).find('.js-tabs__container').hide()
 
           // Add close button to each container
-          $(obj).find('.app-c-tabs__container').append('<a class="app-c-link--close app-o-chevron--top" href="#close">Close</a>')
-          $(obj).find('.app-c-tabs__container').addClass('app-c-tabs__container--with-close-button')
+          $(obj).find('.js-tabs__container').append('<a class="app-c-link--close js-link--close app-o-chevron--top" href="#close">Close</a>')
+          $(obj).find('.js-tabs__container').addClass('app-c-tabs__container--with-close-button')
         }
       })
 
       // Bind tab item click
-      $('.app-c-tabs__item a').click(GOVUK.tabs.clickTabItem)
+      $('.js-tabs__item a').click(GOVUK.tabs.clickTabItem)
 
       // Bind accordion item click
-      $('.app-c-tabs__heading a').click(GOVUK.tabs.clickTabItem)
+      $('.js-tabs__heading a').click(GOVUK.tabs.clickTabItem)
 
       // Bind close container link
-      $('.app-c-link--close').click(GOVUK.tabs.clickCloseContainer)
+      $('.js-link--close').click(GOVUK.tabs.clickCloseContainer)
 
       // Show open containers
-      $('.app-c-tabs__heading a[open]').click()
+      $('.js-tabs__heading--open a').click()
     }
   }
 
diff --git a/src/javascripts/main.js b/src/javascripts/main.js
index b9b57aca27..0723190541 100644
--- a/src/javascripts/main.js
+++ b/src/javascripts/main.js
@@ -3,7 +3,7 @@ $(document).ready(function () {
   GOVUK.example.init('.js-example__frame')
 
   // Initialise tabs
-  GOVUK.tabs.init()
+  GOVUK.tabs.init('.js-example')
 
   // Add copy to clipboard to code blocks inside tab containers
   GOVUK.copy.init('.app-c-tabs__container pre')
diff --git a/views/partials/_example.njk b/views/partials/_example.njk
index a37e2d1632..b635e0e069 100644
--- a/views/partials/_example.njk
+++ b/views/partials/_example.njk
@@ -7,7 +7,7 @@
   {% set exampleId = exampleId + '-open' %}
 {% endif %}
 
-<div class="app-c-example-wrapper" id="{{ exampleId }}">
+<div class="app-c-example-wrapper js-example" id="{{ exampleId }}">
   <div class="app-c-example {{ "app-c-example--tabs" if params.html or params.nunjucks }}">
     <span class="app-c-example__new-window"><a href="{{ exampleURL }}" target="_blank">(open in new window)</a></span>
     <iframe class="app-c-example__frame app-c-example__frame--resizable js-example__frame" src="{{ exampleURL }}"></iframe>
@@ -15,14 +15,14 @@
 
   {%- if (params.html and params.nunjucks) %}
   <ul class="app-c-tabs" role="tablist">
-    <li class="app-c-tabs__item" role="presentation"><a href="#{{ exampleId }}-html" role="tab" aria-controls="{{ exampleId }}-html"{{ " open" if (params.open) }}>HTML</a></li>
-    <li class="app-c-tabs__item" role="presentation"><a href="#{{ exampleId }}-nunjucks" role="tab" aria-controls="{{ exampleId }}-nunjucks">Nunjucks</a></li>
+    <li class="app-c-tabs__item js-tabs__item{{ " js-tabs__item--open" if (params.open) }}" role="presentation"><a href="#{{ exampleId }}-html" role="tab" aria-controls="{{ exampleId }}-html">HTML</a></li>
+    <li class="app-c-tabs__item js-tabs__item" role="presentation"><a href="#{{ exampleId }}-nunjucks" role="tab" aria-controls="{{ exampleId }}-nunjucks">Nunjucks</a></li>
   </ul>
   {% endif %}
 
   {%- if (params.html) %}
-  <div class="app-c-tabs__heading"><a href="#{{ exampleId }}-html" role="tab" aria-controls="{{ exampleId }}-html"{{ " open" if (params.open) }}>HTML</a></div>
-  <div class="app-c-tabs__container" id="{{ exampleId }}-html" role="tabpanel">
+  <div class="app-c-tabs__heading js-tabs__heading{{ " js-tabs__heading--open" if (params.open) }}"><a href="#{{ exampleId }}-html" role="tab" aria-controls="{{ exampleId }}-html">HTML</a></div>
+  <div class="app-c-tabs__container js-tabs__container" id="{{ exampleId }}-html" role="tabpanel">
     ```html
     {{ getHTMLCode(examplePath) | safe }}
     ```
@@ -30,8 +30,8 @@
   {% endif %}
 
   {%- if (params.nunjucks) %}
-  <div class="app-c-tabs__heading"><a href="#{{ exampleId }}-nunjucks" role="tab" aria-controls="{{ exampleId }}-nunjucks">Nunjucks</a></div>
-  <div class="app-c-tabs__container" id="{{ exampleId }}-nunjucks" role="tabpanel">
+  <div class="app-c-tabs__heading js-tabs__heading"><a href="#{{ exampleId }}-nunjucks" role="tab" aria-controls="{{ exampleId }}-nunjucks">Nunjucks</a></div>
+  <div class="app-c-tabs__container js-tabs__container" id="{{ exampleId }}-nunjucks" role="tabpanel">
     ```js
     {{ getNunjucksCode(examplePath) | safe }}
     ```