feat: add code examples for help key (#2903)

apps/code-examples/src/app/app-routing.module.ts

@@ -14,7 +14,7 @@ const routes: Routes = [
   {
     path: 'angular-tree',
     loadChildren: () =>
-      import('./features/angular-tree.modules').then(
+      import('./features/angular-tree.module').then(
         (m) => m.AngularTreeFeatureModule,
       ),
   },

apps/code-examples/src/app/code-examples/angular-tree-component/angular-tree/help-key/demo.component.html

@@ -0,0 +1,20 @@
+<sky-angular-tree-wrapper>
+  <tree-root #tree [nodes]="nodes">
+    <ng-template
+      #treeNodeFullTemplate
+      let-index="index"
+      let-node
+      let-templates="templates"
+    >
+      <sky-angular-tree-node
+        [attr.data-sky-id]="'node-' + node.data.name"
+        [helpKey]="node.data.helpKey"
+        [helpPopoverContent]="node.data.helpPopoverContent"
+        [helpPopoverTitle]="node.data.helpPopoverTitle"
+        [index]="index"
+        [node]="node"
+        [templates]="templates"
+      />
+    </ng-template>
+  </tree-root>
+</sky-angular-tree-wrapper>

apps/code-examples/src/app/code-examples/angular-tree-component/angular-tree/help-key/demo.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TreeModule } from '@blackbaud/angular-tree-component';
+import { SkyAngularTreeModule } from '@skyux/angular-tree-component';
+import { SkyHelpInlineModule } from '@skyux/help-inline';
+
+@Component({
+  standalone: true,
+  selector: 'app-demo',
+  templateUrl: './demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SkyAngularTreeModule, SkyHelpInlineModule, TreeModule],
+})
+export class DemoComponent {
+  protected nodes = [
+    {
+      name: 'Animals',
+      isExpanded: true,
+      helpPopoverContent: 'Example help content for animals.',
+      children: [
+        {
+          name: 'Cats',
+          isExpanded: true,
+          helpPopoverContent: 'Example help content for cats.',
+          helpPopoverTitle: 'What is a cat?',
+          children: [
+            { name: 'Burmese', helpKey: 'cat-burmese' },
+            { name: 'Persian', helpKey: 'cat-persian' },
+            { name: 'Tabby', helpKey: 'cat-tabby' },
+          ],
+        },
+        {
+          name: 'Dogs',
+          isExpanded: true,
+          children: [
+            {
+              name: 'Beagle',
+              helpPopoverContent: 'Example help content for beagles.',
+            },
+            { name: 'German shepherd', helpKey: 'dog-shepherd' },
+            { name: 'Labrador retriever', helpKey: 'dog-lab' },
+          ],
+        },
+      ],
+    },
+  ];
+}

apps/code-examples/src/app/code-examples/colorpicker/colorpicker/help-key/demo.component.html

@@ -0,0 +1,26 @@
+<form [formGroup]="formGroup" (ngSubmit)="submit()">
+  <sky-colorpicker
+    #colorPicker
+    data-sky-id="favorite-color"
+    labelText="What is your favorite color?"
+    helpKey="color-help"
+    hintText="Pick a color with at least 80% opacity."
+    [stacked]="true"
+    (selectedColorChanged)="onSelectedColorChanged($event)"
+  >
+    <input
+      formControlName="favoriteColor"
+      type="text"
+      [presetColors]="swatches"
+      [skyColorpickerInput]="colorPicker"
+    />
+    @if (favoriteColor.errors?.['opaque']) {
+      <sky-form-error
+        errorName="opaque"
+        errorText="Color must have at least 80% opacity."
+      />
+    }
+  </sky-colorpicker>
+
+  <button class="sky-btn sky-btn-primary" type="submit">Submit</button>
+</form>

apps/code-examples/src/app/code-examples/colorpicker/colorpicker/help-key/demo.component.spec.ts

@@ -0,0 +1,74 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SkyColorpickerHarness } from '@skyux/colorpicker/testing';
+import {
+  SkyHelpTestingController,
+  SkyHelpTestingModule,
+} from '@skyux/core/testing';
+
+import { DemoComponent } from './demo.component';
+
+describe('Basic colorpicker demo', () => {
+  async function setupTest(options: { dataSkyId: string }): Promise<{
+    harness: SkyColorpickerHarness;
+    fixture: ComponentFixture<DemoComponent>;
+    helpController: SkyHelpTestingController;
+  }> {
+    const fixture = TestBed.createComponent(DemoComponent);
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const helpController = TestBed.inject(SkyHelpTestingController);
+
+    const harness = await loader.getHarness(
+      SkyColorpickerHarness.with({ dataSkyId: options.dataSkyId }),
+    );
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    return { harness, fixture, helpController };
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DemoComponent, SkyHelpTestingModule],
+    });
+  });
+
+  it('should have the initial values set', async () => {
+    const { harness } = await setupTest({ dataSkyId: 'favorite-color' });
+
+    await expectAsync(harness.getLabelText()).toBeResolvedTo(
+      'What is your favorite color?',
+    );
+    await expectAsync(harness.getHintText()).toBeResolvedTo(
+      'Pick a color with at least 80% opacity.',
+    );
+  });
+
+  it('should throw an error if a low opacity color is selected', async () => {
+    const { harness, fixture } = await setupTest({
+      dataSkyId: 'favorite-color',
+    });
+
+    await harness.clickColorpickerButton();
+    await expectAsync(harness.isColorpickerOpen()).toBeResolvedTo(true);
+
+    const dropdown = await harness.getColorpickerDropdown();
+
+    await dropdown.setAlphaValue('.2');
+    await dropdown.clickApplyButton();
+    fixture.detectChanges();
+
+    await expectAsync(harness.hasError('opaque')).toBeResolvedTo(true);
+  });
+
+  it('should have the correct help key', async () => {
+    const { harness, helpController } = await setupTest({
+      dataSkyId: 'favorite-color',
+    });
+
+    await harness.clickHelpInline();
+
+    helpController.expectCurrentHelpKey('color-help');
+  });
+});

