feat(Chip): support chip as badge

ISSUES CLOSED: #1709

demo/app/components/chip/chip.component.html

@@ -1,4 +1,6 @@
 <ts-card tsVerticalSpacing>
+  <h3 tsCardTitle tsVerticalSpacing>Chip</h3>
+
   <div tsVerticalSpacing>
     <label>
       Orientation:
@@ -37,3 +39,17 @@
   </ts-chip-collection>
 </ts-card>
 
+
+<ts-card>
+  <h3 tsCardTitle tsVerticalSpacing>Badge</h3>
+
+  <div tsVerticalSpacing="small--1">
+    <ts-chip tsChipBadge>One</ts-chip>
+  </div>
+  <div tsVerticalSpacing="small--1">
+    <ts-chip tsChipBadge theme="accent">Two</ts-chip>
+  </div>
+  <div tsVerticalSpacing="small--1">
+    <ts-chip tsChipBadge theme="warn">Three</ts-chip>
+  </div>
+</ts-card>

terminus-ui/chip/src/chip-badge.directive.ts

@@ -0,0 +1,26 @@
+import {
+  Directive,
+  ElementRef,
+  Host,
+  OnInit,
+} from '@angular/core';
+
+import { TsChipComponent } from './chip.component';
+
+
+@Directive({ selector: '[tsChipBadge]' })
+export class TsChipBadgeDirective implements OnInit {
+
+  constructor(
+    private elementRef: ElementRef,
+    @Host() private parent: TsChipComponent,
+  ) {}
+
+  public ngOnInit(): void {
+    this.parent.isFocusable = false;
+    this.parent.isRemovable = false;
+    this.parent.isSelectable = false;
+    this.elementRef.nativeElement.classList.add('ts-chip--badge');
+  }
+
+}

terminus-ui/chip/src/chip-collection.component.md

