Merge branch 'main' into deprecate-autofocus

Author: Blackbaud-CoreyArcher

libs/components/indicators/src/lib/modules/icon/fixtures/icon-fixtures.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { SkyIconModule } from '../icon.module';
+
+import { IconTestComponent } from './icon.component.fixture';
+
+@NgModule({
+  declarations: [IconTestComponent],
+  imports: [CommonModule, SkyIconModule],
+})
+export class SkyIconFixturesModule {}

libs/components/indicators/src/lib/modules/icon/fixtures/icon.component.fixture.ts

@@ -8,8 +8,8 @@ import { SkyIconVariantType } from '../types/icon-variant-type';
 })
 export class IconTestComponent {
   public icon = 'circle';
-  public iconType: 'fa' | 'skyux';
-  public size = '3x';
-  public fixedWidth = false;
-  public variant: SkyIconVariantType;
+  public iconType: 'fa' | 'skyux' | undefined;
+  public size: string | undefined = '3x';
+  public fixedWidth: boolean | undefined = false;
+  public variant: SkyIconVariantType | undefined;
 }

libs/components/indicators/src/lib/modules/icon/icon-stack.component.ts

@@ -16,7 +16,7 @@ export class SkyIconStackComponent {
    * [Font Awesome sizes](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons).
    */
   @Input()
-  public size: string;
+  public size: string | undefined;
 
   /**
    * The icon to display at the bottom of the stack.

libs/components/indicators/src/lib/modules/icon/icon.component.spec.ts

@@ -1,9 +1,9 @@
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { expect } from '@skyux-sdk/testing';
 
+import { SkyIconFixturesModule } from './fixtures/icon-fixtures.module';
 import { IconTestComponent } from './fixtures/icon.component.fixture';
 import { SkyIconResolverService } from './icon-resolver.service';
-import { SkyIconModule } from './icon.module';
 
 describe('Icon component', () => {
   let fixture: ComponentFixture<IconTestComponent>;
@@ -23,8 +23,7 @@ describe('Icon component', () => {
     });
 
     TestBed.configureTestingModule({
-      declarations: [IconTestComponent],
-      imports: [SkyIconModule],
+      imports: [SkyIconFixturesModule],
       providers: [
         {
           provide: SkyIconResolverService,
@@ -43,10 +42,10 @@ describe('Icon component', () => {
     expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-circle');
     expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-3x');
     expect(element.querySelector('.sky-icon')).not.toHaveCssClass('fa-fw');
-    expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe(
-      'true'
-    );
-    expect(element.querySelector('.sky-icon').classList.length).toBe(4);
+    expect(
+      element.querySelector('.sky-icon')?.getAttribute('aria-hidden')
+    ).toBe('true');
+    expect(element.querySelector('.sky-icon')?.classList.length).toBe(4);
 
     // Accessibility checks
     fixture.whenStable().then(() => {
@@ -64,10 +63,10 @@ describe('Icon component', () => {
     expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-broom');
     expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-5x');
     expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-fw');
-    expect(element.querySelector('.sky-icon').classList.length).toBe(5);
-    expect(element.querySelector('.sky-icon').getAttribute('aria-hidden')).toBe(
-      'true'
-    );
+    expect(element.querySelector('.sky-icon')?.classList.length).toBe(5);
+    expect(
+      element.querySelector('.sky-icon')?.getAttribute('aria-hidden')
+    ).toBe('true');
   });
 
   it('should show an icon without optional inputs', () => {
@@ -77,7 +76,7 @@ describe('Icon component', () => {
     fixture.detectChanges();
 
     expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-spinner');
-    expect(element.querySelector('.sky-icon').classList.length).toBe(3);
+    expect(element.querySelector('.sky-icon')?.classList.length).toBe(3);
   });
 
   it('should display the specified variant', () => {

libs/components/indicators/src/lib/modules/icon/icon.component.ts

@@ -26,26 +26,26 @@ export class SkyIconComponent {
    * @default "fa"
    */
   @Input()
-  public iconType: SkyIconType = 'fa';
+  public iconType: SkyIconType | undefined;
 
   /**
    * Specifies the size of the icon using
    * [Font Awesome sizes](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons). Do not prefix the size with `fa-`.
    */
   @Input()
-  public size: string;
+  public size: string | undefined;
 
   /**
    * Indicates whether the icon has a fixed width.
    * @default false
    */
   @Input()
-  public fixedWidth: boolean;
+  public fixedWidth: boolean | undefined;
 
   /**
    * Specifies the icon variant (`"line"` or `"solid"`). If the variant doesn't exist for the
    * specified icon, the normal icon is displayed. This property only applies when using SKY UX icons.
    */
   @Input()
-  public variant: SkyIconVariantType;
+  public variant: SkyIconVariantType | undefined;
 }

libs/components/indicators/src/lib/modules/label/fixtures/label.component.fixture.ts

@@ -8,7 +8,7 @@ import { SkyLabelType } from '../label-type';
   templateUrl: './label.component.fixture.html',
 })
 export class LabelTestComponent {
-  public labelType: SkyLabelType = 'info';
+  public labelType: SkyLabelType | undefined = 'info';
   public descriptionType: SkyIndicatorDescriptionType | undefined;
   public customDescription: string | undefined;
 }

