Infrastructure: Add Prettier ESLint config (pull #1553)

* Infrastructure: Add Prettier for JS Formatting
* Use the default settings and tie it to the current ESLint setup
* chore: Run fix for Prettier JS formatting

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "eslint:recommended",
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
   "env": {
     "browser": true
   },

.github/workflows/lint-js.yml

@@ -5,6 +5,7 @@ on:
       - "dependabot/**"
     paths:
       - "package*.json"
+      - ".prettier*"
       - ".eslint*"
       - "**/*.js"
       - ".github/workflows/lint-js.yml"
@@ -13,6 +14,7 @@ on:
   pull_request:
     paths:
       - "package*.json"
+      - ".prettier*"
       - ".eslint*"
       - "**/*.js"
       - ".github/workflows/lint-js.yml"

examples/accordion/js/accordion.js

@@ -1,134 +1,143 @@
 /*
-*   This content is licensed according to the W3C Software License at
-*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*   Simple accordion pattern example
-*/
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ *   Simple accordion pattern example
+ */
 
 'use strict';
 
-Array.prototype.slice.call(document.querySelectorAll('.Accordion')).forEach(function (accordion) {
-
-  // Allow for multiple accordion sections to be expanded at the same time
-  var allowMultiple = accordion.hasAttribute('data-allow-multiple');
-  // Allow for each toggle to both open and close individually
-  var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
-
-  // Create the array of toggle elements for the accordion group
-  var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.Accordion-trigger'));
-  var panels = Array.prototype.slice.call(accordion.querySelectorAll('.Accordion-panel'));
-
-
-  accordion.addEventListener('click', function (event) {
-    var target = event.target;
-
-    if (target.classList.contains('Accordion-trigger')) {
-      // Check if the current toggle is expanded.
-      var isExpanded = target.getAttribute('aria-expanded') == 'true';
-      var active = accordion.querySelector('[aria-expanded="true"]');
-
-      // without allowMultiple, close the open accordion
-      if (!allowMultiple && active && active !== target) {
-        // Set the expanded state on the triggering element
-        active.setAttribute('aria-expanded', 'false');
-        // Hide the accordion sections, using aria-controls to specify the desired section
-        document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');
-
-        // When toggling is not allowed, clean up disabled state
-        if (!allowToggle) {
-          active.removeAttribute('aria-disabled');
+Array.prototype.slice
+  .call(document.querySelectorAll('.Accordion'))
+  .forEach(function (accordion) {
+    // Allow for multiple accordion sections to be expanded at the same time
+    var allowMultiple = accordion.hasAttribute('data-allow-multiple');
+    // Allow for each toggle to both open and close individually
+    var allowToggle = allowMultiple
+      ? allowMultiple
+      : accordion.hasAttribute('data-allow-toggle');
+
+    // Create the array of toggle elements for the accordion group
+    var triggers = Array.prototype.slice.call(
+      accordion.querySelectorAll('.Accordion-trigger')
+    );
+    var panels = Array.prototype.slice.call(
+      accordion.querySelectorAll('.Accordion-panel')
+    );
+
+    accordion.addEventListener('click', function (event) {
+      var target = event.target;
+
+      if (target.classList.contains('Accordion-trigger')) {
+        // Check if the current toggle is expanded.
+        var isExpanded = target.getAttribute('aria-expanded') == 'true';
+        var active = accordion.querySelector('[aria-expanded="true"]');
+
+        // without allowMultiple, close the open accordion
+        if (!allowMultiple && active && active !== target) {
+          // Set the expanded state on the triggering element
+          active.setAttribute('aria-expanded', 'false');
+          // Hide the accordion sections, using aria-controls to specify the desired section
+          document
+            .getElementById(active.getAttribute('aria-controls'))
+            .setAttribute('hidden', '');
+
+          // When toggling is not allowed, clean up disabled state
+          if (!allowToggle) {
+            active.removeAttribute('aria-disabled');
+          }
         }
-      }
-
-      if (!isExpanded) {
-        // Set the expanded state on the triggering element
-        target.setAttribute('aria-expanded', 'true');
-        // Hide the accordion sections, using aria-controls to specify the desired section
-        document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');
 
-        // If toggling is not allowed, set disabled state on trigger
-        if (!allowToggle) {
-          target.setAttribute('aria-disabled', 'true');
+        if (!isExpanded) {
+          // Set the expanded state on the triggering element
+          target.setAttribute('aria-expanded', 'true');
+          // Hide the accordion sections, using aria-controls to specify the desired section
+          document
+            .getElementById(target.getAttribute('aria-controls'))
+            .removeAttribute('hidden');
+
+          // If toggling is not allowed, set disabled state on trigger
+          if (!allowToggle) {
+            target.setAttribute('aria-disabled', 'true');
+          }
+        } else if (allowToggle && isExpanded) {
+          // Set the expanded state on the triggering element
+          target.setAttribute('aria-expanded', 'false');
+          // Hide the accordion sections, using aria-controls to specify the desired section
+          document
+            .getElementById(target.getAttribute('aria-controls'))
+            .setAttribute('hidden', '');
         }
-      }
-      else if (allowToggle && isExpanded) {
-        // Set the expanded state on the triggering element
-        target.setAttribute('aria-expanded', 'false');
-        // Hide the accordion sections, using aria-controls to specify the desired section
-        document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
-      }
-
-      event.preventDefault();
-    }
-  });
-
-  // Bind keyboard behaviors on the main accordion container
-  accordion.addEventListener('keydown', function (event) {
-    var target = event.target;
-    var key = event.which.toString();
-
-    var isExpanded = target.getAttribute('aria-expanded') == 'true';
-    var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
-
-    // 33 = Page Up, 34 = Page Down
-    var ctrlModifier = (event.ctrlKey && key.match(/33|34/));
-
-    // Is this coming from an accordion header?
-    if (target.classList.contains('Accordion-trigger')) {
-      // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
-      // 38 = Up, 40 = Down
-      if (key.match(/38|40/) || ctrlModifier) {
-        var index = triggers.indexOf(target);
-        var direction = (key.match(/34|40/)) ? 1 : -1;
-        var length = triggers.length;
-        var newIndex = (index + length + direction) % length;
-
-        triggers[newIndex].focus();
 
         event.preventDefault();
       }
-      else if (key.match(/35|36/)) {
-        // 35 = End, 36 = Home keyboard operations
-        switch (key) {
-          // Go to first accordion
-          case '36':
-            triggers[0].focus();
-            break;
+    });
+
+    // Bind keyboard behaviors on the main accordion container
+    accordion.addEventListener('keydown', function (event) {
+      var target = event.target;
+      var key = event.which.toString();
+
+      var isExpanded = target.getAttribute('aria-expanded') == 'true';
+      var allowToggle = allowMultiple
+        ? allowMultiple
+        : accordion.hasAttribute('data-allow-toggle');
+
+      // 33 = Page Up, 34 = Page Down
+      var ctrlModifier = event.ctrlKey && key.match(/33|34/);
+
+      // Is this coming from an accordion header?
+      if (target.classList.contains('Accordion-trigger')) {
+        // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
+        // 38 = Up, 40 = Down
+        if (key.match(/38|40/) || ctrlModifier) {
+          var index = triggers.indexOf(target);
+          var direction = key.match(/34|40/) ? 1 : -1;
+          var length = triggers.length;
+          var newIndex = (index + length + direction) % length;
+
+          triggers[newIndex].focus();
+
+          event.preventDefault();
+        } else if (key.match(/35|36/)) {
+          // 35 = End, 36 = Home keyboard operations
+          switch (key) {
+            // Go to first accordion
+            case '36':
+              triggers[0].focus();
+              break;
             // Go to last accordion
-          case '35':
-            triggers[triggers.length - 1].focus();
-            break;
+            case '35':
+              triggers[triggers.length - 1].focus();
+              break;
+          }
+          event.preventDefault();
         }
-        event.preventDefault();
-
       }
-
-    }
-  });
-
-  // These are used to style the accordion when one of the buttons has focus
-  accordion.querySelectorAll('.Accordion-trigger').forEach(function (trigger) {
-
-    trigger.addEventListener('focus', function (event) {
-      accordion.classList.add('focus');
-    });
-
-    trigger.addEventListener('blur', function (event) {
-      accordion.classList.remove('focus');
     });
 
-  });
-
-  // Minor setup: will set disabled state, via aria-disabled, to an
-  // expanded/ active accordion which is not allowed to be toggled close
-  if (!allowToggle) {
-    // Get the first expanded/ active accordion
-    var expanded = accordion.querySelector('[aria-expanded="true"]');
-
-    // If an expanded/ active accordion is found, disable
-    if (expanded) {
-      expanded.setAttribute('aria-disabled', 'true');
+    // These are used to style the accordion when one of the buttons has focus
+    accordion
+      .querySelectorAll('.Accordion-trigger')
+      .forEach(function (trigger) {
+        trigger.addEventListener('focus', function (event) {
+          accordion.classList.add('focus');
+        });
+
+        trigger.addEventListener('blur', function (event) {
+          accordion.classList.remove('focus');
+        });
+      });
+
+    // Minor setup: will set disabled state, via aria-disabled, to an
+    // expanded/ active accordion which is not allowed to be toggled close
+    if (!allowToggle) {
+      // Get the first expanded/ active accordion
+      var expanded = accordion.querySelector('[aria-expanded="true"]');
+
+      // If an expanded/ active accordion is found, disable
+      if (expanded) {
+        expanded.setAttribute('aria-disabled', 'true');
+      }
     }
-  }
-
-});
+  });

examples/alert/js/alert.js

@@ -1,33 +1,29 @@
 /*
-*   This content is licensed according to the W3C Software License at
-*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*/
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ */
 
 'use strict';
 
 window.addEventListener('load', function () {
-
   var button = document.getElementById('alert-trigger');
 
   button.addEventListener('click', addAlert);
-
 });
 
 /*
-* @function addAlert
-*
-* @desc Adds an alert to the page
-*
-* @param   {Object}  event  -  Standard W3C event object
-*
-*/
-
-function addAlert (event) {
-
+ * @function addAlert
+ *
+ * @desc Adds an alert to the page
+ *
+ * @param   {Object}  event  -  Standard W3C event object
+ *
+ */
+
+function addAlert(event) {
   var example = document.getElementById('example');
   var template = document.getElementById('alert-template').innerHTML;
 
   example.innerHTML = template;
-
 }