feat: add optional Add Section button to adf-form-side-nav

Co-authored-by: eromano <1030050+eromano@users.noreply.github.com>

lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html

@@ -21,6 +21,20 @@
         <mat-nav-list class="adf-form-side-nav-list" role="tree">
             <ng-container *ngTemplateOutlet="nodeList; context: { nodes: nodes, level: 0 }" />
         </mat-nav-list>
+
+        @if (showAddSection) {
+            <div class="adf-form-side-nav-add-section">
+                <button
+                    mat-stroked-button
+                    class="adf-form-side-nav-add-section-button"
+                    type="button"
+                    (click)="addSectionClicked.emit()"
+                >
+                    <mat-icon adf-icon="add" />
+                    {{ 'FORM.FORM_RENDERER.SIDE_NAV.ADD_SECTION' | translate }}
+                </button>
+            </div>
+        }
     </mat-sidenav>
 
     <mat-sidenav-content class="adf-form-side-nav-content">

lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.scss

@@ -56,6 +56,14 @@
     padding-top: 0;
 }
 
+.adf-form-side-nav-add-section {
+    padding: 8px 16px;
+
+    &-button {
+        width: 100%;
+    }
+}
+
 .adf-form-side-nav-item {
     display: flex;
     align-items: center;

lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.spec.ts

@@ -169,4 +169,32 @@ describe('FormSideNavComponent', () => {
 
         expect(testingUtils.getByCSS('.adf-form-side-nav-toggle')).toBeTruthy();
     });
+
+    describe('Add section button', () => {
+        it('should not show the add section button by default', () => {
+            fixture.componentRef.setInput('nodes', []);
+            fixture.detectChanges();
+
+            expect(testingUtils.getByCSS('.adf-form-side-nav-add-section')).toBeFalsy();
+        });
+
+        it('should show the add section button when showAddSection is true', () => {
+            fixture.componentRef.setInput('nodes', []);
+            fixture.componentRef.setInput('showAddSection', true);
+            fixture.detectChanges();
+
+            expect(testingUtils.getByCSS('.adf-form-side-nav-add-section')).toBeTruthy();
+        });
+
+        it('should emit addSectionClicked when the add section button is clicked', () => {
+            fixture.componentRef.setInput('nodes', []);
+            fixture.componentRef.setInput('showAddSection', true);
+            fixture.detectChanges();
+
+            const emitSpy = spyOn(component.addSectionClicked, 'emit');
+            testingUtils.getByCSS('.adf-form-side-nav-add-section-button').nativeElement.click();
+
+            expect(emitSpy).toHaveBeenCalledOnceWith();
+        });
+    });
 });

lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.ts

@@ -44,9 +44,15 @@ export class FormSideNavComponent implements OnChanges {
     @Input()
     activeNodeId: string;
 
+    @Input()
+    showAddSection = false;
+
     @Output()
     sectionSelected = new EventEmitter<TabModel>();
 
+    @Output()
+    addSectionClicked = new EventEmitter<void>();
+
     protected readonly isSmallScreen = toSignal(
         this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(map(({ matches }) => matches)),
         { initialValue: false }

lib/core/src/lib/i18n/en.json

@@ -93,7 +93,8 @@
         "COLLAPSE": "Collapse section",
         "HAS_ERRORS": "This section contains validation errors",
         "COMPLETE": "This section is complete",
-        "REQUIRED_FIELDS": "{{ count }} required fields"
+        "REQUIRED_FIELDS": "{{ count }} required fields",
+        "ADD_SECTION": "Add section"
       }
     },
     "BUTTON": {