Merge pull request #4384 from uswds/release-3.0.0-beta.1

Release 3.0.0 beta.1

.circleci/config.yml

@@ -24,6 +24,7 @@ jobs:
           keys:
             - v2-uswds-dependencies-{{ checksum "package-lock.json" }}
       - run: npm install
+      - run: npx playwright install
       - save_cache:
           paths:
             - node_modules

.codeclimate.yml

@@ -8,5 +8,5 @@ plugins:
 exclude_patterns:
   - config/**/*.js
   - dist/**/*.js
-  - src/patterns/**/*.spec.js
+  - src/**/*.spec.js
   - src/js/vendor/**/*.js

.eslintignore

@@ -1 +1 @@
-
+src/styleguide/

.eslintrc.yml

@@ -3,6 +3,7 @@ extends:
   - prettier
 plugins:
   - import
+  - no-unsanitized
 env:
   node: true
   browser: true
@@ -12,3 +13,10 @@ rules:
   import/no-extraneous-dependencies:
     - error
     - devDependencies: true
+  no-unsanitized/method: error
+  no-unsanitized/property: error
+overrides:
+  - {
+      files: ["*.spec.js"],
+      rules: { no-unsanitized/method: off, no-unsanitized/property: off },
+    }

.gitignore

@@ -18,6 +18,9 @@ patternlab/
 build/
 dependencyGraph.json
 
+# ignore compiled storybook directory
+storybook-static/
+
 # ignore gulp-generated vendor files
 src/stylesheets/lib
 

.nvmrc

@@ -1 +1 @@
-14.16.0
+16.13.0

.nycrc

@@ -1,6 +1,6 @@
 {
   "all": true,
-  "include": ["src/patterns/components/**/*.js"],
+  "include": ["src/components/**/*.js"],
   "exclude": [
     "**/*.spec.js",
     "**/test/**"

.storybook/main.js

@@ -0,0 +1,131 @@
+const path = require("path");
+const {
+  createJoinFunction,
+  createJoinImplementation,
+  asGenerator,
+  defaultJoinGenerator,
+} = require("resolve-url-loader");
+
+const imageDirectory = path.resolve("src/img");
+const fontsDirectory = path.resolve("src/fonts");
+
+// call default generator then append any additional paths
+const pathGenerator = asGenerator((item, ...rest) => [
+  ...defaultJoinGenerator(item, ...rest),
+  item.isAbsolute
+    ? null
+    : /\.(png|svg|jpg|jpeg|gif)$/.test(item.uri)
+    ? imageDirectory
+    : /\.(woff|woff2|eot|ttf|otf)$/.test(item.uri)
+    ? fontsDirectory
+    : null,
+]);
+
+const joinSassAssets = createJoinFunction(
+  "joinSassAssets",
+  createJoinImplementation(pathGenerator)
+);
+
+module.exports = {
+  core: {
+    builder: "webpack5",
+  },
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+  ],
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+    config.module.rules.push(
+      {
+        test: /\.ya?ml$/,
+        type: "json",
+        use: "yaml-loader",
+      },
+      {
+        test: /\.twig$/,
+        use: "twigjs-loader",
+        resolve: {
+          alias: {
+            '@components': path.resolve(__dirname, '../src/components')
+          }
+        }
+      },
+      {
+        test: /\.s(c|a)ss$/i,
+        use: [
+          {
+            loader: "style-loader",
+          },
+          {
+            loader: "css-loader",
+            options: {
+              sourceMap: true,
+              esModule: false,
+            },
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              sourceMap: true,
+              postcssOptions: (loaderContext) => {
+                return {
+                  plugins: [
+                    ["postcss-import", { root: loaderContext.resourcePath }],
+                    ["postcss-discard-comments", { removeAll: true }],
+                    "postcss-preset-env",
+                    [
+                      "postcss-csso",
+                      { forceMediaMerge: false, comments: false },
+                    ],
+                  ],
+                };
+              },
+            },
+          },
+          {
+            loader: "resolve-url-loader",
+            options: {
+              join: joinSassAssets,
+            },
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+        include: path.resolve(__dirname, "../src"),
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: "javascript/auto",
+        use: {
+          loader: "file-loader",
+          options: {
+            name: "[path][name].[ext]",
+          },
+        },
+        include: path.resolve(__dirname, "../src/img"),
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: "javascript/auto",
+        use: {
+          loader: "file-loader",
+          options: {
+            name: "[path][name].[ext]",
+          },
+        },
+        include: path.resolve(__dirname, "../src/fonts"),
+      }
+    );
+
+    return config;
+  },
+};

.storybook/preview-head.html

@@ -0,0 +1,28 @@
+<meta name="robots" content="noindex,nofollow" />
+<meta name="viewport" content="width=device-width" />
+
+<!-- Global styles -->
+<style>
+  #root {
+    box-sizing: border-box;
+    margin: 8%;
+  }
+
+  #root * {
+    box-sizing: border-box !important;
+  }
+
+  * {
+    box-sizing: border-box !important;
+  }
+
+  #root *:before,
+  #root *:after {
+    box-sizing: inherit;
+  }
+
+  html,
+  body {
+    font-size: 16px;
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,11 @@
+import "../dist/js/uswds.min.js";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.stylelintrc.json

@@ -8,5 +8,5 @@
     "no-descending-specificity": null,
     "no-duplicate-selectors": null
   },
