From a399350f3b05be6b36b8a7bd1c1f34cbaaae5ad3 Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Wed, 24 Apr 2024 22:48:37 -0600
Subject: [PATCH 1/5] Styled and updated the sections components

---
 packages/design/sass/styles.scss              | 53 ++++++++++++++++++
 .../components/Fieldset/Fieldset.stories.tsx  |  9 +--
 .../src/Form/components/Fieldset/index.tsx    | 13 ++++-
 packages/design/src/Form/index.tsx            |  2 +-
 .../FormEdit/AddPatternDropdown.tsx           |  6 +-
 .../FormEdit/components/FieldsetEdit.tsx      | 56 ++++++++++++++++---
 .../FormEdit/components/FormSummaryEdit.tsx   |  6 +-
 .../FormEdit/components/InputPatternEdit.tsx  |  2 +-
 .../components/ParagraphPatternEdit.tsx       |  8 +--
 .../PreviewSequencePattern/DraggableList.tsx  |  6 +-
 .../components/SubmissionConfirmationEdit.tsx | 12 ++--
 .../components/common/PatternEditActions.tsx  | 22 ++++----
 .../design/src/FormManager/FormEdit/index.tsx | 14 +++--
 .../FormManagerLayout/TopNavigation.tsx       |  2 +-
 packages/forms/src/components.ts              |  1 +
 packages/forms/src/patterns/fieldset.ts       |  5 ++
 16 files changed, 164 insertions(+), 53 deletions(-)

diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
index 9359d3b7..8c1b937f 100644
--- a/packages/design/sass/styles.scss
+++ b/packages/design/sass/styles.scss
@@ -166,3 +166,56 @@ iframe:focus {
   padding-bottom: 62.5%;
   height: 0;
 }
