fix: cleaned up badge/label component (#946)

* Cleaned up badge/label component

* fixed broken test

* refactor badge and label component into directives

docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html

@@ -62,23 +62,24 @@ <h2>Status Indicator Label with sementic colors</h2>
 
 <playground [schema]="schema" [schemaInitialValues]="data" (onFormChanges)="onSchemaValues($event)">
     <div *ngIf="data.properties.type === 'badge'">
-        <fd-badge [status]="data.properties.status"
-                  [modifier]="data.properties.modifier">{{data.properties.text}}</fd-badge>
+        <span fd-badge [status]="data.properties.status" [modifier]="data.properties.modifier">{{data.properties.text}}
+        </span>
     </div>
     <div *ngIf="data.properties.type === 'label'">
-        <fd-label [status]="data.properties.status">{{data.properties.text}}</fd-label>
+        <span fd-label [status]="data.properties.status">{{data.properties.text}}</span>
     </div>
     <div *ngIf="data.properties.type === 'status label'">
-        <fd-label *ngIf="!data.properties.icon" [isStatusLabel]="true" [status]="data.properties.status"
-                  [statusIcon]="data.properties.statusIcon">{{data.properties.text}}</fd-label>
-        <fd-label *ngIf="data.properties.icon" [isStatusLabel]="true" [status]="data.properties.status"
-                  [icon]="data.properties.icon">{{data.properties.text}}</fd-label>
+        <span fd-label *ngIf="!data.properties.icon" [isStatusLabel]="true" [status]="data.properties.status"
+            [statusIcon]="data.properties.statusIcon">{{data.properties.text}}</span>
+        <span fd-label *ngIf="data.properties.icon" [isStatusLabel]="true" [status]="data.properties.status"
+            [icon]="data.properties.icon">{{data.properties.text}}</span>
     </div>
 </playground>
 
 <style>
-    ::ng-deep fd-badge,
-    ::ng-deep fd-label {
+    ::ng-deep .fd-badge,
+    ::ng-deep .fd-label,
+    ::ng-deep .fd-status-label {
         margin-right: 20px;
     }
-</style>
+</style>

docs/app/documentation/component-docs/badge-label/badge-label-header/badge-label-header.component.html

@@ -1,4 +1,4 @@
-<header>Badge and Label</header>
+<header>Status Indicators</header>
 <description>
     <p>Badges and labels are used to indicate status. Colors, generally in combination with text, are used to easily
         highlight
@@ -11,4 +11,4 @@
 <import module="BadgeLabelModule" path="fundamental-ngx"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html

@@ -1,4 +1,4 @@
-<fd-badge>Default</fd-badge>
-<fd-badge [status]="'success'">Default</fd-badge>
-<fd-badge [status]="'warning'">Default</fd-badge>
-<fd-badge [status]="'error'">Default</fd-badge>
+<span fd-badge>Default</span>
+<span fd-badge [status]="'success'">Default</span>
+<span fd-badge [status]="'warning'">Default</span>
+<span fd-badge [status]="'error'">Default</span>

docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html

@@ -1,4 +1,4 @@
-<fd-badge [modifier]="'filled'">Default</fd-badge>
-<fd-badge [status]="'success'" [modifier]="'filled'">Default</fd-badge>
-<fd-badge [status]="'warning'" [modifier]="'filled'">Default</fd-badge>
-<fd-badge [status]="'error'" [modifier]="'filled'">Default</fd-badge>
+<span fd-badge [modifier]="'filled'">Default</span>
+<span fd-badge [status]="'success'" [modifier]="'filled'">Default</span>
+<span fd-badge [status]="'warning'" [modifier]="'filled'">Default</span>
+<span fd-badge [status]="'error'" [modifier]="'filled'">Default</span>

docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html

@@ -1,4 +1,4 @@
-<fd-badge [modifier]="'pill'">Default</fd-badge>
-<fd-badge [status]="'success'" [modifier]="'pill'">Default</fd-badge>
-<fd-badge [status]="'warning'" [modifier]="'pill'">Default</fd-badge>
-<fd-badge [status]="'error'" [modifier]="'pill'">Default</fd-badge>
+<span fd-badge [modifier]="'pill'">Default</span>
+<span fd-badge [status]="'success'" [modifier]="'pill'">Default</span>
+<span fd-badge [status]="'warning'" [modifier]="'pill'">Default</span>
+<span fd-badge [status]="'error'" [modifier]="'pill'">Default</span>

docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html

@@ -1,4 +1,4 @@
-<fd-label [isStatusLabel]="true" [statusIcon]="'available'">Available</fd-label>
-<fd-label [isStatusLabel]="true" [statusIcon]="'away'">Away</fd-label>
-<fd-label [isStatusLabel]="true" [statusIcon]="'busy'">Busy</fd-label>
-<fd-label [isStatusLabel]="true" [statusIcon]="'offline'">Appear Offline</fd-label>
+<span fd-label [isStatusLabel]="true" [statusIcon]="'available'">Available</span>
+<span fd-label [isStatusLabel]="true" [statusIcon]="'away'">Away</span>
+<span fd-label [isStatusLabel]="true" [statusIcon]="'busy'">Busy</span>
+<span fd-label [isStatusLabel]="true" [statusIcon]="'offline'">Appear Offline</span>

docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html

@@ -1,4 +1,4 @@
-<fd-label>Default</fd-label>
-<fd-label [status]="'success'">Success</fd-label>
-<fd-label [status]="'warning'">Warning</fd-label>
-<fd-label [status]="'error'">Error</fd-label>
+<span fd-label>Default</span>
+<span fd-label [status]="'success'">Success</span>
+<span fd-label [status]="'warning'">Warning</span>
+<span fd-label [status]="'error'">Error</span>

docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html

@@ -1,4 +1,4 @@
-<fd-label [isStatusLabel]="true" [icon]="'history'">Custom Icon</fd-label>
-<fd-label [isStatusLabel]="true" [icon]="'message-success'">Success</fd-label>
-<fd-label [isStatusLabel]="true" [icon]="'message-warning'">Warning</fd-label>
-<fd-label [isStatusLabel]="true" [icon]="'message-error'">Error</fd-label>
+<span fd-label [isStatusLabel]="true" [icon]="'history'">Custom Icon</span>
+<span fd-label [isStatusLabel]="true" [icon]="'message-success'">Success</span>
+<span fd-label [isStatusLabel]="true" [icon]="'message-warning'">Warning</span>
+<span fd-label [isStatusLabel]="true" [icon]="'message-error'">Error</span>

docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html

@@ -1,4 +1,4 @@
-<fd-label [isStatusLabel]="true">Default</fd-label>
-<fd-label [isStatusLabel]="true" [status]="'success'">Success</fd-label>
-<fd-label [isStatusLabel]="true" [status]="'warning'">Warning</fd-label>
-<fd-label [isStatusLabel]="true" [status]="'error'">Error</fd-label>
+<span fd-label [isStatusLabel]="true">Default</span>
+<span fd-label [isStatusLabel]="true" [status]="'success'">Success</span>
+<span fd-label [isStatusLabel]="true" [status]="'warning'">Warning</span>
+<span fd-label [isStatusLabel]="true" [status]="'error'">Error</span>

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' },

docs/app/documentation/utilities/api-files.ts

@@ -22,9 +22,9 @@ export const API_FILES = {
         'AlertService'
     ],
     badgeLabel: [
-        'BadgeComponent',
+        'BadgeDirective',
         'BadgeLabelComponent',
-        'LabelComponent'
+        'LabelDirective'
     ],
     breadcrumb: [
         'BreadcrumbDirective',

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 { }

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: `
+        <span fd-badge>Fd-badge test</span>
+    `
+})
+export class TestComponent { }
+
+describe('BadgeDirective', () => {
+    let component: TestComponent,
+        fixture: ComponentFixture<TestComponent>,
+        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');
+    });
+});

library/src/lib/badge-label/badge.component.ts → 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);
     }
 }