Style the submission confirmation pattern (#57)

GSA-TTS · Feb 29, 2024 · 3d033cc · 3d033cc
1 parent 19e19bd
commit 3d033cc
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 23 deletions.
diff --git a/packages/design/src/config/view/SubmissionConfirmation/index.tsx b/packages/design/src/config/view/SubmissionConfirmation/index.tsx
@@ -11,24 +11,59 @@ const SubmissionConfirmation: FormElementComponent<
       <legend className="usa-legend usa-legend--large">
         Submission confirmation
       </legend>
-      <table>
-        <thead>
-          <tr>
-            <th>Field</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          {pattern.table.map((row, index) => {
-            return (
-              <tr key={index}>
-                <td>{row.label}</td>
-                <td>{row.value}</td>
+      <div className="usa-alert usa-alert--success margin-bottom-2">
+        <div className="usa-alert__body">
+          <h4 className="usa-alert__heading">Submission complete</h4>
+          <p className="usa-alert__text">
+            Thank you for submitting your filing. Your document package has been
+            auto-downloaded.
+          </p>
+        </div>
+      </div>
+      <h2>Next steps:</h2>
+      <div className="margin-bottom-4">
+        <ul className="usa-list">
+          <li>Review your document package for accuracy</li>
+          <li>Print your document package </li>
+          <li>Follow the instructions on the first page of your package</li>
+        </ul>
+      </div>
+      <div className="usa-accordion">
+        <h4 className="usa-accordion__heading">
+          <button
+            type="button"
+            className="usa-accordion__button"
+            aria-expanded={false}
+            aria-controls="submission-confirmation-table"
+          >
+            Submission details
+          </button>
+        </h4>
+        <div
+          id="submission-confirmation-table"
+          className="usa-accordion__content usa-prose"
+          hidden={true}
+        >
+          <table className="usa-table usa-table--striped width-full">
+            <thead>
+              <tr>
+                <th scope="col">Form field</th>
+                <th scope="col">Provided value</th>
               </tr>
-            );
-          })}
-        </tbody>
-      </table>
+            </thead>
+            <tbody>
+              {pattern.table.map((row, index) => {
+                return (
+                  <tr key={index}>
+                    <th scope="row">{row.label}</th>
+                    <td>{row.value}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
     </>
   );
 };

diff --git a/packages/forms/src/config/elements/form-summary.ts b/packages/forms/src/config/elements/form-summary.ts
@@ -31,7 +31,7 @@ export const formSummaryConfig: FormElementConfig<FormSummary> = {
         type: 'form-summary',
         title: element.data.title,
         description: element.data.description,
-      } as FormSummaryPattern,
+      } as Pattern<FormSummaryPattern>,
       children: [],
     };
   },

diff --git a/packages/forms/src/pattern.ts b/packages/forms/src/pattern.ts
@@ -80,14 +80,20 @@ export const createPrompt = (
           pattern: {
             _elementId: 'submission-confirmation',
             type: 'submission-confirmation',
-            table: Object.entries(session.data.values).map(
-              ([elementId, value]) => {
+            table: Object.entries(session.data.values)
+              .filter(([elementId, value]) => {
+                const elemConfig = getFormElementConfig(
+                  config,
+                  session.form.elements[elementId].type
+                );
+                return elemConfig.acceptsInput;
+              })
+              .map(([elementId, value]) => {
                 return {
-                  label: session.form.elements[elementId].id,
+                  label: session.form.elements[elementId].data.label,
                   value: value,
                 };
-              }
-            ),
+              }),
           } as Pattern<SubmissionConfirmationPattern>,
           children: [],
         },