@bento-core/facet-filter 1.0.1-popsci.2 → 1.0.1-popsci.4

package/README.md

@@ -95,6 +95,8 @@ export const facetsConfig = [{
     minLowerBound: 0,  
     maxUpperBound: 100,   
     quantifier: 'Years',
+    CustomLowerUpperBound: CustomLowerUpperBound, // Custom component for displaying lower and upper bounds
+    CustomSliderValue: CustomSliderValue, // Custom component for displaying slider value
 ].
 ```
 1. **apiForFiltering** refers to object key for retrieving name and subjects count from query response (DASHBOARD_QUERY)
@@ -244,12 +246,66 @@ className={clsx(classes.sectionSummaryText, classes[facetClasses])}
 ## 10  CLearAllFilterButton Component
 Bento Core provides 1. function to clear all active filters, 2. disable flag (true incase of no active filters). Client is responsible for defining view (custom html).
 ```
-import { generateClearAllFilterBtn } from 'bento-core';
+import { ClearAllFiltersBtn, FacetFilter } from '@bento-core/facet-filter';
+import { getFilters } from '@bento-core/facet-filter';
 
 const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
     //...custom component 1. bind onClearFilters fn
     // 2. disable flag to disable button
-}
+} 
+  // get filter data
+  // filterState: state.statusReducer.filterState, (from reducer)
+  // const activeFilters = getFilters(filterState) // formating
+
+  <ClearAllFiltersBtn
+    Component={CustomClearAllFiltersBtn}
+    activeFilters={activeFilters}
+  />  
+```
+
+## 11  Facet Value Component
+```
+// response 
+// filterCaseCountByProgram: [{group: "COP", subjects: 301}]
+const {
+  name,
+  customName,
+  subjects,
+  customSubjects,
+  tooltip,
+} = checkboxItem;
+
+// 1. by default facet value component display group ("COP")
+// 2. set customName to display customize value
+// 3. by default facet value component display subjects (301)
+// 4. set customSubjects to display customize value or adjust correct field for subject count
+// 5. tooltip - provide text value to tooltip text
+
+ /**
+   * Add Bento frontend filter count/subjects
+   * Add tootip text
+   */
+  const filterData = facetsConfig.reduce((acc, item) => {
+    const facetValues = searchData[item.apiPath];
+    if (!facetValues) {
+      return acc;
+    }
+    const subjectCounts = [...facetValues].map((checkbox) => {
+      const text = tooltipText[item.tooltipKey];
+      return {
+        ...checkbox,
+        customSubjects: checkbox.count,
+        tooltip: text ? text[checkbox.group] : undefined,
+      };
+    });
+    return { ...acc, [item.apiPath]: [...subjectCounts] };
+  }, {});
 
