Skip to content

Commit 945d550

Browse files
author
Kyle Kim
committed
Dashboard Card Draft 1
1 parent 688e322 commit 945d550

8 files changed

Lines changed: 327 additions & 38 deletions

File tree

‎.storybook/config.js‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,32 @@ import 'bootstrap/dist/css/bootstrap.css';
88
setAddon(InfoAddon);
99

1010
function loadStories() {
11-
require('../stories/Test');
12-
require('../stories/ReactBootstrap');
13-
require('../stories/ReactMarkdown');
14-
require('../stories/Card');
15-
require('../stories/Drawer');
16-
require('../stories/GroupsDrawer');
17-
require('../stories/UserDrawer');
18-
require('../stories/FilteredList');
19-
require('../stories/FilteredTable');
20-
require('../stories/FilteredIsotope');
21-
require('../stories/TwitterFeed');
22-
require('../stories/Spinner');
23-
require('../stories/PasswordValidator');
24-
require('../stories/Notification');
25-
require('../stories/Dropzone');
26-
require('../stories/Draggable');
27-
require('../stories/DashboardBox');
28-
require('../stories/TimezonePicker');
29-
// require('../stories/CaGForms');
30-
require('../stories/FullCalendar');
31-
require('../stories/DisqusFeed');
32-
require('../stories/LoadingComponent');
33-
require('../stories/Search');
34-
require('../stories/FormFields');
35-
require('../stories/Dropdown');
11+
require('../stories/Test');
12+
require('../stories/ReactBootstrap');
13+
require('../stories/ReactMarkdown');
14+
require('../stories/Card');
15+
require('../stories/DashboardCard');
16+
require('../stories/Drawer');
17+
require('../stories/GroupsDrawer');
18+
require('../stories/UserDrawer');
19+
require('../stories/FilteredList');
20+
require('../stories/FilteredTable');
21+
require('../stories/FilteredIsotope');
22+
require('../stories/TwitterFeed');
23+
require('../stories/Spinner');
24+
require('../stories/PasswordValidator');
25+
require('../stories/Notification');
26+
require('../stories/Dropzone');
27+
require('../stories/Draggable');
28+
require('../stories/DashboardBox');
29+
require('../stories/TimezonePicker');
30+
// require('../stories/CaGForms');
31+
require('../stories/FullCalendar');
32+
require('../stories/DisqusFeed');
33+
require('../stories/LoadingComponent');
34+
require('../stories/Search');
35+
require('../stories/FormFields');
36+
require('../stories/Dropdown');
3637
}
3738

3839
configure(loadStories, module);

