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

package/es/ExpansionPanel/ExpansionPanelActions.js

@@ -0,0 +1,47 @@
+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';
+
+export const styles = theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`
+  },
+  action: {
+    marginLeft: theme.spacing.unit
+  }
+});
+
+function ExpansionPanelActions(props) {
+  const { children, classes, className } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className']);
+
+  return React.createElement(
+    'div',
+    _extends({ className: classNames(classes.root, className) }, other),
+    cloneChildrenWithClassName(children, classes.action)
+  );
+}
+
+ExpansionPanelActions.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string
+} : {};
+
+export default withStyles(styles, { name: 'MuiExpansionPanelActions' })(ExpansionPanelActions);

package/es/ExpansionPanel/ExpansionPanelDetails.js

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

package/es/ExpansionPanel/ExpansionPanelSummary.js

@@ -0,0 +1,182 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent ButtonBase
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ButtonBase from '../ButtonBase';
+import IconButton from '../IconButton';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => {
+  const transition = {
+    duration: theme.transitions.duration.shortest
+  };
+  return {
+    root: {
+      display: 'flex',
+      minHeight: theme.spacing.unit * 6,
+      transition: theme.transitions.create(['min-height', 'background-color'], transition),
+      padding: `0 ${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 3}px`,
+      '&:hover:not($disabled)': {
+        cursor: 'pointer'
+      }
+    },
+    expanded: {
+      minHeight: 64
+    },
+    focused: {
+      backgroundColor: theme.palette.grey[300]
+    },
+    disabled: {
+      opacity: 0.38
+    },
+    content: {
+      display: 'flex',
+      flexGrow: 1,
+      transition: theme.transitions.create(['margin'], transition),
+      margin: '12px 0',
+      '& > :last-child': {
+        paddingRight: theme.spacing.unit * 4
+      }
+    },
+    contentExpanded: {
+      margin: '20px 0'
+    },
+    expandIcon: {
+      position: 'absolute',
+      top: '50%',
+      right: theme.spacing.unit,
+      transform: 'translateY(-50%) rotate(0deg)',
+      transition: theme.transitions.create('transform', transition)
+    },
+    expandIconExpanded: {
+      transform: 'translateY(-50%) rotate(180deg)'
+    }
+  };
+};
+
+class ExpansionPanelSummary extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.state = {
+      focused: false
+    }, this.handleFocus = () => {
+      this.setState({
+        focused: true
+      });
+    }, this.handleBlur = () => {
+      this.setState({
+        focused: false
+      });
+    }, this.handleChange = event => {
+      const { onChange, onClick } = this.props;
+      if (onChange) {
+        onChange(event);
+      }
+      if (onClick) {
+        onClick(event);
+      }
+    }, _temp;
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      children,
+      classes,
+      className,
+      disabled,
+      expanded,
+      expandIcon,
+      onChange
+    } = _props,
+          other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'disabled', 'expanded', 'expandIcon', 'onChange']);
+    const { focused } = this.state;
+
+    return React.createElement(
+      ButtonBase,
+      _extends({
+        focusRipple: false,
+        disableRipple: true,
+        disabled: disabled,
+        component: 'div',
+        'aria-expanded': expanded,
+        className: classNames(classes.root, {
+          [classes.disabled]: disabled,
+          [classes.expanded]: expanded,
+          [classes.focused]: focused
+        }, className)
+      }, other, {
+        onKeyboardFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onClick: this.handleChange
+      }),
+      React.createElement(
+        'div',
+        { className: classNames(classes.content, { [classes.contentExpanded]: expanded }) },
+        children
+      ),
+      expandIcon && React.createElement(
+        IconButton,
+        {
+          disabled: disabled,
+          className: classNames(classes.expandIcon, {
+            [classes.expandIconExpanded]: expanded
+          }),
+          component: 'div',
+          tabIndex: -1,
+          'aria-hidden': 'true'
+        },
+        expandIcon
+      )
+    );
+  }
+}
+
+ExpansionPanelSummary.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the expansion panel summary.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   * If `true`, the summary will be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * @ignore
+   * If `true`, expands the summary, otherwise collapse it.
+   */
+  expanded: PropTypes.bool,
+  /**
+   * The icon to display as the expand indicator.
+   */
+  expandIcon: PropTypes.node,
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func
+} : {};
+
+ExpansionPanelSummary.defaultProps = {
+  disabled: false
+};
+
+ExpansionPanelSummary.muiName = 'ExpansionPanelSummary';
+
+export default withStyles(styles, { name: 'MuiExpansionPanelSummary' })(ExpansionPanelSummary);

package/es/ExpansionPanel/index.js

@@ -0,0 +1,4 @@
+export { default } from './ExpansionPanel';
+export { default as ExpansionPanelActions } from './ExpansionPanelActions';
+export { default as ExpansionPanelDetails } from './ExpansionPanelDetails';
+export { default as ExpansionPanelSummary } from './ExpansionPanelSummary';

package/es/Form/FormControl.js

@@ -0,0 +1,214 @@
+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 { isDirty, isAdornedStart } from '../Input/Input';
+import { capitalize } from '../utils/helpers';
+import { isMuiElement } from '../utils/reactHelpers';
+
+export const styles = theme => ({
+  root: {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    position: 'relative',
+    // Reset fieldset default style
+    minWidth: 0,
+    padding: 0,
+    margin: 0,
+    border: 0
+  },
+  marginNormal: {
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit
+  },
+  marginDense: {
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit / 2
+  },
+  fullWidth: {
+    width: '100%'
+  }
+});
+
+/**
+ * Provides context such as dirty/focused/error/required for form inputs.
+ * Relying on the context provides high flexibilty and ensures that the state always stay
+ * consitent across the children of the `FormControl`.
+ * This context is used by the following components:
+ *  - FormLabel
+ *  - FormHelperText
+ *  - Input
+ *  - InputLabel
+ */
+class FormControl extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    // We need to iterate through the children and find the Input in order
+    // to fully support server side rendering.
+    this.state = {
+      adornedStart: false,
+      dirty: false,
+      focused: false
+    };
+
+    this.handleFocus = event => {
+      if (this.props.onFocus) {
+        this.props.onFocus(event);
+      }
+      this.setState(state => !state.focused ? { focused: true } : null);
+    };
+
+    this.handleBlur = event => {
+      // The event might be undefined.
+      // For instance, a child component might call this hook
+      // when an input is disabled but still having the focus.
+      if (this.props.onBlur && event) {
+        this.props.onBlur(event);
+      }
+      this.setState(state => state.focused ? { focused: false } : null);
+    };
+
+    this.handleDirty = () => {
+      if (!this.state.dirty) {
+        this.setState({ dirty: true });
+      }
+    };
+
+    this.handleClean = () => {
+      if (this.state.dirty) {
+        this.setState({ dirty: false });
+      }
+    };
+
+    const { children } = this.props;
+    if (children) {
+      React.Children.forEach(children, child => {
+        if (!isMuiElement(child, ['Input', 'Select'])) {
+          return;
+        }
+
+        if (isDirty(child.props, true)) {
+          this.state.dirty = true;
+        }
+
+        const input = isMuiElement(child, ['Select']) ? child.props.input : child;
+
+        if (input && isAdornedStart(input.props)) {
+          this.state.adornedStart = true;
+        }
+      });
+    }
+  }
+
+  getChildContext() {
+    const { disabled, error, required, margin } = this.props;
+    const { adornedStart, dirty, focused } = this.state;
+
+    return {
+      muiFormControl: {
+        adornedStart,
+        dirty,
+        disabled,
+        error,
+        focused,
+        margin,
+        required,
+        onDirty: this.handleDirty,
+        onClean: this.handleClean,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur
+      }
+    };
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      classes,
+      className,
+      component: Component,
+      disabled,
+      error,
+      fullWidth,
+      margin,
+      required
+    } = _props,
+          other = _objectWithoutProperties(_props, ['classes', 'className', 'component', 'disabled', 'error', 'fullWidth', 'margin', 'required']);
+
+    return React.createElement(Component, _extends({
+      className: classNames(classes.root, {
+        [classes[`margin${capitalize(margin)}`]]: margin !== 'none',
+        [classes.fullWidth]: fullWidth
+      }, className)
+    }, other, {
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    }));
+  }
+}
+
+FormControl.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The contents of the form control.
+   */
+  children: PropTypes.node,
+  /**
+   * 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]),
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label should be displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   */
+  margin: PropTypes.oneOf(['none', 'dense', 'normal']),
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * If `true`, the label will indicate that the input is required.
+   */
+  required: PropTypes.bool
+} : {};
+
+FormControl.defaultProps = {
+  component: 'div',
+  disabled: false,
+  error: false,
+  fullWidth: false,
+  margin: 'none',
+  required: false
+};
+
+FormControl.childContextTypes = {
+  muiFormControl: PropTypes.object
+};
+
+export default withStyles(styles, { name: 'MuiFormControl' })(FormControl);

package/es/Form/FormControlLabel.js

@@ -0,0 +1,137 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+/* eslint-disable jsx-a11y/label-has-for */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import Typography from '../Typography';
+
+export const styles = theme => ({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    // For correct alignment with the text.
+    verticalAlign: 'middle',
+    // Remove grey highlight
+    WebkitTapHighlightColor: 'transparent',
+    marginLeft: -14,
+    marginRight: theme.spacing.unit * 2 // used for row presentation of radio/checkbox
+  },
+  disabled: {
+    color: theme.palette.text.disabled,
+    cursor: 'default'
+  },
+  label: {}
+});
+
+/**
+ * Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.
+ * Use this component if you want to display an extra label.
+ */
+function FormControlLabel(props, context) {
+  const {
+    checked,
+    classes,
+    className: classNameProp,
+    control,
+    disabled: disabledProp,
+    inputRef,
+    label,
+    name,
+    onChange,
+    value
+  } = props,
+        other = _objectWithoutProperties(props, ['checked', 'classes', 'className', 'control', 'disabled', 'inputRef', 'label', 'name', 'onChange', 'value']);
+
+  const { muiFormControl } = context;
+  let disabled = disabledProp;
+
+  if (typeof control.props.disabled !== 'undefined') {
+    if (typeof disabled === 'undefined') {
+      disabled = control.props.disabled;
+    }
+  }
+
+  if (muiFormControl) {
+    if (typeof disabled === 'undefined') {
+      disabled = muiFormControl.disabled;
+    }
+  }
+
+  const className = classNames(classes.root, {
+    [classes.disabled]: disabled
+  }, classNameProp);
+
+  return React.createElement(
+    'label',
+    _extends({ className: className }, other),
+    React.cloneElement(control, {
+      disabled,
+      checked: typeof control.props.checked === 'undefined' ? checked : control.props.checked,
+      name: control.props.name || name,
+      onChange: control.props.onChange || onChange,
+      value: control.props.value || value,
+      inputRef: control.props.inputRef || inputRef
+    }),
+    React.createElement(
+      Typography,
+      { component: 'span', className: classes.label },
+      label
+    )
+  );
+}
+
+FormControlLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If `true`, the component appears selected.
+   */
+  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`.
+   */
+  control: PropTypes.element,
+  /**
+   * If `true`, the control will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Use that property to pass a ref callback to the native input component.
+   */
+  inputRef: PropTypes.func,
+  /**
+   * The text to be used in an enclosing label element.
+   */
+  label: PropTypes.node,
+  /*
+   * @ignore
+   */
+  name: PropTypes.string,
+  /**
+   * 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 value of the component.
+   */
+  value: PropTypes.string
+} : {};
+
+FormControlLabel.contextTypes = {
+  muiFormControl: PropTypes.object
+};
+
+export default withStyles(styles, { name: 'MuiFormControlLabel' })(FormControlLabel);

package/es/Form/FormGroup.js

@@ -0,0 +1,62 @@
+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 = {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap'
+  },
+  row: {
+    flexDirection: 'row'
+  }
+};
+
+/**
+ * `FormGroup` wraps controls such as `Checkbox` and `Switch`.
+ * It provides compact row layout.
+ * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
+ */
+function FormGroup(props) {
+  const { classes, className, children, row } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'children', 'row']);
+
+  return React.createElement(
+    'div',
+    _extends({
+      className: classNames(classes.root, {
+        [classes.row]: row
+      }, className)
+    }, other),
+    children
+  );
+}
+
+FormGroup.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,
+  /**
+   * Display group of elements in a compact row.
+   */
+  row: PropTypes.bool
+} : {};
+
+FormGroup.defaultProps = {
+  row: false
+};
+
+export default withStyles(styles, { name: 'MuiFormGroup' })(FormGroup);