diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx index 3c609a21..e0b597a0 100644 --- a/packages/design/src/FormManager/FormEdit/Preview.tsx +++ b/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 diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx index c3894ace..eaa9973e 100644 --- a/packages/design/src/FormManager/FormEdit/index.tsx +++ b/packages/design/src/FormManager/FormEdit/index.tsx @@ -24,12 +24,8 @@ export default function FormEdit({ const form = result.data; return (
- 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. -
+Your form has been imported for web delivery.
{pattern.data.text}
- > + ); }; export default FormSummary; diff --git a/packages/design/src/config/view/index.tsx b/packages/design/src/config/view/index.tsx index 5b7593b3..1e704d5e 100644 --- a/packages/design/src/config/view/index.tsx +++ b/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, diff --git a/packages/documents/src/pdf/mock-api.ts b/packages/documents/src/pdf/mock-api.ts index a947431d..c4c64459 100644 --- a/packages/documents/src/pdf/mock-api.ts +++ b/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); } } diff --git a/packages/forms/src/config/config.ts b/packages/forms/src/config/config.ts index 04b0a491..f3d19ed8 100644 --- a/packages/forms/src/config/config.ts +++ b/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, diff --git a/packages/forms/src/config/elements/fieldset.ts b/packages/forms/src/config/elements/fieldset.ts index e95139b4..6fa993ab 100644 --- a/packages/forms/src/config/elements/fieldset.ts +++ b/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