Merge remote-tracking branch 'origin/main' into preview-edit-updates

Also, make USWDS paths configurable (should have been separate commit)

apps/spotlight/public/uswds

@@ -0,0 +1 @@
+../../../packages/design/static/uswds

apps/spotlight/src/components/AppFormManager.tsx

@@ -16,6 +16,7 @@ export default function () {
         config: ctx.formConfig,
         components: defaultFormElementComponents,
         editComponents: defaultFormElementEditComponents,
+        uswdsRoot: ctx.uswdsRoot,
       }}
       formService={ctx.formService}
       baseUrl={ctx.baseUrl}

apps/spotlight/src/components/AppFormRouter.tsx

@@ -10,6 +10,7 @@ export default function AppFormRouter() {
       context={{
         config: ctx.formConfig,
         components: defaultFormElementComponents,
+        uswdsRoot: ctx.uswdsRoot,
       }}
       formService={ctx.formService}
     />

apps/spotlight/src/context.ts

@@ -30,6 +30,7 @@ const createAppContext = (env: any) => {
     baseUrl: env.BASE_URL,
     formConfig: defaultFormConfig,
     formService: createAppFormService(),
+    uswdsRoot: `${env.BASE_URL}uswds/`,
   };
 };
 

apps/spotlight/src/pages/index.astro

@@ -5,7 +5,7 @@ import DebugTools from '../components/DebugTools';
 ---
 
 <ContentLayout title="10x Access to Justice Spotlight">
-  <h1>Create an interview from a PDF Form</h1>
+  <h1>Interview(s) from a PDF Form</h1>
   <AppAvailableFormList client:only />
   <DebugTools client:only />
 </ContentLayout>

packages/design/.storybook/main.ts

@@ -26,5 +26,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../static'],
 };
 export default config;

packages/design/sass/styles.scss

@@ -1,6 +1,35 @@
 @forward "uswds-theme";
 @forward "uswds";
 