@@ -14,6 +14,7 @@ NOTE: This component does not support a `FormControl`; it is a simple collection
   - [Orientation](#orientation)
   - [Removable](#removable)
   - [Selectable](#selectable)
+- [Badge](#badge)
 - [Events](#events)
   - [Collection events](#collection-events)
   - [Chip events](#chip-events)
@@ -144,6 +145,16 @@ The ability to select chips can be disabled at the collection or chip level.
 </ts-chip-collection>
 ```
 
+## Badge
+
+A chip can be used as a badge by placing the `tsChipBadge` directive on a standalone chip:
+
+```html
+<ts-chip tsChipBadge>My badge!</ts-chip>
+```
+
+This will disable the ability to remove, select or focus the chip.
+
 ## Events
 
 Since this component does not directly manage the data, we rely on emitting events to alert the consumer as to what needs to happen.

terminus-ui/chip/src/chip.component.scss

@@ -17,13 +17,16 @@
 
   &:focus,
   &:hover {
-    .c-chip {
-      --chip-backgroundColor: var(--chip-backgroundColor-hover);
-      transition: opacity 200ms cubic-bezier(.35, 0, .25, 1);
+    &:not(.ts-chip--badge) {
+      .c-chip {
+        --chip-backgroundColor: var(--chip-backgroundColor-hover);
+        transition: opacity 200ms cubic-bezier(.35, 0, .25, 1);
+      }
     }
   }
 
-  &.ts-chip--selected {
+  &.ts-chip--selected,
+  &.ts-chip--badge {
     color: color(pure);
     $themes: primary accent warn;
 
@@ -40,6 +43,11 @@
     }
   }
 
+  &.ts-chip--badge {
+    .c-chip {
+      --chip-color: color(pure);
+    }
+  }
 
   .c-chip {
     @include typography;

terminus-ui/chip/src/chip.component.spec.ts

@@ -13,6 +13,8 @@ import {
   dispatchFakeEvent,
 } from '@terminus/ngx-tools/testing';
 import * as testComponents from '@terminus/ui/chip/testing';
+// eslint-disable-next-line no-duplicate-imports
+import { TsChipTestComponent } from '@terminus/ui/chip/testing';
 
 import {
   TsChipComponent,
@@ -22,7 +24,7 @@ import {
 
 
 describe('Chips', () => {
-  let fixture: ComponentFixture<any>;
+  let fixture: ComponentFixture<TsChipTestComponent>;
   let chipDebugElement: DebugElement;
   let chipNativeElement: HTMLElement;
   let chipInstance: TsChipComponent;
@@ -37,7 +39,7 @@ describe('Chips', () => {
 
   describe('TsChip', () => {
     let testComponent;
-    function setup(component = testComponents.SingleChip) {
+    function setup(component: TsChipTestComponent = testComponents.SingleChip) {
       fixture = createComponent(component);
       fixture.detectChanges();
 
@@ -317,6 +319,19 @@ describe('Chips', () => {
 
     });
 
+    describe(`tsChipBadge`, () => {
+
+      test(`should disable interactions`, () => {
+        setup(testComponents.ChipBadge);
+
+        expect(chipInstance.isFocusable).toEqual(false);
+        expect(chipInstance.isSelectable).toEqual(false);
+        expect(chipInstance.isRemovable).toEqual(false);
+        expect(chipNativeElement.classList).toContain('ts-chip--badge');
+      });
+
+    });
+
   });
 
 });

terminus-ui/chip/src/chip.component.ts

@@ -183,25 +183,25 @@ export class TsChipComponent implements FocusableOption, OnDestroy {
   public get id(): string {
     return this._id;
   }
-  protected _id: string = this.uid;
+  private _id: string = this.uid;
 
   /**
    * Define if the chip should be disabled
    */
   @Input()
   public isDisabled = false;
 
+  /**
+   * Define if the chip allows focus
+   */
+  @Input()
+  public isFocusable = true;
+
   /**
    * Define if the chip is removable
    */
   @Input()
-  public set isRemovable(value: boolean) {
-    this._removable = value;
-  }
-  public get isRemovable(): boolean {
-    return this._removable;
-  }
-  protected _removable = true;
+  public isRemovable = true;
 
   /**
    * Whether or not the chip is selectable.
@@ -215,7 +215,7 @@ export class TsChipComponent implements FocusableOption, OnDestroy {
   public get isSelectable(): boolean {
     return this._selectable && this.chipCollectionSelectable;
   }
-  protected _selectable = true;
+  private _selectable = true;
 
   /**
    * Define if the chip is selected
@@ -251,7 +251,7 @@ export class TsChipComponent implements FocusableOption, OnDestroy {
 
     return this._value;
   }
-  protected _value;
+  private _value;
 
   /**
    * Define the theme for a chip
@@ -361,7 +361,7 @@ export class TsChipComponent implements FocusableOption, OnDestroy {
    */
   public focus(): void {
     // istanbul ignore else
-    if (!this.hasFocus) {
+    if (!this.hasFocus && this.isFocusable) {
       this.hasFocus = true;
       this.elementRef.nativeElement.focus();
       this.onFocus.next(new TsChipEvent(this));

terminus-ui/chip/src/chip.module.ts

@@ -2,27 +2,27 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatRippleModule } from '@angular/material/core';
 import { TsIconModule } from '@terminus/ui/icon';
+import { TsChipBadgeDirective } from './chip-badge.directive';
 
 import { TsChipCollectionComponent } from './chip-collection.component';
 import { TsChipComponent } from './chip.component';
 
 export * from './chip.component';
 export * from './chip-collection.component';
 
+const EXPORTED_DECLARATIONS = [
+  TsChipBadgeDirective,
+  TsChipComponent,
+  TsChipCollectionComponent,
+];
 
 @NgModule({
   imports: [
     CommonModule,
     MatRippleModule,
     TsIconModule,
   ],
-  declarations: [
-    TsChipComponent,
-    TsChipCollectionComponent,
-  ],
-  exports: [
-    TsChipComponent,
-    TsChipCollectionComponent,
-  ],
+  declarations: EXPORTED_DECLARATIONS,
+  exports: EXPORTED_DECLARATIONS,
 })
 export class TsChipModule { }

terminus-ui/chip/testing/src/test-components.ts

@@ -17,6 +17,7 @@ import {
 } from '@terminus/ui/chip';
 import { TsOptionModule } from '@terminus/ui/option';
 
+
 @Component({
   template: `
     <ts-chip-collection>
@@ -237,6 +238,31 @@ export class ChipNoValue {
   public options = ['banana'];
 }
 
+@Component({
+  template: `
+    <ts-chip tsChipBadge>foo</ts-chip>
+  `,
+})
+export class ChipBadge {}
+
+
+export type TsChipTestComponent
+  = Autocomplete
+  | RegularChip
+  | ChipBadge
+  | ChipNoValue
+  | DisabledChip
+  | Events
+  | Id
+  | OneChip
+  | NoChip
+  | NotAllowMultipleSelections
+  | NoValueChip
+  | ReadonlyChip
+  | SingleChip
+  | StandardChipCollection
+  | Tabindex
+;
 
 /**
  * NOTE: Currently all exported Components must belong to a module. So this is our useless module to avoid the build error.
@@ -253,6 +279,7 @@ export class ChipNoValue {
   declarations: [
     Autocomplete,
     RegularChip,
+    ChipBadge,
     ChipNoValue,
     DisabledChip,
     Events,