feat(components/forms): add helpKey input to field group (#2308)

apps/playground/src/app/app.module.ts

@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyHelpService } from '@skyux/core';
 import { SkyFluidGridModule } from '@skyux/layout';
 import { SkyThemeService } from '@skyux/theme';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { PlaygroundHelpService } from './shared/help.service';
 import { SkyThemeSelectorComponent } from './shared/theme-selector/theme-selector.component';
 
 @NgModule({
@@ -20,7 +22,10 @@ import { SkyThemeSelectorComponent } from './shared/theme-selector/theme-selecto
     SkyFluidGridModule,
     SkyThemeSelectorComponent,
   ],
-  providers: [SkyThemeService],
+  providers: [
+    SkyThemeService,
+    { provide: SkyHelpService, useClass: PlaygroundHelpService },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

apps/playground/src/app/components/forms/field-group/field-group.component.html

@@ -4,7 +4,8 @@
       labelText="Field group"
       hintText="Hint text for the section."
       headingLevel="4"
-      helpPopoverContent="This is some content in a popover"
+      helpPopoverContent="content"
+      helpKey="index.html"
     >
       <sky-input-box labelText="Name" [stacked]="true">
         <input type="text" formControlName="name" />

apps/playground/src/app/shared/help.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { SkyHelpOpenArgs, SkyHelpService } from '@skyux/core';
+
+@Injectable()
+export class PlaygroundHelpService implements SkyHelpService {
+  public openHelp(args: SkyHelpOpenArgs): void {
+    alert('help key: ' + args.helpKey);
+  }
+}

libs/components/forms/src/lib/modules/field-group/field-group.component.html

@@ -17,8 +17,9 @@ <h4 *ngIf="headingLevel === 4" [class]="headingClass">
       </h4>
     </legend>
     <sky-help-inline
-      *ngIf="helpPopoverContent && labelText"
+      *ngIf="helpPopoverContent || helpKey"
       class="sky-field-group-help-inline"
+      [helpKey]="helpKey"
       [labelText]="labelText"
       [popoverTitle]="helpPopoverTitle"
       [popoverContent]="helpPopoverContent"

libs/components/forms/src/lib/modules/field-group/field-group.component.scss

@@ -18,3 +18,7 @@ h4 {
 .sky-field-group-legend-wrapper {
   display: inline-flex;
 }
+
+sky-help-inline {
+  display: inline-flex;
+}

libs/components/forms/src/lib/modules/field-group/field-group.component.spec.ts

@@ -1,5 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { expect, expectAsync } from '@skyux-sdk/testing';
+import {
+  SkyHelpTestingController,
+  SkyHelpTestingModule,
+} from '@skyux/core/testing';
 
 import { FieldGroupComponent } from './fixtures/field-group.component.fixture';
 
@@ -19,7 +23,7 @@ describe('Field group component', function () {
 
   beforeEach(function () {
     TestBed.configureTestingModule({
-      imports: [FieldGroupComponent],
+      imports: [FieldGroupComponent, SkyHelpTestingModule],
     });
 
     fixture = TestBed.createComponent(FieldGroupComponent);
@@ -115,6 +119,37 @@ describe('Field group component', function () {
     ).toBe(1);
   });
 
+  it('should render help inline if help key is provided', () => {
+    componentInstance.helpPopoverContent = undefined;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.sky-help-inline')).toBeFalsy();
+
+    componentInstance.helpKey = 'helpKey.html';
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement.querySelector('.sky-help-inline'),
+    ).toBeTruthy();
+  });
+
+  it('should set global help config with help key', async () => {
+    const helpController = TestBed.inject(SkyHelpTestingController);
+    componentInstance.helpKey = 'helpKey.html';
+
+    fixture.detectChanges();
+
+    const helpInlineButton = fixture.nativeElement.querySelector(
+      '.sky-help-inline',
+    ) as HTMLElement | undefined;
+    helpInlineButton?.click();
+
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    helpController.expectCurrentHelpKey('helpKey.html');
+  });
+
   it('should pass accessibility', async () => {
     fixture.detectChanges();
     await fixture.whenStable();

libs/components/forms/src/lib/modules/field-group/field-group.component.ts

@@ -91,5 +91,13 @@ export class SkyFieldGroupComponent {
   @Input()
   public helpPopoverTitle: string | undefined;
 
+  /**
+   * A help key that identifies the global help content to display. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline) button is
+   * placed beside the field group label. Clicking the button invokes global help as configured by the application.
+   * @preview
+   */
+  @Input()
+  public helpKey: string | undefined;
+
   protected headingClass = 'sky-font-heading-3';
 }

libs/components/forms/src/lib/modules/field-group/fixtures/field-group.component.fixture.html

@@ -6,6 +6,7 @@
     [labelHidden]="labelHidden"
     [headingStyle]="headingStyle"
     [headingLevel]="headingLevel"
+    [helpKey]="helpKey"
     [helpPopoverContent]="helpPopoverContent"
     [helpPopoverTitle]="helpPopoverTitle"
   >

libs/components/forms/src/lib/modules/field-group/fixtures/field-group.component.fixture.ts

@@ -29,6 +29,7 @@ export class FieldGroupComponent {
   public labelHidden = false;
   public headingStyle = 3;
   public headingLevel = 3;
+  public helpKey: string | undefined;
   public helpPopoverContent: string | undefined;
   public helpPopoverTitle: string | undefined;
 

libs/components/forms/testing/src/field-group/field-group-harness.spec.ts

@@ -1,6 +1,8 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyHelpService } from '@skyux/core';
+import { SkyHelpTestingModule } from '@skyux/core/testing';
 
 import { SkyFieldGroupHarness } from './field-group-harness';
 import { FieldGroupComponent } from './fixtures/field-group.component.fixture';
@@ -10,7 +12,7 @@ async function setupTest(options: { dataSkyId?: string } = {}): Promise<{
   fixture: ComponentFixture<FieldGroupComponent>;
 }> {
   await TestBed.configureTestingModule({
-    imports: [FieldGroupComponent, NoopAnimationsModule],
+    imports: [FieldGroupComponent, NoopAnimationsModule, SkyHelpTestingModule],
   }).compileComponents();
 
   const fixture = TestBed.createComponent(FieldGroupComponent);
@@ -126,20 +128,25 @@ describe('Field group harness', () => {
     const { fieldGroupHarness, fixture } = await setupTest();
 
     fixture.componentInstance.helpPopoverContent = undefined;
+    fixture.componentInstance.helpKey = undefined;
     fixture.detectChanges();
 
     await expectAsync(
       fieldGroupHarness.clickHelpInline(),
     ).toBeRejectedWithError('No help inline found.');
   });
 
-  it('should open help inline popover', async () => {
+  it('should open help inline popover and help widget when clicked', async () => {
     const { fieldGroupHarness, fixture } = await setupTest();
+    const helpSvc = TestBed.inject(SkyHelpService);
+    const helpSpy = spyOn(helpSvc, 'openHelp');
+
     await fieldGroupHarness.clickHelpInline();
     fixture.detectChanges();
     await fixture.whenStable();
 
     await expectAsync(fieldGroupHarness.getHelpPopoverContent()).toBeResolved();
+    expect(helpSpy).toHaveBeenCalledWith({ helpKey: 'helpKey.html' });
   });
 
   it('should get help popover content', async () => {

libs/components/forms/testing/src/field-group/fixtures/field-group.component.fixture.html

@@ -6,6 +6,7 @@
     [labelHidden]="labelHidden"
     [headingLevel]="headingLevel"
     [headingStyle]="headingStyle"
+    [helpKey]="helpKey"
     [helpPopoverContent]="helpPopoverContent"
     [helpPopoverTitle]="helpPopoverTitle"
     data-sky-id="field-group"

libs/components/forms/testing/src/field-group/fixtures/field-group.component.fixture.ts

@@ -32,6 +32,7 @@ export class FieldGroupComponent {
   public labelHidden = false;
   public headingLevel: SkyFieldGroupHeadingLevel = 3;
   public headingStyle: SkyFieldGroupHeadingStyle = 3;
+  public helpKey: string | undefined = 'helpKey.html';
   public helpPopoverContent: string | undefined = 'Popover content';
   public helpPopoverTitle = 'Popover title';