Make "form summary" title required, and display error messages in its…

… edit UI. (#170)
GSA-TTS · Jun 6, 2024 · 6ff3544 · 6ff3544
1 parent c13d214
commit 6ff3544
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -8,6 +8,7 @@ import { PatternEditComponent } from '../types';
 
 import { PatternEditForm } from './common/PatternEditForm';
 import { usePatternEditFormContext } from './common/hooks';
+import classNames from 'classnames';
 
 const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = ({
   focus,
@@ -29,14 +30,28 @@ const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = ({
 
 const EditComponent = ({ pattern }: { pattern: Pattern }) => {
   const patternId = pattern.id;
-  const { register } = usePatternEditFormContext(patternId);
+  const { getFieldState, fieldId, register } =
+    usePatternEditFormContext(patternId);
+  const description = getFieldState('description');
+  const title = getFieldState('title');
 
   return (
     <div className="grid-row grid-gap-1">
       <div className="desktop:grid-col-6 mobile:grid-col-12">
-        <label className="usa-label">
+        <label
+          className={classNames('usa-label', {
+            'usa-label--error': title.error,
+          })}
+          htmlFor={fieldId('title')}
+        >
           Title
+          {title.error ? (
+            <span className="usa-error-message" role="alert">
+              {title.error.message}
+            </span>
+          ) : null}
           <input
+            id={fieldId('title')}
             className="usa-input bg-primary-lighter text-bold"
             {...register('title')}
             defaultValue={pattern.data.title}
@@ -45,9 +60,20 @@ const EditComponent = ({ pattern }: { pattern: Pattern }) => {
         </label>
       </div>
       <div className="desktop:grid-col-6 mobile:grid-col-12">
-        <label className="usa-label">
+        <label
+          className={classNames('usa-label', {
+            'usa-input--error': description.error,
+          })}
+          htmlFor={fieldId('description')}
+        >
           Description
+          {description.error ? (
+            <span className="usa-error-message" role="alert">
+              {description.error.message}
+            </span>
+          ) : null}
           <textarea
+            id={fieldId('description')}
             className="usa-textarea bg-primary-lighter text-bold"
             {...register('description')}
             defaultValue={pattern.data.description}

diff --git a/packages/forms/src/patterns/form-summary.ts b/packages/forms/src/patterns/form-summary.ts
@@ -5,7 +5,7 @@ import { type FormSummaryProps } from '../components';
 import { safeZodParseFormErrors } from '../util/zod';
 
 const configSchema = z.object({
-  title: z.string().max(128),
+  title: z.string().max(128).min(1, 'Title is required'),
   description: z.string().max(2024),
 });
 export type FormSummary = Pattern<z.infer<typeof configSchema>>;