Refactor tabs.js to use 'js-' prefixes for DOM manipulation

alphagov · Jan 10, 2018 · 40b8883 · 40b8883
1 parent f57e009
commit 40b8883
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/javascripts/components/tabs.js b/src/javascripts/components/tabs.js
@@ -16,10 +16,10 @@
       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
@@ -74,27 +74,27 @@
       // If more than one container
       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--open a').click()
+      $('.js-tabs__heading--open a').click()
     }
   }
 

diff --git a/views/partials/_example.njk b/views/partials/_example.njk
@@ -15,23 +15,23 @@
 
   {%- if (params.html and params.nunjucks) %}
   <ul class="app-c-tabs" role="tablist">
-    <li class="app-c-tabs__item{{ " app-c-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" 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{{ " app-c-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" 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 }}
     ```
   </div>
   {% 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 }}
     ```