From d034914bbc09da139e739cf5e46b666cc24c218e Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Wed, 3 Jul 2024 22:37:45 -0600
Subject: [PATCH 1/6] Updated the focus on the drag list and UI updates

---
 README.md                                     |  6 ++++
 .../FormEdit/AddPatternDropdown.tsx           | 20 ++++++-------
 .../FormEdit/components/PageEdit.tsx          |  5 ++++
 .../PreviewSequencePattern/DraggableList.tsx  | 13 +++++----
 .../FormEdit/formEditStyles.module.css        | 29 ++++++++++++++++++-
 5 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index f8c1d17a..4cfc554c 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 NodeJS that is in the .nvmrc. To ensure you're using the correct node version, run:
+
+```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..1b2196dd 100644
--- a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
@@ -12,6 +12,7 @@ import { PatternEditForm } from './common/PatternEditForm';
 import { usePatternEditFormContext } from './common/hooks';
 import { PatternPreviewSequence } from './PreviewSequencePattern';
 import styles from '../formEditStyles.module.css';
+//import { useSearchParams } from 'react-router-dom';
 
 export const PageEdit: PatternEditComponent<PageProps> = props => {
   const handleParentClick = (
@@ -23,6 +24,9 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
     }
   };
 
+  // const [searchParams] = useSearchParams();
+  // const pageNumberText = Number(searchParams.get('page')) + 1;
+
   return (
     <>
       {props.focus ? (
@@ -45,6 +49,7 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
           <span
             className={`${styles.pageNumber} padding-left-1 text-base-darkest bg-primary-lighter`}
           >
+            {/* Page {pageNumberText} */}
             Page X
           </span>
         </div>
diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
index 7be2f102..6c9117cb 100644
--- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -111,13 +111,11 @@ 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' }}
-        >
+        <div className="grid-col-12 width-full draggable-list-button padding-2">
           <svg
             className="usa-icon margin-x-auto display-block"
             aria-hidden="true"
@@ -157,8 +155,9 @@ const SortableItem = ({
       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">
@@ -166,7 +165,9 @@ const SortableItem = ({
           className="grid-col-12 width-full draggable-list-button cursor-grab 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;
 }

From a31fa5d0c9d4e9d3dfa89610fbc2863312bde2fb Mon Sep 17 00:00:00 2001
From: Daniel Naab <daniel.naab@gsa.gov>
Date: Fri, 5 Jul 2024 09:05:35 -0500
Subject: [PATCH 2/6] Add link to nvmrc and NVM repository

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4cfc554c..50e5a97f 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ The platform is made up of the following high-level terms.
 
 ## Development
 
-This project uses the version of NodeJS that is in the .nvmrc. To ensure you're using the correct node version, run:
+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

From e01faf507d0e964abedcdb2e254b387e7ed0a261 Mon Sep 17 00:00:00 2001
From: Daniel Naab <dan@crushingpennies.com>
Date: Fri, 5 Jul 2024 09:39:56 -0500
Subject: [PATCH 3/6] Upgrade to pnpm/action-setup@v4 (v2 is now incompatible
 with npm - https://github.com/pnpm/action-setup/issues/135)

---
 .github/workflows/_terraform-apply.yml           | 2 +-
 .github/workflows/_terraform-plan-pr-comment.yml | 2 +-
 .github/workflows/_validate.yml                  | 2 +-
 3 files changed, 3 insertions(+), 3 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

From 3d75be042ae84efcce53870cb40bd9edf7c53745 Mon Sep 17 00:00:00 2001
From: Daniel Naab <dan@crushingpennies.com>
Date: Fri, 5 Jul 2024 10:40:40 -0500
Subject: [PATCH 4/6] Fix test of page title editing

---
 .../src/FormManager/FormEdit/components/PageEdit.tsx   | 10 +++++-----
 .../FormEdit/components/PageSetEdit.stories.tsx        |  3 ++-
 packages/design/src/test-form.ts                       |  4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
index 1b2196dd..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';
@@ -12,7 +13,6 @@ import { PatternEditForm } from './common/PatternEditForm';
 import { usePatternEditFormContext } from './common/hooks';
 import { PatternPreviewSequence } from './PreviewSequencePattern';
 import styles from '../formEditStyles.module.css';
-//import { useSearchParams } from 'react-router-dom';
 
 export const PageEdit: PatternEditComponent<PageProps> = props => {
   const handleParentClick = (
@@ -24,8 +24,9 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
     }
   };
 
-  // const [searchParams] = useSearchParams();
-  // const pageNumberText = Number(searchParams.get('page')) + 1;
+  const { routeParams } = useRouteParams();
+  const params = new URLSearchParams(routeParams?.toString());
+  const pageNumberText = Number(params.get('page')) + 1;
 
   return (
     <>
@@ -49,8 +50,7 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
           <span
             className={`${styles.pageNumber} padding-left-1 text-base-darkest bg-primary-lighter`}
           >
-            {/* Page {pageNumberText} */}
-            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/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,

From cfa9014303b741fa8713212cf6cc768db7cf0a2b Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Mon, 8 Jul 2024 20:02:55 -0600
Subject: [PATCH 5/6] Fixed the style of the draggable item states

---
 .../PreviewSequencePattern/DraggableList.tsx         | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
index 6c9117cb..39367f34 100644
--- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -115,7 +115,11 @@ const SortableItemOverlay = ({ children }: { children: React.ReactNode }) => {
       }}
     >
       <div className="grid-row draggable-list-item">
-        <div className="grid-col-12 width-full draggable-list-button padding-2">
+        <div 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"
             aria-hidden="true"
@@ -150,7 +154,7 @@ 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),
@@ -160,9 +164,9 @@ const SortableItem = ({
         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={{

From aaf2e74551e82bfffcf1f8f4c4e4ea4fee5fd817 Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Mon, 8 Jul 2024 20:04:32 -0600
Subject: [PATCH 6/6] Fixed the style of the draggable item states

---
 .../components/PreviewSequencePattern/DraggableList.tsx  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
index 39367f34..c3484148 100644
--- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -115,10 +115,11 @@ const SortableItemOverlay = ({ children }: { children: React.ReactNode }) => {
       }}
     >
       <div className="grid-row draggable-list-item">
-        <div className={`${styles.draggableListButton} grid-col-12 width-full draggable-list-button padding-2`}
-        style={{
-          background: '#f0f0f0',
-        }}
+        <div
+          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"