feat: upgrade to USWDS v3.1.0 (#2203)

Upgrade to USWDS v3.1.0

.storybook/main.ts

@@ -1,15 +1,26 @@
 const path = require('path')
 
 const webpackConfig = (config) => {
-  config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/uswds')
+  config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/@uswds/uswds')
 
   config.module.rules = config.module.rules.filter(
     (rule) => rule.test.toString() !== '/\\.css$/'
   )
   config.module.rules.push({
     test: /\.(sa|sc|c)ss$/,
     exclude: /\.module\.(sa|sc|c)ss$/i,
-    use: ['style-loader', 'css-loader', 'sass-loader'],
+    use: ['style-loader', 'css-loader', {
+      loader: "sass-loader",
+      options: {
+        sourceMap: true,
+        sassOptions: {
+          includePaths: [
+            "./node_modules/@uswds",
+            "./node_modules/@uswds/uswds/packages",
+          ],
+        },
+      },
+    },],
     include: path.resolve(__dirname, '../'),
   })
 
@@ -26,13 +37,7 @@ const webpackConfig = (config) => {
           },
         },
       },
-      'sass-loader',
-      {
-        loader: 'sass-resources-loader',
-        options: {
-          resources: ['./src/uswdsResources.scss'],
-        },
-      },
+      "sass-loader",
     ],
   })
 

.storybook/preview.ts

@@ -1,6 +1,6 @@
 import 'happo-plugin-storybook/register'
 
-import 'uswds/dist/css/uswds.css'
+import '@uswds/uswds/css/uswds.css'
 import '../src/styles/index.scss'
 import './custom-styles.scss'
 

package.json

@@ -49,7 +49,7 @@
   "peerDependencies": {
     "react": "^16.x || ^17.x || ^18.x",
     "react-dom": "^16.x || ^17.x || ^18.x",
-    "uswds": "2.13.3"
+    "@uswds/uswds": "3.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
@@ -74,6 +74,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
+    "@uswds/uswds": "3.1.0",
     "all-contributors-cli": "^6.24.0",
     "@babel/eslint-parser": "^7.19.1",
     "babel-jest": "^28.1.0",
@@ -119,7 +120,6 @@
     "stylelint-scss": "^3.17.1",
     "ts-jest": "^26.1.2",
     "typescript": "^4.2.4",
-    "uswds": "2.13.3",
     "webpack": "^5.52.1",
     "webpack-cli": "^4.0.0"
   },

src/components/Footer/Footer/Footer.stories.tsx

@@ -12,7 +12,7 @@ import { SocialLinks, SocialLink } from '../SocialLinks/SocialLinks'
 import { TextInput } from '../../forms/TextInput/TextInput'
 
 // assets
-import logoImg from 'uswds/dist/img/logo-img.png'
+import logoImg from '@uswds/uswds/img/logo-img.png'
 
 export default {
   title: 'Components/Footer',

src/components/Footer/Logo/Logo.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Logo } from './Logo'
 
 // assets
