From 8c8994de7700c51565ff483e57220a6a0d2aa3c6 Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Wed, 10 Jul 2024 07:06:53 -0600
Subject: [PATCH] Updated the focus on the drag list and UI updates (#248)

* Updated the focus on the drag list and UI updates

* Add link to nvmrc and NVM repository

* Upgrade to pnpm/action-setup@v4 (v2 is now incompatible with npm - https://github.com/pnpm/action-setup/issues/135)

* Fix test of page title editing

* Fixed the style of the draggable item states

* Fixed the style of the draggable item states

---------

Co-authored-by: Daniel Naab <daniel.naab@gsa.gov>
Co-authored-by: Daniel Naab <dan@crushingpennies.com>
---
 .github/workflows/_terraform-apply.yml        |  2 +-
 .../workflows/_terraform-plan-pr-comment.yml  |  2 +-
 .github/workflows/_validate.yml               |  2 +-
 README.md                                     |  6 ++++
 .../FormEdit/AddPatternDropdown.tsx           | 20 ++++++-------
 .../FormEdit/components/PageEdit.tsx          |  7 ++++-
 .../components/PageSetEdit.stories.tsx        |  3 +-
 .../PreviewSequencePattern/DraggableList.tsx  | 20 ++++++++-----
 .../FormEdit/formEditStyles.module.css        | 29 ++++++++++++++++++-
 packages/design/src/test-form.ts              |  4 +--
 10 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/.github/workflows/_terraform-apply.yml b/.github/workflows/_terraform-apply.yml
index 9988a8f8..8f4ddb87 100644
--- a/.github/workflows/_terraform-apply.yml
+++ b/.github/workflows/_terraform-apply.yml
@@ -28,7 +28,7 @@ jobs:
           node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
           version: 8
diff --git a/.github/workflows/_terraform-plan-pr-comment.yml b/.github/workflows/_terraform-plan-pr-comment.yml
index b98ca1b5..5340be84 100644
--- a/.github/workflows/_terraform-plan-pr-comment.yml
+++ b/.github/workflows/_terraform-plan-pr-comment.yml
@@ -30,7 +30,7 @@ jobs:
           node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
           version: 8
diff --git a/.github/workflows/_validate.yml b/.github/workflows/_validate.yml
index c676e3f5..7acb5b7c 100644
--- a/.github/workflows/_validate.yml
+++ b/.github/workflows/_validate.yml
@@ -22,7 +22,7 @@ jobs:
           node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         id: pnpm-install
         with:
           version: 8
diff --git a/README.md b/README.md
index f8c1d17a..50e5a97f 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,12 @@ The platform is made up of the following high-level terms.
 
 ## Development
 
+This project uses the version of Node.js defined in [.nvmrc](./nvmrc). To ensure you're using the correct node version, you may use the [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm):
+
+```bash
+nvm install
+```
+
 This project uses [pnpm workspaces](https://pnpm.io/workspaces). To work with this project, [install pnpm](https://pnpm.io/installation) and then the project dependencies:
 
 ```bash
diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
index d44bbbfa..e5c396e6 100644
--- a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
+++ b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -172,22 +172,22 @@ export const FieldsetAddPatternButton = ({
         isOpen={isOpen}
         patternSelected={patternSelected}
       >
-        <svg
-          className="usa-icon text-base"
-          width="24"
-          height="24"
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-        >
-          <use xlinkHref={`${uswdsRoot}img/sprite.svg#add_circle`}></use>
-        </svg>{' '}
         <button
           className={classNames(
             'bg-white text-base padding-0 border-0 cursor-pointer'
           )}
           onClick={() => setIsOpen(!isOpen)}
         >
+          <svg
+            className="usa-icon text-base"
+            width="24"
+            height="24"
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+          >
+            <use xlinkHref={`${uswdsRoot}img/sprite.svg#add_circle`}></use>
+          </svg>{' '}
           <span className="display-inline-block text-ttop tablet:width-auto text-center">
             <span className="display-inline-block text-ttop margin-right-1">
               {title}
diff --git a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
index 24f93e16..bca11468 100644
--- a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
@@ -5,6 +5,7 @@ import { PageProps } from '@atj/forms';
 import { en as message } from '@atj/common/src/locales/en/app';
 import { PagePattern } from '@atj/forms/src/patterns/page/config';
 
+import { useRouteParams } from '../../../FormRouter/hooks';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
@@ -23,6 +24,10 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
     }
   };
 
+  const { routeParams } = useRouteParams();
+  const params = new URLSearchParams(routeParams?.toString());
+  const pageNumberText = Number(params.get('page')) + 1;
+
   return (
     <>
       {props.focus ? (
@@ -45,7 +50,7 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
           <span
             className={`${styles.pageNumber} padding-left-1 text-base-darkest bg-primary-lighter`}
           >
-            Page X
+            Page {pageNumberText}
           </span>
         </div>
       )}
diff --git a/packages/design/src/FormManager/FormEdit/components/PageSetEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/PageSetEdit.stories.tsx
index a8fa12c6..ac6185c7 100644
--- a/packages/design/src/FormManager/FormEdit/components/PageSetEdit.stories.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PageSetEdit.stories.tsx
@@ -21,9 +21,10 @@ export default storyConfig;
 export const Basic: StoryObj<typeof PageSetEdit> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    const pagesetHeaderElement = await canvas.findByText(/Page 1/);
     await testUpdateFormFieldOnSubmitByElement(
       canvasElement,
-      await canvas.findByText('Page X'),
+      pagesetHeaderElement,
       'Page title',
       'Page 1 updated'
     );
diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
index 7be2f102..c3484148 100644
--- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -111,12 +111,15 @@ const SortableItemOverlay = ({ children }: { children: React.ReactNode }) => {
       style={{
         boxShadow: '0 16px 24px rgba(0, 0, 0, 0.4)',
         cursor: 'grabbing',
+        outline: '0.25rem solid #783cb9',
       }}
     >
       <div className="grid-row draggable-list-item">
         <div
-          className="grid-col-12 width-full draggable-list-button padding-2"
-          style={{ outline: '.25rem solid #783cb9' }}
+          className={`${styles.draggableListButton} grid-col-12 width-full draggable-list-button padding-2`}
+          style={{
+            background: '#f0f0f0',
+          }}
         >
           <svg
             className="usa-icon margin-x-auto display-block"
@@ -152,21 +155,24 @@ const SortableItem = ({
 
   return (
     <div
-      className={`${styles.draggableListWrapper} draggable-list-item-wrapper bg-white margin-bottom-3`}
+      className={`${styles.draggableListWrapper} draggable-list-item-wrapper bg-white margin-bottom-3 cursor-pointer`}
       ref={setNodeRef}
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
-        opacity: isOver ? 0.4 : 1,
+        opacity: isOver ? 0.5 : 1,
         border: isOver ? '1px dashed #8168B3' : 'none',
+        outline: isOver ? 'none' : '',
       }}
     >
-      <div className="grid-row draggable-list-item cursor-pointer">
+      <div className="grid-row draggable-list-item">
         <div
-          className="grid-col-12 width-full draggable-list-button cursor-grab padding-2"
+          className={`${styles.draggableListButton} grid-col-12 width-full draggable-list-button padding-2`}
           {...listeners}
           {...attributes}
-          style={{ outline: isActive ? 'none' : '' }}
+          style={{
+            outline: isActive ? 'none' : '',
+          }}
         >
           <svg
             className="usa-icon margin-x-auto display-block"
diff --git a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css
index 0fd7aab4..fbec8d0d 100644
--- a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css
+++ b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css
@@ -55,6 +55,26 @@
   padding-left: 0;
 }
 
+.draggableListWrapper button {
+  cursor: pointer;
+}
+
+.draggableListWrapper:focus-within,
+.draggableListWrapper button:not([disabled]):focus {
+  outline: 0.25rem solid #783cb9;
+}
+
+.draggableListWrapper [tabindex]:focus,
+.draggableListWrapper:has(input:focus),
+.draggableListWrapper:has(button:focus),
+.draggableListWrapper:has(textarea:focus) {
+  outline: none;
+}
+
+.draggableListWrapper .dropdownMenu {
+  margin-top: 5px;
+}
+
 /* Configure and Publish Pages */
 .progressPage {
   min-height: 60vh;
@@ -89,5 +109,12 @@
   content: '';
   flex: 1;
   border-bottom: 1px dotted #71767a; /* TODO: $theme-color-base */
-  margin: 0 1em;
+}
+
+.dottedLine::before {
+  margin: 0 1em 0 0;
+}
+
+.dottedLine::after {
+  margin: 0 0 0 1em;
 }
diff --git a/packages/design/src/test-form.ts b/packages/design/src/test-form.ts
index 4df93ab9..987c1628 100644
--- a/packages/design/src/test-form.ts
+++ b/packages/design/src/test-form.ts
@@ -85,7 +85,7 @@ export const createTwoPageTwoPatternTestForm = () => {
           type: 'page',
           id: 'page-1',
           data: {
-            title: 'Page 1',
+            title: 'First page',
             patterns: ['element-1', 'element-2'],
           },
         } satisfies PagePattern,
@@ -93,7 +93,7 @@ export const createTwoPageTwoPatternTestForm = () => {
           type: 'page',
           id: 'page-2',
           data: {
-            title: 'Page 2',
+            title: 'Second page',
             patterns: [],
           },
         } satisfies PagePattern,