@bento-core/facet-filter 1.0.1-CDS.2 → 1.0.1-c3dc.1

package/README.md

@@ -72,17 +72,12 @@ import FacetFilter from 'bento-core';
 ```
 import { InputTypes } from 'bento-core';
 
-// fields for labelds and counts
-const GROUP = 'group'; // access labels
-const COUNT = 'subjects'; // access count value
-
 export const facetsConfig = [{ 
   section: CASES,
   label: 'Program', 
   apiForFiltering: 'filterSubjectCountByProgram', 
   datafield: 'programs', 
-  field: GROUP,
-  count: COUNT,
+  field: GROUP, 
   type: InputTypes.CHECKBOX, 
   sort_type: sortType.ALPHABET,
   show: true, 
@@ -249,84 +244,12 @@ 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 { ClearAllFiltersBtn, FacetFilter } from '@bento-core/facet-filter';
-import { getFilters } from '@bento-core/facet-filter';
+import { generateClearAllFilterBtn } from 'bento-core';
 
 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}]
-
-// facet = { 
-//  section: CASES,
-//  label: 'Program', 
-//  apiForFiltering: 'filterSubjectCountByProgram', 
-//  datafield: 'programs', 
-//  field: GROUP,
-//  count: COUNT,
-//  type: InputTypes.CHECKBOX, 
-//  sort_type: sortType.ALPHABET,
-//  show: true, 
-//  customCount = (text) => `(${text})`,
-// }
-
-const {
-  field = 'group',
-  count = 'subjects',
-  customCount = (text) => `(${text})`,
-} = facet;
-const {
-  isChecked = false,
-  index,
-  section,
-  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] };
-  }, {});
+}
 
-  <FacetFilter
-    data={filterData}
-    facetSectionConfig={facetSectionVariables}
-    facetsConfig={facetsConfig}
-    CustomFacetSection={CustomFacetSection}
-    CustomFacetView={CustomFacetView}
-  />
+const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn); 
 ```

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,8 +29,7 @@ const FacetFilterController = props => {
     filterState,
     data,
     facetsConfig,
-    facetSectionConfig,
-    tooltipText = {}
+    facetSectionConfig
   } = props;
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
@@ -38,16 +37,9 @@ const FacetFilterController = props => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach(sideBar => {
           if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
-            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.forEach(item => {
+              item.isChecked = value[item.name] ? value[item.name] : false;
             });
-            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -57,13 +49,9 @@ const FacetFilterController = props => {
     } else {
       updateSections.forEach(sideBar => {
         if (sideBar.type === _Types.InputTypes.CHECKBOX) {
-          const {
-            facetValues = []
-          } = sideBar;
-          const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
-            isChecked: false
-          }));
-          sideBar.facetValues = updateFacetVals;
+          sideBar.facetValues.forEach(item => {
+            item.isChecked = false;
+          });
         }
         /**
          * set default value for slider - on clear all filter
@@ -108,7 +96,6 @@ 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 = [];
@@ -118,13 +105,19 @@ const FacetFilterController = props => {
           facetValues: []
         });
         const {
+          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            updateFacet.facetValues = data[apiForFiltering];
+            const updateField = data[apiForFiltering].map(item => {
+              const addField = _objectSpread({}, item);
+              addField.name = item[field];
+              return addField;
+            });
+            updateFacet.facetValues = updateField;
           }
           /**
           * add object to facet values
@@ -132,12 +125,19 @@ const FacetFilterController = props => {
           if (facet.type === _Types.InputTypes.SLIDER) {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
-            updateFacet.minLowerBound = lowerBound;
-            updateFacet.maxUpperBound = upperBound;
-            updateFacet.facetValues = [lowerBound, upperBound];
+            if (lowerBound === 0 && upperBound === 0) {
+              updateFacet.filterOut = true;
+            } else {
+              updateFacet.minLowerBound = lowerBound;
+              updateFacet.maxUpperBound = upperBound;
+              updateFacet.facetValues = [lowerBound, upperBound];
+              updateFacet.style = facet.style;
+            }
           }
         }
-        updateFacets.push(updateFacet);
+        if (!updateFacet.filterOut) {
+          updateFacets.push(updateFacet);
+        }
       });
     }
     return updateFacets;
@@ -147,6 +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);

package/dist/FacetFilterView.js

@@ -9,6 +9,7 @@ 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 */
@@ -28,7 +29,11 @@ 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

@@ -41,7 +41,7 @@ var _default = () => ({
     fontFamily: 'Nunito',
     fontSize: '10px',
     marginRight: '12px',
-    marginLeft: '16px'
+    marginLeft: '24px'
   },
   sortGroupItem: {
     cursor: 'pointer',

package/dist/components/facet/FacetView.js

@@ -27,9 +27,7 @@ const FacetView = _ref => {
     facet,
     onClearFacetSection,
     onClearSliderSection,
-    CustomView,
-    autoComplete,
-    upload
+    CustomView
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
@@ -37,11 +35,13 @@ const FacetView = _ref => {
   /**
   * expand section incase of active local search
   */
-  (0, _react.useEffect)(() => {
-    if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {
-      setExpand(true);
-    }
-  }, [autoComplete, upload]);
+  // useEffect(() => {
+  //   if ((autoComplete && autoComplete.length > 0)
+  //     || (upload && upload.length > 0)) {
+  //     setExpand(true);
+  //   }
+  // }, [autoComplete, upload]);
+
   const [sortBy, setSortBy] = (0, _react.useState)(null);
   const onSortFacet = type => {
     setSortBy(type);
@@ -61,7 +61,7 @@ const FacetView = _ref => {
     type,
     facetValues
   } = facet;
-  const selectedItems = facetValues && facetValues.filter(item => item && item.isChecked);
+  const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
@@ -82,7 +82,7 @@ const FacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), facet.type !== _Types.InputTypes.SLIDER && facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem
@@ -114,10 +114,10 @@ const FacetView = _ref => {
     onClick: () => {
       onSortFacet(_Sort.sortType.NUMERIC);
     }
-  }, "Sort by count"))), expand && /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+  }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
     sortBy: sortBy
-  })), !expand && type === _Types.InputTypes.CHECKBOX && selectedItems.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
+  })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
     id: "filter_Items"
   }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: displayFacet

