@bento-core/facet-filter 1.0.1-ccdihub.2 → 1.0.1-ccdihub.20

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/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,16 +9,11 @@ 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 */
-
+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 {
@@ -39,6 +34,11 @@ const CheckBoxView = _ref => {
   } = checkboxItem;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
+  const labelCheckbox = {
+    inputProps: {
+      'aria-label': 'Checkbox item'
+    }
+  };
   const handleToggle = () => {
     const toggleCheckBoxItem = {
       name: name,
@@ -69,27 +69,36 @@ 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
+        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", {

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,19 @@ 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'
+  },
+  slider_INPUT_MAX: {
+    fontFamily: 'Montserrat',
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#717171',
+    background: '#F0F0F0'
+  }
 });
 exports.default = _default;

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

@@ -6,7 +6,6 @@ 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 }; }
@@ -29,8 +28,7 @@ const SliderView = _ref => {
     maxUpperBound,
     quantifier,
     datafield,
-    facetValues,
-    style
+    facetValues
   } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
@@ -62,14 +60,15 @@ const SliderView = _ref => {
   };
   const valuetext = value => "".concat(value);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: style && style.sliderRoot ? style.sliderRoot : classes.sliderRoot
+    className: classes.sliderRoot
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: style && style.minMaxInputs ? style.minMaxInputs : classes.minMaxInputs
+    className: classes.minMaxInputs
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: style && style.minValue ? style.minValue : classes.minValue
+    className: classes.minValue
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: style && style.minInputLabel ? style.minInputLabel : classes.minInputLabel
+    className: classes.minInputLabel
   }, "Min:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
+    className: classes.minInputValue,
     lowerBoundVal: sliderValue[0],
     upperBoundVal: sliderValue[1],
     minLowerBound: minLowerBound,
@@ -77,10 +76,11 @@ const SliderView = _ref => {
     type: _Types.silderTypes.INPUT_MIN,
     onInputChange: handleChangeCommittedSlider
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: style && style.maxValue ? style.maxValue : classes.maxValue
+    className: classes.maxValue
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: style && style.maxInputLabel ? style.maxInputLabel : classes.maxInputLabel
+    className: classes.maxInputLabel
   }, "Max:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
+    className: classes.maxInputValue,
     lowerBoundVal: sliderValue[0],
     upperBoundVal: sliderValue[1],
     minLowerBound: minLowerBound,
@@ -88,7 +88,7 @@ const SliderView = _ref => {
     type: _Types.silderTypes.INPUT_MAX,
     onInputChange: handleChangeCommittedSlider
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: style && style.slider ? style.slider : classes.slider
+    className: classes.slider
   }, /*#__PURE__*/_react.default.createElement(_core.Slider, {
     disableSwap: true,
     getAriaValueText: valuetext,
@@ -99,19 +99,154 @@ const SliderView = _ref => {
     min: minLowerBound,
     max: maxUpperBound,
     classes: {
-      rail: style && style.rail ? style.rail : classes.rail,
-      thumb: isValid() ? style && style.thumb ? style.thumb : classes.thumb : style && style.invalidThumb ? style.invalidThumb : classes.invalidThumb,
-      track: isValid() ? style && style.track ? style.track : classes.track : style && style.invalidTrack ? style.invalidTrack : classes.invalidTrack
+      colorPrimary: classes.colorPrimary,
+      rail: classes.rail,
+      thumb: isValid() ? classes.thumb : classes.invalidThumb,
+      track: isValid() ? classes.track : classes.invalidTrack
     }
   })), /*#__PURE__*/_react.default.createElement(_core.Box, {
-    className: style && style.lowerUpperBound ? style.lowerUpperBound : classes.lowerUpperBound
+    className: classes.lowerUpperBound
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: style && style.lowerBound ? style.lowerBound : classes.lowerBound
+    className: classes.lowerBound
   }, minLowerBound), /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: style && style.upperBound ? style.upperBound : classes.upperBound
