Added CSS classes information in the npm.php file.

content/body/carousel.php

@@ -162,7 +162,8 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to
 
 <?= includeNPMInstructions(
     'enable-carousel', 
-    array(), 
+    array(),
+    'enable-carousel',
     false, 
     array(
       "es6Notes" => "<p><em><strong>Note:</strong> If you want to have the skip links like in the example above, please ensure you also include the <a href=\"skip-link.php#npm-instructions\">NPM module for skip links as well</a>.</em></p>",

content/body/combobox.php

@@ -790,4 +790,4 @@
 </script>
 
 
-<?= includeNPMInstructions('combobox', array(), false, array(), '.enable-combobox') ?>
+<?= includeNPMInstructions('combobox', array(), 'enable-combobox', false, array(), '.enable-combobox') ?>

content/body/dialog.php

@@ -133,4 +133,4 @@
 }
 </script>
 
-<?= includeNPMInstructions('enable-dialog', array(), true) ?>
+<?= includeNPMInstructions('enable-dialog', array(), '', true) ?>

content/body/dropdown.php

@@ -333,6 +333,7 @@
 <?= includeNPMInstructions(
     'enable-drawer',
     array(),
+    'enable-drawer',
     false,
     array(),
     null,

content/body/listbox.php

@@ -447,6 +447,7 @@ class="enable-listbox__button">&nbsp;</button>
 <?= includeNPMInstructions(
   'enable-listbox',
   array(),
+  'enable-listbox',
   false,
   array(),
   null,

content/body/multi-level-hamburger-menu.php

@@ -300,4 +300,4 @@
   include('../templates/enable-hamburger.html');
 ?>
 
-<?= includeNPMInstructions('enable-hamburger') ?>
+<?= includeNPMInstructions('enable-hamburger', array(), 'enable-flyout') ?>

content/body/pagination-table.php

@@ -1816,7 +1816,8 @@
 
 <?= includeNPMInstructions(
   'paginate',
-  array(), 
+  array(),
+  'pagination',
   false, 
   array(),
   '.pagination__table'

content/body/pause-anim-control.php

@@ -476,7 +476,9 @@
 
 
 <?= includeNPMInstructions(
-    'pause-anim-control'
+    'pause-anim-control',
+    array(),
+    'pause-anim-control',
   ) 
 ?>
 

content/body/skip-link.php

@@ -605,4 +605,4 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to
 }
 </script>
 
-<?= includeNPMInstructions('enable-visible-on-focus') ?>
+<?= includeNPMInstructions('enable-visible-on-focus', array(), 'enable-mobile-visible-on-focus') ?>

content/body/slider.php

@@ -511,4 +511,4 @@ class="enable-mobile-visible-on-focus ${classNameRoot}__increase ${classNameRoot
   </template>
 </div>
 
-<?= includeNPMInstructions('enable-slider', array('js/modules/interpolate.js')) ?>
+<?= includeNPMInstructions('enable-slider', array('js/modules/interpolate.js'), 'enable-slider') ?>

content/body/sortable-table.php

@@ -16,7 +16,7 @@
             <a href="https://dequeuniversity.com/library/aria/table-sortable">excellent sortable table example from Deque University</a>.
         </p>    
         <div class="enable-example" id="sortable-table-example">
-            <div class="deque-table-sortable-group" id="sortable-table">
+            <div class="deque-table-sortable__group" id="sortable-table">
 
                 <div id="user-info-table__sort-instructions">
                     Click the table heading buttons to sort the table by the data in its column.
@@ -159,6 +159,7 @@ class="deque-table-sortable"
 <?= includeNPMInstructions(
     'sortable-tables',
     array(),
+    'deque-table-sortable',
     false,
     array(),
     '.pagination__table') ?>

content/body/spinner.php

@@ -228,6 +228,7 @@
 <?= includeNPMInstructions(
   'spinbutton',
   array(),
+  '',
   false,
   array(),
   '.spinbutton'

content/body/switch.php

@@ -86,6 +86,7 @@ class="switch" aria-describedby="speakerPower-checked">
 <?= includeNPMInstructions(
   'switch',
   array(),
+  '',
   false,
   array(),
   null,

content/body/tabs.php

@@ -227,6 +227,7 @@
 <?= includeNPMInstructions(
   'tabs',
   array(),
+  '',
   false,
   array(),
   '.enable-tablist'

content/body/tooltip.php

@@ -136,6 +136,7 @@
 <?= includeNPMInstructions(
   'tooltip',
   array(),
+  'tooltip',
   false,
   array(),
   null,

content/body/video-player.php

@@ -150,6 +150,7 @@
     <?= includeNPMInstructions(
         'ablePlayerCustomizations',
         array(),
+        '',
         false,
         array(
             "otherImports" => "// AblePlayer uses this module, available via NPM<br/>import Cookies from 'js-cookie';"

css/sortable-tables.css

@@ -5,63 +5,63 @@
   font-size: 1.25rem;
   border-bottom: double 3px #000;
 }
-.deque-table-sortable-group caption {
+.deque-table-sortable__group caption {
   margin-bottom: 15px;
 }
-.deque-table-sortable-group table {
+.deque-table-sortable__group table {
   border-collapse: collapse;
   border-spacing: 0;
   overflow: visible;
   margin-top: 8px;
   width: 100%;
 }
-.deque-table-sortable-group table thead {
+.deque-table-sortable__group table thead {
   border-bottom: 1px solid #e3e3e3;
 }
-.deque-table-sortable-group table thead th {
+.deque-table-sortable__group table thead th {
   position: relative;
 }
-.deque-table-sortable-group table thead th:last-child {
+.deque-table-sortable__group table thead th:last-child {
   border-right: none;
 }
-.deque-table-sortable-group table thead th .sortableColumnLabel {
+.deque-table-sortable__group table thead th .sortableColumnLabel {
   display: inline-block;
   height: 100%;
   cursor: pointer;
   padding: 0 0 0 1.5625rem;
   text-align: left;
 }
-.deque-table-sortable-group table thead th .sortableColumnLabel:hover {
+.deque-table-sortable__group table thead th .sortableColumnLabel:hover {
   outline: 1px dashed #767676;
 }
-.deque-table-sortable-group table thead th button {
+.deque-table-sortable__group table thead th button {
   color: white;
   background: transparent;
   border: 0;
   padding-left: 0;
   font-size: inherit;
   font-weight: inherit;
 }
-.deque-table-sortable-group table thead th button {
+.deque-table-sortable__group table thead th button {
   margin: -25px 0;
   padding: 25px 0;
 }
-.deque-table-sortable-group table thead th button:hover {
+.deque-table-sortable__group table thead th button:hover {
   margin: 0;
 }
-.deque-table-sortable-group table thead th button:focus {
+.deque-table-sortable__group table thead th button:focus {
   margin: 0;
   z-index: 1;
 }
-.deque-table-sortable-group table thead th button:active {
+.deque-table-sortable__group table thead th button:active {
   color: #000000;
   outline: 1px solid transparent;
   margin: 0;
 }
-.deque-table-sortable-group table thead th[colspan]:not([colspan='1']) {
+.deque-table-sortable__group table thead th[colspan]:not([colspan='1']) {
   text-align: center;
 }
-.deque-table-sortable-group table thead th .sortableColumnLabel:after {
+.deque-table-sortable__group table thead th .sortableColumnLabel:after {
   /* This is the up and down arrow SVG. */
   content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 41 57' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle /%3E%3Cdesc /%3E%3Cdefs /%3E%3Cg fill='none' fill-rule='evenodd' id='Icons' stroke='none' stroke-width='1'%3E%3Cg fill='%23fff' stroke='%23000' id='XXX-Artboard-1' transform='translate(-1239.000000, -138.000000)'%3E%3Cg id='Double-Arrows' transform='translate(1239.000000, 138.150000)'%3E%3Cpath d='M10.5623119,31.5480425 C9.30468998,32.6283056 8.28518598,32.1695935 8.28518598,30.5136396 L8.28518598,-6.51787882 C8.28518598,-8.16942688 9.29767763,-8.63856827 10.5623119,-7.55228175 L31.0451159,10.041891 C32.3027378,11.1221541 32.3097502,12.8675832 31.0451159,13.9538698 L10.5623119,31.5480425 Z' id='Triangle-1' transform='translate(20.138075, 11.997111) rotate(-90.000000) translate(-20.138075, -11.997111) ' /%3E%3Cpath d='M10.5623119,63.8182709 C9.30468998,64.898534 8.28518598,64.4398218 8.28518598,62.7838679 L8.28518598,25.7523495 C8.28518598,24.1008014 9.29767763,23.6316601 10.5623119,24.7179466 L31.0451159,42.3121194 C32.3027378,43.3923825 32.3097502,45.1378116 31.0451159,46.2240981 L10.5623119,63.8182709 Z' id='Triangle-1' transform='translate(20.138075, 44.267339) scale(1, -1) rotate(-90.000000) translate(-20.138075, -44.267339) ' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   height: 1.0625rem;
@@ -70,30 +70,30 @@
   left: 6px;
   top: calc(50% - 1.0625rem / 2);
 }
-.deque-table-sortable-group table thead th[aria-sort] .sortableColumnLabel:after {
+.deque-table-sortable__group table thead th[aria-sort] .sortableColumnLabel:after {
   /* This is the down arrow SVG. */
   content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 41 57' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle /%3E%3Cdesc /%3E%3Cdefs /%3E%3Cg fill='none' fill-rule='evenodd' id='Icons' stroke='none' stroke-width='1'%3E%3Cg fill='%23fff' stroke='%23000' id='XXX-Artboard-1' transform='translate(-1239.000000, -138.000000)'%3E%3Cg id='Double-Arrows' transform='translate(1239.000000, 138.150000)'%3E%3Cpath d='M10.5623119,63.8182709 C9.30468998,64.898534 8.28518598,64.4398218 8.28518598,62.7838679 L8.28518598,25.7523495 C8.28518598,24.1008014 9.29767763,23.6316601 10.5623119,24.7179466 L31.0451159,42.3121194 C32.3027378,43.3923825 32.3097502,45.1378116 31.0451159,46.2240981 L10.5623119,63.8182709 Z' id='Triangle-1' transform='translate(20.138075, 44.267339) scale(1, -1) rotate(-90.000000) translate(-20.138075, -44.267339) ' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
-.deque-table-sortable-group table thead th[aria-sort='descending'] .sortableColumnLabel:after {
+.deque-table-sortable__group table thead th[aria-sort='descending'] .sortableColumnLabel:after {
   transform: scaleY(-1) translateY(-0.3125rem);
 }
-.deque-table-sortable-group table thead:before {
+.deque-table-sortable__group table thead:before {
   content: '';
   display: block;
   width: 7px;
 }
-.deque-table-sortable-group table thead td,
-.deque-table-sortable-group table thead th {
+.deque-table-sortable__group table thead td,
+.deque-table-sortable__group table thead th {
   padding: 12px 11px 12px 0;
   text-align: left;
   vertical-align: middle;
 }
-.deque-table-sortable-group table tbody td th {
+.deque-table-sortable__group table tbody td th {
   text-align: left;
   padding: 7px;
   border-right: 1px solid #cccccc;
 }
-.deque-table-sortable-group table tbody td:last-child,
-.deque-table-sortable-group table tbody th:last-child {
+.deque-table-sortable__group table tbody td:last-child,
+.deque-table-sortable__group table tbody th:last-child {
   border-right: none;
 }

js/modules/paginate.js

@@ -75,7 +75,7 @@ const paginationTables = new function() {
 
     for (let i=0; i<rows.length; i++) {
       rows[i].classList.remove(inactiveClass);
-    };
+    }
 
     table.dataset.currentpage = 0;
   }

js/modules/sortable-tables.js

@@ -283,7 +283,7 @@ const sortableTables = new (function () {
 
   this.activateAllSortableTables = (withinEl, options) => {
     var sortableTables = (withinEl || document).querySelectorAll(
-      ".deque-table-sortable-group"
+      ".deque-table-sortable__group"
     );
     for (var i = 0; i < sortableTables.length; i++) {
       this.add(sortableTables[i], options);

js/test/page-setup.test.js

@@ -5,19 +5,16 @@ import testHelpers from './test-helpers.js';
 import fs from 'fs';
 
 const fileList =  testHelpers.getPageList();
-let mobileBrowser, mobilePage, desktopBrowser, desktopPage;
+let desktopBrowser, desktopPage;
 
-describe('Test Focus States on all pages on Enable', () => {
+describe('Test all pages on Enable to Ensure the information is written correctly', () => {
   beforeAll(async () => {
     // Put code here that should execute before starting tests.
-    mobileBrowser = await testHelpers.getMobileBrowser();
-    mobilePage = await mobileBrowser.newPage();
     desktopBrowser = await testHelpers.getDesktopBrowser();
     desktopPage = await desktopBrowser.newPage();
   });
 
   afterAll(async () => {
-    await mobileBrowser.close();
     await desktopBrowser.close();
   });
 
@@ -45,36 +42,33 @@ describe('Test Focus States on all pages on Enable', () => {
       const twitterGraphPosterContent = twitterGraphPoster.getAttribute('content');
       const openGraphPosterURL = openGraphPosterContent.split('?')[0];
       const twitterGraphPosterURL = twitterGraphPosterContent;
+      const areTherePHPJestErrors = (document.querySelector('.jest-error') !== null);
 
 
       return {
         openGraphPosterURL,
         twitterGraphPosterURL,
+        areTherePHPJestErrors
       }
 
     });
 
-    const { openGraphPosterURL, twitterGraphPosterURL } = domInfo;
+    const { openGraphPosterURL, twitterGraphPosterURL, areTherePHPJestErrors } = domInfo;
 
     expect(openGraphPosterURL).toBe(twitterGraphPosterURL);
     expect(fs.existsSync(`./${openGraphPosterURL}`)).toBe(true);
-
+    expect(areTherePHPJestErrors).toBe(false);
 
   }
 
 
 
   for (let i=0; i<fileList.length; i++) {
     const file = fileList[i];
-      it(`Desktop Breakpoint: Test page setup on ${fileList[i]}`, async () => {
+      it(`Desktop Breakpoint: Test page setup on ${file}`, async () => {
         await testPage(fileList[i], desktopPage);
       });
 
-      /*
-      it(`Mobile Breakpoint: Test page setup on ${fileList[i]}`, async () => {
-        await testPage(fileList[i], mobilePage);
-      });
-      */
   }
 
 });

less/sortable-tables.less

@@ -1,6 +1,6 @@
 @import "shared/mixins-and-vars";
 
-.deque-table-sortable-group {
+.deque-table-sortable__group {
     caption {
         margin-bottom: 15px;
     }

templates/includes/functions.php

@@ -56,7 +56,7 @@ function dashesToCamelCase($string, $capitalizeFirstCharacter = false)
 }
 
 
-function includeNPMInstructions($moduleName, $supportingModuleNames = array('js/modules/accessibility.module.js'), $isPolyfill = false, $other = array(), $doesHaveAddMethod = null, $willWorkAfterPageLoad = false, $noInit = false) {
+function includeNPMInstructions($moduleName, $supportingModuleNames = array('js/modules/accessibility.module.js'), $bemPrefix = null, $isPolyfill = false, $other = array(), $doesHaveAddMethod = null, $willWorkAfterPageLoad = false, $noInit = false) {
   includeFileWithVariables('includes/npm.php', array(
     'moduleName' => $moduleName,
     'moduleVar' => dashesToCamelCase($moduleName),
@@ -65,7 +65,8 @@ function includeNPMInstructions($moduleName, $supportingModuleNames = array('js/
     'other' => $other,
     'doesHaveAddMethod' => $doesHaveAddMethod,
     'willWorkAfterPageLoad' => $willWorkAfterPageLoad,
-    'noInit' => $noInit
+    'noInit' => $noInit,
+    'bemPrefix' => $bemPrefix
   ));
 }
 

templates/includes/npm.php

@@ -51,7 +51,23 @@
   }
 ?>
 
+<?php 
+  if ($bemPrefix != '') {
+?>
+<h4>Important Note On The CSS Classes Used In This Module:</h4>
+
+<p><strong>This module requires specific CSS class names to be used in order it to work correctly.</strong>
+These CSS classes begin with <code><?= $bemPrefix ?>__</code>.  Please see the documentation above to see where these CSS classes are inserted.
+
+<?php
+  } else if ($bemPrefix === true || $bemPrefix === false) {
+?>
+
+<div class="jest-error">We forgot to add the $bemPrefix variable on the function call to includeNPMInstructions()</div>
 
+<?php
+  }
+?>
 
 <h4>Using NPM/Webpack to load ES6 Modules:</h4>