@hipay/hipay-material-ui 2.0.0-beta.52 → 2.0.0-beta.54

package/HiCell/CellSentinel.js

@@ -26,59 +26,17 @@ var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var styles = {
-  smartDecision: {
-    marginLeft: 2,
-    display: 'inline-block',
-    minWidth: 18
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
   },
-  label: {
-    marginLeft: 2
-  },
-  nowrap: {
-    whiteSpace: 'nowrap'
-  }
+  label: {}
 };
-/**
- * Get Theme color from fraudResult
- * @param fraudResult
- * @returns {*}
- */
-
-exports.styles = styles;
-
-function getColorFromFraudResult(fraudResult) {
-  var color;
-
-  switch (fraudResult.toUpperCase()) {
-    case 'ACCEPTED':
-      color = 'positive';
-      break;
-
-    case 'BLOCKED':
-      color = 'negative';
-      break;
-
-    case 'CHALLENGED':
-      color = 'middle';
-      break;
-
-    case 'PENDING':
-      color = 'primary';
-      break;
-
-    case 'FORCE_AUTHENTICATE':
-    case 'ASK_AUTHENTICATE':
-    default:
-      color = 'neutral';
-      break;
-  }
-
-  return color;
-}
 /**
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
  */
 
+exports.styles = styles;
 
 var CellSentinel =
 /*#__PURE__*/
@@ -94,83 +52,49 @@ function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          active = _this$props.active,
           classes = _this$props.classes,
-          score = _this$props.score,
-          fraudResult = _this$props.fraudResult,
-          automaticFraudReviewResult = _this$props.automaticFraudReviewResult,
-          pendingManualAction = _this$props.pendingManualAction,
-          smartDecision = _this$props.smartDecision,
-          hideFraudResult = _this$props.hideFraudResult;
-      var scoreLabel = score > 0 ? "+".concat(score) : "".concat(score);
+          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 _label = label ? label : value;
+
+      var _letter = letter ? letter : _label[0];
+
       return _react.default.createElement("div", {
-        style: {
-          textAlign: 'right',
-          minWidth: '100px'
-        }
+        className: classes.flexContent,
+        title: reviewer ? "".concat(_label, "\n").concat(reviewer) : _label
       }, _react.default.createElement(_HiColoredLabel.default, {
-        label: scoreLabel,
-        color: getColorFromFraudResult(fraudResult),
+        active: active,
         classes: {
           root: classes.label
         },
-        active: pendingManualAction
-      }), !hideFraudResult && _react.default.createElement(_HiColoredLabel.default, {
-        label: fraudResult.toUpperCase().substr(0, 1),
-        color: getColorFromFraudResult(fraudResult),
-        classes: {
-          root: classes.label
-        },
-        active: pendingManualAction
-      }), !!smartDecision && _react.default.createElement("div", {
-        className: classes.smartDecision
-      }, automaticFraudReviewResult && _react.default.createElement(_HiColoredLabel.default, {
-        label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
-        color: getColorFromFraudResult(automaticFraudReviewResult),
-        active: pendingManualAction
-      })));
+        color: color,
+        label: _letter,
+        outlined: outlined
+      }));
     }
   }]);
   return CellSentinel;
 }(_react.default.PureComponent);
 
 CellSentinel.defaultProps = {
-  hideFraudResult: false
+  active: false,
+  outlined: false
 };
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
-   */
-  automaticFraudReviewResult: _propTypes.default.string,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
   classes: _propTypes.default.object,
