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

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,11 +28,11 @@ const SliderView = _ref => {
     maxUpperBound,
     quantifier,
     datafield,
-    facetValues,
-    style
+    facetValues
   } = 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 = () => {
@@ -62,13 +61,13 @@ 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, {
     lowerBoundVal: sliderValue[0],
     upperBoundVal: sliderValue[1],
@@ -77,9 +76,9 @@ 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, {
     lowerBoundVal: sliderValue[0],
     upperBoundVal: sliderValue[1],
@@ -88,7 +87,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 +98,136 @@ 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
+      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 = () => ({
+  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.2",
+  "version": "1.0.1-ccdihub.4",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

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,10 +14,12 @@ 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];
 
+  console.log(facet);
+
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
     const checks = [
@@ -52,13 +54,10 @@ 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
@@ -70,11 +69,8 @@ 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
@@ -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,17 @@ 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),
+              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 +115,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 +129,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);