@pie-lib/render-ui 4.16.1-beta.0 → 4.18.0

package/lib/ui-layout.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _appendCssRules = _interopRequireDefault(require("./append-css-rules"));
+
+var _excluded = ["children", "className", "classes", "fontSizeFactor"],
+    _excluded2 = ["extraCSSRules"];
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var UiLayout = /*#__PURE__*/function (_AppendCSSRules) {
+  (0, _inherits2["default"])(UiLayout, _AppendCSSRules);
+
+  var _super = _createSuper(UiLayout);
+
+  function UiLayout(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, UiLayout);
+    _this = _super.call(this, props);
+    _this.classesSheet = document.createElement('style');
+    return _this;
+  }
+
+  (0, _createClass2["default"])(UiLayout, [{
+    key: "computeStyle",
+    value: function computeStyle(fontSizeFactor) {
+      var getFontSize = function getFontSize(element) {
+        return parseFloat(getComputedStyle(element).fontSize);
+      };
+
+      var rootFontSize = getFontSize(document.documentElement);
+      var bodyFontSize = getFontSize(document.body);
+      var effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
+      return fontSizeFactor !== 1 ? {
+        fontSize: "".concat(effectiveFontSize * fontSizeFactor, "px")
+      } : null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          classes = _this$props.classes,
+          fontSizeFactor = _this$props.fontSizeFactor,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var finalClass = (0, _classnames["default"])(className, classes.extraCSSRules, classes.uiLayoutContainer);
+      var extraCSSRules = rest.extraCSSRules,
+          restProps = (0, _objectWithoutProperties2["default"])(rest, _excluded2);
+      var style = this.computeStyle(fontSizeFactor);
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+        className: finalClass
+      }, restProps, style && {
+        style: style
+      }), children);
+    }
+  }]);
+  return UiLayout;
+}(_appendCssRules["default"]);
+
+(0, _defineProperty2["default"])(UiLayout, "propTypes", {
+  classes: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  children: _propTypes["default"].array,
+  extraCSSRules: _propTypes["default"].shape({
+    names: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    rules: _propTypes["default"].string
+  }),
+  fontSizeFactor: _propTypes["default"].number
+});
+(0, _defineProperty2["default"])(UiLayout, "defaultProps", {
+  extraCSSRules: {},
+  fontSizeFactor: 1
+});
+var styles = {
+  extraCSSRules: {},
+  // need this because some browsers set their own style on table
+  uiLayoutContainer: {
+    '& table, th, td': {
+      fontSize: 'inherit'
+      /* Ensure table elements inherit font size */
+
+    }
+  }
+};
+var Styled = (0, _styles.withStyles)(styles)(UiLayout);
+var _default = Styled;
+exports["default"] = _default;
+//# sourceMappingURL=ui-layout.js.map

