@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/es/HiDatePicker/stylesheet.js

@@ -0,0 +1,265 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+
+var _default = function _default(theme) {
+  return {
+    root: {
+      position: 'relative',
+      display: 'inline-block',
+      width: '100%',
+      maxWidth: 500
+    },
+    rootMobile: (0, _objectSpread2.default)({}, theme.typography.b1, {
+      backgroundColor: theme.palette.background2,
+      borderBottom: '1px solid #E0E0E0',
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderTop: 'none',
+      height: 40,
+      paddingLeft: 8,
+      paddingTop: 10,
+      position: 'absolute',
+      marginTop: -40,
+      opacity: 0
+    }),
+    mobileRangeRoot: {
+      minWidth: '100%'
+    },
+    fromInput: {
+      position: 'relative',
+      display: 'inline-block',
+      width: 'calc(50% - 4px)',
+      marginRight: theme.spacing(1)
+    },
+    toInput: {
+      position: 'relative',
+      display: 'inline-block',
+      width: 'calc(50% - 4px)',
+      marginLeft: 4
+    },
+    absolute: {
+      position: 'absolute'
+    },
+    right4: {
+      right: 4
+    },
+    dayPickerMargin: {
+      top: -337,
+      width: 'calc(100% - 4px)'
+    },
+    rangePickerContainer: {
+      display: 'flex',
+      alignItems: 'flex-start'
+    },
+    // The container element
+    container: {
+      width: '100%',
+      display: 'inline-block',
+      fontFamily: theme.typography.fontFamily
+    },
+    // The wrapper element, used for keyboard interaction
+    wrapper: {
+      width: '100%',
+      position: 'relative',
+      userSelect: 'none',
+      flexDirection: 'row',
+      backgroundColor: theme.palette.background3
+    },
+    // TODO : Added to the container when there's no interaction with the calendar
+    interactionDisabled: {},
+    // The navigation bar with the arrows to switch between months
+    navBar: {},
+    // Button to switch to the previous month
+    navButtonPrev: {},
+    // Button to switch to the next month
+    navButtonNext: {},
+    // Added to the navbuttons when disabled with fromMonth/toMonth props
+    navButtonInteractionDisabled: {
+      display: 'none'
+    },
+    // Container of the months table
+    months: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      padding: '0 14px'
+    },
+    // The month's main table
+    month: {
+      display: 'table',
+      borderSpacing: 0,
+      userSelect: 'none' // margin: '0 1rem',
+      // marginTop: '1rem',
+
+    },
+    // The caption element, containing the current month's name and year
+    caption: {
+      padding: '0 0.5rem',
+      display: 'table-caption',
+      textAlign: 'left',
+      marginBottom: '0.5rem',
+      '&div': {
+        fontSize: '1.15rem',
+        fontWeight: 500
+      }
+    },
+    // Table header displaying the weekdays names
+    weekdays: {
+      marginTop: '1rem',
+      display: 'table-header-group'
+    },
+    // Table row displaying the weekdays names
+    weekdaysRow: {
+      display: 'table-row',
+      height: 40
+    },
+    // Cell displaying the weekday name
+    weekday: (0, _objectSpread2.default)({
+      display: 'table-cell'
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightRegular,
+      textAlign: 'center',
+      verticalAlign: 'middle'
+    }),
+    // Table's body with the weeks
+    body: {
+      display: 'table-row-group',
+      padding: '12px 0'
+    },
+    week: {
+      display: 'table-row'
+    },
+    // Table's row for each week
+    weekNumber: {
+      display: 'table-cell',
+      padding: '0.5rem',
+      textAlign: 'right',
+      verticalAlign: 'middle',
+      minWidth: '1rem',
+      fontSize: '0.75em',
+      cursor: 'pointer',
+      color: '#8b9898',
+      borderRight: '1px solid #eaecec'
+    },
+    // The single day cell
+    day: (0, _objectSpread2.default)({
+      display: 'table-cell',
+      padding: '4px 8px',
+      textAlign: 'center',
+      cursor: 'pointer',
+      verticalAlign: 'middle',
+      outline: 'none'
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.dark,
+      fontWeight: theme.typography.fontWeightRegular
+    }),
+    // The calendar footer (only with todayButton prop)
+    footer: {
+      marginTop: 12,
+      borderTop: '1px solid',
+      borderTopColor: theme.palette.divider,
+      padding: '5px',
+      width: '100%'
+    },
+    // The today button (only with todayButton prop)
+    todayButton: (0, _objectSpread2.default)({
+      display: 'table',
+      minWidth: 230,
+      margin: '0 auto',
+      border: 'none',
+      backgroundImage: 'none',
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+      cursor: 'pointer',
+      height: 30
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightMedium,
+      textTransform: 'uppercase',
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      },
+      borderRadius: 4
+    }),
+
+    /* default modifiers */
+    // Added to the day's cell for the current day
+    today: {// color: theme.palette.primary.light,
+      // position: 'relative',
+      // borderRadius: '50%',
+      // color: `${theme.palette.neutral.dark} !important`,
+      // fontWeight: theme.typography.fontWeightMedium,
+      // '&:before': {
+      //     content: '""',
+      //     position: 'absolute',
+      //     top: 0,
+      //     left: 0,
+      //     display: 'inline-block',
+      //     width: '100%',
+      //     height: '100%',
+      //     borderRadius: '50%',
+      //     boxShadow: `inset 0 0 0 2px ${theme.palette.neutral.main}`,
+      // },
+    },
+    // Added to the day's cell outside the current month
+    outside: {
+      backgroundColor: '#F8F9FB',
+      color: theme.palette.neutral.main,
+      cursor: 'default'
+    },
+    // Added to the day's cell specified in the "disabledDays" prop
+    disabled: {
+      color: '#dce0e0',
+      cursor: 'default'
+    },
+    // Added to the day's cell specified in the "selectedDays" prop
+
+    /*
+    selected: {
+        borderRadius: '50%',
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.business.primary.contrastText,
+    },
+    */
+    selected: {
+      // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      borderRadius: '0%',
+      border: 'none'
+    },
+    currentDay: {
+      position: 'relative',
+      color: "".concat(theme.palette.neutral.dark, " !important"),
+      fontWeight: theme.typography.fontWeightMedium,
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        display: 'inline-block',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.neutral.main)
+      }
+    }
+  };
+};
+
+exports.default = _default;

