Fieldset legends

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

@@ -41,7 +41,7 @@ const createPreviewComponents = (
   const previewComponents: ComponentForPattern = {};
   // TODO: Create a configurable way to to define preview components.
   for (const [patternType, Component] of Object.entries(components)) {
-    if (patternType === 'sequence') {
+    if (patternType === 'sequence' || patternType === 'fieldset') {
       previewComponents[patternType] = Component;
       /*
       previewComponents[patternType] = createSequencePatternPreviewComponent(
@@ -50,10 +50,9 @@ const createPreviewComponents = (
       );
       */
     } else if (patternType === 'form-summary') {
-      console.log('skipping form-summary...');
       previewComponents[patternType] = Component;
     } else {
-      previewComponents[patternType] = Component;
+      //previewComponents[patternType] = Component;
       previewComponents[patternType] = createPatternPreviewComponent(
         Component,
         uswdsRoot

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

@@ -24,12 +24,8 @@ export default function FormEdit({
   const form = result.data;
   return (
     <div className="editFormPage">
-      <h1>Form Editor Portal</h1>
-      <p className="usa-intro">
-        Welcome to the Form Editor Portal, where you can effortlessly
-        personalize your form by modifying labels, attributes, and other
-        settings to better suit your needs.
-      </p>
+      <h1>Edit form</h1>
+      <p className="usa-intro">Your form has been imported for web delivery.</p>
       <PreviewContextProvider config={context.config} initialForm={form}>
         <EditForm
           context={context}

packages/design/src/config/view/Fieldset/index.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 
-import { type Pattern } from '@atj/forms';
-import { type ParagraphElement } from '@atj/forms/src/config/elements/paragraph';
+import { type FieldsetPattern, type Pattern } from '@atj/forms';
 
 import { type FormElementComponent } from '../../../Form';
 
-const FormSummary: FormElementComponent<Pattern<ParagraphElement>> = ({
+const FormSummary: FormElementComponent<Pattern<FieldsetPattern>> = ({
   pattern,
+  children,
 }) => {
   return (
-    <>
-      <p>{pattern.data.text}</p>
-    </>
+    <fieldset className="usa-fieldset">
+      <legend className="usa-legend">{pattern.legend}</legend>
+      {children}
+    </fieldset>
   );
 };
 export default FormSummary;

packages/design/src/config/view/index.tsx

@@ -1,12 +1,13 @@
+import Fieldset from './Fieldset';
 import FormSummary from './FormSummary';
 import Paragraph from './Paragraph';
 import Sequence from './Sequence';
 import SubmissionConfirmation from './SubmissionConfirmation';
 import TextInput from './TextInput';
-
 import { type ComponentForPattern } from '../../Form';
 
 export const defaultFormElementComponents: ComponentForPattern = {
+  fieldset: Fieldset,
   'form-summary': FormSummary,
   input: TextInput,
   paragraph: Paragraph,

packages/documents/src/pdf/mock-api.ts

@@ -9,6 +9,7 @@ import {
 import { type InputElement } from '@atj/forms/src/config/elements/input';
 
 import json from './al_name_change.json' assert { type: 'json' };
+import { FieldsetElement } from '@atj/forms/src/config/elements/fieldset';
 
 const TxInput = z.object({
   input_type: z.literal('Tx'),
@@ -103,11 +104,11 @@ export const parseAlabamaNameChangeForm = (): ParsedPdf => {
   };
   const rootSequence: FormElementId[] = [];
   for (const element of extracted.elements) {
-    const sequenceElements: FormElementId[] = [];
+    const fieldsetElements: FormElementId[] = [];
     for (const input of element.inputs) {
       if (input.input_type === 'Tx') {
         const id = input.input_params.output_id.toLowerCase();
-        sequenceElements.push(id);
+        fieldsetElements.push(id);
         parsedPdf.elements[id] = {
           type: 'input',
           id,
@@ -127,20 +128,21 @@ export const parseAlabamaNameChangeForm = (): ParsedPdf => {
         };
       }
     }
-    if (sequenceElements.length === 1) {
-      rootSequence.push(sequenceElements[0]);
-    } else if (sequenceElements.length > 1) {
+    if (fieldsetElements.length === 1) {
+      rootSequence.push(fieldsetElements[0]);
+    } else if (fieldsetElements.length > 1) {
       parsedPdf.elements[element.id] = {
         id: element.id,
-        type: 'sequence',
+        type: 'fieldset',
         data: {
-          elements: sequenceElements,
+          legend: element.element_params.text,
+          elements: fieldsetElements,
         },
         default: {
           elements: [],
         },
         required: true,
-      };
+      } as FieldsetElement;
       rootSequence.push(element.id);
     }
   }

packages/forms/src/config/config.ts

@@ -1,4 +1,5 @@
 import { type FormConfig } from '.';
+import { fieldsetConfig } from './elements/fieldset';
 import { inputConfig } from './elements/input';
 import { paragraphConfig } from './elements/paragraph';
 import { sequenceConfig } from './elements/sequence';
@@ -8,6 +9,7 @@ import { sequenceConfig } from './elements/sequence';
 // understand the usage scenarios better.
 export const defaultFormConfig: FormConfig = {
   elements: {
+    fieldset: fieldsetConfig,
     input: inputConfig,
     paragraph: paragraphConfig,
     sequence: sequenceConfig,

packages/forms/src/config/elements/fieldset.ts

@@ -2,16 +2,23 @@ import * as z from 'zod';
 
 import { type FormElementConfig } from '..';
 import { type FormElement, type FormElementId } from '../../element';
-import { type Pattern, createPromptForElement } from '../../pattern';
+import {
+  type FieldsetPattern,
+  type Pattern,
+  createPromptForElement,
+} from '../../pattern';
 import { safeZodParse } from '../../util/zod';
+import { getFormElement } from '../..';
 
 export type FieldsetElement = FormElement<{
-  legend: string;
-  elements: FormElementId;
+  legend?: string;
+  elements: FormElementId[];
 }>;
 
-const fieldsetSchema = z.object({
-  legend: z.string(),
+const FieldsetSchema = z.array(z.string());
+
+const configSchema = z.object({
+  legend: z.string().optional(),
   elements: z.array(z.string()),
 });
 
@@ -21,17 +28,27 @@ export const fieldsetConfig: FormElementConfig<FieldsetElement> = {
     elements: [],
   },
   parseData: (_, obj) => {
-    return safeZodParse(fieldsetSchema, obj);
+    return safeZodParse(FieldsetSchema, obj);
   },
+  parseConfigData: obj => safeZodParse(configSchema, obj),
   getChildren(element, elements) {
     return element.data.elements.map(
       (elementId: string) => elements[elementId]
     );
   },
-  createPrompt(config, session, element, options): Pattern[] {
-    return element.data.elements.map((elementId: string) => {
-      const element = session.form.elements[elementId];
+  createPrompt(config, session, element, options) {
+    const children = element.data.elements.map((elementId: string) => {
+      const element = getFormElement(session.form, elementId);
       return createPromptForElement(config, session, element, options);
     });
+    return {
+      pattern: {
+        _children: children,
+        _elementId: element.id,
+        type: 'fieldset',
+        legend: element.data.legend,
+      } satisfies Pattern<FieldsetPattern>,
+      children,
+    };
   },
 };

packages/forms/src/pattern.ts

@@ -39,6 +39,11 @@ export type ParagraphPattern = {
   text: string;
 };
 
+export type FieldsetPattern = {
+  type: 'fieldset';
+  legend: string;
+};
+
 export type Pattern<T = {}> = {
   _elementId: FormElementId;
   _children: PromptPart[];