+h1 {
+  font-size: 2.5em;
+
+  span {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 20px;
+  }
+}
+
+.usa-legend {
+  font-size: 1.7rem;
+  font-weight: 700;
+}
+
+a,
+.usa-link,
+.usa-button--unstyled {
+  color: #54278f;
+}
+
+.hide {
+  display: none;
+}
+
+.show  {
+  display: block;
+}
+
 .usa-app {
   display: flex;
   min-height: 100vh;
@@ -22,6 +51,16 @@ main {
   max-width: 75rem;
 }
 
+.usa-combo-box__input, 
+.usa-input, 
+.usa-input-group, 
+.usa-range, 
+.usa-select, 
+.usa-textarea {
+  max-width: 40rem;
+  height: 3rem;
+}
+
 .usa-header {
   background: #18161d;
 }
@@ -30,17 +69,18 @@ main {
   background: white;
 }
 
-a,
-.usa-link,
-.usa-button--unstyled {
-  color: #54278f;
+.usa-section {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
 }
 
-h1 {
-  span {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 20px;
+.usa-checkbox {
+  background: none;
+}
+
+.usa-button-wrapper {
+  .usa-button {
+    margin: 0;
   }
 }
 .usa-button,
@@ -89,7 +129,7 @@ h1 {
 
 .previewForm {
   .usa-button {
-    margin-top: 20px;
+    margin: 1rem 0 0 1rem;
   }
 }
 
@@ -155,16 +195,72 @@ iframe:focus {
 }
 
 .editFormPage {
+
+  .usa-intro {
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #bbb;
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 50px;
+  }
+
   fieldset {
     border: none;
     padding: 0;
   }
+
+  .form-group-row {
+    padding: 1rem;
+    cursor: pointer;
+    display: flex;
+
+    &:first-child {
+      .edit-button-icon {
+        padding: 0 10px;
+        flex: none;
+      }     
+    }
+
+    &.field-selected {
+      background: #e7e3fa;
+    }
+
+    .usa-form-group-wrapper {
+      flex: 12;
+    }
+
+    .edit-button-icon {
+      flex: 1;
+      text-align: center;
+      padding: 30px 0 0;
+    }
+
+    label {
+      cursor: pointer;
+    }
+
+    .usa-icon {
+      height: 2.5em;
+      width: 2.5em;
+      fill: #777;
+    }
+  }
+
+  .usa-form-group {
+    margin: 0 0 0.5rem;
+  }
+
+  legend {
+    margin-top: 0;
+  }
+
 }
 
 .editFormWrapper {
   list-style: none;
   padding: 0;
   border-top: 1px solid #c9c9c9;
+  display: none;
 
   li {
     padding: 15px 0 20px;
@@ -191,6 +287,25 @@ iframe:focus {
   }
 }
 
+.settingsContainer {
+  background: #e7e3fa;
+  padding: 30px;
+
+  h2 {
+    margin-top: 0;
+  }
+
+  .formRowEditFields {
+    .grid-col {
+      width: 100%;
+    }
+  }
+
+  .usa-buttom {
+    margin: 20px 0 0;
+  }
+}
+
 .usa-step-indicator__segment {
   max-width: 22rem;
 
@@ -207,6 +322,12 @@ iframe:focus {
 }
 
 @media (min-width: 64em) {
+  .usa-nav__primary {
+
+    &>.usa-nav__primary-item {
+      font-size: 1.3rem;
+    }
+  }
   .usa-header--extended {
     .usa-nav__primary-item {
 

packages/design/src/Form/ActionBar/index.tsx

@@ -4,7 +4,7 @@ import { PromptAction } from '@atj/forms';
 
 export default function ActionBar({ actions }: { actions: PromptAction[] }) {
   return (
-    <div className="usa-fieldset">
+    <p className="usa-button-wrapper">
       {actions.map((action, index) => {
         if (action.type === 'submit') {
           return (
@@ -14,6 +14,6 @@ export default function ActionBar({ actions }: { actions: PromptAction[] }) {
           );
         }
       })}
-    </div>
+    </p>
   );
 }

packages/design/src/Form/index.tsx

@@ -17,6 +17,7 @@ import ActionBar from './ActionBar';
 export type FormUIContext = {
   config: FormConfig;
   components: ComponentForPattern;
+  uswdsRoot: `${string}/`;
 };
 
 export type ComponentForPattern<T extends Pattern = Pattern<unknown>> = Record<
@@ -26,7 +27,7 @@ export type ComponentForPattern<T extends Pattern = Pattern<unknown>> = Record<
 
 export type FormElementComponent<T extends Pattern = Pattern<unknown>> =
   React.ComponentType<{
-    prompt: T;
+    pattern: T;
     children?: React.ReactNode;
   }>;
 
@@ -105,10 +106,6 @@ export default function Form({
         <fieldset className="usa-fieldset">
           {prompt.parts
             .map((part, index) => {
-              if (part.pattern.type === 'text') {
-                console.log('skipping', part.pattern.type);
-                return null;
-              }
               return (
                 <PromptComponent
                   key={index}
@@ -135,7 +132,7 @@ const PromptComponent = ({
 }) => {
   const Component = context.components[promptPart.pattern.type];
   return (
-    <Component prompt={promptPart.pattern}>
+    <Component pattern={promptPart.pattern}>
       {promptPart.children?.map((child, index) => (
         <PromptComponent key={index} context={context} promptPart={child} />
       ))}

packages/design/src/FormManager/FormEdit/FormElementEdit.tsx

@@ -48,12 +48,14 @@ export const FormElementEdit = ({
           onChange(updatedForm);
         })}
       >
-        <input className="usa-button" type="submit" value="Save" />
         <SelectedEditComponent
           context={context}
           form={initialForm}
           element={formElement}
         />
+        <p>
+          <input className="usa-button" type="submit" value="Save" />
+        </p>
       </form>
     </FormProvider>
   );