115: ES6 support, ESLint, Babel 7 Upgrade and Babel Polyfill

.browserslistrc

@@ -0,0 +1,3 @@
+> 0.5%
+not dead
+ie 11

.eslintignore

@@ -0,0 +1,13 @@
+# Artifacts
+build/**/*
+dist/**/*
+pattern-lab/**/*
+
+# 3rd party scripts
+components/_annotations/annotations.js
+components/js/babel-polyfill.js
+components/js/fitvids.js
+components/js/init.js
+components/js/jquery*.js
+components/js/modernizr.js
+components/js/svgxuse.min.js

.eslintrc.yml

@@ -0,0 +1,8 @@
+extends: airbnb-base
+rules:
+  global-require: off
+  comma-dangle: 0
+env:
+  browser: true
+globals:
+  Drupal: true

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = (api) => {
+  api.cache(true);
+
+  const presets = [
+    [
+      '@babel/preset-env', {
+        useBuiltIns: 'entry'
+      },
+    ],
+    'minify',
+  ];
+
+  return { presets };
+};

components/_meta/_00-head.twig

@@ -18,6 +18,8 @@
     <!-- <script src="../../js/ready.min.js"></script> -->
     <!-- <script src="../../js/drupal.js"></script> -->
 
+    <script src="../../js/babel-polyfill.js"></script>
+
     <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
     {{ patternLabHead | raw }}
     <!-- End Pattern Lab -->

components/_meta/_01-foot.twig

@@ -3,7 +3,7 @@
   {{ patternLabFoot | raw }}
 
   <!-- This makes attach_library work wherever it is in the document flow. -->
-  <script src="../../js/reload-scripts.js"></script>
+  <script src="../../../../dist/reload-scripts.js"></script>
 
   </body>
 </html>

components/_patterns/02-molecules/accordion-item/accordion-item.js

@@ -1,57 +1,51 @@
-// UNCOMMENT IF DRUPAL - see components/_meta/_01-foot.twig for attachBehaviors
+// UNCOMMENT NEXT 2 LINES IF DRUPAL - see components/_meta/_01-foot.twig for attachBehaviors
 // Drupal.behaviors.accordion = {
 //   attach: function (context, settings) {
 
