Fix for charts in ng-docs, some component conversion fixes.

Gruntfile.js

@@ -172,8 +172,8 @@ module.exports = function (grunt) {
             'node_modules/datatables.net/js/jquery.dataTables.js',
             'node_modules/datatables.net-select/js/dataTables.select.js',
             'node_modules/moment/moment.js',
-            'node_modules/c3/c3.js',
             'node_modules/d3/d3.js',
+            'node_modules/c3/c3.js',
             'node_modules/patternfly/dist/js/patternfly-settings.js',
             'node_modules/patternfly/dist/js/patternfly-settings-colors.js',
             'node_modules/patternfly/dist/js/patternfly-settings-charts.js',

src/views/listview/list-view.component.js

@@ -90,7 +90,7 @@
           <list-expanded-content>
            <div class="row">
             <div class="col-md-3">
-              <div pf-donut-pct-chart config="exampleChartConfig" data="{'used': '350','total': '1000'}" center-label="'Percent Used'"></div>
+              <pf-donut-pct-chart config="exampleChartConfig" data="{'used': '350','total': '1000'}" center-label="'Percent Used'"></pf-donut-pct-chart>
             </div>
             <div class="col-md-9">
                <dl class="dl-horizontal">

test/card/basic/card.spec.js

@@ -52,7 +52,7 @@ describe('Component: pfCard', function() {
 
     it("should hide the top border", function() {
 
-      element = compileCard('<div pf-card head-title="My card title" sub-title="My card subtitle title" show-top-border="false">Inner content goes here</div>', $scope);
+      element = compileCard('<pf-card head-title="My card title" sub-title="My card subtitle title" show-top-border="false">Inner content goes here</pf-card>', $scope);
 
       // showTopBorder set to false, results in not having the .card-pf-accented class
       cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented');
@@ -192,7 +192,7 @@ describe('Component: pfCard', function() {
         'position' : 'header'
       };
 
-      element = compileCard('<pf-card pf-card head-title="title" footer="{}" filter="filterConfig">Inner content</pf-card>', $scope);
+      element = compileCard('<pf-card head-title="title" footer="{}" filter="filterConfig">Inner content</pf-card>', $scope);
 
       // should NOT find any filters in the footer
       cardClass = angular.element(element).find('.card-pf-footer').find('a');

test/charts/c3/c3.spec.js

@@ -13,13 +13,13 @@ describe('Directive: pfC3Chart', function() {
   beforeEach(function() {
     $scope.myChart = "myChartId";
     $scope.chartConfig = {};
-    element = '<div pf-c3-chart id="myChart" config="chartConfig"></div>';
+    element = '<pf-c3-chart id="myChart" config="chartConfig"></pf-c3-chart>';
     element = $compile(element)($scope);
     $scope.$digest();
   });
 
   it("chart should find empty template", function() {
-    expect(angular.element(element).html()).toBe("");
+    expect(angular.element(element).html()).toBe('<div id=""></div>');
   });
 
 });

test/wizard/detail-page.html

@@ -1,12 +1,12 @@
 <div ng-controller="DetailsGeneralController">
    <pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
      <form class="form-horizontal">
-       <div pf-form-group pf-label="Name" required>
+       <pf-form-group pf-label="Name" required>
         <input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
-       </div>
-       <div pf-form-group pf-label="Description">
+       </pf-form-group>
+       <pf-form-group pf-form-group pf-label="Description">
         <input id="new-description" name="description" ng-model="data.description" type="text" />
-       </div>
+       </pf-form-group>
      </form>
   </pf-wizard-substep>
 </div>

test/wizard/wizard-test-steps.html

@@ -3,23 +3,23 @@
   </div>
   <pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="test/wizard/review-second-template.html">
     <form class="form-horizontal">
-      <div pf-form-group pf-label="Lorem" required>
+      <pf-form-group pf-label="Lorem" required>
         <input id="new-lorem" name="lorem" ng-model="data.lorem" type="text" required/>
-      </div>
-      <div pf-form-group pf-label="Ipsum">
+      </pf-form-group>
+      <pf-form-group pf-label="Ipsum">
         <input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
-      </div>
+      </pf-form-group>
     </form>
   </pf-wizard-substep>
 </pf-wizard-step>
 <pf-wizard-step step-title="Second Step" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="test/wizard/review-second-template.html" >
   <form class="form-horizontal">
-    <div pf-form-group pf-label="Lorem">
+    <pf-form-group pf-label="Lorem">
       <input id="new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
-    </div>
-    <div pf-form-group pf-label="Ipsum">
+    </pf-form-group>
+    <pf-form-group pf-label="Ipsum">
       <input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
-    </div>
+    </pf-form-group>
   </form>
 </pf-wizard-step>
 <pf-wizard-step step-title="Review" substeps="true" step-id="review" step-priority="2">