Form manager navigation (#111)

* FormManagerLayout created to hold navigation for form manager. * Reorg form manager edit components relative to where they are used * Cleanup sequence preview components. TODO: get rid of createPreviewComponents. * Add FormManagerLayout wiring, remove some global class extensions in favor of utilities.
GSA-TTS · Apr 22, 2024 · 04836cb · 04836cb
1 parent 61787e8
commit 04836cb
Show file tree

Hide file tree

Showing 27 changed files with 416 additions and 400 deletions.
diff --git a/apps/spotlight/src/components/Header.astro b/apps/spotlight/src/components/Header.astro
@@ -14,13 +14,13 @@ const getNavLinkClasses = (url: string) => {
 ---
 
 <div class="usa-overlay"></div>
-<header class="usa-header usa-header--extended">
+<header class="usa-header usa-header--extended bg-base-darkest">
   <div class="usa-navbar">
     <div class="usa-logo">
       <em class="usa-logo__text">
         <a href={routes.getHomeUrl()} title="10x Access to Justice">
           <img src={logoSvg.src} role="img" alt="10x Logo" />
-          <span>Access to Justice Form Builder</span>
+          <span class="text-white">A2J Forms</span>
         </a>
       </em>
     </div>

diff --git a/apps/spotlight/src/layouts/ContentLayout.astro b/apps/spotlight/src/layouts/ContentLayout.astro
@@ -8,15 +8,15 @@ const { title } = Astro.props;
 ---
 
 <Layout title={title}>
-  <main class="bg-base-lightest" id="main-content">
-    <section class="grid-container usa-section">
-      <div class="grid-row flex-justify-center">
-        <div class="grid-col-12 tablet:grid-col-12 desktop:grid-col-12">
-          <div class="bg-white padding-y-3 padding-x-3 border border-base-lighter">
-            <slot />
-          </div>
+  <section class="grid-container usa-section">
+    <div class="grid-row flex-justify-center">
+      <div class="grid-col-12 tablet:grid-col-12 desktop:grid-col-12">
+        <div
+          class="bg-white padding-y-3 padding-x-3 border border-base-lighter"
+        >
+          <slot />
         </div>
       </div>
-    </section>
-  </main>
+    </div>
+  </section>
 </Layout>
diff --git a/apps/spotlight/src/layouts/Layout.astro b/apps/spotlight/src/layouts/Layout.astro
@@ -56,7 +56,9 @@ const context = getAppContext();
     <div class="usa-app usa-app__theme-1">
       <UsaBanner />
       <Header />
-      <slot />
+      <main class="bg-base-lightest" id="main-content">
+        <slot />
+      </main>
       <Footer github={context.github} />
     </div>
   </body>

diff --git a/apps/spotlight/src/pages/manage/index.astro b/apps/spotlight/src/pages/manage/index.astro
@@ -1,8 +1,8 @@
 ---
 import AppFormManager from '../../components/AppFormManager';
-import ContentLayout from '../../layouts/ContentLayout.astro';
+import Layout from '../../layouts/Layout.astro';
 ---
 
-<ContentLayout title="10x Access to Justice Spotlight">
+<Layout title="10x Access to Justice Spotlight">
   <AppFormManager client:only />
-</ContentLayout>
+</Layout>
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
@@ -29,11 +29,6 @@ p {
   font-weight: 700;
 }
 
-a,
-.usa-link,
-.usa-button--unstyled {
-  color: color('violet-70v');
-}
 
 .hide {
   display: none;
@@ -62,16 +57,6 @@ main {
 */
 }
 
-.usa-banner__inner,
-.usa-header--extended .usa-navbar,
-.usa-header--extended .usa-nav__inner,
-.grid-container,
-.usa-footer>.grid-container,
-.usa-footer__primary-container,
-.usa-footer__primary-section>.grid-container {
-  max-width: 75rem;
-}
-
 .usa-combo-box__input,
 .usa-input,
 .usa-input-group,
@@ -82,20 +67,6 @@ main {
   height: 3rem;
 }
 
-.usa-header {
-  background: #18161d;
-}
-
-.usa-nav {
-  background: white;
-
-  .usa-sidenav__item {
-    .usa-current {
-      color: color('violet-70v');
-    }
-  }
-}
-
 .usa-sidenav{
 
   .usa-sidenav__item {
@@ -118,25 +89,6 @@ main {
   background: none;
 }
 
-.usa-button-wrapper {
-  .usa-button {
-    margin: 0;
-  }
-}
-.usa-button,
-.usa-menu-btn {
-  background-color: #54278f;
-
-  &:hover {
-    background-color: #783cb9;
-  }
-}
-
-.usa-header,
-.usa-header a {
-  color: white;
-}
-
 .usa-table {
   width: 100%;
 
@@ -214,36 +166,3 @@ iframe:focus {
   padding-bottom: 62.5%;
   height: 0;
 }
-
-.usa-footer__nav {
-  background: none;
-}
-
-@media (min-width: 64em) {
-  .usa-nav__primary {
-
-    &>.usa-nav__primary-item {
-      font-size: 1.3rem;
-    }
-  }
-  .usa-header--extended {
-    .usa-nav__primary-item {
-
-      &>.usa-current::after,
-      &>.usa-nav__link:hover::after {
-        background-color: #783cb9;
-      }
-    }
-
-    .usa-logo {
-      max-width: 100%;
-    }
-  }
-
-  .usa-link:active,
-  .usa-link:visited,
-  .usa-file-input__choose,
-  .usa-nav__primary>.usa-nav__primary-item>a:hover {
-    color: #39215e;
-  }
-}
diff --git a/...n/src/FormManager/FormEdit/AddPattern.tsx → ...rmManager/FormEdit/AddPatternDropdown.tsx b/...n/src/FormManager/FormEdit/AddPattern.tsx → ...rmManager/FormEdit/AddPatternDropdown.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useFormEditStore } from './store';
 
-export const AddPattern = () => {
+export const AddPatternDropdown = () => {
   const store = useFormEditStore(state => ({
     availablePatterns: state.availablePatterns,
     addPattern: state.addPattern,

diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -4,12 +4,12 @@ import { PatternId, type FieldsetProps } from '@atj/forms';
 import { FieldsetPattern } from '@atj/forms/src/patterns/fieldset';
 
 import Fieldset from '../../../Form/components/Fieldset';
-
-import { PatternEditActions } from '../PatternEditActions';
-import { PatternEditForm } from '../PatternEditForm';
 import { useIsPatternSelected, usePattern } from '../store';
 import { PatternEditComponent } from '../types';
 
+import { PatternEditActions } from './common/PatternEditActions';
+import { PatternEditForm } from './common/PatternEditForm';
+
 const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
   const isSelected = useIsPatternSelected(props.previewProps._patternId);
   return (

diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -3,10 +3,14 @@ import React from 'react';
 import { type FormSummaryProps, type PatternId } from '@atj/forms';
 
 import FormSummary from '../../../Form/components/FormSummary';
-import { PatternEditForm, usePatternEditFormContext } from '../PatternEditForm';
 import { useIsPatternSelected } from '../store';
 import { PatternEditComponent } from '../types';
 
+import {
+  PatternEditForm,
+  usePatternEditFormContext,
+} from './common/PatternEditForm';
+
 const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = props => {
   const isSelected = useIsPatternSelected(props.previewProps._patternId);
   return (

diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
@@ -3,11 +3,15 @@ import React from 'react';
 import { PatternId, TextInputProps } from '@atj/forms';
 
 import TextInput from '../../../Form/components/TextInput';
-import { PatternEditActions } from '../PatternEditActions';
-import { PatternEditForm, usePatternEditFormContext } from '../PatternEditForm';
 import { useIsPatternSelected, usePattern } from '../store';
 import { PatternEditComponent } from '../types';
 
+import { PatternEditActions } from './common/PatternEditActions';
+import {
+  PatternEditForm,
+  usePatternEditFormContext,
+} from './common/PatternEditForm';
+
 const InputPatternEdit: PatternEditComponent<TextInputProps> = props => {
   const isSelected = useIsPatternSelected(props.previewProps._patternId);
   return (

diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
@@ -3,11 +3,15 @@ import React from 'react';
 import { PatternId, type ParagraphProps } from '@atj/forms';
 
 import Paragraph from '../../../Form/components/Paragraph';
-import { PatternEditActions } from '../PatternEditActions';
-import { PatternEditForm, usePatternEditFormContext } from '../PatternEditForm';
 import { useIsPatternSelected } from '../store';
 import { PatternEditComponent } from '../types';
 
+import { PatternEditActions } from './common/PatternEditActions';
+import {
+  PatternEditForm,
+  usePatternEditFormContext,
+} from './common/PatternEditForm';
+
 const ParagraphPatternEdit: PatternEditComponent<ParagraphProps> = props => {
   const isSelected = useIsPatternSelected(props.previewProps._patternId);
   return (