Initial updates to preview form styling.

GSA-TTS · Feb 28, 2024 · 188c8f4 · 188c8f4
1 parent b0a85af
commit 188c8f4
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 2 deletions.
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
@@ -39,6 +39,14 @@ a,
 main {
   flex: 1;
   width: 100%;
+/*
+  >section {
+    &.grid-container {
+      margin: 0;
+      padding: 0;
+    }
+  }
+*/
 }
 
 .usa-banner__inner,
@@ -125,9 +133,50 @@ main {
 
 .usa-legend {
   max-width: 100%;
+  font-weight: 600;
+  width: -webkit-fill-available;
+}
+
+nav {
+  background: #F7F9FD;
+  padding: 0 1.5rem;
+
+  >ul {
+    padding-top: 2.6rem;
+  }
 }
+.previewForm { 
+  padding-left: 1rem;
+
+  >fieldset {
+    margin-bottom: 10em;
+
+    >legend {
+      border-bottom: 1px #DCDEE0 solid;
+      font-size: 2rem;
+    }
+
+    >.usa-form-group {
+      margin-left: 3rem;
+    }
+
+    .usa-form-group {
+      >fieldset {
+        border-bottom: 1px #DCDEE0 solid;
+        padding-bottom: 2rem;
+
+        legend {
+          font-size: 1.5rem;
+          border-bottom: none;
+        }
+
+        p {
+          font-weight: bold;
+        }
+      }
+    }
+  }
 
-.previewForm {
   .usa-button {
     margin: 1rem 0 0 1rem;
   }

diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
@@ -86,10 +86,30 @@ export default function Form({
     updatePrompt(allFormData);
   }, [allFormData]);
   */
+ console.log(JSON.stringify(prompt));
   return (
     <FormProvider {...formMethods}>
+      <div className="preview">
+      <div className="grid-row">
+        <nav className="sideNav tablet:grid-col-3 margin-bottom-4 tablet:margin-bottom-0">
+        <ul className="usa-sidenav">
+            <li className="usa-sidenav__item"><a href="">County</a></li>
+            <li className="usa-sidenav__item"><a className="usa-current" href="">Current name</a></li>
+            <ul className="usa-sidenav__sublist">
+              <li className="usa-sidenav__item"><a className="usa-current" href="">First name</a></li>
+              <li className="usa-sidenav__item"><a href="">Middle name</a></li>
+              <li className="usa-sidenav__item"><a href="">Last name</a></li>
+            </ul>
+            <li className="usa-sidenav__item"><a href="">Declarations</a></li>
+            <li className="usa-sidenav__item"><a href="">Address</a></li>
+            <li className="usa-sidenav__item"><a href="">Telephone</a></li>
+            <li className="usa-sidenav__item"><a href="">Date of Birth</a></li>
+            <li className="usa-sidenav__item"><a href="">Name at Birth</a></li>
+          </ul>
+        </nav>
+      <div className="grid-col-9 usa-prose">
       <form
-        className="previewForm"
+        className="previewForm usa-form usa-form--large margin-bottom-3"
         onSubmit={formMethods.handleSubmit(async data => {
           updatePrompt(data);
           if (onSubmit) {
@@ -100,6 +120,68 @@ export default function Form({
           }
         })}
       >
+        <fieldset className="usa-fieldset">
+          <legend className="usa-legend usa-legend--large">Request to Change Name</legend>
+          <div className="usa-form-group">
+            <div className="usa-form-group">
+              <fieldset className="usa-fieldset">
+                <legend className="usa-legend usa-legend--large">County where you live</legend>
+                <label className="usa-label">Name of your county *</label>
+                <input 
+                className="usa-input"
+                id="input-users1_address_line_one"
+                name="users1_address_line_one"
+                type="text"
+                aria-describedby="input-message-users1_address_line_one"
+                value=""
+                />
+              </fieldset>
+            </div>
+          </div>
+
+          <div className="usa-form-group">
+            <div className="usa-form-group">
+              <fieldset className="usa-fieldset">
+                <legend className="usa-legend usa-legend--large">Your current name</legend>
+                <label className="usa-label">First name *</label>
+                <input 
+                className="usa-input"
+                id="input-users1_first_name"
+                name="users1_first_name"
+                type="text"
+                aria-describedby="input-message-users1_first_name"
+                value=""
+                />
+                <label className="usa-label">Middle name *</label>
+                <input 
+                className="usa-input"
+                id="input-users1_middle_name"
+                name="users1_middle_name"
+                type="text"
+                aria-describedby="input-message-users1_middle_name"
+                value=""
+                />
+                <label className="usa-label">Last name *</label>
+                <input 
+                className="usa-input"
+                id="input-users1_last_name"
+                name="users1_last_name"
+                type="text"
+                aria-describedby="input-message-users1_last_name"
+                value=""
+                />
+              </fieldset>
+              <fieldset className="usa-fieldset">
+                <p>To ask the court to change your name, you must fill out this form, and:</p>
+                <ul>
+                  <li>Attach a certified copy of your birth certificate and a copy of your photo ID, and</li>
+                  <li>File your form and attachements in the same county where you live.</li>
+                </ul>
+              </fieldset>
+            </div>
+          </div>
+        </fieldset>
+
         <fieldset className="usa-fieldset">
           {prompt.parts
             .map((pattern, index) => {
@@ -111,6 +193,9 @@ export default function Form({
         </fieldset>
         <ActionBar actions={prompt.actions} />
       </form>
+      </div>
+      </div>
+      </div>
     </FormProvider>
   );
 }