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

package/es/Dialog/DialogContentText.js

@@ -0,0 +1,41 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+  root: _extends({}, theme.typography.subheading, {
+    color: theme.palette.text.secondary,
+    margin: 0
+  })
+});
+
+function DialogContentText(props) {
+  const { children, classes, className } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className']);
+
+  return React.createElement(
+    'p',
+    _extends({ className: classNames(classes.root, className) }, other),
+    children
+  );
+}
+
+DialogContentText.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: 'MuiDialogContentText' })(DialogContentText);

package/es/Dialog/DialogTitle.js

@@ -0,0 +1,57 @@
+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 Typography from '../Typography';
+
+export const styles = theme => ({
+  root: {
+    margin: 0,
+    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \
+      20px ${theme.spacing.unit * 3}px`,
+    flex: '0 0 auto'
+  }
+});
+
+function DialogTitle(props) {
+  const { children, classes, className, disableTypography } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'disableTypography']);
+
+  return React.createElement(
+    'div',
+    _extends({ className: classNames(classes.root, className) }, other),
+    disableTypography ? children : React.createElement(
+      Typography,
+      { variant: 'title' },
+      children
+    )
+  );
+}
+
+DialogTitle.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,
+  /**
+   * If `true`, the children won't be wrapped by a typography component.
+   * For instance, this can be useful to render an h4 instead of the default h2.
+   */
+  disableTypography: PropTypes.bool
+} : {};
+
+DialogTitle.defaultProps = {
+  disableTypography: false
+};
+
+export default withStyles(styles, { name: 'MuiDialogTitle' })(DialogTitle);

package/es/Dialog/index.js

@@ -0,0 +1,6 @@
+export { default } from './Dialog';
+export { default as DialogActions } from './DialogActions';
+export { default as DialogTitle } from './DialogTitle';
+export { default as DialogContent } from './DialogContent';
+export { default as DialogContentText } from './DialogContentText';
+export { default as withMobileDialog } from './withMobileDialog';

package/es/Dialog/withMobileDialog.js

@@ -0,0 +1,25 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import withWidth, { isWidthDown } from '../utils/withWidth';
+
+/**
+ * Dialog will responsively be full screen *at or below* the given breakpoint
+ * (defaults to 'sm' for mobile devices).
+ * Notice that this Higher-order Component is incompatible with server side rendering.
+ */
+const withMobileDialog = (options = {}) => Component => {
+  const { breakpoint = 'sm' } = options;
+
+  function WithMobileDialog(props) {
+    return React.createElement(Component, _extends({ fullScreen: isWidthDown(breakpoint, props.width) }, props));
+  }
+
+  WithMobileDialog.propTypes = process.env.NODE_ENV !== "production" ? {
+    width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired
+  } : {};
+
+  return withWidth()(WithMobileDialog);
+};
+
+export default withMobileDialog;

package/es/Divider/Divider.js

@@ -0,0 +1,83 @@
+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 { fade } from '../styles/colorManipulator';
+
+export const styles = theme => ({
+  root: {
+    height: 1,
+    margin: 0, // Reset browser default style.
+    border: 'none',
+    flexShrink: 0,
+    backgroundColor: theme.palette.divider
+  },
+  absolute: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%'
+  },
+  inset: {
+    marginLeft: theme.spacing.unit * 9
+  },
+  light: {
+    backgroundColor: fade(theme.palette.divider, 0.08)
+  }
+});
+
+function Divider(props) {
+  const {
+    absolute,
+    classes,
+    className: classNameProp,
+    component: Component,
+    inset,
+    light
+  } = props,
+        other = _objectWithoutProperties(props, ['absolute', 'classes', 'className', 'component', 'inset', 'light']);
+
+  const className = classNames(classes.root, {
+    [classes.absolute]: absolute,
+    [classes.inset]: inset,
+    [classes.light]: light
+  }, classNameProp);
+
+  return React.createElement(Component, _extends({ className: className }, other));
+}
+
+Divider.propTypes = process.env.NODE_ENV !== "production" ? {
+  absolute: PropTypes.bool,
+  /**
+   * 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 divider will be indented.
+   */
+  inset: PropTypes.bool,
+  /**
+   * If `true`, the divider will have a lighter color.
+   */
+  light: PropTypes.bool
+} : {};
+
+Divider.defaultProps = {
+  absolute: false,
+  component: 'hr',
+  inset: false,
+  light: false
+};
+
+export default withStyles(styles, { name: 'MuiDivider' })(Divider);

package/es/Divider/index.js

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

package/es/Drawer/Drawer.js

@@ -0,0 +1,252 @@
+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 Modal from '../Modal';
+import withStyles from '../styles/withStyles';
+import Slide from '../transitions/Slide';
+import Paper from '../Paper';
+import { capitalize } from '../utils/helpers';
+import { duration } from '../styles/transitions';
+
+function getSlideDirection(anchor) {
+  if (anchor === 'left') {
+    return 'right';
+  } else if (anchor === 'right') {
+    return 'left';
+  } else if (anchor === 'top') {
+    return 'down';
+  }
+
+  // (anchor === 'bottom')
+  return 'up';
+}
+
+export const styles = theme => ({
+  docked: {
+    flex: '0 0 auto'
+  },
+  paper: {
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100vh',
+    flex: '1 0 auto',
+    zIndex: theme.zIndex.drawer,
+    WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+    // temporary style
+    position: 'fixed',
+    top: 0,
+    // We disable the focus ring for mouse, touch and keyboard users.
+    // At some point, it would be better to keep it for keyboard users.
+    // :focus-ring CSS pseudo-class will help.
+    '&:focus': {
+      outline: 'none'
+    }
+  },
+  paperAnchorLeft: {
+    left: 0,
+    right: 'auto'
+  },
+  paperAnchorRight: {
+    left: 'auto',
+    right: 0
+  },
+  paperAnchorTop: {
+    top: 0,
+    left: 0,
+    bottom: 'auto',
+    right: 0,
+    height: 'auto',
+    maxHeight: '100vh'
+  },
+  paperAnchorBottom: {
+    top: 'auto',
+    left: 0,
+    bottom: 0,
+    right: 0,
+    height: 'auto',
+    maxHeight: '100vh'
+  },
+  paperAnchorDockedLeft: {
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  paperAnchorDockedTop: {
+    borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  paperAnchorDockedRight: {
+    borderLeft: `1px solid ${theme.palette.divider}`
+  },
+  paperAnchorDockedBottom: {
+    borderTop: `1px solid ${theme.palette.divider}`
+  },
+  modal: {} // Just here so people can override the style.
+});
+
+class Drawer extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.state = {
+      // Let's assume that the Drawer will always be rendered on user space.
+      // We use that state is order to skip the appear transition during the
+      // initial mount of the component.
+      firstMount: true
+    }, _temp;
+  }
+
+  componentWillReceiveProps() {
+    this.setState({
+      firstMount: false
+    });
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      anchor: anchorProp,
+      children,
+      classes,
+      className,
+      elevation,
+      ModalProps,
+      onClose,
+      open,
+      PaperProps,
+      SlideProps,
+      theme,
+      transitionDuration,
+      variant
+    } = _props,
+          other = _objectWithoutProperties(_props, ['anchor', 'children', 'classes', 'className', 'elevation', 'ModalProps', 'onClose', 'open', 'PaperProps', 'SlideProps', 'theme', 'transitionDuration', 'variant']);
+
+    let anchor = anchorProp;
+    if (theme.direction === 'rtl' && ['left', 'right'].indexOf(anchor) !== -1) {
+      anchor = anchor === 'left' ? 'right' : 'left';
+    }
+
+    const drawer = React.createElement(
+      Paper,
+      _extends({
+        elevation: variant === 'temporary' ? elevation : 0,
+        square: true,
+        className: classNames(classes.paper, classes[`paperAnchor${capitalize(anchor)}`], {
+          [classes[`paperAnchorDocked${capitalize(anchor)}`]]: variant !== 'temporary'
+        })
+      }, PaperProps),
+      children
+    );
+
+    if (variant === 'permanent') {
+      return React.createElement(
+        'div',
+        _extends({ className: classNames(classes.docked, className) }, other),
+        drawer
+      );
+    }
+
+    const slidingDrawer = React.createElement(
+      Slide,
+      _extends({
+        'in': open,
+        direction: getSlideDirection(anchor),
+        timeout: transitionDuration,
+        appear: !this.state.firstMount
+      }, SlideProps),
+      drawer
+    );
+
+    if (variant === 'persistent') {
+      return React.createElement(
+        'div',
+        _extends({ className: classNames(classes.docked, className) }, other),
+        slidingDrawer
+      );
+    }
+
+    // variant === temporary
+    return React.createElement(
+      Modal,
+      _extends({
+        BackdropProps: {
+          transitionDuration
+        },
+        className: classNames(classes.modal, className),
+        open: open,
+        onClose: onClose
+      }, other, ModalProps),
+      slidingDrawer
+    );
+  }
+}
+
+Drawer.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Side from which the drawer will appear.
+   */
+  anchor: PropTypes.oneOf(['left', 'top', 'right', 'bottom']),
+  /**
+   * The contents of the drawer.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The elevation of the drawer.
+   */
+  elevation: PropTypes.number,
+  /**
+   * Properties applied to the `Modal` element.
+   */
+  ModalProps: PropTypes.object,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * If `true`, the drawer is open.
+   */
+  open: PropTypes.bool,
+  /**
+   * Properties applied to the `Paper` element.
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * Properties applied to the `Slide` element.
+   */
+  SlideProps: PropTypes.object,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
+  /**
+   * 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 })]),
+  /**
+   * The type of drawer.
+   */
+  variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
+} : {};
+
+Drawer.defaultProps = {
+  anchor: 'left',
+  elevation: 16,
+  open: false,
+  transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
+  variant: 'temporary' // Mobile first.
+};
+
+export default withStyles(styles, { name: 'MuiDrawer', flip: false, withTheme: true })(Drawer);

package/es/Drawer/index.js

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

package/es/ExpansionPanel/ExpansionPanel.js

@@ -0,0 +1,194 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Paper
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Collapse from '../transitions/Collapse';
+import Paper from '../Paper';
+import withStyles from '../styles/withStyles';
+import { isMuiElement } from '../utils/reactHelpers';
+
+export const styles = theme => {
+  const transition = {
+    duration: theme.transitions.duration.shortest
+  };
+
+  return {
+    root: {
+      position: 'relative',
+      transition: theme.transitions.create(['margin'], transition),
+      '&:before': {
+        position: 'absolute',
+        left: 0,
+        top: -1,
+        right: 0,
+        height: 1,
+        content: '""',
+        opacity: 1,
+        backgroundColor: theme.palette.divider,
+        transition: theme.transitions.create(['opacity', 'background-color'], transition)
+      },
+      '&:first-child': {
+        borderTopLeftRadius: 2,
+        borderTopRightRadius: 2,
+        '&:before': {
+          display: 'none'
+        }
+      },
+      '&:last-child': {
+        borderBottomLeftRadius: 2,
+        borderBottomRightRadius: 2
+      },
+      '&$expanded + &': {
+        '&:before': {
+          display: 'none'
+        }
+      }
+    },
+    expanded: {
+      margin: `${theme.spacing.unit * 2}px 0`,
+      '&:first-child': {
+        marginTop: 0
+      },
+      '&:last-child': {
+        marginBottom: 0
+      },
+      '&:before': {
+        opacity: 0
+      }
+    },
+    disabled: {
+      backgroundColor: theme.palette.action.disabledBackground
+    }
+  };
+};
+
+class ExpansionPanel extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {};
+    this.isControlled = null;
+
+    this.handleChange = event => {
+      const expanded = this.isControlled ? this.props.expanded : this.state.expanded;
+
+      if (!this.isControlled) {
+        this.setState({ expanded: !expanded });
+      }
+
+      if (this.props.onChange) {
+        this.props.onChange(event, !expanded);
+      }
+    };
+
+    this.isControlled = props.expanded != null;
+    if (!this.isControlled) {
+      // not controlled, use internal state
+      this.state.expanded = props.defaultExpanded !== undefined ? props.defaultExpanded : false;
+    }
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      children: childrenProp,
+      classes,
+      className: classNameProp,
+      CollapseProps: CollapsePropsProp,
+      defaultExpanded,
+      disabled,
+      expanded: expandedProp,
+      onChange
+    } = _props,
+          other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'CollapseProps', 'defaultExpanded', 'disabled', 'expanded', 'onChange']);
+    const expanded = this.isControlled ? expandedProp : this.state.expanded;
+
+    const className = classNames(classes.root, {
+      [classes.expanded]: expanded,
+      [classes.disabled]: disabled
+    }, classNameProp);
+
+    let summary = null;
+
+    const children = React.Children.map(childrenProp, child => {
+      if (!React.isValidElement(child)) {
+        return null;
+      }
+
+      if (isMuiElement(child, ['ExpansionPanelSummary'])) {
+        summary = React.cloneElement(child, {
+          disabled,
+          expanded,
+          onChange: this.handleChange
+        });
+        return null;
+      }
+
+      return child;
+    });
+
+    const CollapseProps = !expanded ? {
+      'aria-hidden': 'true'
+    } : null;
+
+    return React.createElement(
+      Paper,
+      _extends({ className: className, elevation: 1, square: true }, other),
+      summary,
+      React.createElement(
+        Collapse,
+        _extends({ 'in': expanded, timeout: 'auto' }, CollapseProps, CollapsePropsProp),
+        children
+      )
+    );
+  }
+}
+
+ExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the expansion panel.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Properties applied to the `Collapse` element.
+   */
+  CollapseProps: PropTypes.object,
+  /**
+   * If `true`, expands the panel by default.
+   */
+  defaultExpanded: PropTypes.bool,
+  /**
+   * If `true`, the panel will be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, expands the panel, otherwise collapse it.
+   * Setting this prop enables control over the panel.
+   */
+  expanded: PropTypes.bool,
+  /**
+   * Callback fired when the expand/collapse state is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {boolean} expanded The `expanded` state of the panel
+   */
+  onChange: PropTypes.func
+} : {};
+
+ExpansionPanel.defaultProps = {
+  defaultExpanded: false,
+  disabled: false
+};
+
+export default withStyles(styles, { name: 'MuiExpansionPanel' })(ExpansionPanel);