-  "ignoreFiles": "./src/patterns/stylesheets/lib/**/*"
+  "ignoreFiles": "./src/stylesheets/lib/**/*"
 }

CONTRIBUTING.md

@@ -91,7 +91,7 @@ Chrome v59 or higher (v60 if you're on Windows).
 
 If you want to run a single test file, run `npm run mocha ${path/to/spec-file}`,
 substituting the actual path to the spec. Only javascript files can be executed by the `mocha` runner,
-and only those js files in the `src/patterns/` directory ending with a `.spec.js`.
+and only those js files in the `src/` directory ending with a `.spec.js`.
 
 Alternatively, you can add an `.only` to a `describe` or `it` block (i.e. `describe.only('my spec')`)
 and run the `npm run test` command. Keep in mind that this will also run linters and aXe accessibility tests.
@@ -120,7 +120,7 @@ This project follows the 18F Front End Guide [CSS](https://pages.18f.gov/fronten
 
 ### Code coverage
 
-We use [code coverage](https://en.wikipedia.org/wiki/Code_coverage) tools to understand how much of our JavaScript is tested by our [unit test suite](src/patterns/**/*.spec.js). Code coverage is one way (among many) of measuring code _quality_ more generally. Here's how it works for contributions:
+We use [code coverage](https://en.wikipedia.org/wiki/Code_coverage) tools to understand how much of our JavaScript is tested by our [unit test suite](src/**/*.spec.js). Code coverage is one way (among many) of measuring code _quality_ more generally. Here's how it works for contributions:
 
 1. Each pull request creates a new coverage report on [Code Climate](https://codeclimate.com/).
 1. Code Climate then posts a status message back to GitHub that lists the coverage percentage on that branch, and the difference between that number and the one last reported on our default branch.

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.11.2/uswds-2.11.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.12.2/uswds-2.12.2.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.11.2/
+   uswds-2.12.2/
    ├── 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.11.2/
+   │   ├── uswds-2.12.2/
    │   ├── 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.11.2/js/uswds-init.min.js"></script>
-       <link rel="stylesheet" href="assets/uswds-2.11.2/css/uswds.min.css" />
+       <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" />
      </head>
      <body>
-       <script src="assets/uswds-2.11.2/js/uswds.min.js"></script>
+       <script src="assets/uswds-2.12.2/js/uswds.min.js"></script>
      </body>
    </html>
    ```

SECURITY.md

@@ -2,7 +2,7 @@
 
 ## Our security policies and procedures
 
-We follow GSA's [IT security policy](https://www.gsa.gov/directive/gsa-information-technology-%28it%29-security-policy) to ensure the confidentiality, integrity, and availability of USWDS.
+We follow GSA's [IT security policy](https://www.gsa.gov/policy-regulations/policy/information-integrity-and-access/gsa-it-security-policies) to ensure the confidentiality, integrity, and availability of USWDS.
 
 We use [Snyk](https://snyk.io) to find, fix, and prevent vulnerabilities in USWDS dependencies. We run Snyk checks locally during development and automatically on all pull requests.
 

_config.yml

@@ -1,3 +1,2 @@
-# when publishing on Federalist, build only the files in ./build
-# (where Pattern library compiles to)
-source: build
+# when publishing on Federalist, point to built storybook instance
+source: storybook-static

docs/WHO_IS_USING_USWDS.md

@@ -12,6 +12,8 @@ Below are a list of websites and applications currently using the U.S. Web Desig
 - [Agricultural Marketing Service - USDA](http://gipsa.usda.gov/)
 - [Agricultural Research Service - USDA](https://www.ars.usda.gov/)
 - [America’s Seed Fund - National Science Foundation](https://seedfund.nsf.gov/)
+- [Army Medical Department Center of History & Heritage](https://achh.army.mil)
+- [Army Medical Department Civilian Corps](https://ameddciviliancorps.amedd.army.mil)
 - [ATF eRegulations](https://regulations.atf.gov/)
 - [Bankruptcy Noticing Center - U.S. Courts](https://bankruptcynotices.uscourts.gov/)
 - [Be Tobacco Free - HHS](https://betobaccofree.hhs.gov/)
@@ -134,6 +136,7 @@ Below are a list of websites and applications currently using the U.S. Web Desig
 - [U.S. Army Medical Center of Excellence (MEDCoE)](https://medcoe.army.mil)
 - [U.S. Data Federation](http://federation.data.gov/)
 - [U.S. Department of Agriculture (USDA)](https://www.usda.gov/)
+- [U.S. Department of Justice - Civil Rights Division](https://civilrights.justice.gov/)
 - [U.S. Department of Labor](https://www.dol.gov/)
 - [U.S. Department of the Treasury](https://treasury.gov)
 - [U.S. Department of Veterans Affairs](https://va.gov)

gulp-tasks/build.js

@@ -3,7 +3,7 @@ const dutil = require("./utils/doc-util");
 const { buildSprite } = require("./svg-sprite");
 const { compileSass } = require("./sass");
 const { compileJS } = require("./javascript");
-const { copyDocs, copyFonts, copyImages, copySass } = require("./copy");
+const { copyDocs, copyFonts, copyImages, copySass, copyVendor } = require("./copy");
 const { cleanDist } = require("./clean");
 
 /**
@@ -23,6 +23,7 @@ exports.build = series(
   },
   cleanDist,
   buildSprite,
+  copyVendor,
   copyDocs,
   parallel(compileSass, compileJS),
   parallel(copyImages, copyFonts, copySass)

gulp-tasks/copy.js

@@ -16,7 +16,7 @@ module.exports = {
 
   // Copy vendor sass to library
   copyVendor() {
-    const vendorSass = "src/patterns/stylesheets/lib";
+    const vendorSass = "src/stylesheets/lib";
 
     return src('./node_modules/normalize.css/normalize.css')
       .pipe(changed(vendorSass))
@@ -29,7 +29,7 @@ module.exports = {
   copySass() {
     dutil.logMessage("copyDistSass", "Copying all Sass to dist dir");
 
-    return src('src/patterns/**/**/*.scss')
+    return src('src/**/**/*.scss')
       .pipe(dest('dist/scss'));
   },