Merge pull request #4566 from uswds/release-3.0.0-beta.3

USWDS 3.0.0 Beta 3
uswds · Mar 8, 2022 · dac00f1 · dac00f1
2 parents f0a2914 + 8e36721
commit dac00f1
Show file tree

Hide file tree

Showing 793 changed files with 41,359 additions and 38,956 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  snyk: snyk/snyk@0.0.12
+  snyk: snyk/snyk@1.1.2
 
 references:
   container: &container

diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,7 @@ build/
 
 # ignore compiled storybook directory
 storybook-static/
+_site/
 
 # ignore gulp-generated vendor files
 src/stylesheets/lib

diff --git a/.npmignore b/.npmignore
@@ -2,6 +2,7 @@
 !dist/
 !src/
 
+_site/
 build/
 coverage/
 .github/

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -30,13 +30,17 @@ module.exports = {
   core: {
     builder: "webpack5",
   },
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
     "@whitespace/storybook-addon-html",
   ],
+  staticDirs: ['../dist'],
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -47,11 +51,11 @@ module.exports = {
         use: "twigjs-loader",
         resolve: {
           alias: {
-            '@components': path.resolve(__dirname, '../src/components'),
-            '@templates': path.resolve(__dirname, '../src/templates'),
-            '@compare': path.resolve(__dirname, '../src/compare')
-          }
-        }
+            "@components": path.resolve(__dirname, "../src/components"),
+            "@templates": path.resolve(__dirname, "../src/templates"),
+            "@compare": path.resolve(__dirname, "../src/compare"),
+          },
+        },
       },
       {
         test: /\.s(c|a)ss$/i,

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -8,4 +8,14 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+  options: {
+    storySort: {
+      order: [
+        "Design Tokens",
+        "Components",
+        "Patterns",
+        "Pages",
+      ],
+    },
+  },
+};
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,7 +1,6 @@
 {
   "extends": [
-    "stylelint-config-recommended-scss",
-    "stylelint-prettier/recommended"
+    "@18f/identity-stylelint-config"
   ],
   "rules": {
     "unit-no-unknown": null,

diff --git a/README.md b/README.md
@@ -65,12 +65,12 @@ How you implement the design system depends on the needs of your project and you
 
 ### Download and install
 
-1. Download the [USWDS zip file](https://github.com/uswds/uswds/releases/download/v2.12.2/uswds-2.12.2.zip) from the latest USWDS release and open that file.
+1. Download the [USWDS zip file](https://github.com/uswds/uswds/releases/download/v2.13.1/uswds-2.13.1.zip) from the latest USWDS release and open that file.
 
    After extracting the zip file you should see the following file and folder structure:
 
    ```
-   uswds-2.12.2/
+   uswds-2.13.1/
    ├── css/
    │   ├── uswds.min.css.map
    │   ├── uswds.min.css
@@ -101,7 +101,7 @@ How you implement the design system depends on the needs of your project and you
    ```
    example-project/
    ├── assets/
-   │   ├── uswds-2.12.2/
+   │   ├── uswds-2.13.1/
    │   ├── stylesheets/
    │   ├── images/
    │   └── javascript/
@@ -121,11 +121,11 @@ How you implement the design system depends on the needs of your project and you
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>My Example Project</title>
-       <script src="assets/uswds-2.12.2/js/uswds-init.min.js"></script>
-       <link rel="stylesheet" href="assets/uswds-2.12.2/css/uswds.min.css" />
+       <script src="assets/uswds-2.13.1/js/uswds-init.min.js"></script>
+       <link rel="stylesheet" href="assets/uswds-2.13.1/css/uswds.min.css" />
      </head>
      <body>
-       <script src="assets/uswds-2.12.2/js/uswds.min.js"></script>
+       <script src="assets/uswds-2.13.1/js/uswds.min.js"></script>
      </body>
    </html>
    ```
@@ -140,7 +140,7 @@ And that’s it — you should now be able to copy our code samples into your `i
 
 1. Install `Node/npm`. Below is a link to find the install method that coincides with your operating system:
 
-   - Node v12.13.0 (current LTS), [Installation guides](https://nodejs.org/en/download/)
+   - Node v12.13.1 (current LTS), [Installation guides](https://nodejs.org/en/download/)
 
    **Note for Windows users:** If you are using Windows and are unfamiliar with `Node` or `npm`, we recommend following [Team Treehouse's tutorial](http://blog.teamtreehouse.com/install-node-js-npm-windows) for more information.
 

diff --git a/_config.yml b/_config.yml
diff --git a/docs/WHO_IS_USING_USWDS.md b/docs/WHO_IS_USING_USWDS.md
@@ -34,6 +34,7 @@ Below are a list of websites and applications currently using the U.S. Web Desig
 - [Department of Commerce](https://commerce.gov/)
 - [Department of Homeland Security](https://www.dhs.gov/)
 - [Dietary Guidelines - USDA](https://www.dietaryguidelines.gov/)
+- [Dietary Supplement Label Database](https://dsld.od.nih.gov/)
 - [Digital Acquisition Accelerator](https://pages.18f.gov/digitalaccelerator/)
 - [Digital Analytics Dashboard](https://analytics.usa.gov)
 - [Digital Service Playbook — U.S. Digital Service](https://playbook.cio.gov)

diff --git a/gulp-tasks/lint.js b/gulp-tasks/lint.js
@@ -1,11 +1,10 @@
-const { src, lastRun } = require('gulp');
 const { formatters } = require("stylelint");
-const gulpStylelint = require('gulp-stylelint');
-const eslint = require('gulp-eslint');
-const dutil = require('./utils/doc-util');
-const cFlags = require("./utils/cflags");
+const childProcess = require("child_process");
+const stylelint = require("stylelint");
+const dutil = require("./utils/doc-util");
 
 const IGNORE_STRING = "This file is ignored";
+const PROJECT_SASS_SRC = "src/stylesheets";
 
 function ignoreStylelintIgnoreWarnings(lintResults) {
   return formatters.string(
@@ -24,47 +23,35 @@ function ignoreStylelintIgnoreWarnings(lintResults) {
   );
 }
 
-// Lint Sass based on .stylelintrc.json config.
-function lintSass() {
-  const stylelintOptions = {
-    failAfterError: true,
-    reporters: [
-      {
-        formatter: ignoreStylelintIgnoreWarnings,
-        console: true,
-      },
-    ],
-    syntax: "scss",
-  };
-
-  return src(
-    "./src/stylesheets/**/*.scss",
-    { since: lastRun(lintSass) }
-  )
-  .pipe(gulpStylelint(stylelintOptions))
-  .on('error', function handleError(error) {
-    dutil.logError(error);
-    this.emit('end');
+function typecheck() {
+  return new Promise((resolve, reject) => {
+    childProcess
+      .spawn("./node_modules/.bin/tsc", { stdio: "inherit" })
+      .on("error", reject)
+      .on("exit", (code) => {
+        if (code === 0) {
+          dutil.logMessage("typecheck", "TypeScript likes our code!");
+          resolve();
+        } else {
+          reject(new Error("TypeScript failed, see output for details!"));
+        }
+      });
   });
-}
+};
 
-function lintJS(done) {
-  if (!cFlags.test) {
-    dutil.logMessage("eslint", "Skipping linting of JavaScript files.");
-    return done();
-  }
+async function lintSass(callback) {
+  const { errored, output } = await stylelint.lint({
+    files: [
+      `${PROJECT_SASS_SRC}/**/*.scss`,
+      `!${PROJECT_SASS_SRC}/uswds/**/*.scss`,
+    ],
+    formatter: "string",
+  });
 
-  return src(["src/**/**/*.js"])
-    .pipe(
-      eslint({
-        fix: true,
-      })
-    )
-    .pipe(eslint.format())
-    .pipe(eslint.failAfterError());
+  callback(errored ? new Error(output) : null);
 }
 
 module.exports = {
   lintSass,
-  lintJS
+  typecheck
 };
diff --git a/gulp-tasks/sass.js b/gulp-tasks/sass.js
@@ -5,14 +5,11 @@ const { src, dest } = require("gulp");
 const postcss = require("gulp-postcss");
 const replace = require("gulp-replace");
 const rename = require("gulp-rename");
-const sass = require("gulp-dart-scss");
+const sass = require("gulp-sass")(require("sass"));
 const sourcemaps = require("gulp-sourcemaps");
 const dutil = require("./utils/doc-util");
 const pkg = require("../package.json");
 
-
-sass.compiler = require("sass");
-
 module.exports = {
   compileSass() {
     dutil.logMessage("sass", "Compiling Sass");
@@ -23,12 +20,11 @@ module.exports = {
       .pipe(sourcemaps.init({ largeFile: true }))
       .pipe(
         sass({
-            outputStyle: "expanded",
-          })
-          .on("error", function handleError(error) {
-            dutil.logError(error);
-            this.emit('end');
-          })
+          outputStyle: "expanded",
+        }).on("error", function handleError(error) {
+          dutil.logError(error);
+          this.emit("end");
+        })
       )
       .pipe(postcss(pluginsProcess))
       .pipe(replace(/\buswds @version\b/g, `uswds v${pkg.version}`))

diff --git a/gulpfile.js b/gulpfile.js
@@ -9,7 +9,7 @@ const { noCleanup, noTest } = require("./gulp-tasks/flags");
 const { buildSprite } = require("./gulp-tasks/svg-sprite");
 const { compileJS, typeCheck } = require("./gulp-tasks/javascript");
 const { unitTests, sassTests, cover } = require("./gulp-tasks/test");
-const { lintSass, lintJS } = require("./gulp-tasks/lint");
+const { lintSass, typecheck } = require("./gulp-tasks/lint");
 const { build } = require("./gulp-tasks/build");
 const { release } = require("./gulp-tasks/release");
 const { watch } = require("./gulp-tasks/watch");
@@ -32,8 +32,8 @@ exports.cleanDist = cleanDist;
  * *Lint tasks*
  */
 exports.lintSass = lintSass;
-exports.lintJS = lintJS;
-exports.lint = parallel(lintSass, lintJS);
+exports.typecheck = typecheck;
+exports.lint = parallel(lintSass, typecheck);
 
 /**
  * *Test tasks*
@@ -49,7 +49,6 @@ exports.sassTests = sassTests;
 exports.unitTests = unitTests;
 exports.test = series(
   typeCheck,
-  lintJS,
   lintSass,
   sassTests,
   unitTests,
@@ -64,7 +63,7 @@ exports.test = series(
  */
 exports.buildSprite = buildSprite;
 exports.buildSass = series(lintSass, copyVendor, compileSass);
-exports.buildJS = series(typeCheck, lintJS, compileJS);
+exports.buildJS = series(typeCheck, compileJS);
 exports.buildUSWDS = build;
 exports.release = release;