@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/HiIcon/HiIcon.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 = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _helpers = require("../utils/helpers");
+
+var hiSvgIcons = _interopRequireWildcard(require("../hi-svg-icons"));
+
+var mdi = _interopRequireWildcard(require("mdi-material-ui"));
+
+var styles = function styles(theme) {
+  return {
+    /* Styles applied to the root element. */
+    root: {},
+
+    /* Styles applied to the root element. */
+    faIcon: {
+      fontSize: 24
+    },
+
+    /* Styles applied to the root element if `color="primary"`. */
+    colorPrimary: {
+      color: theme.palette.primary.main
+    },
+
+    /* Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: {
+      color: theme.palette.secondary.main
+    },
+
+    /* Styles applied to the root element if `color="positive"`. */
+    colorPositive: {
+      color: theme.palette.positive.main
+    },
+
+    /* Styles applied to the root element if `color="negative"`. */
+    colorNegative: {
+      color: theme.palette.negative.main
+    },
+
+    /* Styles applied to the root element if `color="middle"`. */
+    colorMiddle: {
+      color: theme.palette.middle.main
+    },
+
+    /* Styles applied to the root element if `color="neutral"`. */
+    colorNeutral: {
+      color: theme.palette.neutral.main
+    }
+  };
+};
+
+exports.styles = styles;
+
+function HiIcon(props) {
+  var children = props.children,
+      classes = props.classes,
+      className = props.className,
+      color = props.color,
+      fontSize = props.fontSize,
+      icon = props.icon,
+      size = props.size,
+      theme = props.theme,
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color", "fontSize", "icon", "size", "theme"]);
+  var iconName = icon !== null ? icon : children;
+  var isHiColor = ['positive', 'negative', 'middle', 'neutral'].includes(color); // Line Awesome icons
+
+  if (iconName.indexOf('fa-') === 0) {
+    return _react.default.createElement("i", (0, _extends2.default)({
+      className: (0, _classnames.default)('fa', iconName, classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], color !== 'inherit'), className),
+      style: {
+        fontSize: fontSize !== 'inherit' ? size : 'inherit'
+      }
+    }, other));
+  } // Specific HiPay icons
+
+
+  if (iconName.indexOf('hi_') === 0) {
+    var IconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
+    return _react.default.createElement(IconName, (0, _extends2.default)({
+      className: (0, _classnames.default)(classes.root, className),
+      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : theme.palette.primary.main
+    }, fontSize === 'default' ? {
+      width: size,
+      height: size
+    } : {
+      fontSize: fontSize
+    }, other));
+  } // MDI - Material Design Icons - https://materialdesignicons.com
+
+
+  if (iconName.indexOf('mdi_') === 0) {
+    var _IconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
+    return _react.default.createElement(_IconName, (0, _extends2.default)({
+      className: (0, _classnames.default)(classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], isHiColor), className),
+      color: isHiColor ? 'inherit' : color
+    }, fontSize === 'default' ? {
+      style: {
+        fontSize: size
+      }
+    } : {
+      fontSize: fontSize
+    }, other));
+  } // @material-ui/icons
+
+
+  return _react.default.createElement(_Icon.default, (0, _extends2.default)({
+    className: (0, _classnames.default)(classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], isHiColor), className),
+    color: isHiColor ? 'inherit' : color
+  }, fontSize === 'default' ? {
+    style: {
+      fontSize: size
+    }
+  } : {
+    fontSize: fontSize
+  }, other), iconName);
+}
+
+HiIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The name of the icon font ligature.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css-api) below for more details.
+   */
+  classes: _propTypes.default.object.isRequired,
+
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes.default.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled', 'positive', 'negative', 'middle', 'neutral']),
+
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   */
+  fontSize: _propTypes.default.oneOf(['inherit', 'default']),
+
+  /**
+   * Deprecated use (same as children)
+   * The name of the icon font ligature.
+   */
+  icon: _propTypes.default.string,
+
+  /**
+   * Size of the icon, define width & height
+   */
+  size: _propTypes.default.number
+} : {};
+HiIcon.defaultProps = {
+  color: 'inherit',
+  fontSize: 'default',
+  icon: null,
+  size: 24
+};
+HiIcon.muiName = 'HiIcon';
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  withTheme: true,
+  name: 'HmuiIcon'
+})(HiIcon);
+
+exports.default = _default;

package/HiIcon/index.js

@@ -0,0 +1,15 @@
+"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 _HiIcon.default;
+  }
+});
+
+var _HiIcon = _interopRequireDefault(require("./HiIcon"));

package/HiIconButton/HiIconButton.js

@@ -0,0 +1,120 @@
+"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/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("../styles");
+
+var _colorManipulator = require("../styles/colorManipulator");
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+// @inheritedComponent IconButton
+var styles = function styles(theme) {
+  return {
+    positive: {
+      color: theme.palette.positive.main,
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    negative: {
+      color: theme.palette.negative.main,
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    middle: {
+      color: theme.palette.middle.main,
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    neutral: {
+      color: theme.palette.neutral.main,
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+function HiIconButton(props) {
+  var _classNames;
+
+  var children = props.children,
+      classes = props.classes,
+      className = props.className,
+      color = props.color,
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color"]);
+  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+  var buttonClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.negative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.middle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.neutral, color === 'neutral'), _classNames));
+  return _react.default.createElement(_IconButton.default, (0, _extends2.default)({
+    className: className,
+    classes: {
+      root: buttonClassNames
+    },
+    color: hcolor
+  }, other), children);
+}
+
+HiIconButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des classes
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Surcharge des classes
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'])
+} : {};
+HiIconButton.defaultProps = {
+  color: 'default'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiIconButton'
+})(HiIconButton);
+
+exports.default = _default;

package/HiIconButton/index.js

@@ -0,0 +1,15 @@
+"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 _HiIconButton.default;
+  }
+});
+
+var _HiIconButton = _interopRequireDefault(require("./HiIconButton"));

