Upgrade USWDS to 3.x

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": "plugin:@18f/eslint-plugin-identity/recommended",
+  "plugins": ["@18f/eslint-plugin-identity"],
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "rules": {
+    "import/no-unresolved": ["error", { "ignore": ["^@uswds/uswds/js/_?usa-[a-z-]+$"] }]
+  }
+}

CHANGELOG.md

@@ -3,6 +3,11 @@
 ### Breaking Changes
 
 - NPM package is renamed from `identity-style-guide` to `@18f/identity-design-system`. ([#331](https://github.com/18F/identity-design-system/pull/331))
+- Update USWDS from 2.13.3 to 3.4.1
+  - Polyfills have been removed, consistent with current Login.gov browser support
+  - The following JavaScript named exports have been renamed or removed:
+    - `navigation` is renamed to `header`
+    - `validator` is renamed to `validation`
 - Sass artifacts now require Dart Sass. The Ruby Sass and LibSass (C) compilers are no longer supported.
 - To improve performance of the default CSS bundle, responsive utility breakpoints other than `tablet:` have been disabled by default. Previously, `mobile-lg:` and `desktop:` utilities were also enabled. You can restore the original settings by overriding [the `$theme-utility-breakpoints` Sass variable](https://designsystem.digital.gov/documentation/settings/#utilities-settings).
    - Component styling which previously responded to now-disabled breakpoints have been updated to standardize on the `tablet` breakpoint. This affects `usa-button--wide`, `usa-search--big`, and `usa-intro` CSS classes.
@@ -84,7 +89,7 @@
 ### Improvements
 
 - Line height calculations are improved such that the [desired token size](https://github.com/uswds/uswds/blob/61a0d99f0e6b36c3758948ba6ac46140abc5e585/src/stylesheets/theme/_uswds-theme-typography.scss#L363-L371) will always apply regardless of font family or scale. ([#291](https://github.com/18F/identity-style-guide/pull/291))
-   - In the case of headings, line-height will fall back to the configured body line-height if the resulting actual line-height would be smaller than body content when using the heading scale.
+  - In the case of headings, line-height will fall back to the configured body line-height if the resulting actual line-height would be smaller than body content when using the heading scale.
 - Body font size has been increased slightly to restore an effective font size of 1rem. ([#292](https://github.com/18F/identity-style-guide/pull/292))
 - The Process List component no longer applies vertical padding which would affect its layout relative to surrounding content. ([#290](https://github.com/18F/identity-style-guide/pull/290))
 - Input hint text is no longer italicized. ([#293](https://github.com/18F/identity-style-guide/pull/293))

Makefile

@@ -58,11 +58,11 @@ build-sass-and-js:
 
 build-fonts:
 	mkdir -p $(OUTPUT_DIR)/assets/fonts
-	cp -r node_modules/uswds/src/fonts $(OUTPUT_DIR)/assets
+	cp -r node_modules/@uswds/uswds/dist/fonts $(OUTPUT_DIR)/assets
 
 build-images:
 	mkdir -p $(OUTPUT_DIR)/assets/img
-	cp -r node_modules/uswds/src/img $(OUTPUT_DIR)/assets
+	cp -r node_modules/@uswds/uswds/dist/img $(OUTPUT_DIR)/assets
 	cp -r src/img $(OUTPUT_DIR)/assets
 
 copy-scss:

README.md

@@ -180,17 +180,6 @@ Below are various ways to use the Login.gov Design System throughout our various
 
   Note that unlike the pre-built JavaScript assets found in the `dist/assets` directory, importing the package from NPM will not automatically initialize the components on the page or include polyfills necessary to support older browsers. You will have to call the `on()` method for each component you import.
 
-  If you need support for older browsers in your project, it's suggested you import polyfills shipped with the `uswds` package and import it before any components:
-
-  ```
-  npm install uswds
-  ```
-
-  ```js
-  import 'uswds/src/js/polyfills';
-  import { accordion } from '@18f/identity-design-system';
-  ```
-
 ### Jekyll
 
 If you’re using Jekyll, a simple plugin can help copy this file during your build process to keep your assets up-to-date. First, add this file to `_plugins/`:

docs/index.md

@@ -46,7 +46,7 @@ The {{ site.title }} is built using the [U.S. Web Design System](https://designs
 
 # A work in progress
 
-The latest version is <strong class="text-no-wrap">{{ site.package_json.this_version }}</strong> which uses <strong class="text-no-wrap">uswds@{{ site.package_json.uswds_version }}</strong>. Spot an issue? We’d love to hear about it [on GitHub](https://github.com/18F/identity-style-guide/issues).
+The latest version is <strong class="text-no-wrap">{{ site.package_json.this_version }}</strong> which uses <strong class="text-no-wrap">uswds@{{ site.package_json['@uswds/uswds_version'] }}</strong>. Spot an issue? We’d love to hear about it [on GitHub](https://github.com/18F/identity-style-guide/issues).
 
 </div>
       </div>

gulpfile.js

@@ -9,7 +9,9 @@ const gulpif = require('gulp-if');
 const sass = require('gulp-sass')(require('sass-embedded'));
 const stylelint = require('stylelint');
 const sourcemaps = require('gulp-sourcemaps');
-const browserify = require('browserify');
+const rollup = require('@rollup/stream');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
 const babel = require('gulp-babel');
 const source = require('vinyl-source-stream');
 const buffer = require('vinyl-buffer');
@@ -86,13 +88,16 @@ gulp.task('build-package-esm', () =>
 );
 
 gulp.task('build-js', () => {
-  const stream = browserify({ entries: `${PROJECT_JS_SRC}/${PROJECT_JS_AUTO}`, debug: true })
-    .transform('babelify', { global: true, presets: ['@babel/preset-env'] })
-    .bundle()
+  const stream = rollup({
+    input: `${PROJECT_JS_SRC}/${PROJECT_JS_AUTO}`,
+    output: { format: 'iife' },
+    plugins: [nodeResolve(), commonjs()],
+  })
     .on('error', notificationOptions.handler)
     .pipe(source(PROJECT_JS_AUTO))
     .pipe(buffer())
     .pipe(rename(PROJECT_JS_AUTO_OUT))
+    .pipe(babel({ presets: [['@babel/preset-env']] }))
     .pipe(gulp.dest(JS_DEST))
     .pipe(notify(notificationOptions.success));
 
@@ -122,7 +127,12 @@ gulp.task('build-sass', () =>
   gulp
     .src([`${PROJECT_SASS_SRC}/*.scss`])
     .pipe(sourcemaps.init({ largeFile: true }))
-    .pipe(sass({ outputStyle: isProduction ? 'compressed' : 'expanded' }))
+    .pipe(
+      sass({
+        outputStyle: isProduction ? 'compressed' : 'expanded',
+        includePaths: ['node_modules/@uswds/uswds/packages'],
+      }),
+    )
     .pipe(
       postcss([
         autoprefixer({
@@ -153,7 +163,7 @@ gulp.task('copy-login-scss', () =>
 
 gulp.task('copy-uswds-scss', () =>
   gulp
-    .src(['node_modules/uswds/dist/scss/**/*.scss'])
+    .src(['node_modules/@uswds/uswds/dist/scss/**/*.scss'])
     .pipe(underscorePrefix())
     .pipe(gulp.dest(`${SCSS_DEST}/uswds`)),
 );