From 00d672f8724007577b4c29c18f94ff6dfc681c5a Mon Sep 17 00:00:00 2001 From: SaiShan Date: Tue, 25 Jun 2019 11:55:11 -0400 Subject: [PATCH] fix: cleaned up badge/label component (#946) * Cleaned up badge/label component * fixed broken test * refactor badge and label component into directives --- .../badge-label-docs.component.html | 21 +++--- .../badge-label-header.component.html | 4 +- .../badge-default-example.component.html | 8 +-- .../badge-filled-example.component.html | 8 +-- .../badge-pill-example.component.html | 8 +-- .../label-build-status-example.component.html | 8 +-- .../label-default-example.component.html | 8 +-- .../label-icon-status-example.component.html | 8 +-- ...label-status-colors-example.component.html | 8 +-- .../documentation/documentation.component.ts | 2 +- docs/app/documentation/utilities/api-files.ts | 4 +- .../badge-label/badge-label.component.html | 1 - .../src/lib/badge-label/badge-label.module.ts | 10 +-- .../lib/badge-label/badge.component.spec.ts | 34 ---------- .../lib/badge-label/badge.directive.spec.ts | 53 +++++++++++++++ ...{badge.component.ts => badge.directive.ts} | 19 +++--- .../lib/badge-label/label.component.spec.ts | 50 -------------- .../lib/badge-label/label.directive.spec.ts | 68 +++++++++++++++++++ ...{label.component.ts => label.directive.ts} | 12 ++-- 19 files changed, 185 insertions(+), 149 deletions(-) delete mode 100644 library/src/lib/badge-label/badge-label.component.html delete mode 100644 library/src/lib/badge-label/badge.component.spec.ts create mode 100644 library/src/lib/badge-label/badge.directive.spec.ts rename library/src/lib/badge-label/{badge.component.ts => badge.directive.ts} (63%) delete mode 100644 library/src/lib/badge-label/label.component.spec.ts create mode 100644 library/src/lib/badge-label/label.directive.spec.ts rename library/src/lib/badge-label/{label.component.ts => label.directive.ts} (82%) diff --git a/docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html b/docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html index 4249ed0ec7c..4ba8d8254cc 100644 --- a/docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html +++ b/docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html @@ -62,23 +62,24 @@

Status Indicator Label with sementic colors

- {{data.properties.text}} + {{data.properties.text}} +
- {{data.properties.text}} + {{data.properties.text}}
- {{data.properties.text}} - {{data.properties.text}} + {{data.properties.text}} + {{data.properties.text}}
+ \ No newline at end of file diff --git a/docs/app/documentation/component-docs/badge-label/badge-label-header/badge-label-header.component.html b/docs/app/documentation/component-docs/badge-label/badge-label-header/badge-label-header.component.html index a08931cf526..581143d4df2 100644 --- a/docs/app/documentation/component-docs/badge-label/badge-label-header/badge-label-header.component.html +++ b/docs/app/documentation/component-docs/badge-label/badge-label-header/badge-label-header.component.html @@ -1,4 +1,4 @@ -
Badge and Label
+
Status Indicators

Badges and labels are used to indicate status. Colors, generally in combination with text, are used to easily highlight @@ -11,4 +11,4 @@ - + \ No newline at end of file diff --git a/docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html index 59bc51d08c6..1fa76cecb07 100644 --- a/docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html +++ b/docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html @@ -1,4 +1,4 @@ -Default -Default -Default -Default \ No newline at end of file +Default +Default +Default +Default \ No newline at end of file diff --git a/docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html index 7588cabe8fb..7f712562760 100644 --- a/docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html +++ b/docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html @@ -1,4 +1,4 @@ -Default -Default -Default -Default \ No newline at end of file +Default +Default +Default +Default \ No newline at end of file diff --git a/docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html index dd75ade223f..587974f99ac 100644 --- a/docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html +++ b/docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html @@ -1,4 +1,4 @@ -Default -Default -Default -Default \ No newline at end of file +Default +Default +Default +Default \ No newline at end of file diff --git a/docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html index a598573c2da..a32e4f24fcc 100644 --- a/docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html +++ b/docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html @@ -1,4 +1,4 @@ -Available -Away -Busy -Appear Offline \ No newline at end of file +Available +Away +Busy +Appear Offline \ No newline at end of file diff --git a/docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html index 95369991e7c..e34af6dcf41 100644 --- a/docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html +++ b/docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html @@ -1,4 +1,4 @@ -Default -Success -Warning -Error \ No newline at end of file +Default +Success +Warning +Error \ No newline at end of file diff --git a/docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html index afbbf5f29d6..518bffaf060 100644 --- a/docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html +++ b/docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html @@ -1,4 +1,4 @@ -Custom Icon -Success -Warning -Error \ No newline at end of file +Custom Icon +Success +Warning +Error \ No newline at end of file diff --git a/docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html index 95c7ae5df4d..255d263e445 100644 --- a/docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html +++ b/docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html @@ -1,4 +1,4 @@ -Default -Success -Warning -Error \ No newline at end of file +Default +Success +Warning +Error \ No newline at end of file diff --git a/docs/app/documentation/core-helpers/documentation/documentation.component.ts b/docs/app/documentation/core-helpers/documentation/documentation.component.ts index 5ef38c598e9..6a0449e5dc6 100644 --- a/docs/app/documentation/core-helpers/documentation/documentation.component.ts +++ b/docs/app/documentation/core-helpers/documentation/documentation.component.ts @@ -17,7 +17,7 @@ export class DocumentationComponent implements OnInit { components = [ { url: 'action-bar', name: 'Action Bar' }, { url: 'alert', name: 'Alert' }, - { url: 'badgeLabel', name: 'Badge' }, + { url: 'badgeLabel', name: 'Status Indicator' }, { url: 'breadcrumb', name: 'Breadcrumb' }, { url: 'button', name: 'Button' }, { url: 'buttonGroup', name: 'Button Group' }, diff --git a/docs/app/documentation/utilities/api-files.ts b/docs/app/documentation/utilities/api-files.ts index 9b998642c93..c23861e6311 100644 --- a/docs/app/documentation/utilities/api-files.ts +++ b/docs/app/documentation/utilities/api-files.ts @@ -22,9 +22,9 @@ export const API_FILES = { 'AlertService' ], badgeLabel: [ - 'BadgeComponent', + 'BadgeDirective', 'BadgeLabelComponent', - 'LabelComponent' + 'LabelDirective' ], breadcrumb: [ 'BreadcrumbDirective', diff --git a/library/src/lib/badge-label/badge-label.component.html b/library/src/lib/badge-label/badge-label.component.html deleted file mode 100644 index d59aea5b949..00000000000 --- a/library/src/lib/badge-label/badge-label.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/library/src/lib/badge-label/badge-label.module.ts b/library/src/lib/badge-label/badge-label.module.ts index bd44d2d820d..6fb8804e088 100644 --- a/library/src/lib/badge-label/badge-label.module.ts +++ b/library/src/lib/badge-label/badge-label.module.ts @@ -1,12 +1,12 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { BadgeComponent } from './badge.component'; -import { LabelComponent } from './label.component'; +import { BadgeDirective } from './badge.directive'; +import { LabelDirective } from './label.directive'; @NgModule({ imports: [CommonModule], - exports: [BadgeComponent, LabelComponent], - declarations: [BadgeComponent, LabelComponent] + exports: [BadgeDirective, LabelDirective], + declarations: [BadgeDirective, LabelDirective] }) -export class BadgeLabelModule {} +export class BadgeLabelModule { } diff --git a/library/src/lib/badge-label/badge.component.spec.ts b/library/src/lib/badge-label/badge.component.spec.ts deleted file mode 100644 index ddce7ad5b90..00000000000 --- a/library/src/lib/badge-label/badge.component.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BadgeComponent } from './badge.component'; - -describe('BadgeComponent', () => { - let component: BadgeComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [BadgeComponent] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(BadgeComponent); - component = fixture.componentInstance; - component.status = 'someStatus'; - component.modifier = 'someModifier'; - fixture.detectChanges(); - - spyOn(component, '_setProperties').and.callThrough(); - spyOn(component, '_addClassToElement'); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - component.ngOnInit(); - expect(component._setProperties).toHaveBeenCalled(); - expect(component._addClassToElement).toHaveBeenCalledWith('fd-badge'); - expect(component._addClassToElement).toHaveBeenCalledWith('fd-badge--someStatus'); - expect(component._addClassToElement).toHaveBeenCalledWith('fd-badge--someModifier'); - }); -}); diff --git a/library/src/lib/badge-label/badge.directive.spec.ts b/library/src/lib/badge-label/badge.directive.spec.ts new file mode 100644 index 00000000000..862785ac774 --- /dev/null +++ b/library/src/lib/badge-label/badge.directive.spec.ts @@ -0,0 +1,53 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component, DebugElement } from '@angular/core'; +import { By } from '@angular/platform-browser'; +import { BadgeDirective } from './badge.directive'; + +@Component({ + template: ` + Fd-badge test + ` +}) +export class TestComponent { } + +describe('BadgeDirective', () => { + let component: TestComponent, + fixture: ComponentFixture, + debugElement: DebugElement, + element: HTMLElement; + + let directive, directiveInstance; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [BadgeDirective, TestComponent] + }); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + debugElement = fixture.debugElement; + element = debugElement.nativeElement; + + fixture.detectChanges(); + directive = debugElement.query(By.directive(BadgeDirective)); + directiveInstance = directive.injector.get(BadgeDirective); + fixture = TestBed.createComponent(TestComponent); + + spyOn(directiveInstance, '_setProperties').and.callThrough(); + spyOn(directiveInstance, '_addClassToElement'); + }); + + it('should create', () => { + expect(directive).toBeTruthy(); + + directiveInstance.status = 'someStatus'; + directiveInstance.modifier = 'someModifier'; + + directiveInstance.ngOnInit(); + expect(directiveInstance._setProperties).toHaveBeenCalled(); + expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-badge--someStatus'); + expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-badge--someModifier'); + }); +}); diff --git a/library/src/lib/badge-label/badge.component.ts b/library/src/lib/badge-label/badge.directive.ts similarity index 63% rename from library/src/lib/badge-label/badge.component.ts rename to library/src/lib/badge-label/badge.directive.ts index 8d4f3c9e473..6ac224f3951 100644 --- a/library/src/lib/badge-label/badge.component.ts +++ b/library/src/lib/badge-label/badge.directive.ts @@ -1,25 +1,26 @@ -import { Input, Component, Inject, ElementRef, ViewEncapsulation } from '@angular/core'; +import { Input, Component, Directive, Inject, ElementRef, ViewEncapsulation, HostBinding } from '@angular/core'; import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class'; /** - * Badge component, used to indicate status. + * Badge directive, used to indicate status. * Colors, generally in combination with text, are used to easily highlight the state of an object. */ -@Component({ - selector: 'fd-badge', - templateUrl: './badge-label.component.html', - encapsulation: ViewEncapsulation.None +@Directive({ + selector: '[fd-badge]' }) -export class BadgeComponent extends AbstractFdNgxClass { +export class BadgeDirective extends AbstractFdNgxClass { /** Color coded status for the badge. Options are 'success', 'warning', and 'error'. Leave empty for default badge. */ @Input() status; /** Modifier for the badge. Options are 'pill' and 'filled'. Leave empty for normal. */ @Input() modifier; + /** @hidden */ + @HostBinding('class.fd-badge') + fdBadgeClass: boolean = true; + /** @hidden */ _setProperties() { - this._addClassToElement('fd-badge'); if (this.status) { this._addClassToElement('fd-badge--' + this.status); } @@ -29,7 +30,7 @@ export class BadgeComponent extends AbstractFdNgxClass { } /** @hidden */ - constructor(@Inject(ElementRef) elementRef: ElementRef) { + constructor(private elementRef: ElementRef) { super(elementRef); } } diff --git a/library/src/lib/badge-label/label.component.spec.ts b/library/src/lib/badge-label/label.component.spec.ts deleted file mode 100644 index eb0be4d6e52..00000000000 --- a/library/src/lib/badge-label/label.component.spec.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { LabelComponent } from './label.component'; - -describe('LabelComponent', () => { - let component: LabelComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [LabelComponent] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(LabelComponent); - component = fixture.componentInstance; - - fixture.detectChanges(); - - spyOn(component, '_setProperties').and.callThrough(); - spyOn(component, '_addClassToElement'); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - it('should add status labels', () => { - component.isStatusLabel = true; - component.status = 'someStatus'; - component.statusIcon = 'someStatusIcon'; - component.icon = 'someIcon'; - component.ngOnInit(); - expect(component._setProperties).toHaveBeenCalled(); - expect(component._addClassToElement).toHaveBeenCalledWith('fd-status-label'); - expect(component._addClassToElement).toHaveBeenCalledWith('fd-status-label--someStatus'); - expect(component._addClassToElement).toHaveBeenCalledWith('fd-status-label--someStatusIcon'); - expect(component._addClassToElement).toHaveBeenCalledWith('sap-icon--someIcon'); - }); - - it('should add non-status labels', () => { - component.isStatusLabel = false; - component.status = 'someStatus'; - component.ngOnInit(); - expect(component._setProperties).toHaveBeenCalled(); - expect(component._addClassToElement).toHaveBeenCalledWith('fd-label'); - expect(component._addClassToElement).toHaveBeenCalledWith('fd-label--someStatus'); - }); -}); diff --git a/library/src/lib/badge-label/label.directive.spec.ts b/library/src/lib/badge-label/label.directive.spec.ts new file mode 100644 index 00000000000..f16ecdcee2f --- /dev/null +++ b/library/src/lib/badge-label/label.directive.spec.ts @@ -0,0 +1,68 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component, DebugElement } from '@angular/core'; +import { By } from '@angular/platform-browser'; +import { LabelDirective } from './label.directive'; + +@Component({ + template: ` + Fd-badge test + ` +}) + +export class TestComponent { } + +describe('LabelDirective', () => { + let component: TestComponent, + fixture: ComponentFixture, + debugElement: DebugElement, + element: HTMLElement; + + let directive, directiveInstance; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [LabelDirective, TestComponent] + }); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + debugElement = fixture.debugElement; + element = debugElement.nativeElement; + + fixture.detectChanges(); + directive = debugElement.query(By.directive(LabelDirective)); + directiveInstance = directive.injector.get(LabelDirective); + + + spyOn(directiveInstance, '_setProperties').and.callThrough(); + spyOn(directiveInstance, '_addClassToElement'); + }); + + it('should create', () => { + expect(directive).toBeTruthy(); + }); + + it('should add status labels', () => { + directiveInstance.isStatusLabel = true; + directiveInstance.status = 'someStatus'; + directiveInstance.statusIcon = 'someStatusIcon'; + directiveInstance.icon = 'someIcon'; + directiveInstance.ngOnInit(); + expect(directiveInstance._setProperties).toHaveBeenCalled(); + expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-status-label'); + expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-status-label--someStatus'); + expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-status-label--someStatusIcon'); + expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('sap-icon--someIcon'); + }); + + it('should add non-status labels', () => { + directiveInstance.isStatusLabel = false; + directiveInstance.status = 'someStatus'; + directiveInstance.ngOnInit(); + expect(directiveInstance._setProperties).toHaveBeenCalled(); + expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-label'); + expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-label--someStatus'); + }); +}); diff --git a/library/src/lib/badge-label/label.component.ts b/library/src/lib/badge-label/label.directive.ts similarity index 82% rename from library/src/lib/badge-label/label.component.ts rename to library/src/lib/badge-label/label.directive.ts index cdf457c2e00..7dff5510b74 100644 --- a/library/src/lib/badge-label/label.component.ts +++ b/library/src/lib/badge-label/label.directive.ts @@ -1,16 +1,14 @@ -import { Component, ElementRef, Inject, Input, ViewEncapsulation } from '@angular/core'; +import { Component, Directive, ElementRef, Inject, Input, ViewEncapsulation, HostBinding } from '@angular/core'; import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class'; /** * Badge component, used to indicate status. * Colors, generally in combination with text, are used to easily highlight the state of an object. */ -@Component({ - selector: 'fd-label', - templateUrl: './badge-label.component.html', - encapsulation: ViewEncapsulation.None +@Directive({ + selector: '[fd-label]' }) -export class LabelComponent extends AbstractFdNgxClass { +export class LabelDirective extends AbstractFdNgxClass { /** Color coded status for the label. Options are 'success', 'warning', and 'error'. Leave empty for default label. */ @Input() status: string = ''; @@ -45,7 +43,7 @@ export class LabelComponent extends AbstractFdNgxClass { } /** @hidden */ - constructor(@Inject(ElementRef) elementRef: ElementRef) { + constructor(private elementRef: ElementRef) { super(elementRef); } }