diff --git a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html index e2594fe39c..f36e487440 100644 --- a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html +++ b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.html @@ -21,6 +21,20 @@ + + @if (showAddSection) { +
+ +
+ } diff --git a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.scss b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.scss index 48e848d2f4..99899c604b 100644 --- a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.scss +++ b/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; diff --git a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.spec.ts b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.spec.ts index 66e479c2eb..864ce23a97 100644 --- a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.spec.ts +++ b/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(); + }); + }); }); diff --git a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.ts b/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.ts index a179a2f46f..3f3da28ae3 100644 --- a/lib/core/src/lib/form/components/form-side-nav/form-side-nav.component.ts +++ b/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(); + @Output() + addSectionClicked = new EventEmitter(); + protected readonly isSmallScreen = toSignal( this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(map(({ matches }) => matches)), { initialValue: false } diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json index ec75f12a1c..6f977c07ba 100644 --- a/lib/core/src/lib/i18n/en.json +++ b/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": {