@bento-core/facet-filter 1.0.1-popsci.2 → 1.0.1-popsci.3

package/dist/FacetFilterStyle.js

@@ -25,7 +25,7 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   }
 });

package/dist/components/facet/FacetStyle.js

@@ -46,7 +46,7 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   },
   NonSortGroup: {
@@ -57,25 +57,25 @@ var _default = () => ({
   },
   NonSortGroupItem: {
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     float: 'right',
     marginRight: '10px',
     marginTop: '5px'
   },
   highlight: {
-    color: '#b2c6d6'
+    color: '#537A9D'
   },
   showMore: {
     textAlign: 'right',
     paddingRight: '5px',
     cursor: 'pointer',
-    fontSize: '10px',
+    fontSize: '11px',
     width: '100%'
   }
 });

package/dist/components/facet/FacetView.js

@@ -35,7 +35,7 @@ const FacetView = _ref => {
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-   * expand section incase of active local search
+   * Expand section incase of active local search
    */
   (0, _react.useEffect)(() => {
     if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {

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

@@ -8,6 +8,12 @@ var _default = () => ({
   listItemGutters: {
     padding: '10px 20px 10px 0px'
   },
+  listItemRoot: {
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)'
+    }
+  },
   checkboxRoot: {
     marginLeft: '5px',
     height: 12

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

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _core = require("@material-ui/core");
+var _TouchRipple = _interopRequireDefault(require("@material-ui/core/ButtonBase/TouchRipple"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@material-ui/icons");
 var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/jsx-wrap-multilines */
@@ -18,8 +21,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable object-curly-newline */
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable no-useless-escape */
 
-const alignment = 'flex-start';
 const CheckBoxView = _ref => {
   let {
     classes,
@@ -39,6 +42,18 @@ const CheckBoxView = _ref => {
   } = checkboxItem;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
+  const checkboxId = "checkbox_".concat(facet.label, "_").concat(name);
+  const rippleRef = (0, _react.useRef)(null);
+  const handleRippleStart = event => {
+    if (rippleRef.current) {
+      rippleRef.current.start(event);
+    }
+  };
+  const handleRippleStop = event => {
+    if (rippleRef.current) {
+      rippleRef.current.stop(event);
+    }
+  };
   const handleToggle = () => {
     const toggleCheckBoxItem = {
       name: name,
@@ -59,24 +74,33 @@ const CheckBoxView = _ref => {
     className: classes.checkboxName
   }, name));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+    component: "div",
     width: 1,
-    button: true,
     alignItems: "flex-start",
     onClick: handleToggle,
+    onMouseDown: handleRippleStart,
+    onMouseUp: handleRippleStop,
+    onMouseLeave: handleRippleStop,
     classes: {
-      gutters: classes.listItemGutters
+      gutters: classes.listItemGutters,
+      root: classes.listItemRoot
     },
     className: (0, _clsx.default)({
       ["".concat(checkedSection, "Checked").concat(indexType)]: isChecked
     })
   }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
-    id: "checkbox_".concat(facet.label, "_").concat(name),
+    id: checkboxId,
     icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
       style: {
         fontSize: 18
-      }
+      },
+      className: checkedSection
     }),
-    onClick: handleToggle,
+    inputProps: {
+      'aria-label': 'checkbox',
+      tabIndex: -1,
+      'aria-hidden': true
+    },
     checked: isChecked,
     checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
       style: {
@@ -88,18 +112,26 @@ const CheckBoxView = _ref => {
     color: "secondary",
     classes: {
       root: classes.checkboxRoot
+    },
+    style: {
+      pointerEvents: 'none'
     }
   }), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     id: datafield,
     title: tooltip
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: datafield
-  }, /*#__PURE__*/_react.default.createElement(LabelComponent, null))) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, null), /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(LabelComponent, null))) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+    className: "".concat(checkedSection, "_md_space")
+  }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: (0, _clsx.default)("".concat(checkedSection, "Subjects"), {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked
     })
-  }, "(".concat(subjects, ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, "(".concat(subjects, ")")), /*#__PURE__*/_react.default.createElement(_TouchRipple.default, {
+    ref: rippleRef,
+    center: true
+  })), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
       backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
       margin: '0px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-popsci.2",
+  "version": "1.0.1-popsci.3",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -25,5 +25,5 @@
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "5c65b1486cf1962dce93f6e71019e6079d82a4ba"
+  "gitHead": "01a57a616fd8d9cc6ffca70907b17b16a1dc369f"
 }

package/src/FacetFilterStyle.js

@@ -19,7 +19,7 @@ export default () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
 });

package/src/components/facet/FacetStyle.js

@@ -40,7 +40,7 @@ export default () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
   NonSortGroup: {
@@ -51,25 +51,25 @@ export default () => ({
   },
   NonSortGroupItem: {
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px',
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     float: 'right',
     marginRight: '10px',
     marginTop: '5px',
   },
   highlight: {
-    color: '#b2c6d6',
+    color: '#537A9D',
   },
   showMore: {
     textAlign: 'right',
     paddingRight: '5px',
     cursor: 'pointer',
-    fontSize: '10px',
+    fontSize: '11px',
     width: '100%',
   },
 });

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

