feat(Toolbar): Add Toolbar and its components (#150)

* feat(Toolbar): Add Toolbar and its components

* remove extraneous span wrapper from ToolbarFind

* Updates per review comments

* More updates per review comments

* Add more action logging for toolbar

Author: jeff-phillips-18

package-lock.json

@@ -1,9 +1,19 @@
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getContext } from 'recompose';
+import { toolbarContextTypes } from '../Toolbar/ToolbarConstants';
+
+// Disabled eslint due to `isDescendantOfToolbar` being a context property we don't want passed by consumers
+const Filter = ({ children, className, isDescendantOfToolbar, ...rest }) => { // eslint-disable-line
+  const classes = cx(
+    {
+      'filter-pf form-group': true,
+      'toolbar-pf-filter': isDescendantOfToolbar
+    },
+    className
+  );
 
-const Filter = ({ children, className, ...rest }) => {
-  const classes = cx('filter-pf form-group', className);
   return (
     <div className={classes} {...rest}>
       <div className="filter-pf-fields">
@@ -20,4 +30,4 @@ Filter.propTypes = {
   className: PropTypes.string
 };
 
-export default Filter;
+export default getContext(toolbarContextTypes)(Filter);

src/components/Filter/Filter.js

@@ -8,7 +8,10 @@ import {
   FilterTypeSelector,
   FilterValueSelector,
   FilterCategorySelector,
-  FilterCategoryValueSelector
+  FilterCategoryValueSelector,
+  FilterActiveLabel,
+  FilterList,
+  FilterItem
 } from '../../index';
 
 import {
@@ -34,7 +37,10 @@ stories.add(
       FilterTypeSelector,
       FilterValueSelector,
       FilterCategorySelector,
-      FilterCategoryValueSelector
+      FilterCategoryValueSelector,
+      FilterActiveLabel,
+      FilterList,
+      FilterItem
     ],
     propTablesExclude: [MockFilterExample],
     text: (

src/components/Filter/Filter.stories.js

@@ -1,24 +1,18 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import {
-  Filter,
-  FilterTypeSelector,
-  FilterValueSelector,
-  FilterCategorySelector,
-  FilterCategoryValueSelector
-} from '../../index';
+import { Filter, FormControl, Toolbar } from '../../index';
 import { mockFilterExampleFields } from './__mocks__/mockFilterExample';
 
 test('Filter input renders properly', () => {
   const component = renderer.create(
     <Filter>
-      <FilterTypeSelector
+      <Filter.TypeSelector
         filterTypes={mockFilterExampleFields}
         currentFilterType={mockFilterExampleFields[0]}
       />
-      <input
-        className="form-control"
+      <FormControl
         type={mockFilterExampleFields[0].filterType}
+        id="filterInput"
         value=""
         placeholder="Filter by Name"
       />
@@ -32,11 +26,11 @@ test('Filter input renders properly', () => {
 test('Filter select renders properly', () => {
   const component = renderer.create(
     <Filter>
-      <FilterTypeSelector
+      <Filter.TypeSelector
         filterTypes={mockFilterExampleFields}
         currentFilterType={mockFilterExampleFields[2]}
       />
-      <FilterValueSelector
+      <Filter.ValueSelector
         filterValues={mockFilterExampleFields[2].filterValues}
         currentValue={mockFilterExampleFields[2].filterValues[4]}
       />
@@ -50,16 +44,16 @@ test('Filter select renders properly', () => {
 test('Filter categories renders properly', () => {
   const component = renderer.create(
     <Filter>
-      <FilterTypeSelector
+      <Filter.TypeSelector
         filterTypes={mockFilterExampleFields}
         currentFilterType={mockFilterExampleFields[3]}
       />
-      <FilterCategorySelector
+      <Filter.CategorySelector
         filterCategories={mockFilterExampleFields[3].filterCategories}
         currentCategory={mockFilterExampleFields[3].filterCategories[0]}
         placeholder={mockFilterExampleFields[3].placeholder}
       >
-        <FilterCategoryValueSelector
+        <Filter.CategoryValueSelector
           categoryValues={
             mockFilterExampleFields[3].filterCategories[0].filterValues
           }
@@ -68,10 +62,47 @@ test('Filter categories renders properly', () => {
           }
           placeholder={mockFilterExampleFields[3].filterCategoriesPlaceholder}
         />
-      </FilterCategorySelector>
+      </Filter.CategorySelector>
     </Filter>
   );
 
   const tree = component.toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+test('Filter renders properly in a Toolbar', () => {
+  const component = renderer.create(
+    <Toolbar>
+      <Filter>
+        <Filter.TypeSelector
+          filterTypes={mockFilterExampleFields}
+          currentFilterType={mockFilterExampleFields[0]}
+        />
+        <FormControl
+          type={mockFilterExampleFields[0].filterType}
+          id="filterInput"
+          value=""
+          placeholder="Filter by Name"
+        />
+      </Filter>
+    </Toolbar>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Filter active components render properly', () => {
+  const component = renderer.create(
+    <Toolbar.Results>
+      <Filter.ActiveLabel title="Active Filters:" />
+      <Filter.List>
+        <Filter.Item label={'Name: John'} />
+        <Filter.Item label={'Address: Westford'} />
+      </Filter.List>
+    </Toolbar.Results>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/Filter/Filter.test.js

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FilterActiveLabel = ({ children, className, ...rest }) => {
+  const classes = cx('filter-pf-active-label', className);
+  return <p className={classes}>{children}</p>;
+};
+
+FilterActiveLabel.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+export default FilterActiveLabel;

src/components/Filter/FilterActiveLabel.js

@@ -0,0 +1,38 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FilterItem = ({ children, className, onRemove, filterData, ...rest }) => {
+  const classes = cx(className);
+
+  return (
+    <li className={classes} {...rest}>
+      <span className="label label-info">
+        {children}
+        <a
+          href="#"
+          onClick={e => {
+            e.preventDefault();
+            onRemove && onRemove(filterData);
+          }}
+        >
+          <span className="pficon pficon-close" aria-hidden="true" />
+          <span className="sr-only">Remove</span>
+        </a>
+      </span>
+    </li>
+  );
+};
+
+FilterItem.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** additional filter item classes */
+  className: PropTypes.string,
+  /** callback when filter is removed  */
+  onRemove: PropTypes.func,
+  /** Data to pass to onRemove function */
+  filterData: PropTypes.object
+};
+
+export default FilterItem;

src/components/Filter/FilterItem.js

@@ -0,0 +1,20 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FilterList = ({ children, className, ...rest }) => {
+  if (!children) {
+    return null;
+  }
+  const classes = cx('list-inline', className);
+  return <ul className={classes}>{children}</ul>;
+};
+
+FilterList.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+export default FilterList;