package/HiLoader/HiLoader.js

@@ -1,55 +1,69 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
+exports.default = void 0;
 
-var _propTypes = require('prop-types');
+var _react = _interopRequireDefault(require("react"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactSpinners = require('react-spinners');
+var _PropagateLoader = _interopRequireDefault(require("react-spinners/PropagateLoader"));
 
-var _withStyles = require('../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var styles = exports.styles = function styles() {
-    return {};
-};
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 function HiLoader(props) {
-    var theme = props.theme,
-        loading = props.loading;
-
-
-    return _react2.default.createElement(_reactSpinners.PropagateLoader, {
-        loading: loading,
-        size: 12,
-        color: theme.palette.business.primary.normal
-    });
+  var className = props.className,
+      color = props.color,
+      size = props.size,
+      theme = props.theme;
+  return _react.default.createElement("div", {
+    id: "hi-loader",
+    className: className,
+    style: {
+      display: 'block',
+      width: 1,
+      height: 12
+    }
+  }, _react.default.createElement(_PropagateLoader.default, {
+    size: size,
+    color: theme.palette[color].main
+  }));
 }
 
 HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Displays loader if true
-     */
-    loading: _propTypes2.default.bool,
-    /**
-     * @ignore
-     */
-    theme: _propTypes2.default.object
+  /**
+   * Surcharge les classes du composant
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes.default.oneOf(['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
+  /**
+   * Size of component
+   */
+  size: _propTypes.default.number,
+
+  /**
+   * @ignore
+   */
+  theme: _propTypes.default.object.isRequired
 } : {};
-
 HiLoader.defaultProps = {
-    loading: false
+  size: 12,
+  color: 'primary'
 };
 
-exports.default = (0, _withStyles2.default)(styles, { withTheme: true, name: 'HmuiHiLoader' })(HiLoader);
+var _default = (0, _withStyles.default)({}, {
+  hiComponent: true,
+  withTheme: true,
+  name: 'HmuiHiLoader'
+})(HiLoader);
+
+exports.default = _default;

package/HiLoader/index.js

@@ -1,16 +1,15 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _HiLoader = require('./HiLoader');
-
-Object.defineProperty(exports, 'default', {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_HiLoader).default;
+    return _HiLoader.default;
   }
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _HiLoader = _interopRequireDefault(require("./HiLoader"));

package/HiPin/HiPin.js

@@ -0,0 +1,117 @@
+"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/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("../styles");
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: 'inline-block',
+      padding: '0 9px',
+      height: 16,
+      lineHeight: '18px',
+      minWidth: 25,
+      textAlign: 'center',
+      borderRadius: '45px',
+      verticalAlign: 'middle',
+      fontSize: 11,
+      fontWeight: theme.typography.fontWeightMedium,
+      fontFamily: theme.typography.fontFamily,
+      color: theme.palette.text.primary,
+      backgroundColor: theme.palette.grey[300]
+    },
+    clickable: {
+      cursor: 'pointer'
+    },
+    primary: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    },
+    secondary: {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText
+    },
+    positive: {
+      backgroundColor: theme.palette.positive.main,
+      color: theme.palette.positive.contrastText
+    },
+    negative: {
+      backgroundColor: theme.palette.negative.main,
+      color: theme.palette.negative.contrastText
+    },
+    middle: {
+      backgroundColor: theme.palette.middle.main,
+      color: theme.palette.middle.contrastText
+    },
+    neutral: {
+      backgroundColor: theme.palette.neutral.main,
+      color: theme.palette.neutral.contrastText
+    }
+  };
+};
+/**
+ * HiPins
+ *
+ * Tiny raised button used to display subsidiary datas like item count, (...), and throw an onClick event.
+ * Used in:
+ * - CellStatus to display operations count and to deploy operation rows on click.
+ *
+ */
+
+
+exports.styles = styles;
+
+function HiPin(props) {
+  var _classNames;
+
+  var classes = props.classes,
+      children = props.children,
+      color = props.color,
+      onClick = props.onClick,
+      className = props.className;
+  var pinClass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.clickable, onClick), (0, _defineProperty2.default)(_classNames, classes.primary, color === 'primary'), (0, _defineProperty2.default)(_classNames, classes.secondary, color === 'secondary'), (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.negative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.middle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.neutral, color === 'neutral'), _classNames), className);
+  return _react.default.createElement("div", (0, _extends2.default)({
+    className: pinClass
+  }, onClick && {
+    onClick: onClick,
+    role: 'button'
+  }), children);
+}
+
+HiPin.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _propTypes.default.node.isRequired,
+  classes: _propTypes.default.object.isRequired,
+  className: _propTypes.default.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+  onClick: _propTypes.default.func
+} : {};
+HiPin.defaultProps = {
+  color: 'default'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiPin'
+})(HiPin);
+
+exports.default = _default;

package/HiPin/index.js

@@ -0,0 +1,15 @@
+"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 _HiPin.default;
+  }
+});
+
+var _HiPin = _interopRequireDefault(require("./HiPin"));