Skip to content

Commit 4a1ecb9

Browse files
dtaylor113dtaylor113
authored
Merge pull request #630 from AllenBW/enhancement/adds-info-status-card
feat(pfInfoStatusCard): Adds Info Status Card and tests
2 parents 76bd950 + 34a2c07 commit 4a1ecb9

File tree

4 files changed

+256
-0
lines changed

4 files changed

+256
-0
lines changed

‎src/card/card.less‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,12 @@
2828
}
2929
}
3030
}
31+
3132
.card-pf-heading-no-bottom {
3233
margin: 0 -20px 0px;
3334
padding: 0 20px 0;
3435
}
36+
3537
.card-pf-icon-image {
3638
height: 18px;
3739
margin: 0 5px 5px;
@@ -54,6 +56,7 @@
5456
font-weight: 400;
5557
}
5658
}
59+
5760
.trend-card-small-pf {
5861
.trend-header-pf {
5962
display: block;
@@ -71,3 +74,20 @@
7174
font-weight: 400;
7275
}
7376
}
77+
78+
.card-pf-info-status {
79+
display: flex;
80+
.info-image-container {
81+
display: flex;
82+
align-items: center;
83+
justify-content: center;
84+
flex-direction:column;
85+
margin-right: 10px;
86+
.info-icon {
87+
font-size: 50px;
88+
}
89+
.info-img {
90+
max-height: 50px;
91+
}
92+
}
93+
}

‎src/card/info-status/info-status-card.component.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.card.component:pfInfoStatusCard
4+
* @restrict E
5+
*
6+
* @param {object} status Status configuration information<br/>
7+
* <ul style='list-style-type: none'>
8+
* <li>.title - the main title of the info status card
9+
* <li>.href - the href to navigate to if one clicks on the title or count
10+
* <li>.iconClass - an icon to display to the left of the count
11+
* <li>.iconImage - an image to display to the left of Infrastructure
12+
* <li>.info - an array of strings to display, each element in the array is on a new line, accepts HTML content
13+
* </ul>
14+
* @param {boolean=} show-top-border Show/hide the top border, true shows top border, false (default) hides top border
15+
* @param {boolean} htmlContent Flag to allow HTML content within the info options
16+
*
17+
* @description
18+
* Component for easily displaying textual information
19+
*
20+
* @example
21+
<example module="patternfly.card">
22+
23+
<file name="index.html">
24+
<div ng-controller="CardDemoCtrl" style="display:inline-block;">
25+
<div class="col-md-10">
26+
<label>With Top Border, Icon Class, Href</label>
27+
<pf-info-status-card status="infoStatus" show-top-border="true"></pf-info-status-card>
28+
<br/>
29+
<label>No Top Border, Icon Image, No Title</label>
30+
<pf-info-status-card status="infoStatusTitless"></pf-info-status-card>
31+
<br/>
32+
<label>With HTML</label>
33+
<pf-info-status-card status="infoStatusAlt" html-content="true"></pf-info-status-card>
34+
</div>
35+
</div>
36+
</file>
37+
38+
<file name="script.js">
39+
angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope ) {
40+
$scope.infoStatus = {
41+
"title":"TinyCore-local",
42+
"href":"#",
43+
"iconClass": "fa fa-shield",
44+
"info":[
45+
"VM Name: aapdemo002",
46+
"Host Name: localhost.localdomian",
47+
"IP Address: 10.9.62.100",
48+
"Power status: on"
49+
]
50+
};
51+
52+
$scope.infoStatusTitless = {
53+
"iconImage":"img/OpenShift-logo.svg",
54+
"info":[
55+
"Infastructure: VMware",
56+
"Vmware: 1 CPU (1 socket x 1 core), 1024 MB",
57+
"12 Snapshots",
58+
"Drift History: 1"
59+
]
60+
};
61+
62+
$scope.infoStatusAlt = {
63+
"title":"Favorite Things",
64+
"iconClass":"fa fa-heart",
65+
"info":[
66+
"<i class='fa fa-coffee'>",
67+
"<i class='fa fa-motorcycle'>",
68+
"<b>Tacos</b>"
69+
]
70+
};
71+
});
72+
</file>
73+
74+
</example>
75+
*/
76+
77+
angular.module( 'patternfly.card' ).component('pfInfoStatusCard', {
78+
bindings: {
79+
status: '=',
80+
showTopBorder: '@?',
81+
htmlContent: '@?'
82+
},
83+
templateUrl: 'card/info-status/info-status-card.html',
84+
controller: function ($sce) {
85+
'use strict';
86+
var ctrl = this;
87+
ctrl.$onInit = function () {
88+
ctrl.shouldShowTopBorder = (ctrl.showTopBorder === 'true');
89+
ctrl.shouldShowHtmlContent = (ctrl.htmlContent === 'true');
90+
ctrl.trustAsHtml = function (html) {
91+
return $sce.trustAsHtml(html);
92+
};
93+
};
94+
}
95+
});