package/es/HiDotsStepper/HiDot.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var styles = function styles() {
+  return {
+    dot: {
+      padding: 4,
+      '&:hover': {
+        backgroundColor: 'transparent !important'
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+var _ref = _react.default.createElement(_HiIcon.default, {
+  size: 24
+}, "radio_button_checked");
+
+var _ref2 = _react.default.createElement(_HiIcon.default, {
+  size: 12
+}, "lens");
+
+var HiDot =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDot, _React$PureComponent);
+
+  function HiDot() {
+    (0, _classCallCheck2.default)(this, HiDot);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDot).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiDot, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          status = _this$props.status,
+          classes = _this$props.classes,
+          onClick = _this$props.onClick,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["active", "status", "classes", "onClick"]);
+      var dotColor;
+
+      if (!status || status === 'unreviewed') {
+        dotColor = 'default';
+      } else {
+        dotColor = status === 'refused' ? 'negative' : 'positive';
+      }
+
+      return _react.default.createElement(_HiIconButton.default, (0, _extends2.default)({
+        className: classes.dot,
+        color: dotColor,
+        onClick: onClick
+      }, props), active ? _ref : _ref2);
+    }
+  }]);
+  return HiDot;
+}(_react.default.PureComponent);
+
+HiDot.defaultProps = {
+  active: false,
+  status: 'unreviewed'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDot'
+})(HiDot);
+
+exports.default = _default;

package/es/HiDotsStepper/HiDotsStepper.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiDot = _interopRequireDefault(require("./HiDot"));
+
+var styles = function styles() {
+  return {
+    dotStepper: {
+      width: '100%',
+      maxWidth: 200,
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'nowrap',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiDotsStepper =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDotsStepper, _React$PureComponent);
+
+  function HiDotsStepper(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiDotsStepper);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDotsStepper).call(this, props));
+
+    _this.handleClick = function (activeStep) {
+      return function () {
+        _this.props.onChange(activeStep);
+      };
+    };
+
+    _this.handleNavigation = function (e) {
+      var _this$props = _this.props,
+          activeStep = _this$props.activeStep,
+          steps = _this$props.steps;
+      var nextStep = activeStep;
+      if (e.key === 'ArrowLeft') nextStep -= 1;
+      if (e.key === 'ArrowRight') nextStep += 1;
+      nextStep = (nextStep + steps.length) % steps.length; // Permet la navigation d'un Dot au suivant / précédent
+
+      document.querySelector("button[tabIndex=\"".concat(nextStep, "\"]")).focus();
+
+      _this.props.onChange(nextStep);
+    };
+
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleNavigation = _this.handleNavigation.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDotsStepper, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          activeStep = _this$props2.activeStep,
+          steps = _this$props2.steps;
+      return _react.default.createElement("div", {
+        role: "presentation",
+        className: classes.dotStepper,
+        onKeyDown: this.handleNavigation
+      }, steps.map(function (step, idx) {
+        return _react.default.createElement(_HiDot.default, {
+          key: step.id,
+          tabIndex: step.id,
+          status: step.status,
+          active: idx === activeStep,
+          onClick: _this2.handleClick(idx)
+        });
+      }));
+    }
+  }]);
+  return HiDotsStepper;
+}(_react.default.PureComponent);
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDotsStepper'
+})(HiDotsStepper);
+
+exports.default = _default;

