diff --git a/.eslintrc.yml b/.eslintrc.yml index 804dd60e63..3ca9a68039 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -5,3 +5,7 @@ env: node: true browser: true es6: true +rules: + import/no-extraneous-dependencies: + - error + - devDependencies: true diff --git a/README.md b/README.md index b630ff4966..e50c34644d 100644 --- a/README.md +++ b/README.md @@ -119,7 +119,7 @@ How you implement the design system depends on the needs of your project and you ``` -We offer both the CSS and the JavaScript in two versions — minified and un-minified. (In the examples above, we are using the minified files.) Use the minified files in a production environment or to reduce the file size of your downloaded assets. Use the un-minified files if you are in a development environment or would like to debug the CSS or JavaScript assets in the browser. +We offer both the CSS and the JavaScript in two versions — minified and un-minified. (In the examples above, we are using the minified files.) Use the minified files in a production environment or to reduce the file size of your downloaded assets. Use the un-minified files if you are in a development environment or would like to debug the CSS or JavaScript assets in the browser. And that’s it — you should now be able to copy our code samples into your `index.html` and start using the design system. diff --git a/config/gulp/build.js b/config/gulp/build.js index 05f6f14f8a..298cb57a87 100644 --- a/config/gulp/build.js +++ b/config/gulp/build.js @@ -1,49 +1,48 @@ -var gulp = require('gulp'); -var dutil = require('./doc-util'); -var del = require('del'); - -gulp.task('clean-dist', function (done) { +const gulp = require('gulp'); +const del = require('del'); +const dutil = require('./doc-util'); +const cFlags = require('./cflags'); +gulp.task('clean-dist', (done) => { if (!cFlags.cleanup) { dutil.logMessage( 'clean-dist', - 'Skipping cleaning up the distribution directories.' + 'Skipping cleaning up the distribution directories.', ); return done(); } - dutil.logMessage('clean-dist', 'Removing distribution directories.'); return del('dist'); - }); -gulp.task('docs', function (done) { +gulp.task('docs', (done) => { dutil.logMessage('docs', 'Copying documentation dist dir'); - var stream = gulp.src([ + const stream = gulp.src([ 'README.md', 'LICENSE.md', - 'CONTRIBUTING.md' - ]) + 'CONTRIBUTING.md', + ]) .pipe(gulp.dest('dist')); + done(); return stream; - }); + gulp.task('build', gulp.series( - function (done) { + (done) => { dutil.logIntroduction(); dutil.logMessage( 'build', - 'Creating distribution directories.' + 'Creating distribution directories.', ); done(); - }, - 'clean-dist', + }, + 'clean-dist', 'docs', gulp.parallel( 'sass', @@ -54,5 +53,4 @@ gulp.task('build', // We need to copy the Sass to dist *after* the sass task, to ensure // that vendor libraries have been copied to the Sass directory first. 'copy-dist-sass', - ), -); \ No newline at end of file + )); diff --git a/config/gulp/cflags.js b/config/gulp/cflags.js new file mode 100644 index 0000000000..097ea0dff7 --- /dev/null +++ b/config/gulp/cflags.js @@ -0,0 +1,4 @@ +module.exports = { + test: true, + cleanup: true, +}; diff --git a/config/gulp/doc-util.js b/config/gulp/doc-util.js index f135b3d554..47697caf70 100644 --- a/config/gulp/doc-util.js +++ b/config/gulp/doc-util.js @@ -1,122 +1,102 @@ -var pkg = require('../../package.json'); -var log = require('fancy-log'); -var colors = require('ansi-colors'); -var notifier = require('node-notifier'); +const log = require('fancy-log'); +const colors = require('ansi-colors'); +const notifier = require('node-notifier'); +const pkg = require('../../package.json'); -var shellPrefix = '$'; +const shellPrefix = '$'; -function drawFlag () { - - // American Flag in ASCII - // +function drawFlag() { log( - colors.white('') + colors.white(''), ); log( - colors.white('* * * * * ========================') + colors.white('* * * * * ========================'), ); log( - colors.white('* * * * * ========================') + colors.white('* * * * * ========================'), ); log( - colors.white('* * * * * ========================') + colors.white('* * * * * ========================'), ); log( - colors.white('* * * * * ========================') + colors.white('* * * * * ========================'), ); log( - colors.white('==================================') + colors.white('=================================='), ); log( - colors.white('==================================') + colors.white('=================================='), ); log( - colors.white('==================================') + colors.white('=================================='), ); log( - colors.white('') + colors.white(''), ); } -function notify (title, message, wait) { +function notify(title, message, wait) { notifier.notify({ - title: title, - message: message, + title, + message, icon: 'src/img/favicons/favicon-192.png', - wait: wait, + wait, }); } module.exports = { - pkg: { - name: pkg.name, version: pkg.version, - }, - dirName: pkg.name + '-' + pkg.version, - - logIntroduction: function (message) { - - message = message || 'U.S. Web Design System'; + dirName: `${pkg.name}-${pkg.version}`, + logIntroduction(message) { + const introMessage = message || 'USWDS'; log( - colors.yellow('v' + pkg.version), - message + colors.yellow(`${introMessage} v${pkg.version}`), ); drawFlag(); - }, - logCommand: function (name, message) { - + logCommand(name, message) { log( shellPrefix, colors.cyan(name), - colors.magenta(message) + colors.magenta(message), ); - }, - logHelp: function (name, message) { + logHelp(name, message) { log( shellPrefix, colors.cyan(name), - colors.yellow(message) + colors.yellow(message), ); - }, - logData: function (name, message) { - + logData(name, message) { log( colors.cyan(name), - colors.yellow(message) + colors.yellow(message), ); - }, - logError: function (name, message) { - + logError(name, message) { log( colors.red(name), - colors.yellow(message) + colors.yellow(message), ); - notify(this.dirName + ' gulp ' + name, message, true); - + notify(`${this.dirName} gulp ${name}`, message, true); }, - logMessage: function (name, message) { - + logMessage(name, message) { log( colors.cyan(name), - colors.green(message) + colors.green(message), ); - notify(this.dirName + ' gulp ' + name, message, false); - + notify(`${this.dirName} gulp ${name}`, message, false); }, - }; diff --git a/config/gulp/flags.js b/config/gulp/flags.js index 8cec38eed0..c7a4aa1842 100644 --- a/config/gulp/flags.js +++ b/config/gulp/flags.js @@ -1,31 +1,21 @@ -var gulp = require('gulp'); -var dutil = require('./doc-util'); - -global.cFlags = { - - test: true, - cleanup: true, - -}; - -gulp.task('no-test', function (done) { +const gulp = require('gulp'); +const dutil = require('./doc-util'); +const cFlags = require('./cflags'); +gulp.task('no-test', (done) => { dutil.logMessage( 'no-test', - 'Disabling linting and tests for all assets.' + 'Disabling linting and tests for all assets.', ); cFlags.test = false; done(); - }); -gulp.task('no-cleanup', function (done) { - +gulp.task('no-cleanup', (done) => { dutil.logMessage( 'no-cleanup', - 'Disabling cleanup of distribution directories.' + 'Disabling cleanup of distribution directories.', ); cFlags.cleanup = false; done(); - }); diff --git a/config/gulp/fonts.js b/config/gulp/fonts.js index 4ad3747a48..0a9d4fcda7 100644 --- a/config/gulp/fonts.js +++ b/config/gulp/fonts.js @@ -1,14 +1,13 @@ -var gulp = require('gulp'); -var dutil = require('./doc-util'); -var task = 'fonts'; +const gulp = require('gulp'); +const dutil = require('./doc-util'); -gulp.task(task, function (done) { +const task = 'fonts'; +gulp.task(task, (done) => { dutil.logMessage(task, 'Copying Fonts'); - - var stream = gulp.src('src/fonts/**/*') + const stream = gulp.src('src/fonts/**/*') .pipe(gulp.dest('dist/fonts')); + done(); return stream; - }); diff --git a/config/gulp/images.js b/config/gulp/images.js index 9f860c62e4..0452bf68ba 100644 --- a/config/gulp/images.js +++ b/config/gulp/images.js @@ -1,14 +1,13 @@ -var gulp = require('gulp'); -var dutil = require('./doc-util'); -var task = 'images'; +const gulp = require('gulp'); +const dutil = require('./doc-util'); -gulp.task(task, function (done) { +const task = 'images'; +gulp.task(task, (done) => { dutil.logMessage(task, 'Copying Images'); - - var stream = gulp.src('src/img/**/*') + const stream = gulp.src('src/img/**/*') .pipe(gulp.dest('dist/img')); + done(); return stream; - }); diff --git a/config/gulp/javascript.js b/config/gulp/javascript.js index e4c4ea6e9f..45d7feedde 100644 --- a/config/gulp/javascript.js +++ b/config/gulp/javascript.js @@ -1,30 +1,31 @@ -var child_process = require('child_process'); -var gulp = require('gulp'); -var log = require('fancy-log'); -var dutil = require('./doc-util'); -var browserify = require('browserify'); -var buffer = require('vinyl-buffer'); -var source = require('vinyl-source-stream'); -var uglify = require('gulp-uglify'); -var sourcemaps = require('gulp-sourcemaps'); -var rename = require('gulp-rename'); -var eslint = require('gulp-eslint'); -var task = 'javascript'; +const buffer = require('vinyl-buffer'); +const browserify = require('browserify'); +const childProcess = require('child_process'); +const eslint = require('gulp-eslint'); +const gulp = require('gulp'); +const log = require('fancy-log'); +const rename = require('gulp-rename'); +const source = require('vinyl-source-stream'); +const sourcemaps = require('gulp-sourcemaps'); +const uglify = require('gulp-uglify'); +const dutil = require('./doc-util'); +const cFlags = require('./cflags'); -gulp.task(task, function (done) { +const task = 'javascript'; +gulp.task(task, (done) => { dutil.logMessage(task, 'Compiling JavaScript'); - var defaultStream = browserify({ + const defaultStream = browserify({ entries: 'src/js/start.js', debug: true, }) - .transform('babelify', { - global: true, - presets: ['es2015'], - }); + .transform('babelify', { + global: true, + presets: ['es2015'], + }); - var stream = defaultStream.bundle() + const stream = defaultStream.bundle() .pipe(source('uswds.js')) // XXX why is this necessary? .pipe(buffer()) .pipe(rename({ basename: dutil.pkg.name })) @@ -44,37 +45,36 @@ gulp.task(task, function (done) { .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/js')); + done(); return stream; }); -gulp.task('typecheck', function () { - return new Promise((resolve, reject) => { - child_process.spawn( - './node_modules/.bin/tsc', - { stdio: 'inherit' } - ) +gulp.task('typecheck', () => new Promise((resolve, reject) => { + childProcess.spawn( + './node_modules/.bin/tsc', + { stdio: 'inherit' }, + ) .on('error', reject) - .on('exit', code => { + .on('exit', (code) => { if (code === 0) { dutil.logMessage('typecheck', 'TypeScript likes our code!'); resolve(); } else { reject(new Error('TypeScript failed, see output for details!')); } - }); - }); -}); + }); +})); -gulp.task('eslint', function (done) { +gulp.task('eslint', (done) => { if (!cFlags.test) { dutil.logMessage('eslint', 'Skipping linting of JavaScript files.'); return done(); } return gulp.src([ - 'src/js/**/*.js', - 'spec/**/*.js' - ]) + 'src/js/**/*.js', + 'spec/**/*.js', + ]) .pipe(eslint({ fix: true, })) diff --git a/config/gulp/release.js b/config/gulp/release.js index 0da0101f29..76c9fa6a7a 100644 --- a/config/gulp/release.js +++ b/config/gulp/release.js @@ -1,28 +1,23 @@ +const del = require('del'); +const spawn = require('cross-spawn'); const gulp = require('gulp'); const dutil = require('./doc-util'); -const spawn = require('cross-spawn'); -const del = require('del'); const task = 'release'; gulp.task('make-tmp-directory', () => { - dutil.logMessage('make-tmp-directory', 'Creating temporary release directory.'); return gulp.src('dist/**/*') .pipe(gulp.dest(dutil.dirName)); - }); gulp.task('clean-tmp-directory', () => { - dutil.logMessage('clean-tmp-directory', 'Deleting temporary release directory.'); - return del(dutil.dirName); }); gulp.task('zip-archives', (done) => { - const zip = spawn('zip', [ '--log-info', '-r', @@ -34,30 +29,21 @@ gulp.task('zip-archives', (done) => { dutil.logMessage('zip-archives', `Creating a zip archive in dist/${dutil.dirName}.zip`); zip.stdout.on('data', (data) => { - if (/[\w\d]+/.test(data)) { - dutil.logData('zip-archives', data); - } - }); zip.stderr.on('data', (data) => { - dutil.logError('zip-archives', data); - }); zip.on('error', (error) => { - dutil.logError('zip-archives', 'Failed to create a zip archive'); - done(error); }); zip.on('close', (code) => { if (code === 0) { done(); } }); - }); gulp.task(task, @@ -70,5 +56,4 @@ gulp.task(task, 'make-tmp-directory', 'zip-archives', 'clean-tmp-directory', - ) -); \ No newline at end of file + )); diff --git a/config/gulp/sass.js b/config/gulp/sass.js index 91135b6820..3d3e22c72a 100644 --- a/config/gulp/sass.js +++ b/config/gulp/sass.js @@ -1,67 +1,57 @@ -var gulp = require('gulp'); -var dutil = require('./doc-util'); -var sass = require('gulp-sass'); -var postcss = require('gulp-postcss'); -var cssnano = require('cssnano'); -var packCSS = require('css-mqpacker'); -var autoprefixer = require('autoprefixer'); -var sourcemaps = require('gulp-sourcemaps'); -var rename = require('gulp-rename'); -var gulpStylelint = require('gulp-stylelint'); const { formatters } = require('stylelint'); -var pkg = require('../../package.json'); -var path = require('path'); -var filter = require('gulp-filter'); -var replace = require('gulp-replace'); -var stripCssComments = require('gulp-strip-css-comments'); -var del = require('del'); -var task = 'sass'; -var autoprefixerOptions = require('./browsers'); -var path = require('path'); +const autoprefixer = require('autoprefixer'); +const cssnano = require('cssnano'); +const discardComments = require('postcss-discard-comments'); +const filter = require('gulp-filter'); +const gulp = require('gulp'); +const gulpStylelint = require('gulp-stylelint'); +const packCSS = require('css-mqpacker'); +const postcss = require('gulp-postcss'); +const replace = require('gulp-replace'); +const rename = require('gulp-rename'); +const sass = require('gulp-sass'); +const sourcemaps = require('gulp-sourcemaps'); +const autoprefixerOptions = require('./browsers'); +const dutil = require('./doc-util'); +const pkg = require('../../package.json'); -var entryFileFilter = filter('uswds.scss', { restore: true }); -var normalizeCssFilter = filter('**/normalize.css', { restore: true }); +const task = 'sass'; +const normalizeCssFilter = filter('**/normalize.css', { restore: true }); const IGNORE_STRING = 'This file is ignored'; -const ignoreStylelintIgnoreWarnings = lintResults => - formatters.string( - lintResults.reduce((memo, result) => { - const { warnings } = result; - const fileIsIgnored = warnings.some((warning) => { - return RegExp(IGNORE_STRING, 'i').test(warning.text); - }); +const ignoreStylelintIgnoreWarnings = lintResults => formatters.string( + lintResults.reduce((memo, result) => { + const { warnings } = result; + const fileIsIgnored = warnings.some(warning => RegExp(IGNORE_STRING, 'i').test(warning.text)); - if (!fileIsIgnored) { - memo.push(result); - } + if (!fileIsIgnored) { + memo.push(result); + } - return memo; - }, []) - ); - -gulp.task('stylelint', () => { - return gulp - .src('./src/stylesheets/**/*.scss') - .pipe(gulpStylelint({ - failAfterError: true, - reporters: [{ - formatter: ignoreStylelintIgnoreWarnings, console: true, - }], - syntax: 'scss', - })) - .on('error', dutil.logError); -}); + return memo; + }, []), +); -gulp.task('copy-vendor-sass', function () { +gulp.task('stylelint', () => gulp + .src('./src/stylesheets/**/*.scss') + .pipe(gulpStylelint({ + failAfterError: true, + reporters: [{ + formatter: ignoreStylelintIgnoreWarnings, console: true, + }], + syntax: 'scss', + })) + .on('error', dutil.logError)); +gulp.task('copy-vendor-sass', () => { dutil.logMessage('copy-vendor-sass', 'Compiling vendor CSS'); - var stream = gulp.src([ + const stream = gulp.src([ './node_modules/normalize.css/normalize.css', ]) .pipe(normalizeCssFilter) .pipe(rename('_normalize.scss')) - .on('error', function (error) { + .on('error', (error) => { dutil.logError('copy-vendor-sass', error); }) .pipe(gulp.dest('src/stylesheets/lib')); @@ -69,45 +59,49 @@ gulp.task('copy-vendor-sass', function () { return stream; }); -gulp.task('copy-dist-sass', function () { +gulp.task('copy-dist-sass', () => { dutil.logMessage('copy-dist-sass', 'Copying all Sass to dist dir'); - var stream = gulp.src('src/stylesheets/**/*.scss') + const stream = gulp.src('src/stylesheets/**/*.scss') .pipe(gulp.dest('dist/scss')); return stream; }); -gulp.task('sass', gulp.series('copy-vendor-sass', - function () { - dutil.logMessage(task, 'Compiling Sass'); - var plugins = [ - autoprefixer(autoprefixerOptions), - packCSS({ sort: true }), - cssnano(({ autoprefixer: { browsers: autoprefixerOptions }})) - ]; +gulp.task('sass', gulp.series('copy-vendor-sass', + () => { + dutil.logMessage(task, 'Compiling Sass'); + const pluginsProcess = [ + discardComments(), + autoprefixer(autoprefixerOptions), + packCSS({ sort: true }), + ]; + const pluginsMinify = [ + autoprefixer(autoprefixerOptions), + packCSS({ sort: true }), + cssnano(({ autoprefixer: { browsers: autoprefixerOptions } })), + ]; - var stream = gulp.src('src/stylesheets/*.scss') - .pipe(replace( - /\buswds @version\b/g, - 'uswds v' + pkg.version - )) - .pipe(sourcemaps.init({ largeFile: true })) - .pipe( - sass({ - outputStyle: 'expanded', - }) - .on('error', sass.logError) - ) - .pipe(postcss(plugins)) - .pipe(gulp.dest('dist/css')) - .pipe(rename({ - suffix: '.min', - })) - .pipe(sourcemaps.write('.')) - .pipe(gulp.dest('dist/css')); + const stream = gulp.src('src/stylesheets/*.scss') + .pipe(replace( + /\buswds @version\b/g, + `uswds v${pkg.version}`, + )) + .pipe(sourcemaps.init({ largeFile: true })) + .pipe( + sass({ + outputStyle: 'expanded', + }) + .on('error', sass.logError), + ) + .pipe(postcss(pluginsProcess)) + .pipe(gulp.dest('dist/css')) + .pipe(rename({ + suffix: '.min', + })) + .pipe(postcss(pluginsMinify)) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest('dist/css')); - return stream; - } -) -); + return stream; + })); diff --git a/config/gulp/test.js b/config/gulp/test.js index ac48b3f568..f30ff5c0c6 100644 --- a/config/gulp/test.js +++ b/config/gulp/test.js @@ -1,32 +1,25 @@ -var gulp = require('gulp'); -var mocha = require('gulp-spawn-mocha'); +const gulp = require('gulp'); +const mocha = require('gulp-spawn-mocha'); -var mochaOpts = { +const mochaOpts = { opts: 'spec/mocha.opts', }; -gulp.task('test', function () { - return gulp.src('spec/**/*.spec.js') - .pipe(mocha(mochaOpts)); -}); +gulp.task('test', () => gulp.src('spec/**/*.spec.js') + .pipe(mocha(mochaOpts))); -gulp.task('regression', () => { - return gulp.src('spec/headless-chrome.js') - .pipe(mocha(mochaOpts)); -}); +gulp.task('regression', () => 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, { - istanbul: true - }))); -}); +gulp.task('cover', () => gulp.src('spec/unit/**/*.spec.js') + .pipe(mocha(Object.assign(mochaOpts, { + istanbul: true, + })))); gulp.task('test:watch', () => { gulp.watch([ 'spec/**/*.spec.js', 'src/js/**/*.js', ], - gulp.series('test'), - ); + gulp.series('test')); }); diff --git a/package-lock.json b/package-lock.json index ebe8421891..be3daaed6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16290,40 +16290,12 @@ } }, "postcss-discard-comments": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.1.tgz", - "integrity": "sha512-Ay+rZu1Sz6g8IdzRjUgG2NafSNpp2MSMOQUb+9kkzzzP+kh07fP0yNbhtFejURnyVXSX3FYy2nVNW1QTnNjgBQ==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz", + "integrity": "sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==", "dev": true, "requires": { "postcss": "^7.0.0" - }, - "dependencies": { - "postcss": { - "version": "7.0.14", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz", - "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==", - "dev": true, - "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } } }, "postcss-discard-duplicates": { diff --git a/package.json b/package.json index 0b44c9d1e6..6dad90b816 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,6 @@ "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-spawn-mocha": "^5.0.1", - "gulp-strip-css-comments": "^2.0.0", "gulp-stylelint": "^8.0.0", "gulp-uglify": "^3.0.0", "handlebars": "^4.1.0", @@ -123,6 +122,7 @@ "node-sass": "^4.11.0", "normalize.css": "^3.0.3", "nswatch": "^0.2.0", + "postcss-discard-comments": "^4.0.2", "resemblejs": "^3.0.0", "should": "^11.2.1", "sinon": "^2.3.8", diff --git a/spec/delayed-root-suite.js b/spec/delayed-root-suite.js index 1690a8798a..bee79cfa70 100755 --- a/spec/delayed-root-suite.js +++ b/spec/delayed-root-suite.js @@ -17,8 +17,6 @@ Promise.all([ exports.fractalLoad, ]).then(() => { run(); -}).catch(e => { - console.log('An error occurred while loading tests.'); - console.log(e); +}).catch(() => { process.exit(1); }); diff --git a/spec/headless-chrome.js b/spec/headless-chrome.js index c23e62e72a..46f98ffe07 100755 --- a/spec/headless-chrome.js +++ b/spec/headless-chrome.js @@ -4,7 +4,7 @@ const ChromeFractalTester = require('./chrome-fractal-tester'); const axeTester = require('./axe-tester'); class Device { - constructor (name, metrics) { + constructor(name, metrics) { this.name = name; this.metrics = Object.assign({ deviceScaleFactor: 1, @@ -13,9 +13,9 @@ class Device { }, metrics); } - get description () { + get description() { const m = this.metrics; - const parts = [ `${m.width}x${m.height}` ]; + const parts = [`${m.width}x${m.height}`]; if (m.deviceScaleFactor !== 1) parts.push(`@ ${m.deviceScaleFactor}x`); if (m.mobile) parts.push('mobile'); @@ -41,11 +41,11 @@ const DEVICES = [ }), ]; -fractalLoad.then(function runFractalTester() { +fractalLoad.then(() => { const chromeFractalTester = new ChromeFractalTester(); const { handles } = chromeFractalTester; - describe('fractal component', function () { + describe('fractal component', function setupTester() { this.timeout(20000); before('setup ChromeFractalTester', chromeFractalTester.setup); @@ -58,7 +58,7 @@ fractalLoad.then(function runFractalTester() { } after('create visual regression testing metadata', - () => VisualRegressionTester.writeMetadata(handles, DEVICES)); + () => VisualRegressionTester.writeMetadata(handles, DEVICES)); } handles.forEach((handle) => { @@ -70,12 +70,10 @@ fractalLoad.then(function runFractalTester() { return; } - before('init chrome devtools protocol', () => { - return chromeFractalTester.createChromeDevtoolsProtocol() - .then(client => { cdp = client; }); - }); + before('init chrome devtools protocol', () => chromeFractalTester.createChromeDevtoolsProtocol() + .then((client) => { cdp = client; })); - before(`load fractal component in chrome`, function () { + before('load fractal component in chrome', function waitBeforeChrome() { this.timeout(20000); return chromeFractalTester.loadFractalPreview(cdp, handle); }); @@ -84,11 +82,9 @@ fractalLoad.then(function runFractalTester() { after('shutdown chrome devtools protocol', () => cdp.close()); - DEVICES.forEach(device => { + DEVICES.forEach((device) => { describe(`on ${device.description}`, () => { - before('set device metrics', () => { - return cdp.Emulation.setDeviceMetricsOverride(device.metrics); - }); + before('set device metrics', () => cdp.Emulation.setDeviceMetricsOverride(device.metrics)); it('has no aXe violations', () => axeTester.run(cdp)); @@ -96,16 +92,16 @@ fractalLoad.then(function runFractalTester() { const vrt = new VisualRegressionTester({ handle, device }); if (vrt.doesGoldenFileExist()) { it('matches golden screenshot', - () => vrt.screenshot(cdp) - .then(vrt.ensureMatchesGoldenFile)); + () => vrt.screenshot(cdp) + .then(vrt.ensureMatchesGoldenFile)); } else { it('is the new golden screenshot', - () => vrt.screenshot(cdp).then(vrt.saveToGoldenFile)); + () => vrt.screenshot(cdp).then(vrt.saveToGoldenFile)); } } }); }); }); - }); + }); }); }); diff --git a/spec/sass/include.spec.js b/spec/sass/include.spec.js index 34ecdd9eed..b43c3c81ba 100755 --- a/spec/sass/include.spec.js +++ b/spec/sass/include.spec.js @@ -13,10 +13,6 @@ describe('include paths', () => { it('can be loaded with @import "uswds"', () => { render('@import "uswds";', [includePath]); }); - - it('can be loaded with @import "all"', () => { - render('@import "all";', [includePath]); - }); }); describe('standalone dist scss', () => { @@ -29,8 +25,4 @@ describe('standalone dist scss', () => { it('can be loaded with @import "uswds"', () => { render('@import "uswds";', [distScssPath]); }); - - it('can be loaded with @import "all"', () => { - render('@import "all";', [distScssPath]); - }); }); diff --git a/src/js/components/navigation.js b/src/js/components/navigation.js index 134d56380b..3095d22c3c 100755 --- a/src/js/components/navigation.js +++ b/src/js/components/navigation.js @@ -25,7 +25,7 @@ let navActive; const isActive = () => document.body.classList.contains(ACTIVE_CLASS); -const toggleNav = function (active) { +const toggleNav = (active) => { const { body } = document; const safeActive = typeof active === 'boolean' ? active : !isActive(); @@ -85,7 +85,7 @@ navigation = behavior({ hideActiveNavDropdown(); } else { navActive = this; - toggle(navActive, true) + toggle(navActive, true); } // Do this so the event handler on the body doesn't fire