Merge pull request #4603 from cloud-gov/feat-upgraded-uswds-v3-styles

feat: Upgrade Pages to USWDS V3
cloud-gov · Oct 2, 2024 · 5e31234 · 5e31234
2 parents cd145e6 + e60ad4d
commit 5e31234
Show file tree

Hide file tree

Showing 145 changed files with 1,855 additions and 4,603 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,12 +7,16 @@ config/local-site-build-tasks.json
 public/js/bundle.js
 public/js/report*
 public/js/bundle.*.js*
+public/js/uswds*.js*
 public/js/bundle.*
 public/styles/styles.css
+public/styles.css
 public/styles/styles.*.css*
 public/styles/uswds.*.css*
+public/img/*
 public/uswds3/*
 !public/uswds3/.keep
+public/fonts/*
 webpack-manifest.json
 webpackAssets
 public/stats.json

diff --git a/Makefile b/Makefile
@@ -65,7 +65,7 @@ test-all: ## Run all tests
 	docker compose run --rm app yarn test
 
 everything: # When you switch to a new branch and need to rebuild everything
-	docker compose down
+	docker compose -f ./docker-compose.yml -f ./docker-compose.uaa.yml down
 	make rebuild
 	make install
 	make migrate

diff --git a/admin-client/package.json b/admin-client/package.json
@@ -28,11 +28,11 @@
     "sirv-cli": "^1.0.0"
   },
   "dependencies": {
+    "@uswds/uswds": "^3.8.2",
     "date-fns": "^2.30.0",
     "page": "^1.11.6",
     "svelecte": "^3.17.2",
-    "svelte": "^3.0.0",
-    "uswds": "^2.14.0"
+    "svelte": "^3.0.0"
   },
   "resolutions": {
     "path-to-regexp": "1.9.0"

diff --git a/admin-client/rollup.config.js b/admin-client/rollup.config.js
@@ -11,7 +11,7 @@ const { API_URL, NODE_ENV, ROLLUP_WATCH } = process.env;
 const production = !ROLLUP_WATCH;
 const apiUrl = API_URL || 'http://localhost:1337';
 
-const uswds = 'node_modules/uswds/dist';
+const uswds = 'node_modules/@uswds/uswds/dist';
 
 function serve() {
   let server;

diff --git a/admin-client/src/pages/NotFound.svelte b/admin-client/src/pages/NotFound.svelte
@@ -10,7 +10,7 @@
 </svelte:head>
 
 <div
-  class="usa-grid info-block usa-content padding-y-4 margin-y-4
+  class="grid-row info-block usa-content padding-y-4 margin-y-4
   desktop:padding-y-7 desktop:margin-y-7">
   <h1 class="text-primary-darker text-bold">{status} / {error.message}</h1>
   <p>

diff --git a/admin-client/yarn.lock b/admin-client/yarn.lock
@@ -246,6 +246,15 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@uswds/uswds@^3.8.2":
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/@uswds/uswds/-/uswds-3.8.2.tgz#230668293c33f6866995ba9d03d6f42aba251336"
+  integrity sha512-8sTx/GqlbTwSIK+0AFOGrYdaW1rKVB7Bp0+v9AMVt3I5vPK7CL0+I6vlclSf3U7ysJZeTTdkNS8q89sIAeL+AA==
+  dependencies:
+    object-assign "4.1.1"
+    receptor "1.0.0"
+    resolve-id-refs "0.1.0"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -459,11 +468,6 @@ chokidar@^3.5.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classlist-polyfill@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
-  integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -629,11 +633,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-domready@1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
-  integrity sha512-uIzsOJUNk+AdGE9a6VDeessoMCzF8RrZvJCX/W8QtyfgdR6Uofn/MvRonih3OtCO79b2VDzDOymuiABrQ4z3XA==
-
 element-closest@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/element-closest/-/element-closest-2.0.2.tgz#72a740a107453382e28df9ce5dbb5a8df0f966ec"
@@ -2193,17 +2192,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-uswds@^2.14.0:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.14.0.tgz#f7861aec6512b38d8c6ec70f1e01b3590cdbd914"
-  integrity sha512-r5ebL3av9jOPcbXTxKnGiT5k5NVIAWmtYcO8LeJkA5Svh2qc90YRhzCUWbz9TbGdXJriMCPb7whiULPDxmRhxg==
-  dependencies:
-    classlist-polyfill "1.2.0"
-    domready "1.0.8"
-    object-assign "4.1.1"
-    receptor "1.0.0"
-    resolve-id-refs "0.1.0"
-
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"

diff --git a/api/middlewares/dev-middleware.js b/api/middlewares/dev-middleware.js
@@ -3,7 +3,7 @@ function devMiddleware() {
   const webpack = require('webpack');
   const webpackDevMiddleware = require('webpack-dev-middleware');
 
-  const webpackConfig = require('../../webpack.development.config');
+  const webpackConfig = require('../../webpack.config');
 
   const compiler = webpack(webpackConfig);
 

diff --git a/api/utils/index.js b/api/utils/index.js
@@ -110,7 +110,7 @@ function getDirectoryFiles(dir, existingFileList) {
 }
 
 function loadDevelopmentManifest() {
-  const webpackConfig = require('../../webpack.development.config.js'); // eslint-disable-line global-require,import/extensions
+  const webpackConfig = require('../../webpack.config.js'); // eslint-disable-line global-require,import/extensions
   const { publicPath } = webpackConfig.output;
   const cleanedPath = publicPath.slice(1);
   const jsFiles = {};

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -30,6 +30,7 @@ services:
       DOMAIN: localhost:1337
       FEATURE_BUILD_TASKS: 'active'
       FEATURE_LOCAL_BUILD_REPORTS: 'active'
+      NODE_ENV: development
       PORT: 1337
       PRODUCT: pages
       UAA_HOST: http://localhost:9000

diff --git a/frontend/components/AddSite/AddRepoSiteForm.jsx b/frontend/components/AddSite/AddRepoSiteForm.jsx
@@ -34,40 +34,39 @@ export const AddRepoSiteForm = ({
   showAddNewSiteFields,
 }) => (
   <form onSubmit={handleSubmit}>
-    <div className="form-group">
+    <div className="form-group margin-y-3">
       <GitHubRepoUrlField
         label="Already have a GitHub repo for your site? Paste the URL here."
         name="repoUrl"
         id="repoUrl"
         placeholder="https://github.com/owner/repository"
-        className="form-control"
         readOnly={showAddNewSiteFields}
       />
-      <div className="form-group">
-        <Field
-          name="repoOrganizationId"
-          type="select"
-          component={p => (
-            <UserOrgSelect
-              id="repoOrganizationId"
-              name="repoOrganizationId"
-              value={p.input.value}
-              onChange={p.input.onChange}
-              orgData={organizations.data}
-              mustChooseOption
-              {...p.meta}
-            />
-          )}
-        />
-      </div>
+    </div>
+    <div className="form-group margin-y-3">
+      <Field
+        name="repoOrganizationId"
+        type="select"
+        component={p => (
+          <UserOrgSelect
+            id="repoOrganizationId"
+            name="repoOrganizationId"
+            value={p.input.value}
+            onChange={p.input.onChange}
+            orgData={organizations.data}
+            mustChooseOption
+            {...p.meta}
+          />
+        )}
+      />
     </div>
     {
       showAddNewSiteFields && (
       <div className="add-repo-site-additional-fields">
         {showNewSiteAlert()}
-        <div className="form-group">
+        <div className="form-group margin-y-2">
           {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-          <label htmlFor="engine">Site engine</label>
+          <label className="usa-label text-bold" htmlFor="engine">Site engine</label>
           <Field
             name="engine"
             component={p => (
@@ -76,7 +75,6 @@ export const AddRepoSiteForm = ({
                 id="engine"
                 value={p.input.value}
                 onChange={p.input.onChange}
-                className="form-control"
               />
             )}
           />
@@ -86,7 +84,7 @@ export const AddRepoSiteForm = ({
 }
     <button
       type="submit"
-      className="usa-button usa-button-primary inline-block"
+      className="usa-button usa-button--primary inline-block"
       disabled={pristine}
     >
       Add repository-based site

diff --git a/frontend/components/AddSite/TemplateSiteList/index.jsx b/frontend/components/AddSite/TemplateSiteList/index.jsx
@@ -19,7 +19,7 @@ const templateGrid = (
     const template = templates[templateKey];
 
     return (
-      <div className="federalist-template-list" key={templateKey}>
+      <ul className="federalist-template-list usa-card-group" key={templateKey}>
         <TemplateSite
           templateKey={templateKey}
           index={index}
@@ -31,7 +31,7 @@ const templateGrid = (
           organizations={organizations}
           {...template}
         />
-      </div>
+      </ul>
     );
   })
 );
@@ -47,7 +47,7 @@ function TemplateList(props) {
   }
 
   return (
-    <div>
+    <div className="margin-top-6">
       <h2>Or choose from one of our templates</h2>
       {templateGrid(
         activeChildId,