@hipay/hipay-material-ui 3.0.0 → 3.1.0

package/Guideline/index.js

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

package/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/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',

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/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/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',

package/es/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/es/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/es/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"));