‎lib/Card/Card.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ var Card = function (_React$Component) {
6969
children = _props.children,
7070
cardStyle = _props.cardStyle;
7171

72-
console.log(children);
72+
7373
return _react2.default.createElement(
7474
'div',
7575
{

‎lib/DashboardCard/DashboardCard.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8+
9+
var _react = require('react');
10+
11+
var _react2 = _interopRequireDefault(_react);
12+
13+
var _propTypes = require('prop-types');
14+
15+
var _propTypes2 = _interopRequireDefault(_propTypes);
16+
17+
var _classnames = require('classnames');
18+
19+
var _classnames2 = _interopRequireDefault(_classnames);
20+
21+
var _Card = require('../Card/Card');
22+
23+
var _Card2 = _interopRequireDefault(_Card);
24+
25+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26+
27+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
28+
29+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
30+
31+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
32+
33+
var DashboardCardBody = function DashboardCardBody(_ref) {
34+
var role = _ref.role,
35+
className = _ref.className,
36+
children = _ref.children;
37+
return _react2.default.createElement(
38+
'div',
39+
{ role: role, className: (0, _classnames2.default)(className, 'form-box-body') },
40+
children
41+
);
42+
};
43+
44+
DashboardCardBody.propTypes = {
45+
children: _propTypes2.default.node,
46+
className: _propTypes2.default.string,
47+
role: _propTypes2.default.string
48+
};
49+
50+
DashboardCardBody.defaultProps = {
51+
role: 'body',
52+
hover: false
53+
};
54+
55+
var DashboardCardFooter = function DashboardCardFooter(_ref2) {
56+
var role = _ref2.role,
57+
className = _ref2.className,
58+
children = _ref2.children;
59+
return children ? _react2.default.createElement(
60+
'div',
61+
{ role: role, className: (0, _classnames2.default)(className, 'form-box-footer') },
62+
_react2.default.createElement(
63+
'ul',
64+
{ className: 'form-box-links' },
65+
Array.isArray(children) && children.map(function (child, key) {
66+
return _react2.default.createElement(
67+
'li',
68+
{ key: key },
69+
undefined.renderChild(child)
70+
);
71+
}) || undefined.renderChild(children, 0)
72+
)
73+
) : null;
74+
};
75+
76+
DashboardCardFooter.propTypes = {
77+
children: _propTypes2.default.node,
78+
className: _propTypes2.default.string,
79+
role: _propTypes2.default.string
80+
};
81+
82+
DashboardCardFooter.defaultProps = {
83+
role: 'footer',
84+
hover: false
85+
};
86+
87+
var BODY_ROLE = DashboardCardBody.defaultProps.role;
88+
var FOOTER_ROLE = DashboardCardFooter.defaultProps.role;
89+
90+
var DashboardCard = function (_React$Component) {
91+
_inherits(DashboardCard, _React$Component);
92+
93+
function DashboardCard() {
94+
_classCallCheck(this, DashboardCard);
95+
96+
return _possibleConstructorReturn(this, (DashboardCard.__proto__ || Object.getPrototypeOf(DashboardCard)).apply(this, arguments));
97+
}
98+
99+
_createClass(DashboardCard, [{
100+
key: 'render',
101+
value: function render() {
102+
var _this2 = this;
103+
104+
var _props = this.props,
105+
className = _props.className,
106+
children = _props.children,
107+
cardStyle = _props.cardStyle;
108+
109+
110+
return _react2.default.createElement(
111+
_Card2.default,
112+
{ className: (0, _classnames2.default)(className, 'form-box'), cardStyle: cardStyle },
113+
_react2.default.createElement(
114+
_Card2.default.Body,
115+
null,
116+
children && (Array.isArray(children) && children.map(function (child, key) {
117+
switch (child.props.role) {
118+
case BODY_ROLE:
119+
case FOOTER_ROLE:
120+
return _this2.renderChild(child, key);
121+
default:
122+
return child;
123+
}
124+
}) || this.renderChild(children, 0))
125+
)
126+
);
127+
}
128+
}]);
129+
130+
return DashboardCard;
131+
}(_react2.default.Component);
132+
133+
DashboardCard.propTypes = {
134+
children: _propTypes2.default.node,
135+
className: _propTypes2.default.string,
136+
cardStyle: _propTypes2.default.object
137+
};
138+
139+
DashboardCard.Body = DashboardCardBody;
140+
DashboardCard.Footer = DashboardCardFooter;
141+
142+
exports.default = DashboardCard;

‎src/Card/Card.jsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,26 @@ class Card extends React.Component {
2323

2424
render() {
2525
const { className, children, cardStyle } = this.props;
26-
console.log(children);
26+
2727
return (
2828
<div
2929
className={classNames(className, 'wfui-card wfui-card-container')}
3030
onMouseOver={() => this.setState({ hover: true })}
3131
onMouseLeave={() => this.setState({ hover: false })}
3232
style={cardStyle || {}}
3333
>
34-
{ children && ((Array.isArray(children) && (
35-
children.map((child, key) => {
36-
switch (child.props.role) {
37-
case BODY_ROLE:
38-
case HOVER_ROLE:
39-
return this.renderChild(child, key);
40-
default:
41-
return child;
42-
}
43-
}))) || this.renderChild(children, 0))
44-
}
34+
{children &&
35+
((Array.isArray(children) &&
36+
children.map((child, key) => {
37+
switch (child.props.role) {
38+
case BODY_ROLE:
39+
case HOVER_ROLE:
40+
return this.renderChild(child, key);
41+
default:
42+
return child;
43+
}
44+
})) ||
45+
this.renderChild(children, 0))}
4546
</div>
4647
);
4748
}

‎src/DashboardCard/DashboardCard.jsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React, { cloneElement } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
import Card from '../Card/Card';
5+
6+
const DashboardCardBody = ({ role, className, children }) => (
7+
<div role={role} className={classNames(className, 'form-box-body')}>
8+
{children}
9+
</div>
10+
);
11+
12+
DashboardCardBody.propTypes = {
13+
children: PropTypes.node,
14+
className: PropTypes.string,
15+
role: PropTypes.string,
16+
};
17+
18+
DashboardCardBody.defaultProps = {
19+
role: 'body',
20+
hover: false,
21+
};
22+
23+
const DashboardCardFooter = ({ role, className, children }) =>
24+
children ? (
25+
<div role={role} className={classNames(className, 'form-box-footer')}>
26+
<ul className="form-box-links">
27+
{(Array.isArray(children) &&
28+
children.map((child, key) => <li key={key}>{cloneElement(child)}</li>)) ||
29+
cloneElement(children, { key: 0 })}
30+
</ul>
31+
</div>
32+
) : null;
33+
34+
DashboardCardFooter.propTypes = {
35+
children: PropTypes.node,
36+
className: PropTypes.string,
37+
role: PropTypes.string,
38+
};
39+
40+
DashboardCardFooter.defaultProps = {
41+
role: 'footer',
42+
hover: false,
43+
};
44+
45+
const BODY_ROLE = DashboardCardBody.defaultProps.role;
46+
const FOOTER_ROLE = DashboardCardFooter.defaultProps.role;
47+
48+
class DashboardCard extends React.Component {
49+
render() {
50+
const { className, children, cardStyle } = this.props;
51+
52+
return (
53+
<Card className={classNames(className, 'form-box')} cardStyle={cardStyle}>
54+
<Card.Body>
55+
{children &&
56+
((Array.isArray(children) &&
57+
children.map((child, key) => {
58+
switch (child.props.role) {
59+
case BODY_ROLE:
60+
case FOOTER_ROLE:
61+
return cloneElement(child, { key });
62+
default:
63+
return child;
64+
}
65+
})) ||
66+
cloneElement(children))}
67+
</Card.Body>
68+
</Card>
69+
);
70+
}
71+
}
72+
73+
DashboardCard.propTypes = {
74+
children: PropTypes.node,
75+
className: PropTypes.string,
76+
cardStyle: PropTypes.object,
77+
};
78+
79+
DashboardCard.Body = DashboardCardBody;
80+
DashboardCard.Footer = DashboardCardFooter;
81+
82+
export default DashboardCard;

‎src/DashboardCard/index.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.form-box {
2+
width: 100%;
3+
margin-bottom: 20px;
4+
border: 1px solid #dadada;
5+
border-top: 5px solid #000;
6+
7+
.form-box-body {
8+
padding: 10px 15px;
9+
background-color: #fff;
10+
}
11+
12+
.form-box-footer {
13+
border-right: none;
14+
15+
ul.form-box-links {
16+
display: flex;
17+
flex-wrap: nowrap;
18+
list-style: none;
19+
margin: 0;
20+
padding: 0;
21+
22+
> li {
23+
flex: 1;
24+
font-size: 16px;
25+
font-weight: 600;
26+
background-color: #f7f9fa;
27+
text-align: center;
28+
padding: 5px 0;
29+
}
30+
}
31+
}
32+
}

‎stories/DashboardCard/StoryBasicExample.src‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const example = (
2+
<div>
3+
<DashboardCard className="col-xs-4" DashboardCardStyle={{ "border": "1px solid #000" }}>
4+
<DashboardCard.Body>
5+
<div className="form-title-container">
6+
<h2 className="form-box-title">Request a Jira Project</h2>
7+
</div>
8+
<p>
9+
A JIRA project helps your team track tasks and issues as cases. These cases allow you manage changes and progress with your team.
10+
</p>
11+
</DashboardCard.Body>
12+
<DashboardCard.Footer>
13+
<a href="#" class="form-box-link request-form-link" title="Request From">Request Form</a>
14+
<a href="#" class="form-box-link app-website-link" title="Visit Jira Website">jira.oicr.on.ca</a>
15+
</DashboardCard.Footer>
16+
</DashboardCard>
17+
</div>
18+
);
19+
20+
return example;

‎stories/DashboardCard/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* eslint import/no-unresolved: 0 */
2+
/* eslint import/no-webpack-loader-syntax: 0 */
3+
import React from 'react';
4+
import { storiesOf } from '@kadira/storybook';
5+
import StoryBasicExample from 'raw!./StoryBasicExample.src';
6+
import DashboardCard from '../../src/DashboardCard/DashboardCard';
7+
import '../../src/DashboardCard/index.scss';
8+
9+
storiesOf('DashboardCard', module).addWithInfo('Basic Example', () => StoryBasicExample, {
10+
scope: { DashboardCard },
11+
});

0 commit comments

Comments
 (0)