@hipay/hipay-material-ui 2.3.5 → 3.1.0

package/Guideline/index.js

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

package/HiChip/HiChip.js

@@ -68,6 +68,7 @@ var styles = function styles(theme) {
       marginLeft: 4,
       position: 'relative',
       cursor: 'pointer',
+      color: theme.palette.neutral.main,
       '&:hover, &:focus': {
         color: theme.palette.neutral.dark
       }

package/HiDatePicker/HiDateRangeSelector.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.findSeparator = findSeparator;
 exports.yearAndMonth = yearAndMonth;
 exports.yearAndQuarter = yearAndQuarter;
+exports.buildDateRangeInfo = buildDateRangeInfo;
 exports.buildDateRangeOptionByKey = buildDateRangeOptionByKey;
 exports.default = exports.styles = void 0;
 
@@ -89,19 +90,58 @@ function yearAndQuarter(format, date, t) {
   return indexY < indexM ? date.format("".concat(split[indexY]).concat(s, "[").concat(t.short_quarter, "]Q")) : date.format("[".concat(t.short_quarter, "]Q").concat(s).concat(split[indexY]));
 }
 
+function buildDateRangeInfo(t, from, to, format) {
+  var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  var _options$prefix = options.prefix,
+      prefix = _options$prefix === void 0 ? null : _options$prefix,
+      _options$toNow = options.toNow,
+      toNow = _options$toNow === void 0 ? false : _options$toNow,
+      _options$displayDays = options.displayDays,
+      displayDays = _options$displayDays === void 0 ? true : _options$displayDays; // From
+
+  var info = "".concat(t.from, " ").concat(from.format(format), " "); // To
+
+  if (toNow) {
+    info += "".concat(t.to_now);
+  } else {
+    info += "".concat(t.to, " ").concat(to.format(format));
+  } // Prefix
+
+
+  switch (prefix) {
+    case "week":
+      info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(info);
+      break;
+
+    case "quarter":
+      info = "".concat(t.short_quarter).concat(from.format('Q'), ", ").concat(info);
+      break;
+
+    default:
+      break;
+  } // Display number of days
+
+
+  if (displayDays) {
+    var days = Math.ceil(to.diff(from, 'days', true));
+    info = "".concat(days, " ").concat(t.days, ", ").concat(info);
+  }
+
+  return info;
+}
+
 function buildDateRangeOptionByKey(key, t, format) {
   var from;
   var label;
   var info;
   var to;
-  var type;
 
   switch (key) {
     case 'custom':
       label = t.custom_period;
       from = (0, _momentTimezone.default)().subtract(15, 'day').startOf('day');
       to = (0, _momentTimezone.default)().endOf('day');
-      type = 'primary-highlight';
+      info = t.custom_period_info;
       break;
 
     case 'cd':
@@ -122,49 +162,84 @@ function buildDateRangeOptionByKey(key, t, format) {
       label = t.current_week;
       from = (0, _momentTimezone.default)().startOf('week');
       to = (0, _momentTimezone.default)();
-      info = "".concat(t.short_week).concat(from.format('w'), ", \n ").concat(from.format(format), " ").concat(t.to_now);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "week",
+        toNow: true,
+        displayDays: true
+      });
       break;
 
     case 'pw':
       label = t.previous_week;
       from = (0, _momentTimezone.default)().subtract(1, 'week').startOf('week');
       to = (0, _momentTimezone.default)().subtract(1, 'week').endOf('week');
-      info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(from.format(format), " ").concat(t.to, " ").concat(to.format(format));
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "week",
+        toNow: false,
+        displayDays: true
+      });
       break;
 
     case 'cm':
       label = t.current_month;
       from = (0, _momentTimezone.default)().startOf('month');
       to = (0, _momentTimezone.default)();
-      info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
       break;
 
     case 'pm':
       label = t.previous_month;
       from = (0, _momentTimezone.default)().subtract(1, 'month').startOf('month');
       to = (0, _momentTimezone.default)().subtract(1, 'month').endOf('month');
-      info = "".concat(yearAndMonth(format, from), ", ").concat(from.daysInMonth(), " ").concat(t.days);
+      info = "".concat(from.daysInMonth(), " ").concat(t.days, ", ").concat(yearAndMonth(format, from));
       break;
 
     case 'cq':
       label = t.current_quarter;
       from = (0, _momentTimezone.default)().startOf('quarter');
       to = (0, _momentTimezone.default)();
-      info = "".concat(yearAndQuarter(format, from, t), ", ").concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "quarter",
+        toNow: true,
+        displayDays: true
+      });
       break;
 
     case 'pq':
       label = t.previous_quarter;
       from = (0, _momentTimezone.default)().subtract(1, 'quarter').startOf('quarter');
       to = (0, _momentTimezone.default)().subtract(1, 'quarter').endOf('quarter');
