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

package/es/Toolbar/Toolbar.js

@@ -0,0 +1,55 @@
+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.mixins.toolbar, {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center'
+  }),
+  gutters: theme.mixins.gutters()
+});
+
+function Toolbar(props) {
+  const { children, classes, className: classNameProp, disableGutters } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'disableGutters']);
+
+  const className = classNames(classes.root, {
+    [classes.gutters]: !disableGutters
+  }, classNameProp);
+
+  return React.createElement(
+    'div',
+    _extends({ className: className }, other),
+    children
+  );
+}
+
+Toolbar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, disables gutter padding.
+   */
+  disableGutters: PropTypes.bool
+} : {};
+
+Toolbar.defaultProps = {
+  disableGutters: false
+};
+
+export default withStyles(styles, { name: 'MuiToolbar' })(Toolbar);

package/es/Toolbar/index.js

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

package/es/Tooltip/Tooltip.js

@@ -0,0 +1,425 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+/* eslint-disable react/no-multi-comp, no-underscore-dangle */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { findDOMNode } from 'react-dom';
+import EventListener from 'react-event-listener';
+import debounce from 'lodash/debounce';
+import warning from 'warning';
+import classNames from 'classnames';
+import { Manager, Target, Popper } from 'react-popper';
+import { capitalize } from '../utils/helpers';
+import RefHolder from '../internal/RefHolder';
+import common from '../colors/common';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+    root: {
+        display: 'inline',
+        flexDirection: 'inherit' // Makes the wrapper more transparent.
+    },
+    popper: {
+        zIndex: theme.zIndex.tooltip
+    },
+    popperClose: {
+        pointerEvents: 'none'
+    },
+    tooltip: {
+        backgroundColor: theme.palette.grey[700],
+        borderRadius: 2,
+        color: common.white,
+        fontFamily: theme.typography.fontFamily,
+        opacity: 0,
+        transform: 'scale(0)',
+        transition: theme.transitions.create(['opacity', 'transform'], {
+            duration: theme.transitions.duration.shortest
+        }),
+        minHeight: 0,
+        padding: theme.spacing.unit,
+        fontSize: theme.typography.pxToRem(14),
+        lineHeight: `${theme.typography.round(16 / 14)}em`,
+        [theme.breakpoints.up('sm')]: {
+            padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
+            fontSize: theme.typography.pxToRem(10),
+            lineHeight: `${theme.typography.round(14 / 10)}em`
+        }
+    },
+    tooltipPlacementLeft: {
+        transformOrigin: 'right center',
+        margin: `0 ${theme.spacing.unit * 3}px`,
+        [theme.breakpoints.up('sm')]: {
+            margin: '0 14px'
+        }
+    },
+    tooltipPlacementRight: {
+        transformOrigin: 'left center',
+        margin: `0 ${theme.spacing.unit * 3}px`,
+        [theme.breakpoints.up('sm')]: {
+            margin: '0 14px'
+        }
+    },
+    tooltipPlacementTop: {
+        transformOrigin: 'center bottom',
+        margin: `${theme.spacing.unit * 3}px 0`,
+        [theme.breakpoints.up('sm')]: {
+            margin: '14px 0'
+        }
+    },
+    tooltipPlacementBottom: {
+        transformOrigin: 'center top',
+        margin: `${theme.spacing.unit * 3}px 0`,
+        [theme.breakpoints.up('sm')]: {
+            margin: '14px 0'
+        }
+    },
+    tooltipOpen: {
+        opacity: 0.9,
+        transform: 'scale(1)'
+    }
+});
+
+function flipPlacement(placement) {
+    switch (placement) {
+        case 'bottom-end':
+            return 'bottom-start';
+        case 'bottom-start':
+            return 'bottom-end';
+        case 'top-end':
+            return 'top-start';
+        case 'top-start':
+            return 'top-end';
+        default:
+            return placement;
+    }
+}
+
+class Tooltip extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {};
+        this.enterTimer = null;
+        this.leaveTimer = null;
+        this.touchTimer = null;
+        this.isControlled = null;
+        this.popper = null;
+        this.children = null;
+        this.ignoreNonTouchEvents = false;
+        this.handleResize = debounce(() => {
+            if (this.popper) {
+                this.popper._popper.scheduleUpdate();
+            }
+        }, 166);
+
+        this.handleRequestOpen = event => {
+            const { children } = this.props;
+            const childrenProps = children.props;
+
+            if (event.type === 'focus' && childrenProps.onFocus) {
+                childrenProps.onFocus(event);
+            }
+
+            if (event.type === 'mouseover' && childrenProps.onMouseOver) {
+                childrenProps.onMouseOver(event);
+            }
+
+            if (this.ignoreNonTouchEvents && event.type !== 'touchstart') {
+                return;
+            }
+
+            clearTimeout(this.leaveTimer);
+            if (this.props.enterDelay > 0) {
+                this.leaveTimer = setTimeout(() => {
+                    this.requestOpen(event);
+                }, this.props.enterDelay);
+            } else {
+                this.requestOpen(event);
+            }
+        };
+
+        this.requestOpen = event => {
+            if (!this.isControlled) {
+                this.setState({ open: true });
+            }
+
+            if (this.props.onOpen) {
+                this.props.onOpen(event, true);
+            }
+        };
+
+        this.handleClose = event => {
+            const { children } = this.props;
+            const childrenProps = children.props;
+
+            if (event.type === 'blur' && childrenProps.onBlur) {
+                childrenProps.onBlur(event);
+            }
+
+            if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
+                childrenProps.onMouseLeave(event);
+            }
+
+            clearTimeout(this.leaveTimer);
+            if (this.props.leaveDelay) {
+                this.leaveTimer = setTimeout(() => {
+                    this.requestClose(event);
+                }, this.props.leaveDelay);
+            } else {
+                this.requestClose(event);
+            }
+        };
+
+        this.requestClose = event => {
+            this.ignoreNonTouchEvents = false;
+
+            if (!this.isControlled) {
+                this.setState({ open: false });
+            }
+
+            if (this.props.onClose) {
+                this.props.onClose(event, false);
+            }
+        };
+
+        this.handleTouchStart = event => {
+            this.ignoreNonTouchEvents = true;
+            const { children } = this.props;
+            const childrenProps = children.props;
+
+            if (childrenProps.onTouchStart) {
+                childrenProps.onTouchStart(event);
+            }
+
+            clearTimeout(this.touchTimer);
+            event.persist();
+            this.touchTimer = setTimeout(() => {
+                this.handleRequestOpen(event);
+            }, 1e3);
+        };
+
+        this.handleTouchEnd = event => {
+            const { children } = this.props;
+            const childrenProps = children.props;
+
+            if (childrenProps.onTouchEnd) {
+                childrenProps.onTouchEnd(event);
+            }
+
+            clearTimeout(this.touchTimer);
+            clearTimeout(this.leaveTimer);
+            event.persist();
+            this.leaveTimer = setTimeout(() => {
+                this.requestClose(event);
+            }, 1500 + this.props.leaveDelay);
+        };
+
+        this.isControlled = props.open != null;
+        if (!this.isControlled) {
+            // not controlled, use internal state
+            this.state.open = false;
+        }
+    }
+
+    componentDidMount() {
+        process.env.NODE_ENV !== "production" ? warning(!this.children || !this.children.disabled || !this.children.tagName.toLowerCase() === 'button', ['Material-UI: you are providing a disabled button children to the Tooltip component.', 'A disabled element do not fire events.', 'But the Tooltip needs to listen to the children element events to display the title.', '', 'Place a `div` over top of the element.'].join('\n')) : void 0;
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.enterTimer);
+        clearTimeout(this.leaveTimer);
+        this.handleResize.cancel();
+    }
+
+    render() {
+        const _props = this.props,
+              {
+            children: childrenProp,
+            classes,
+            className,
+            disableTriggerFocus,
+            disableTriggerHover,
+            disableTriggerTouch,
+            enterDelay,
+            id,
+            leaveDelay,
+            onClose,
+            onOpen,
+            open: openProp,
+            placement: rawPlacement,
+            PopperProps: { PopperClassName } = {},
+            theme,
+            title
+        } = _props,
+              PopperOther = _objectWithoutProperties(_props.PopperProps, ['PopperClassName']),
+              other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'disableTriggerFocus', 'disableTriggerHover', 'disableTriggerTouch', 'enterDelay', 'id', 'leaveDelay', 'onClose', 'onOpen', 'open', 'placement', 'PopperProps', 'theme', 'title']);
+
+        const placement = theme.direction === 'rtl' ? flipPlacement(rawPlacement) : rawPlacement;
+        let open = this.isControlled ? openProp : this.state.open;
+        const childrenProps = {};
+
+        if (title === '') {
+            open = false;
+        }
+
+        childrenProps['aria-describedby'] = id;
+
+        if (!disableTriggerTouch) {
+            childrenProps.onTouchStart = this.handleTouchStart;
+            childrenProps.onTouchEnd = this.handleTouchEnd;
+        }
+
+        if (!disableTriggerHover) {
+            childrenProps.onMouseOver = this.handleRequestOpen;
+            childrenProps.onMouseLeave = this.handleClose;
+        }
+
+        if (!disableTriggerFocus) {
+            childrenProps.onFocus = this.handleRequestOpen;
+            childrenProps.onBlur = this.handleClose;
+        }
+
+        process.env.NODE_ENV !== "production" ? warning(!childrenProp.props.title, ['Material-UI: you have been providing a `title` property to the child of <Tooltip />.', `Remove this title property \`${childrenProp.props.title}\` or the Tooltip component.`].join('\n')) : void 0;
+
+        return React.createElement(
+            EventListener,
+            { target: 'window', onResize: this.handleResize },
+            React.createElement(
+                Manager,
+                _extends({ className: classNames(classes.root, className) }, other),
+                React.createElement(
+                    Target,
+                    null,
+                    ({ targetProps }) => React.createElement(
+                        RefHolder,
+                        {
+                            ref: node => {
+                                this.children = findDOMNode(node);
+                                targetProps.ref(this.children);
+                            }
+                        },
+                        React.cloneElement(childrenProp, childrenProps)
+                    )
+                ),
+                React.createElement(
+                    Popper,
+                    _extends({
+                        placement: placement,
+                        eventsEnabled: open,
+                        className: classNames(classes.popper, { [classes.popperClose]: !open }, PopperClassName)
+                    }, PopperOther, {
+                        ref: node => {
+                            this.popper = node;
+                        }
+                    }),
+                    ({ popperProps, restProps }) => {
+                        const actualPlacement = popperProps['data-placement'] || placement;
+                        return React.createElement(
+                            'div',
+                            _extends({}, popperProps, restProps, {
+                                style: _extends({}, popperProps.style, {
+                                    top: popperProps.style.top || 0,
+                                    left: popperProps.style.left || 0
+                                }, restProps.style)
+                            }),
+                            React.createElement(
+                                'div',
+                                {
+                                    id: id,
+                                    role: 'tooltip',
+                                    'aria-hidden': !open,
+                                    className: classNames(classes.tooltip, { [classes.tooltipOpen]: open }, classes[`tooltipPlacement${capitalize(actualPlacement.split('-')[0])}`])
+                                },
+                                title
+                            )
+                        );
+                    }
+                )
+            )
+        );
+    }
+}
+
+Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Tooltip reference element.
+     */
+    children: PropTypes.element.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * Do not respond to focus events.
+     */
+    disableTriggerFocus: PropTypes.bool,
+    /**
+     * Do not respond to hover events.
+     */
+    disableTriggerHover: PropTypes.bool,
+    /**
+     * Do not respond to long press touch events.
+     */
+    disableTriggerTouch: PropTypes.bool,
+    /**
+     * The number of milliseconds to wait before showing the tooltip.
+     */
+    enterDelay: PropTypes.number,
+    /**
+     * The relationship between the tooltip and the wrapper component is not clear from the DOM.
+     * By providing this property, we can use aria-describedby to solve the accessibility issue.
+     */
+    id: PropTypes.string,
+    /**
+     * The number of milliseconds to wait before hidding the tooltip.
+     */
+    leaveDelay: PropTypes.number,
+    /**
+     * Callback fired when the tooltip requests to be closed.
+     *
+     * @param {object} event The event source of the callback
+     */
+    onClose: PropTypes.func,
+    /**
+     * Callback fired when the tooltip requests to be open.
+     *
+     * @param {object} event The event source of the callback
+     */
+    onOpen: PropTypes.func,
+    /**
+     * If `true`, the tooltip is shown.
+     */
+    open: PropTypes.bool,
+    /**
+     * Tooltip placement
+     */
+    placement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+    /**
+     * Properties applied to the `Popper` element.
+     */
+    PopperProps: PropTypes.object,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object.isRequired,
+    /**
+     * Tooltip title. Zero-length titles string are never displayed.
+     */
+    title: PropTypes.node.isRequired
+} : {};
+
+Tooltip.defaultProps = {
+    disableTriggerFocus: false,
+    disableTriggerHover: false,
+    disableTriggerTouch: false,
+    enterDelay: 0,
+    leaveDelay: 0,
+    placement: 'bottom'
+};
+
+export default withStyles(styles, { name: 'MuiTooltip', withTheme: true })(Tooltip);

