updated directives to meet directive guideline 006

Update textfield & toggle directive attributes to conform to directive guideline 006

closes issue #73
merges pr #80

src/components/textfield/demo/index.html

@@ -24,14 +24,14 @@ <h2>Basic usage</h2>
   <p>
     This markup: <br />
     <code>
-      &lt;uif-textfield label=&quot;This is the label&quot; ng-model=&quot;textValue&quot; description=&quot;This is the description&quot; /&gt;
+      &lt;uif-textfield uif-label=&quot;This is the label&quot; ng-model=&quot;textValue&quot; uif-description=&quot;This is the description&quot; /&gt;
     </code>
   </p>
 
   <p>
     Renders this:
     <br />
-    <uif-textfield label="This is the label" ng-model="textValue" description="This is the description" />  
+    <uif-textfield uif-label="This is the label" ng-model="textValue" uif-description="This is the description" />  
   </p>
   <p>
     <span>textValue: {{textValue}}</span>
@@ -41,14 +41,14 @@ <h2>Underlined</h2>
   <p>
     This markup: <br />
     <code>
-      &lt;uif-textfield label=&quot;This is the label&quot; underlined /&gt;
+      &lt;uif-textfield uif-label=&quot;This is the label&quot; uif-underlined /&gt;
     </code>
   </p>
 
   <p>
     Renders this:
     <br />
-    <uif-textfield label="This is the label" underlined />
+    <uif-textfield uif-label="This is the label" uif-underlined />
   </p>
 
   <h2>Placeholder</h2>

src/components/textfield/demoBasicUsage/index.html

@@ -1 +1 @@
-<uif-textfield description="This is the description" label="This is the label" ng-model="value" />
+<uif-textfield uif-description="This is the description" uif-label="This is the label" ng-model="value" />

src/components/textfield/demoPlaceholder/index.html

@@ -1 +1 @@
-<uif-textfield description="This is the description" placeholder="This is the placeholder"  />
+<uif-textfield uif-description="This is the description" placeholder="This is the placeholder"  />

src/components/textfield/demoUnderlined/index.html

@@ -1 +1 @@
-<uif-textfield description="This is the description" label="This is the label" underlined />
+<uif-textfield uif-description="This is the description" uif-label="This is the label" uif-underlined />

src/components/textfield/textFieldDirective.spec.ts

