@hipay/hipay-material-ui 3.0.0 → 3.2.0-PSYCHE-2816

package/HiStepper/HiStep.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Step = _interopRequireDefault(require("@material-ui/core/Step"));
+
+var _StepButton = _interopRequireDefault(require("@material-ui/core/StepButton"));
+
+var _StepContent = _interopRequireDefault(require("@material-ui/core/StepContent"));
+
+var _StepLabel = _interopRequireDefault(require("@material-ui/core/StepLabel"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+
+/**
+ * HiStepIcon used internally by HiStep
+ */
+var HiStepIcon = function HiStepIcon(_ref) {
+  var color = _ref.color,
+      indicator = _ref.indicator,
+      status = _ref.status;
+  // get icon style from color
+  var style = (0, _react.useMemo)(function () {
+    return {
+      backgroundColor: color,
+      color: "#fff",
+      borderRadius: "50%",
+      width: 20,
+      height: 20,
+      padding: 2,
+      lineHeight: "20px",
+      fontWeight: 600,
+      fontSize: 14
+    };
+  }, [color]); // get component from status
+
+  var StepIconComponent = (0, _react.useMemo)(function () {
+    switch (status) {
+      case "done":
+        return _Check.default;
+
+      case "error":
+        return _Close.default;
+
+      case "warning":
+        return _Remove.default;
+
+      case "in_progress":
+      default:
+        return function (props) {
+          return _react.default.createElement("div", props, indicator);
+        };
+    }
+  }, [status, indicator]);
+  return _react.default.createElement(StepIconComponent, {
+    style: style
+  });
+};
+/**
+ * Custom style for StepButton
+ */
+
+
+var useStepButtonStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      fontFamily: theme.typography.fontFamily
+    },
+    vertical: {
+      marginBottom: 'auto'
+    }
+  };
+});
+/**
+ * Custom style for StepContent
+ */
+
+var useStepContentStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      marginLeft: 11,
+      marginTop: 0,
+      textAlign: "left",
+      borderLeft: "2px solid ".concat(theme.palette.neutral.light)
+    },
+    last: {
+      borderLeft: "none"
+    }
+  };
+});
+/**
+ * Custom style for StepLabel
+ */
+
+var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    label: (0, _objectSpread2.default)({}, theme.typography.button, {
+      fontWeight: '600 !important',
+      color: "inherit !important"
+    }),
+    active: {},
+    completed: {}
+  };
+});
+
+var HiStep = _react.default.forwardRef(function (props, ref) {
+  var content = props.content,
+      disabled = props.disabled,
+      _props$indicator = props.indicator,
+      indicator = _props$indicator === void 0 ? props.index + 1 : _props$indicator,
+      label = props.label,
+      onClick = props.onClick,
+      status = props.status,
+      others = (0, _objectWithoutProperties2.default)(props, ["content", "disabled", "indicator", "label", "onClick", "status"]);
+  var theme = (0, _styles.useTheme)();
+  var stepButtonClasses = useStepButtonStyle(props);
+  var stepContentClasses = useStepContentStyle(props);
+  var stepLabelClasses = useStepLabelStyle(props);
+  var color = (0, _react.useMemo)(function () {
+    switch (status) {
+      case "done":
+        return theme.palette.positive.main;
+
+      case "error":
+        return theme.palette.negative.main;
+
+      case "in_progress":
+        return theme.palette.primary.main;
+
+      case "warning":
+        return theme.palette.middle.main;
+
+      default:
+        return disabled ? theme.palette.text.disabled : theme.palette.neutral.light;
+    }
+  }, [status, disabled]); // set label color
+
+  var stepLabelStyle = (0, _react.useMemo)(function () {
+    return {
+      color: color
+    };
+  }, [color]);
+
+  var _ref2 = _react.default.createElement(HiStepIcon, {
+    color: color,
+    indicator: indicator,
+    status: status
+  });
+
+  var StepIconProps = (0, _react.useMemo)(function () {
+    return {
+      icon: _ref2
+    };
+  }, [color, indicator, status]);
+  return _react.default.createElement(_Step.default, (0, _extends2.default)({
+    ref: ref,
+    completed: status === "done",
+    disabled: disabled
+  }, others), _react.default.createElement(_StepButton.default, {
+    classes: stepButtonClasses,
+    onClick: onClick
+  }, _react.default.createElement(_StepLabel.default, {
+    classes: stepLabelClasses,
+    StepIconProps: StepIconProps,
+    style: stepLabelStyle
+  }, label)), content && _react.default.createElement(_StepContent.default, {
+    classes: stepContentClasses
+  }, content));
+});
+
+HiStep.defaultProps = {};
+var _default = HiStep;
+exports.default = _default;

package/HiStepper/HiStepper.js

@@ -0,0 +1,59 @@
+"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/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Stepper = _interopRequireDefault(require("@material-ui/core/Stepper"));
+
+var _StepConnector = _interopRequireDefault(require("@material-ui/core/StepConnector"));
+
+var HiStepConnector = (0, _styles.withStyles)(function (theme) {
+  return {
+    line: {
+      border: 0,
+      backgroundColor: theme.palette.neutral.light,
+      borderRadius: 2,
+      width: 2,
+      marginLeft: -1,
+      marginTop: -1
+    }
+  };
+})(_StepConnector.default);
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      padding: 0
+    }
+  };
+});
+
+var _ref2 = _react.default.createElement(HiStepConnector, null);
+
+var HiStepper = _react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["children"]);
+  var classes = useStyles(props);
+  return _react.default.createElement(_Stepper.default, (0, _extends2.default)({
+    ref: ref,
+    classes: classes,
+    connector: _ref2,
+    nonLinear: true,
+    orientation: "vertical"
+  }, props), children);
+});
+
+HiStepper.defaultProps = {};
+var _default = HiStepper;
+exports.default = _default;