package/es/Tooltip/index.js

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

package/es/Typography/Typography.js

@@ -0,0 +1,164 @@
+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 { capitalize } from '../utils/helpers';
+
+export const styles = theme => ({
+  root: {
+    display: 'block',
+    margin: 0
+  },
+  display4: theme.typography.display4,
+  display3: theme.typography.display3,
+  display2: theme.typography.display2,
+  display1: theme.typography.display1,
+  headline: theme.typography.headline,
+  title: theme.typography.title,
+  subheading: theme.typography.subheading,
+  body2: theme.typography.body2,
+  body1: theme.typography.body1,
+  caption: theme.typography.caption,
+  button: theme.typography.button,
+  alignLeft: {
+    textAlign: 'left'
+  },
+  alignCenter: {
+    textAlign: 'center'
+  },
+  alignRight: {
+    textAlign: 'right'
+  },
+  alignJustify: {
+    textAlign: 'justify'
+  },
+  noWrap: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  gutterBottom: {
+    marginBottom: '0.35em'
+  },
+  paragraph: {
+    marginBottom: theme.spacing.unit * 2
+  },
+  colorInherit: {
+    color: 'inherit'
+  },
+  colorPrimary: {
+    color: theme.palette.primary.main
+  },
+  colorSecondary: {
+    color: theme.palette.secondary.main
+  },
+  colorTextSecondary: {
+    color: theme.palette.text.secondary
+  },
+  colorError: {
+    color: theme.palette.error.main
+  }
+});
+
+function Typography(props) {
+  const {
+    align,
+    classes,
+    className: classNameProp,
+    component: componentProp,
+    color,
+    gutterBottom,
+    headlineMapping,
+    noWrap,
+    paragraph,
+    variant
+  } = props,
+        other = _objectWithoutProperties(props, ['align', 'classes', 'className', 'component', 'color', 'gutterBottom', 'headlineMapping', 'noWrap', 'paragraph', 'variant']);
+
+  const className = classNames(classes.root, classes[variant], {
+    [classes[`color${capitalize(color)}`]]: color !== 'default',
+    [classes.noWrap]: noWrap,
+    [classes.gutterBottom]: gutterBottom,
+    [classes.paragraph]: paragraph,
+    [classes[`align${capitalize(align)}`]]: align !== 'inherit'
+  }, classNameProp);
+
+  const Component = componentProp || (paragraph ? 'p' : headlineMapping[variant]) || 'span';
+
+  return React.createElement(Component, _extends({ className: className }, other));
+}
+
+Typography.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Set the text-align on the component.
+   */
+  align: PropTypes.oneOf(['inherit', 'left', 'center', 'right', 'justify']),
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  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', 'textSecondary', 'secondary', 'error', 'default']),
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * By default, it maps the variant to a good default headline component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * If `true`, the text will have a bottom margin.
+   */
+  gutterBottom: PropTypes.bool,
+  /**
+   * We are empirically mapping the variant property to a range of different DOM element types.
+   * For instance, h1 to h6. If you wish to change that mapping, you can provide your own.
+   * Alternatively, you can use the `component` property.
+   */
+  headlineMapping: PropTypes.object,
+  /**
+   * If `true`, the text will not wrap, but instead will truncate with an ellipsis.
+   */
+  noWrap: PropTypes.bool,
+  /**
+   * If `true`, the text will have a bottom margin.
+   */
+  paragraph: PropTypes.bool,
+  /**
+   * Applies the theme typography styles.
+   */
+  variant: PropTypes.oneOf(['display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'])
+} : {};
+
+Typography.defaultProps = {
+  align: 'inherit',
+  color: 'default',
+  gutterBottom: false,
+  headlineMapping: {
+    display4: 'h1',
+    display3: 'h1',
+    display2: 'h1',
+    display1: 'h1',
+    headline: 'h1',
+    title: 'h2',
+    subheading: 'h3',
+    body2: 'aside',
+    body1: 'p'
+  },
+  noWrap: false,
+  paragraph: false,
+  variant: 'body1'
+};
+
+export default withStyles(styles, { name: 'MuiTypography' })(Typography);

package/es/Typography/index.js

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

package/es/colors/amber.js

@@ -0,0 +1,18 @@
+const amber = {
+  50: '#fff8e1',
+  100: '#ffecb3',
+  200: '#ffe082',
+  300: '#ffd54f',
+  400: '#ffca28',
+  500: '#ffc107',
+  600: '#ffb300',
+  700: '#ffa000',
+  800: '#ff8f00',
+  900: '#ff6f00',
+  A100: '#ffe57f',
+  A200: '#ffd740',
+  A400: '#ffc400',
+  A700: '#ffab00'
+};
+
+export default amber;

package/es/colors/blue.js

@@ -0,0 +1,18 @@
+const blue = {
+  50: '#e3f2fd',
+  100: '#bbdefb',
+  200: '#90caf9',
+  300: '#64b5f6',
+  400: '#42a5f5',
+  500: '#2196f3',
+  600: '#1e88e5',
+  700: '#1976d2',
+  800: '#1565c0',
+  900: '#0d47a1',
+  A100: '#82b1ff',
+  A200: '#448aff',
+  A400: '#2979ff',
+  A700: '#2962ff'
+};
+
+export default blue;