Dashboard Card Update

Author: Kyle Kim

src/DashboardCard/DashboardCard.jsx

@@ -2,6 +2,7 @@ import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Card from '../Card/Card';
+import { stringifyValues } from '../util/stringifyValues';
 
 const DashboardCardBody = ({ role, className, children }) => (
     <div role={role} className={classNames(className, 'form-box-body')}>
@@ -42,16 +43,32 @@ DashboardCardFooter.defaultProps = {
     hover: false,
 };
 
+const DashboardCardFilterData = ({ role, data }) => (
+    <span role={role} className="hide isotope-search" aria-hidden="true" hidden>
+        {stringifyValues(data)}
+    </span>
+);
+
+DashboardCardFilterData.propTypes = {
+    role: PropTypes.string,
+    data: PropTypes.object,
+};
+
+DashboardCardFilterData.defaultProps = {
+    role: 'filterData',
+};
+
 const BODY_ROLE = DashboardCardBody.defaultProps.role;
 const FOOTER_ROLE = DashboardCardFooter.defaultProps.role;
+const DATA_ROLE = DashboardCardFilterData.defaultProps.role;
 
 class DashboardCard extends React.Component {
     render() {
-        const { className, children, cardStyle } = this.props;
+        const { className, children, data, cardStyle } = this.props;
 
         return (
-            <Card className={classNames(className, 'form-box')} cardStyle={cardStyle}>
-                <Card.Body>
+            <Card className={classNames(className, 'form-box-container')}>
+                <Card.Body className="form-box">
                     {children &&
                         ((Array.isArray(children) &&
                             children.map((child, key) => {
@@ -64,6 +81,7 @@ class DashboardCard extends React.Component {
                                 }
                             })) ||
                             cloneElement(children))}
+                    {data && <DashboardCardFilterData data={data} />}
                 </Card.Body>
             </Card>
         );
@@ -73,7 +91,7 @@ class DashboardCard extends React.Component {
 DashboardCard.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    cardStyle: PropTypes.object,
+    data: PropTypes.object,
 };
 
 DashboardCard.Body = DashboardCardBody;

src/DashboardCard/index.scss

@@ -1,16 +1,20 @@
-.form-box {
+.form-box-container {
     width: 100%;
     margin-bottom: 20px;
-    border: 1px solid #dadada;
     border-top: 5px solid #000;
 
+    .form-box {
+        border: 1px solid #dadada;
+        border-top: none;
+    }
+
     .form-box-body {
         padding: 10px 15px;
         background-color: #fff;
     }
 
     .form-box-footer {
-        border-right: none;
+        border-top: 1px solid #dadada;
 
         ul.form-box-links {
             display: flex;
@@ -20,13 +24,18 @@
             padding: 0;
 
             > li {
+                border-right: 1px solid #dadada;
                 flex: 1;
                 font-size: 16px;
                 font-weight: 600;
                 background-color: #f7f9fa;
                 text-align: center;
                 padding: 5px 0;
             }
+
+            > li:last-child {
+                border-right: none;
+            }
         }
     }
 }

stories/DashboardCard/StoryBasicExample.src

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