-import logoImg from 'uswds/src/img/logo-img.png'
+import logoImg from '@uswds/uswds/src/img/logo-img.png'
 
 export default {
   title: 'Components/Footer/Logo',

src/components/Footer/SocialLinks/SocialLinks.tsx

@@ -2,11 +2,11 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import iconFacebook from 'uswds/src/img/usa-icons/facebook.svg'
-import iconTwitter from 'uswds/src/img/usa-icons/twitter.svg'
-import iconYouTube from 'uswds/src/img/usa-icons/youtube.svg'
-import iconInstagram from 'uswds/src/img/usa-icons/instagram.svg'
-import iconRSS from 'uswds/src/img/usa-icons/rss_feed.svg'
+import iconFacebook from '@uswds/uswds/src/img/usa-icons/facebook.svg'
+import iconTwitter from '@uswds/uswds/src/img/usa-icons/twitter.svg'
+import iconYouTube from '@uswds/uswds/src/img/usa-icons/youtube.svg'
+import iconInstagram from '@uswds/uswds/src/img/usa-icons/instagram.svg'
+import iconRSS from '@uswds/uswds/src/img/usa-icons/rss_feed.svg'
 
 type SocialLinksProps = {
   links: React.ReactNode[]

src/components/Identifier/Identifier/Identifier.stories.tsx

@@ -13,7 +13,7 @@ import { IdentifierLogos } from '../IdentifierLogos/IdentifierLogos'
 
 import { Link } from '../../Link/Link'
 
-import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+import dotGovIcon from '@uswds/uswds/src/img/icon-dot-gov.svg'
 
 export default {
   title: 'Components/Identifier',

src/components/Identifier/Identifier/Identifier.test.tsx

@@ -12,7 +12,7 @@ import { IdentifierLinkItem } from '../IdentifierLinkItem/IdentifierLinkItem'
 import { IdentifierGov } from '../IdentifierGov/IdentifierGov'
 import { Link } from '../../Link/Link'
 
-import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+import dotGovIcon from '@uswds/uswds/src/img/icon-dot-gov.svg'
 
 const testIdentifierLogo = (
   <img

src/components/Identifier/IdentifierLogo/IdentifierLogo.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 
-import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+import dotGovIcon from '@uswds/uswds/src/img/icon-dot-gov.svg'
 
 import { IdentifierLogo } from './IdentifierLogo'
 

src/components/Identifier/IdentifierLogos/IdentifierLogos.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import { IdentifierLogos } from './IdentifierLogos'
 
-import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+import dotGovIcon from '@uswds/uswds/src/img/icon-dot-gov.svg'
 
 const testIdentifierLogo = (
   <img

src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 
-import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+import dotGovIcon from '@uswds/uswds/src/img/icon-dot-gov.svg'
 
 import { IdentifierMasthead } from './IdentifierMasthead'
 import { IdentifierLogo } from '../IdentifierLogo/IdentifierLogo'

src/components/Search/Search.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import searchImg from 'uswds/src/img/usa-icons-bg/search--white.svg'
+import searchImg from '@uswds/uswds/src/img/usa-icons-bg/search--white.svg'
 
 import { Button } from '../Button/Button'
 import { Form, OptionalFormProps } from '../forms/Form/Form'

src/components/banner/CustomBanner.stories.tsx

@@ -11,9 +11,9 @@ import {
   MediaBlockBody,
 } from '../../index'
 
-import flagImg from 'uswds/src/img/us_flag_small.png'
-import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
-import httpsIcon from 'uswds/src/img/icon-https.svg'
+import flagImg from '@uswds/uswds/src/img/us_flag_small.png'
+import dotGovIcon from '@uswds/uswds/src/img/icon-dot-gov.svg'
+import httpsIcon from '@uswds/uswds/src/img/icon-https.svg'
 
 const CustomBanner = (): ReactElement => {
   const [isOpen, setIsOpen] = useState(false)

src/components/banner/GovBanner/GovBanner.tsx

@@ -10,9 +10,9 @@ import { MediaBlockBody } from '../../mediablock/MediaBlockBody/MediaBlockBody'
 import { BannerLockImage } from '../BannerLockImage/BannerLockImage'
 
 // assets
-import flagImg from 'uswds/src/img/us_flag_small.png'
-import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
-import httpsIcon from 'uswds/src/img/icon-https.svg'
+import flagImg from '@uswds/uswds/src/img/us_flag_small.png'
+import dotGovIcon from '@uswds/uswds/src/img/icon-dot-gov.svg'
+import httpsIcon from '@uswds/uswds/src/img/icon-https.svg'
 
 type Language = 'english' | 'spanish'
 

src/components/breadcrumb/BreadcrumbBar/BreadcrumbBar.stories.tsx

@@ -65,27 +65,27 @@ export const BreadcrumbWithRdfaMetadata = (): React.ReactElement => {
     <BreadcrumbBar listProps={{ ...rdfaMetadata.ol }}>
       <Breadcrumb {...rdfaMetadata.li}>
         <BreadcrumbLink href="#" {...rdfaMetadata.a}>
-          {/* eslint-disable-next-line react/no-unknown-property */ }
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <span property="name">Home</span>
         </BreadcrumbLink>
         <meta property="position" content="1" />
       </Breadcrumb>
       <Breadcrumb {...rdfaMetadata.li}>
         <BreadcrumbLink href="#" {...rdfaMetadata.a}>
-          {/* eslint-disable-next-line react/no-unknown-property */ }
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <span property="name">Federal Contracting</span>
         </BreadcrumbLink>
         <meta property="position" content="2" />
       </Breadcrumb>
       <Breadcrumb {...rdfaMetadata.li}>
         <BreadcrumbLink href="#" {...rdfaMetadata.a}>
-          {/* eslint-disable-next-line react/no-unknown-property */ }
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <span property="name">Contracting assistance programs</span>
         </BreadcrumbLink>
         <meta property="position" content="3" />
       </Breadcrumb>
       <Breadcrumb current {...rdfaMetadata.li}>
-        {/* eslint-disable-next-line react/no-unknown-property */ }
+        {/* eslint-disable-next-line react/no-unknown-property */}
         <span property="name">
           Women-owned small business federal contracting program
         </span>

src/components/header/NavCloseButton/NavCloseButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 // assets
-import closeImg from 'uswds/src/img/close.svg'
+import closeImg from '@uswds/uswds/src/img/usa-icons/close.svg'
 
 export const NavCloseButton = ({
   onClick,

src/stories/templates/createaccount.stories.tsx

@@ -30,8 +30,8 @@ import {
   IdentifierGov,
 } from '../../index'
 
-import logoImg from 'uswds/src/img/logo-img.png'
-import circleSvg from 'uswds/src/img/circle-gray-20.svg'
+import logoImg from '@uswds/uswds/src/img/logo-img.png'
+import circleSvg from '@uswds/uswds/src/img/circle-gray-20.svg'
 import { MediaBlockBody } from '../../components/mediablock/MediaBlockBody/MediaBlockBody'
 
 export default {

src/stories/templates/documentation.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState } from 'react'
-import logoImg from 'uswds/src/img/logo-img.png'
+import logoImg from '@uswds/uswds/src/img/logo-img.png'
 
 import { GovBanner, GridContainer, Grid } from '../../index'
 

src/stories/templates/landing.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState } from 'react'
-import logoImg from 'uswds/src/img/logo-img.png'
-import circleImg from 'uswds/src/img/circle-124.png'
+import logoImg from '@uswds/uswds/src/img/logo-img.png'
+import circleImg from '@uswds/uswds/src/img/circle-124.png'
 
 import { GovBanner, GridContainer, Grid, MediaBlockBody } from '../../index'
 

src/stories/templates/mutliplesignin.stories.tsx

@@ -26,8 +26,8 @@ import {
   Button,
 } from '../../index'
 
-import logoImg from 'uswds/src/img/logo-img.png'
-import circleSvg from 'uswds/src/img/circle-gray-20.svg'
+import logoImg from '@uswds/uswds/src/img/logo-img.png'
+import circleSvg from '@uswds/uswds/src/img/circle-gray-20.svg'
 
 export default {
   title: 'Page Templates/Authentication Pages',

src/stories/templates/notfound.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState } from 'react'
-import logoImg from 'uswds/src/img/logo-img.png'
-import circleSvg from 'uswds/src/img/circle-gray-20.svg'
+import logoImg from '@uswds/uswds/src/img/logo-img.png'
+import circleSvg from '@uswds/uswds/src/img/circle-gray-20.svg'
 
 import {
   GovBanner,

src/stories/templates/signin.stories.tsx

@@ -29,8 +29,8 @@ import {
   Button,
 } from '../../index'
 
-import logoImg from 'uswds/src/img/logo-img.png'
-import circleSvg from 'uswds/src/img/circle-gray-20.svg'
+import logoImg from '@uswds/uswds/src/img/logo-img.png'
+import circleSvg from '@uswds/uswds/src/img/circle-gray-20.svg'
 
 export default {
   title: 'Page Templates/Authentication Pages',

src/styles/_backgrounds.scss

@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .bg-info-lighter {
   @include u-bg('info-lighter');
 }

src/styles/_type.scss

@@ -1,3 +1,5 @@
+@use 'uswds-core' as *;
+
 .text-info-lighter {
   @include u-text('info-lighter');
 }

src/styles/_uswds-theme.scss

@@ -0,0 +1,6 @@
+// Custom theme settings/USWDS overrides go here
+@use 'uswds-core' with (
+  $theme-image-path: '@uswds/uswds/img',
+  $theme-font-path: '@uswds/uswds/fonts',
+  $theme-show-notifications: false
+);

src/styles/index.scss

@@ -1,7 +1,8 @@
-@import '../uswdsResources';
+@forward 'uswds-theme';
+@forward 'uswds';
 
-@import 'backgrounds';
-@import 'type';
+@forward 'backgrounds';
+@forward 'type';
 
 // This should be set by USWDS but isn't
 // It can be removed when https://github.com/uswds/uswds/issues/4458 is fixed

src/uswds.ts

@@ -1 +1 @@
-import 'uswds/dist/css/uswds.css'
+import '@uswds/uswds/css/uswds.css'

webpack.config.js

@@ -38,7 +38,7 @@ module.exports = {
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
     alias: {
-      uswds: path.resolve(__dirname, './node_modules/uswds'),
+      uswds: path.resolve(__dirname, './node_modules/@uswds/uswds'),
     },
   },
   module: {
@@ -62,19 +62,26 @@ module.exports = {
               },
             },
           },
-          'sass-loader',
-          {
-            loader: 'sass-resources-loader',
-            options: {
-              resources: ['./src/uswdsResources.scss'],
-            },
-          },
+          'sass-loader'
         ],
       },
       {
         test: /\.(sa|sc|c)ss$/i,
         exclude: /\.module\.(sa|sc|c)ss$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 
+        {
+          loader: "sass-loader",
+          options: {
+            sourceMap: true,
+            sassOptions: {
+              includePaths: [
+                "./node_modules/@uswds",
+                "./node_modules/@uswds/uswds/packages",
+              ],
+            },
+          },
+        },
+      ],
       },
       {
         test: /\.svg$/,