Merge pull request #2851 from uswds/release-1.6.9

Release 1.6.9

.circleci/config.yml

@@ -39,7 +39,7 @@ jobs:
       - run:
           name: Checking build
           command: |
-            if [[ $(echo "$CIRCLE_BRANCH" | grep -c "pull") -lt 0 ]]; then
+            if [[ $(echo "$CIRCLE_BRANCH" | grep -c "pull") -le 0 ]]; then
               ls -agolf dist/
               codeclimate-test-reporter < coverage/lcov.info
             fi

CONTRIBUTING.md

@@ -88,6 +88,15 @@ bin)/gulp` instead of `gulp`.)
 Note that running the tests also requires an installation of
 Chrome v59 or higher (v60 if you're on Windows).
 
+If you want to run a single test file, run `npm run mocha ${path/to/spec-file}`,
+substituting the actual path to the spec. Only javascript files can be executed by the `mocha` runner,
+and only those js files in the `spec` directory ending with a `.spec.js`.
+
+Alternatively, you can add an `.only` to a `describe` or `it` block (i.e. `describe.only('my spec')`)
+and run the `npm run test` command. Keep in mind that this will also run linters and aXe accessibility tests.
+
+To run all of the unit tests, run `npm run test:unit`.
+
 **For non-OSX users**:
 Before running the tests, if you are developing on a machine running an operating system other than OSX,
 you'll need to export a `CHROME_PATH` environment variable that points to Chrome's binary location. This ensures `chrome-launcher`
@@ -111,15 +120,15 @@ branch) to generate your golden screenshots.
 To generate the golden screenshots, run:
 
 ```
-node spec/visual-regression-tester.js test --updateGolden
+npm run test:visual:update
 ```
 
 Then, make any CSS refactorings (or switch to a branch that has them).
 
 To compare the current state of your CSS to the golden screenshots, run:
 
 ```
-node spec/visual-regression-tester.js test
+npm run test:visual
 ```
 
 If the current screenshots don't match their golden counterparts, you will

config/gulp/javascript.js

@@ -31,9 +31,13 @@ gulp.task(task, function (done) {
     .pipe(gulp.dest('dist/js'));
 
   stream
-    .pipe(sourcemaps.init({ loadMaps: true }))
-    .pipe(uglify())
-    .on('error', gutil.log)
+    .pipe(sourcemaps.init({ loadMaps: true }));
+
+  if (process.env.NODE_ENV !== 'development') {
+    stream.pipe(uglify());
+  }
+
+  stream.on('error', gutil.log)
     .pipe(rename({
       suffix: '.min',
     }))

config/gulp/test.js

@@ -11,6 +11,11 @@ gulp.task('test', function () {
     .pipe(mocha(mochaOpts));
 });
 
+gulp.task('regression', () => {
+  return gulp.src('spec/headless-chrome.js')
+    .pipe(mocha(mochaOpts));
+});
+
 gulp.task('cover', function () {
   return gulp.src('spec/unit/**/*.spec.js')
     .pipe(mocha(Object.assign(mochaOpts, {

examples/README.md

@@ -19,3 +19,10 @@ that uses the `package.json` in each directory to:
 [Node.js]: https://nodejs.org/en/about/
 [npm]: https://docs.npmjs.com/getting-started/what-is-npm
 [scripts]: https://docs.npmjs.com/misc/scripts
+
+## General
+
+If you `require('uswds')` in your bundled JS, you will get the minified ES5 browser bundle. If you're handling ES5 conversion already or using a tool that does it automatically, you can work around this in two ways:
+
+1. Import the specific entry point with `require('uswds/src/js/start')`.
+1. Configure your bundler to read the entry point from the `jsnext:main` field instead of `main`.

examples/browserify/README.md

@@ -45,3 +45,9 @@ for more information.
 [source map]: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
 [uglifyjs]: https://github.com/mishoo/UglifyJS2
 [uglifyify]: https://github.com/hughsk/uglifyify
+
+### JS bundling guidance
+- You don't need to use `babelify` if you're just using `require('uswds')`, because our ["main" field](https://github.com/18F/web-design-standards/blob/develop/package.json#L5) points to the built distribution.
+- If you wish to import uswds submodules directly with browserify,
+ such as `require('uswds/src/js/components/accordion')`, you should use `babelify` as a global transform.
+- If you're using `babelify` (or another Babel-powered browserify transform) already, you can access the ES2015 entry point directly with `require('uswds/src/js/start')`. **Note that you must either use the transform globally, or tell it _not_ to exclude scripts in `node_modules`.**

examples/webpack/README.md

@@ -28,3 +28,7 @@ for more information.
 [es2015]: https://babeljs.io/learn-es2015/
 [npm]: https://docs.npmjs.com/getting-started/what-is-npm
 [source map]: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
+
+### JS bundling guidance
+- Because webpack 2 understands ES2015 natively, it's safe to use one of the above techniques import the original sources.
+- As of this writing, it's not possible to take advantage of [tree shaking](https://webpack.js.org/guides/tree-shaking/) because the Standards source JavaScript doesn't use the `import`/`export` module syntax.