package/dist/components/facet/ReduxFacetView.js

@@ -10,14 +10,12 @@ var _Actions = require("../../store/actions/Actions");
 var _FacetView = _interopRequireDefault(require("./FacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxFacetView = props => /*#__PURE__*/_react.default.createElement(_FacetView.default, props);
-const mapStateToProps = state => {
-  var _state$localFind, _state$localFind2;
-  return {
-    filterState: state.statusReducer.filterState,
-    autoComplete: (state === null || state === void 0 ? void 0 : (_state$localFind = state.localFind) === null || _state$localFind === void 0 ? void 0 : _state$localFind.autocomplete) || [],
-    upload: (state === null || state === void 0 ? void 0 : (_state$localFind2 = state.localFind) === null || _state$localFind2 === void 0 ? void 0 : _state$localFind2.upload) || []
-  };
-};
+
+// const mapStateToProps = (state) => ({
+//   autoComplete: state?.localFind?.autocomplete || [],
+//   upload: state?.localFind?.upload || [],
+// });
+
 const mapDispatchToProps = dispatch => ({
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
@@ -26,5 +24,5 @@ const mapDispatchToProps = dispatch => ({
     dispatch((0, _Actions.clearSliderSection)(facet));
   }
 });
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxFacetView);
+var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(ReduxFacetView);
 exports.default = _default;

package/dist/components/inputs/FilterItemStyle.js

@@ -17,7 +17,7 @@ var _default = () => ({
     fontFamily: 'Nunito',
     fontSize: '10px',
     marginRight: '12px',
-    marginLeft: '16px'
+    marginLeft: '24px'
   },
   sortGroupItem: {
     cursor: 'pointer',

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = () => ({
   listItemGutters: {
-    padding: '10px 20px 10px 0px'
+    padding: '10px 10px 10px 0px'
   },
   checkboxRoot: {
-    marginLeft: '5px',
+    marginLeft: '8px',
     height: 12
   },
   panelDetailText: {
@@ -30,7 +30,8 @@ var _default = () => ({
   checkboxName: {
     margin: '0',
     color: '#000000',
-    fontSize: '14px',
+    fontSize: '16px',
+    fontWeight: 300,
     marginTop: '1.5px',
     fontFamily: 'Nunito',
     lineHeight: '120%'

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

@@ -9,17 +9,12 @@ var _styles = require("@material-ui/core/styles");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@material-ui/icons");
+var _emptycheckbox = _interopRequireDefault(require("./assets/emptycheckbox.svg"));
+var _checkedbox = _interopRequireDefault(require("./assets/checkedbox.svg"));
 var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/jsx-wrap-multilines */
-/* eslint-disable react/jsx-indent */
-/* eslint-disable object-curly-newline */
-/* eslint-disable object-shorthand */
-/* eslint-disable react/jsx-one-expression-per-line */
-/* eslint-disable no-useless-escape */
-
+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); }
+const alignment = 'flex-start';
 const CheckBoxView = _ref => {
   let {
     classes,
@@ -29,19 +24,21 @@ const CheckBoxView = _ref => {
     facet
   } = _ref;
   const {
+    name,
+    subjects,
     isChecked = false,
     index,
     section,
-    tooltip
+    tooltip,
+    label
   } = checkboxItem;
-  const {
-    field = 'group',
-    count = 'subjects',
-    customCount = text => "(".concat(text, ")")
-  } = facet;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = "".concat(section).toLowerCase().replace(/\ /g, '_');
-  const name = checkboxItem[field] || 'N/A';
+  const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
+  const labelCheckbox = {
+    inputProps: {
+      'aria-label': 'Checkbox item'
+    }
+  };
   const handleToggle = () => {
     const toggleCheckBoxItem = {
       name: name,
@@ -56,7 +53,9 @@ const CheckBoxView = _ref => {
       ["".concat(checkedSection, "NameUnChecked")]: !isChecked,
       ["".concat(checkedSection, "NameChecked")]: isChecked
     })
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, label ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    className: classes.checkboxLabel
+  }, label) : /*#__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, {
@@ -70,40 +69,46 @@ const CheckBoxView = _ref => {
     className: (0, _clsx.default)({
       ["".concat(checkedSection, "Checked").concat(indexType)]: isChecked
     })
-  }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
-    id: "checkbox_".concat(facet.label, "_").concat(name),
-    icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
+  }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, _extends({
+    id: "checkbox_".concat(facet.label, "_").concat(name)
+  }, labelCheckbox, {
+    icon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
       style: {
-        fontSize: 18
-      },
-      className: checkedSection
-    }),
+        fontSize: '18px',
+        lineHeight: '22px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _emptycheckbox.default,
+      alt: "checkbox-icon"
+    })),
     onClick: handleToggle,
     checked: isChecked,
-    checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
+    checkedIcon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
       style: {
-        fontSize: 18
+        fontSize: '18px',
+        lineHeight: '22px'
       },
       className: "".concat(checkedSection, "CheckedIcon")
-    }),
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: _checkedbox.default,
+      alt: "checkedBox-icon"
+    })),
     disableRipple: true,
     color: "secondary",
     classes: {
       root: classes.checkboxRoot
     }
-  }), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  })), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     id: datafield,
     title: tooltip
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: datafield
-  }, name)) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
-    className: "".concat(checkedSection, "_md_space")
-  }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__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, {
     className: (0, _clsx.default)("".concat(checkedSection, "Subjects"), {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked
     })
-  }, customCount(checkboxItem[count] || 0))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, "(".concat(subjects, ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
       backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
       margin: '0px',

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

@@ -10,11 +10,8 @@ var _Actions = require("../../../store/actions/Actions");
 var _CheckboxView = _interopRequireDefault(require("./CheckboxView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxCheckbox = props => /*#__PURE__*/_react.default.createElement(_CheckboxView.default, props);
-const mapStateToProps = state => ({
-  filterState: state.statusReducer.filterState
-});
 const mapDispatchToProps = dispatch => ({
   onToggle: view => dispatch((0, _Actions.toggleCheckBox)(view))
 });
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxCheckbox);
+var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(ReduxCheckbox);
 exports.default = _default;

package/dist/components/inputs/checkbox/assets/checkedbox.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="#6D5F5B"/>
+<path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
+</svg>

package/dist/components/inputs/checkbox/assets/emptycheckbox.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="#6D5F5B"/>
+<rect width="14" height="14" fill="#6D5F5B"/>
+<rect x="0.5" y="0.5" width="13" height="13" fill="white" stroke="#6D5F5B"/>
+</svg>

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

@@ -5,6 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = () => ({
-  slider_INPUT_MIN: {}
+  slider_INPUT_MIN: {
+    fontFamily: 'Montserrat',
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#717171',
+    background: '#F0F0F0',
+    '& input': {
+      width: '70px'
+    }
+  },
+  slider_INPUT_MAX: {
+    fontFamily: 'Montserrat',
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#717171',
+    background: '#F0F0F0',
+    '& input': {
+      width: '70px'
+    }
+  }
 });
 exports.default = _default;

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': 'minMaxValue'
     }
   });
 }