feat(spinner): attribute rename & validation

Added attribute validation and error logging to the console to address directive guidelines [007](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/docs/guides/DIRECTIVE-CHECKLIST.md#directive-attribute-validation) & [008](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/docs/guides/DIRECTIVE-CHECKLIST.md#error-messages).

  BREAKING CHANGE: uif-spinner's `uif-spinnersize` attribute changed to `uif-size`.

  Change your code from this:

  ```html
  <uif-spinner uif-spinnersize="large"></uif-spinner>
  ```

  To this:

  ```html
  <uif-spinner uif-size="large"></uif-spinner>
  ```

Closes #100. Closes #102. Closes #120.

CHANGELOG.md

@@ -5,6 +5,10 @@
 - **uif-contextual-menu**: added attribute validation & error logging to console (by @s-KaiNet; closes [#99](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/99))
 - **uif-table**: added support to select multiple rows (by @waldekmastykarz; closes [#61](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/61))
 - **uif-table**: added attribute validation & error logging to console (by @waldekmastykarz; closes [#101](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/101))
+- **uif-spinner**: added attribute validation & error logging to console (by @s-KaiNet; closes [#100](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/100))
+
+#### Breaking Changes
+- **uif-spinner**: updated attribute name `uif-spinnersize` to `uif-size` (by @s-KaiNet; closes [#102](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/102))
 
 <a name="0.2.0"</a>
 ### [0.2.0 (January 19, 2016)](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/releases/tag/0.2.0)

src/components/spinner/demo/index.html

@@ -32,36 +32,49 @@ <h1 class="ms-font-su">Spinner Demo | &lt;uif-spinner&gt;</h1>
     <uif-spinner></uif-spinner>
   </p>
 
+  <p>By default, small spinner is rendered. Above is shorthand of:
+    <br />
+    <code>
+      &lt;uif-spinner uif-size="small"&gt;&lt;uif-spinner/&gt;
+    </code>
+  </p>
+
+  <p>
+    Example:
+    <br />
+    <uif-spinner uif-size="small"></uif-spinner>
+  </p>
+
   <p>To render large spinner, use the following markup:
     <br />
     <code>
-      &lt;uif-spinner uif-spinnersize="large"&gt;&lt;uif-spinner/&gt;
+      &lt;uif-spinner uif-size="large"&gt;&lt;uif-spinner/&gt;
     </code>
   </p>
 
   <p>
     Example:
     <br />
-    <uif-spinner uif-spinnersize="large"></uif-spinner>
+    <uif-spinner uif-size="large"></uif-spinner>
   </p>
 
   <p>You can also add content to the spinner, which will become it's label :
     <br />
     <code>
-      &lt;uif-spinner uif-spinnersize="large"&gt;Loading...&lt;uif-spinner/&gt;
+      &lt;uif-spinner uif-size="large"&gt;Loading...&lt;uif-spinner/&gt;
     </code>
   </p>
 
   <p>
     Example:
     <br />
-    <uif-spinner uif-spinnersize="large">Loading...</uif-spinner>
+    <uif-spinner uif-size="large">Loading...</uif-spinner>
   </p>
 
   <p>You can control visibility of the spinner with <code>ngShow</code> directive
     <br />
     <code>
-      &lt;uif-spinner uif-spinnersize="large" ng-show="spinnerVisible"&gt;&lt;uif-spinner/&gt;
+      &lt;uif-spinner uif-size="large" ng-show="spinnerVisible"&gt;&lt;uif-spinner/&gt;
     </code>
   </p>
 
@@ -70,7 +83,7 @@ <h1 class="ms-font-su">Spinner Demo | &lt;uif-spinner&gt;</h1>
     <br />
     <button type="button" ng-click="vm.spinnerVisible = !vm.spinnerVisible">Toggle visibility</button>
     <br />
-    <uif-spinner uif-spinnersize="large" ng-show="vm.spinnerVisible"></uif-spinner>
+    <uif-spinner uif-size="large" ng-show="vm.spinnerVisible"></uif-spinner>
   </p>
 
 </body>

src/components/spinner/spinnerDirective.spec.ts

@@ -29,22 +29,35 @@ describe('spinnerDirective: <uif-spinner />', () => {
 
     it('should render proper CSS for large spinner', inject(($compile: Function) => {
       // override default element for suite
-      element = ng.element('<uif-spinner uif-spinnersize="large"></uif-spinner>');
+      element = ng.element('<uif-spinner uif-size="large"></uif-spinner>');
       $compile(element)(scope);
       scope.$digest();
 
       expect(element[0]).toHaveClass('ms-Spinner--large');
     }));
 
-    it('should not render CSS for large spinner if spinnersize not large', inject(($compile: Function) => {
+    it('should render proper CSS for small spinner', inject(($compile: Function) => {
       // override default element for suite
-      element = ng.element('<uif-spinner uif-spinnersize="small"></uif-spinner>');
+      element = ng.element('<uif-spinner uif-size="small"></uif-spinner>');
       $compile(element)(scope);
       scope.$digest();
 
       expect(element[0]).not.toHaveClass('ms-Spinner--large');
     }));
 
+    it('should throw error when invalid size provided', inject(($compile: Function, $log: ng.ILogService) => {
+      // override default element for suite
+      element = ng.element('<uif-spinner uif-size="invalid"></uif-spinner>');
+      $compile(element)(scope);
+      scope.$digest();
+
+      // expect(element[0]).not.toHaveClass('ms-Spinner--large');
+
+      expect($log.error.logs.length === 1).toBeTruthy();
+      expect($log.error.logs[0]).toContain('Error [ngOfficeUiFabric] officeuifabric.components.spinner - Unsupported size: ' +
+          'Spinner size (\'invalid\') is not supported by the Office UI Fabric.');
+    }));
+
     it('should not render wrapper when no content', () => {
       let wrapperElement: ng.IAugmentedJQuery = element.find('div.ms-Spinner-label');
 

src/components/spinner/spinnerDirective.ts

@@ -1,5 +1,6 @@
 'use strict';
 import * as ng from 'angular';
+import {SpinnerSize} from './spinnerSizeEnum';
 
 /**
  * @ngdoc directive
@@ -37,11 +38,19 @@ export class SpinnerDirective implements ng.IDirective {
     scope: ISpinnerScope,
     instanceElement: ng.IAugmentedJQuery,
     attrs: ISpinnerAttributes,
-    ctrl: any,
+    controller: SpinnerController,
     $transclude: ng.ITranscludeFunction): void {
 
-      if (attrs.uifSpinnersize === 'large') {
-        instanceElement.addClass('ms-Spinner--large');
+      if (ng.isDefined(attrs.uifSize) ) {
+        if (ng.isUndefined(SpinnerSize[attrs.uifSize])) {
+
+        controller.$log.error('Error [ngOfficeUiFabric] officeuifabric.components.spinner - Unsupported size: ' +
+          'Spinner size (\'' + attrs.uifSize + '\') is not supported by the Office UI Fabric.');
+        }
+
+        if (SpinnerSize[attrs.uifSize] === SpinnerSize.large) {
+          instanceElement.addClass('ms-Spinner--large');
+        }
       }
 
       if (attrs.ngShow != null) {
@@ -97,7 +106,7 @@ interface ISpinnerScope extends ng.IScope {
  */
 class SpinnerController {
 
-  public static $inject: string[] = ['$scope', '$element', '$interval'];
+  public static $inject: string[] = ['$scope', '$element', '$interval', '$log'];
 
   private _offsetSize: number = 0.179;
   private _numCircles: number = 8;
@@ -109,7 +118,8 @@ class SpinnerController {
   constructor(
     public $scope: ISpinnerScope,
     private $element: ng.IAugmentedJQuery,
-    private $interval: ng.IIntervalService) {
+    private $interval: ng.IIntervalService,
+    public $log: ng.ILogService) {
 
     $scope.init = (): void => {
       this.createCirclesAndArrange();
@@ -209,7 +219,7 @@ class CircleObject {
 }
 
 interface ISpinnerAttributes extends ng.IAttributes {
-  uifSpinnersize?: string;
+  uifSize?: string;
   ngShow?: any;
 }
 

src/components/spinner/spinnerSizeEnum.ts

@@ -0,0 +1,18 @@
+'use strict';
+
+/**
+ *
+ * Enum for spinner sizes supported by Office UI Fabric.
+ *
+ * @readonly
+ * @enum {string}
+ * @usage
+ *
+ * It is used to define size the spinner that will rendered by `uif-spinner` directive.
+ *
+ * let size: string = SpinnerSize[SpinnerSize.large];
+ */
+export enum SpinnerSize {
+  'small',
+  'large'
+}