Merge branch 'jim/experimental-demo-tiptap' of https://github.com/GSA…

…-TTS/atj-platform into jim/experimental-demo-tiptap

README.md

@@ -42,7 +42,7 @@ This project uses [pnpm workspaces](https://pnpm.io/workspaces). To work with th
 pnpm install
 ```
 
-To run the complete test suite, with coverage metrics generated:
+To install the browsers needed for the Storybook testing with `@vitest/browser`, you need to do a one-time install with `pnpx install playwright --with-deps`. To run the complete test suite, with coverage metrics generated:
 
 ```bash
 pnpm test

package.json

@@ -9,10 +9,10 @@
     "build": "turbo run build --filter=!infra-cdktf",
     "clean": "turbo run clean",
     "dev": "turbo run dev --concurrency 20",
-    "format": "prettier --write \"packages/*/src/**/*.{js,jsx,ts,tsx,scss}\"",
+    "format": "prettier --write \"packages/*/src/**/*.{js,jsx,ts,tsx,scss,css}\"",
     "lint": "turbo run lint",
     "pages": "rm -rf node_modules && npm i -g pnpm turbo && pnpm i && pnpm build && ln -sf ./apps/spotlight/dist _site",
-    "test": "vitest run",
+    "test": "vitest run && pnpm --filter @atj/design test:ci",
     "test:ci": "vitest run && pnpm --filter @atj/design test:ci # --coverage.enabled --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=json-summary --coverage.reporter=json --coverage.reportOnFailure",
     "test:infra": "turbo run --filter=infra-cdktf test",
     "typecheck": "tsc --build",

packages/design/README.md

@@ -12,3 +12,5 @@ See relevant ADRs:
 
 - [documents/adr/0007-initial-css-strategy](../../documents/adr/0007-initial-css-strategy.md)
 - [documents/adr/0009-design-assets-workflow.md](../../documents/adr/0009-design-assets-workflow.md)
+
+This package as a special watch task. If your dev server is running already (`pnpm dev`), you can open a separate terminal and run `pnpm test:watch` and any changes to the *.{ts,tsx} files in this package will run the test suite. If you'd like to run from the project root directory, you would run `pnpm --filter @atj/design test:watch`.

packages/design/package.json

@@ -17,7 +17,9 @@
     "dev:styles": "gulp watch",
     "lint": "eslint --ext ts,tsx --report-unused-disable-directives --max-warnings 0 src",
     "test:url": "test-storybook --url http://127.0.0.1:9009 --config-dir .storybook",
-    "test:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build:storybook --quiet && pnpm http-server storybook-static --port 9009 --silent\" \"wait-on tcp:127.0.0.1:9009 && pnpm test:url --maxWorkers=2\""
+    "test:dev": "wait-on tcp:127.0.0.1:9009 && pnpm test:url --maxWorkers=2 # assumes dev server is running",
+    "test:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build:storybook --quiet && pnpm http-server storybook-static --port 9009 --silent\" \"pnpm test:dev\"",
+    "test:watch": "pnpm onchange './**/*.{tsx,ts}' -- pnpm test:url"
   },
   "files": [
     "dist/**/*"

packages/design/src/Form/components/PageSet/PageMenu/pageMenuStyles.module.css

@@ -1,11 +1,11 @@
 .sideNavWrapper {
-    top: 6rem;
+  top: 6rem;
 }
 
 .sideNav a:not(.usa-button):not(.usa-current) {
-    color: #005ea2;
+  color: #005ea2;
 }
 
 .sideNav a:not(.usa-button):hover {
-    background-color: #d9e8f6;
+  background-color: #d9e8f6;
 }

packages/design/src/Form/components/PageSet/PageSet.tsx

@@ -25,7 +25,10 @@ const PageSet: PatternComponent<PageSetProps> = props => {
           })}
         />
       </nav>
-      <div className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper">
+      <div
+        className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper"
+        aria-live="polite"
+      >
         {props.children}
         <ActionBar actions={props.actions} />
       </div>

packages/design/src/Form/components/RichText/richTextStyles.module.css

@@ -1,6 +1,6 @@
 .richTextEditorWrapper li > p {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
 }

packages/design/src/FormManager/FormEdit/components/PageSetEdit.tsx

@@ -31,7 +31,10 @@ const PageSetEdit: PatternEditComponent<PageSetProps> = ({ previewProps }) => {
           })}
         />
       </nav>
-      <div className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper">
+      <div
+        className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper"
+        aria-live="polite"
+      >
         {previewProps.children}
         <ActionBar actions={previewProps.actions} />
       </div>

packages/design/src/FormManager/FormEdit/formEditStyles.module.css

@@ -123,7 +123,7 @@
 }
 
 .draggableListWrapper:has(.patternActionWrapper .dropDown select:focus),
-.draggableListWrapper:has(.patternActionWrapper .dropDown:focus ) {
+.draggableListWrapper:has(.patternActionWrapper .dropDown:focus) {
   outline: 0;
 }
 
@@ -180,8 +180,6 @@
 }
 
 @media (min-width: 64.5em) {
-
-
   .moveToPage,
   .questionPosition {
     min-width: 18.75rem;
@@ -195,4 +193,4 @@
     overflow: auto;
     left: 32px;
   }
-}
+}

packages/design/src/FormManager/FormManagerLayout/formManagerStyles.module.css

@@ -1,14 +1,12 @@
 /* Bottom Navigation */
 
-
-
 @media (max-width: 40em) {
-    .editPage {
-        background: #eff6fb;
-        padding: 0;
-    }
-    
-    .savedStatus {
-        max-width: 7.5rem;
-    }
-}
+  .editPage {
+    background: #eff6fb;
+    padding: 0;
+  }
+
+  .savedStatus {
+    max-width: 7.5rem;
+  }
+}