-      info = "".concat(yearAndQuarter(format, from, t), ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "quarter",
+        toNow: false,
+        displayDays: true
+      });
       break;
 
     case 'cy':
       label = t.current_year;
       from = (0, _momentTimezone.default)().startOf('year');
       to = (0, _momentTimezone.default)();
-      info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
+      break;
+
+    case 'yy':
+      label = t.year_on_year;
+      from = (0, _momentTimezone.default)().subtract(1, 'years');
+      to = (0, _momentTimezone.default)();
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
       break;
 
     default:
@@ -176,12 +251,11 @@ function buildDateRangeOptionByKey(key, t, format) {
     from: from,
     info: info,
     label: label,
-    to: to,
-    type: type
+    to: to
   };
 }
 
-var styles = function styles() {
+var styles = function styles(theme) {
   return {
     root: {
       maxWidth: 500,
@@ -192,21 +266,22 @@ var styles = function styles() {
       }
     },
     dateRangePicker: {
-      width: 'calc(100% + 8px)',
+      width: '100%',
       marginTop: 0
     },
     smSelect: {
-      padding: 4
+      padding: theme.spacing(1)
     },
     smRangePicker: {},
     select: {
       '@media(max-width: 700px)': {
         width: '100%',
-        paddingBottom: 8
+        paddingBottom: theme.spacing(2)
       },
       '@media(min-width: 700px)': {
-        minWidth: 'calc(100% / 3)',
-        paddingRight: 8
+        minWidth: 200,
+        width: 'calc(100% - 244px)',
+        marginRight: theme.spacing(2)
       }
     },
     input: {
@@ -214,16 +289,18 @@ var styles = function styles() {
         width: '100%'
       },
       '@media(min-width: 700px)': {
-        width: 'calc(100% / 3 * 2)'
+        width: 236
       }
     },
     formControlLabel: {
-      top: 20
+      top: theme.spacing(5)
     }
   };
 };
 
 exports.styles = styles;
+var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'yy'];
+var CUSTOM_PERIOD_LIST = ['custom'];
 
 var HiDateRangeSelector =
 /*#__PURE__*/