+
+.usa-fieldset {
+  width: 100%;
+
+  .usa-legend,
+  .usa-alert__text {
+    font-size: 1rem;
+  }
+
+  .usa-legend {    
+    font-weight: normal;
+    line-height: 1.5rem;
+    text-transform: uppercase;
+  }
+
+  h3.section-heading-h3 {
+    font-size: 1.375rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .usa-alert__text {
+    span {
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 1rem;
+    }
+  }
+}
+
+.edit-component-panel {
+  input,
+  select {
+    background: #f4f1f9;
+    font-weight: 700;
+  }
+}
+
+.draggable-list-item-wrapper {
+  .draggable-list-item {
+    cursor: pointer;
+  }
+  .draggable-list-button {
+    cursor: 'grab';
+  }
+}
+
+.pattern-edit-panel {
+  .usa-button--unstyled {
+    color: #565C65;
+
+  }
+}
diff --git a/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx b/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
index 9e435e3f..2e6bc14e 100644
--- a/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
+++ b/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
@@ -8,17 +8,18 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof Fieldset>;
 
-export const FieldsetSection1 = {
+export const FieldsetSectionWithSubheader = {
   args: {
-    legend: 'Section 1',
+    legend: 'Default Heading',
+    subheader: 'Default Subhead',
     type: 'fieldset',
     _patternId: 'test-id',
   },
 } satisfies StoryObj<typeof Fieldset>;
 
-export const FieldsetSection2 = {
+export const FieldsetSectionWithoutSubheader = {
   args: {
-    legend: 'Section 2',
+    legend: 'Default Heading',
     type: 'fieldset',
     _patternId: 'test-id',
   },
diff --git a/packages/design/src/Form/components/Fieldset/index.tsx b/packages/design/src/Form/components/Fieldset/index.tsx
index 5a622daa..4b5541c1 100644
--- a/packages/design/src/Form/components/Fieldset/index.tsx
+++ b/packages/design/src/Form/components/Fieldset/index.tsx
@@ -6,9 +6,16 @@ import { type PatternComponent } from '../../../Form';
 
 const Fieldset: PatternComponent<FieldsetProps> = props => {
   return (
-    <fieldset className="usa-fieldset margin-top-4">
-      <legend className="usa-legend">{props.legend}</legend>
-      {props.children}
+    <fieldset className="usa-fieldset test margin-top-4">
+      {props.legend !== '' && props.legend !== undefined && (
+        <legend className="usa-legend margin-top-2 margin-bottom-1">{props.legend}</legend>
+      )}
+
+      {props.subheader !== '' && props.subheader !== undefined && (
+        <h3 className="section-heading-h3 margin-top-2 margin-bottom-1">{props.subheader}</h3>
+      )}
+
+      {props.children}     
     </fieldset>
   );
 };
diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
index a821467f..a24caea7 100644
--- a/packages/design/src/Form/index.tsx
+++ b/packages/design/src/Form/index.tsx
@@ -137,7 +137,7 @@ export default function Form({
               </ul>
             </nav>
           )}
-          <div className="grid-col-9 usa-prose">
+          <div className="desktop:grid-col-9 mobile:grid-col-12 usa-prose">
             {!isPreview ? (
               <form
                 className="usa-form usa-form--large margin-bottom-3"
diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
index fe40ebc0..4c687ed0 100644
--- a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
+++ b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -8,8 +8,8 @@ export const AddPatternDropdown = () => {
   }));
 
   return (
-    <fieldset>
-      <label className="usa-label">
+    <fieldset className="padding-205 desktop:grid-col-9 mobile:grid-col-12">
+      <label className="usa-label margin-top-0">
         Add a pattern
         <select
           className="usa-select"
@@ -18,7 +18,7 @@ export const AddPatternDropdown = () => {
             event.target.selectedIndex = 0;
           }}
         >
-          <option></option>
+          <option>-- Select a pattern --</option>
           {store.availablePatterns.map((pattern, index) => (
             <option key={index} value={pattern.patternType}>
               {pattern.displayName}
diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
index a17134ca..3c2cf7d4 100644
--- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -8,7 +8,10 @@ import { useIsPatternSelected, usePattern } from '../store';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
-import { PatternEditForm } from './common/PatternEditForm';
+import {
+  PatternEditForm,
+  usePatternEditFormContext,
+} from './common/PatternEditForm';
 
 const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
   const isSelected = useIsPatternSelected(props.previewProps._patternId);
@@ -30,24 +33,61 @@ const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
 
 const FieldsetPreview = (props: FieldsetProps) => {
   const pattern = usePattern<FieldsetPattern>(props._patternId);
+
   return (
     <>
-      {pattern.data.patterns.length === 0 && <em>[Empty fieldset]</em>}
-      <Fieldset {...(props as FieldsetProps)} />
+      <Fieldset {...(props as FieldsetProps)}>
+        {pattern && pattern.data.patterns.length === 0 &&
+          <div className="usa-alert usa-alert--warning usa-alert--no-icon margin-bottom-3">
+            <div className="usa-alert__body">
+              <p className="usa-alert__text">
+                <span className="alert-text">Empty sections will not display.</span>
+                <span className="action-text add-question">
+                  <a className="usa-link" href="#">Add question</a>
+                </span>
+                <span className="action-text remove-section">
+                  <a className="usa-link" href="#">Remove section</a>
+                </span>
+              </p>
+            </div>
+          </div>
+        }
+      </Fieldset>
+
     </>
   );
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const pattern = usePattern(patternId);
-  //const { register } = usePatternEditFormContext();
+  const { register } = usePatternEditFormContext();
   return (
-    <div>
-      Fieldset settings go here. {JSON.stringify(pattern)}
-      <Fieldset type="fieldset" _patternId={patternId} />
+
+    <div className="grid-row edit-component-panel">
+      <div className="grid-col-12 margin-bottom-3 flex-align-self-end">
+        <label className="usa-label width-full maxw-full">
+          Legend Text Element
+          <input
+            className="usa-input"
+            {...register(`${patternId}.data.legend`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col-12 margin-bottom-3 flex-align-self-end">
+        <label className="usa-label width-full maxw-full">
+          Subheader Text Element
+          <input
+            className="usa-input"
+            {...register(`${patternId}.data.subheader`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      {/* <Fieldset type="fieldset" _patternId={patternId} /> */}
       <PatternEditActions />
     </div>
   );
 };
 
-export default FieldsetEdit;
+export default FieldsetEdit;
\ No newline at end of file
diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
index ebe3dfe4..087362ca 100644
--- a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -32,8 +32,8 @@ const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = props => {
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const { register } = usePatternEditFormContext();
   return (
-    <div className="grid-row grid-gap">
-      <div className="grid-col grid-col-4">
+    <div className="grid-row grid-gap-1 edit-component-panel">
+      <div className="desktop:grid-col-4 mobile:grid-col-12">
         <label className="usa-label">
           Title
           <input
@@ -43,7 +43,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Description
           <textarea
diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
index 617cdc72..1d8a301a 100644
--- a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
@@ -35,7 +35,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
 
   const methods = usePatternEditFormContext();
   return (
-    <div className="grid-row grid-gap">
+    <div className="grid-row grid-gap-1 edit-component-panel">
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
         <label className="usa-label" htmlFor={`${pattern.id}.data.label`}>
           Field label
diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
index f2133a5b..c7d6a02c 100644
--- a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
@@ -33,8 +33,8 @@ const ParagraphPatternEdit: PatternEditComponent<ParagraphProps> = props => {
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const { register } = usePatternEditFormContext();
   return (
-    <div className="grid-row grid-gap">
-      <div className="grid-col grid-col-10 flex-align-self-end">
+    <div className="grid-row grid-gap-1 edit-component-panel">
+      <div className="desktop:grid-col-9 mobile:grid-col-12 flex-align-self-end">
         <label className="usa-label">
           Text Element
           <input
@@ -44,9 +44,9 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2 flex-align-self-end">
+      <div className="desktop:grid-col-3 mobile:grid-col-12 flex-align-self-end">
         <label className="usa-label">
-          <p className="usa-hint font-ui-3xs">Style</p>
+          <p className="usa-hint">Style</p>
           <select className="usa-select" {...register(`${patternId}.type`)}>
             <option value={'paragraph'}>Question</option> {/* this is a stub */}
             <option value={'paragraph'}>Title</option> {/* this is a stub */}
diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
index 215b6d16..04f0ef2a 100644
--- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -78,18 +78,18 @@ const SortableItem = ({
 
   return (
     <div
+      className="draggable-list-item-wrapper"
       ref={setNodeRef}
       style={{
         transform: CSS.Transform.toString(transform),
         transition,
       }}
     >
-      <div className="grid-row grid-gap">
+      <div className="grid-row grid-gap draggable-list-item">
         <div
-          className="grid-col-12 grid-col width-full"
+          className="grid-col-12 width-full draggable-list-button margin-top-2 margin-bottom-2"
           {...listeners}
           {...attributes}
-          style={{ cursor: 'grab' }}
         >
           <svg
             className="usa-icon margin-x-auto display-block"
diff --git a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
index 7353932a..c801674a 100644
--- a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
@@ -34,8 +34,8 @@ const SubmissionConfirmationEdit: PatternEditComponent<
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const { register } = usePatternEditFormContext();
   return (
-    <div className="grid-row grid-gap">
-      <div className="grid-col grid-col-4">
+    <div className="grid-row grid-gap-1 edit-component-panel">
+      <div className="desktop:grid-col-4 mobile:grid-col-12">
         <label className="usa-label">
           Field label
           <input
@@ -45,7 +45,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Default field value
           <input
@@ -55,7 +55,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Maximum length
           <input
@@ -65,7 +65,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Field type
           <select className="usa-select" {...register(`${patternId}.type`)}>
@@ -73,7 +73,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           </select>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <div className="usa-checkbox">
           <input
             className="usa-checkbox__input"
diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx
index aa6d1be0..98a75393 100644
--- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx
@@ -16,9 +16,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
 
   return (
     <>
-      <div className="border-top-1px border-base-lighter padding-top-1 margin-top-1">
+      <div className="border-top-1px border-base-lighter margin-top-2 margin-bottom-2 padding-top-1 width-full text-right pattern-edit-panel">
         <span
-          className={classNames('display-inline', {
+          className={classNames('display-inline-block', {
             'border-base-lighter': children,
             'padding-right-1': children,
             'margin-right-1': children,
@@ -26,12 +26,12 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
         >
           <button
             type="button"
-            aria-label="Delete this pattern"
-            title="Delete this pattern"
+            aria-label="Create a copy of this pattern"
+            title="Create a copy of this pattern"
             className="usa-button--outline usa-button--unstyled"
             onClick={event => {
               event.preventDefault();
-              deleteSelectedPattern();
+              alert('Unimplemented');
             }}
           >
             <svg
@@ -41,18 +41,19 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
               role="img"
             >
               <use
-                xlinkHref={`${context.uswdsRoot}img/sprite.svg#delete`}
+                xlinkHref={`${context.uswdsRoot}img/sprite.svg#content_copy`}
               ></use>
             </svg>
           </button>
+
           <button
             type="button"
-            aria-label="Create a copy of this pattern"
-            title="Create a copy of this pattern"
+            aria-label="Delete this pattern"
+            title="Delete this pattern"
             className="usa-button--outline usa-button--unstyled"
             onClick={event => {
               event.preventDefault();
-              alert('Unimplemented');
+              deleteSelectedPattern();
             }}
           >
             <svg
@@ -62,10 +63,11 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
               role="img"
             >
               <use
-                xlinkHref={`${context.uswdsRoot}img/sprite.svg#content_copy`}
+                xlinkHref={`${context.uswdsRoot}img/sprite.svg#delete`}
               ></use>
             </svg>
           </button>
+
           {children ? (
             <span className="margin-left-1 padding-left-2 border-left-1px border-base-lighter">
               {children}
diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
index 1e260161..54f793a6 100644
--- a/packages/design/src/FormManager/FormEdit/index.tsx
+++ b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -28,11 +28,13 @@ export default function FormEdit({
 
   return (
     <>
-      <h1>Edit form</h1>
-      <p className="usa-intro">Your form has been imported for web delivery.</p>
-      <FormEditProvider context={context} form={form}>
-        <EditForm saveForm={form => formService.saveForm(formId, form)} />
-      </FormEditProvider>
+      <div className="edit-form-page">
+        <h1>Edit form</h1>
+        <p className="usa-intro">Your form has been imported for web delivery.</p>
+        <FormEditProvider context={context} form={form}>
+          <EditForm saveForm={form => formService.saveForm(formId, form)} />
+        </FormEditProvider>
+      </div>
     </>
   );
 }
@@ -46,7 +48,7 @@ const EditForm = ({ saveForm }: { saveForm: (form: Blueprint) => void }) => {
   }, [form]);
 
   return (
-    <div className="position-relative">
+    <div className="position-relative edit-form-content-wrapper">
       <div className="grid-row">
         <div className="grid-col-12">
           <AddPatternDropdown />
diff --git a/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx b/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx
index efdb59a5..af58edb2 100644
--- a/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx
+++ b/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx
@@ -36,7 +36,7 @@ export const TopNavigation = ({
   uswdsRoot: `${string}/`;
 }) => {
   return (
-    <div className="position-sticky top-0 z-100 bg-white padding-1">
+    <div className="position-sticky top-0 z-100 bg-white padding-1 edit-page-top-nav">
       <div className="grid-container margin-bottom-05 display-block tablet:display-none">
         <MyFormsLink uswdsRoot={uswdsRoot} />
         <span className="text-base font-ui-3xs padding-left-4 padding-right-3">
diff --git a/packages/forms/src/components.ts b/packages/forms/src/components.ts
index 49ba74f6..69a1008f 100644
--- a/packages/forms/src/components.ts
+++ b/packages/forms/src/components.ts
@@ -36,6 +36,7 @@ export type ParagraphProps = PatternProps<{
 export type FieldsetProps = PatternProps<{
   type: 'fieldset';
   legend?: string;
+  subheader?: string;
 }>;
 
 export type ZipcodeProps = PatternProps<{
diff --git a/packages/forms/src/patterns/fieldset.ts b/packages/forms/src/patterns/fieldset.ts
index a199bab5..de6e7578 100644
--- a/packages/forms/src/patterns/fieldset.ts
+++ b/packages/forms/src/patterns/fieldset.ts
@@ -11,17 +11,21 @@ import { safeZodParse } from '../util/zod';
 
 export type FieldsetPattern = Pattern<{
   legend?: string;
+  subheader?: string;
   patterns: PatternId[];
 }>;
 
 const configSchema = z.object({
   legend: z.string().optional(),
+  subheader: z.string().optional(),
   patterns: z.array(z.string()),
 });
 
 export const fieldsetConfig: PatternConfig<FieldsetPattern> = {
   displayName: 'Fieldset',
   initial: {
+    legend: "Default Heading",
+    subheader: "Default Subhead",
     patterns: [],
   },
   parseConfigData: obj => safeZodParse(configSchema, obj),
@@ -55,6 +59,7 @@ export const fieldsetConfig: PatternConfig<FieldsetPattern> = {
         _patternId: pattern.id,
         type: 'fieldset',
         legend: pattern.data.legend,
+        subheader: pattern.data.subheader,
       } satisfies FieldsetProps,
       children,
     };

From 13f90f86982433947695f0d7ef6a06ff82d5d91f Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Wed, 24 Apr 2024 23:01:39 -0600
Subject: [PATCH 2/5] Updated the fieldset component to fix lint issue

---
 packages/design/sass/styles.scss                              | 4 ++++
 packages/design/src/Form/components/Fieldset/index.tsx        | 2 +-
 .../src/FormManager/FormEdit/components/FieldsetEdit.tsx      | 3 +--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
index 8c1b937f..1b1c63db 100644
--- a/packages/design/sass/styles.scss
+++ b/packages/design/sass/styles.scss
@@ -202,6 +202,10 @@ iframe:focus {
     background: #f4f1f9;
     font-weight: 700;
   }
+
+  .usa-fieldset {
+    margin-top: 0;
+  }
 }
 
 .draggable-list-item-wrapper {
diff --git a/packages/design/src/Form/components/Fieldset/index.tsx b/packages/design/src/Form/components/Fieldset/index.tsx
index 4b5541c1..f042c525 100644
--- a/packages/design/src/Form/components/Fieldset/index.tsx
+++ b/packages/design/src/Form/components/Fieldset/index.tsx
@@ -6,7 +6,7 @@ import { type PatternComponent } from '../../../Form';
 
 const Fieldset: PatternComponent<FieldsetProps> = props => {
   return (
-    <fieldset className="usa-fieldset test margin-top-4">
+    <fieldset className="usa-fieldset margin-top-4">
       {props.legend !== '' && props.legend !== undefined && (
         <legend className="usa-legend margin-top-2 margin-bottom-1">{props.legend}</legend>
       )}
diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
index 3c2cf7d4..02f894e9 100644
--- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -59,7 +59,6 @@ const FieldsetPreview = (props: FieldsetProps) => {
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const pattern = usePattern(patternId);
   const { register } = usePatternEditFormContext();
   return (
 
@@ -84,7 +83,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      {/* <Fieldset type="fieldset" _patternId={patternId} /> */}
+      <Fieldset type="fieldset" _patternId={patternId} />
       <PatternEditActions />
     </div>
   );

From e5fcec79c85d2ce51d9b68fdcf3cddabfc9af48b Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Wed, 1 May 2024 22:15:29 -0600
Subject: [PATCH 3/5] Removed extra styling and unneeded component

---
 .../design/sass/_uswds-custom-styles.scss     | 157 ++++++++++++
 packages/design/sass/styles.scss              | 224 +-----------------
 .../src/Form/components/Address/index.tsx     |   4 +-
 .../components/Fieldset/Fieldset.stories.tsx  |  11 +-
 .../src/Form/components/Fieldset/index.tsx    |   8 +-
 .../src/Form/components/additional-fields.tsx |   4 +-
 packages/design/src/Form/index.tsx            |  14 +-
 .../FormEdit/components/FieldsetEdit.tsx      |  18 +-
 .../FormEdit/components/FormSummaryEdit.tsx   |   4 +-
 .../FormEdit/components/InputPatternEdit.tsx  |  10 +-
 .../components/ParagraphPatternEdit.tsx       |   4 +-
 .../PreviewSequencePattern/DraggableList.tsx  |   4 +-
 .../components/SubmissionConfirmationEdit.tsx |  10 +-
 .../components/common/PatternEditActions.tsx  |   2 +-
 packages/forms/src/components.ts              |   1 -
 packages/forms/src/patterns/fieldset.ts       |   4 -
 16 files changed, 193 insertions(+), 286 deletions(-)
 create mode 100644 packages/design/sass/_uswds-custom-styles.scss

diff --git a/packages/design/sass/_uswds-custom-styles.scss b/packages/design/sass/_uswds-custom-styles.scss
new file mode 100644
index 00000000..445f3e0d
--- /dev/null
+++ b/packages/design/sass/_uswds-custom-styles.scss
@@ -0,0 +1,157 @@
+@use "uswds-core" as *;
+
+html {
+    scroll-behavior: smooth;
+  }
+  
+  h1 {
+    font-size: units(5);
+  
+    span {
+      display: inline-block;
+      vertical-align: top;
+      margin-right: units(2.5);
+    }
+  }
+  
+  h2 {
+    margin-top: units(4);
+    margin-bottom: units(2);
+  }
+  
+  p {
+    line-height: units(3);
+  }
+
+  .hide {
+    display: none;
+  }
+  
+  .show  {
+    display: block;
+  }
+  
+  .usa-app {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+  }
+  
+  main {
+    flex: 1;
+    width: 100%;
+  }
+  
+  .usa-combo-box__input,
+  .usa-input,
+  .usa-input-group,
+  .usa-range,
+  .usa-select,
+  .usa-textarea {
+    max-width: 40rem;
+    height: 3rem;
+  }
+  
+  .usa-sidenav{
+  
+    .usa-sidenav__item {
+      .usa-current {
+        color: #54278f;
+  
+        &:after {
+          background-color: rebeccapurple;
+        }
+      }
+    }
+  }
+  
+  .usa-section {
+    padding-top: units(5);
+    padding-bottom: units(5);
+  }
+  
+  .usa-checkbox {
+    background: none;
+  }
+  
+  .usa-table {
+    width: 100%;
+  
+    .column1 {
+      width: 50%;
+    }
+  
+    .column2 {
+      width: 30%;
+    }
+  
+    .column3 {
+      width: 20%;
+    }
+  
+    .actionColumn {
+      span {
+        margin: 0 30px 0 0;
+  
+        &:last-child {
+          margin: 0;
+        }
+      }
+    }
+  }
+  
+  .usa-form--large {
+    max-width: 32rem;
+  }
+
+  .usa-legend-wrapper {
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+  
+  .usa-legend {
+    width: -webkit-fill-available;
+  }
+  
+  nav {
+    background: #F7F9FD;
+    padding: 0 units(3);
+  
+    >ul {
+      padding-top: units(5);
+    }
+  }
+  
+  [contentEditable=true]:focus,
+  [href]:focus,
+  [tabindex]:focus,
+  iframe:focus {
+    outline: units(0.5) solid #783cb9;
+  }
+  
+  .usa-step-indicator__segment {
+    max-width: 22rem;
+  
+    &--current {
+  
+      .usa-step-indicator__segment-label {
+        color: #783cb9;
+      }
+  
+      &::after {
+        background: #783cb9;
+      }
+    }
+  }
+  
+  .videoWrapper {
+    position: relative;
+    padding-bottom: 62.5%;
+    height: 0;
+  }
+  
+  .edit-component-panel {
+    .usa-fieldset {
+      margin-top: 0;
+    }
+  }
\ No newline at end of file
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
index 1b1c63db..6e52c965 100644
--- a/packages/design/sass/styles.scss
+++ b/packages/design/sass/styles.scss
@@ -1,225 +1,3 @@
 @forward "uswds-theme";
 @forward "uswds";
-
-html {
-  scroll-behavior: smooth;
-}
-
-h1 {
-  font-size: 2.5em;
-
-  span {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 20px;
-  }
-}
-
-h2 {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-p {
-  line-height: 1.5rem;
-}
-
-.usa-legend {
-  font-size: 1.7rem;
-  font-weight: 700;
-}
-
-
-.hide {
-  display: none;
-}
-
-.show  {
-  display: block;
-}
-
-.usa-app {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-main {
-  flex: 1;
-  width: 100%;
-/*
-  >section {
-    &.grid-container {
-      margin: 0;
-      padding: 0;
-    }
-  }
-*/
-}
-
-.usa-combo-box__input,
-.usa-input,
-.usa-input-group,
-.usa-range,
-.usa-select,
-.usa-textarea {
-  max-width: 40rem;
-  height: 3rem;
-}
-
-.usa-sidenav{
-
-  .usa-sidenav__item {
-    .usa-current {
-      color: #54278f;
-
-      &:after {
-        background-color: rebeccapurple;
-      }
-    }
-  }
-}
-
-.usa-section {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
-.usa-checkbox {
-  background: none;
-}
-
-.usa-table {
-  width: 100%;
-
-  .column1 {
-    width: 50%;
-  }
-
-  .column2 {
-    width: 30%;
-  }
-
-  .column3 {
-    width: 20%;
-  }
-
-  .actionColumn {
-    span {
-      margin: 0 30px 0 0;
-
-      &:last-child {
-        margin: 0;
-      }
-    }
-  }
-}
-
-.usa-form--large {
-  max-width: 32rem;
-}
-
-.usa-legend-wrapper {
-  word-wrap: break-word;
-  hyphens: auto;
-}
-
-.usa-legend {
-  max-width: 100%;
-  font-weight: 600;
-  width: -webkit-fill-available;
-}
-
-nav {
-  background: #F7F9FD;
-  padding: 0 1.5rem;
-
-  >ul {
-    padding-top: 2.6rem;
-  }
-}
-
-[contentEditable=true]:focus,
-[href]:focus,
-[tabindex]:focus,
-iframe:focus {
-  outline: 0.25rem solid #783cb9;
-}
-
-.usa-step-indicator__segment {
-  max-width: 22rem;
-
-  &--current {
-
-    .usa-step-indicator__segment-label {
-      color: #783cb9;
-    }
-
-    &::after {
-      background: #783cb9;
-    }
-  }
-}
-
-.videoWrapper {
-  position: relative;
-  padding-bottom: 62.5%;
-  height: 0;
-}
-
-.usa-fieldset {
-  width: 100%;
-
-  .usa-legend,
-  .usa-alert__text {
-    font-size: 1rem;
-  }
-
-  .usa-legend {    
-    font-weight: normal;
-    line-height: 1.5rem;
-    text-transform: uppercase;
-  }
-
-  h3.section-heading-h3 {
-    font-size: 1.375rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .usa-alert__text {
-    span {
-      display: inline-block;
-      vertical-align: top;
-      margin-right: 1rem;
-    }
-  }
-}
-
-.edit-component-panel {
-  input,
-  select {
-    background: #f4f1f9;
-    font-weight: 700;
-  }
-
-  .usa-fieldset {
-    margin-top: 0;
-  }
-}
-
-.draggable-list-item-wrapper {
-  .draggable-list-item {
-    cursor: pointer;
-  }
-  .draggable-list-button {
-    cursor: 'grab';
-  }
-}
-
-.pattern-edit-panel {
-  .usa-button--unstyled {
-    color: #565C65;
-
-  }
-}
+@forward "uswds-custom-styles";
diff --git a/packages/design/src/Form/components/Address/index.tsx b/packages/design/src/Form/components/Address/index.tsx
index 954ffcee..56160451 100644
--- a/packages/design/src/Form/components/Address/index.tsx
+++ b/packages/design/src/Form/components/Address/index.tsx
@@ -9,8 +9,8 @@ import { type PatternComponent } from '../..';
 const Address: PatternComponent<AddressComponentProps> = props => {
   const { register } = useFormContext();
   return (
-    <fieldset className="usa-fieldset">
-      <legend className="usa-legend usa-legend--large">Mailing address</legend>
+    <fieldset className="usa-fieldset width-full">
+      <legend className="usa-legend font-body-5 text-uppercase line-height-body-4">Mailing address</legend>
       <label
         className={classNames('usa-label', {
           'usa-label--error': props.childProps.streetAddress.error,
diff --git a/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx b/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
index 2e6bc14e..6a5cd8be 100644
--- a/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
+++ b/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
@@ -8,16 +8,7 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof Fieldset>;
 
-export const FieldsetSectionWithSubheader = {
-  args: {
-    legend: 'Default Heading',
-    subheader: 'Default Subhead',
-    type: 'fieldset',
-    _patternId: 'test-id',
-  },
-} satisfies StoryObj<typeof Fieldset>;
-
-export const FieldsetSectionWithoutSubheader = {
+export const FieldsetSection = {
   args: {
     legend: 'Default Heading',
     type: 'fieldset',
diff --git a/packages/design/src/Form/components/Fieldset/index.tsx b/packages/design/src/Form/components/Fieldset/index.tsx
index f042c525..ee7bba6c 100644
--- a/packages/design/src/Form/components/Fieldset/index.tsx
+++ b/packages/design/src/Form/components/Fieldset/index.tsx
@@ -6,13 +6,9 @@ import { type PatternComponent } from '../../../Form';
 
 const Fieldset: PatternComponent<FieldsetProps> = props => {
   return (
-    <fieldset className="usa-fieldset margin-top-4">
+    <fieldset className="usa-fieldset width-full margin-top-4">
       {props.legend !== '' && props.legend !== undefined && (
-        <legend className="usa-legend margin-top-2 margin-bottom-1">{props.legend}</legend>
-      )}
-
-      {props.subheader !== '' && props.subheader !== undefined && (
-        <h3 className="section-heading-h3 margin-top-2 margin-bottom-1">{props.subheader}</h3>
+        <legend className="usa-legend font-body-5 text-uppercase line-height-body-4 margin-top-2 margin-bottom-1">{props.legend}</legend>
       )}
 
       {props.children}     
diff --git a/packages/design/src/Form/components/additional-fields.tsx b/packages/design/src/Form/components/additional-fields.tsx
index 1e7b7b0e..0561f971 100644
--- a/packages/design/src/Form/components/additional-fields.tsx
+++ b/packages/design/src/Form/components/additional-fields.tsx
@@ -106,8 +106,8 @@ export const SelectField = ({ field }: { field: Field }) => {
 
 export const RadioField = ({ field }: { field: Field }) => {
   return (
-    <fieldset className="usa-fieldset">
-      <legend className="usa-legend">{field.label}</legend>
+    <fieldset className="usa-fieldset width-full">
+      <legend className="usa-legend font-body-5 text-uppercase line-height-body-4">{field.label}</legend>
       {field.options?.map((option, index) => (
         <div key={index} className="usa-radio">
           <input
diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
index a24caea7..a516dd7a 100644
--- a/packages/design/src/Form/index.tsx
+++ b/packages/design/src/Form/index.tsx
@@ -175,14 +175,14 @@ const FormContents = ({
   return (
     <>
       {false && (
-        <fieldset className="usa-fieldset">
+        <fieldset className="usa-fieldset width-full">
           <legend className="usa-legend usa-legend--large">
             Request to Change Name
           </legend>
           <div className="usa-form-group">
             <div className="usa-form-group">
-              <fieldset className="usa-fieldset">
-                <legend className="usa-legend usa-legend--large">
+              <fieldset className="usa-fieldset width-full">
+                <legend className="usa-legend font-body-5 text-uppercase line-height-body-4">
                   County where you live
                 </legend>
                 <label className="usa-label">Name of your county *</label>
@@ -200,8 +200,8 @@ const FormContents = ({
 
           <div className="usa-form-group">
             <div className="usa-form-group">
-              <fieldset className="usa-fieldset">
-                <legend className="usa-legend usa-legend--large">
+              <fieldset className="usa-fieldset width-full">
+                <legend className="usa-legend font-body-5 text-uppercase line-height-body-4">
                   Your current name
                 </legend>
                 <label className="usa-label">First name *</label>
@@ -232,7 +232,7 @@ const FormContents = ({
                   value=""
                 />
               </fieldset>
-              <fieldset className="usa-fieldset">
+              <fieldset className="usa-fieldset width-full">
                 <p>
                   To ask the court to change your name, you must fill out this
                   form, and:
@@ -253,7 +253,7 @@ const FormContents = ({
         </fieldset>
       )}
 
-      <fieldset className="usa-fieldset">
+      <fieldset className="usa-fieldset width-full">
         {prompt.components.map((component, index) => {
           return (
             <PromptComponent
diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
index 02f894e9..ba90ad36 100644
--- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -41,11 +41,11 @@ const FieldsetPreview = (props: FieldsetProps) => {
           <div className="usa-alert usa-alert--warning usa-alert--no-icon margin-bottom-3">
             <div className="usa-alert__body">
               <p className="usa-alert__text">
-                <span className="alert-text">Empty sections will not display.</span>
-                <span className="action-text add-question">
+                <span className="alert-text display-inline-block text-top margin-right-2">Empty sections will not display.</span>
+                <span className="action-text add-question display-inline-block margin-right-2">
                   <a className="usa-link" href="#">Add question</a>
                 </span>
-                <span className="action-text remove-section">
+                <span className="action-text remove-section display-inline-block text-top margin-right-2">
                   <a className="usa-link" href="#">Remove section</a>
                 </span>
               </p>
@@ -67,22 +67,12 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
         <label className="usa-label width-full maxw-full">
           Legend Text Element
           <input
-            className="usa-input"
+            className="usa-input bg-primary-lighter text-bold"
             {...register(`${patternId}.data.legend`)}
             type="text"
           ></input>
         </label>
       </div>
-      <div className="grid-col-12 margin-bottom-3 flex-align-self-end">
-        <label className="usa-label width-full maxw-full">
-          Subheader Text Element
-          <input
-            className="usa-input"
-            {...register(`${patternId}.data.subheader`)}
-            type="text"
-          ></input>
-        </label>
-      </div>
       <Fieldset type="fieldset" _patternId={patternId} />
       <PatternEditActions />
     </div>
diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
index 087362ca..293a1aae 100644
--- a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -37,7 +37,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
         <label className="usa-label">
           Title
           <input
-            className="usa-input"
+            className="usa-input bg-primary-lighter text-bold"
             {...register(`${patternId}.data.title`)}
             type="text"
           ></input>
@@ -47,7 +47,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
         <label className="usa-label">
           Description
           <textarea
-            className="usa-textarea"
+            className="usa-textarea bg-primary-lighter text-bold"
             {...register(`${patternId}.data.description`)}
           ></textarea>
         </label>
diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
index 1d8a301a..790bb79a 100644
--- a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
@@ -41,7 +41,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           Field label
         </label>
         <input
-          className="usa-input"
+          className="usa-input bg-primary-lighter text-bold"
           id={`${pattern.id}.data.label`}
           defaultValue={`${pattern.id}`}
           {...methods.register(`${pattern.id}.data.label`)}
@@ -53,7 +53,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           Default field value
         </label>
         <input
-          className="usa-input"
+          className="usa-input bg-primary-lighter text-bold"
           id={`${pattern.id}.data.default`}
           type="text"
           {...methods.register(`${pattern.id}.data.default`)}
@@ -64,7 +64,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           Maximum length
         </label>
         <input
-          className="usa-input"
+          className="usa-input bg-primary-lighter text-bold"
           id={`${pattern.id}.data.maxLength`}
           type="text"
           {...methods.register(`${pattern.id}.data.maxLength`)}
@@ -75,7 +75,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           Field type
         </label>
         <select
-          className="usa-select"
+          className="usa-select bg-primary-lighter text-bold"
           {...methods.register(`${pattern.id}.type`)}
           id={`${pattern.id}.type`}
         >
@@ -87,7 +87,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           <span className="usa-checkbox">
             <input
               style={{ display: 'inline-block' }}
-              className="usa-checkbox__input"
+              className="usa-checkbox__input bg-primary-lighter"
               type="checkbox"
               id={`${pattern.id}.data.required`}
               {...methods.register(`${pattern.id}.data.required`)}
diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
index c7d6a02c..565998eb 100644
--- a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
@@ -38,7 +38,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
         <label className="usa-label">
           Text Element
           <input
-            className="usa-input"
+            className="usa-input bg-primary-lighter text-bold"
             {...register(`${patternId}.data.text`)}
             type="text"
           ></input>
@@ -47,7 +47,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
       <div className="desktop:grid-col-3 mobile:grid-col-12 flex-align-self-end">
         <label className="usa-label">
           <p className="usa-hint">Style</p>
-          <select className="usa-select" {...register(`${patternId}.type`)}>
+          <select className="usa-select bg-primary-lighter text-bold" {...register(`${patternId}.type`)}>
             <option value={'paragraph'}>Question</option> {/* this is a stub */}
             <option value={'paragraph'}>Title</option> {/* this is a stub */}
             <option value={'paragraph'}>Instructions</option>{' '}
diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
index 04f0ef2a..22cd0e4b 100644
--- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -85,9 +85,9 @@ const SortableItem = ({
         transition,
       }}
     >
-      <div className="grid-row grid-gap draggable-list-item">
+      <div className="grid-row grid-gap draggable-list-item cursor-pointer">
         <div
-          className="grid-col-12 width-full draggable-list-button margin-top-2 margin-bottom-2"
+          className="grid-col-12 width-full draggable-list-button cursor-grab margin-top-2 margin-bottom-2"
           {...listeners}
           {...attributes}
         >
diff --git a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
index c801674a..1b23b92c 100644
--- a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
@@ -39,7 +39,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
         <label className="usa-label">
           Field label
           <input
-            className="usa-input"
+            className="usa-input bg-primary-lighter text-bold"
             {...register(`${patternId}.data.text`)}
             type="text"
           ></input>
@@ -49,7 +49,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
         <label className="usa-label">
           Default field value
           <input
-            className="usa-input"
+            className="usa-input bg-primary-lighter text-bold"
             type="text"
             {...register(`${patternId}.data.initial`)}
           ></input>
@@ -59,7 +59,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
         <label className="usa-label">
           Maximum length
           <input
-            className="usa-input"
+            className="usa-input bg-primary-lighter text-bold"
             type="text"
             {...register(`${patternId}.data.maxLength`)}
           ></input>
@@ -68,7 +68,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
       <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Field type
-          <select className="usa-select" {...register(`${patternId}.type`)}>
+          <select className="usa-select bg-primary-lighter text-bold" {...register(`${patternId}.type`)}>
             <option value={'input'}>Input</option>
           </select>
         </label>
@@ -76,7 +76,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
       <div className="desktop:grid-col-2 mobile:grid-col-12">
         <div className="usa-checkbox">
           <input
-            className="usa-checkbox__input"
+            className="usa-checkbox__input bg-primary-lighter"
             type="checkbox"
             id={`${patternId}.required`}
             {...register(`${patternId}.data.required`)}
diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx
index 98a75393..c6a479ee 100644
--- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx
@@ -16,7 +16,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
 
   return (
     <>
-      <div className="border-top-1px border-base-lighter margin-top-2 margin-bottom-2 padding-top-1 width-full text-right pattern-edit-panel">
+      <div className="border-top-1px border-base-lighter margin-top-2 margin-bottom-2 padding-top-1 width-full text-right pattern-edit-panel base-dark">
         <span
           className={classNames('display-inline-block', {
             'border-base-lighter': children,
diff --git a/packages/forms/src/components.ts b/packages/forms/src/components.ts
index 69a1008f..49ba74f6 100644
--- a/packages/forms/src/components.ts
+++ b/packages/forms/src/components.ts
@@ -36,7 +36,6 @@ export type ParagraphProps = PatternProps<{
 export type FieldsetProps = PatternProps<{
   type: 'fieldset';
   legend?: string;
-  subheader?: string;
 }>;
 
 export type ZipcodeProps = PatternProps<{
diff --git a/packages/forms/src/patterns/fieldset.ts b/packages/forms/src/patterns/fieldset.ts
index de6e7578..b4c87538 100644
--- a/packages/forms/src/patterns/fieldset.ts
+++ b/packages/forms/src/patterns/fieldset.ts
@@ -11,13 +11,11 @@ import { safeZodParse } from '../util/zod';
 
 export type FieldsetPattern = Pattern<{
   legend?: string;
-  subheader?: string;
   patterns: PatternId[];
 }>;
 
 const configSchema = z.object({
   legend: z.string().optional(),
-  subheader: z.string().optional(),
   patterns: z.array(z.string()),
 });
 
@@ -25,7 +23,6 @@ export const fieldsetConfig: PatternConfig<FieldsetPattern> = {
   displayName: 'Fieldset',
   initial: {
     legend: "Default Heading",
-    subheader: "Default Subhead",
     patterns: [],
   },
   parseConfigData: obj => safeZodParse(configSchema, obj),
@@ -59,7 +56,6 @@ export const fieldsetConfig: PatternConfig<FieldsetPattern> = {
         _patternId: pattern.id,
         type: 'fieldset',
         legend: pattern.data.legend,
-        subheader: pattern.data.subheader,
       } satisfies FieldsetProps,
       children,
     };

From dc02e9829772c8a91d0db8750d30b8cc028734bf Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Thu, 2 May 2024 13:06:03 -0600
Subject: [PATCH 4/5] Added back the register to FieldsetEdit

---
 .../design/src/FormManager/FormEdit/components/FieldsetEdit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
index 79d7fd66..7e518579 100644
--- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -62,7 +62,7 @@ const FieldsetPreview = (props: FieldsetProps) => {
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const pattern = useFormManagerStore(state => state.form.patterns[patternId]);
-  //const { register } = usePatternEditFormContext();
+  const { register } = usePatternEditFormContext();
   return (
 
     <div className="grid-row edit-component-panel">

From 1af31f5cdf026d2246458d7e55871df9109caa74 Mon Sep 17 00:00:00 2001
From: Natasha Pierre-Louis <natasha.pierre-louis@gsa.gov>
Date: Thu, 2 May 2024 13:13:36 -0600
Subject: [PATCH 5/5] Removed the unused pattern variable

---
 .../design/src/FormManager/FormEdit/components/FieldsetEdit.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
index 7e518579..4a651f13 100644
--- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -61,7 +61,6 @@ const FieldsetPreview = (props: FieldsetProps) => {
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const pattern = useFormManagerStore(state => state.form.patterns[patternId]);
   const { register } = usePatternEditFormContext();
   return (