Last-minute demo tweaks (#58)

* Tweaks for demo * For demo, don't show the navigation in preview mode. This should be handled in the preview component, when we have time. * Demo: tweak margin * Remove background color on gear icon
GSA-TTS · Feb 29, 2024 · cd9f5e8 · cd9f5e8
1 parent 3d033cc
commit cd9f5e8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 36 deletions.
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
@@ -297,7 +297,7 @@ iframe:focus {
     }
 
     .usa-button {
-      background: #e7e3fa;
+      background: none;
       margin: 0;
       padding: 2px;
     }

diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
@@ -66,10 +66,12 @@ export default function Form({
   context,
   session,
   onSubmit,
+  isPreview, // ideally this should be removed. just here now for the FFP demo
 }: {
   context: FormUIContext;
   session: FormSession;
   onSubmit?: (data: Record<string, string>) => void;
+  isPreview?: boolean;
 }) {
   const initialPrompt = createPrompt(context.config, session, {
     validate: false,
@@ -93,46 +95,46 @@ export default function Form({
     <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">
+          {!isPreview && (
+            <nav className="sideNav tablet:grid-col-3 margin-bottom-4 tablet:margin-bottom-0">
+              <ul className="usa-sidenav">
                 <li className="usa-sidenav__item">
                   <a className="usa-current" href="">
-                    First name
+                    County
                   </a>
                 </li>
                 <li className="usa-sidenav__item">
-                  <a href="">Middle name</a>
+                  <a href="">Current name</a>
                 </li>
+                <ul className="usa-sidenav__sublist">
+                  <li className="usa-sidenav__item">
+                    <a 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="">Last name</a>
+                  <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>
-              <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>
+            </nav>
+          )}
           <div className="grid-col-9 usa-prose">
             <form
               className="previewForm usa-form usa-form--large margin-bottom-3"

diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -31,7 +31,13 @@ export const PreviewForm = ({ uiContext, form }: PreviewFormProps) => {
     uswdsRoot: uiContext.uswdsRoot,
   };
   const disposable = createFormSession(form); // nullSession instead?
-  return <Form context={previewUiContext} session={disposable}></Form>;
+  return (
+    <Form
+      isPreview={true}
+      context={previewUiContext}
+      session={disposable}
+    ></Form>
+  );
 };
 
 const createPreviewComponents = (

diff --git a/packages/design/src/config/view/Fieldset/index.tsx b/packages/design/src/config/view/Fieldset/index.tsx
@@ -9,7 +9,7 @@ const FormSummary: FormElementComponent<Pattern<FieldsetPattern>> = ({
   children,
 }) => {
   return (
-    <fieldset className="usa-fieldset">
+    <fieldset className="usa-fieldset margin-top-4">
       <legend className="usa-legend">{pattern.legend}</legend>
       {children}
     </fieldset>

diff --git a/packages/design/src/config/view/SubmissionConfirmation/index.tsx b/packages/design/src/config/view/SubmissionConfirmation/index.tsx
@@ -23,8 +23,8 @@ const SubmissionConfirmation: FormElementComponent<
       <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>Print your document package</li>
+          <li>Review your documents for accuracy</li>
           <li>Follow the instructions on the first page of your package</li>
         </ul>
       </div>