Made requested updates per pre-demo (#164)

GSA-TTS · Jun 6, 2024 · 0af3cf5 · 0af3cf5
1 parent d53784d
commit 0af3cf5
Show file tree

Hide file tree

Showing 17 changed files with 48 additions and 42 deletions.
diff --git a/apps/spotlight/src/components/Header.astro b/apps/spotlight/src/components/Header.astro
@@ -15,6 +15,9 @@ const getNavLinkClasses = (url: string) => {
 
 <div class="usa-overlay"></div>
 <header class="usa-header usa-header--extended">
+  <div class="topHeaderBanner bg-yellow">
+    <span class="usa-navbar height-auto display-block padding-2"><strong>STAGING SERVER</strong> - No changes you make here will be visible to the public.</span>
+  </div>
   <div class="bg-base-darkest">
     <div class="usa-navbar">
       <div class="usa-logo">

diff --git a/apps/spotlight/src/components/UsaBanner.astro b/apps/spotlight/src/components/UsaBanner.astro
@@ -17,7 +17,7 @@ import usFlagSmall from '@atj/design/static/uswds/img/us_flag_small.png';
         </div>
         <div class="grid-col-fill tablet:grid-col-auto">
           <p class="usa-banner__header-text">
-            An official website of the United States government
+            A demo website of the United States government
           </p>
           <p class="usa-banner__header-action" aria-hidden="true">
             Here’s how you know

diff --git a/packages/common/src/locales/en/app.ts b/packages/common/src/locales/en/app.ts
@@ -27,7 +27,7 @@ export const en = {
     },
     paragraph: {
       fieldLabel: 'Paragraph Text',
-      displayName: 'Long answer',
+      displayName: 'Paragraph',
       errorTextMustContainChar: 'String must contain at least 1 character(s)',
     },
     radioGroup: {

diff --git a/packages/design/sass/_uswds-custom-styles.scss b/packages/design/sass/_uswds-custom-styles.scss
@@ -133,13 +133,6 @@ iframe:focus {
   }
 }
 
-/* A quick way to hide the submit button when form is in edit mode. Can be replaced with a programmatic solution in the future */
-.editPage {
-  .preview-form-button-wrapper {
-    display: none;
-  }
-}
-
 @include at-media("mobile-lg") {
   .usa-table th[scope="row"],
   .usa-table th[scope="row"]:nth-child(odd) {

diff --git a/packages/design/src/Form/ActionBar/index.tsx b/packages/design/src/Form/ActionBar/index.tsx
@@ -4,7 +4,7 @@ import { PromptAction } from '@atj/forms';
 
 export default function ActionBar({ actions }: { actions: PromptAction[] }) {
   return (
-    <p className="preview-form-button-wrapper">
+    <p className="preview-form-button-wrapper text-right">
       {actions.map((action, index) => {
         if (action.type === 'submit') {
           return (

diff --git a/packages/design/src/Form/components/PageSet/PageMenu/PageMenu.tsx b/packages/design/src/Form/components/PageSet/PageMenu/PageMenu.tsx
@@ -12,7 +12,7 @@ export type PageMenuProps = {
 
 export const PageMenu = ({ pages }: PageMenuProps) => {
   return (
-    <div>
+    <div className={`${styles.sideNavWrapper} position-sticky`}>
       <ul className={`${styles.sideNav} usa-sidenav`}>
         {pages.map((page, index) => (
           <li

diff --git a/packages/design/src/Form/components/PageSet/PageMenu/pageMenuStyles.module.css b/packages/design/src/Form/components/PageSet/PageMenu/pageMenuStyles.module.css
@@ -1,3 +1,7 @@
+.sideNavWrapper {
+    top: 6rem;
+}
+
 .sideNav a:not(.usa-button):not(.usa-current) {
     color: #005ea2;
 }

diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
@@ -101,7 +101,7 @@ export default function Form({
           <div className="grid-col-12 usa-prose">
             {!isPreview ? (
               <form
-                className="usa-form usa-form--large margin-bottom-3"
+                className="usa-form margin-bottom-3 maxw-full"
                 onSubmit={formMethods.handleSubmit(async data => {
                   updatePrompt(data);
                   if (onSubmit) {
@@ -224,8 +224,8 @@ const FormContents = ({
             />
           );
         })}
+        <ActionBar actions={prompt.actions} />
       </fieldset>
-      <ActionBar actions={prompt.actions} />
     </>
   );
 };

diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -73,7 +73,7 @@ export const AddPatternDropdown = ({ uswdsRoot }: { uswdsRoot: string }) => {
   };
 
   return (
-    <fieldset className="usa-fieldset">
+    <fieldset className={`${styles.usaFieldset} usa-fieldset position-sticky`}>
       <p className="tablet:display-block display-none usa-label margin-top-0 font-ui-3xs text-uppercase margin-bottom-3">
         Add Element
       </p>

diff --git a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
@@ -26,13 +26,13 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
           className={`${styles.titleArea} display-flex flex-justify flex-align-center position-relative margin-bottom-205`}
         >
           <span
-            className={`${styles.titleText} padding-right-1 text-uppercase text-ls-1 text-base bg-primary-lighter`}
+            className={`${styles.titleText} padding-right-1 text-uppercase text-ls-1 text-base-darkest bg-primary-lighter`}
           >
             {props.previewProps.title || 'untitled page'}{' '}
-            <span className="text-red">*</span>
+            <span className="text-secondary-darker">*</span>
           </span>
           <span
-            className={`${styles.pageNumber} padding-left-1 text-base bg-primary-lighter`}
+            className={`${styles.pageNumber} padding-left-1 text-base-darkest bg-primary-lighter`}
           >
             Page X
           </span>

diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.stories.tsx
@@ -12,7 +12,7 @@ const pattern: ParagraphPattern = {
   id: '1',
   type: 'paragraph',
   data: {
-    text: 'Long answer',
+    text: 'Paragraph',
   },
 };
 

diff --git a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css
@@ -22,6 +22,10 @@
     background: #d9e8f6;
 }
 
+.usaFieldset {
+    top: 96px;
+}
+
 /* Page Title Area */
 
 .titleArea::before {

diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -22,27 +22,29 @@ const EditForm = () => {
   }, [location]);
 
   return (
-    <div className="grid-row position-relative">
-      <div className="desktop:grid-col-2  tablet:grid-col-3 tablet:display-block grid-col-12 display-none padding-y-3 padding-right-3">
-        <AddPatternDropdown uswdsRoot={context.uswdsRoot} />
-      </div>
-      <div className="desktop:grid-col-10 tablet:grid-col-9 grid-col-12 tablet:border-left tablet:border-bottom tablet:border-right tablet:border-left-2px tablet:border-base-lighter bg-primary-lighter contentWrapper">
-        <div className="grid-col-12">
-          <Form
-            isPreview={true}
-            context={{
-              config: context.config,
-              // TODO: We might want to hoist this definition up to a higher level,
-              // so we don't have to regenerate it every time we render the form.
-              components: createPreviewComponents(context.components),
-              uswdsRoot: context.uswdsRoot,
-            }}
-            session={session}
-          ></Form>
+    <div className="grid-container">
+      <div className="grid-row position-relative">
+        <div className="desktop:grid-col-2 tablet:grid-col-3 tablet:display-block grid-col-12 display-none padding-y-3 padding-right-3">
+          <AddPatternDropdown uswdsRoot={context.uswdsRoot} />
+        </div>
+        <div className="desktop:grid-col-10 tablet:grid-col-9 grid-col-12 tablet:border-left tablet:border-bottom tablet:border-right tablet:border-left-2px tablet:border-base-lighter bg-primary-lighter contentWrapper">
+          <div className="grid-col-12">
+            <Form
+              isPreview={true}
+              context={{
+                config: context.config,
+                // TODO: We might want to hoist this definition up to a higher level,
+                // so we don't have to regenerate it every time we render the form.
+                components: createPreviewComponents(context.components),
+                uswdsRoot: context.uswdsRoot,
+              }}
+              session={session}
+            ></Form>
+          </div>
+        </div>
+        <div className="tablet:display-none grid-col-12 padding-y-3">
+          <AddPatternDropdown uswdsRoot={context.uswdsRoot} />
         </div>
-      </div>
-      <div className="tablet:display-none grid-col-12 padding-y-3">
-        <AddPatternDropdown uswdsRoot={context.uswdsRoot} />
       </div>
     </div>
   );

diff --git a/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx b/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx
@@ -139,7 +139,7 @@ export const TopNavigation = ({
 };
 
 const MyFormsLink = ({ uswdsRoot }: { uswdsRoot: `${string}/` }) => (
-  <a href={MyForms.getUrl()} className="usa-link margin-top-3 margin-right-1">
+  <a href={MyForms.getUrl()} className="usa-link margin-right-1 display-block">
     <svg
       className="usa-icon usa-icon--size-3 text-middle margin-right-1"
       aria-hidden="true"

diff --git a/packages/design/src/FormManager/FormManagerLayout/index.tsx b/packages/design/src/FormManager/FormManagerLayout/index.tsx
@@ -38,7 +38,7 @@ export const FormManagerLayout = ({
     <>
       <Notifications />
       {step && <TopNavigation curPage={step} preview={preview} />}
-      <section className={`${styles.editPage} grid-container editPage`}>
+      <section className={`${styles.editPage} position-relative`}>
         <div className="grid-row flex-justify-center">
           <div className="grid-col-12">
             <div className="bg-white">{children}</div>

diff --git a/packages/forms/src/patterns/paragraph.ts b/packages/forms/src/patterns/paragraph.ts
@@ -10,7 +10,7 @@ const configSchema = z.object({
 export type ParagraphPattern = Pattern<z.infer<typeof configSchema>>;
 
 export const paragraphConfig: PatternConfig<ParagraphPattern> = {
-  displayName: 'Long answer',
+  displayName: 'Paragraph',
   iconPath: 'longanswer-icon.svg',
   initial: {
     text: 'Paragraph text...',

diff --git a/packages/forms/src/patterns/radio-group.ts b/packages/forms/src/patterns/radio-group.ts
@@ -24,7 +24,7 @@ type PatternOutput = z.infer<typeof PatternOutput>;
 
 export const radioGroupConfig: PatternConfig<RadioGroupPattern, PatternOutput> =
   {
-    displayName: 'Single select',
+    displayName: 'Radio Buttons',
     iconPath: 'singleselect-icon.svg',
     initial: {
       label: 'Radio group label',