apps/code-examples/src/app/code-examples/colorpicker/colorpicker/help-key/demo.component.ts

@@ -0,0 +1,68 @@
+import { Component, inject } from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+} from '@angular/forms';
+import { SkyColorpickerModule, SkyColorpickerOutput } from '@skyux/colorpicker';
+
+interface DemoForm {
+  favoriteColor: FormControl<SkyColorpickerOutput | string>;
+}
+
+function isColorpickerOutput(value: unknown): value is SkyColorpickerOutput {
+  return !!(value && typeof value === 'object' && 'rgba' in value);
+}
+
+@Component({
+  standalone: true,
+  selector: 'app-demo',
+  templateUrl: './demo.component.html',
+  imports: [ReactiveFormsModule, SkyColorpickerModule],
+})
+export class DemoComponent {
+  protected favoriteColor: FormControl<SkyColorpickerOutput | string>;
+  protected formGroup: FormGroup<DemoForm>;
+
+  protected swatches: string[] = [
+    '#BD4040',
+    '#617FC2',
+    '#60AC68',
+    '#3486BA',
+    '#E87134',
+    '#DA9C9C',
+  ];
+
+  constructor() {
+    this.favoriteColor = new FormControl('#f00', {
+      nonNullable: true,
+      validators: [
+        (control): ValidationErrors | null => {
+          return isColorpickerOutput(control.value) &&
+            control.value.rgba.alpha < 0.8
+            ? { opaque: true }
+            : null;
+        },
+      ],
+    });
+
+    this.formGroup = inject(FormBuilder).group<DemoForm>({
+      favoriteColor: this.favoriteColor,
+    });
+  }
+
+  protected onSelectedColorChanged(args: SkyColorpickerOutput): void {
+    console.log('Reactive form color changed:', args);
+  }
+
+  protected submit(): void {
+    const controlValue = this.favoriteColor.value;
+    const favoriteColor = isColorpickerOutput(controlValue)
+      ? controlValue.hex
+      : controlValue;
+
+    alert('Your favorite color is: \n' + favoriteColor);
+  }
+}

