feat: add button for Add supplementary information or instructions in Repeater and Fieldset components TCKT-415 (#596)

* create 'add supplementary information or instructions' button TCKT-415

* feat: add AddInformationOrInstructionsButton to Repeater component TCKT-415

* feat: add AddInformationOrInstructionsButton to Fieldset component TCKT-415

Author: kalasgarov

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

@@ -139,7 +139,6 @@ const sidebarPatterns: DropdownPattern[] = [
   ['rich-text', defaultFormConfig.patterns['rich-text'], 'Other'],
   ['attachment', defaultFormConfig.patterns['attachment'], 'Other'],
   ['package-download', defaultFormConfig.patterns['package-download'], 'Other'],
-  ['accordion-row', defaultFormConfig.patterns['accordion-row'], 'Other'], // TODO: remove this from the sidebar menu once accordion-row is added to fieldset and repeater
 ] as const;
 
 export const compoundFieldChildPatterns: DropdownPattern[] =
@@ -223,6 +222,24 @@ export const CompoundAddPatternButton = ({
   );
 };
 
+export const AddInformationOrInstructionsButton = ({
+  patternSelected,
+  title,
+}: PatternMenuProps) => {
+  return (
+    <button
+      className={classNames('usa-button usa-button--unstyled')}
+      onClick={() => patternSelected('accordion-row')}
+    >
+      <span className="display-inline-block text-ttop tablet:width-auto text-center">
+        <span className="display-inline-block text-ttop margin-right-1 text-underline">
+          {title}
+        </span>
+      </span>
+    </button>
+  );
+};
+
 export const CompoundAddNewPatternButton = ({
   patternSelected,
   title,

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

@@ -7,6 +7,7 @@ import { FieldsetPattern } from '@gsa-tts/forms-core';
 import {
   CompoundAddPatternButton,
   CompoundAddNewPatternButton,
+  AddInformationOrInstructionsButton,
 } from '../../AddPatternDropdown.js';
 import { useFormManagerStore } from '../../../store.js';
 import { PatternEditComponent } from '../../types.js';
@@ -107,6 +108,12 @@ const FieldsetPreview: PatternComponent<FieldsetProps> = props => {
             className="margin-left-3 margin-right-3 margin-bottom-3 bg-none"
           >
             <div className={classNames(styles.usaAlertBody, 'usa-alert__body')}>
+              <AddInformationOrInstructionsButton
+                title="Add supplementary information or instructions"
+                patternSelected={patternType =>
+                  addPatternToCompoundField(patternType, props._patternId)
+                }
+              />
               <CompoundAddPatternButton
                 title="Add question to set"
                 patternSelected={patternType =>

packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.tsx

@@ -7,6 +7,7 @@ import { RepeaterPattern } from '@gsa-tts/forms-core';
 import {
   CompoundAddPatternButton,
   CompoundAddNewPatternButton,
+  AddInformationOrInstructionsButton,
 } from '../AddPatternDropdown.js';
 import { PatternComponent } from '../../../Form/index.js';
 import Repeater from '../../../Form/components/Repeater/index.js';
@@ -108,6 +109,12 @@ const RepeaterPreview: PatternComponent<RepeaterProps> = props => {
             className="margin-left-3 margin-right-3 margin-bottom-3 bg-none"
           >
             <div className={classNames(styles.usaAlertBody, 'usa-alert__body')}>
+              <AddInformationOrInstructionsButton
+                title="Add supplementary information or instructions"
+                patternSelected={patternType =>
+                  addPatternToCompoundField(patternType, props._patternId)
+                }
+              />
               <CompoundAddPatternButton
                 title="Add question to set"
                 patternSelected={patternType =>