[WNMGDS-154] Audit and upgrade dependencies (#437)

* Update packages with minor backwards compatible upgrades

* Major upgrade to cssnano and gulp-postcss to avoid Node#moveTo deprecated message

* Upgrade axe-webdriver and prevent AxeBuilder.analyze from erroring

* Revert "Upgrade axe-webdriver and prevent AxeBuilder.analyze from erroring"

This reverts commit 69785e5a5c2bc057f34c1d4454a63fcfa35d8b2c. These
changes will be handled in WNMGDS-219

* Remove recast and postcss-url

* Upgrade react-docgen to prevent error

* Upgrade autoprefixer and stylelint, use 'flex-start' instead of 'start'

* Update yarn.lock after merging master

package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@cmsgov/eslint-config-design-system": "file:./packages/eslint-config-design-system",
     "@cmsgov/stylelint-config-design-system": "file:./packages/stylelint-config-design-system",
-    "autoprefixer": "^8.0.0",
+    "autoprefixer": "9.6.0",
     "axe-webdriverjs": "^2.1.0",
     "babel-core": "^6.26.0",
     "babel-jest": "^22.4.1",
@@ -36,41 +36,41 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
     "babel-register": "^6.26.0",
-    "browser-sync": "^2.20.0",
-    "bytes": "^3.0.0",
+    "browser-sync": "2.26.7",
+    "bytes": "3.1.0",
     "chalk": "^2.4.2",
     "chromedriver": "2.35.0",
     "cli-table": "^0.3.1",
-    "colors": "^1.1.2",
+    "colors": "1.3.3",
     "core-js": "^2.5.3",
-    "cssnano": "^3.10.0",
-    "cssstats": "^3.1.0",
+    "cssnano": "4.1.10",
+    "cssstats": "3.3.0",
     "del": "^3.0.0",
-    "ejs": "^2.5.7",
-    "enzyme": "3.7.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "^3.3.0",
+    "ejs": "2.6.2",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
+    "enzyme-to-json": "3.3.5",
     "eslint": "^4.18.1",
     "eslint-config-nava": "^2.1.0",
     "front-matter": "^2.3.0",
     "generator-cmsgov": "file:./packages/generator-cmsgov",
     "github": "^13.0.1",
-    "glob": "^7.1.2",
+    "glob": "7.1.4",
     "gulp": "^3.9.1",
     "gulp-babel": "^7.0.0",
     "gulp-changed": "^3.1.1",
     "gulp-changed-in-place": "^2.3.0",
     "gulp-count": "^1.0.0",
     "gulp-if": "^2.0.2",
     "gulp-merge-json": "^1.2.0",
-    "gulp-postcss": "^7.0.0",
+    "gulp-postcss": "8.0.0",
     "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^2.6.1",
+    "gulp-sourcemaps": "2.6.5",
     "gulp-stylelint": "^6.0.0",
     "gulp-util": "^3.0.8",
     "husky": "^0.14.3",
     "jest": "^22.4.2",
-    "jest-environment-selenium": "^2.1.0",
+    "jest-environment-selenium": "2.1.1",
     "kss": "^3.0.0-beta.18",
     "lerna": "^2.5.1",
     "lint-staged": "^7.0.0",
@@ -79,30 +79,28 @@
     "memory-fs": "^0.4.1",
     "mkdir-recursive": "^0.4.0",
     "mz": "^2.7.0",
-    "node-notifier": "^5.1.2",
+    "node-notifier": "5.4.0",
     "postcss-image-inliner": "^1.0.6",
     "postcss-import": "^11.1.0",
-    "postcss-url": "^7.3.1",
-    "prettier": "^1.11.0",
-    "prismjs": "^1.11.0",
-    "react": "^16.2.0",
-    "react-docgen": "^2.20.1",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0",
-    "recast": "^0.14.4",
+    "prettier": "1.18.2",
+    "prismjs": "1.16.0",
+    "react": "16.8.6",
+    "react-docgen": "4.1.1",
+    "react-dom": "16.8.6",
+    "react-test-renderer": "16.8.6",
     "run-sequence": "^2.2.0",
     "selenium-webdriver": "4.0.0-alpha.1",
     "static-server": "^2.2.1",
-    "stylelint": "^9.1.1",
+    "stylelint": "10.1.0",
     "stylelint-config-prettier": "^2.1.0",
     "through2": "^2.0.3",
     "tota11y": "^0.1.6",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^4.16.1",
+    "webpack": "4.35.0",
     "webpack-dev-middleware": "^2.0.6",
-    "webpack-hot-middleware": "^2.21.1",
+    "webpack-hot-middleware": "2.25.0",
     "yargs": "^11.0.0",
-    "yo": "^2.0.6"
+    "yo": "2.0.6"
   },
   "engines": {
     "node": ">=7.0.0"

packages/core/src/components/Dialog/Dialog.scss

@@ -58,7 +58,7 @@ $dialog-spacer: $spacer-4;
 }
 
 .ds-c-dialog__header {
-  align-items: start;
+  align-items: flex-start;
   display: flex;
   // Provide some spacing when the header only includes the close button
   padding-bottom: $spacer-1;

packages/core/src/components/StepList/SubStep.jsx

@@ -17,14 +17,13 @@ export const SubStep = ({ step, ...props }) => (
         {step.linkText || props.editText}
       </StepLink>
     )}
-    {step.steps &&
-      props.showSubSubSteps && (
-        <ul>
-          {step.steps.map((s, i) => (
-            <SubStep step={s} key={s.id || i} {...props} />
-          ))}
-        </ul>
-      )}
+    {step.steps && props.showSubSubSteps && (
+      <ul>
+        {step.steps.map((s, i) => (
+          <SubStep step={s} key={s.id || i} {...props} />
+        ))}
+      </ul>
+    )}
   </li>
 );
 

packages/generator-cmsgov/generators/app/index.js

@@ -69,9 +69,7 @@ module.exports = class extends Generator {
   }
 
   writing() {
-    const dir = `packages/${this.props.package}/src/components/${
-      this.props.name
-    }/`;
+    const dir = `packages/${this.props.package}/src/components/${this.props.name}/`;
 
     this.fs.copyTpl(
       this.templatePath('index.example.html'),