libs/components/indicators/src/lib/modules/status-indicator/status-indicator.component.spec.ts

@@ -23,7 +23,7 @@ describe('Status indicator component', () => {
 
   function validateIconWrapperClass(
     statusIndicatorEl: HTMLElement,
-    indicatorType: string
+    indicatorType: string | undefined
   ): void {
     const iconWrapperEl = statusIndicatorEl.querySelector(
       '.sky-status-indicator-icon'
@@ -36,7 +36,7 @@ describe('Status indicator component', () => {
 
   function validateIcon(
     fixture: ComponentFixture<StatusIndicatorTestComponent>,
-    indicatorType: string,
+    indicatorType: string | undefined,
     expectedIcon: string
   ): void {
     let statusIndicatorEl;
@@ -109,7 +109,7 @@ describe('Status indicator component', () => {
     );
 
     // Check exact text content here to ensure it has been trimmed by the skyTrim directive.
-    expect(messageEl.textContent).toBe('Indicator text');
+    expect(messageEl?.textContent).toBe('Indicator text');
   });
 
   it('should display the expected icon', () => {
@@ -178,7 +178,7 @@ describe('Status indicator component', () => {
   describe('when modern theme', () => {
     function validateIconStack(
       fixture: ComponentFixture<StatusIndicatorTestComponent>,
-      indicatorType: string,
+      indicatorType: string | undefined,
       expectedBaseIcon: string,
       expectedTopIcon: string
     ): void {
@@ -192,8 +192,8 @@ describe('Status indicator component', () => {
 
       const iconStackEl = statusIndicatorEl.querySelector('.sky-icon-stack');
 
-      const baseIconEl = iconStackEl.querySelector('.fa-stack-2x');
-      const topIconEl = iconStackEl.querySelector('.fa-stack-1x');
+      const baseIconEl = iconStackEl?.querySelector('.fa-stack-2x');
+      const topIconEl = iconStackEl?.querySelector('.fa-stack-1x');
 
       expect(baseIconEl).toHaveCssClass(`sky-i-${expectedBaseIcon}`);
       expect(topIconEl).toHaveCssClass(`sky-i-${expectedTopIcon}`);

libs/components/indicators/src/lib/modules/status-indicator/status-indicator.component.ts

@@ -44,12 +44,12 @@ export class SkyStatusIndicatorComponent implements OnInit {
    * @required
    */
   @Input()
-  public set descriptionType(value: SkyIndicatorDescriptionType) {
+  public set descriptionType(value: SkyIndicatorDescriptionType | undefined) {
     this.#_descriptionType = value;
     this.#updateDescriptionComputed();
   }
 
-  public get descriptionType(): SkyIndicatorDescriptionType {
+  public get descriptionType(): SkyIndicatorDescriptionType | undefined {
     return this.#_descriptionType;
   }
 
@@ -58,39 +58,37 @@ export class SkyStatusIndicatorComponent implements OnInit {
    * the indicator icon when `descriptionType` is `custom`.
    */
   @Input()
-  public set customDescription(value: string) {
+  public set customDescription(value: string | undefined) {
     this.#_customDescription = value;
     this.#updateDescriptionComputed();
   }
 
-  public get customDescription(): string {
+  public get customDescription(): string | undefined {
     return this.#_customDescription;
   }
 
-  public descriptionComputed: string;
+  public descriptionComputed: string | undefined;
 
-  public baseIcon: SkyIconStackItem;
+  public baseIcon: SkyIconStackItem | undefined;
 
-  public icon: string;
+  public icon: string | undefined;
 
   public indicatorTypeOrDefault: SkyIndicatorIconType = INDICATOR_TYPE_DEFAULT;
 
-  public topIcon: SkyIconStackItem;
+  public topIcon: SkyIconStackItem | undefined;
 
   #changeDetector: ChangeDetectorRef;
+  #resourcesSvc: SkyLibResourcesService;
 
-  #resources: SkyLibResourcesService;
-
-  #_descriptionType: SkyIndicatorDescriptionType;
-
-  #_customDescription: string;
+  #_descriptionType: SkyIndicatorDescriptionType | undefined;
+  #_customDescription: string | undefined;
 
   constructor(
     changeDetector: ChangeDetectorRef,
     resources: SkyLibResourcesService
   ) {
     this.#changeDetector = changeDetector;
-    this.#resources = resources;
+    this.#resourcesSvc = resources;
   }
 
   public ngOnInit(): void {
@@ -117,7 +115,7 @@ export class SkyStatusIndicatorComponent implements OnInit {
           this.descriptionComputed = this.customDescription;
           break;
         default:
-          this.#resources
+          this.#resourcesSvc
             .getString(
               'skyux_status_indicator_sr_' +
                 this.descriptionType.replace(/-/g, '_')

libs/components/indicators/src/lib/modules/tokens/fixtures/token.component.fixture.html

@@ -0,0 +1 @@
+<sky-token [ariaLabel]="ariaLabel"></sky-token>

libs/components/indicators/src/lib/modules/tokens/fixtures/token.component.fixture.ts

@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  templateUrl: './token.component.fixture.html',
+})
+export class SkyTokenTestComponent {
+  @Input()
+  public ariaLabel: string | undefined;
+}