@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta3 → 2.3.0-rcstyleguide-beta4

package/old_components/HiCell/CellIcon.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var styles = {
+  icon: {
+    float: 'left'
+  },
+  label: {
+    margin: '4px 0 4px 5px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  wrapper: {
+    maxWidth: '100%',
+    display: 'inline-flex'
+  },
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  }
+};
+/**
+ * Cette cellule permet d'afficher une icône et un label (optionnel).
+ * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
+ */
+
+exports.styles = styles;
+
+var CellIcon =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellIcon, _React$PureComponent);
+
+  function CellIcon() {
+    (0, _classCallCheck2.default)(this, CellIcon);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellIcon).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellIcon, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          align = _this$props.align,
+          classes = _this$props.classes,
+          color = _this$props.color,
+          icon = _this$props.icon,
+          label = _this$props.label,
+          onClick = _this$props.onClick,
+          size = _this$props.size,
+          view = _this$props.view;
+
+      if (onClick) {
+        return _react.default.createElement("div", {
+          className: align === 'right' ? classes.flexContent : classes.wrapper,
+          title: label
+        }, _react.default.createElement(_HiIconButton.default, {
+          color: 'inherit',
+          style: {
+            color: color,
+            fontSize: size || 24,
+            maxHeight: 31,
+            maxWidth: 31
+          },
+          onClick: onClick
+        }, _react.default.createElement(_HiIcon.default, {
+          className: classes.icon,
+          icon: icon,
+          color: color
+        }), view !== 's' && label && _react.default.createElement("span", {
+          className: classes.label
+        }, label)));
+      }
+
+      return _react.default.createElement("div", {
+        className: align === 'right' ? classes.flexContent : classes.wrapper,
+        title: label
+      }, _react.default.createElement(_HiIcon.default, {
+        color: 'inherit',
+        style: {
+          color: color,
+          fontSize: size || 24
+        },
+        className: classes.icon,
+        icon: icon
+      }), view !== 's' && label && _react.default.createElement("span", {
+        className: classes.label
+      }, label));
+    }
+  }]);
+  return CellIcon;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(CellIcon, "defaultProps", {
+  view: 'm',
+  color: 'neutral'
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellIcon'
+})(CellIcon);
+
+exports.default = _default;

package/old_components/HiCell/CellImage.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles() {
+  return {
+    img: {
+      height: 'auto',
+      float: 'left'
+    },
+    label: {
+      marginLeft: 5,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    wrapper: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  };
+};
+
+exports.styles = styles;
+
+var handleError = function handleError(fallbackImage) {
+  return function (e) {
+    if (fallbackImage) {
+      e.target.src = "".concat(fallbackImage);
+    } else {
+      e.target.style.display = 'none';
+    }
+  };
+};
+/**
+ * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
+ * En vue large, aucun tooltip n'est affiché
+ * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
+ */
+
+
+var CellImage =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellImage, _React$PureComponent);
+
+  function CellImage() {
+    (0, _classCallCheck2.default)(this, CellImage);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellImage).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellImage, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          path = _this$props.path,
+          label = _this$props.label,
+          shortLabel = _this$props.shortLabel,
+          view = _this$props.view,
+          size = _this$props.size,
+          fallbackImage = _this$props.fallbackImage,
+          title = _this$props.title;
+      if (!path || path === '') return '';
+      return _react.default.createElement("div", {
+        className: classes.wrapper,
+        title: label
+      }, _react.default.createElement("img", {
+        src: path,
+        alt: label,
+        title: title,
+        className: classes.img,
+        width: size,
+        onError: handleError(fallbackImage)
+      }), shortLabel && view === 'm' && _react.default.createElement("span", {
+        className: classes.label
+      }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && _react.default.createElement("span", {
+        className: classes.label
+      }, label));
+    }
+  }]);
+  return CellImage;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(CellImage, "defaultProps", {
+  size: 24,
+  view: 's'
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellImage'
+})(CellImage);
+
+exports.default = _default;

package/old_components/HiCell/CellNumeric.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _helpers = require("../utils/helpers");
+
+var styles = function styles() {
+  return {
+    wrapper: {
+      textAlign: 'right'
+    }
+  };
+};
+/**
+ * Cette cellule permet d'afficher un volume ou un montant avec devise
+ */
+
+
+exports.styles = styles;
+
+var CellNumeric =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellNumeric, _React$PureComponent);
+
+  function CellNumeric() {
+    (0, _classCallCheck2.default)(this, CellNumeric);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellNumeric).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellNumeric, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          value = _this$props.value,
+          locale = _this$props.locale,
+          currency = _this$props.currency,
+          view = _this$props.view,
+          precision = _this$props.precision;
+      var displayedValue = '';
+      var title = '';
+
+      if (currency) {
+        displayedValue = (0, _helpers.formatCurrencyAmount)(value, view, locale, currency, precision);
+        title = (0, _helpers.formatCurrencyAmount)(value, 'l', locale, currency);
+      } else {
+        displayedValue = (0, _helpers.formatNumber)(value, view, locale, precision);
+        title = (0, _helpers.formatNumber)(value, 'l', locale, precision);
+      }
+
+      return _react.default.createElement("div", {
+        className: classes.wrapper,
+        title: title
+      }, displayedValue);
+    }
+  }]);
+  return CellNumeric;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(CellNumeric, "defaultProps", {
+  view: 'm',
+  locale: 'en'
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellNumeric'
+})(CellNumeric);
+
+exports.default = _default;