apps/code-examples/src/app/code-examples/datetime/date-range-picker/basic/demo.component.html

@@ -1,23 +1,21 @@
 <div class="sky-padding-even-lg">
   <form [formGroup]="formGroup">
-    <div class="sky-margin-stacked-lg">
-      <sky-date-range-picker
-        data-sky-id="last-donation"
-        formControlName="lastDonation"
-        [dateFormat]="dateFormat"
-        [helpPopoverContent]="inlineHelpPopover"
-        [hintText]="hintText"
-        [labelText]="labelText"
-        [required]="required"
-      >
-        @if (lastDonation.errors?.['dateWeekend']) {
-          <sky-form-error
-            errorName="dateWeekend"
-            errorText="Do not pick a weekend."
-          />
-        }
-      </sky-date-range-picker>
-    </div>
+    <sky-date-range-picker
+      data-sky-id="last-donation"
+      formControlName="lastDonation"
+      [dateFormat]="dateFormat"
+      [helpPopoverContent]="inlineHelpPopover"
+      [hintText]="hintText"
+      [labelText]="labelText"
+      [required]="required"
+    >
+      @if (lastDonation.errors?.['dateWeekend']) {
+        <sky-form-error
+          errorName="dateWeekend"
+          errorText="Do not pick a weekend."
+        />
+      }
+    </sky-date-range-picker>
   </form>
 </div>
 

apps/code-examples/src/app/code-examples/datetime/date-range-picker/custom-calculator/demo.component.html

@@ -1,25 +1,23 @@
 <div class="sky-padding-even-lg">
   <form [formGroup]="formGroup">
-    <div class="sky-margin-stacked-lg">
-      <sky-date-range-picker
-        formControlName="lastDonation"
-        [calculatorIds]="customCalculators"
-        [dateFormat]="dateFormat"
-        [helpPopoverContent]="inlineHelpPopover"
-        [hintText]="hintText"
-        [labelText]="labelText"
-        [required]="required"
-      >
-        @if (
-          lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']
-        ) {
-          <sky-form-error
-            errorName="dateIsAfterToday"
-            errorText="Enter a date before today."
-          />
-        }
-      </sky-date-range-picker>
-    </div>
+    <sky-date-range-picker
+      formControlName="lastDonation"
+      [calculatorIds]="customCalculators"
+      [dateFormat]="dateFormat"
+      [helpPopoverContent]="inlineHelpPopover"
+      [hintText]="hintText"
+      [labelText]="labelText"
+      [required]="required"
+    >
+      @if (
+        lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']
+      ) {
+        <sky-form-error
+          errorName="dateIsAfterToday"
+          errorText="Enter a date before today."
+        />
+      }
+    </sky-date-range-picker>
   </form>
 </div>
 

apps/code-examples/src/app/code-examples/datetime/date-range-picker/help-key/demo.component.html

@@ -0,0 +1,20 @@
+<div class="sky-padding-even-lg">
+  <form [formGroup]="formGroup">
+    <sky-date-range-picker
+      data-sky-id="last-donation"
+      formControlName="lastDonation"
+      helpKey="dates-help"
+      [dateFormat]="dateFormat"
+      [hintText]="hintText"
+      [labelText]="labelText"
+      [required]="required"
+    >
+      @if (lastDonation.errors?.['dateWeekend']) {
+        <sky-form-error
+          errorName="dateWeekend"
+          errorText="Do not pick a weekend."
+        />
+      }
+    </sky-date-range-picker>
+  </form>
+</div>