Merge pull request #126 from kylekim-oicr/master

 Isotope Grid V2

Author: culturedbarbarian

.storybook/config.js

@@ -19,7 +19,6 @@ function loadStories() {
     require('../stories/UserDrawer');
     require('../stories/FilteredList');
     require('../stories/FilteredTable');
-    require('../stories/FilteredIsotope');
     require('../stories/TwitterFeed');
     require('../stories/Spinner');
     require('../stories/PasswordValidator');

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;