From af0d8a5ef818f44e4fb78433c966a5da72183e6c Mon Sep 17 00:00:00 2001
From: Dana Gutride <dgutride@redhat.com>
Date: Wed, 7 Dec 2016 15:09:50 -0500
Subject: [PATCH 1/2] Add component conversion notes (meant to be in repo
 temporarily)

---
 component-conversion.md | 67 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 component-conversion.md

diff --git a/component-conversion.md b/component-conversion.md
new file mode 100644
index 000000000..ab5c70ea4
--- /dev/null
+++ b/component-conversion.md
@@ -0,0 +1,67 @@
+# Converting Angular 1.4 style directives to Angular 1.5
+
+## Directive Conversion
+1. Rename file from name-directive.js to name.component.js
+2.  In the directive - modify the following:
+  ```
+  angular.module('patternfly.notification').directive('pfNotificationDrawer', function ($window, $timeout) {
+    'use strict';
+    return {
+    restrict: 'A',
+    scope: {
+      scrollSelector: '@',
+      groupHeight: '@',
+      groupClass: '@'
+    },
+    controller: function($window, $timeout) {
+      $scope.toggle = function () {
+  <!------------->
+  <!-- becomes -->
+  <!------------->
+  angular.module('patternfly.notification').directive('pfNotificationDrawer', {
+    bindings: {
+      scrollSelector: '@',
+      groupHeight: '@',
+      groupClass: '@'
+    },
+    controller: function ($window, $timeout) {
+      'use strict';
+      var ctrl = this;
+  
+      ctrl.toggle = function () {
+  ```
+3. Any initialization logic should be moved out of link functions and into $onInit functions
+4. Any event listeners that are added for $window or $timeout events should be cleaned up in $onDestroy
+5. $scope watchers should be moved to $onChanges
+6. If DOM manipulation still must happen, there is a $postLink function.  A bit more investigation will be necessary to see if these components can be upgraded to Angular 2.
+
+## View Conversion
+In the template referenced by the templateUrl in the component, some changes have to be made.  Anywhere a former $scope variable is referenced, you'll need to prepend $ctrl
+  ```
+  <li ng-repeat="item in items" class="list-group-item" ng-class="{'active': item.isActive}">
+    <div ng-if="showBadges && tertiaryItem.badges" class="badge-container-pf">
+  ```
+  Becomes:
+  ```
+  <!-- item is in an ng-repeat so no $ctrl is needed -->
+  <li ng-repeat="item in $ctrl.items" class="list-group-item" ng-class="{'active': item.isActive}">
+    <div ng-if="$ctrl.showBadges && tertiaryItem.badges" class="badge-container-pf">
+  ```
+      
+## Unit tests
+1. Modify test to move attribute directives to component in any html code used in the $compile step.  
+ ```
+ <div pf-directive></div>
+ <!--  becomes -->
+ <pf-directive></pf-directive>
+ ```
+2. Make sure all unit tests pass
+
+## NgDoc changes
+1. Replace the word .directive. with .component. in the ngdoc @name
+2. Add @restrict E under the @name
+3. In example html, move any attribute directives to component.  <div pf-directive></div> becomes <pf-directive></pf-directive>
+
+## Helpful Links
+- https://docs.angularjs.org/guide/component
+- https://gist.github.com/toddmotto/5b4de6c777d3e446e6410fdadb824522

From 5137ed05e786d90e030bca632888eccf11e6f9c7 Mon Sep 17 00:00:00 2001
From: Dana Gutride <dgutride@redhat.com>
Date: Fri, 9 Dec 2016 11:22:16 -0500
Subject: [PATCH 2/2] Modify component conversion document

---
 component-conversion.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/component-conversion.md b/component-conversion.md
index ab5c70ea4..077ceff04 100644
--- a/component-conversion.md
+++ b/component-conversion.md
@@ -18,7 +18,7 @@
   <!------------->
   <!-- becomes -->
   <!------------->
-  angular.module('patternfly.notification').directive('pfNotificationDrawer', {
+  angular.module('patternfly.notification').component('pfNotificationDrawer', {
     bindings: {
       scrollSelector: '@',
       groupHeight: '@',
@@ -32,7 +32,7 @@
   ```
 3. Any initialization logic should be moved out of link functions and into $onInit functions
 4. Any event listeners that are added for $window or $timeout events should be cleaned up in $onDestroy
-5. $scope watchers should be moved to $onChanges
+5. $scope watchers should be moved to $onChanges for bound properties (defined in bindings object)
 6. If DOM manipulation still must happen, there is a $postLink function.  A bit more investigation will be necessary to see if these components can be upgraded to Angular 2.
 
 ## View Conversion