@bento-core/facet-filter 1.0.1-ccdihub.1 → 1.0.1-ccdihub.3

package/dist/FacetFilterController.js

@@ -128,6 +128,7 @@ const FacetFilterController = props => {
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
             updateFacet.facetValues = [lowerBound, upperBound];
+            updateFacet.style = facet.style;
           }
         }
         updateFacets.push(updateFacet);

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)), (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

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 }; }
@@ -112,5 +111,122 @@ const SliderView = _ref => {
     className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };
-var _default = (0, _core.withStyles)(_SliderStyle.default)(SliderView);
+const styles = () => ({
+  sliderRoot: props => props.facet.style && props.facet.style.sliderRoot ? props.facet.style.sliderRoot : {
+    marginTop: '10px',
+    marginLeft: '20px',
+    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',
+    '&~&': {
+      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'
+  })
+});
+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.1",
+  "version": "1.0.1-ccdihub.3",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

package/src/FacetFilterController.js

@@ -113,6 +113,7 @@ const FacetFilterController = (props) => {
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
             updateFacet.facetValues = [lowerBound, upperBound];
+            updateFacet.style = facet.style;
           }
         }
         updateFacets.push(updateFacet);

package/src/components/facet/FacetView.js

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

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';
 
@@ -113,9 +113,7 @@ const SliderView = ({
         (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
         && (
           <Typography
-            className={isValid()
-              ? classes.sliderText
-              : classes.invalidSliderText}
+            className={isValid() ? classes.sliderText : classes.invalidSliderText}
           >
             {sliderValue[0]}
             {' - '}
@@ -129,4 +127,124 @@ const SliderView = ({
   );
 };
 
+const styles = () => ({
+  sliderRoot: (props) => (props.facet.style && props.facet.style.sliderRoot
+    ? props.facet.style.sliderRoot
+    : {
+      marginTop: '10px',
+      marginLeft: '20px',
+      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',
+    '&~&': {
+      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',
+  }),
+});
+
 export default withStyles(styles)(SliderView);