@@ -304,37 +381,90 @@ function (_React$Component) {
       }
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "buildOptions",
+    value: function buildOptions() {
       var _this2 = this;
 
       var _this$props = this.props,
-          disabled = _this$props.disabled,
-          enableTime = _this$props.enableTime,
-          errorText = _this$props.errorText,
-          fromError = _this$props.fromError,
-          toError = _this$props.toError,
-          helperIcon = _this$props.helperIcon,
-          helperText = _this$props.helperText,
-          idRange = _this$props.idRange,
-          idSelect = _this$props.idSelect,
-          minimumDate = _this$props.minimumDate,
-          label = _this$props.label,
-          from = _this$props.from,
-          onChange = _this$props.onChange,
-          required = _this$props.required,
-          to = _this$props.to,
-          translations = _this$props.translations,
-          classes = _this$props.classes,
-          selectProps = _this$props.selectProps,
-          staticPosition = _this$props.staticPosition,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
+          availableOptionKeys = _this$props.availableOptionKeys,
+          translations = _this$props.translations;
+      var selectedPreset = this.state.selectedPreset;
+      var options = [];
+      var presetOptionsAvailable = availableOptionKeys.filter(function (option) {
+        return PRESET_PERIOD_LIST.includes(option);
+      });
+      var customOptionsAvailable = availableOptionKeys.filter(function (option) {
+        return CUSTOM_PERIOD_LIST.includes(option);
+      });
+
+      if (presetOptionsAvailable) {
+        options.push({
+          id: "preset_periods_subheader",
+          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          pinned: true,
+          icon: "mdi_calendar",
+          label: translations.preset_periods
+        });
+        presetOptionsAvailable.forEach(function (option) {
+          options.push(_this2.options.find(function (_option) {
+            return _option.id === option;
+          }));
+        });
+      }
+
+      if (customOptionsAvailable) {
+        options.push({
+          id: "custom_periods_subheader",
+          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          pinned: true,
+          icon: "mdi_calendar_blank",
+          label: translations.custom_periods
+        });
+        customOptionsAvailable.forEach(function (option) {
+          options.push(_this2.options.find(function (_option) {
+            return _option.id === option;
+          }));
+        });
+      }
+
+      return options;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          availableOptionKeys = _this$props2.availableOptionKeys,
+          disabled = _this$props2.disabled,
+          enableTime = _this$props2.enableTime,
+          errorText = _this$props2.errorText,
+          fromError = _this$props2.fromError,
+          toError = _this$props2.toError,
+          helperIcon = _this$props2.helperIcon,
+          helperText = _this$props2.helperText,
+          idRange = _this$props2.idRange,
+          idSelect = _this$props2.idSelect,
+          minimumDate = _this$props2.minimumDate,
+          label = _this$props2.label,
+          from = _this$props2.from,
+          onChange = _this$props2.onChange,
+          required = _this$props2.required,
+          to = _this$props2.to,
+          translations = _this$props2.translations,
+          classes = _this$props2.classes,
+          selectProps = _this$props2.selectProps,
+          staticPosition = _this$props2.staticPosition,
+          props = (0, _objectWithoutProperties2.default)(_this$props2, ["availableOptionKeys", "disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
       var _this$state = this.state,
           selectedPreset = _this$state.selectedPreset,
           containerWidth = _this$state.containerWidth;
       var hiSelectableListProps = {
-        hideCheckbox: true
+        secondaryInline: false,
+        hideCheckbox: true,
+        lazy: false
       };
+      var options = this.buildOptions();
       return _react.default.createElement(_HiFormControl.default, {
         disabled: disabled,
         helperIcon: helperIcon,
@@ -351,7 +481,7 @@ function (_React$Component) {
           flexDirection: 'column'
         } : {},
         ref: function ref(container) {
-          _this2.container = container;
+          _this3.container = container;
         }
       }, _react.default.createElement("div", {
         className: classes.select,
@@ -367,7 +497,7 @@ function (_React$Component) {
         hideCheckbox: true,
         hiSelectableListProps: hiSelectableListProps,
         name: 'selectedPreset',
-        options: this.options,
+        options: options,
         onChange: this.handleSelectChange('selectedPreset'),
         required: required,
         translations: translations,
@@ -418,7 +548,7 @@ function (_React$Component) {
 }(_react.default.Component);
 
 HiDateRangeSelector.defaultProps = {
-  availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
+  availableOptionKeys: [].concat(PRESET_PERIOD_LIST, CUSTOM_PERIOD_LIST),
   enableTime: false,
   returnSelectValue: false,
   staticPosition: false,
@@ -441,6 +571,7 @@ HiDateRangeSelector.defaultProps = {
     days: 'days',
     custom_period: 'Custom Period',
     yesterday: 'Yesterday',
+    from: 'from',
     to: 'to',
     to_now: 'to now',
     current_week: 'Current Week',
@@ -450,12 +581,16 @@ HiDateRangeSelector.defaultProps = {
     current_quarter: 'Current Quarter',
     previous_quarter: 'Previous Quarter',
     current_year: 'Current Year',
+    year_on_year: "Last twelve months",
     invalid_format: 'The date format is not valid',
     to_superior_from: 'Date from cannot be greater than date to',
     date_superior_max_date: 'Date from cannot be greater than %s',
     date_inferior_min_date: 'Date from cannot be before than %s',
     missing_date_from: 'Missing date from',
-    missing_date_to: 'Missing date to'
+    missing_date_to: 'Missing date to',
+    preset_periods: 'Preset periods',
+    custom_periods: 'Custom periods',
+    custom_period_info: "Select a custom period"
   }
 };
 

package/HiDatePicker/stylesheet.js

@@ -17,7 +17,6 @@ var _default = function _default(theme) {
       position: 'relative',
       display: 'inline-block',
       width: '100%',
-      minWidth: 252,
       maxWidth: 500
     },
     rootMobile: (0, _objectSpread2.default)({}, theme.typography.b1, {
@@ -40,7 +39,7 @@ var _default = function _default(theme) {
       position: 'relative',
       display: 'inline-block',
       width: 'calc(50% - 4px)',
-      paddingRight: 4
+      marginRight: theme.spacing(1)
     },
     toInput: {
       position: 'relative',

package/HiForm/HiFormControl.js

@@ -75,7 +75,7 @@ var styles = function styles(theme) {
       },
       '&$iconFullWidth': {
         position: 'absolute',
-        right: 5,
+        right: theme.spacing(1),
         marginLeft: 0,
         bottom: 0
       }
@@ -87,11 +87,11 @@ var styles = function styles(theme) {
     errorDiv: (0, _objectSpread2.default)({}, theme.typography.b3, {
       backgroundColor: theme.palette.negative.main,
       color: '#FFFFFF',
-      padding: '16px 8px',
+      padding: theme.spacing(4, 2),
       verticalAlign: 'middle',
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 22,
+      marginBottom: theme.spacing(2),
       fontWeight: theme.typography.fontWeightRegular
     }),
     arrowDown: {
@@ -101,12 +101,12 @@ var styles = function styles(theme) {
       borderRight: '4px solid transparent',
       borderTop: '4px solid #000',
       position: 'absolute',
-      bottom: -4,
+      bottom: theme.spacing(-1),
       '&$arrowNotFullWidth': {
-        left: 8
+        left: theme.spacing(2)
       },
       '&$arrowFullWidth': {
-        right: 12
+        right: theme.spacing(3)
       }
     },
     arrowNotFullWidth: {},
@@ -118,10 +118,10 @@ var styles = function styles(theme) {
       width: '100%',
       backgroundColor: '#ffffff',
       color: theme.palette.neutral.normal,
-      padding: '16px 8px',
+      padding: theme.spacing(4, 2),
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 8,
+      marginBottom: theme.spacing(2),
       fontWeight: theme.typography.fontWeightRegular,
       boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
       lineHeight: 1.5
@@ -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/HiIcon/HiIcon.js

@@ -11,9 +11,11 @@ exports.default = exports.useStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -51,66 +53,68 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       className = props.className,
       icon = props.icon,
       size = props.size,
-      _color = props.color,
+      color = props.color,
       other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "icon", "size", "color"]);
   var classes = useStyles(props);
-  var iconName = icon !== null ? icon : children;
   var theme = (0, _styles.useTheme)();
-  var color = ['primary', 'secondary', 'neutral', 'positive', 'middle', 'negative'].includes(_color) ? theme.palette[_color].main : _color; // Line Awesome icons
-
-  if (iconName && iconName.indexOf('fa-') === 0) {
-    return _react.default.createElement("i", (0, _extends2.default)({
-      ref: ref,
-      className: (0, _classnames.default)('fa', iconName, className, classes.root),
-      style: {
-        fontSize: size
-      }
-    }, other));
-  } // Specific HiPay icons
-
-
-  if (iconName && iconName.indexOf('hi_') === 0) {
-    var IconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
-    return _react.default.createElement(IconName, (0, _extends2.default)({
-      ref: ref,
-      className: (0, _classnames.default)(classes.root, className),
-      color: color,
-      size: size
-    }, other));
-  }
-
-  color = ['primary', 'secondary', 'negative'].includes(_color) ? _color : 'inherit';
-
-  if (color === 'negative') {
-    color = 'error';
-  } // MDI - Material Design Icons - https://materialdesignicons.com
-
-
-  if (iconName && iconName.indexOf('mdi_') === 0) {
-    var _IconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
-    return _react.default.createElement(_IconName, (0, _extends2.default)({
-      ref: ref,
-      className: (0, _classnames.default)(classes.root, className),
-      color: color,
-      style: {
-        fontSize: size
-      }
-    }, other));
-  } // @material-ui/icons
-
-
-  return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    ref: ref,
-    className: (0, _classnames.default)(classes.root, className),
-    color: color,
-    style: {
-      fontSize: size
+  var iconName = icon !== null ? icon : children;
+  var iconType = (0, _react.useMemo)(function () {
+    if (iconName && iconName.indexOf('fa-') === 0) {
+      return "line_awesome";
+    } else if (iconName && iconName.indexOf('hi_') === 0) {
+      return "hipay";
+    } else if (iconName && iconName.indexOf('mdi_') === 0) {
+      return "mdi";
+    } else {
+      return "mui";
     }
-  }, other), iconName);
+  }, [iconName]);
+
+  switch (iconType) {
+    case "line_awesome":
+      return _react.default.createElement("i", (0, _extends2.default)({
+        ref: ref,
+        className: (0, _classnames.default)('fa', iconName, className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        style: {
+          fontSize: size
+        }
+      }, other));
+
+    case "hipay":
+      var HipayIconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
+      return _react.default.createElement(HipayIconName, (0, _extends2.default)({
+        ref: ref,
+        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        color: "currentColor",
+        size: size
+      }, other));
+
+    case "mdi":
+      var MdiIconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
+      return _react.default.createElement(MdiIconName, (0, _extends2.default)({
+        ref: ref,
+        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        color: "inherit",
+        style: {
+          fontSize: size
+        }
+      }, other));
+
+    case "mui":
+    default:
+      return _react.default.createElement(_Icon.default, (0, _extends2.default)({
+        ref: ref,
+        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
+        color: "inherit",
+        style: {
+          fontSize: size
+        }
+      }, other), iconName);
+  }
 });
 
 HiIcon.defaultProps = {
-  color: 'neutral',
+  color: 'inherit',
   icon: null,
   size: 20
 };

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