‎src/card/info-status/info-status-card.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="card-pf card-pf-info-status"
2+
ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}">
3+
<div class="info-image-container">
4+
<img ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt=""
5+
class="info-img"/>
6+
<span class="info-icon {{$ctrl.status.iconClass}}"></span>
7+
</div>
8+
<div>
9+
<h2 class="card-pf-title" ng-if="$ctrl.status.title">
10+
<a href="{{$ctrl.status.href}}" ng-if="$ctrl.status.href">
11+
<span class="">{{$ctrl.status.title}}</span>
12+
</a>
13+
<span ng-if="!$ctrl.status.href">
14+
<span class="">{{$ctrl.status.title}}</span>
15+
</span>
16+
</h2>
17+
<p ng-if="$ctrl.shouldShowHtmlContent" ng-bind-html="$ctrl.trustAsHtml(item)"
18+
ng-repeat="item in $ctrl.status.info track by $index"></p>
19+
<p ng-if="!$ctrl.shouldShowHtmlContent" ng-bind="item"
20+
ng-repeat="item in $ctrl.status.info track by $index"></p>
21+
</div>
22+
</div>

‎test/card/info-status/info-status-card.component.spec.js‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
describe('Component: pfInfoStatusCard', function () {
2+
var $scope, $compile, element, cardClass
3+
4+
beforeEach(module('patternfly.card', 'card/info-status/info-status-card.html'))
5+
6+
beforeEach(inject(function (_$compile_, _$rootScope_) {
7+
$compile = _$compile_
8+
$scope = _$rootScope_
9+
}))
10+
11+
describe('Page with pf-info-status-card component', function () {
12+
13+
var compileCard = function (markup, scope) {
14+
var el = $compile(markup)(scope)
15+
scope.$digest()
16+
return el
17+
}
18+
19+
it('should set the title link, and icons class', function () {
20+
21+
$scope.status = {
22+
'title': 'TinyCore-local',
23+
'href': '#',
24+
'iconClass': 'fa fa-shield',
25+
'info': [
26+
'VM Name: aapdemo002'
27+
]
28+
}
29+
30+
element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope)
31+
32+
//Make sure a link renders in the title
33+
expect(angular.element(element).find('.card-pf-title').find('a').length).toBe(1)
34+
35+
//Make sure the class is getting set for the title icon
36+
expect(angular.element(element).find('.fa').hasClass('fa-shield')).toBeTruthy()
37+
38+
// By default, showTopBorder if not defined, should be false, resulting in hiding the top
39+
// border, ie. having a .card-pf class
40+
cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented')
41+
expect(cardClass).toBeFalsy()
42+
})
43+
44+
it('No link should be present in the title', function () {
45+
46+
$scope.status = {
47+
'title': 'TinyCore-local',
48+
'iconClass': 'fa fa-shield',
49+
'info': [
50+
'VM Name: aapdemo002'
51+
]
52+
}
53+
54+
element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope)
55+
56+
//Make sure a link renders in the title
57+
expect(angular.element(element).find('.card-pf-title').find('a').length).toBe(0)
58+
})
59+
60+
it('should set the info', function () {
61+
62+
$scope.status = {
63+
'title': 'TinyCore-local',
64+
'href': '#',
65+
'iconClass': 'fa fa-shield',
66+
'info': [
67+
'VM Name: aapdemo002',
68+
'Host Name: localhost.localdomian',
69+
'IP Address: 10.9.62.100',
70+
'Power status: on'
71+
]
72+
}
73+
74+
element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope)
75+
76+
info = angular.element(element).find('p')
77+
78+
//Make sure four info blocks render
79+
expect(info.length).toBe(4)
80+
})
81+
82+
it('should show the top border', function () {
83+
element = compileCard('<pf-info-status-card show-top-border="true"></pf-info-status-card>', $scope)
84+
85+
// showTopBorder set to true, results in having the .card-pf-accented class
86+
cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented')
87+
expect(cardClass).toBeTruthy()
88+
89+
})
90+
91+
it('should hide the top border', function () {
92+
element = compileCard('<pf-info-status-card show-top-border="false"></pf-info-status-card>', $scope)
93+
94+
// showTopBorder set to false, results in not having the .card-pf-accented class
95+
cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented')
96+
expect(cardClass).toBeFalsy()
97+
})
98+
99+
it('should set of the iconImage value', function () {
100+
101+
$scope.status = {
102+
'iconImage': 'img/OpenShift-logo.svg',
103+
'info': [
104+
'Infastructure: VMware',
105+
'Vmware: 1 CPU (1 socket x 1 core), 1024 MB',
106+
'12 Snapshots',
107+
'Drift History: 1'
108+
]
109+
}
110+
111+
element = compileCard('<pf-info-status-card status="status"></pf-info-status-card>', $scope)
112+
113+
// should have the images
114+
imageElements = angular.element(element).find('.info-img')
115+
expect(imageElements.length).toBe(1)
116+
expect(angular.element(imageElements[0]).attr('src')).toBe('img/OpenShift-logo.svg')
117+
})
118+
})
119+
})

0 commit comments

Comments
 (0)