Release 2.0.2

.circleci/config.yml

@@ -31,6 +31,9 @@ jobs:
       - run:
           name: Setup Snyk
           command: sudo npm install -g snyk
+      - run: # run snyk auth - authenticate snyk use environment variables to add token
+          name: snyk auth
+          command: snyk auth $SNYK_TOKEN
       - run:
           name: Run test
           command: npm test

.eslintrc.yml

@@ -5,3 +5,7 @@ env:
   node: true
   browser: true
   es6: true
+rules:
+  import/no-extraneous-dependencies:
+    - error
+    - devDependencies: true

README.md

@@ -37,7 +37,7 @@ This repository is for the design system code itself. We maintain [another repos
 
 ## Background
 
-USWDS components and style guide follow industry-standard accessibility guidelines and use the best practices of existing style libraries and modern web design. The [U.S. Digital Service](https://www.whitehouse.gov/digital/united-states-digital-service) and [18F](https://18f.gsa.gov/) created USWDS for designers and developers. USWDS is a project of GSA’s [Technology Transformation Service](https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services), maintained by the Office of Products and Programs. They are designed for use by government product teams who want to create beautiful, easy-to-use online experiences for the public. To learn more about the project, check out this [blog post](https://18f.gsa.gov/2015/09/28/web-design-standards/) and to view websites and applications check out our list [here](docs/WHO_IS_USING_USWDS.md).
+USWDS components and style guide follow industry-standard accessibility guidelines and use the best practices of existing style libraries and modern web design. The [U.S. Digital Service](https://www.usds.gov/) and [18F](https://18f.gsa.gov/) created USWDS for designers and developers. USWDS is a project of GSA’s [Technology Transformation Service](https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services), maintained by the Office of Products and Programs. They are designed for use by government product teams who want to create beautiful, easy-to-use online experiences for the public. To learn more about the project, check out this [blog post](https://18f.gsa.gov/2015/09/28/web-design-standards/) and to view websites and applications check out our list [here](docs/WHO_IS_USING_USWDS.md).
 
 
 ## Recent updates
@@ -119,7 +119,7 @@ How you implement the design system depends on the needs of your project and you
     </html>
     ```
 
-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.
 

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',
-  ),
-);
+  ));

config/gulp/cflags.js

@@ -0,0 +1,4 @@
+module.exports = {
+  test: true,
+  cleanup: true,
+};

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);
   },
-
 };

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();
-
 });

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;
-
 });

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;
-
 });