feat(small-stage): add default config to expert module (#329)

allianz · Jul 5, 2021 · d9f68d3 · d9f68d3
1 parent 4cd8c55
commit d9f68d3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/projects/ng-aquila/src/config/nx-expert.module.ts b/projects/ng-aquila/src/config/nx-expert.module.ts
@@ -5,6 +5,7 @@ import { DatepickerDefaultOptions, DATEPICKER_DEFAULT_OPTIONS } from '@aposin/ng
 import { TabGroupDefaultOptions, TabNavBarDefaultOptions, TAB_GROUP_DEFAULT_OPTIONS, TAB_NAV_BAR_DEFAULT_OPTIONS } from '@aposin/ng-aquila/tabs';
 import { ComparisonTableDefaultOptions, COMPARISON_TABLE_DEFAULT_OPTIONS } from '@aposin/ng-aquila/comparison-table';
 import { SelectableCardDefaultOptions, SELECTABLE_CARD_DEFAULT_OPTIONS } from '@aposin/ng-aquila/card';
+import { SmallStageDefaultOptions, SMALL_STAGE_DEFAULT_OPTIONS } from '@aposin/ng-aquila/small-stage';
 
 // expert presets
 const comparisonTableExpertOptions: ComparisonTableDefaultOptions = { useFullRowForExpandableArea: true };
@@ -18,6 +19,7 @@ const datepickerExpertOptions: DatepickerDefaultOptions = { toggleIconTabindex:
 const tabGroupOptions: TabGroupDefaultOptions = { appearance: 'expert'};
 const tabNavBarOptions: TabNavBarDefaultOptions = { appearance: 'expert' };
 const selectableCardOptions: SelectableCardDefaultOptions = { appearance: 'expert' };
+const smallStageOptions: SmallStageDefaultOptions = { appearance: 'expert' };
 
 @NgModule({
   providers: [
@@ -28,7 +30,8 @@ const selectableCardOptions: SelectableCardDefaultOptions = { appearance: 'exper
     { provide: ERROR_DEFAULT_OPTIONS, useValue: errorExpertOptions },
     { provide: TAB_GROUP_DEFAULT_OPTIONS, useValue: tabGroupOptions },
     { provide: TAB_NAV_BAR_DEFAULT_OPTIONS, useValue: tabNavBarOptions },
-    { provide: SELECTABLE_CARD_DEFAULT_OPTIONS, useValue: selectableCardOptions }
+    { provide: SELECTABLE_CARD_DEFAULT_OPTIONS, useValue: selectableCardOptions },
+    { provide: SMALL_STAGE_DEFAULT_OPTIONS, useValue: smallStageOptions }
   ]
 })
 

diff --git a/projects/ng-aquila/src/config/nx-expert.spec.ts b/projects/ng-aquila/src/config/nx-expert.spec.ts
@@ -16,6 +16,7 @@ import { NxDatepickerToggleComponent } from '@aposin/ng-aquila/datefield';
 import { NxTabGroupComponent, NxTabNavBarComponent, NxTabsModule } from '@aposin/ng-aquila/tabs';
 import { NxComparisonTableModule, NxComparisonTableRowGroupDirective } from '@aposin/ng-aquila/comparison-table';
 import { NxCardModule, NxSelectableCardComponent } from '@aposin/ng-aquila/card';
+import { NxSmallStageComponent, NxSmallStageModule } from '@aposin/ng-aquila/small-stage';
 
 @Directive()
 abstract class PresetTest {
@@ -26,6 +27,7 @@ abstract class PresetTest {
   @ViewChild(NxTabGroupComponent) tabGroupInstance: NxTabGroupComponent;
   @ViewChild(NxTabNavBarComponent) tabNavBarInstance: NxTabNavBarComponent;
   @ViewChild(NxSelectableCardComponent) selectableCardInstance: NxSelectableCardComponent;
+  @ViewChild(NxSmallStageComponent) smallStageInstance: NxSmallStageComponent;
 }
 
 describe('NxExpertPreset', () => {
@@ -39,6 +41,7 @@ describe('NxExpertPreset', () => {
   let tabGroupInstance: NxTabGroupComponent;
   let tabNavBarInstance: NxTabNavBarComponent;
   let selectableCardInstance: NxSelectableCardComponent;
+  let smallStageInstance: NxSmallStageComponent;
 
   function createTestComponent(component: Type<PresetTest>) {
     fixture = TestBed.createComponent(component);
@@ -52,6 +55,7 @@ describe('NxExpertPreset', () => {
     tabGroupInstance = testInstance.tabGroupInstance;
     tabNavBarInstance = testInstance.tabNavBarInstance;
     selectableCardInstance = testInstance.selectableCardInstance;
+    smallStageInstance = testInstance.smallStageInstance;
   }
 
   beforeEach(
@@ -66,7 +70,8 @@ describe('NxExpertPreset', () => {
           NxLabelModule,
           NxMomentDateModule,
           NxTabsModule,
-          NxCardModule
+          NxCardModule,
+          NxSmallStageModule
         ],
         declarations: [
           DatepickerPresetComponent,
@@ -76,7 +81,8 @@ describe('NxExpertPreset', () => {
           TabGroupPresetComponent,
           TabNavBarPresetComponent,
           ComparisonTablePresetComponent,
-          SelectableCardPresetComponent
+          SelectableCardPresetComponent,
+          SmallStagePresetComponent
         ]
       }).compileComponents();
     })
@@ -140,6 +146,13 @@ describe('NxExpertPreset', () => {
       expect(selectableCardInstance.appearance).toBe('expert');
     });
   });
+
+  describe('small stage presets', () => {
+    it('should set appearance to expert', () => {
+      createTestComponent(SmallStagePresetComponent);
+      expect(smallStageInstance.appearance).toBe('expert');
+    });
+  });
 });
 
 @Component({
@@ -248,3 +261,10 @@ class ComparisonTablePresetComponent extends PresetTest {
   `
 })
 class SelectableCardPresetComponent extends PresetTest {}
+
+@Component({
+  template: `
+    <nx-small-stage></nx-small-stage>
+  `
+})
+class SmallStagePresetComponent extends PresetTest {}
diff --git a/projects/ng-aquila/src/small-stage/small-stage.component.ts b/projects/ng-aquila/src/small-stage/small-stage.component.ts
@@ -1,11 +1,25 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, HostBinding, InjectionToken, Optional, Inject } from '@angular/core';
 
 /**
  * Appearance options for the small stage component.
  */
 export type NxSmallStageAppearance = 'default' | 'expert';
 
+/**
+ * Represents the default options for the small stage.
+ * It can be configured using the `NX_SMALL_STAGE_DEFAULT_OPTIONS` injection token.
+ */
+export interface SmallStageDefaultOptions {
+  /**
+   * Sets the default appearance. (optional)
+   */
+  appearance?: NxSmallStageAppearance;
+}
+
+export const SMALL_STAGE_DEFAULT_OPTIONS =
+  new InjectionToken<SmallStageDefaultOptions>('SMALL_STAGE_DEFAULT_OPTIONS');
+
 @Component({
   selector: 'nx-small-stage',
   templateUrl: './small-stage.component.html',
@@ -41,4 +55,10 @@ export class NxSmallStageComponent {
   get _isExpert() {
     return this.appearance === 'expert';
   }
+
+  constructor(@Optional() @Inject(SMALL_STAGE_DEFAULT_OPTIONS) defaultOptions: SmallStageDefaultOptions) {
+    if (defaultOptions && defaultOptions.appearance) {
+      this.appearance = defaultOptions.appearance;
+    }
+  }
 }