+    className: classes.upperBound
   }, maxUpperBound))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: isValid() ? style && style.sliderText ? style.sliderText : classes.sliderText : style && style.invalidSliderText ? style.invalidSliderText : classes.invalidSliderText
+    className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };
-var _default = (0, _core.withStyles)(_SliderStyle.default)(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'
+  },
+  minInputValue: props => props.facet.style && props.facet.style.minInputValue ? props.facet.style.minInputValue : {
+    fontFamily: 'Montserrat',
+    fontSize: '13px',
+    color: '#717171',
+    background: '#F0F0F0',
+    textAlign: 'center'
+  },
+  maxInputValue: props => props.facet.style && props.facet.style.maxInputValue ? props.facet.style.maxInputValue : {
+    fontFamily: 'Montserrat',
+    fontSize: '13px',
+    color: '#717171',
+    background: '#F0F0F0',
+    textAlign: 'center'
+  },
+  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);
 exports.default = _default;

package/package.json

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

package/src/components/facet/FacetStyle.js

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

package/src/components/inputs/FilterItemStyle.js

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

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

@@ -1,9 +1,9 @@
 export default () => ({
   listItemGutters: {
-    padding: '10px 20px 10px 0px',
+    padding: '10px 10px 10px 0px',
   },
   checkboxRoot: {
-    marginLeft: '5px',
+    marginLeft: '8px',
     height: 12,
   },
   panelDetailText: {
@@ -24,7 +24,8 @@ export default () => ({
   checkboxName: {
     margin: '0',
     color: '#000000',
-    fontSize: '14px',
+    fontSize: '16px',
+    fontWeight: 300,
     marginTop: '1.5px',
     fontFamily: 'Nunito',
     lineHeight: '120%',

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';
@@ -43,6 +46,8 @@ const CheckBoxView = ({
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
 
+  const labelCheckbox = { inputProps: { 'aria-label': 'Checkbox item' } };
+
   const handleToggle = () => {
     const toggleCheckBoxItem = {
       name: name,
@@ -78,16 +83,34 @@ const CheckBoxView = ({
       >
         <Checkbox
           id={`checkbox_${facet.label}_${name}`}
-          icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
+          {...labelCheckbox}
+          icon={
+            <Icon style={{
+              fontSize: '18px',
+              lineHeight: '22px',
+            }}
+            >
+              <img
+                src={emptyCheckBox}
+                alt="checkbox-icon"
+              />
+            </Icon>
+          }
           onClick={handleToggle}
           checked={isChecked}
           checkedIcon={(
-            <CheckBoxIcon
+            <Icon
               style={{
-                fontSize: 18,
+                fontSize: '18px',
+                lineHeight: '22px',
               }}
               className={`${checkedSection}CheckedIcon`}
-            />
+            >
+              <img
+                src={checkedBox}
+                alt="checkedBox-icon"
+              />
+            </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/InputMinMaxStyle.js

@@ -1,4 +1,16 @@
 export default () => ({
   slider_INPUT_MIN: {
+    fontFamily: 'Montserrat',
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#717171',
+    background: '#F0F0F0',
+  },
+  slider_INPUT_MAX: {
+    fontFamily: 'Montserrat',
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#717171',
+    background: '#F0F0F0',
   },
 });

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';
 
@@ -14,7 +14,7 @@ const SliderView = ({
   onSliderToggle,
   filterState,
 }) => {
-  const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues, style } = facet;
+  const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
@@ -52,16 +52,14 @@ const SliderView = ({
 
   return (
     <>
-      <div className={style && style.sliderRoot ? style.sliderRoot : classes.sliderRoot}>
-        <div className={style && style.minMaxInputs ? style.minMaxInputs : classes.minMaxInputs}>
-          <div className={style && style.minValue ? style.minValue : classes.minValue}>
-            <Typography className={style && style.minInputLabel
-              ? style.minInputLabel
-              : classes.minInputLabel}
-            >
+      <div className={classes.sliderRoot}>
+        <div className={classes.minMaxInputs}>
+          <div className={classes.minValue}>
+            <Typography className={classes.minInputLabel}>
               Min:
             </Typography>
             <InputMinMaxView
+              className={classes.minInputValue}
               lowerBoundVal={sliderValue[0]}
               upperBoundVal={sliderValue[1]}
               minLowerBound={minLowerBound}
@@ -70,14 +68,12 @@ const SliderView = ({
               onInputChange={handleChangeCommittedSlider}
             />
           </div>
-          <div className={style && style.maxValue ? style.maxValue : classes.maxValue}>
-            <Typography className={style && style.maxInputLabel
-              ? style.maxInputLabel
-              : classes.maxInputLabel}
-            >
+          <div className={classes.maxValue}>
+            <Typography className={classes.maxInputLabel}>
               Max:
             </Typography>
             <InputMinMaxView
+              className={classes.maxInputValue}
               lowerBoundVal={sliderValue[0]}
               upperBoundVal={sliderValue[1]}
               minLowerBound={minLowerBound}
@@ -87,7 +83,7 @@ const SliderView = ({
             />
           </div>
         </div>
-        <div className={style && style.slider ? style.slider : classes.slider}>
+        <div className={classes.slider}>
           {/* Change to red if invalid range */}
           <Slider
             disableSwap
@@ -99,28 +95,18 @@ const SliderView = ({
             min={minLowerBound}
             max={maxUpperBound}
             classes={{
-              rail: style && style.rail ? style.rail : classes.rail,
-              thumb: isValid() ? (style && style.thumb ? style.thumb : classes.thumb)
-                : (style && style.invalidThumb ? style.invalidThumb : classes.invalidThumb),
-              track: isValid() ? (style && style.track ? style.track : classes.track)
-                : (style && style.invalidTrack ? style.invalidTrack : classes.invalidTrack),
+              colorPrimary: classes.colorPrimary,
+              rail: classes.rail,
+              thumb: isValid() ? classes.thumb : classes.invalidThumb,
+              track: isValid() ? classes.track : classes.invalidTrack,
             }}
           />
         </div>
-        <Box className={style && style.lowerUpperBound
-          ? style.lowerUpperBound
-          : classes.lowerUpperBound}
-        >
-          <Typography className={style && style.lowerBound
-            ? style.lowerBound
-            : classes.lowerBound}
-          >
+        <Box className={classes.lowerUpperBound}>
+          <Typography className={classes.lowerBound}>
             {minLowerBound}
           </Typography>
-          <Typography className={style && style.upperBound
-            ? style.upperBound
-            : classes.upperBound}
-          >
+          <Typography className={classes.upperBound}>
             {maxUpperBound}
           </Typography>
         </Box>
@@ -130,11 +116,7 @@ const SliderView = ({
         (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
         && (
           <Typography
-            className={isValid()
-              ? (style && style.sliderText ? style.sliderText : classes.sliderText)
-              : (style && style.invalidSliderText
-                ? style.invalidSliderText
-                : classes.invalidSliderText)}
+            className={isValid() ? classes.sliderText : classes.invalidSliderText}
           >
             {sliderValue[0]}
             {' - '}
@@ -148,4 +130,179 @@ 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',
+    }),
+  minInputValue: (props) => (props.facet.style && props.facet.style.minInputValue
+    ? props.facet.style.minInputValue
+    : {
+      fontFamily: 'Montserrat',
+      fontSize: '13px',
+      color: '#717171',
+      background: '#F0F0F0',
+      textAlign: 'center',
+    }),
+  maxInputValue: (props) => (props.facet.style && props.facet.style.maxInputValue
+    ? props.facet.style.maxInputValue
+    : {
+      fontFamily: 'Montserrat',
+      fontSize: '13px',
+      color: '#717171',
+      background: '#F0F0F0',
+      textAlign: 'center',
+    }),
+  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);