IsotopeGrid

Author: Kyle Kim

.storybook/config.js

@@ -13,6 +13,7 @@ function loadStories() {
     require('../stories/ReactMarkdown');
     require('../stories/Card');
     require('../stories/DashboardCard');
+    require('../stories/IsotopeGrid');
     require('../stories/Drawer');
     require('../stories/GroupsDrawer');
     require('../stories/UserDrawer');

lib/DashboardCard/DashboardCard.js

@@ -22,6 +22,8 @@ var _Card = require('../Card/Card');
 
 var _Card2 = _interopRequireDefault(_Card);
 
+var _stringifyValues = require('../util/stringifyValues');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -66,9 +68,9 @@ var DashboardCardFooter = function DashboardCardFooter(_ref2) {
                 return _react2.default.createElement(
                     'li',
                     { key: key },
-                    undefined.renderChild(child)
+                    (0, _react.cloneElement)(child)
                 );
-            }) || undefined.renderChild(children, 0)
+            }) || (0, _react.cloneElement)(children, { key: 0 })
         )
     ) : null;
 };
@@ -84,6 +86,25 @@ DashboardCardFooter.defaultProps = {
     hover: false
 };
 
+var DashboardCardFilterData = function DashboardCardFilterData(_ref3) {
+    var role = _ref3.role,
+        data = _ref3.data;
+    return _react2.default.createElement(
+        'span',
+        { role: role, className: 'hide isotope-search', 'aria-hidden': 'true', hidden: true },
+        (0, _stringifyValues.stringifyValues)(data)
+    );
+};
+
+DashboardCardFilterData.propTypes = {
+    role: _propTypes2.default.string,
+    data: _propTypes2.default.object
+};
+
+DashboardCardFilterData.defaultProps = {
+    role: 'filterData'
+};
+
 var BODY_ROLE = DashboardCardBody.defaultProps.role;
 var FOOTER_ROLE = DashboardCardFooter.defaultProps.role;
 
@@ -99,29 +120,28 @@ var DashboardCard = function (_React$Component) {
     _createClass(DashboardCard, [{
         key: 'render',
         value: function render() {
-            var _this2 = this;
-
             var _props = this.props,
                 className = _props.className,
                 children = _props.children,
-                cardStyle = _props.cardStyle;
+                data = _props.data;
 
 
             return _react2.default.createElement(
                 _Card2.default,
-                { className: (0, _classnames2.default)(className, 'form-box'), cardStyle: cardStyle },
+                { className: (0, _classnames2.default)(className, 'form-box-container') },
                 _react2.default.createElement(
                     _Card2.default.Body,
-                    null,
+                    { className: 'form-box' },
                     children && (Array.isArray(children) && children.map(function (child, key) {
                         switch (child.props.role) {
                             case BODY_ROLE:
                             case FOOTER_ROLE:
-                                return _this2.renderChild(child, key);
+                                return (0, _react.cloneElement)(child, { key: key });
                             default:
                                 return child;
                         }
-                    }) || this.renderChild(children, 0))
+                    }) || (0, _react.cloneElement)(children)),
+                    data && _react2.default.createElement(DashboardCardFilterData, { data: data })
                 )
             );
         }
@@ -133,7 +153,7 @@ var DashboardCard = function (_React$Component) {
 DashboardCard.propTypes = {
     children: _propTypes2.default.node,
     className: _propTypes2.default.string,
-    cardStyle: _propTypes2.default.object
+    data: _propTypes2.default.object
 };
 
 DashboardCard.Body = DashboardCardBody;