@@ -24,7 +24,8 @@ describe('textFieldDirective: <uif-textfield />', () => {
 
     it('should be able to set label and description', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
         let $scope: any = $rootScope.$new();
-        let textBox: JQuery = $compile('<uif-textfield label="Label contents" description="Description contents"></uif-textfield>')($scope);
+        let textBox: JQuery = $compile('<uif-textfield uif-label="Label contents"' +
+                                                     ' uif-description="Description contents"></uif-textfield>')($scope);
         $scope.$apply();
 
         let label: JQuery = getMainDiv(textBox).find('label.ms-Label');
@@ -36,7 +37,7 @@ describe('textFieldDirective: <uif-textfield />', () => {
 
     it('should be able to set underlined', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
         let $scope: any = $rootScope.$new();
-        let textBox: JQuery = $compile('<uif-textfield underlined></uif-textfield>')($scope);
+        let textBox: JQuery = $compile('<uif-textfield uif-underlined></uif-textfield>')($scope);
         // element must be appended to the body, otherwise focus/blur events don't fire
         textBox.appendTo(document.body);
 

src/components/textfield/textFieldDirective.ts

@@ -10,21 +10,21 @@ import * as ng from 'angular';
  * @description 
  * This is the scope used by the directive. 
  * 
- * label and placeholder cannot be set at the same time! When both values are set, placeholder will be ignored. 
+ * uifLabel and placeholder cannot be set at the same time! When both values are set, placeholder will be ignored. 
  * 
- * @property {string} label       - The label to display next to the text field
- * @property {string} placeholder - A placeholder to display over the input. Will hide as soon as a user clicks on the input.
- * @property {string} description - A longer text description to display below the text field
- * @property {string} ngModel     - The scope variable to bind to the text input. 
+ * @property {string} uifLabel        - The label to display next to the text field
+ * @property {string} placeholder     - A placeholder to display over the input. Will hide as soon as a user clicks on the input.
+ * @property {string} uifDescription  - A longer text description to display below the text field
+ * @property {string} ngModel         - The scope variable to bind to the text input. 
  */
 export interface ITextFieldScope extends ng.IScope {
-    label: string;
+    uifLabel: string;
     placeholder: string;
-    description: string;
+    uifDescription: string;
     ngModel: string;
 
     labelShown: boolean;
-    underlined: boolean;
+    uifUnderlined: boolean;
     inputFocus: (ev: any) => void;
     inputClick: (ev: any) => void;
     inputBlur: (ev: any) => void;
@@ -45,24 +45,24 @@ export interface ITextFieldScope extends ng.IScope {
  *
  * @usage
  * 
- * <uif-textfield label='This is the label' 
- *                description='This is the description'
- *                underlined
+ * <uif-textfield uif-label='This is the label' 
+ *                uif-description='This is the description'
+ *                uif-Underlined
  *                placeholder='This is the placeholder' />
  */
 export class TextFieldDirective implements ng.IDirective {
     public template: string =
         '<div ng-class="{\'is-active\': isActive, \'ms-TextField\': true, ' +
-        '\'ms-TextField--underlined\': underlined, \'ms-TextField--placeholder\': placeholder}">' +
-        '<label ng-show="labelShown" class="ms-Label">{{label || placeholder}}</label>' +
+        '\'ms-TextField--underlined\': uifUnderlined, \'ms-TextField--placeholder\': placeholder}">' +
+        '<label ng-show="labelShown" class="ms-Label">{{uifLabel || placeholder}}</label>' +
         '<input ng-model="ngModel" ng-blur="inputBlur()" ng-focus="inputFocus()" ng-click="inputClick()" class="ms-TextField-field" />' +
-        '<span class="ms-TextField-description">{{description}}</span>' +
+        '<span class="ms-TextField-description">{{uifDescription}}</span>' +
         '</div>';
     public scope: {} = {
-        description: '@',
-        label: '@',
         ngModel: '=',
-        placeholder: '@'
+        placeholder: '@',
+        uifDescription: '@',
+        uifLabel: '@'
     };
 
     public restrict: string = 'E';
@@ -74,9 +74,9 @@ export class TextFieldDirective implements ng.IDirective {
 
     public link(scope: ITextFieldScope, instanceElement: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModel: ng.INgModelController): void {
         scope.labelShown = true;
-        scope.underlined = 'underlined' in attrs;
+        scope.uifUnderlined = 'uifUnderlined' in attrs;
         scope.inputFocus = function(ev: any): void {
-            if (scope.underlined) {
+            if (scope.uifUnderlined) {
                 scope.isActive = true;
             }
         };
@@ -90,7 +90,7 @@ export class TextFieldDirective implements ng.IDirective {
             if (scope.placeholder && input.val().length === 0) {
                 scope.labelShown = true;
             }
-            if (scope.underlined) {
+            if (scope.uifUnderlined) {
                 scope.isActive = false;
             }
         };

src/components/toggle/demo/index.html

@@ -23,14 +23,14 @@ <h1 class="ms-font-su">Toggle Demo | &lt;uif-toggle&gt;</h1>
   <p>
     This markup: <br />
     <code>
-    &lt;uif-toggle label-off=&quot;Label off&quot; label-on=&quot;Label on&quot; ng-model=&quot;toggled&quot;/&gt;  
+    &lt;uif-toggle uif-label-off=&quot;Label off&quot; uif-label-on=&quot;Label on&quot; ng-model=&quot;toggled&quot;/&gt;  
     </code>
   </p>
 
   <p>
     Renders this:
     <br />
-    <uif-toggle label-off="Label off" label-on="Label on" ng-model="toggled"/>
+    <uif-toggle uif-label-off="Label off" uif-label-on="Label on" ng-model="toggled"/>
 
   </p>
   <p>
@@ -41,14 +41,14 @@ <h1 class="ms-font-su">Toggle Demo | &lt;uif-toggle&gt;</h1>
   <p>
     This markup: <br />
     <code>
-      &lt;uif-toggle label-off=&quot;Label off&quot; label-on=&quot;Label on&quot; text-location=&quot;right&quot;/&gt;
+      &lt;uif-toggle uif-label-off=&quot;Label off&quot; uif-label-on=&quot;Label on&quot; uif-text-location=&quot;right&quot;/&gt;
     </code>
   </p>
 
   <p>
     Renders this:
     <br />
-    <uif-toggle label-off="Label off" label-on="Label on" text-location="right"/>
+    <uif-toggle uif-label-off="Label off" uif-label-on="Label on" uif-text-location="right"/>
 
   </p>
 

src/components/toggle/demoBasicUsage/index.html

@@ -1,5 +1,5 @@
 <html ng-app="demoApp" ng-controller="demoController">
-<uif-toggle label-off="Label off" label-on="Label on" ng-model="toggled" />
+<uif-toggle uif-label-off="Label off" uif-label-on="Label on" ng-model="toggled" />
 </html>
 
 <script type="text/javascript">

src/components/toggle/toggleDirective.spec.ts

@@ -5,11 +5,11 @@ describe('toggleDirective: <uif-toggle />', () => {
 
     it('should have unique ids', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
         let $scope: any = $rootScope.$new();
-        let toggle1: JQuery = $compile('<uif-toggle label-off="No" label-on="Yes" ng-model="toggled">Test</toggle>')($scope);
+        let toggle1: JQuery = $compile('<uif-toggle uif-label-off="No" uif-label-on="Yes" ng-model="toggled">Test</toggle>')($scope);
         $scope.$apply();
 
         let checkBox1: JQuery = toggle1.find('input.ms-Toggle-input');
-        let toggle2: JQuery = $compile('<uif-toggle  label-off="No" label-on="Yes" ng-model="toggled">Test</toggle>')($scope);
+        let toggle2: JQuery = $compile('<uif-toggle uif-label-off="No" uif-label-on="Yes" ng-model="toggled">Test</toggle>')($scope);
         $scope.$apply();
 
         let checkBox2: JQuery = toggle2.find('input.ms-Toggle-input');
@@ -19,8 +19,8 @@ describe('toggleDirective: <uif-toggle />', () => {
         let $scope: any = $rootScope.$new();
         $scope.toggled = true;
 
-        let toggle: JQuery = $compile('<uif-toggle label-off="No" label-on="Yes" ng-model="toggled" ' +
-            'text-location="right">Toggle this, or not</toggle>')($scope);
+        let toggle: JQuery = $compile('<uif-toggle uif-label-off="No" uif-label-on="Yes" ng-model="toggled" ' +
+                                                  'uif-text-location="right">Toggle this, or not</toggle>')($scope);
         $scope.$digest();
 
         let mainToggle: JQuery = toggle.find('.ms-Toggle');
@@ -30,7 +30,8 @@ describe('toggleDirective: <uif-toggle />', () => {
         let $scope: any = $rootScope.$new();
         $scope.toggled = true;
 
-        let toggle: JQuery = $compile('<uif-toggle label-off="No" label-on="Yes" ng-model="toggled">Toggle this, or not</toggle>')($scope);
+        let toggle: JQuery = $compile('<uif-toggle uif-label-off="No" uif-label-on="Yes" ' +
+                                                  'ng-model="toggled">Toggle this, or not</toggle>')($scope);
         $scope.$apply();
 
         let labelOff: JQuery = toggle.find('.ms-Label--off');
@@ -46,7 +47,7 @@ describe('toggleDirective: <uif-toggle />', () => {
         let $scope: any = $rootScope.$new();
         $scope.toggled = true;
 
-        let toggle: JQuery = $compile('<uif-toggle desc="TEST" label-off="No" label-on="Yes" ng-model="toggled"></toggle>')($scope);
+        let toggle: JQuery = $compile('<uif-toggle uif-label-off="No" uif-label-on="Yes" ng-model="toggled"></toggle>')($scope);
         $scope.$apply();
 
         let checkBox: JQuery = toggle.find('input.ms-Toggle-input');

src/components/toggle/toggleDirective.ts

@@ -11,17 +11,17 @@ import * as ng from 'angular';
  * This is the scope used by the directive. 
  *  
  * 
- * @property {string} ngModel      - The scope variable to bind to the toggle.
- * @property {string} labelOff     - The label to display when not toggled
- * @property {string} labelOn      - The label to display when toggled
- * @property {string} textLocation - Location of the label (left or right), compared to the toggle  
+ * @property {string} ngModel         - The scope variable to bind to the toggle.
+ * @property {string} uifLabelOff     - The label to display when not toggled
+ * @property {string} uifLabelOn      - The label to display when toggled
+ * @property {string} uifTextLocation - Location of the label (left or right), compared to the toggle  
  */
 
 export interface IToggleScope {
     ngModel: string;
-    labelOff: string;
-    labelOn: string;
-    textLocation: string;
+    uifLabelOff: string;
+    uifLabelOn: string;
+    uifTextLocation: string;
     uniqueId: number;
     toggleClass: string;
 }
@@ -47,17 +47,17 @@ export class ToggleDirective implements ng.IDirective {
                  '<span class="ms-Toggle-description"><ng-transclude/></span>' +
                 '<input type="checkbox" id="{{::$id}}" class="ms-Toggle-input" ng-model="ngModel" />' +
                 '<label for="{{::$id}}" class="ms-Toggle-field">' +
-                    '<span class="ms-Label ms-Label--off">{{labelOff}}</span>' +
-                    '<span class="ms-Label ms-Label--on">{{labelOn}}</span>' +
+                    '<span class="ms-Label ms-Label--off">{{uifLabelOff}}</span>' +
+                    '<span class="ms-Label ms-Label--on">{{uifLabelOn}}</span>' +
                 '</label>' +
                 '</div>';
     public restrict: string = 'E';
     public transclude: boolean = true;
     public scope: {} = {
-        labelOff: '@',
-        labelOn: '@',
         ngModel: '=',
-        textLocation: '@'
+        uifLabelOff: '@',
+        uifLabelOn: '@',
+        uifTextLocation: '@'
     };
 
     public static factory(): ng.IDirectiveFactory {
@@ -68,8 +68,8 @@ export class ToggleDirective implements ng.IDirective {
     public link(scope: IToggleScope, elem: ng.IAugmentedJQuery, attrs: ng.IAttributes): void {
         scope.toggleClass = 'ms-Toggle';
 
-        if (scope.textLocation) {
-            let loc: string = scope.textLocation;
+        if (scope.uifTextLocation) {
+            let loc: string = scope.uifTextLocation;
             loc = loc.charAt(0).toUpperCase() + loc.slice(1);
             scope.toggleClass += ' ms-Toggle--text' + loc;
         }