For demo: sticky edit and edit icon - Part 2 (#55)

* Updated the styles of the Edit Forms Page * Updated the svg edit icon * Made another minor update to the svg * lint * Fix tests from merge issues * Made the settings panel sticky Updated the edit settings panel to make it sticky to form field nthat was clicked. * Fixed some minor lint issues * Updated the edit button --------- Co-authored-by: Daniel Naab <[email protected]>
GSA-TTS · Feb 29, 2024 · 19e19bd · 19e19bd
1 parent 06f356c
commit 19e19bd
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 35 deletions.
diff --git a/apps/spotlight/src/layouts/Layout.astro b/apps/spotlight/src/layouts/Layout.astro
@@ -52,7 +52,7 @@ const context = getAppContext();
     <script src="../lib/initialize.ts"></script>
     <title>{title}</title>
   </head>
-  <body>
+  <body id="top">
     <div class="usa-app usa-app__theme-1">
       <UsaBanner />
       <Header />

diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
@@ -1,6 +1,10 @@
 @forward "uswds-theme";
 @forward "uswds";
 
+html {
+  scroll-behavior: smooth;
+}
+
 h1 {
   font-size: 2.5em;
 
@@ -94,6 +98,10 @@ main {
 .usa-button,
 .usa-menu-btn {
   background-color: #54278f;
+
+  &:hover {
+    background-color: #783cb9;
+  }
 }
 
 .usa-header,
@@ -145,12 +153,12 @@ nav {
     padding-top: 2.6rem;
   }
 }
-.previewForm { 
+.previewForm {
   padding-left: 1rem;
-  
+
   >fieldset {
     margin-bottom: 10em;
-    
+
     >legend {
       border-bottom: 1px #DCDEE0 solid;
       font-size: 2rem;
@@ -288,6 +296,12 @@ iframe:focus {
       cursor: pointer;
     }
 
+    .usa-button {
+      background: #e7e3fa;
+      margin: 0;
+      padding: 2px;
+    }
+
     .usa-icon {
       height: 1.75em;
       width: 1.75em;
@@ -339,9 +353,15 @@ iframe:focus {
 .settingsContainer {
   background: #e7e3fa;
   padding: 30px;
+  position: -webkit-sticky; /* Safari */
+  top: 10px;
 
   h2 {
     margin-top: 0;
+    font-size: 1.2em;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
   }
 
   .formRowEditFields {
@@ -350,8 +370,18 @@ iframe:focus {
     }
   }
 
-  .usa-buttom {
+  .usa-button {
+    width: 100%;
+    padding: 1rem 1.25rem;
     margin: 20px 0 0;
+
+    &.close-button {
+      background-color: #76766a;
+
+      &:hover {
+        background-color: #929285;
+      }
+    }
   }
 }
 
@@ -399,6 +429,34 @@ iframe:focus {
   }
 }
 
+@media screen and (max-width: 879px) {
+  .editFormContentWrapper {
+    .grid-col {
+      width: 100%;
+    }
+
+    .usa-button{
+      margin-left: 0;
+    }
+
+    .grid-col-4 {
+      position: static;
+    }
+
+    .settingsContainer {
+      position: fixed;
+      top: 15%;
+      left: 50%;
+      transform: translate(-50%, 0);
+      width: 90%;
+      margin: 0 auto;
+      height: auto;
+      box-shadow: 1px 4px 12px #76766a;
+    }
+  }
+}
+
+
 @media screen and (max-width: 480px) {
   .usa-legend,
   .usa-label {

diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
@@ -89,7 +89,6 @@ export default function Form({
     updatePrompt(allFormData);
   }, [allFormData]);
   */
-  console.log(JSON.stringify(prompt, null, 2));
   return (
     <FormProvider {...formMethods}>
       <div className="preview">

diff --git a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
@@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import {
-  getFormElementConfig,
   updateElement,
   type FormElementMap,
+  getFormElementConfig,
 } from '@atj/forms';
 import { FormEditUIContext } from '../../config';
 import { usePreviewContext } from './context';
@@ -32,7 +32,6 @@ export const FormElementEdit = ({
   return (
     <FormProvider {...methods}>
       <div className="settingsContainer">
-        <h2>Editing {selectedElement.id}...</h2>
         <form
           className="editForm"
           onSubmit={methods.handleSubmit(formData => {

diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -112,40 +112,30 @@ const createPatternPreviewComponent = (
       ? 'form-group-row field-selected'
       : 'form-group-row';
 
-    // console.log("Current Selected ID:", selectedId);
-    // console.log("Prompt ID:", prompt);
-
-    // console.log("setSelectedId : ", setSelectedId );
-    // console.log("Is Selected:", isSelected);
-    // console.log("Class Names:", divClassNames);
     return (
-      <div
-        onClick={handleEditClick}
-        className={divClassNames}
-        //onKeyDown={handleKeyDown}
-        role="button"
-        aria-pressed={isSelected}
-        aria-label="Select this pattern"
-        tabIndex={0}
-      >
+      <div className={divClassNames} data-id={pattern._elementId}>
         <Component pattern={pattern} />
         <span className="edit-button-icon">
-          <a
-            className="usa-link"
-            href="javascript:void(0);"
-            title="Click to edit"
+          <button
+            className="usa-button usa-button--secondary usa-button--unstyled"
+            onClick={handleEditClick}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                handleEditClick();
+              }
+            }}
+            tabIndex={0}
+            aria-label="Edit form group"
           >
             <svg
               className="usa-icon"
-              aria-label="Click here to edit form group"
+              aria-hidden="true"
               focusable="false"
               role="img"
             >
-              <title>Edit form group</title>
-              <desc>Click here to edit form group</desc>
               <use xlinkHref={`${uswdsRoot}img/sprite.svg#settings`}></use>
             </svg>
-          </a>
+          </button>
         </span>
       </div>
     );

diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 
+import { FormDefinition } from '@atj/forms';
 import { type FormService } from '@atj/form-service';
 
 import { type FormEditUIContext } from '../../config';
 import { PreviewContextProvider, usePreviewContext } from './context';
 import { FormElementEdit } from './FormElementEdit';
 import { PreviewForm } from './Preview';
-import { FormDefinition } from '@atj/forms';
 
 export default function FormEdit({
   context,
@@ -22,11 +22,16 @@ export default function FormEdit({
     return 'Form not found';
   }
   const form = result.data;
+
   return (
     <div className="editFormPage">
       <h1>Edit form</h1>
       <p className="usa-intro">Your form has been imported for web delivery.</p>
       <PreviewContextProvider config={context.config} initialForm={form}>
+        <EditForm
+          context={context}
+          saveForm={form => formService.saveForm(formId, form)}
+        />{' '}
         <EditForm
           context={context}
           saveForm={form => formService.saveForm(formId, form)}
@@ -48,7 +53,7 @@ const EditForm = ({
     saveForm(form);
   }, [form]);
   return (
-    <div className="editFormContentWrapper">
+    <div className="editFormContentWrapper position-relative">
       <div className="grid-row">
         <div className="grid-col-8">
           <PreviewForm uiContext={context} form={form} />

diff --git a/packages/design/src/config/edit/InputElementEdit.tsx b/packages/design/src/config/edit/InputElementEdit.tsx
@@ -13,7 +13,7 @@ const InputElementEdit: FormElementEditComponent<InputElement> = ({
     <div className="grid-row grid-gap formRowEditFields">
       <div className="grid-col grid-col-4">
         <label className="usa-label" htmlFor={`${element.id}.data.label`}>
-          Field label or instructions
+          Field label
         </label>
         <input
           className="usa-input"

diff --git a/packages/design/src/config/view/TextInput/index.tsx b/packages/design/src/config/view/TextInput/index.tsx
@@ -20,7 +20,8 @@ const TextInput: FormElementComponent<Pattern<TextInputPattern>> = ({
           className={classNames('usa-label', {
             'usa-label--error': pattern.error,
           })}
-          htmlFor="input-error"
+          htmlFor={`input-${pattern.inputId}`}
+          id={`input-message-${pattern.inputId}`}
         >
           {pattern.label}
         </label>