package/HiStepper/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiStepper.default;
+  }
+});
+Object.defineProperty(exports, "HiStep", {
+  enumerable: true,
+  get: function get() {
+    return _HiStep.default;
+  }
+});
+
+var _HiStepper = _interopRequireDefault(require("./HiStepper"));
+
+var _HiStep = _interopRequireDefault(require("./HiStep"));

package/es/Guideline/index.js

@@ -0,0 +1,2 @@
+// fake component to display guideline
+"use strict";

package/es/HiCell/CellRate.js

@@ -23,7 +23,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _mdiMaterialUi = require("mdi-material-ui");
+var _ArrowBottomRight = _interopRequireDefault(require("mdi-material-ui/ArrowBottomRight"));
+
+var _ArrowTopRight = _interopRequireDefault(require("mdi-material-ui/ArrowTopRight"));
+
+var _Equal = _interopRequireDefault(require("mdi-material-ui/Equal"));
 
 var _helpers = require("../utils/helpers");
 
@@ -102,19 +106,19 @@ function (_React$PureComponent) {
 
       switch (trendchip) {
         case 'equal':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.Equal, {
+          trendIcon = _react.default.createElement(_Equal.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, classes.neutral)
           });
           break;
 
         case 'up':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowTopRight, {
+          trendIcon = _react.default.createElement(_ArrowTopRight.default, {
             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, {
+          trendIcon = _react.default.createElement(_ArrowBottomRight.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.positive, !isPositive), (0, _defineProperty2.default)(_classNames2, classes.negative, isPositive), _classNames2))
           });
           break;

package/es/HiChip/HiChip.js

@@ -128,6 +128,7 @@ function HiChip(props) {
       id = props.id,
       img = props.img,
       label = props.label,
+      labelIcon = props.labelIcon,
       onClick = props.onClick,
       onKeyDown = props.onKeyDown,
       onPrevious = props.onPrevious,
@@ -169,7 +170,7 @@ function HiChip(props) {
     className: classes.badge,
     id: "".concat(id, "-badge"),
     src: img,
-    alt: img,
+    alt: label,
     onError: function onError(e) {
       if (fallbackImage) {
         e.target.src = "".concat(fallbackImage);
@@ -178,6 +179,13 @@ function HiChip(props) {
       }
     },
     title: titleImg
+  }), labelIcon && _react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.icon),
+    id: "".concat(id, "-labelIcon"),
+    icon: labelIcon,
+    size: iconSize,
+    title: titleIcon,
+    tabIndex: -1
   }), onPrevious && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.navigate),
     id: "".concat(id, "-previous"),

package/es/HiForm/HiFormControl.js

@@ -131,7 +131,7 @@ var styles = function styles(theme) {
     },
     icon: {
       position: 'absolute',
-      fontSize: 19
+      fontSize: 20
     }
   };
 };
@@ -291,6 +291,7 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 HiFormControl.defaultProps = {
+  id: (0, _helpers.uniqueId)(),
   fullWidth: true,
   required: true,
   disabled: false,

package/es/HiForm/HiPasswordField.js

@@ -97,7 +97,7 @@ function (_React$Component) {
         }, HiInputProps, {
           endAdornment: endAdornment,
           inputClassName: inputClassName,
-          autocomplete: 'on'
+          autocomplete: "new-password"
         })
       }));
     }

package/es/HiIcon/HiIcon.js

@@ -27,8 +27,6 @@ var _helpers = require("../utils/helpers");
 
 var hiSvgIcons = _interopRequireWildcard(require("../hi-svg-icons"));
 
-var mdi = _interopRequireWildcard(require("mdi-material-ui"));
-
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     /* Styles applied to the root element. */
@@ -56,7 +54,6 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       color = props.color,
       other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "icon", "size", "color"]);
   var classes = useStyles(props);
-  var theme = (0, _styles.useTheme)();
   var iconName = icon !== null ? icon : children;
   var iconType = (0, _react.useMemo)(function () {
     if (iconName && iconName.indexOf('fa-') === 0) {
@@ -90,8 +87,9 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       }, other));
 
     case "mdi":
-      var MdiIconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
-      return _react.default.createElement(MdiIconName, (0, _extends2.default)({
+      var MdiIconComponent = require("mdi-material-ui/".concat((0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4))))).default;
+
+      return _react.default.createElement(MdiIconComponent, (0, _extends2.default)({
         ref: ref,
         className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
         color: "inherit",

package/es/HiPaymentMeans/HiPaymentMeans.js

@@ -153,27 +153,39 @@ var styles = function styles(theme) {
       fontSize: 18,
       width: 235,
       paddingLeft: 21,
-      marginTop: 16
+      marginTop: 16,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     },
     giftCardNumber: {
       fontSize: 18,
       width: 235,
       paddingLeft: 21,
-      marginBottom: 28
+      marginBottom: 28,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     },
     corporateNumber: {
       fontSize: 18,
       height: 25,
       width: 234,
       paddingLeft: 22,
-      marginBottom: 4
+      marginBottom: 4,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     },
     ibanNumber: {
       fontSize: 14,
       height: 16,
       width: 256,
       paddingLeft: 12,
-      marginBottom: 11
+      marginBottom: 11,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     },
     memberSince: {
       display: 'block',