@bento-core/facet-filter 1.0.1-ccdihub.9 → 1.0.1-icdc.0

package/dist/FacetFilterController.js

@@ -128,7 +128,6 @@ const FacetFilterController = props => {
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
             updateFacet.facetValues = [lowerBound, upperBound];
-            updateFacet.style = facet.style;
           }
         }
         updateFacets.push(updateFacet);
@@ -141,8 +140,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 displayFacets = facetsConfig.filter(facet => facet.show).slice(0, 16);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/dist/components/facet/FacetView.js

@@ -82,7 +82,7 @@ const FacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem

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

@@ -9,8 +9,6 @@ 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 */
@@ -73,27 +71,19 @@ const CheckBoxView = _ref => {
     })
   }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
     id: "checkbox_".concat(facet.label, "_").concat(name),
-    icon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
       style: {
-        fontSize: '18px',
-        lineHeight: '22px'
+        fontSize: 18
       }
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: _emptycheckbox.default,
-      alt: "checkbox-icon"
-    })),
+    }),
     onClick: handleToggle,
     checked: isChecked,
-    checkedIcon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
       style: {
-        fontSize: '18px',
-        lineHeight: '22px'
+        fontSize: 18
       },
       className: "".concat(checkedSection, "CheckedIcon")
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: _checkedbox.default,
-      alt: "checkedBox-icon"
-    })),
+    }),
     disableRipple: true,
     color: "secondary",
     classes: {

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
+var _SliderStyle = _interopRequireDefault(require("./SliderStyle"));
 var _Types = require("../Types");
 var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -97,7 +98,6 @@ const SliderView = _ref => {
     min: minLowerBound,
     max: maxUpperBound,
     classes: {
-      colorPrimary: classes.colorPrimary,
       rail: classes.rail,
       thumb: isValid() ? classes.thumb : classes.invalidThumb,
       track: isValid() ? classes.track : classes.invalidTrack
@@ -112,125 +112,5 @@ const SliderView = _ref => {
     className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };
-const styles = () => ({
-  colorPrimary: props => props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary : {
-    color: '#3f51b5'
-  },
-  sliderRoot: props => props.facet.style && props.facet.style.sliderRoot ? props.facet.style.sliderRoot : {
-    marginTop: '10px',
-    marginLeft: '20px',
-    marginRight: 'Auto',
-    paddingRight: '20px'
-  },
-  minValue: props => props.facet.style && props.facet.style.minValue ? props.facet.style.minValue : {
-    fontFamily: 'Nunito',
-    fontSize: '15px',
-    color: '#000000',
-    marginBottom: '0px',
-    float: 'left',
-    width: '75px',
-    display: 'flex'
-  },
-  maxValue: props => props.facet.style && props.facet.style.maxValue ? props.facet.style.maxValue : {
-    fontFamily: 'Nunito',
-    fontSize: '15px',
-    color: '#000000',
-    float: 'right',
-    marginBottom: '0px',
-    display: 'flex'
-  },
-  rail: props => props.facet.style && props.facet.style.rail ? props.facet.style.rail : {
-    borderRadius: 4,
-    height: 6,
-    background: '#142D64'
-  },
-  minInputLabel: props => props.facet.style && props.facet.style.minInputLabel ? props.facet.style.minInputLabel : {
-    float: 'left',
-    lineHeight: '34px',
-    marginRight: '5px'
-  },
-  maxInputLabel: props => props.facet.style && props.facet.style.maxInputLabel ? props.facet.style.maxInputLabel : {
-    float: 'left',
-    lineHeight: '34px',
-    marginRight: '5px'
-  },
-  thumb: props => props.facet.style && props.facet.style.thumb ? props.facet.style.thumb : {
-    height: 16,
-    width: 16,
-    background: '#10A075'
-  },
-  invalidThumb: props => props.facet.style && props.facet.style.invalidThumb ? props.facet.style.invalidThumb : {
-    height: 16,
-    width: 16,
-    background: '#F44336'
-  },
-  track: props => props.facet.style && props.facet.style.track ? props.facet.style.track : {
-    borderRadius: 4,
-    height: 6,
-    background: '#10A075',
-    '&~&': {
-      background: '#142D64'
-    }
-  },
-  invalidTrack: props => props.facet.style && props.facet.style.invalidTrack ? props.facet.style.invalidTrack : {
-    borderRadius: 4,
-    height: 6,
-    background: '#F44336',
-    '&~&': {
-      background: '#142D64'
-    }
-  },
-  upperBound: props => props.facet.style && props.facet.style.upperBound ? props.facet.style.upperBound : {
-    fontFamily: 'Nunito',
-    fontSize: '10px',
-    color: '#000000',
-    float: 'right',
-    marginLeft: 'Auto',
-    marginRight: 'Auto',
-    marginBottom: '15px'
-  },
-  lowerBound: props => props.facet.style && props.facet.style.lowerBound ? props.facet.style.lowerBound : {
-    fontFamily: 'Nunito',
-    fontSize: '10px',
-    color: '#000000',
-    float: 'left',
-    marginLeft: 'Auto',
-    marginRight: 'Auto',
-    marginBottom: '15px'
-  },
-  sliderText: props => props.facet.style && props.facet.style.sliderText ? props.facet.style.sliderText : {
-    color: '#10a075',
-    lineHeight: '120%',
-    fontFamily: 'Nunito',
-    fontSize: '14px',
-    padding: '5px 15px 5px 0px',
-    width: '100%',
-    textAlign: 'right',
-    background: '#f5fdee',
-    marginTop: '10px'
-  },
-  invalidSliderText: props => props.facet.style && props.facet.style.invalidSliderText ? props.facet.style.invalidSliderText : {
-    color: '#D32F2F',
-    lineHeight: '120%',
-    fontFamily: 'Nunito',
-    fontSize: '14px',
-    padding: '5px 15px 5px 0px',
-    width: '100%',
-    textAlign: 'right',
-    background: '#E57373',
-    marginTop: '10px'
-  },
-  sliderListItem: props => props.facet.style && props.facet.style.sliderListItem ? props.facet.style.sliderListItem : {
-    height: '15px'
-  },
-  listItemGutters: props => props.facet.style && props.facet.style.listItemGutters ? props.facet.style.listItemGutters : {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '2px 5px 2px 8px'
-  },
-  lowerUpperBound: props => props.facet.style && props.facet.style.lowerUpperBound ? props.facet.style.lowerUpperBound : {
-    height: '15px'
-  }
-});
-var _default = (0, _core.withStyles)(styles)(SliderView);
+var _default = (0, _core.withStyles)(_SliderStyle.default)(SliderView);
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ccdihub.9",
+  "version": "1.0.1-icdc.0",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

package/src/FacetFilterController.js

@@ -113,7 +113,6 @@ const FacetFilterController = (props) => {
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
             updateFacet.facetValues = [lowerBound, upperBound];
-            updateFacet.style = facet.style;
           }
         }
         updateFacets.push(updateFacet);
@@ -126,8 +125,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 displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/src/components/facet/FacetView.js

@@ -92,7 +92,7 @@ const FacetView = ({
           </CustomAccordionSummary>
         )}
         {
-          (facetValues.length === 0)
+          (facet.type === InputTypes.SLIDER || facetValues.length === 0)
           && (
           <div className={classes.NonSortGroup}>
             <span

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

@@ -15,14 +15,11 @@ import {
   Tooltip,
   Box,
   Typography,
-  Icon,
 } from '@material-ui/core';
 import clsx from 'clsx';
 import {
   CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
 } from '@material-ui/icons';
-import emptyCheckBox from './assets/emptycheckbox.svg';
-import checkedBox from './assets/checkedbox.svg';
 import styles from './CheckboxStyle';
 
 const alignment = 'flex-start';
@@ -81,33 +78,16 @@ const CheckBoxView = ({
       >
         <Checkbox
           id={`checkbox_${facet.label}_${name}`}
-          icon={
-            <Icon style={{
-              fontSize: '18px',
-              lineHeight: '22px',
-            }}
-            >
-              <img
-                src={emptyCheckBox}
-                alt="checkbox-icon"
-              />
-            </Icon>
-          }
+          icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
           onClick={handleToggle}
           checked={isChecked}
           checkedIcon={(
-            <Icon
+            <CheckBoxIcon
               style={{
-                fontSize: '18px',
-                lineHeight: '22px',
+                fontSize: 18,
               }}
               className={`${checkedSection}CheckedIcon`}
-            >
-              <img
-                src={checkedBox}
-                alt="checkedBox-icon"
-              />
-            </Icon>
+            />
           )}
           disableRipple
           color="secondary"

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

@@ -4,7 +4,7 @@
 /* eslint-disable object-curly-newline */
 import React, { useEffect, useState } from 'react';
 import { withStyles, Slider, Typography, Box } from '@material-ui/core';
-// import styles from './SliderStyle';
+import styles from './SliderStyle';
 import { silderTypes } from '../Types';
 import InputMinMaxView from './InputMinMaxView';
 
@@ -93,7 +93,6 @@ const SliderView = ({
             min={minLowerBound}
             max={maxUpperBound}
             classes={{
-              colorPrimary: classes.colorPrimary,
               rail: classes.rail,
               thumb: isValid() ? classes.thumb : classes.invalidThumb,
               track: isValid() ? classes.track : classes.invalidTrack,
@@ -114,7 +113,9 @@ const SliderView = ({
         (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
         && (
           <Typography
-            className={isValid() ? classes.sliderText : classes.invalidSliderText}
+            className={isValid()
+              ? classes.sliderText
+              : classes.invalidSliderText}
           >
             {sliderValue[0]}
             {' - '}
@@ -128,161 +129,4 @@ const SliderView = ({
   );
 };
 
-const styles = () => ({
-  colorPrimary: (props) => (props.facet.style && props.facet.style.colorPrimary
-    ? props.facet.style.colorPrimary
-    : {
-      color: '#3f51b5',
-    }),
-  sliderRoot: (props) => (props.facet.style && props.facet.style.sliderRoot
-    ? props.facet.style.sliderRoot
-    : {
-      marginTop: '10px',
-      marginLeft: '20px',
-      marginRight: 'Auto',
-      paddingRight: '20px',
-    }),
-  minValue: (props) => (props.facet.style && props.facet.style.minValue
-    ? props.facet.style.minValue
-    : {
-      fontFamily: 'Nunito',
-      fontSize: '15px',
-      color: '#000000',
-      marginBottom: '0px',
-      float: 'left',
-      width: '75px',
-      display: 'flex',
-    }),
-  maxValue: (props) => (props.facet.style && props.facet.style.maxValue
-    ? props.facet.style.maxValue
-    : {
-      fontFamily: 'Nunito',
-      fontSize: '15px',
-      color: '#000000',
-      float: 'right',
-      marginBottom: '0px',
-      display: 'flex',
-    }),
-  rail: (props) => (props.facet.style && props.facet.style.rail
-    ? props.facet.style.rail
-    : {
-      borderRadius: 4,
-      height: 6,
-      background: '#142D64',
-    }),
-  minInputLabel: (props) => (props.facet.style && props.facet.style.minInputLabel
-    ? props.facet.style.minInputLabel
-    : {
-      float: 'left',
-      lineHeight: '34px',
-      marginRight: '5px',
-    }),
-  maxInputLabel: (props) => (props.facet.style && props.facet.style.maxInputLabel
-    ? props.facet.style.maxInputLabel
-    : {
-      float: 'left',
-      lineHeight: '34px',
-      marginRight: '5px',
-    }),
-  thumb: (props) => (props.facet.style && props.facet.style.thumb
-    ? props.facet.style.thumb
-    : {
-      height: 16,
-      width: 16,
-      background: '#10A075',
-    }),
-  invalidThumb: (props) => (props.facet.style && props.facet.style.invalidThumb
-    ? props.facet.style.invalidThumb
-    : {
-      height: 16,
-      width: 16,
-      background: '#F44336',
-    }),
-  track: (props) => (props.facet.style && props.facet.style.track
-    ? props.facet.style.track
-    : {
-      borderRadius: 4,
-      height: 6,
-      background: '#10A075',
-      '&~&': {
-        background: '#142D64',
-      },
-    }),
-  invalidTrack: (props) => (props.facet.style && props.facet.style.invalidTrack
-    ? props.facet.style.invalidTrack
-    : {
-      borderRadius: 4,
-      height: 6,
-      background: '#F44336',
-      '&~&': {
-        background: '#142D64',
-      },
-    }),
-  upperBound: (props) => (props.facet.style && props.facet.style.upperBound
-    ? props.facet.style.upperBound
-    : {
-      fontFamily: 'Nunito',
-      fontSize: '10px',
-      color: '#000000',
-      float: 'right',
-      marginLeft: 'Auto',
-      marginRight: 'Auto',
-      marginBottom: '15px',
-    }),
-  lowerBound: (props) => (props.facet.style && props.facet.style.lowerBound
-    ? props.facet.style.lowerBound
-    : {
-      fontFamily: 'Nunito',
-      fontSize: '10px',
-      color: '#000000',
-      float: 'left',
-      marginLeft: 'Auto',
-      marginRight: 'Auto',
-      marginBottom: '15px',
-    }),
-  sliderText: (props) => (props.facet.style && props.facet.style.sliderText
-    ? props.facet.style.sliderText
-    : {
-      color: '#10a075',
-      lineHeight: '120%',
-      fontFamily: 'Nunito',
-      fontSize: '14px',
-      padding: '5px 15px 5px 0px',
-      width: '100%',
-      textAlign: 'right',
-      background: '#f5fdee',
-      marginTop: '10px',
-    }),
-  invalidSliderText: (props) => (props.facet.style && props.facet.style.invalidSliderText
-    ? props.facet.style.invalidSliderText
-    : {
-      color: '#D32F2F',
-      lineHeight: '120%',
-      fontFamily: 'Nunito',
-      fontSize: '14px',
-      padding: '5px 15px 5px 0px',
-      width: '100%',
-      textAlign: 'right',
-      background: '#E57373',
-      marginTop: '10px',
-    }),
-  sliderListItem: (props) => (props.facet.style && props.facet.style.sliderListItem
-    ? props.facet.style.sliderListItem
-    : {
-      height: '15px',
-    }),
-  listItemGutters: (props) => (props.facet.style && props.facet.style.listItemGutters
-    ? props.facet.style.listItemGutters
-    : {
-      display: 'flex',
-      justifyContent: 'space-between',
-      padding: '2px 5px 2px 8px',
-    }),
-  lowerUpperBound: (props) => (props.facet.style && props.facet.style.lowerUpperBound
-    ? props.facet.style.lowerUpperBound
-    : {
-      height: '15px',
-    }),
-});
-
 export default withStyles(styles)(SliderView);

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

@@ -1,4 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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/src/components/inputs/checkbox/assets/checkedbox.svg

@@ -1,4 +0,0 @@
-<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/src/components/inputs/checkbox/assets/emptycheckbox.svg

@@ -1,5 +0,0 @@
-<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>