package/lib/ui-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui-layout.jsx"],"names":["UiLayout","props","classesSheet","document","createElement","fontSizeFactor","getFontSize","element","parseFloat","getComputedStyle","fontSize","rootFontSize","documentElement","bodyFontSize","body","effectiveFontSize","Math","max","children","className","classes","rest","finalClass","extraCSSRules","uiLayoutContainer","restProps","style","computeStyle","AppendCSSRules","PropTypes","object","string","array","shape","names","arrayOf","rules","number","styles","Styled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;IAEMA,Q;;;;;AAiBJ,oBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AACA,UAAKC,YAAL,GAAoBC,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAApB;AAFiB;AAGlB;;;;WAED,sBAAaC,cAAb,EAA6B;AAC3B,UAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,OAAD;AAAA,eAAaC,UAAU,CAACC,gBAAgB,CAACF,OAAD,CAAhB,CAA0BG,QAA3B,CAAvB;AAAA,OAApB;;AAEA,UAAMC,YAAY,GAAGL,WAAW,CAACH,QAAQ,CAACS,eAAV,CAAhC;AACA,UAAMC,YAAY,GAAGP,WAAW,CAACH,QAAQ,CAACW,IAAV,CAAhC;AACA,UAAMC,iBAAiB,GAAGC,IAAI,CAACC,GAAL,CAASN,YAAT,EAAuBE,YAAvB,CAA1B;AAEA,aAAOR,cAAc,KAAK,CAAnB,GAAuB;AAAEK,QAAAA,QAAQ,YAAKK,iBAAiB,GAAGV,cAAzB;AAAV,OAAvB,GAAiF,IAAxF;AACD;;;WAED,kBAAS;AACP,wBAAkE,KAAKJ,KAAvE;AAAA,UAAQiB,QAAR,eAAQA,QAAR;AAAA,UAAkBC,SAAlB,eAAkBA,SAAlB;AAAA,UAA6BC,OAA7B,eAA6BA,OAA7B;AAAA,UAAsCf,cAAtC,eAAsCA,cAAtC;AAAA,UAAyDgB,IAAzD;AAEA,UAAMC,UAAU,GAAG,4BAAWH,SAAX,EAAsBC,OAAO,CAACG,aAA9B,EAA6CH,OAAO,CAACI,iBAArD,CAAnB;AACA,UAAQD,aAAR,GAAwCF,IAAxC,CAAQE,aAAR;AAAA,UAA0BE,SAA1B,6CAAwCJ,IAAxC;AACA,UAAMK,KAAK,GAAG,KAAKC,YAAL,CAAkBtB,cAAlB,CAAd;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEiB;AAAhB,SAAgCG,SAAhC,EAAgDC,KAAK,IAAI;AAAEA,QAAAA,KAAK,EAALA;AAAF,OAAzD,GACGR,QADH,CADF;AAKD;;;EA5CoBU,0B;;iCAAjB5B,Q,eACe;AACjBoB,EAAAA,OAAO,EAAES,sBAAUC,MADF;AAEjBX,EAAAA,SAAS,EAAEU,sBAAUE,MAFJ;AAGjBb,EAAAA,QAAQ,EAAEW,sBAAUG,KAHH;AAIjBT,EAAAA,aAAa,EAAEM,sBAAUI,KAAV,CAAgB;AAC7BC,IAAAA,KAAK,EAAEL,sBAAUM,OAAV,CAAkBN,sBAAUE,MAA5B,CADsB;AAE7BK,IAAAA,KAAK,EAAEP,sBAAUE;AAFY,GAAhB,CAJE;AAQjB1B,EAAAA,cAAc,EAAEwB,sBAAUQ;AART,C;iCADfrC,Q,kBAYkB;AACpBuB,EAAAA,aAAa,EAAE,EADK;AAEpBlB,EAAAA,cAAc,EAAE;AAFI,C;AAmCxB,IAAMiC,MAAM,GAAG;AACbf,EAAAA,aAAa,EAAE,EADF;AAEb;AACAC,EAAAA,iBAAiB,EAAE;AACjB,uBAAmB;AACjBd,MAAAA,QAAQ,EAAE;AAAU;;AADH;AADF;AAHN,CAAf;AAUA,IAAM6B,MAAM,GAAG,wBAAWD,MAAX,EAAmBtC,QAAnB,CAAf;eAEeuC,M","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport AppendCSSRules from './append-css-rules';\n\nclass UiLayout extends AppendCSSRules {\n  static propTypes = {\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    children: PropTypes.array,\n    extraCSSRules: PropTypes.shape({\n      names: PropTypes.arrayOf(PropTypes.string),\n      rules: PropTypes.string,\n    }),\n    fontSizeFactor: PropTypes.number,\n  };\n\n  static defaultProps = {\n    extraCSSRules: {},\n    fontSizeFactor: 1,\n  };\n\n  constructor(props) {\n    super(props);\n    this.classesSheet = document.createElement('style');\n  }\n\n  computeStyle(fontSizeFactor) {\n    const getFontSize = (element) => parseFloat(getComputedStyle(element).fontSize);\n\n    const rootFontSize = getFontSize(document.documentElement);\n    const bodyFontSize = getFontSize(document.body);\n    const effectiveFontSize = Math.max(rootFontSize, bodyFontSize);\n\n    return fontSizeFactor !== 1 ? { fontSize: `${effectiveFontSize * fontSizeFactor}px` } : null;\n  }\n\n  render() {\n    const { children, className, classes, fontSizeFactor, ...rest } = this.props;\n\n    const finalClass = classNames(className, classes.extraCSSRules, classes.uiLayoutContainer);\n    const { extraCSSRules, ...restProps } = rest;\n    const style = this.computeStyle(fontSizeFactor);\n\n    return (\n      <div className={finalClass} {...restProps} {...(style && { style })}>\n        {children}\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  extraCSSRules: {},\n  // need this because some browsers set their own style on table\n  uiLayoutContainer: {\n    '& table, th, td': {\n      fontSize: 'inherit' /* Ensure table elements inherit font size */,\n    },\n  },\n};\n\nconst Styled = withStyles(styles)(UiLayout);\n\nexport default Styled;\n"],"file":"ui-layout.js"}

package/lib/withUndoReset.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Restore = _interopRequireDefault(require("@material-ui/icons/Restore"));
+
+var _Undo = _interopRequireDefault(require("@material-ui/icons/Undo"));
+
+var _excluded = ["classes"];
+
+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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = function styles(theme) {
+  return {
+    wrapper: {
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    resetUndoContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    icon: {
+      width: '24px',
+      height: '24px',
+      color: 'gray',
+      marginRight: theme.spacing.unit
+    },
+    buttonContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      marginLeft: theme.spacing.unit * 3,
+      marginRight: theme.spacing.unit * 3
+    }
+  };
+};
+/**
+ * HOC that adds undo and reset functionality for session values
+ */
+
+
+var withUndoReset = function withUndoReset(WrappedComponent) {
+  var WithUndoReset = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2["default"])(WithUndoReset, _React$Component);
+
+    var _super = _createSuper(WithUndoReset);
+
+    function WithUndoReset(props) {
+      var _this;
+
+      (0, _classCallCheck2["default"])(this, WithUndoReset);
+      _this = _super.call(this, props);
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSessionChange", function (session) {
+        _this.setState(function (state) {
+          return {
+            session: session,
+            changes: [].concat((0, _toConsumableArray2["default"])(state.changes), [session])
+          };
+        }, function () {
+          return _this.props.onSessionChange(session);
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onUndo", function () {
+        _this.setState(function (state) {
+          var newChanges = (0, _toConsumableArray2["default"])(state.changes);
+          newChanges.pop();
+          return {
+            changes: newChanges,
+            session: newChanges.length ? newChanges[newChanges.length - 1] : state.sessionInitialValues
+          };
+        }, function () {
+          return _this.props.onSessionChange(_this.state.session);
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onReset", function () {
+        _this.setState(function (state) {
+          return {
+            session: state.sessionInitialValues,
+            changes: []
+          };
+        }, function () {
+          return _this.props.onSessionChange(_this.state.sessionInitialValues);
+        });
+      });
+      _this.state = {
+        sessionInitialValues: JSON.parse(JSON.stringify(props.session)),
+        session: props.session,
+        changes: []
+      };
+      return _this;
+    }
+
+    (0, _createClass2["default"])(WithUndoReset, [{
+      key: "render",
+      value: function render() {
+        var _this$props = this.props,
+            classes = _this$props.classes,
+            rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+        var _this$state = this.state,
+            changes = _this$state.changes,
+            session = _this$state.session;
+        return /*#__PURE__*/React.createElement("div", {
+          className: classes.wrapper
+        }, /*#__PURE__*/React.createElement("div", {
+          className: classes.resetUndoContainer
+        }, /*#__PURE__*/React.createElement(_Button["default"], {
+          className: classes.buttonContainer,
+          color: "primary",
+          disabled: changes.length === 0,
+          onClick: this.onUndo
+        }, /*#__PURE__*/React.createElement(_Undo["default"], {
+          className: classes.icon
+        }), " Undo"), /*#__PURE__*/React.createElement(_Button["default"], {
+          className: classes.buttonContainer,
+          color: "primary",
+          disabled: changes.length === 0,
+          onClick: this.onReset
+        }, /*#__PURE__*/React.createElement(_Restore["default"], {
+          className: classes.icon
+        }), " Start Over")), /*#__PURE__*/React.createElement(WrappedComponent, (0, _extends2["default"])({}, rest, {
+          session: session,
+          onSessionChange: this.onSessionChange
+        })));
+      }
+    }]);
+    return WithUndoReset;
+  }(React.Component);
+
+  (0, _defineProperty2["default"])(WithUndoReset, "propTypes", {
+    classes: _propTypes["default"].object,
+    session: _propTypes["default"].object,
+    onSessionChange: _propTypes["default"].func
+  });
+  return (0, _styles.withStyles)(styles)(WithUndoReset);
+};
+
+var _default = withUndoReset;
+exports["default"] = _default;
+//# sourceMappingURL=withUndoReset.js.map

package/lib/withUndoReset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/withUndoReset.jsx"],"names":["styles","theme","wrapper","display","flexDirection","resetUndoContainer","alignItems","justifyContent","icon","width","height","color","marginRight","spacing","unit","buttonContainer","marginLeft","withUndoReset","WrappedComponent","WithUndoReset","props","session","setState","state","changes","onSessionChange","newChanges","pop","length","sessionInitialValues","JSON","parse","stringify","classes","rest","onUndo","onReset","React","Component","PropTypes","object","func"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport { withStyles } from '@material-ui/core/styles';\nimport Restore from '@material-ui/icons/Restore';\nimport Undo from '@material-ui/icons/Undo';\n\nconst styles = (theme) => ({\n  wrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  resetUndoContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icon: {\n    width: '24px',\n    height: '24px',\n    color: 'gray',\n    marginRight: theme.spacing.unit,\n  },\n  buttonContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: theme.spacing.unit * 3,\n    marginRight: theme.spacing.unit * 3,\n  },\n});\n\n/**\n * HOC that adds undo and reset functionality for session values\n */\nconst withUndoReset = (WrappedComponent) => {\n  class WithUndoReset extends React.Component {\n    static propTypes = {\n      classes: PropTypes.object,\n      session: PropTypes.object,\n      onSessionChange: PropTypes.func,\n    };\n\n    constructor(props) {\n      super(props);\n\n      this.state = {\n        sessionInitialValues: JSON.parse(JSON.stringify(props.session)),\n        session: props.session,\n        changes: [],\n      };\n    }\n\n    onSessionChange = (session) => {\n      this.setState(\n        (state) => ({ session, changes: [...state.changes, session] }),\n        () => this.props.onSessionChange(session),\n      );\n    };\n\n    onUndo = () => {\n      this.setState(\n        (state) => {\n          const newChanges = [...state.changes];\n\n          newChanges.pop();\n\n          return {\n            changes: newChanges,\n            session: newChanges.length ? newChanges[newChanges.length - 1] : state.sessionInitialValues,\n          };\n        },\n        () => this.props.onSessionChange(this.state.session),\n      );\n    };\n\n    onReset = () => {\n      this.setState(\n        (state) => ({ session: state.sessionInitialValues, changes: [] }),\n        () => this.props.onSessionChange(this.state.sessionInitialValues),\n      );\n    };\n\n    render() {\n      const { classes, ...rest } = this.props;\n      const { changes, session } = this.state;\n\n      return (\n        <div className={classes.wrapper}>\n          <div className={classes.resetUndoContainer}>\n            <Button\n              className={classes.buttonContainer}\n              color=\"primary\"\n              disabled={changes.length === 0}\n              onClick={this.onUndo}\n            >\n              <Undo className={classes.icon} /> Undo\n            </Button>\n            <Button\n              className={classes.buttonContainer}\n              color=\"primary\"\n              disabled={changes.length === 0}\n              onClick={this.onReset}\n            >\n              <Restore className={classes.icon} /> Start Over\n            </Button>\n          </div>\n          <WrappedComponent {...rest} session={session} onSessionChange={this.onSessionChange} />\n        </div>\n      );\n    }\n  }\n\n  return withStyles(styles)(WithUndoReset);\n};\n\nexport default withUndoReset;\n"],"file":"withUndoReset.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "4.16.1-beta.0",
+  "version": "4.18.0",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
   "module": "src/index.js",
   "main": "lib/index.js",
@@ -11,9 +11,8 @@
   "dependencies": {
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@pie-lib/icons": "^2.5.1-beta.0",
-    "@pie-lib/math-rendering": "^3.3.1-beta.0",
-    "@pie-lib/test-utils": "beta",
+    "@pie-lib/icons": "beta",
+    "@pie-lib/math-rendering": "beta",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
@@ -21,6 +20,7 @@
     "react-transition-group": "^2.5.2"
   },
   "peerDependencies": {
+    "@pie-lib/test-utils": "beta",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
@@ -28,5 +28,5 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
-  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
+  "gitHead": "ecb1ca31aa1c24d23af00d5ad04ce73ed8871057"
 }

package/src/__tests__/html-and-math.test.js

@@ -1,9 +1,6 @@
 import HtmlAndMath from '../html-and-math';
 import { shallow } from 'enzyme';
 import React from 'react';
-import { renderMath } from '@pie-lib/math-rendering';
-
-jest.mock('@pie-lib/math-rendering', () => ({ renderMath: jest.fn() }));
 
 describe('html-and-math', () => {
   const mkWrapper = (extras) => {
@@ -24,23 +21,4 @@ describe('html-and-math', () => {
       expect(w).toMatchSnapshot();
     });
   });
-
-  describe('componentDidMount', () => {
-    it('calls renderMath', () => {
-      const w = mkWrapper();
-      //mock the ref
-      w.instance().node = { node: true };
-      w.instance().componentDidMount();
-      expect(renderMath).toHaveBeenCalled();
-    });
-  });
-  describe('componentDidUpdate', () => {
-    it('calls renderMath', () => {
-      const w = mkWrapper();
-      //mock the ref
-      w.instance().node = { node: true };
-      w.instance().componentDidUpdate();
-      expect(renderMath).toHaveBeenCalled();
-    });
-  });
 });

package/src/color.js

@@ -10,6 +10,7 @@ export const defaults = {
   DISABLED_SECONDARY: '#ABABAB',
   CORRECT: green[500],
   CORRECT_SECONDARY: green[50],
+  CORRECT_TERTIARY: '#0EA449',
   CORRECT_WITH_ICON: '#087D38',
   INCORRECT: orange[500],
   INCORRECT_SECONDARY: red[50],
@@ -26,11 +27,13 @@ export const defaults = {
   TERTIARY_LIGHT: '#D0E2F0',
   BACKGROUND: 'rgba(255,255,255,0)',
   BACKGROUND_DARK: '#ECEDF1',
+  DROPDOWN_BACKGROUND: '#E0E1E6', // this is used for inline-dropdown
   // this is only used for multi-trait-rubric, we might want to use BACKGROUND_DARK instead
   SECONDARY_BACKGROUND: 'rgba(241,241,241,1)',
   BORDER: '#9A9A9A',
   BORDER_LIGHT: '#D1D1D1',
   BORDER_DARK: '#646464',
+  BORDER_GRAY: '#7E8494',
   BLACK: '#000000',
   WHITE: '#ffffff',
   TRANSPARENT: 'transparent',
@@ -39,6 +42,13 @@ export const defaults = {
   FOCUS_CHECKED_BORDER: '#1565C0',
   FOCUS_UNCHECKED: '#E0E0E0',
   FOCUS_UNCHECKED_BORDER: '#757575',
+  // this is used for select text tokens
+  BLUE_GREY100: '#F3F5F7',
+  BLUE_GREY300: '#C0C3CF',
+  BLUE_GREY600: '#7E8494',
+  BLUE_GREY900: '#152452',
+  // this is used for charting
+  FADED_PRIMARY: '#DCDAFB',
 };
 
 Object.freeze(defaults);
@@ -57,6 +67,7 @@ export const disabled = () => pv('disabled', defaults.DISABLED);
 export const disabledSecondary = () => pv('disabled-secondary', defaults.DISABLED_SECONDARY);
 export const correct = () => pv('correct', defaults.CORRECT);
 export const correctSecondary = () => pv('correct-secondary', defaults.CORRECT_SECONDARY);
+export const correctTertiary = () => pv('correct-tertiary', defaults.CORRECT_TERTIARY);
 export const correctWithIcon = () => pv('correct-icon', defaults.CORRECT_WITH_ICON);
 export const incorrect = () => pv('incorrect', defaults.INCORRECT);
 export const incorrectWithIcon = () => pv('incorrect-icon', defaults.INCORRECT_WITH_ICON);
@@ -68,6 +79,7 @@ export const primary = () => pv('primary', defaults.PRIMARY);
 export const primaryLight = () => pv('primary-light', defaults.PRIMARY_LIGHT);
 export const primaryDark = () => pv('primary-dark', defaults.PRIMARY_DARK);
 export const primaryText = () => pv('primary-text', 'text', defaults.TEXT);
+export const fadedPrimary = () => pv('faded-primary', defaults.FADED_PRIMARY);
 
 export const secondary = () => pv('secondary', defaults.SECONDARY);
 export const secondaryLight = () => pv('secondary-light', defaults.SECONDARY_LIGHT);
@@ -77,6 +89,7 @@ export const secondaryText = () => pv('secondary-text', 'text', defaults.TEXT);
 export const background = () => pv('background', defaults.BACKGROUND);
 export const backgroundDark = () => pv('background-dark', defaults.BACKGROUND_DARK);
 export const secondaryBackground = () => pv('secondary-background', defaults.SECONDARY_BACKGROUND);
+export const dropdownBackground = () => pv('dropdown-background', defaults.DROPDOWN_BACKGROUND);
 
 export const tertiary = () => pv('tertiary', defaults.TERTIARY);
 export const tertiaryLight = () => pv('tertiary-light', defaults.TERTIARY_LIGHT);
@@ -84,6 +97,7 @@ export const tertiaryLight = () => pv('tertiary-light', defaults.TERTIARY_LIGHT)
 export const border = () => pv('border', defaults.BORDER);
 export const borderLight = () => pv('border-light', defaults.BORDER_LIGHT);
 export const borderDark = () => pv('border-dark', defaults.BORDER_DARK);
+export const borderGray = () => pv('border-gray', defaults.BORDER_GRAY);
 
 export const black = () => pv('black', defaults.BLACK);
 export const white = () => pv('white', defaults.WHITE);
@@ -93,3 +107,15 @@ export const focusChecked = () => pv('focus-checked', defaults.FOCUS_CHECKED);
 export const focusCheckedBorder = () => pv('focus-checked-border', defaults.FOCUS_CHECKED_BORDER);
 export const focusUnchecked = () => pv('focus-unchecked', defaults.FOCUS_UNCHECKED);
 export const focusUncheckedBorder = () => pv('focus-unchecked-border', defaults.FOCUS_UNCHECKED_BORDER);
+
+export const blueGrey100 = () => pv('blue-grey-100', defaults.BLUE_GREY100);
+export const blueGrey300 = () => pv('blue-grey-300', defaults.BLUE_GREY300);
+export const blueGrey600 = () => pv('blue-grey-600', defaults.BLUE_GREY600);
+export const blueGrey900 = () => pv('blue-grey-900', defaults.BLUE_GREY900);
+
+export const visualElementsColors = {
+  AXIS_LINE_COLOR: '#5A53C9',
+  ROLLOVER_FILL_BAR_COLOR: '#050F2D',
+  GRIDLINES_COLOR: '#8E88EA',
+  PLOT_FILL_COLOR: '#1463B3',
+};

package/src/html-and-math.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { renderMath } from '@pie-lib/math-rendering';
 import PropTypes from 'prop-types';
 
 export default class HtmlAndMath extends React.Component {
@@ -14,18 +13,6 @@ export default class HtmlAndMath extends React.Component {
     html: '',
   };
 
-  componentDidMount() {
-    if (this.node) {
-      renderMath(this.node);
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.node) {
-      renderMath(this.node);
-    }
-  }
-
   render() {
     const { tag, className, html } = this.props;
     const Tag = tag || 'div';