@bento-core/facet-filter 1.0.1-ccdihub.4 → 1.0.1-ccdihub.6

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

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

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/SliderView.js

@@ -32,7 +32,6 @@ const SliderView = _ref => {
   } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
-  console.log(facet);
 
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
@@ -98,6 +97,7 @@ 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
@@ -113,13 +113,16 @@ const SliderView = _ref => {
   }, 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 => ({
+  minValue: props => props.facet.style && props.facet.style.minValue ? props.facet.style.minValue : {
     fontFamily: 'Nunito',
     fontSize: '15px',
     color: '#000000',
@@ -127,57 +130,57 @@ const styles = () => ({
     float: 'left',
     width: '75px',
     display: 'flex'
-  }),
-  maxValue: props => ({
+  },
+  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 => ({
+  },
+  rail: props => props.facet.style && props.facet.style.rail ? props.facet.style.rail : {
     borderRadius: 4,
     height: 6,
     background: '#142D64'
-  }),
-  minInputLabel: props => ({
+  },
+  minInputLabel: props => props.facet.style && props.facet.style.minInputLabel ? props.facet.style.minInputLabel : {
     float: 'left',
     lineHeight: '34px',
     marginRight: '5px'
-  }),
-  maxInputLabel: props => ({
+  },
+  maxInputLabel: props => props.facet.style && props.facet.style.maxInputLabel ? props.facet.style.maxInputLabel : {
     float: 'left',
     lineHeight: '34px',
     marginRight: '5px'
-  }),
-  thumb: props => ({
+  },
+  thumb: props => props.facet.style && props.facet.style.thumb ? props.facet.style.thumb : {
     height: 16,
     width: 16,
     background: '#10A075'
-  }),
-  invalidThumb: props => ({
+  },
+  invalidThumb: props => props.facet.style && props.facet.style.invalidThumb ? props.facet.style.invalidThumb : {
     height: 16,
     width: 16,
     background: '#F44336'
-  }),
-  track: props => ({
+  },
+  track: props => props.facet.style && props.facet.style.track ? props.facet.style.track : {
     borderRadius: 4,
     height: 6,
     background: '#10A075',
     '&~&': {
       background: '#142D64'
     }
-  }),
-  invalidTrack: props => ({
+  },
+  invalidTrack: props => props.facet.style && props.facet.style.invalidTrack ? props.facet.style.invalidTrack : {
     borderRadius: 4,
     height: 6,
     background: '#F44336',
     '&~&': {
       background: '#142D64'
     }
-  }),
-  upperBound: props => ({
+  },
+  upperBound: props => props.facet.style && props.facet.style.upperBound ? props.facet.style.upperBound : {
     fontFamily: 'Nunito',
     fontSize: '10px',
     color: '#000000',
@@ -185,8 +188,8 @@ const styles = () => ({
     marginLeft: 'Auto',
     marginRight: 'Auto',
     marginBottom: '15px'
-  }),
-  lowerBound: props => ({
+  },
+  lowerBound: props => props.facet.style && props.facet.style.lowerBound ? props.facet.style.lowerBound : {
     fontFamily: 'Nunito',
     fontSize: '10px',
     color: '#000000',
@@ -194,8 +197,8 @@ const styles = () => ({
     marginLeft: 'Auto',
     marginRight: 'Auto',
     marginBottom: '15px'
-  }),
-  sliderText: props => ({
+  },
+  sliderText: props => props.facet.style && props.facet.style.sliderText ? props.facet.style.sliderText : {
     color: '#10a075',
     lineHeight: '120%',
     fontFamily: 'Nunito',
@@ -205,8 +208,8 @@ const styles = () => ({
     textAlign: 'right',
     background: '#f5fdee',
     marginTop: '10px'
-  }),
-  invalidSliderText: props => ({
+  },
+  invalidSliderText: props => props.facet.style && props.facet.style.invalidSliderText ? props.facet.style.invalidSliderText : {
     color: '#D32F2F',
     lineHeight: '120%',
     fontFamily: 'Nunito',
@@ -216,18 +219,18 @@ const styles = () => ({
     textAlign: 'right',
     background: '#E57373',
     marginTop: '10px'
-  }),
-  sliderListItem: props => ({
+  },
+  sliderListItem: props => props.facet.style && props.facet.style.sliderListItem ? props.facet.style.sliderListItem : {
     height: '15px'
-  }),
-  listItemGutters: props => ({
+  },
+  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 => ({
+  },
+  lowerUpperBound: props => props.facet.style && props.facet.style.lowerUpperBound ? props.facet.style.lowerUpperBound : {
     height: '15px'
-  })
+  }
 });
 var _default = (0, _core.withStyles)(styles)(SliderView);
 exports.default = _default;

package/package.json

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

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

@@ -15,11 +15,14 @@ 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';
@@ -78,16 +81,18 @@ const CheckBoxView = ({
       >
         <Checkbox
           id={`checkbox_${facet.label}_${name}`}
-          icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
+          icon={<Icon style={{ fontSize: 18 }}>{emptyCheckBox}</Icon>}
           onClick={handleToggle}
           checked={isChecked}
           checkedIcon={(
-            <CheckBoxIcon
+            <Icon
               style={{
                 fontSize: 18,
               }}
               className={`${checkedSection}CheckedIcon`}
-            />
+            >
+              {checkedBox}
+            </Icon>
           )}
           disableRipple
           color="secondary"

package/src/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/src/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/src/components/inputs/slider/SliderView.js

@@ -18,8 +18,6 @@ const SliderView = ({
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
-  console.log(facet);
-
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
     const checks = [
@@ -95,6 +93,7 @@ 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,
@@ -130,6 +129,11 @@ 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
     : {
@@ -138,115 +142,147 @@ const styles = () => ({
       marginRight: 'Auto',
       paddingRight: '20px',
     }),
-  minValue: (props) => ({
-    fontFamily: 'Nunito',
-    fontSize: '15px',
-    color: '#000000',
-    marginBottom: '0px',
-    float: 'left',
-    width: '75px',
-    display: 'flex',
-  }),
-  maxValue: (props) => ({
-    fontFamily: 'Nunito',
-    fontSize: '15px',
-    color: '#000000',
-    float: 'right',
-    marginBottom: '0px',
-    display: 'flex',
-  }),
-  rail: (props) => ({
-    borderRadius: 4,
-    height: 6,
-    background: '#142D64',
-  }),
-  minInputLabel: (props) => ({
-    float: 'left',
-    lineHeight: '34px',
-    marginRight: '5px',
-  }),
-  maxInputLabel: (props) => ({
-    float: 'left',
-    lineHeight: '34px',
-    marginRight: '5px',
-  }),
-  thumb: (props) => ({
-    height: 16,
-    width: 16,
-    background: '#10A075',
-  }),
-  invalidThumb: (props) => ({
-    height: 16,
-    width: 16,
-    background: '#F44336',
-  }),
-  track: (props) => ({
-    borderRadius: 4,
-    height: 6,
-    background: '#10A075',
-    '&~&': {
-      background: '#142D64',
-    },
-  }),
-  invalidTrack: (props) => ({
-    borderRadius: 4,
-    height: 6,
-    background: '#F44336',
-    '&~&': {
+  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',
-    },
-  }),
-  upperBound: (props) => ({
-    fontFamily: 'Nunito',
-    fontSize: '10px',
-    color: '#000000',
-    float: 'right',
-    marginLeft: 'Auto',
-    marginRight: 'Auto',
-    marginBottom: '15px',
-  }),
-  lowerBound: (props) => ({
-    fontFamily: 'Nunito',
-    fontSize: '10px',
-    color: '#000000',
-    float: 'left',
-    marginLeft: 'Auto',
-    marginRight: 'Auto',
-    marginBottom: '15px',
-  }),
-  sliderText: (props) => ({
-    color: '#10a075',
-    lineHeight: '120%',
-    fontFamily: 'Nunito',
-    fontSize: '14px',
-    padding: '5px 15px 5px 0px',
-    width: '100%',
-    textAlign: 'right',
-    background: '#f5fdee',
-    marginTop: '10px',
-  }),
-  invalidSliderText: (props) => ({
-    color: '#D32F2F',
-    lineHeight: '120%',
-    fontFamily: 'Nunito',
-    fontSize: '14px',
-    padding: '5px 15px 5px 0px',
-    width: '100%',
-    textAlign: 'right',
-    background: '#E57373',
-    marginTop: '10px',
-  }),
-  sliderListItem: (props) => ({
-    height: '15px',
-  }),
-  listItemGutters: (props) => ({
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '2px 5px 2px 8px',
-  }),
-  lowerUpperBound: (props) => ({
-    height: '15px',
-  }),
+    }),
+  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);