Allow for multiple classes

skyux-spa-visual-tests/src/app/icon/icon-visual.component.html

@@ -1,12 +1,33 @@
-<div id="screenshot-icon">
-  <sky-icon icon="circle"></sky-icon>
-  <sky-icon icon="trash"></sky-icon>
-  <sky-icon icon="bars"></sky-icon>
-  <sky-icon icon="cog"></sky-icon>
-  <sky-icon icon="database"></sky-icon>
-  <sky-icon icon="users"></sky-icon>
-  <sky-icon icon="user"></sky-icon>
-  <sky-icon icon="comment"></sky-icon>
-  <sky-icon icon="chevron-down"></sky-icon>
-  <sky-icon icon="chevron-up"></sky-icon>
+<div 
+  id="screenshot-icon">
+  <sky-icon
+    icon="circle">
+  </sky-icon>
+  <sky-icon
+    icon="trash">
+  </sky-icon>
+  <sky-icon
+    icon="bars">
+  </sky-icon>
+  <sky-icon
+    icon="cog">
+  </sky-icon>
+  <sky-icon
+    icon="database">
+  </sky-icon>
+  <sky-icon
+    icon="users">
+  </sky-icon>
+  <sky-icon
+    icon="user">
+  </sky-icon>
+  <sky-icon
+    icon="comment">
+  </sky-icon>
+  <sky-icon
+    icon="chevron-down">
+  </sky-icon>
+  <sky-icon
+    icon="chevron-up">
+  </sky-icon>
 </div>

src/demos/icon/icon-demo.component.html

@@ -1,10 +1,41 @@
-<sky-icon icon="spinner" size="3x" fixedWidth="true"></sky-icon>
-<sky-icon icon="trash" size="sm"></sky-icon>
-<sky-icon icon="bars" size="lg"></sky-icon>
-<sky-icon icon="cog" size="2x"></sky-icon>
-<sky-icon icon="database" size="3x"></sky-icon>
-<sky-icon icon="users" size="4x"></sky-icon>
-<sky-icon icon="user" size="5x"></sky-icon>
-<sky-icon icon="comment" size="xs"></sky-icon>
-<sky-icon icon="chevron-down" size="sm"></sky-icon>
-<sky-icon icon="chevron-up" size="5x"></sky-icon>
+<sky-icon 
+  icon="bars"
+  size="lg">
+</sky-icon>
+<sky-icon 
+  icon="chevron-down"
+  size="sm">
+</sky-icon>
+<sky-icon 
+  icon="chevron-up"
+  size="5x">
+</sky-icon>
+<sky-icon 
+  icon="cog"
+  size="2x">
+</sky-icon>
+<sky-icon 
+  icon="comment"
+  size="xs">
+</sky-icon>
+<sky-icon 
+  icon="database"
+  size="3x">
+</sky-icon>
+<sky-icon 
+  icon="spinner"
+  size="3x"
+  fixedWidth="true">
+</sky-icon>
+<sky-icon 
+  icon="trash"
+  size="sm">
+</sky-icon>
+<sky-icon 
+  icon="users"
+  size="4x">
+</sky-icon>
+<sky-icon 
+  icon="user"
+  size="5x">
+</sky-icon>

src/modules/icon/fixtures/icon.component.fixture.html

@@ -1 +1,5 @@
-<sky-icon [icon]="icon" [size]="size" [fixedWidth]="fixedWidth"></sky-icon>
+<sky-icon
+  [icon]="icon"
+  [size]="size"
+  [fixedWidth]="fixedWidth">
+</sky-icon>

src/modules/icon/icon.component.html

@@ -1,4 +1,5 @@
-<i *ngIf="icon"
+<i
+  *ngIf="icon"
   aria-hidden="true"
   class="fa sky-icon"
   [ngClass]="classList()"

src/modules/icon/icon.component.spec.ts

@@ -15,7 +15,7 @@ import {
   expect
 } from '@blackbaud/skyux-builder/runtime/testing/browser';
 
-describe('Icon component', () => {
+fdescribe('Icon component', () => {
   let fixture: ComponentFixture<IconTestComponent>;
   let cmp: IconTestComponent;
   let element: HTMLElement;
@@ -44,15 +44,25 @@ describe('Icon component', () => {
     expect(element.querySelector('.sky-icon').classList.length).toBe(4);
   });
 
-  it('should display something other than circle', () => {
+  it('should display a different icon with a different size and a fixedWidth', () => {
     cmp.icon = 'broom';
-    cmp.size = '';
+    cmp.size = '5x';
     cmp.fixedWidth = true;
     fixture.detectChanges();
     expect(cmp.icon).toBe('broom');
     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(4);
+    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', () => {
+    cmp.icon = 'spinner';
+    cmp.size = undefined;
+    cmp.fixedWidth = undefined;
+    fixture.detectChanges();
+    expect(element.querySelector('.sky-icon')).toHaveCssClass('fa-spinner');
+    expect(element.querySelector('.sky-icon').classList.length).toBe(3);
+  });
 });

src/modules/icon/icon.component.ts

@@ -17,15 +17,15 @@ export class SkyIconComponent {
   public size: string;
 
   @Input()
-  public fixedWidth: boolean = true;
+  public fixedWidth: boolean;
 
   public classList(): string[] {
     let list: string[] = [];
     list.push('fa-' + this.icon);
-    if (this.size !== '') {
+    if (this.size) {
       list.push('fa-' + this.size);
     }
-    if (this.fixedWidth === true) {
+    if (this.fixedWidth) {
       list.push('fa-fw');
     }
     return list;