@hipay/hipay-material-ui 1.0.0-beta.1

package/es/Checkbox/Checkbox.js

@@ -0,0 +1,117 @@
+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 SwitchBase from '../internal/SwitchBase';
+import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+  default: {
+    color: theme.palette.text.secondary
+  },
+  checked: {},
+  checkedPrimary: {
+    color: theme.palette.primary.main
+  },
+  checkedSecondary: {
+    color: theme.palette.secondary.main
+  },
+  disabled: {
+    color: theme.palette.action.disabled
+  }
+});
+
+function Checkbox(props) {
+  const { checkedIcon, classes, color, icon, indeterminate, indeterminateIcon } = props,
+        other = _objectWithoutProperties(props, ['checkedIcon', 'classes', 'color', 'icon', 'indeterminate', 'indeterminateIcon']);
+  const checkedClass = classNames(classes.checked, {
+    [classes.checkedPrimary]: color === 'primary',
+    [classes.checkedSecondary]: color === 'secondary'
+  });
+
+  return React.createElement(SwitchBase, _extends({
+    checkedIcon: indeterminate ? indeterminateIcon : checkedIcon,
+    classes: {
+      default: classes.default,
+      checked: checkedClass,
+      disabled: classes.disabled
+    },
+    icon: indeterminate ? indeterminateIcon : icon
+  }, other));
+}
+
+Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['primary', 'secondary']),
+  /**
+   * If `true`, the switch will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: PropTypes.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the component appears indeterminate.
+   */
+  indeterminate: PropTypes.bool,
+  /**
+   * The icon to display when the component is indeterminate.
+   */
+  indeterminateIcon: PropTypes.node,
+  /**
+   * Properties applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Use that property to pass a ref callback to the native input component.
+   */
+  inputRef: PropTypes.func,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {boolean} checked The `checked` value of the switch
+   */
+  onChange: PropTypes.func,
+  /**
+   * The input component property `type`.
+   */
+  type: PropTypes.string,
+  /**
+   * The value of the component.
+   */
+  value: PropTypes.string
+} : {};
+
+Checkbox.defaultProps = {
+  color: 'secondary',
+  indeterminate: false,
+  indeterminateIcon: React.createElement(IndeterminateCheckBoxIcon, null)
+};
+
+export default withStyles(styles, { name: 'MuiCheckbox' })(Checkbox);

package/es/Checkbox/index.js

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

package/es/Chip/Chip.js