-const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn); 
+  <FacetFilter
+    data={filterData}
+    facetSectionConfig={facetSectionVariables}
+    facetsConfig={facetsConfig}
+    CustomFacetSection={CustomFacetSection}
+    CustomFacetView={CustomFacetView}
+  />
 ```

package/dist/FacetFilterController.js

@@ -12,13 +12,13 @@ var _FacetFilterView = _interopRequireDefault(require("./FacetFilterView"));
 const _excluded = ["section"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const FacetFilterController = props => {
   /**
    * update checkbox state
@@ -29,7 +29,8 @@ const FacetFilterController = props => {
     filterState,
     data,
     facetsConfig,
-    facetSectionConfig
+    facetSectionConfig,
+    tooltipText = {}
   } = props;
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
@@ -37,9 +38,16 @@ const FacetFilterController = props => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach(sideBar => {
           if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
-            sideBar.facetValues.forEach(item => {
-              item.isChecked = value[item.name] ? value[item.name] : false;
+            const {
+              facetValues = []
+            } = sideBar;
+            const updateFacetVals = facetValues.map(item => {
+              const facetVal = item[sideBar.field];
+              return _objectSpread(_objectSpread({}, item), {}, {
+                isChecked: value[facetVal] ? value[facetVal] : false
+              });
             });
+            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -49,9 +57,13 @@ const FacetFilterController = props => {
     } else {
       updateSections.forEach(sideBar => {
         if (sideBar.type === _Types.InputTypes.CHECKBOX) {
-          sideBar.facetValues.forEach(item => {
-            item.isChecked = false;
-          });
+          const {
+            facetValues = []
+          } = sideBar;
+          const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
+            isChecked: false
+          }));
+          sideBar.facetValues = updateFacetVals;
         }
         /**
          * set default value for slider - on clear all filter
@@ -96,6 +108,7 @@ const FacetFilterController = props => {
    * Construct filter object
    * 1. add facet values to facets
    * 2. add 'name' key to each facet value
+   * 3. add '
    */
   const addFacetValues = facets => {
     const updateFacets = [];
@@ -105,19 +118,13 @@ const FacetFilterController = props => {
           facetValues: []
         });
         const {
-          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const updateField = data[apiForFiltering].map(item => {
-              const addField = _objectSpread({}, item);
-              addField.name = item[field];
-              return addField;
-            });
-            updateFacet.facetValues = updateField;
+            updateFacet.facetValues = data[apiForFiltering];
           }
           /**
           * add object to facet values
@@ -140,7 +147,7 @@ const FacetFilterController = props => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter(facet => facet.show).slice(0, 16);
+  const displayFacets = facetsConfig.filter(facet => facet.show);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/dist/FacetFilterStyle.js

@@ -25,7 +25,7 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   }
 });

package/dist/FacetFilterView.js

@@ -9,7 +9,6 @@ var _core = require("@material-ui/core");
 var _FacetFilterStyle = _interopRequireDefault(require("./FacetFilterStyle"));
 var _FacetSectionView = _interopRequireDefault(require("./components/section/FacetSectionView"));
 var _ReduxFacetView = _interopRequireDefault(require("./components/facet/ReduxFacetView"));
-var _FilterItems = _interopRequireDefault(require("./components/inputs/FilterItems"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable arrow-body-style */
 /* eslint-disable padded-blocks */
@@ -29,11 +28,7 @@ const BentoFacetFilter = _ref => {
   }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
     facet: facet,
     CustomView: CustomFacetView
-  }, /*#__PURE__*/_react.default.createElement(_core.List, {
-    className: "List_".concat(facet.label)
-  }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
-    facet: facet
-  }))))))));
+  }))))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);
 exports.default = _default;

package/dist/components/facet/FacetStyle.js

@@ -46,7 +46,7 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   },
   NonSortGroup: {
@@ -57,25 +57,25 @@ var _default = () => ({
   },
   NonSortGroupItem: {
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     float: 'right',
     marginRight: '10px',
     marginTop: '5px'
   },
   highlight: {
-    color: '#b2c6d6'
+    color: '#537A9D'
   },
   showMore: {
     textAlign: 'right',
     paddingRight: '5px',
     cursor: 'pointer',
-    fontSize: '10px',
+    fontSize: '11px',
     width: '100%'
   }
 });

package/dist/components/facet/FacetView.js

@@ -35,7 +35,7 @@ const FacetView = _ref => {
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-   * expand section incase of active local search
+   * Expand section incase of active local search
    */
   (0, _react.useEffect)(() => {
     if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {

package/dist/components/inputs/checkbox/CheckboxStyle.js

@@ -8,6 +8,12 @@ var _default = () => ({
   listItemGutters: {
     padding: '10px 20px 10px 0px'
   },
+  listItemRoot: {
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)'
+    }
+  },
   checkboxRoot: {
     marginLeft: '5px',
     height: 12

package/dist/components/inputs/checkbox/CheckboxView.js

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _core = require("@material-ui/core");
+var _TouchRipple = _interopRequireDefault(require("@material-ui/core/ButtonBase/TouchRipple"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@material-ui/icons");
 var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/jsx-wrap-multilines */
@@ -18,8 +21,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable object-curly-newline */
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable no-useless-escape */
 
-const alignment = 'flex-start';
 const CheckBoxView = _ref => {
   let {
     classes,
@@ -29,19 +32,35 @@ const CheckBoxView = _ref => {
     facet
   } = _ref;
   const {
-    name,
-    subjects,
     isChecked = false,
     index,
     section,
-    tooltip,
-    label
+    tooltip
   } = checkboxItem;
+  const {
+    field = 'group',
+    count = 'subjects',
+    customCount = text => "(".concat(text, ")"),
+    defaultValue = ''
+  } = facet;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
+  const checkedSection = "".concat(section).toLowerCase().replace(/\ /g, '_');
+  const name = checkboxItem[field] || defaultValue || 'N/A';
+  const checkboxId = "checkbox_".concat(facet.label, "_").concat(name);
+  const rippleRef = (0, _react.useRef)(null);
+  const handleRippleStart = event => {
+    if (rippleRef.current) {
+      rippleRef.current.start(event);
+    }
+  };
+  const handleRippleStop = event => {
+    if (rippleRef.current) {
+      rippleRef.current.stop(event);
+    }
+  };
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: name,
+      name: checkboxItem[field],
       datafield: datafield,
       isChecked: !isChecked
     };
@@ -53,30 +72,37 @@ const CheckBoxView = _ref => {
       ["".concat(checkedSection, "NameUnChecked")]: !isChecked,
       ["".concat(checkedSection, "NameChecked")]: isChecked
     })
-  }, label ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: classes.checkboxLabel
-  }, label) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.checkboxName
   }, name));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+    component: "div",
     width: 1,
-    button: true,
     alignItems: "flex-start",
     onClick: handleToggle,
+    onMouseDown: handleRippleStart,
+    onMouseUp: handleRippleStop,
+    onMouseLeave: handleRippleStop,
     classes: {
-      gutters: classes.listItemGutters
+      gutters: classes.listItemGutters,
+      root: classes.listItemRoot
     },
     className: (0, _clsx.default)({
       ["".concat(checkedSection, "Checked").concat(indexType)]: isChecked
     })
   }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
-    id: "checkbox_".concat(facet.label, "_").concat(name),
+    id: checkboxId,
     icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
       style: {
         fontSize: 18
-      }
+      },
+      className: checkedSection
     }),
-    onClick: handleToggle,
+    inputProps: {
+      'aria-label': 'checkbox',
+      tabIndex: -1,
+      'aria-hidden': true
+    },
     checked: isChecked,
     checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
       style: {
@@ -88,18 +114,26 @@ const CheckBoxView = _ref => {
     color: "secondary",
     classes: {
       root: classes.checkboxRoot
+    },
+    style: {
+      pointerEvents: 'none'
     }
   }), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     id: datafield,
     title: tooltip
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: datafield
-  }, /*#__PURE__*/_react.default.createElement(LabelComponent, null))) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, null), /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, name)) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+    className: "".concat(checkedSection, "_md_space")
+  }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: (0, _clsx.default)("".concat(checkedSection, "Subjects"), {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked
     })
-  }, "(".concat(subjects, ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, customCount(checkboxItem[count] || 0)), /*#__PURE__*/_react.default.createElement(_TouchRipple.default, {
+    ref: rippleRef,
+    center: true
+  })), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
       backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
       margin: '0px',

package/dist/components/inputs/slider/InputMinMaxView.js

@@ -39,7 +39,8 @@ function InputMinMaxView(_ref) {
       step: 1,
       min: minLowerBound,
       max: maxUpperBound,
-      type: 'number'
+      type: 'number',
+      'aria-label': 'slider'
     }
   });
 }

package/dist/components/inputs/slider/SliderView.js

@@ -29,7 +29,9 @@ const SliderView = _ref => {
     maxUpperBound,
     quantifier,
     datafield,
-    facetValues
+    facetValues,
+    CustomLowerUpperBound,
+    CustomSliderValue
   } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
@@ -102,13 +104,24 @@ const SliderView = _ref => {
       thumb: isValid() ? classes.thumb : classes.invalidThumb,
       track: isValid() ? classes.track : classes.invalidTrack
     }
-  })), /*#__PURE__*/_react.default.createElement(_core.Box, {
+  })), typeof CustomLowerUpperBound === 'function' ? CustomLowerUpperBound({
+    minLowerBound,
+    maxUpperBound,
+    classes
+  }) : /*#__PURE__*/_react.default.createElement(_core.Box, {
     className: classes.lowerUpperBound
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.lowerBound
   }, minLowerBound), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.upperBound
-  }, maxUpperBound))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, maxUpperBound))), typeof CustomSliderValue === 'function' ? CustomSliderValue({
+    sliderValue,
+    minLowerBound,
+    maxUpperBound,
+    isValid,
+    quantifier,
+    classes
+  }) : (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };

package/dist/utils/Sort.js

@@ -46,28 +46,30 @@ const sortBySection = _ref => {
   let {
     facetValues,
     sort_type,
-    sortBy
+    sortBy,
+    field,
+    count = 'subjects'
   } = _ref;
   const sortfacetValues = [...facetValues];
   if (!sortfacetValues) {
     return facetValues;
   }
   if (sortBy === sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => b.subjects - a.subjects);
+    sortfacetValues.sort((a, b) => b[count] - a[count]);
   } else {
-    sortfacetValues.sort((a, b) => lowerCaseString(a.name) > lowerCaseString(b.name) || -(lowerCaseString(a.name) < lowerCaseString(b.name)));
+    sortfacetValues.sort((a, b) => lowerCaseString(a[field]) > lowerCaseString(b[field]) || -(lowerCaseString(a[field]) < lowerCaseString(b[field])));
   }
   if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
     sortfacetValues.sort((a, b) => {
-      const aNumbs = getNumberArray(a.name);
-      const bNumbs = getNumberArray(b.name);
+      const aNumbs = getNumberArray(a[field]);
+      const bNumbs = getNumberArray(b[field]);
       const aNumb = Number(aNumbs[0]);
       const bNumb = Number(bNumbs[0]);
       return aNumbs.length === bNumbs.length ? aNumb > bNumb : -(aNumb <= bNumb);
     });
   }
   if (sort_type === sortType.RANGE && sortBy !== sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => startIndex(a.name) > startIndex(b.name) || -(startIndex(a.name) < startIndex(b.name)));
+    sortfacetValues.sort((a, b) => startIndex(a[field]) > startIndex(b[field]) || -(startIndex(a[field]) < startIndex(b[field])));
   }
   /**
    * Display checked item always on top

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-popsci.2",
+  "version": "1.0.1-popsci.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -25,5 +25,5 @@
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "5c65b1486cf1962dce93f6e71019e6079d82a4ba"
+  "gitHead": "3b3ccdfd3f5870b13f64d3642c7d8ab1649cf632"
 }

package/src/FacetFilterController.js

@@ -25,6 +25,7 @@ const FacetFilterController = (props) => {
     data,
     facetsConfig,
     facetSectionConfig,
+    tooltipText = {},
   } = props;
 
   const updateFacetState = (filterSections) => {
@@ -33,9 +34,15 @@ const FacetFilterController = (props) => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach((sideBar) => {
           if (sideBar.type === InputTypes.CHECKBOX && sideBar.datafield === key) {
-            sideBar.facetValues.forEach((item) => {
-              item.isChecked = value[item.name] ? value[item.name] : false;
+            const { facetValues = [] } = sideBar;
+            const updateFacetVals = facetValues.map((item) => {
+              const facetVal = item[sideBar.field];
+              return {
+                ...item,
+                isChecked: value[facetVal] ? value[facetVal] : false,
+              };
             });
+            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -45,9 +52,12 @@ const FacetFilterController = (props) => {
     } else {
       updateSections.forEach((sideBar) => {
         if (sideBar.type === InputTypes.CHECKBOX) {
-          sideBar.facetValues.forEach((item) => {
-            item.isChecked = false;
-          });
+          const { facetValues = [] } = sideBar;
+          const updateFacetVals = facetValues.map((item) => ({
+            ...item,
+            isChecked: false,
+          }));
+          sideBar.facetValues = updateFacetVals;
         }
         /**
          * set default value for slider - on clear all filter
@@ -83,6 +93,7 @@ const FacetFilterController = (props) => {
    * Construct filter object
    * 1. add facet values to facets
    * 2. add 'name' key to each facet value
+   * 3. add '
    */
   const addFacetValues = (facets) => {
     const updateFacets = [];
@@ -90,19 +101,13 @@ const FacetFilterController = (props) => {
       facets.forEach((facet) => {
         const updateFacet = { ...facet, facetValues: [] };
         const {
-          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering,
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const updateField = data[apiForFiltering].map((item) => {
-              const addField = { ...item };
-              addField.name = item[field];
-              return addField;
-            });
-            updateFacet.facetValues = updateField;
+            updateFacet.facetValues = data[apiForFiltering];
           }
           /**
           * add object to facet values
@@ -125,7 +130,7 @@ const FacetFilterController = (props) => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
+  const displayFacets = facetsConfig.filter((facet) => facet.show);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/src/FacetFilterStyle.js

@@ -19,7 +19,7 @@ export default () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
 });

package/src/FacetFilterView.js

@@ -3,13 +3,11 @@
 import React from 'react';
 import {
   Divider,
-  List,
   withStyles,
 } from '@material-ui/core';
 import styles from './FacetFilterStyle';
 import FacetSectionView from './components/section/FacetSectionView';
 import FacetView from './components/facet/ReduxFacetView';
-import FilterItems from './components/inputs/FilterItems';
 
 const BentoFacetFilter = ({
   sideBarSections,
@@ -33,13 +31,7 @@ const BentoFacetFilter = ({
                 <FacetView
                   facet={facet}
                   CustomView={CustomFacetView}
-                >
-                  <List className={`List_${facet.label}`}>
-                    <FilterItems
-                      facet={facet}
-                    />
-                  </List>
-                </FacetView>
+                />
               ))}
             </FacetSectionView>
           </>

package/src/components/facet/FacetStyle.js

@@ -40,7 +40,7 @@ export default () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
   NonSortGroup: {
@@ -51,25 +51,25 @@ export default () => ({
   },
   NonSortGroupItem: {
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     float: 'right',
     marginRight: '10px',
     marginTop: '5px',
   },
   highlight: {
-    color: '#b2c6d6',
+    color: '#537A9D',
   },
   showMore: {
     textAlign: 'right',
     paddingRight: '5px',
     cursor: 'pointer',
-    fontSize: '10px',
+    fontSize: '11px',
     width: '100%',
   },
 });

package/src/components/inputs/checkbox/CheckboxStyle.js

@@ -2,6 +2,12 @@ export default () => ({
   listItemGutters: {
     padding: '10px 20px 10px 0px',
   },
+  listItemRoot: {
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+    },
+  },
   checkboxRoot: {
     marginLeft: '5px',
     height: 12,

package/src/components/inputs/checkbox/CheckboxView.js

@@ -5,7 +5,9 @@
 /* eslint-disable object-curly-newline */
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
-import React from 'react';
+/* eslint-disable no-useless-escape */
+
+import React, { useRef } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import {
   Checkbox,
@@ -15,15 +17,15 @@ import {
   Tooltip,
   Box,
   Typography,
+  ButtonBase,
 } from '@material-ui/core';
+import TouchRipple from '@material-ui/core/ButtonBase/TouchRipple';
 import clsx from 'clsx';
 import {
   CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
 } from '@material-ui/icons';
 import styles from './CheckboxStyle';
 
-const alignment = 'flex-start';
-
 const CheckBoxView = ({
   classes,
   checkboxItem,
@@ -32,20 +34,39 @@ const CheckBoxView = ({
   facet,
 }) => {
   const {
-    name,
-    subjects,
     isChecked = false,
     index,
     section,
     tooltip,
-    label,
   } = checkboxItem;
+  const {
+    field = 'group',
+    count = 'subjects',
+    customCount = (text) => `(${text})`,
+    defaultValue = '',
+  } = facet;
+
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
+  const checkedSection = `${section}`.toLowerCase().replace(/\ /g, '_');
+  const name = checkboxItem[field] || defaultValue || 'N/A';
+  const checkboxId = `checkbox_${facet.label}_${name}`;
+  const rippleRef = useRef(null);
+
+  const handleRippleStart = (event) => {
+    if (rippleRef.current) {
+      rippleRef.current.start(event);
+    }
+  };
+
+  const handleRippleStop = (event) => {
+    if (rippleRef.current) {
+      rippleRef.current.stop(event);
+    }
+  };
 
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: name,
+      name: checkboxItem[field],
       datafield: datafield,
       isChecked: !isChecked,
     };
@@ -60,65 +81,75 @@ const CheckBoxView = ({
         [`${checkedSection}NameChecked`]: isChecked,
       })}
     >
-      {label ? (
-        <Typography className={classes.checkboxLabel}>{label}</Typography>
-      ) : (<Typography className={classes.checkboxName}>{name}</Typography>)}
+      <Typography className={classes.checkboxName}>
+        {name}
+      </Typography>
     </Box>
   );
 
   return (
     <>
-      <ListItem
-        width={1}
-        button
-        alignItems="flex-start"
-        onClick={handleToggle}
-        classes={{ gutters: classes.listItemGutters }}
-        className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
-      >
-        <Checkbox
-          id={`checkbox_${facet.label}_${name}`}
-          icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
+        <ListItem
+          component="div"
+          width={1}
+          alignItems="flex-start"
           onClick={handleToggle}
-          checked={isChecked}
-          checkedIcon={(
-            <CheckBoxIcon
-              style={{
-                fontSize: 18,
-              }}
-              className={`${checkedSection}CheckedIcon`}
-            />
+          onMouseDown={handleRippleStart}
+          onMouseUp={handleRippleStop}
+          onMouseLeave={handleRippleStop}
+          classes={{ gutters: classes.listItemGutters, root: classes.listItemRoot }}
+          className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
+        >
+          <Checkbox
+            id={checkboxId}
+            icon={(
+              <CheckBoxBlankIcon
+                style={{ fontSize: 18 }}
+                className={checkedSection}
+              />
+            )}
+            inputProps={{ 'aria-label': 'checkbox', tabIndex: -1, 'aria-hidden': true }}
+            checked={isChecked}
+            checkedIcon={(
+              <CheckBoxIcon
+                style={{
+                  fontSize: 18,
+                }}
+                className={`${checkedSection}CheckedIcon`}
+              />
+            )}
+            disableRipple
+            color="secondary"
+            classes={{ root: classes.checkboxRoot }}
+            style={{ pointerEvents: 'none' }}
+          />
+          { tooltip ? (
+            <Tooltip id={datafield} title={tooltip}>
+              <div className={datafield}>
+                {name}
+              </div>
+            </Tooltip>
+          ) : (
+            <LabelComponent />
           )}
-          disableRipple
-          color="secondary"
-          classes={{ root: classes.checkboxRoot }}
+          <ListItemText className={`${checkedSection}_md_space`} />
+          <Typography
+            className={clsx(`${checkedSection}Subjects`, {
+              [`${checkedSection}SubjectUnChecked`]: !isChecked,
+              [`${checkedSection}SubjectChecked`]: isChecked,
+            })}
+          >
+            {customCount(checkboxItem[count] || 0)}
+          </Typography>
+          <TouchRipple ref={rippleRef} center />
+        </ListItem>
+        <Divider
+          style={{
+            backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
+            margin: '0px',
+            height: isChecked ? '2px' : '1px',
+          }}
         />
-        { tooltip ? (
-          <Tooltip id={datafield} title={tooltip}>
-            <div className={datafield}>
-              <LabelComponent />
-            </div>
-          </Tooltip>
-        ) : (
-          <LabelComponent />
-        )}
-        <ListItemText />
-        <Typography
-          className={clsx(`${checkedSection}Subjects`, {
-            [`${checkedSection}SubjectUnChecked`]: !isChecked,
-            [`${checkedSection}SubjectChecked`]: isChecked,
-          })}
-        >
-          {`(${subjects})`}
-        </Typography>
-      </ListItem>
-      <Divider
-        style={{
-          backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
-          margin: '0px',
-          height: isChecked ? '2px' : '1px',
-        }}
-      />
     </>
   );
 };

package/src/components/inputs/slider/InputMinMaxView.js

@@ -37,6 +37,7 @@ function InputMinMaxView({
         min: minLowerBound,
         max: maxUpperBound,
         type: 'number',
+        'aria-label': 'slider',
       }}
     />
   );

package/src/components/inputs/slider/SliderView.js

@@ -14,7 +14,15 @@ const SliderView = ({
   onSliderToggle,
   filterState,
 }) => {
-  const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
+  const {
+    minLowerBound,
+    maxUpperBound,
+    quantifier,
+    datafield,
+    facetValues,
+    CustomLowerUpperBound,
+    CustomSliderValue,
+  } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
@@ -99,24 +107,26 @@ const SliderView = ({
             }}
           />
         </div>
-        <Box className={classes.lowerUpperBound}>
-          <Typography className={classes.lowerBound}>
-            {minLowerBound}
-          </Typography>
-          <Typography className={classes.upperBound}>
-            {maxUpperBound}
-          </Typography>
-        </Box>
+        {typeof CustomLowerUpperBound === 'function' ? (
+          CustomLowerUpperBound({ minLowerBound, maxUpperBound, classes })
+        ) : (
+          <Box className={classes.lowerUpperBound}>
+            <Typography className={classes.lowerBound}>
+              {minLowerBound}
+            </Typography>
+            <Typography className={classes.upperBound}>
+              {maxUpperBound}
+            </Typography>
+          </Box>
+        )}
       </div>
       {/* Change to red if invalid range */}
-      {
-        (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
-        && (
-          <Typography
-            className={isValid()
-              ? classes.sliderText
-              : classes.invalidSliderText}
-          >
+      {typeof CustomSliderValue === 'function' ? (
+        CustomSliderValue({
+          sliderValue, minLowerBound, maxUpperBound, isValid, quantifier, classes })
+      ) : (
+        (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && (
+          <Typography className={isValid() ? classes.sliderText : classes.invalidSliderText}>
             {sliderValue[0]}
             {' - '}
             {sliderValue[1]}
@@ -124,7 +134,7 @@ const SliderView = ({
             {quantifier}
           </Typography>
         )
-      }
+      )}
     </>
   );
 };

package/src/utils/Sort.js

@@ -37,22 +37,28 @@ export const getNumberArray = (range) => {
  * @param {array} checkboxData
  * @return {array}
  */
-export const sortBySection = ({ facetValues, sort_type, sortBy }) => {
+export const sortBySection = ({
+  facetValues,
+  sort_type,
+  sortBy,
+  field,
+  count = 'subjects',
+}) => {
   const sortfacetValues = [...facetValues];
   if (!sortfacetValues) {
     return facetValues;
   }
   if (sortBy === sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => b.subjects - a.subjects);
+    sortfacetValues.sort((a, b) => b[count] - a[count]);
   } else {
-    sortfacetValues.sort(((a, b) => (lowerCaseString(a.name) > lowerCaseString(b.name)
-      || -(lowerCaseString(a.name) < lowerCaseString(b.name)))));
+    sortfacetValues.sort(((a, b) => (lowerCaseString(a[field]) > lowerCaseString(b[field])
+      || -(lowerCaseString(a[field]) < lowerCaseString(b[field])))));
   }
 
   if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
     sortfacetValues.sort((a, b) => {
-      const aNumbs = getNumberArray(a.name);
-      const bNumbs = getNumberArray(b.name);
+      const aNumbs = getNumberArray(a[field]);
+      const bNumbs = getNumberArray(b[field]);
       const aNumb = Number(aNumbs[0]);
       const bNumb = Number(bNumbs[0]);
       return (aNumbs.length === bNumbs.length) ? aNumb > bNumb : -(aNumb <= bNumb);
@@ -60,8 +66,8 @@ export const sortBySection = ({ facetValues, sort_type, sortBy }) => {
   }
 
   if (sort_type === sortType.RANGE && sortBy !== sortType.NUMERIC) {
-    sortfacetValues.sort(((a, b) => (startIndex(a.name) > startIndex(b.name)
-      || -(startIndex(a.name) < startIndex(b.name)))));
+    sortfacetValues.sort(((a, b) => (startIndex(a[field]) > startIndex(b[field])
+      || -(startIndex(a[field]) < startIndex(b[field])))));
   }
   /**
    * Display checked item always on top