-(function () { // REMOVE IF DRUPAL
-
-  'use strict';
-
+// REMOVE NEXT LINE IF DRUPAL
+(function accordion() {
   // Set 'document' to 'context' if Drupal
-  var accordionTerm = document.querySelectorAll('.accordion-term');
-  var accordionDef = document.querySelectorAll('.accordion-def');
+  const accordionTerms = document.querySelectorAll('.accordion-term');
+  const accordionDefs = document.querySelectorAll('.accordion-def');
 
   // If javascript, hide accordion definition on load
   function jsCheck() {
-    for (var i = 0; i < accordionDef.length; i++) {
-      if (accordionDef[i].classList) {
-        accordionDef[i].classList.add('active');
-        accordionDef[0].previousElementSibling.classList.add('is-active');
+    Array.from(accordionDefs).forEach((accordionDef) => {
+      if (accordionDef.classList) {
+        accordionDef.classList.add('active');
+        accordionDefs[0].previousElementSibling.classList.add('is-active');
+      } else {
+        accordionDef.className += ' active'; // eslint-disable-line no-param-reassign
+        accordionDefs[0].previousElementSibling.classList.add('is-active');
       }
-      else {
-        accordionDef[i].className += ' active';
-        accordionDef[0].previousElementSibling.classList.add('is-active');
-      }
-    }
+    });
   }
 
   jsCheck();
 
   // Accordion Toggle
   // Mobile Click Menu Transition
-  for (var i = 0; i < accordionTerm.length; i++) {
-    accordionTerm[i].addEventListener('click', function (e) {
-      var className = 'is-active';
+  Array.from(accordionTerms).forEach((accordionTerm) => {
+    accordionTerm.addEventListener('click', function accordionClick(e) {
+      const className = 'is-active';
       // Add is-active class
       if (this.classList) {
         this.classList.toggle(className);
-      }
-      else {
-        var classes = this.className.split(' ');
-        var existingIndex = classes.indexOf(className);
+      } else {
+        const classes = this.className.split(' ');
+        const existingIndex = classes.indexOf(className);
 
         if (existingIndex >= 0) {
           classes.splice(existingIndex, 1);
-        }
-        else {
+        } else {
           classes.push(className);
         }
         this.className = classes.join(' ');
       }
       e.preventDefault();
     });
-  }
-
-})(); // REMOVE IF DRUPAL
+  });
+}()); // REMOVE IF DRUPAL
 
 // UNCOMMENT IF DRUPAL
 //   }

components/_patterns/02-molecules/menus/main-menu/main-menu.js

@@ -15,32 +15,29 @@
 //   Drupal.behaviors.mainMenu = {
 //     attach: function (context) {
 
-(function () { // REMOVE IF DRUPAL.
-
-  'use strict';
-
+// REMOVE NEXT LINE IF DRUPAL.
+(function mainMenu() {
   // Use context instead of document IF DRUPAL.
-  var toggle_expand = document.getElementById('toggle-expand');
-  var menu = document.getElementById('main-nav');
-  var expand_menu = menu.getElementsByClassName('expand-sub');
+  const toggleExpand = document.getElementById('toggle-expand');
+  const menu = document.getElementById('main-nav');
+  const expandMenu = menu.getElementsByClassName('expand-sub');
 
   // Mobile Menu Show/Hide.
-  toggle_expand.addEventListener('click', function (e) {
-    toggle_expand.classList.toggle('toggle-expand--open');
+  toggleExpand.addEventListener('click', () => {
+    toggleExpand.classList.toggle('toggle-expand--open');
     menu.classList.toggle('main-nav--open');
   });
 
   // Expose mobile sub menu on click.
-  for (var i = 0; i < expand_menu.length; i++) {
-    expand_menu[i].addEventListener('click', function (e) {
-      var menu_item = e.currentTarget;
-      var sub_menu = menu_item.nextElementSibling;
+  Array.from(expandMenu).forEach((expand) => {
+    expand.addEventListener('click', (e) => {
+      const menuItem = e.currentTarget;
+      const subMenu = menuItem.nextElementSibling;
 
-      menu_item.classList.toggle('expand-sub--open');
-      sub_menu.classList.toggle('main-menu--sub-open');
+      menuItem.classList.toggle('expand-sub--open');
+      subMenu.classList.toggle('main-menu--sub-open');
     });
-  }
-
-})(); // REMOVE IF DRUPAL.
+  });
+}()); // REMOVE IF DRUPAL.
 
-// })(Drupal); // UNCOMMENT IF DRUPAL.
+// }(Drupal)); // UNCOMMENT IF DRUPAL.

components/_patterns/02-molecules/menus/tabs/tabs.js

@@ -1,54 +1,61 @@
-(function () {
+/**
+ * @file
+ * A JavaScript file containing the main menu functionality (small/large screen)
+ *
+ */
 
-  'use strict';
+// JavaScript should be made compatible with libraries other than jQuery by
+// wrapping it with an "anonymous closure". See:
+// - https://drupal.org/node/1446420
+// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
 
-  var el = document.querySelectorAll('.tabs');
-  var tabNavigationLinks = document.querySelectorAll('.tabs__link');
-  var tabContentContainers = document.querySelectorAll('.tabs__tab');
-  var activeIndex = 0;
-
-  /**
-   * handleClick
-   * @description Handles click event listeners on each of the links in the
-   *   tab navigation. Returns nothing.
-   * @param {HTMLElement} link The link to listen for events on
-   * @param {Number} index The index of that link
-   */
-  var handleClick = function (link, index) {
-    link.addEventListener('click', function (e) {
-      e.preventDefault();
-      goToTab(index);
-    });
-  };
+(function tabs() {
+  const el = document.querySelectorAll('.tabs');
+  const tabNavigationLinks = document.querySelectorAll('.tabs__link');
+  const tabContentContainers = document.querySelectorAll('.tabs__tab');
+  let activeIndex = 0;
 
   /**
    * goToTab
    * @description Goes to a specific tab based on index. Returns nothing.
    * @param {Number} index The index of the tab to go to
    */
-  var goToTab = function (index) {
+  function goToTab(index) { // eslint-disable-line func-names
     if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
       tabNavigationLinks[activeIndex].classList.remove('is-active');
       tabNavigationLinks[index].classList.add('is-active');
       tabContentContainers[activeIndex].classList.remove('is-active');
       tabContentContainers[index].classList.add('is-active');
       activeIndex = index;
     }
-  };
+  }
+
+  /**
+   * handleClick
+   * @description Handles click event listeners on each of the links in the
+   *   tab navigation. Returns nothing.
+   * @param {HTMLElement} link The link to listen for events on
+   * @param {Number} index The index of that link
+   */
+  function handleClick(link, index) { // eslint-disable-line func-names
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      goToTab(index);
+    });
+  }
 
   /**
    * init
    * @description Initializes the component by removing the no-js class from
    *   the component, and attaching event listeners to each of the nav items.
    *   Returns nothing.
    */
-  for (var e = 0; e < el.length; e++) {
-    el[e].classList.remove('no-js');
-  }
+  Array.from(el).forEach((item) => {
+    item.classList.remove('no-js');
+  });
 
-  for (var i = 0; i < tabNavigationLinks.length; i++) {
-    var link = tabNavigationLinks[i];
+  Array.from(tabNavigationLinks).forEach((tabNavigationLink, i) => {
+    const link = tabNavigationLink;
     handleClick(link, i);
-  }
-
-})();
+  });
+}());

components/js/reload-scripts.js

@@ -14,8 +14,8 @@ function async(src, callback) {
   script.src = src;
   if (callback) {
     script.addEventListener(
-      "load",
-      e => {
+      'load',
+      (e) => {
         callback(null, e);
       },
       false
@@ -24,7 +24,7 @@ function async(src, callback) {
   head.appendChild(script);
 }
 
-scripts.forEach(element => {
+Array.from(scripts).forEach((element) => {
   // If the script has the data-name attribute.
   if (element.dataset.name) {
     const scriptSrc = element.dataset.src;
@@ -33,7 +33,7 @@ scripts.forEach(element => {
         if (typeof Drupal === 'object' && typeof Drupal.attachBehaviors === 'function') {
           const behaviors = Object.values(Drupal.behaviors);
           // Only run attachBehaviors once.
-          behaviors.forEach(behavior => {
+          behaviors.forEach(() => {
             Drupal.attachBehaviors();
           });
         }

emulsify.libraries.yml

@@ -2,12 +2,15 @@ global:
   css:
     theme:
       dist/style.css: {}
+  js:
+    components/js/babel-polyfill.js: {}
 
 main-menu:
   js:
     dist/02-molecules/menus/main-menu/main-menu.js: {}
   dependencies:
     - core/drupal
+
 
 sprite:
   js:

gulpfile.js

@@ -1,16 +1,13 @@
 /* globals require */
 
-// eslint-disable-next-line strict
-'use strict';
-
 // General
-var gulp = require('gulp-help')(require('gulp'));
-var localConfig = {};
+const gulp = require('gulp-help')(require('gulp')); // eslint-disable-line import/no-extraneous-dependencies
+
+let localConfig = {};
 
 try {
-  localConfig = require('./local.gulp-config');
-}
-catch (e) {
+  localConfig = require('./local.gulp-config'); // eslint-disable-line import/no-unresolved
+} catch (e) {
   if (e.code !== 'MODULE_NOT_FOUND') {
     throw e;
   }