-
-  /**
-   * Résultat de la fraude
-   */
-  fraudResult: _propTypes.default.string.isRequired,
-
-  /**
-   * Si true le fraudResult ne sera pas affiché
-   */
-  hideFraudResult: _propTypes.default.bool,
-
-  /**
-   * Signal qu'il attend une réponse manuelle
-   */
-  pendingManualAction: _propTypes.default.bool,
-
-  /**
-   * Score de la fraude
-   */
-  score: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-
-  /**
-   * Active le SmartDecision (ajoute l'indicateur ou blanc)
-   */
-  smartDecision: _propTypes.default.bool
+  value: _propTypes.default.string,
+  color: _propTypes.default.string,
+  label: _propTypes.default.string,
+  letter: _propTypes.default.string,
+  active: _propTypes.default.bool,
+  reviewer: _propTypes.default.string,
+  outlined: _propTypes.default.bool
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiCell/CellSentinelScore.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.sentinelColorById = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var styles = {
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  label: {}
+};
+exports.styles = styles;
+var sentinelColorById = {
+  NOT_LAUNCHED: '#737373',
+  ACCEPTED: '#00AF01',
+  AUTHENTICATE: '#484A4B',
+  FORCE_AUTHENTICATE: '#20272B',
+  PENDING: '#3987AD',
+  TO_BE_REVIEWED: '#FF8F01',
+  CHALLENGED: '#FF8F01',
+  BLOCKED: '#D50000',
+  ALLOWED: '#00AF01',
+  DENIED: '#D50000'
+};
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+exports.sentinelColorById = sentinelColorById;
+
+var CellSentinelScore =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellSentinelScore, _React$PureComponent);
+
+  function CellSentinelScore() {
+    (0, _classCallCheck2.default)(this, CellSentinelScore);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellSentinelScore).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellSentinelScore, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          result = _this$props.result,
+          value = _this$props.value;
+      return _react.default.createElement("div", {
+        className: classes.flexContent
+      }, _react.default.createElement(_HiColoredLabel.default, {
+        active: result === 'TO_BE_REVIEWED',
+        classes: {
+          root: classes.label
+        },
+        color: sentinelColorById[result],
+        label: value > 0 ? "+".concat(value) : "".concat(value)
+      }));
+    }
+  }]);
+  return CellSentinelScore;
+}(_react.default.PureComponent);
+
+CellSentinelScore.defaultProps = {
+  active: false,
+  outlined: false
+};
+CellSentinelScore.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: _propTypes.default.object,
+  result: _propTypes.default.string,
+  value: _propTypes.default.number
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellSentinelScore'
+})(CellSentinelScore);
+
+exports.default = _default;

package/HiChip/HiChip.js

@@ -71,7 +71,7 @@ var styles = function styles(theme) {
       position: 'relative',
       cursor: 'pointer',
       '&:hover, &:focus': {
-        color: theme.palette.primary.main
+        color: theme.palette.neutral.dark
       }
     },
     label: {
@@ -97,7 +97,8 @@ var styles = function styles(theme) {
       '&:hover, &:focus': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.grey[300]
-      }
+      },
+      position: 'relative'
     },
     badge: {
       height: 16,
@@ -119,7 +120,7 @@ var handleKeyDown = function handleKeyDown(e, fn) {
 function HiChip(props) {
   var _classNames;
 
-  var label = props.label,
+  var className = props.className,
       classes = props.classes,
       fallbackImage = props.fallbackImage,
       icon = props.icon,
@@ -127,6 +128,7 @@ function HiChip(props) {
       iconSize = _props$iconSize === void 0 ? 20 : _props$iconSize,
       id = props.id,
       img = props.img,
+      label = props.label,
       onPrevious = props.onPrevious,
       onNext = props.onNext,
       onDelete = props.onDelete,
@@ -140,7 +142,7 @@ function HiChip(props) {
       titlePrevious = props.titlePrevious;
   return _react.default.createElement("div", {
     id: id,
-    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
+    className: (0, _classnames.default)(classes.root, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
     title: title
   }, icon && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
@@ -209,6 +211,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: _propTypes.default.object,
 
+  /**
+   * Surcharge les classes du composant
+   */
+  className: _propTypes.default.object,
+
   /**
    * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
    */

package/HiColoredLabel/HiColoredLabel.js

@@ -115,6 +115,9 @@ var styles = function styles(theme) {
     activeColorNeutral: {
       color: theme.palette.neutral.contrastText,
       backgroundColor: theme.palette.neutral.main
+    },
+    outlined: {
+      border: '1px solid'
     }
   };
 };
@@ -135,14 +138,15 @@ function HiColoredLabel(props) {
       label = props.label,
       color = props.color,
       active = props.active,
+      outlined = props.outlined,
       fontWeight = props.fontWeight,
       style = props.style,
       theme = props.theme,
-      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
+      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
   var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   var isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
   return _react.default.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), _classNames), className),
+    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes.outlined, outlined), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), _classNames), className),
     style: (0, _extends2.default)({}, style, isHexColor && {
       backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
@@ -182,11 +186,17 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Label à afficher
    */
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node]).isRequired
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node]).isRequired,
+
+  /**
+   * Ajoute une bordure
+   */
+  outlined: _propTypes.default.bool
 } : {};
 HiColoredLabel.defaultProps = {
   active: false,
-  color: 'primary'
+  color: 'primary',
+  outlined: false
 };
 
 var _default = (0, _withStyles.default)(styles, {

package/HiDatePicker/HiDatePicker.js

@@ -270,7 +270,7 @@ function (_React$Component) {
         todayButton: translations.today,
         onTodayButtonClick: this.handleCurrentMonthChange,
         weekdayElement: _Weekday.default,
-        NavBarElement: function NavBarElement(props2) {
+        navbarElement: function navbarElement(props2) {
           return _react.default.createElement(_NavBar.default, (0, _extends2.default)({
             showClockButton: enableTime,
             onClockClick: _this2.handleClockClick