Fixes issue 575: change h1 to h4 styled as h1, update id="title" to id="empty-state-title-{{$id}}" to ensure unique titles, etc

Author: benjaminapetersen

src/views/empty-state.html

@@ -2,13 +2,13 @@
   <div ng-if="$ctrl.config.icon" class="blank-slate-pf-icon">
     <span class="{{$ctrl.config.icon}}"></span>
   </div>
-  <h1 id="title">
+  <h4 id="empty-state-title-{{$id}}" class="h1 title">
     {{$ctrl.config.title}}
-  </h1>
-  <p id="info" ng-if="$ctrl.config.info">
+  </h4>
+  <p id="empty-state-info-{{$id}}" class="info" ng-if="$ctrl.config.info">
     {{$ctrl.config.info}}
   </p>
-  <p id="helpLink" ng-if="$ctrl.config.helpLink">
+  <p id="empty-state-helpLink-{{$id}}" class="helpLink" ng-if="$ctrl.config.helpLink">
     {{$ctrl.config.helpLink.label}} <a href="{{$ctrl.config.helpLink.url}}">{{$ctrl.config.helpLink.urlLabel}}</a>.
   </p>
   <div ng-if="$ctrl.hasMainActions()" class="blank-slate-pf-main-action">

test/notification/notification-drawer.spec.js

@@ -593,7 +593,7 @@ describe('Component:  pfNotificationDrawer', function () {
     var emptyStates = element.find('.blank-slate-pf');
     expect(emptyStates.length).toBe(1);
 
-    var title = angular.element(emptyStates[0]).find('#title').html();
+    var title = angular.element(emptyStates[0]).find('.title').html();
     expect(_.trim(title)).toBe('There are no notifications to display.');
   });
 
@@ -609,18 +609,18 @@ describe('Component:  pfNotificationDrawer', function () {
     var emptyStates = element.find('.blank-slate-pf');
     expect(emptyStates.length).toBe(1);
 
-    var title = angular.element(emptyStates[0]).find('#title').html();
+    var title = angular.element(emptyStates[0]).find('.title').html();
     expect(_.trim(title)).toBe('Nothing');
   });
 
   it ('should show the empty state pattern when no notifications exist for a group', function() {
     var emptyStates = element.find('.blank-slate-pf');
     expect(emptyStates.length).toBe(2);
 
-    var title = angular.element(emptyStates[0]).find('#title').html();
+    var title = angular.element(emptyStates[0]).find('.title').html();
     expect(_.trim(title)).toBe('There are no notifications to display.');
 
-    title = angular.element(emptyStates[1]).find('#title').html();
+    title = angular.element(emptyStates[1]).find('.title').html();
     expect(_.trim(title)).toBe('Nothing');
   });
 });

test/table/tableview/table-view.spec.js

@@ -85,21 +85,21 @@ describe('Component: pfTableView', function () {
     basicSetup();
     $scope.items = null;
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('');
+    expect(element.find('.title').text()).toContain('');
   });
 
   it('should show the empty state when items is empty', function () {
     basicSetup();
     $scope.items = [];
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.title').text()).toContain('No Items Available');
   });
 
   it('should show the empty state when the config property is specified', function () {
     basicSetup();
     $scope.config.itemsAvailable = false;
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.title').text()).toContain('No Items Available');
   });
 
   it('should show the correct number of items', function () {

test/views/cardview/card-view.spec.js

@@ -224,6 +224,6 @@ describe('Component:  pfCardView', function () {
   it('should show the empty state when specified', function () {
     $scope.cardConfig.itemsAvailable = false;
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.title').text()).toContain('No Items Available');
   });
 })

test/views/empty-state.spec.js

@@ -1,4 +1,4 @@
-describe('Component:  pfEnptyState', function () {
+describe('Component:  pfEmptyState', function () {
   var $scope;
   var $compile;
   var element;
@@ -68,9 +68,9 @@ describe('Component:  pfEnptyState', function () {
     compileHTML('<pf-empty-state config="config" action-buttons="actionButtons"></pf-empty-state>', $scope);
 
     expect(element.find('.pficon-add-circle-o').length).toBe(1);
-    expect(element.find('#title').text()).toContain('Empty State Title');
-    expect(element.find('#info').text()).toContain('This is the Empty State component');
-    expect(element.find('#helpLink').text()).toContain('For more information please see');
+    expect(element.find('.title').text()).toContain('Empty State Title');
+    expect(element.find('.info').text()).toContain('This is the Empty State component');
+    expect(element.find('.helpLink').text()).toContain('For more information please see');
     expect(element.find('a').text()).toContain('pfExample');
     expect(element.find('a').prop('href')).toContain('#/api/patternfly.views.component:pfEmptyState');
 
@@ -89,11 +89,11 @@ describe('Component:  pfEnptyState', function () {
   it('should only display main default title when no config and actionButtons defined', function () {
     compileHTML('<pf-empty-state></pf-empty-state>', $scope);
 
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.title').text()).toContain('No Items Available');
 
     expect(element.find('.blank-slate-pf-icon').length).toBe(0);
-    expect(element.find('#info').length).toBe(0);
-    expect(element.find('#helpLink').length).toBe(0);
+    expect(element.find('.info').length).toBe(0);
+    expect(element.find('.helpLink').length).toBe(0);
     expect(element.find('button').length).toBe(0);
   });
 });

test/views/listview/list-view.spec.js

@@ -603,6 +603,6 @@ describe('Component:  pfDataList', function () {
   it('should show the empty state when specified', function () {
     $scope.listConfig.itemsAvailable = false;
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.title').text()).toContain('No Items Available');
   });
 });