package/es/HiDotsStepper/index.js

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

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -0,0 +1,180 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
+
+var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+
+var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _MenuUp = _interopRequireDefault(require("mdi-material-ui/MenuUp"));
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    summaryContent: {
+      display: 'flex',
+      alignItems: 'baseline',
+      justifyContent: 'space-between',
+      border: 'none',
+      '&$expanded': {
+        margin: 'initial'
+      },
+      maxWidth: '100%'
+    },
+    summaryRoot: {
+      borderBottom: '1px solid #E3E6E7',
+      height: 48,
+      minHeight: 48,
+      padding: 0,
+      '&$expanded': {
+        minHeight: 48
+      }
+    },
+    expanded: {},
+    collapseDisable: {
+      cursor: 'default',
+      pointerEvents: 'none'
+    },
+    heading: (0, _objectSpread2.default)({}, theme.typography.b1, {
+      height: 48,
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: 20,
+      lineHeight: '24px',
+      fontWeight: theme.typography.fontWeightLight
+    }),
+    secondaryHeading: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.light,
+      height: 48,
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: 11,
+      '&>svg': {
+        fontSize: 18,
+        marginLeft: 3
+      },
+      '&>button': {
+        marginRight: -12
+      },
+      marginLeft: 24,
+      overflow: 'hidden'
+    }),
+    secondaryHeadingSpan: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    },
+    panel: {
+      boxShadow: 'none',
+      border: 'none'
+    },
+    panelDetails: {
+      padding: '8px 0 24px 0'
+    },
+    panelDetailsExited: {
+      display: 'none'
+    },
+    disabledPanel: {
+      backgroundColor: '#ffffff',
+      opacity: 1
+    },
+    expandIcon: {
+      width: 24,
+      height: 24,
+      right: 0
+    }
+  };
+});
+/**
+ * HiExpansionPanel
+ */
+
+var _ref = _react.default.createElement(_MenuUp.default, null);
+
+function HiExpansionPanel(props) {
+  var disabled = props.disabled,
+      heading = props.heading,
+      secondaryHeading = props.secondaryHeading,
+      secondaryHeadingDisabled = props.secondaryHeadingDisabled,
+      secondaryHeadingIcon = props.secondaryHeadingIcon,
+      collapseDisable = props.collapseDisable,
+      children = props.children,
+      expanded = props.expanded,
+      TransitionProps = props.TransitionProps,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "collapseDisable", "children", "expanded", "TransitionProps"]);
+  var classes = useStyles(props);
+
+  var _useState = (0, _react.useState)(!collapseDisable && !expanded),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      panelDetailsExited = _useState2[0],
+      setPanelDetailsExited = _useState2[1];
+
+  var effectiveDisabled = disabled || !children;
+  return _react.default.createElement(_ExpansionPanel.default, (0, _extends2.default)({
+    disabled: effectiveDisabled,
+    expanded: collapseDisable || expanded,
+    TransitionProps: (0, _objectSpread2.default)({
+      onExited: function onExited() {
+        return setPanelDetailsExited(true);
+      },
+      onEnter: function onEnter() {
+        return setPanelDetailsExited(false);
+      }
+    }, TransitionProps)
+  }, others, {
+    classes: {
+      root: classes.panel,
+      disabled: classes.disabledPanel
+    }
+  }), _react.default.createElement(_ExpansionPanelSummary.default, {
+    classes: {
+      root: classes.summaryRoot,
+      content: classes.summaryContent,
+      expanded: classes.expanded,
+      expandIcon: classes.expandIcon
+    },
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.collapseDisable, collapseDisable)),
+    expandIcon: !collapseDisable && _ref
+  }, _react.default.createElement("div", {
+    className: classes.heading
+  }, heading), _react.default.createElement("div", {
+    className: classes.secondaryHeading
+  }, _react.default.createElement("span", {
+    className: classes.secondaryHeadingSpan
+  }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && _react.default.createElement(_ExpansionPanelDetails.default, {
+    className: (0, _classnames.default)(classes.panelDetails, (0, _defineProperty2.default)({}, classes.panelDetailsExited, panelDetailsExited))
+  }, children));
+}
+
+HiExpansionPanel.defaultProps = {
+  disabled: false,
+  secondaryHeading: '',
+  secondaryHeadingIcon: '',
+  secondaryHeadingDisabled: ''
+};
+var _default = HiExpansionPanel;
+exports.default = _default;

package/es/HiExpansionPanel/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _HiExpansionPanel = _interopRequireDefault(require("./HiExpansionPanel"));
+
+var _default = _HiExpansionPanel.default;
+exports.default = _default;