@@ -2,6 +2,12 @@ export default () => ({
   listItemGutters: {
     padding: '10px 20px 10px 0px',
   },
+  listItemRoot: {
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+    },
+  },
   checkboxRoot: {
     marginLeft: '5px',
     height: 12,

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

@@ -5,7 +5,9 @@
 /* eslint-disable object-curly-newline */
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
-import React from 'react';
+/* eslint-disable no-useless-escape */
+
+import React, { useRef } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import {
   Checkbox,
@@ -15,15 +17,15 @@ import {
   Tooltip,
   Box,
   Typography,
+  ButtonBase,
 } from '@material-ui/core';
+import TouchRipple from '@material-ui/core/ButtonBase/TouchRipple';
 import clsx from 'clsx';
 import {
   CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
 } from '@material-ui/icons';
 import styles from './CheckboxStyle';
 
-const alignment = 'flex-start';
-
 const CheckBoxView = ({
   classes,
   checkboxItem,
@@ -42,6 +44,20 @@ const CheckBoxView = ({
   } = checkboxItem;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
+  const checkboxId = `checkbox_${facet.label}_${name}`;
+  const rippleRef = useRef(null);
+
+  const handleRippleStart = (event) => {
+    if (rippleRef.current) {
+      rippleRef.current.start(event);
+    }
+  };
+
+  const handleRippleStop = (event) => {
+    if (rippleRef.current) {
+      rippleRef.current.stop(event);
+    }
+  };
 
   const handleToggle = () => {
     const toggleCheckBoxItem = {
@@ -68,57 +84,63 @@ const CheckBoxView = ({
 
   return (
     <>
-      <ListItem
-        width={1}
-        button
-        alignItems="flex-start"
-        onClick={handleToggle}
-        classes={{ gutters: classes.listItemGutters }}
-        className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
-      >
-        <Checkbox
-          id={`checkbox_${facet.label}_${name}`}
-          icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
+        <ListItem
+          component="div"
+          width={1}
+          alignItems="flex-start"
           onClick={handleToggle}
-          checked={isChecked}
-          checkedIcon={(
-            <CheckBoxIcon
-              style={{
-                fontSize: 18,
-              }}
-              className={`${checkedSection}CheckedIcon`}
-            />
+          onMouseDown={handleRippleStart}
+          onMouseUp={handleRippleStop}
+          onMouseLeave={handleRippleStop}
+          classes={{ gutters: classes.listItemGutters, root: classes.listItemRoot }}
+          className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
+        >
+          <Checkbox
+            id={checkboxId}
+            icon={(<CheckBoxBlankIcon style={{ fontSize: 18 }} className={checkedSection} />
+            )}
+            inputProps={{ 'aria-label': 'checkbox', tabIndex: -1, 'aria-hidden': true }}
+            checked={isChecked}
+            checkedIcon={(
+              <CheckBoxIcon
+                style={{
+                  fontSize: 18,
+                }}
+                className={`${checkedSection}CheckedIcon`}
+              />
+            )}
+            disableRipple
+            color="secondary"
+            classes={{ root: classes.checkboxRoot }}
+            style={{ pointerEvents: 'none' }}
+          />
+          { tooltip ? (
+            <Tooltip id={datafield} title={tooltip}>
+              <div className={datafield}>
+                <LabelComponent />
+              </div>
+            </Tooltip>
+          ) : (
+            <LabelComponent />
           )}
-          disableRipple
-          color="secondary"
-          classes={{ root: classes.checkboxRoot }}
+          <ListItemText className={`${checkedSection}_md_space`} />
+          <Typography
+            className={clsx(`${checkedSection}Subjects`, {
+              [`${checkedSection}SubjectUnChecked`]: !isChecked,
+              [`${checkedSection}SubjectChecked`]: isChecked,
+            })}
+          >
+            {`(${subjects})`}
+          </Typography>
+          <TouchRipple ref={rippleRef} center />
+        </ListItem>
+        <Divider
+          style={{
+            backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
+            margin: '0px',
+            height: isChecked ? '2px' : '1px',
+          }}
         />
-        { tooltip ? (
-          <Tooltip id={datafield} title={tooltip}>
-            <div className={datafield}>
-              <LabelComponent />
-            </div>
-          </Tooltip>
-        ) : (
-          <LabelComponent />
-        )}
-        <ListItemText />
-        <Typography
-          className={clsx(`${checkedSection}Subjects`, {
-            [`${checkedSection}SubjectUnChecked`]: !isChecked,
-            [`${checkedSection}SubjectChecked`]: isChecked,
-          })}
-        >
-          {`(${subjects})`}
-        </Typography>
-      </ListItem>
-      <Divider
-        style={{
-          backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
-          margin: '0px',
-          height: isChecked ? '2px' : '1px',
-        }}
-      />
     </>
   );
 };