package/old_components/HiCell/CellPinToAction.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiPin = _interopRequireDefault(require("../HiPin"));
+
+var styles = {
+  wrapper: {
+    maxWidth: '100%',
+    display: 'inline-flex'
+  }
+};
+/**
+ * Cette cellule permet d'afficher un pin avec callback (optionnel).
+ */
+
+exports.styles = styles;
+
+var _ref = _react.default.createElement(_HiPin.default, null, "0");
+
+var CellPinToAction =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellPinToAction, _React$PureComponent);
+
+  function CellPinToAction() {
+    (0, _classCallCheck2.default)(this, CellPinToAction);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellPinToAction).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellPinToAction, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          onClick = _this$props.onClick,
+          number = _this$props.number;
+      if (number === undefined) return '';
+      return _react.default.createElement("div", {
+        className: classes.wrapper
+      }, number === 0 ? _ref : _react.default.createElement(_HiPin.default, {
+        color: "primary",
+        onClick: onClick
+      }, number));
+    }
+  }]);
+  return CellPinToAction;
+}(_react.default.PureComponent);
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellPin'
+})(CellPinToAction);
+
+exports.default = _default;

package/old_components/HiCell/CellRate.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _mdiMaterialUi = require("mdi-material-ui");
+
+var _helpers = require("../utils/helpers");
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles(theme) {
+  return {
+    flexContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      position: 'relative',
+      textAlign: 'right',
+      maxHeight: '32px'
+    },
+    trendChipIcon: {
+      width: 14,
+      height: 14,
+      position: 'relative',
+      top: 2
+    },
+    positive: {
+      color: theme.palette.positive.main
+    },
+    negative: {
+      color: theme.palette.negative.main
+    },
+    neutral: {
+      color: theme.palette.neutral.main
+    },
+    spanIndicator: {
+      float: 'right',
+      color: '#737373',
+      position: 'relative',
+      right: 3
+    },
+    rateDiv: {
+      position: 'relative'
+    }
+  };
+};
+/**
+ * Cette cellule permet d'afficher un pourcentage
+ * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
+ */
+
+
+exports.styles = styles;
+
+var CellRate =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellRate, _React$PureComponent);
+
+  function CellRate() {
+    (0, _classCallCheck2.default)(this, CellRate);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellRate).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellRate, [{
+    key: "render",
+    value: function render() {
+      var _classNames, _classNames2;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          value = _this$props.value,
+          trendchip = _this$props.trendchip,
+          isPositive = _this$props.isPositive,
+          indicator = _this$props.indicator,
+          locale = _this$props.locale,
+          view = _this$props.view;
+      var trendIcon;
+      var displayedRate = (0, _helpers.formatRate)(value, view, locale);
+
+      switch (trendchip) {
+        case 'equal':
+          trendIcon = _react.default.createElement(_mdiMaterialUi.Equal, {
+            className: (0, _classnames.default)(classes.trendChipIcon, classes.neutral)
+          });
+          break;
+
+        case 'up':
+          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowTopRight, {
+            className: (0, _classnames.default)(classes.trendChipIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, isPositive), (0, _defineProperty2.default)(_classNames, classes.negative, !isPositive), _classNames))
+          });
+          break;
+
+        case 'down':
+          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowBottomRight, {
+            className: (0, _classnames.default)(classes.trendChipIcon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.positive, !isPositive), (0, _defineProperty2.default)(_classNames2, classes.negative, isPositive), _classNames2))
+          });
+          break;
+
+        default:
+          break;
+      }
+
+      return _react.default.createElement("div", {
+        className: classes.flexContent
+      }, _react.default.createElement("div", {
+        className: typeof indicator === 'undefined' && classes.rateDiv || ''
+      }, displayedRate, trendIcon), typeof indicator !== 'undefined' && _react.default.createElement("span", {
+        className: classes.spanIndicator,
+        style: {
+          fontSize: view !== 'l' ? 10 : 11
+        }
+      }, indicator));
+    }
+  }]);
+  return CellRate;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(CellRate, "defaultProps", {
+  isPositive: true,
+  locale: 'en'
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellRate'
+})(CellRate);
+
+exports.default = _default;

package/old_components/HiCell/CellSentinel.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = {
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  label: {}
+};
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+exports.styles = styles;
+
+var CellSentinel =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellSentinel, _React$PureComponent);
+
+  function CellSentinel() {
+    (0, _classCallCheck2.default)(this, CellSentinel);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellSentinel).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellSentinel, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          classes = _this$props.classes,
+          color = _this$props.color,
+          label = _this$props.label,
+          letter = _this$props.letter,
+          outlined = _this$props.outlined,
+          reviewer = _this$props.reviewer,
+          value = _this$props.value;
+      var effectiveLabel = label || value;
+      var effectiveLetter = letter || effectiveLabel[0];
+      return _react.default.createElement("div", {
+        className: classes.flexContent,
+        title: reviewer ? "".concat(effectiveLabel, "\n").concat(reviewer) : effectiveLabel
+      }, _react.default.createElement(_HiColoredLabel.default, {
+        active: active,
+        classes: {
+          root: classes.label
+        },
+        color: color,
+        label: effectiveLetter,
+        outlined: outlined
+      }));
+    }
+  }]);
+  return CellSentinel;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(CellSentinel, "defaultProps", {
+  active: false,
+  outlined: false
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellSentinel'
+})(CellSentinel);
+
+exports.default = _default;