Sketching chips array for showing active filters

src/client/components/facet_bar/ChipsArray.js

@@ -2,15 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
-import Paper from '@material-ui/core/Paper';
-//import TagFacesIcon from '@material-ui/icons/TagFaces';
+//import Paper from '@material-ui/core/Paper';
 
 const styles = theme => ({
   root: {
     display: 'flex',
     justifyContent: 'center',
     flexWrap: 'wrap',
-    padding: theme.spacing.unit / 2,
+    //padding: theme.spacing.unit / 2,
   },
   chip: {
     margin: theme.spacing.unit / 2,
@@ -36,7 +35,7 @@ class ChipsArray extends React.Component {
   render() {
     const { classes, data } = this.props;
     return (
-      <Paper className={classes.root}>
+      <div className={classes.root}>
         {data !== null && data.map(item => {
           let icon = null;
 
@@ -54,14 +53,14 @@ class ChipsArray extends React.Component {
             />
           );
         })}
-      </Paper>
+      </div>
     );
   }
 }
 
 ChipsArray.propTypes = {
   classes: PropTypes.object.isRequired,
-  data: PropTypes.object,
+  data: PropTypes.array,
 };
 
 export default withStyles(styles)(ChipsArray);

src/client/components/facet_bar/FacetBar.js

@@ -5,6 +5,8 @@ import Tree from './Tree';
 import DateSlider from './slider/DateSlider';
 import Paper from '@material-ui/core/Paper';
 import FacetHeader from './FacetHeader';
+import Typography from '@material-ui/core/Typography';
+import ChipsArray from './ChipsArray';
 
 const styles = theme => ({
   root: {
@@ -42,6 +44,9 @@ const styles = theme => ({
   },
   facetHeaderButtons: {
     marginLeft: 'auto'
+  },
+  textContainer: {
+    padding: theme.spacing.unit
   }
 });
 
@@ -52,6 +57,26 @@ class FacetBar extends React.Component {
     const { facetUpdateID, updatedFacet, facets } = this.props.facetData;
     return (
       <div className={classes.root}>
+        <Paper className={classes.facetContainer}>
+          <FacetHeader
+            facet={{ label: 'Active filters'}}
+          />
+          <div className={classes.textContainer}>
+
+            <ChipsArray data={[
+              { key: 0, label: 'property0, value' },
+              { key: 1, label: 'property1, value' },
+              { key: 2, label: 'property2, value' },
+              { key: 3, label: 'property3, value' },
+              { key: 4, label: 'property4, value' },]} />
+          </div>
+        </Paper>
+        <Paper className={classes.facetContainer}>
+          <div className={classes.textContainer}>
+            <Typography variant="h6">Showing 1-25 of 214997 manuscripts, narrow down by:</Typography>
+          </div>
+        </Paper>
+
         {Object.keys(facets).map(id => {
           return (
             <Paper key={id} className={classes.facetContainer}>

src/client/components/facet_bar/FacetHeader.js

@@ -189,12 +189,12 @@ class FacetHeader extends React.Component {
 
 FacetHeader.propTypes = {
   classes: PropTypes.object.isRequired,
-  facetID: PropTypes.string.isRequired,
-  facet: PropTypes.object.isRequired,
-  facetClass: PropTypes.string.isRequired,
-  resultClass: PropTypes.string.isRequired,
-  fetchFacet: PropTypes.func.isRequired,
-  updateFacetOption: PropTypes.func.isRequired
+  facetID: PropTypes.string,
+  facet: PropTypes.object,
+  facetClass: PropTypes.string,
+  resultClass: PropTypes.string,
+  fetchFacet: PropTypes.func,
+  updateFacetOption: PropTypes.func,
 };
 
 export default withStyles(styles)(FacetHeader);