DashboardCard + Isotope Grid Version 1

Author: Kyle Kim

dist/_wfui-react.scss

@@ -1087,6 +1087,34 @@ html {
     .widget .widget__body .widget__body__header {
       margin-top: 8px;
       margin-bottom: 8px; }
+.form-box-container {
+  width: 100%;
+  margin-bottom: 20px;
+  border-top: 5px solid #000; }
+  .form-box-container .form-box {
+    border: 1px solid #dadada;
+    border-top: none; }
+  .form-box-container .form-box-body {
+    padding: 10px 15px;
+    background-color: #fff; }
+  .form-box-container .form-box-footer {
+    border-top: 1px solid #dadada; }
+    .form-box-container .form-box-footer ul.form-box-links {
+      display: flex;
+      flex-wrap: nowrap;
+      list-style: none;
+      margin: 0;
+      padding: 0; }
+      .form-box-container .form-box-footer ul.form-box-links > li {
+        border-right: 1px solid #dadada;
+        flex: 1;
+        font-size: 16px;
+        font-weight: 600;
+        background-color: #f7f9fa;
+        text-align: center;
+        padding: 5px 0; }
+      .form-box-container .form-box-footer ul.form-box-links > li:last-child {
+        border-right: none; }
 html {
   box-sizing: border-box;
   font-size: 16px; }

lib/DashboardCard/DashboardCard.js

@@ -70,7 +70,11 @@ var DashboardCardFooter = function DashboardCardFooter(_ref2) {
                     { key: key },
                     (0, _react.cloneElement)(child)
                 );
-            }) || (0, _react.cloneElement)(children, { key: 0 })
+            }) || _react2.default.createElement(
+                'li',
+                null,
+                (0, _react.cloneElement)(children)
+            )
         )
     ) : null;
 };
