Skip to content

Commit 19c23d7

Browse files
author
erundle
committed
Adding basic card directive
1 parent 5892cca commit 19c23d7

File tree

8 files changed

+182
-2
lines changed

8 files changed

+182
-2
lines changed

‎Gruntfile.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,11 @@ module.exports = function(grunt) {
134134
cwd: 'src/',
135135
src: ['notification/**/*.html'],
136136
dest: 'templates/notification.js'
137+
},
138+
'patternfly.card': {
139+
cwd: 'src/',
140+
src: ['card/**/*.html'],
141+
dest: 'templates/card.js'
137142
}
138143
},
139144
uglify: {

‎dist/angular-patternfly.js‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
/**
2+
* @name patternfly card
3+
*
4+
* @description
5+
* Card module for patternfly.
6+
*
7+
*/
8+
angular.module('patternfly.card', []);
9+
;/**
210
* @name patternfly.form
311
*
412
* @description
@@ -13,6 +21,7 @@ angular.module('patternfly.form', []);
1321
*/
1422
angular.module('patternfly', [
1523
'patternfly.autofocus',
24+
'patternfly.card',
1625
'patternfly.form',
1726
'patternfly.notification',
1827
'patternfly.select',
@@ -76,6 +85,45 @@ angular.module('patternfly.autofocus', []).directive('pfFocused', function($time
7685
}
7786
};
7887
});
88+
;/**
89+
* @ngdoc directive
90+
* @name patternfly.card:pfCard
91+
* @restrict A
92+
* @element ANY
93+
* @param {headTitle=} Title for the card - required
94+
* @param {subtTtle=} Subtitle for the card - optional
95+
* @param {showTopBorder=} Show Top Border, true shows top border, false (default) hides top border - optional
96+
*
97+
* @description
98+
* Directive for easily displaying a card with html content
99+
*
100+
* @example
101+
<example module="patternfly.card">
102+
103+
<file name="index.html">
104+
<div pf-card head-title="My Card Title" sub-title="My card subtitle" show-top-border="true">
105+
<button>Click Me</button>
106+
</div>
107+
</file>
108+
109+
</example>
110+
*/
111+
angular.module('patternfly.card').directive('pfCard', function() {
112+
'use strict';
113+
114+
return {
115+
restrict: 'A',
116+
transclude: true,
117+
templateUrl: 'card/basic/card.html',
118+
scope: {
119+
headTitle: '@',
120+
subTitle: '@',
121+
showTopBorder: '@'
122+
}
123+
};
124+
});
125+
126+
79127
;/**
80128
* @ngdoc directive
81129
* @name patternfly.form.directive:pfDatepicker
@@ -934,7 +982,15 @@ angular.module('patternfly.validation', []).directive('pfValidation', function($
934982
}
935983
}
936984
};
937-
});;angular.module('patternfly.form').run(['$templateCache', function($templateCache) {
985+
});;angular.module('patternfly.card').run(['$templateCache', function($templateCache) {
986+
'use strict';
987+
988+
$templateCache.put('card/basic/card.html',
989+
"<div ng-class=\"showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'\"><div class=card-pf-heading><h2 class=card-pf-title>{{headTitle}}</h2></div><span ng-if=subTitle class=card-pf-subtitle>{{subTitle}}</span><div class=card-pf-body><div ng-transclude></div></div></div>"
990+
);
991+
992+
}]);
993+
;angular.module('patternfly.form').run(['$templateCache', function($templateCache) {
938994
'use strict';
939995

940996
$templateCache.put('form/datepicker/datepicker.html',

‎dist/angular-patternfly.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/card/basic/card.directive.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.card:pfCard
4+
* @restrict A
5+
* @element ANY
6+
* @param {headTitle=} Title for the card - required
7+
* @param {subtTtle=} Subtitle for the card - optional
8+
* @param {showTopBorder=} Show Top Border, true shows top border, false (default) hides top border - optional
9+
*
10+
* @description
11+
* Directive for easily displaying a card with html content
12+
*
13+
* @example
14+
<example module="patternfly.card">
15+
16+
<file name="index.html">
17+
<div pf-card head-title="My Card Title" sub-title="My card subtitle" show-top-border="true">
18+
<button>Click Me</button>
19+
</div>
20+
</file>
21+
22+
</example>
23+
*/
24+
angular.module('patternfly.card').directive('pfCard', function() {
25+
'use strict';
26+
27+
return {
28+
restrict: 'A',
29+
transclude: true,
30+
templateUrl: 'card/basic/card.html',
31+
scope: {
32+
headTitle: '@',
33+
subTitle: '@',
34+
showTopBorder: '@'
35+
}
36+
};
37+
});
38+
39+

‎src/card/basic/card.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div ng-class="showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
2+
<div class="card-pf-heading">
3+
<h2 class="card-pf-title">{{headTitle}}</h2>
4+
</div>
5+
<span ng-if="subTitle" class="card-pf-subtitle">{{subTitle}}</span>
6+
<div class="card-pf-body">
7+
<div ng-transclude></div>
8+
</div>
9+
</div>

‎src/card/card.module.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @name patternfly card
3+
*
4+
* @description
5+
* Card module for patternfly.
6+
*
7+
*/
8+
angular.module('patternfly.card', []);

‎src/patternfly.module.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
*/
77
angular.module('patternfly', [
88
'patternfly.autofocus',
9+
'patternfly.card',
910
'patternfly.form',
1011
'patternfly.notification',
1112
'patternfly.select',

‎test/card/basic/card.spec.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
describe('Directive: pfCard', function() {
2+
var $scope, $compile, element, headTitle, subTitle, cardClass, innerContent;
3+
4+
beforeEach(module(
5+
'patternfly.card',
6+
'card/basic/card.html'
7+
));
8+
9+
beforeEach(inject(function(_$compile_, _$rootScope_) {
10+
$compile = _$compile_;
11+
$scope = _$rootScope_;
12+
}));
13+
14+
describe('Page with pf-card directive', function () {
15+
16+
var compileCard = function (markup, scope) {
17+
var el = $compile(markup)(scope);
18+
scope.$digest();
19+
return el;
20+
};
21+
22+
it("should set the headTitle and subTitle and inner content", function() {
23+
24+
element = compileCard('<div pf-card head-title="My card title" sub-title="My card subtitle title">Inner content goes here</div>', $scope);
25+
26+
headTitle = angular.element(element).find('.card-pf-title').html();
27+
expect(headTitle).toBe("My card title");
28+
29+
subTitle = angular.element(element).find('.card-pf-subtitle').html();
30+
expect(subTitle).toBe("My card subtitle title");
31+
32+
innerContent = angular.element(element).find('.card-pf-body span').html();
33+
expect(innerContent).toBe("Inner content goes here");
34+
35+
// By default, showTopBorder if not defined, should be false, resulting in hiding the top
36+
// border, ie. having a .card-pf class
37+
cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented');
38+
expect(cardClass).toBeFalsy();
39+
});
40+
41+
it("should show the top border", function() {
42+
43+
element = compileCard('<div pf-card head-title="My card title" sub-title="My card subtitle title" show-top-border="true">Inner content goes here</div>', $scope);
44+
45+
// showTopBorder set to true, results in having the .card-pf-accented class
46+
cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented');
47+
expect(cardClass).toBeTruthy();
48+
49+
});
50+
51+
it("should hide the top border", function() {
52+
53+
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);
54+
55+
// showTopBorder set to false, results in not having the .card-pf-accented class
56+
cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-accented');
57+
expect(cardClass).toBeFalsy();
58+
59+
});
60+
61+
});
62+
});

0 commit comments

Comments
 (0)