Radio and checkbox icon buttons

package.json

@@ -40,7 +40,7 @@
     "wdio": "wdio"
   },
   "dependencies": {
-    "@skyux/theme": "3.0.0",
+    "@skyux/theme": "3.1.0",
     "dragula": "3.7.2",
     "intl": "1.2.5",
     "microedge-rxstate": "2.0.2",

skyux-spa-visual-tests/package.json

@@ -21,8 +21,9 @@
   "devDependencies": {
     "@blackbaud/skyux": "latest",
     "@blackbaud/skyux-builder": "1.13.0",
-    "pix-diff": "2.0.0",
-    "browserstack-local": "1.3.0"
+    "@skyux/theme": "3.1.0",
+    "browserstack-local": "1.3.0",
+    "pix-diff": "2.0.0"
   },
   "peerDependencies": {
     "http-server": "^0.10.0",

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

@@ -6,3 +6,63 @@
     <sky-checkbox-label>Unchecked Checkbox</sky-checkbox-label>
   </sky-checkbox>
 </div>
+<div id="screenshot-icon-checkbox">
+  <sky-checkbox
+    icon="bold"
+    label="bold"
+    [checked]="true">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="bold"
+    label="bold"
+    [checked]="false">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="umbrella"
+    checkboxType="info"
+    label="umbrella"
+    [checked]="true">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="umbrella"
+    checkboxType="info"
+    label="umbrella"
+    [checked]="false">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="star"
+    checkboxType="success"
+    label="favorite"
+    [checked]="true">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="star"
+    checkboxType="success"
+    label="favorite"
+    [checked]="false">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="exclamation-triangle"
+    checkboxType="warning"
+    label="careful"
+    [checked]="true">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="exclamation-triangle"
+    checkboxType="warning"
+    label="careful"
+    [checked]="false">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="ban"
+    checkboxType="danger"
+    label="wrong"
+    [checked]="true">
+  </sky-checkbox>
+  <sky-checkbox
+    icon="ban"
+    checkboxType="danger"
+    label="wrong"
+    [checked]="false">
+  </sky-checkbox>
+</div>

skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts

@@ -10,6 +10,15 @@ describe('Checkbox', () => {
         selector: '#screenshot-checkbox'
       });
     });
+  });
 
+  it('should match previous icon checkbox screenshot', () => {
+    return SkyVisualTest.setupTest('checkbox')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'checkbox-icon',
+        selector: '#screenshot-icon-checkbox'
+      });
+    });
   });
 });

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

@@ -9,10 +9,11 @@
     <div>
       <sky-radio
         name="radiotest"
+        disabled="true"
         [ngModel]="selectedValue"
+        [value]="valueGuy"
         (ngModelChange)="selectedValue = $event"
-        disabled="true"
-        [value]="valueGuy">
+      >
         <sky-radio-label>Option 2</sky-radio-label>
       </sky-radio>
     </div>
@@ -23,4 +24,43 @@
       </sky-radio>
     </div>
   </div>
+
+  <div id="screenshot-icon-radio">
+    <ul class="sky-list-unstyled">
+      <li>
+        <sky-radio
+          icon="thumbs-o-up"
+          label="I like it"
+          name="iconradiotest"
+          value="1"
+          [(ngModel)]="iconSelectedValue"
+          #cb="ngModel"
+        >
+        </sky-radio>
+      </li>
+      <li>
+        <sky-radio
+          disabled="true"
+          icon="balance-scale"
+          label="meh"
+          name="iconradiotest"
+          [ngModel]="iconSelectedValue"
+          [value]="valueGuy"
+          (ngModelChange)="iconSelectedValue = $event"
+        >
+        </sky-radio>
+      </li>
+      <li>
+        <sky-radio
+          icon="thumbs-o-down"
+          label="I hate it"
+          name="iconradiotest"
+          value="3"
+          [ngModel]="iconSelectedValue"
+          (ngModelChange)="iconSelectedValue = $event"
+        >
+        </sky-radio>
+      </li>
+    </ul>
+  </div>
 </form>

skyux-spa-visual-tests/src/app/radio/radio-visual.component.ts

@@ -6,5 +6,6 @@ import { Component } from '@angular/core';
 })
 export class RadioVisualComponent {
   public selectedValue = '3';
+  public iconSelectedValue = '2';
   public valueGuy = '2';
 }

skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts

@@ -10,6 +10,15 @@ describe('Radio component', () => {
         selector: '#screenshot-radio'
       });
     });
+  });
 
+  it('should match the icon radio input', () => {
+    return SkyVisualTest.setupTest('radio')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'radio-icon',
+        selector: '#screenshot-icon-radio'
+      });
+    });
   });
 });

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

@@ -6,11 +6,37 @@ <h3>
   <li *ngFor="let item of checkboxItems">
     <sky-checkbox
       [(ngModel)]="item.checked"
-      [disabled]="item.disabled"
-    >
+      [disabled]="item.disabled">
       <sky-checkbox-label>
         {{ item.label }}
       </sky-checkbox-label>
     </sky-checkbox>
   </li>
 </ul>
+
+<h3>
+  Icon checkbox types
+</h3>
+
+<div>
+  <sky-checkbox
+    *ngFor="let item of iconCheckboxItems"
+    [disabled]="item.disabled"
+    [icon]="item.icon"
+    [checkboxType]="item.checkboxType"
+    [(ngModel)]="item.checked">
+  </sky-checkbox>
+</div>
+
+<h3>
+  Icon checkbox group
+</h3>
+
+<div
+  class="sky-switch-icon-group">
+  <sky-checkbox
+    *ngFor="let item of iconCheckboxGroup"
+    [icon]="item.icon"
+    [(ngModel)]="item.checked">
+  </sky-checkbox>
+</div>

src/demos/checkbox/checkbox-demo.component.ts

@@ -25,4 +25,52 @@ export class SkyCheckboxDemoComponent {
       disabled: true
     }
   ];
+  public iconCheckboxGroup = [
+    {
+      label: 'Bold',
+      checked: true,
+      icon: 'bold'
+    },
+    {
+      label: 'Italic',
+      checked: false,
+      icon: 'italic'
+    },
+    {
+      label: 'Underline',
+      checked: true,
+      icon: 'underline'
+    }
+  ];
+  public iconCheckboxItems = [
+    {
+      label: 'Info icon checkbox 1',
+      checked: true,
+      icon: 'info'
+    },
+    {
+      label: 'Disabled info icon checkbox 1',
+      checked: true,
+      disabled: true,
+      icon: 'strikethrough'
+    },
+    {
+      label: 'Success icon checkbox',
+      checked: true,
+      icon: 'star',
+      checkboxType: 'success'
+    },
+    {
+      label: 'Warning icon checkbox',
+      checked: true,
+      icon: 'exclamation-triangle',
+      checkboxType: 'warning'
+    },
+    {
+      label: 'Danger icon checkbox',
+      checked: true,
+      icon: 'ban',
+      checkboxType: 'danger'
+    }
+  ];
 }

src/demos/list-toolbar/list-toolbar-demo.component.html

@@ -63,12 +63,32 @@
     </sky-list-secondary-actions>
 
     <sky-list-toolbar-view-actions>
-      <button
-        class="sky-btn sky-btn-default"
-        type="button"
-      >
-        Button
-      </button>
+      <div class="sky-switch-icon-group">
+        <sky-radio
+          icon="table"
+          name="iconradiogrouptest"
+          value="table"
+          [(ngModel)]="iconGroupSelectedValue">
+        </sky-radio>
+        <sky-radio
+          icon="list"
+          name="iconradiogrouptest"
+          value="list"
+          [(ngModel)]="iconGroupSelectedValue">
+        </sky-radio>
+        <sky-radio
+          icon="th-large"
+          name="iconradiogrouptest"
+          value="cards"
+          [(ngModel)]="iconGroupSelectedValue">
+        </sky-radio>
+        <sky-radio
+          icon="map-marker"
+          name="iconradiogrouptest"
+          value="map"
+          [(ngModel)]="iconGroupSelectedValue">
+        </sky-radio>
+      </div>
     </sky-list-toolbar-view-actions>
 
   </sky-list-toolbar>

src/demos/list-toolbar/list-toolbar-demo.component.ts

@@ -7,6 +7,7 @@ import 'rxjs/add/observable/of';
   templateUrl: './list-toolbar-demo.component.html'
 })
 export class SkyListToolbarDemoComponent {
+  public iconGroupSelectedValue = 'table';
   public items = Observable.of([
     { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples' },
     { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },