@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.4

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '../styles';
-import HiStepper from './HiStepper';
-import HiStepLabel from './HiStepLabel';
-import HiStep from './HiStep';
-
-export const styles = theme => ({});
-
-class HiBreadcrumb extends React.PureComponent {
-    constructor(...args) {
-        var _temp;
-
-        return _temp = super(...args), this.handleStep = idx => () => {
-            this.props.handleStep(idx);
-        }, _temp;
-    }
-
-    render() {
-        const { activeStep, steps, type } = this.props;
-
-        return React.createElement(
-            HiStepper,
-            { activeStep: activeStep, type: type },
-            React.createElement(
-                'div',
-                null,
-                steps.map((step, index) => {
-                    const validConnector = step.status === 'validated' && index < steps.length - 1 && (steps[index + 1].status === 'validated' || steps[index + 1].status === 'active');
-
-                    return React.createElement(
-                        HiStep,
-                        {
-                            content: step.content,
-                            key: step.id,
-                            onClick: this.handleStep(index),
-                            isLast: index === steps.length - 1,
-                            validConnector: validConnector,
-                            type: type,
-                            steps: steps
-                        },
-                        React.createElement(
-                            HiStepLabel,
-                            {
-                                active: activeStep === index,
-                                status: step.status,
-                                notificationNumber: step.notificationNumber,
-                                type: type
-                            },
-                            step.label
-                        )
-                    );
-                })
-            )
-        );
-    }
-}
-
-HiBreadcrumb.defaultProps = {
-    activeStep: 0,
-    type: 'back'
-};
-HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Which step is the active one
-     */
-    activeStep: PropTypes.number,
-    /**
-     * The collection of steps of the breadcrumb.
-     */
-    steps: PropTypes.array.isRequired,
-    /**
-     * The callback function handling the flow from one step to another
-     */
-    handleStep: PropTypes.func,
-    /**
-     * The Breadcrumb type
-     */
-    type: PropTypes.oneOf(['back', 'front-dark', 'front-light'])
-} : {};
-export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);

package/es/HiBreadcrumb/HiStep.js

@@ -1,94 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '../styles';
-import classNames from 'classnames';
-import HiStepConnector from './HiStepConnector';
-import HiStepContent from './HiStepContent';
-
-export const styles = theme => ({
-    lastStep: {
-        marginBottom: 40
-    }
-});
-
-class HiStep extends React.PureComponent {
-
-    render() {
-        const {
-            active,
-            children,
-            classes,
-            content,
-            isLast,
-            onClick,
-            steps,
-            type,
-            validConnector
-        } = this.props;
-
-        return React.createElement(
-            'div',
-            {
-                className: classNames({ [classes.lastStep]: isLast && type !== 'back' }),
-                onClick: onClick
-            },
-            React.Children.map(children, child => React.cloneElement(child, _extends({
-                active
-            }, child.props))),
-            !isLast && React.createElement(HiStepConnector, {
-                validConnector: validConnector,
-                type: type,
-                steps: steps,
-                active: active,
-                content: content
-            }),
-            content && active && isLast && type === 'front-light' && React.createElement(HiStepContent, { content: content, isLast: true })
-        );
-    }
-}
-
-HiStep.defaultProps = {
-    active: false,
-    content: React.createElement('span', null),
-    isLast: false,
-    steps: [],
-    type: 'back',
-    validConnector: false
-};
-HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Sets the step as active. Is passed to child components.
-     */
-    active: PropTypes.bool,
-    /**
-     * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
-     */
-    children: PropTypes.node,
-    /**
-     * The content to be displayed in the case of front-light breadcrumb
-     */
-    content: PropTypes.node,
-    /**
-     * @ignore
-     * Used to know which step is the last, to not put a HiStepConnector
-     */
-    isLast: PropTypes.bool,
-    /**
-     * Callback on step container click
-     */
-    onClick: PropTypes.func,
-    /**
-     * The collection of steps of the breadcrumb.
-     */
-    steps: PropTypes.array,
-    /**
-     * @ignore
-     */
-    type: PropTypes.oneOf(['back', 'front-light', 'front-dark']),
-    /**
-     * @ignore
-     */
-    validConnector: PropTypes.bool
-} : {};
-export default withStyles(styles, { name: 'MuiHiStep' })(HiStep);

package/es/HiBreadcrumb/HiStepConnector.js

@@ -1,143 +0,0 @@
-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';
-import HiStepContent from './HiStepContent';
-
-export const styles = theme => ({
-    root: {
-        display: 'flex',
-        flex: '1 1 auto',
-        marginLeft: 13, // half icon
-        padding: `0 0 ${theme.spacing.unit}px`
-    },
-    line: {
-        display: 'block',
-        borderColor: theme.palette.grey[600],
-        borderLeftStyle: 'solid',
-        borderLeftWidth: 2,
-        minHeight: theme.spacing.unit * 3,
-        height: 40
-    },
-    greenLine: {
-        borderColor: theme.palette.status[116]
-    },
-    lightLine: {
-        borderColor: '#FFFFFF'
-    }
-});
-
-/**
- * @ignore - internal component.
- */
-class HiStepConnector extends React.PureComponent {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            width: 1280,
-            height: 800
-        };
-
-        this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
-    }
-
-    componentDidMount() {
-        this.updateWindowDimensions();
-        window.addEventListener('resize', this.updateWindowDimensions);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.updateWindowDimensions);
-    }
-
-    updateWindowDimensions() {
-        this.setState({ width: window.innerWidth, height: window.innerHeight });
-    }
-
-    render() {
-        const _props = this.props,
-              {
-            active,
-            className: classNameProp,
-            classes,
-            content,
-            steps,
-            type,
-            validConnector
-        } = _props,
-              other = _objectWithoutProperties(_props, ['active', 'className', 'classes', 'content', 'steps', 'type', 'validConnector']);
-
-        const { width, height } = this.state;
-
-        const className = classNames(classes.root, classNameProp);
-        const lineClassName = classNames(classes.line, {
-            [classes.greenLine]: validConnector,
-            [classes.lightLine]: type === 'front-light'
-        });
-
-        let lineHeight = 40;
-
-        if (type !== 'back') {
-            // Pour un breadcrumb Front, la tige du connector de la step active doit s'allonger en fonction de la hauteur de la page et du nombre de steps
-            lineHeight = height - 226 - 58 * (steps.length - 1);
-            if (lineHeight < 202) {
-                lineHeight = 202;
-            }
-        }
-
-        let heightStyle = {};
-        if (active) {
-            heightStyle = { height: lineHeight };
-        }
-
-        return React.createElement(
-            'div',
-            _extends({ className: className }, other),
-            React.createElement('span', { className: lineClassName, style: heightStyle }),
-            type === 'front-light' && active && content && React.createElement(HiStepContent, { content: content })
-        );
-    }
-}
-
-HiStepConnector.defaultProps = {
-    active: false,
-    content: React.createElement('span', null),
-    steps: [],
-    type: 'back',
-    validConnector: false
-};
-HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Used to know if the step it is connected to is active, and if so possibly adapt its height
-     */
-    active: PropTypes.bool,
-    /**
-     * Useful to extend the style applied to the component.
-     */
-    classes: PropTypes.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-    /**
-     * The content to be displayed in the case of front-light breadcrumb
-     */
-    content: PropTypes.node,
-    /**
-     * The collection of steps of the breadcrumb.
-     */
-    steps: PropTypes.array,
-    /**
-     * specifies which type of breadcrumb is used
-     */
-    type: PropTypes.oneOf(['back', 'front-dark', 'front-light']),
-    /**
-     * Specifies if the connector should be displayed in green or its default color
-     */
-    validConnector: PropTypes.bool
-} : {};
-export default withStyles(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);

package/es/HiBreadcrumb/HiStepContent.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '../styles';
-import Paper from '../Paper';
-
-export const styles = theme => ({
-    root: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    contentContainer: {
-        height: 'fit-content',
-        maxHeight: 300,
-        maxWidth: 323,
-        marginTop: 35,
-        marginLeft: 24,
-        padding: 24,
-        textAlign: 'center',
-        fontFamily: 'Roboto, Regular, sans-serif',
-        color: '#737373',
-        fontSize: 14,
-        lineHeight: '20px',
-        borderRadius: 3
-    },
-    lastStep: {
-        marginLeft: 0,
-        marginTop: 20
-    }
-});
-
-class HiStepContent extends React.PureComponent {
-
-    render() {
-        const { content, classes, isLast } = this.props;
-
-        return React.createElement(
-            Paper,
-            {
-                square: true,
-                className: classNames(classes.contentContainer, {
-                    [classes.lastStep]: isLast
-                })
-            },
-            React.createElement(
-                'div',
-                { className: classes.root },
-                content
-            )
-        );
-    }
-}
-
-HiStepContent.defaultProps = {
-    content: React.createElement('span', null),
-    isLast: false
-};
-HiStepContent.propTypes = process.env.NODE_ENV !== "production" ? {
-    content: PropTypes.node,
-    isLast: PropTypes.bool
-} : {};
-export default withStyles(styles, { name: 'MuiHiStepContent' })(HiStepContent);

package/es/HiBreadcrumb/HiStepIcon.js

@@ -1,149 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '../styles';
-
-export const styles = theme => ({
-    circle: {
-        borderRadius: '50%',
-        width: 16,
-        height: 16,
-        border: 'solid 2px ' + theme.palette.neutral.normal,
-        marginLeft: 6,
-        display: 'inline-block'
-    },
-    dotAround: {
-        border: '2px solid ' + theme.palette.neutral.normal,
-        backgroundColor: 'transparent',
-        borderRadius: '100%',
-        width: 16,
-        height: 16,
-        marginLeft: 6,
-        '&:hover': {
-            transform: 'scale(1.2)'
-        }
-    },
-    dot: {
-        backgroundColor: theme.palette.neutral.normal,
-        borderRadius: '100%',
-        width: 6,
-        height: 6,
-        '&:hover': {
-            transform: 'scale(1.2)'
-        },
-        marginLeft: 8
-    },
-    activeStep: {
-        marginTop: 3,
-        marginLeft: 3,
-        width: 6,
-        height: 6,
-        '&:hover': {
-            transform: 'scale(1)'
-        }
-    },
-    dotValidated: {
-        backgroundColor: theme.palette.status[116],
-        border: '2px solid ' + theme.palette.status[116]
-    },
-    dotRefused: {
-        backgroundColor: theme.palette.error.main,
-        border: '2px solid ' + theme.palette.error.main
-    },
-    dotWarning: {
-        backgroundColor: theme.palette.middle.normal,
-        border: '2px solid ' + theme.palette.middle.normal
-    },
-    dotActive: {
-        backgroundColor: '#00ADE9',
-        border: '2px solid ' + '#00ADE9'
-    },
-    dotLight: {
-        backgroundColor: '#FFFFFF',
-        border: '2px solid ' + '#FFFFFF'
-    },
-    validated: {
-        border: 'solid 2px ' + theme.palette.status[116]
-    },
-    refused: {
-        border: 'solid 2px ' + theme.palette.negative.normal
-    },
-    warning: {
-        border: 'solid 2px ' + theme.palette.middle.normal
-    },
-    active: {
-        border: 'solid 2px #00ADE9'
-    },
-    light: {
-        border: 'solid 2px ' + '#FFFFFF'
-    }
-});
-
-class HiStepIcon extends React.PureComponent {
-
-    render() {
-        const { active, classes, status, type } = this.props;
-
-        let dotAroundClass = classNames(classes.dotAround, {
-            [classes.validated]: status === 'validated',
-            [classes.refused]: status === 'refused',
-            [classes.warning]: status === 'warning',
-            [classes.active]: status === 'active',
-            [classes.light]: type === 'front-light'
-        });
-
-        let innerDotClass = classNames(classes.dot, {
-            [classes.activeStep]: active,
-            [classes.dotValidated]: status === 'validated',
-            [classes.dotRefused]: status === 'refused',
-            [classes.dotWarning]: status === 'warning',
-            [classes.dotActive]: status === 'active',
-            [classes.dotLight]: type === 'front-light'
-        });
-
-        let dotClassName = classNames(classes.circle, {
-            [classes.refused]: status === 'refused',
-            [classes.validated]: status === 'validated',
-            [classes.warning]: status === 'warning',
-            [classes.active]: status === 'active',
-            [classes.light]: type === 'front-light'
-        });
-
-        return React.createElement(
-            'div',
-            null,
-            active && React.createElement(
-                'div',
-                { className: dotAroundClass },
-                React.createElement('div', { className: innerDotClass })
-            ),
-            !active && React.createElement('div', { className: dotClassName })
-        );
-    }
-}
-
-HiStepIcon.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    type: 'back',
-    classes: {}
-};
-HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Whether this step is active.
-     */
-    active: PropTypes.bool,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object.isRequired,
-    /**
-     * The type of Breadcrumb used
-     */
-    type: PropTypes.oneOf(['back', 'front-light', 'front-dark']),
-    /**
-     * The status of the step in case of back or front-dark type Breadcrumb
-     */
-    status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed', 'active'])
-} : {};
-export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);