@@ -0,0 +1,241 @@
+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 keycode from 'keycode';
+import CancelIcon from '../internal/svg-icons/Cancel';
+import withStyles from '../styles/withStyles';
+import { emphasize, fade } from '../styles/colorManipulator';
+import '../Avatar/Avatar'; // So we don't have any override priority issue.
+
+export const styles = theme => {
+  const height = 32;
+  const backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
+  const deleteIconColor = fade(theme.palette.text.primary, 0.26);
+
+  return {
+    root: {
+      fontFamily: theme.typography.fontFamily,
+      fontSize: theme.typography.pxToRem(13),
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height,
+      color: theme.palette.getContrastText(backgroundColor),
+      backgroundColor,
+      borderRadius: height / 2,
+      whiteSpace: 'nowrap',
+      transition: theme.transitions.create(),
+      // label will inherit this from root, then `clickable` class overrides this for both
+      cursor: 'default',
+      outline: 'none', // No outline on focused element in Chrome (as triggered by tabIndex prop)
+      border: 'none', // Remove `button` border
+      padding: 0 // Remove `button` padding
+    },
+    clickable: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        backgroundColor: emphasize(backgroundColor, 0.08)
+      },
+      '&:active': {
+        boxShadow: theme.shadows[1],
+        backgroundColor: emphasize(backgroundColor, 0.12)
+      }
+    },
+    deletable: {
+      '&:focus': {
+        backgroundColor: emphasize(backgroundColor, 0.08)
+      }
+    },
+    avatar: {
+      marginRight: -4,
+      width: height,
+      height,
+      color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+      fontSize: theme.typography.pxToRem(16)
+    },
+    avatarChildren: {
+      width: 19,
+      height: 19
+    },
+    label: {
+      display: 'flex',
+      alignItems: 'center',
+      paddingLeft: 12,
+      paddingRight: 12,
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      cursor: 'inherit'
+    },
+    deleteIcon: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      color: deleteIconColor,
+      cursor: 'pointer',
+      height: 'auto',
+      margin: '0 4px 0 -8px',
+      '&:hover': {
+        color: fade(deleteIconColor, 0.4)
+      }
+    }
+  };
+};
+
+/**
+ * Chips represent complex entities in small blocks, such as a contact.
+ */
+class Chip extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.chipRef = null, this.handleDeleteIconClick = event => {
+      // Stop the event from bubbling up to the `Chip`
+      event.stopPropagation();
+      const { onDelete } = this.props;
+      if (onDelete) {
+        onDelete(event);
+      }
+    }, this.handleKeyDown = event => {
+      // Ignore events from children of `Chip`.
+      if (event.currentTarget !== event.target) {
+        return;
+      }
+
+      const { onClick, onDelete, onKeyDown } = this.props;
+      const key = keycode(event);
+
+      if (onClick && (key === 'space' || key === 'enter')) {
+        event.preventDefault();
+        onClick(event);
+      } else if (onDelete && key === 'backspace') {
+        event.preventDefault();
+        onDelete(event);
+      } else if (key === 'esc') {
+        event.preventDefault();
+        if (this.chipRef) {
+          this.chipRef.blur();
+        }
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+    }, _temp;
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      avatar: avatarProp,
+      classes,
+      className: classNameProp,
+      component: Component,
+      deleteIcon: deleteIconProp,
+      label,
+      onClick,
+      onDelete,
+      onKeyDown,
+      tabIndex: tabIndexProp
+    } = _props,
+          other = _objectWithoutProperties(_props, ['avatar', 'classes', 'className', 'component', 'deleteIcon', 'label', 'onClick', 'onDelete', 'onKeyDown', 'tabIndex']);
+
+    const className = classNames(classes.root, { [classes.clickable]: onClick }, { [classes.deletable]: onDelete }, classNameProp);
+
+    let deleteIcon = null;
+    if (onDelete) {
+      deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
+        className: classNames(deleteIconProp.props.className, classes.deleteIcon),
+        onClick: this.handleDeleteIconClick
+      }) : React.createElement(CancelIcon, { className: classes.deleteIcon, onClick: this.handleDeleteIconClick });
+    }
+
+    let avatar = null;
+    if (avatarProp && React.isValidElement(avatarProp)) {
+      avatar = React.cloneElement(avatarProp, {
+        className: classNames(classes.avatar, avatarProp.props.className),
+        childrenClassName: classNames(classes.avatarChildren, avatarProp.props.childrenClassName)
+      });
+    }
+
+    let tabIndex = tabIndexProp;
+
+    if (!tabIndex) {
+      tabIndex = onClick || onDelete ? 0 : -1;
+    }
+
+    return React.createElement(
+      Component,
+      _extends({
+        role: 'button',
+        className: className,
+        tabIndex: tabIndex,
+        onClick: onClick,
+        onKeyDown: this.handleKeyDown,
+        ref: node => {
+          this.chipRef = node;
+        }
+      }, other),
+      avatar,
+      React.createElement(
+        'span',
+        { className: classes.label },
+        label
+      ),
+      deleteIcon
+    );
+  }
+}
+
+Chip.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Avatar element.
+   */
+  avatar: PropTypes.element,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: PropTypes.element,
+  /**
+   * The content of the label.
+   */
+  label: PropTypes.node,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * Callback function fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+} : {};
+
+Chip.defaultProps = {
+  component: 'div'
+};
+
+export default withStyles(styles, { name: 'MuiChip' })(Chip);

package/es/Chip/index.js

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

package/es/Dialog/Dialog.js

