[NO_TICKET] Update backstop files and misc linting changes (#698)

* Move backstop reference files to packages/design-system-docs/__tests, and move other backstop files to tmp

* Update reference files

* Update lint script to include root

Co-authored-by: Scott Weber <[email protected]>

Author: bernardwang

CODE_OF_CONDUCT.md

@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
 
 Examples of behavior that contributes to creating a positive environment include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Our Responsibilities
 

CONTRIBUTING.md

@@ -9,16 +9,17 @@ Please take a look at our [Code of Conduct](CODE_OF_CONDUCT.md) to learn more.
 
 If you are interested in running this site locally, please take a look at [setting up your local development environment](/README.md#running-locally).
 
-Use [our guides](https://github.com/CMSgov/design-system/tree/master/guides) to find additional information like: 
-* Guiding principles
-* Coding guidelines
-* How to write documentation
+Use [our guides](https://github.com/CMSgov/design-system/tree/master/guides) to find additional information like:
+
+- Guiding principles
+- Coding guidelines
+- How to write documentation
 
 ## Submitting a pull request
 
-* [Fork the design system](https://guides.github.com/activities/forking/) into your GitHub account
-* [Create a branch](https://help.github.com/en/articles/creating-and-deleting-branches-within-your-repository) from `master` that defines what you’re working on (for example, fix-autocomplete-bug).
-* [Submit a pull request](https://help.github.com/en/articles/creating-a-pull-request) against the `master` branch
+- [Fork the design system](https://guides.github.com/activities/forking/) into your GitHub account
+- [Create a branch](https://help.github.com/en/articles/creating-and-deleting-branches-within-your-repository) from `master` that defines what you’re working on (for example, fix-autocomplete-bug).
+- [Submit a pull request](https://help.github.com/en/articles/creating-a-pull-request) against the `master` branch
 
 **Note:** more information on the [GitHub flow](https://guides.github.com/introduction/flow/)
 
@@ -47,7 +48,6 @@ Open a new [GitHub issue](https://github.com/CMSgov/design-system/issues/new?ass
     - Can this serve more than one use case and be reusable in multiple scenarios? Please explain.
     - Please include links to any examples, research or code to support your proposal, if available.
 
-
 ### Step 2 - Review (Core design system team)
 
 After an idea is proposed, it undergoes an evaluation by a team member. This review is to determine whether the contribution needs small fixes, visual improvements, or whether to reject it.
@@ -56,14 +56,13 @@ During this stage, the team will review supporting research — and link this re
 
 Revisions may be requested before moving the proposal to Draft. If the proposal is good to go as is, it's moved to Draft. If the proposal doesn’t pass the evaluation, the reviewer will reject it and close the issue.
 
-
 The criteria used in evaluating is:
 
-- **Usability**:  Is the pattern responsive? Is the interaction flow clearly documented?
+- **Usability**: Is the pattern responsive? Is the interaction flow clearly documented?
 - **Accessibility**: Is the pattern 508 compliant and accessible?
 - **Visual design**: Is the pattern consistent with the CMS Design system visual style?
 
- The pattern will be marked as *Draft* when it passes evaluation criteria.
+The pattern will be marked as _Draft_ when it passes evaluation criteria.
 
 ### Step 3 - Draft (Core design system team)
 
@@ -76,14 +75,11 @@ Acceptance criteria:
 - Pattern validates against accessibility criteria
 - Feedback has been collected on the pattern based on usage in real-world products and revised if necessary
 
-
-Finally, a team member will either move the pattern to *Ready*; ask for revisions; or, in some cases, reject the pattern.
-
+Finally, a team member will either move the pattern to _Ready_; ask for revisions; or, in some cases, reject the pattern.
 
 ### Step 4 - Ready
 
-When a pattern is moved to *Ready*, all criteria from the Draft step have been completed. The pattern is now a stable part of the design system in production and the core team will conduct ongoing maintenance (bug fixes, minor enhancements, and so on).
-
+When a pattern is moved to _Ready_, all criteria from the Draft step have been completed. The pattern is now a stable part of the design system in production and the core team will conduct ongoing maintenance (bug fixes, minor enhancements, and so on).
 
 ## Amending patterns
 
@@ -95,7 +91,7 @@ Amendment proposals should follow the same process as outlined above. During the
 
 As technology changes, certain UI patterns will become less relevant or may be replaced by better patterns. As we become aware of such changes, we’ll remove patterns from the library. To avoid pulling the rug out from under people relying on those patterns in their projects, deprecated patterns will remain within the codebase for at least a month after deprecation. The patterns will also be marked as deprecated in the documentation and in the developer's console when used in a project.
 
-----
+---
 
 ## Licenses and attribution
 
@@ -104,6 +100,7 @@ A few parts of this project are not in the public domain. Attribution and licens
 The rest of this project is in the worldwide public domain, released under the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/).
 
 ## Contributions
+
 All contributions to this project will be released under the CC0 dedication alongside the public domain portions of this project. For more information, see [CONTRIBUTING.md](CONTRIBUTING.md).
 
 **Credits**

LICENSE.md

@@ -59,4 +59,4 @@ Unless expressly stated otherwise, the person who associated a work with this de
 
 ### Contributions to this project
 
-As stated in [CONTRIBUTING](CONTRIBUTING.md), all contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.
+As stated in [CONTRIBUTING](CONTRIBUTING.md), all contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.

backstop.json

@@ -1401,11 +1401,11 @@
     }
   ],
   "paths": {
-    "bitmaps_reference": "tools/backstop_data/bitmaps_reference",
-    "bitmaps_test": "tools/backstop_data/bitmaps_test",
-    "engine_scripts": "tools/backstop_data/engine_scripts",
-    "html_report": "tools/backstop_data/html_report",
-    "ci_report": "tools/backstop_data/ci_report"
+    "bitmaps_reference": "packages/design-system-docs/src/__tests__/backstop_reference",
+    "bitmaps_test": "tmp/backstop_data/bitmaps_test",
+    "engine_scripts": "tmp/backstop_data/engine_scripts",
+    "html_report": "tmp/backstop_data/html_report",
+    "ci_report": "tmp/backstop_data/ci_report"
   },
   "report": ["browser"],
   "engine": "puppet",

examples/form/index.html

@@ -98,7 +98,7 @@ <h2 class="ds-c-alert__heading">1 error with your application</h2>
       </form>
     </div>
     <script>
-      document.querySelector('form').addEventListener('submit', function(event) {
+      document.querySelector('form').addEventListener('submit', function (event) {
         event.preventDefault();
         document.querySelector('#spinner').classList.toggle('ds-u-display--none');
       });

examples/react-app/Gulpfile.js

@@ -6,31 +6,28 @@ const sass = require('gulp-sass');
  * We could do this manually, but why not automate it so it's easy to do
  * as things are updated :)
  */
-gulp.task('copy-design-system', function() {
+gulp.task('copy-design-system', function () {
   return gulp
     .src([
       'node_modules/@cmsgov/design-system-core/**/fonts/*',
-      'node_modules/@cmsgov/design-system-core/**/images/*'
+      'node_modules/@cmsgov/design-system-core/**/images/*',
     ])
     .pipe(gulp.dest('./dist'));
 });
 
 /**
  * Transpile Sass to CSS
  */
-gulp.task('sass', function() {
+gulp.task('sass', function () {
   const transpiler = sass({
     // Add node_modules to the list of paths used to resolve @import
     // declarations. This way it's easier to import our design system's
     // Sass files.
     includePaths: ['node_modules'],
-    outputStyle: 'compressed'
+    outputStyle: 'compressed',
   }).on('error', sass.logError);
 
-  return gulp
-    .src('./src/styles/**/*.scss')
-    .pipe(transpiler)
-    .pipe(gulp.dest('./dist/styles'));
+  return gulp.src('./src/styles/**/*.scss').pipe(transpiler).pipe(gulp.dest('./dist/styles'));
 });
 
 gulp.task('default', ['copy-design-system', 'sass']);

examples/react-app/src/scripts/index.js

@@ -6,7 +6,7 @@ import Button from '@cmsgov/design-system-core/dist/components/Button/Button';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-const Example = function() {
+const Example = function () {
   return (
     <div>
       <Alert heading="Hello world">

examples/react-app/webpack.config.js

@@ -7,7 +7,7 @@ const config = {
   entry: './src/scripts/index.js',
   output: {
     filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist/scripts')
+    path: path.resolve(__dirname, 'dist/scripts'),
   },
   module: {
     rules: [
@@ -18,13 +18,13 @@ const config = {
           {
             loader: 'babel-loader',
             options: {
-              presets: ['es2015', 'react']
-            }
-          }
-        ]
-      }
-    ]
-  }
+              presets: ['es2015', 'react'],
+            },
+          },
+        ],
+      },
+    ],
+  },
 };
 
 module.exports = config;

examples/webpack-demo/p_webpack.config.js

@@ -4,30 +4,30 @@ module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'main.js',
-    path: path.resolve(__dirname, 'dist')
+    path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.scss$/,
         use: [
           {
-            loader: 'style-loader' // creates style nodes from JS strings
+            loader: 'style-loader', // creates style nodes from JS strings
           },
           {
-            loader: 'css-loader' // translates CSS into CommonJS
+            loader: 'css-loader', // translates CSS into CommonJS
           },
           {
             loader: 'sass-loader', // compiles Sass to CSS, using Node Sass by default
             options: {
               includePaths: [
                 path.resolve(__dirname, './src/scss'),
-                path.resolve(__dirname, './node_modules')
+                path.resolve(__dirname, './node_modules'),
                 // console.log(__dirname + '/node_modules')
-              ]
-            }
-          }
-        ]
+              ],
+            },
+          },
+        ],
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
@@ -37,11 +37,11 @@ module.exports = {
             options: {
               includePaths: [
                 path.resolve(__dirname, './src/img'),
-                path.resolve(__dirname, './node_modules')
-              ]
-            }
-          }
-        ]
+                path.resolve(__dirname, './node_modules'),
+              ],
+            },
+          },
+        ],
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
@@ -51,12 +51,12 @@ module.exports = {
             options: {
               includePaths: [
                 path.resolve(__dirname, './src/fonts'),
-                path.resolve(__dirname, './node_modules')
-              ]
-            }
-          }
-        ]
-      }
-    ]
-  }
+                path.resolve(__dirname, './node_modules'),
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
 };