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

package/es/HiIcon/HiIcon.js

@@ -0,0 +1,173 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Icon from '@material-ui/core/Icon';
+import withStyles from '../styles/withStyles';
+import { camelize, capitalize } from '../utils/helpers';
+import * as hiSvgIcons from '../hi-svg-icons';
+import * as mdi from 'mdi-material-ui';
+export const styles = theme => ({
+  /* 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
+  }
+});
+
+function HiIcon(props) {
+  const {
+    children,
+    classes,
+    className,
+    color,
+    fontSize,
+    icon,
+    size,
+    theme
+  } = props,
+        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "fontSize", "icon", "size", "theme"]);
+
+  const iconName = icon !== null ? icon : children;
+  const isHiColor = ['positive', 'negative', 'middle', 'neutral'].includes(color); // Line Awesome icons
+
+  if (iconName.indexOf('fa-') === 0) {
+    return React.createElement("i", _extends({
+      className: classNames('fa', iconName, classes.root, {
+        [classes[`color${capitalize(color)}`]]: color !== 'inherit'
+      }, className),
+      style: {
+        fontSize: fontSize !== 'inherit' ? size : 'inherit'
+      }
+    }, other));
+  } // Specific HiPay icons
+
+
+  if (iconName.indexOf('hi_') === 0) {
+    const IconName = hiSvgIcons[capitalize(camelize(iconName))];
+    return React.createElement(IconName, _extends({
+      className: classNames(classes.root, className),
+      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : theme.palette.primary.main
+    }, fontSize === 'default' ? {
+      width: size,
+      height: size
+    } : {
+      fontSize
+    }, other));
+  } // MDI - Material Design Icons - https://materialdesignicons.com
+
+
+  if (iconName.indexOf('mdi_') === 0) {
+    const IconName = mdi[capitalize(camelize(iconName.slice(4)))];
+    return React.createElement(IconName, _extends({
+      className: classNames(classes.root, {
+        [classes[`color${capitalize(color)}`]]: isHiColor
+      }, className),
+      color: isHiColor ? 'inherit' : color
+    }, fontSize === 'default' ? {
+      style: {
+        fontSize: size
+      }
+    } : {
+      fontSize
+    }, other));
+  } // @material-ui/icons
+
+
+  return React.createElement(Icon, _extends({
+    className: classNames(classes.root, {
+      [classes[`color${capitalize(color)}`]]: isHiColor
+    }, className),
+    color: isHiColor ? 'inherit' : color
+  }, fontSize === 'default' ? {
+    style: {
+      fontSize: size
+    }
+  } : {
+    fontSize
+  }, other), iconName);
+}
+
+HiIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The name of the icon font ligature.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css-api) below for more details.
+   */
+  classes: PropTypes.object.isRequired,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.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.oneOf(['inherit', 'default']),
+
+  /**
+   * Deprecated use (same as children)
+   * The name of the icon font ligature.
+   */
+  icon: PropTypes.string,
+
+  /**
+   * Size of the icon, define width & height
+   */
+  size: PropTypes.number
+} : {};
+HiIcon.defaultProps = {
+  color: 'inherit',
+  fontSize: 'default',
+  icon: null,
+  size: 24
+};
+HiIcon.muiName = 'HiIcon';
+export default withStyles(styles, {
+  hiComponent: true,
+  withTheme: true,
+  name: 'HmuiIcon'
+})(HiIcon);

package/es/HiIcon/index.js

@@ -0,0 +1 @@
+export { default } from './HiIcon';

package/es/HiIconButton/HiIconButton.js

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

package/es/HiIconButton/index.js

@@ -0,0 +1 @@
+export { default } from './HiIconButton';

package/es/HiLoader/HiLoader.js

@@ -1,33 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PropagateLoader } from 'react-spinners';
+import PropagateLoader from 'react-spinners/PropagateLoader';
 import withStyles from '../styles/withStyles';
 
-export const styles = () => ({});
-
 function HiLoader(props) {
-    const { theme, loading } = props;
-
-    return React.createElement(PropagateLoader, {
-        loading: loading,
-        size: 12,
-        color: theme.palette.business.primary.normal
-    });
+  const {
+    className,
+    color,
+    size,
+    theme
+  } = props;
+  return React.createElement("div", {
+    id: "hi-loader",
+    className: className,
+    style: {
+      display: 'block',
+      width: 1,
+      height: 12
+    }
+  }, React.createElement(PropagateLoader, {
+    size: size,
+    color: theme.palette[color].main
+  }));
 }
 
 HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Displays loader if true
-     */
-    loading: PropTypes.bool,
-    /**
-     * @ignore
-     */
-    theme: PropTypes.object
-} : {};
+  /**
+   * Surcharge les classes du composant
+   */
+  className: PropTypes.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
 
+  /**
+   * Size of component
+   */
+  size: PropTypes.number,
+
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired
+} : {};
 HiLoader.defaultProps = {
-    loading: false
+  size: 12,
+  color: 'primary'
 };
-
-export default withStyles(styles, { withTheme: true, name: 'HmuiHiLoader' })(HiLoader);
+export default withStyles({}, {
+  hiComponent: true,
+  withTheme: true,
+  name: 'HmuiHiLoader'
+})(HiLoader);

package/es/HiPin/HiPin.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+export const styles = theme => ({
+  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.
+ *
+ */
+
+function HiPin(props) {
+  const {
+    classes,
+    children,
+    color,
+    onClick,
+    className
+  } = props;
+  const pinClass = classNames(classes.root, {
+    [classes.clickable]: onClick,
+    [classes.primary]: color === 'primary',
+    [classes.secondary]: color === 'secondary',
+    [classes.positive]: color === 'positive',
+    [classes.negative]: color === 'negative',
+    [classes.middle]: color === 'middle',
+    [classes.neutral]: color === 'neutral'
+  }, className);
+  return React.createElement("div", _extends({
+    className: pinClass
+  }, onClick && {
+    onClick,
+    role: 'button'
+  }), children);
+}
+
+HiPin.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.node.isRequired,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+  onClick: PropTypes.func
+} : {};
+HiPin.defaultProps = {
+  color: 'default'
+};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiPin'
+})(HiPin);

package/es/HiPin/index.js

@@ -0,0 +1 @@
+export { default } from './HiPin';