@@ -0,0 +1,231 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Modal
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import { capitalize } from '../utils/helpers';
+import Modal from '../Modal';
+import Fade from '../transitions/Fade';
+import { duration } from '../styles/transitions';
+import Paper from '../Paper';
+
+export const styles = theme => ({
+  root: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  paper: {
+    display: 'flex',
+    margin: theme.spacing.unit * 4,
+    flexDirection: 'column',
+    flex: '0 1 auto',
+    position: 'relative',
+    maxHeight: '90vh',
+    overflowY: 'auto', // Fix IE11 issue, to remove at some point.
+    '&:focus': {
+      outline: 'none'
+    }
+  },
+  paperWidthXs: {
+    maxWidth: Math.max(theme.breakpoints.values.xs, 360)
+  },
+  paperWidthSm: {
+    maxWidth: theme.breakpoints.values.sm
+  },
+  paperWidthMd: {
+    maxWidth: theme.breakpoints.values.md
+  },
+  paperFullWidth: {
+    width: '100%'
+  },
+  paperFullScreen: {
+    margin: 0,
+    width: '100%',
+    maxWidth: '100%',
+    height: '100%',
+    maxHeight: '100%',
+    borderRadius: 0
+  }
+});
+
+/**
+ * Dialogs are overlaid modal paper based components with a backdrop.
+ */
+function Dialog(props) {
+  const {
+    children,
+    classes,
+    className,
+    fullScreen,
+    fullWidth,
+    disableBackdropClick,
+    disableEscapeKeyDown,
+    maxWidth,
+    onBackdropClick,
+    onClose,
+    onEnter,
+    onEntered,
+    onEntering,
+    onEscapeKeyDown,
+    onExit,
+    onExited,
+    onExiting,
+    open,
+    PaperProps,
+    transition: TransitionProp,
+    transitionDuration
+  } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'fullScreen', 'fullWidth', 'disableBackdropClick', 'disableEscapeKeyDown', 'maxWidth', 'onBackdropClick', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onEscapeKeyDown', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'transition', 'transitionDuration']);
+
+  return React.createElement(
+    Modal,
+    _extends({
+      className: classNames(classes.root, className),
+      BackdropProps: {
+        transitionDuration
+      },
+      disableBackdropClick: disableBackdropClick,
+      disableEscapeKeyDown: disableEscapeKeyDown,
+      onBackdropClick: onBackdropClick,
+      onEscapeKeyDown: onEscapeKeyDown,
+      onClose: onClose,
+      open: open,
+      role: 'dialog'
+    }, other),
+    React.createElement(
+      TransitionProp,
+      {
+        appear: true,
+        'in': open,
+        timeout: transitionDuration,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: onExited
+      },
+      React.createElement(
+        Paper,
+        _extends({
+          elevation: 24,
+          className: classNames(classes.paper, {
+            [classes[`paperWidth${maxWidth ? capitalize(maxWidth) : ''}`]]: maxWidth,
+            [classes.paperFullScreen]: fullScreen,
+            [classes.paperFullWidth]: fullWidth
+          })
+        }, PaperProps),
+        children
+      )
+    )
+  );
+}
+
+Dialog.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Dialog children, usually the included sub-components.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, clicking the backdrop will not fire the `onClose` callback.
+   */
+  disableBackdropClick: PropTypes.bool,
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   */
+  disableEscapeKeyDown: PropTypes.bool,
+  /**
+   * If `true`, the dialog will be full-screen
+   */
+  fullScreen: PropTypes.bool,
+  /**
+   * If `true`, the dialog stretches to `maxWidth`.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Determine the max width of the dialog.
+   * The dialog width grows with the size of the screen, this property is useful
+   * on the desktop where you might need some coherent different width size across your
+   * application. Set to `false` to disable `maxWidth`.
+   */
+  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', false]),
+  /**
+   * Callback fired when the backdrop is clicked.
+   */
+  onBackdropClick: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired before the dialog enters.
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired when the dialog has entered.
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired when the dialog is entering.
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired when the escape key is pressed,
+   * `disableKeyboard` is false and the modal is in focus.
+   */
+  onEscapeKeyDown: PropTypes.func,
+  /**
+   * Callback fired before the dialog exits.
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired when the dialog has exited.
+   */
+  onExited: PropTypes.func,
+  /**
+   * Callback fired when the dialog is exiting.
+   */
+  onExiting: PropTypes.func,
+  /**
+   * If `true`, the Dialog is open.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * Properties applied to the `Paper` element.
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * Transition component.
+   */
+  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })])
+} : {};
+
+Dialog.defaultProps = {
+  fullScreen: false,
+  fullWidth: false,
+  disableBackdropClick: false,
+  disableEscapeKeyDown: false,
+  maxWidth: 'sm',
+  transition: Fade,
+  transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen }
+};
+
+export default withStyles(styles, { name: 'MuiDialog' })(Dialog);

package/es/Dialog/DialogActions.js

@@ -0,0 +1,58 @@
+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 withStyles from '../styles/withStyles';
+import { cloneChildrenWithClassName } from '../utils/reactHelpers';
+import '../Button'; // So we don't have any override priority issue.
+
+export const styles = theme => ({
+  root: {
+    flex: '0 0 auto',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  action: {
+    margin: `0 ${theme.spacing.unit / 2}px`,
+    minWidth: 64
+  }
+});
+
+function DialogActions(props) {
+  const { disableActionSpacing, children, classes, className } = props,
+        other = _objectWithoutProperties(props, ['disableActionSpacing', 'children', 'classes', 'className']);
+
+  return React.createElement(
+    'div',
+    _extends({ className: classNames(classes.root, className) }, other),
+    disableActionSpacing ? children : cloneChildrenWithClassName(children, classes.action)
+  );
+}
+
+DialogActions.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the dialog actions do not have additional margin.
+   */
+  disableActionSpacing: PropTypes.bool
+} : {};
+
+DialogActions.defaultProps = {
+  disableActionSpacing: false
+};
+
+export default withStyles(styles, { name: 'MuiDialogActions' })(DialogActions);

package/es/Dialog/DialogContent.js

@@ -0,0 +1,48 @@
+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 withStyles from '../styles/withStyles';
+
+export const styles = theme => {
+  const spacing = theme.spacing.unit * 3;
+  return {
+    root: {
+      flex: '1 1 auto',
+      overflowY: 'auto',
+      padding: `0 ${spacing}px ${spacing}px ${spacing}px`,
+      '&:first-child': {
+        paddingTop: spacing
+      }
+    }
+  };
+};
+
+function DialogContent(props) {
+  const { classes, children, className } = props,
+        other = _objectWithoutProperties(props, ['classes', 'children', 'className']);
+
+  return React.createElement(
+    'div',
+    _extends({ className: classNames(classes.root, className) }, other),
+    children
+  );
+}
+
+DialogContent.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string
+} : {};
+
+export default withStyles(styles, { name: 'MuiDialogContent' })(DialogContent);