@@ -123,12 +127,13 @@ var DashboardCard = function (_React$Component) {
             var _props = this.props,
                 className = _props.className,
                 children = _props.children,
-                data = _props.data;
+                data = _props.data,
+                style = _props.style;
 
 
             return _react2.default.createElement(
                 _Card2.default,
-                { className: (0, _classnames2.default)(className, 'form-box-container') },
+                { className: (0, _classnames2.default)(className, 'form-box-container'), cardStyle: style },
                 _react2.default.createElement(
                     _Card2.default.Body,
                     { className: 'form-box' },
@@ -153,7 +158,8 @@ var DashboardCard = function (_React$Component) {
 DashboardCard.propTypes = {
     children: _propTypes2.default.node,
     className: _propTypes2.default.string,
-    data: _propTypes2.default.object
+    data: _propTypes2.default.object,
+    style: _propTypes2.default.object
 };
 
 DashboardCard.Body = DashboardCardBody;

lib/IsotopeGrid/IsotopeGrid.js

@@ -65,7 +65,11 @@ var IsotopeItem = function IsotopeItem(_ref) {
         children = _ref.children;
     return width ? _react2.default.createElement(
         'div',
-        { key: key, className: (0, _classnames2.default)(id + '-item', 'wfui-isotope-item'), style: { width: width } },
+        {
+            key: key,
+            className: (0, _classnames2.default)(id + '-item', 'wfui-isotope-item'),
+            style: { width: width + 'px' }
+        },
         children
     ) : _react2.default.createElement(
         _reactBootstrap.Col,
@@ -320,8 +324,9 @@ IsotopeGrid.propTypes = {
 
 IsotopeGrid.defaultProps = {
     searchTerm: '',
-    sm: 12,
-    md: 6,
+    xs: 12,
+    sm: 6,
+    md: 4,
     lg: 4
 };
 

lib/styles.js

@@ -10,6 +10,7 @@ require('./CaGForms/Selection/selection.scss');
 
 require('./FullCalendar/fullcalendar.min.css');
 require('./DashboardBox/index.scss');
+require('./DashboardCard/index.scss');
 require('./UserDrawer/index.scss');
 require('./FormFields/index.scss');
 require('./Card/index.scss');

src/DashboardCard/DashboardCard.jsx

@@ -26,8 +26,9 @@ const DashboardCardFooter = ({ role, className, children }) =>
         <div role={role} className={classNames(className, 'form-box-footer')}>
             <ul className="form-box-links">
                 {(Array.isArray(children) &&
-                    children.map((child, key) => <li key={key}>{cloneElement(child)}</li>)) ||
-                    cloneElement(children, { key: 0 })}
+                    children.map((child, key) => <li key={key}>{cloneElement(child)}</li>)) || (
+                    <li>{cloneElement(children)}</li>
+                )}
             </ul>
         </div>
     ) : null;
@@ -63,10 +64,10 @@ const FOOTER_ROLE = DashboardCardFooter.defaultProps.role;
 
 class DashboardCard extends React.Component {
     render() {
-        const { className, children, data } = this.props;
+        const { className, children, data, style } = this.props;
 
         return (
-            <Card className={classNames(className, 'form-box-container')}>
+            <Card className={classNames(className, 'form-box-container')} cardStyle={style}>
                 <Card.Body className="form-box">
                     {children &&
                         ((Array.isArray(children) &&
@@ -91,6 +92,7 @@ DashboardCard.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     data: PropTypes.object,
+    style: PropTypes.object,
 };
 
 DashboardCard.Body = DashboardCardBody;

src/IsotopeGrid/IsotopeGrid.jsx

@@ -24,7 +24,11 @@ const columnProps = PropTypes.oneOfType([
 
 const IsotopeItem = ({ key, id, width, xs, sm, md, lg, children }) =>
     width ? (
-        <div key={key} className={classNames(`${id}-item`, 'wfui-isotope-item')} style={{ width }}>
+        <div
+            key={key}
+            className={classNames(`${id}-item`, 'wfui-isotope-item')}
+            style={{ width: `${width}px` }}
+        >
             {children}
         </div>
     ) : (
@@ -259,8 +263,9 @@ IsotopeGrid.propTypes = {
 
 IsotopeGrid.defaultProps = {
     searchTerm: '',
-    sm: 12,
-    md: 6,
+    xs: 12,
+    sm: 6,
+    md: 4,
     lg: 4,
 };
 

src/styles.js

@@ -8,6 +8,7 @@ require('./CaGForms/Selection/selection.scss');
 
 require('./FullCalendar/fullcalendar.min.css');
 require('./DashboardBox/index.scss');
+require('./DashboardCard/index.scss');
 require('./UserDrawer/index.scss');
 require('./FormFields/index.scss');
 require('./Card/index.scss');

stories/DashboardCard/StoryBasicExample.src

@@ -1,6 +1,6 @@
 const example = (
     <div>
-        <DashboardCard DashboardCardStyle={{ "border": "1px solid #000" }}>
+        <DashboardCard>
             <DashboardCard.Body>
                 <div className="form-title-container">
                     <h2 className="form-box-title">Request a Jira Project</h2>

stories/IsotopeGrid/StoryBasicExample.src

@@ -40,7 +40,15 @@ class IsotopeGridContainer extends React.Component {
         return (
             <div>
                 <IsotopeGrid id="tester" searchTerm={searchTerm}>
-                    {data && data.map(item => <IsotopeGrid.Item><h1 className="isotope-search">{item}</h1></IsotopeGrid.Item>)}
+                    {data && data.map(item => (
+                        <IsotopeGrid.Item>
+                            <DashboardCard>
+                                <DashboardCard.Body>
+                                    <h1 className="isotope-search">{item}</h1>
+                                </DashboardCard.Body>
+                            </DashboardCard>
+                        </IsotopeGrid.Item>
+                    ))}
                     <IsotopeGrid.Item>
                     <h1>Test 1</h1>
                     </IsotopeGrid.Item>

stories/IsotopeGrid/index.js

@@ -7,6 +7,8 @@ import StoryBasicExample from 'raw!./StoryBasicExample.src';
 import { Provider } from 'react-redux';
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
 import { visibilityFilterReducer } from '../../src/util/visibilityFilter';
+import DashboardCard from '../../src/DashboardCard/DashboardCard';
+import '../../src/DashboardCard/index.scss';
 
 const store = createStore(
     combineReducers({
@@ -16,5 +18,5 @@ const store = createStore(
     compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f),
 );
 storiesOf('IsotopeGrid', module).addWithInfo('Basic Example', () => StoryBasicExample, {
-    scope: { Provider, store, IsotopeGrid, Button, ButtonGroup },
+    scope: { Provider, store, IsotopeGrid, DashboardCard, Button, ButtonGroup },
 });