@hipay/hipay-material-ui 1.0.0-beta.18 → 1.0.0-beta.2

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);

package/es/HiBreadcrumb/HiStepLabel.js

@@ -1,197 +0,0 @@
-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';
-import HiStepIcon from './HiStepIcon';
-import HiPin from '../HiPins';
-
-export const styles = theme => ({
-    root: {
-        display: 'flex',
-        alignItems: 'center',
-        marginTop: -11,
-        marginBottom: -5
-    },
-    frontRoot: {
-        marginTop: -12,
-        marginBottom: -7
-    },
-    frontDarkRoot: {
-        marginTop: -13,
-        marginBottom: -6
-    },
-    hipin: {
-        marginLeft: 0
-    },
-    label: _extends({
-        display: 'inline-block',
-        marginLeft: 4,
-        fontWeight: theme.typography.fontWeightRegular,
-        color: theme.palette.neutral.normal,
-        marginBottom: -4,
-        '&:hover': {
-            cursor: 'pointer'
-        }
-    }, theme.typography.body3),
-    labelContainer: {
-        marginBottom: 4
-    },
-    largeLabelContainer: {
-        maxWidth: 300
-    },
-    shortLabelContainer: {
-        maxWidth: 160
-    },
-    frontLabel: {
-        fontSize: 18,
-        fontWeight: theme.typography.fontWeightLight,
-        marginLeft: 11
-    },
-    validated: {
-        color: theme.palette.status[116]
-    },
-    refused: {
-        color: theme.palette.negative.normal
-    },
-    active: {
-        color: '#00ADE9'
-    },
-    activeStep: {
-        fontWeight: theme.typography.fontWeightMedium
-    },
-    warning: {
-        color: theme.palette.middle.normal
-    },
-    light: {
-        color: '#FFFFFF'
-    },
-    pin: {
-        marginLeft: 4
-    },
-    shortEllipsis: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        maxWidth: 51
-    },
-    longEllipsis: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        maxWidth: 90
-    }
-});
-
-class HiStepLabel extends React.PureComponent {
-
-    render() {
-        const _props = this.props,
-              {
-            active,
-            children,
-            classes,
-            className: classNameProp,
-            notificationNumber,
-            status,
-            type
-        } = _props,
-              other = _objectWithoutProperties(_props, ['active', 'children', 'classes', 'className', 'notificationNumber', 'status', 'type']);
-
-        return React.createElement(
-            'span',
-            _extends({
-                className: classNames(classes.root, classNameProp, {
-                    [classes.frontRoot]: type === 'front-light',
-                    [classes.frontDarkRoot]: type === 'front-dark'
-                })
-            }, other),
-            React.createElement(
-                'span',
-                { className: classes.iconContainer },
-                React.createElement(HiStepIcon, { active: active, status: status, type: type })
-            ),
-            React.createElement(
-                'span',
-                {
-                    className: classNames(classes.labelContainer, {
-                        [classes.largeLabelContainer]: type !== 'back',
-                        [classes.shortLabelContainer]: type === 'back'
-                    })
-                },
-                React.createElement(
-                    'div',
-                    {
-                        className: classNames(classes.label, {
-                            [classes.validated]: status === 'validated',
-                            [classes.refused]: status === 'refused',
-                            [classes.warning]: status === 'warning',
-                            [classes.active]: status === 'active',
-                            [classes.light]: type === 'front-light',
-                            [classes.activeStep]: active,
-                            [classes.frontLabel]: type !== 'back',
-                            [classes.shortEllipsis]: notificationNumber > 0,
-                            [classes.longEllipsis]: notificationNumber === 0 && type === 'back'
-                        })
-                    },
-                    children
-                ),
-                notificationNumber > 0 && React.createElement(
-                    'span',
-                    { className: classes.pin },
-                    React.createElement(
-                        HiPin,
-                        {
-                            color: this.props.theme.palette.business.primary.normal,
-                            className: classes.hipin
-                        },
-                        notificationNumber
-                    )
-                )
-            )
-        );
-    }
-}
-
-HiStepLabel.defaultProps = {
-    active: false,
-    children: '',
-    notificationNumber: 0,
-    status: 'unreviewed',
-    type: 'back'
-};
-HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * @ignore
-     * Sets the step as active. Is passed to child components.
-     */
-    active: PropTypes.bool,
-    /**
-     * In most cases will simply be a string containing a title for the label.
-     */
-    children: PropTypes.node,
-    /**
-     * Custom styles for component.
-     */
-    classes: PropTypes.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-    /**
-     * The value to be displayed in the HiPin on the right of the label
-     */
-    notificationNumber: PropTypes.number,
-    /**
-     * 'Unreviewed', 'refused', 'validated' et 'warning' sont les statuts pour tous les types de breadcrumb. 'active' est spécifique au Front dark
-     */
-    status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning', 'active']),
-    /**
-     * The Breadcrumb type
-     */
-    type: PropTypes.oneOf(['back', 'front-light', 'front-dark'])
-} : {};
-export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/es/HiBreadcrumb/HiStepper.js

@@ -1,46 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-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: {
-        width: 340
-    }
-});
-
-class HiStepper extends React.PureComponent {
-
-    render() {
-        const { activeStep, children, classes } = this.props;
-
-        const childrenArray = React.Children.toArray(children.props.children);
-
-        const steps = childrenArray.map((step, index) => {
-            return React.cloneElement(step, _extends({ index, active: activeStep === index }, step.props));
-        });
-
-        return React.createElement(
-            'div',
-            { className: classes.root },
-            steps
-        );
-    }
-}
-
-HiStepper.defaultProps = {
-    activeStep: 0
-};
-HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Set the active step (zero based index).
-     */
-    activeStep: PropTypes.number,
-    /**
-     * Two or more `<Step />` components.
-     */
-    children: PropTypes.node.isRequired
-} : {};
-export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);

package/es/HiBreadcrumb/index.js

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

package/es/HiDotsStepper/HiDot.js

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import withStyles from '../styles/withStyles';
-import ButtonBase from '../ButtonBase';
-
-export const styles = theme => ({
-    dot: {
-        backgroundColor: theme.palette.dot.neutral,
-        borderRadius: '100%',
-        width: 12,
-        height: 12,
-        '&:hover': {
-            transform: 'scale(1.2)'
-        },
-        marginLeft: 12
-    },
-    dotActive: {
-        marginTop: 4,
-        marginLeft: 4,
-        '&:hover': {
-            transform: 'scale(1)'
-        }
-    },
-    dotValidated: {
-        backgroundColor: theme.palette.status[116]
-    },
-    dotRefused: {
-        backgroundColor: theme.palette.error.main
-    },
-    dotAround: {
-        backgroundColor: 'transparent',
-        borderRadius: '100%',
-        width: 24,
-        height: 24,
-        marginLeft: 6,
-        border: '2px solid ' + theme.palette.dot.neutral,
-        '&:hover': {
-            transform: 'scale(1.2)'
-        }
-    },
-    dotAroundValidated: {
-        border: '2px solid ' + theme.palette.status[116]
-    },
-    dotAroundRefused: {
-        border: '2px solid ' + theme.palette.error.main
-    }
-});
-
-class HiDot extends React.PureComponent {
-
-    render() {
-        const { active, status, classes, onClick } = this.props;
-
-        const dotAroundClass = classnames(classes.dotAround, {
-            [classes.dotAroundValidated]: status === 'validated',
-            [classes.dotAroundRefused]: status === 'refused'
-        });
-
-        const dotClassName = classnames(classes.dot, {
-            [classes.dotActive]: active,
-            [classes.dotRefused]: status === 'refused',
-            [classes.dotValidated]: status === 'validated'
-        });
-
-        return React.createElement(
-            ButtonBase,
-            { disableRipple: true, role: 'button', onClick: onClick },
-            active ? React.createElement(
-                'div',
-                { className: dotAroundClass },
-                React.createElement('div', { className: dotClassName })
-            ) : React.createElement('div', { className: dotClassName })
-        );
-    }
-}
-
-HiDot.defaultProps = {
-    active: false,
-    status: 'unreviewed'
-};
-HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
-    active: PropTypes.bool,
-    classes: PropTypes.object,
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    status: PropTypes.oneOf(['refused', 'validated', 'unreviewed'])
-} : {};
-export default withStyles(styles, { name: 'MuiHiDot' })(HiDot);

package/es/HiDotsStepper/HiDotsStepper.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
-import HiDot from './HiDot';
-
-export const styles = theme => ({
-    dotStepper: {
-        width: '100%',
-        maxWidth: 200,
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'nowrap',
-        justifyContent: 'center',
-        alignItems: 'center'
-    }
-});
-
-class HiDotsStepper extends React.PureComponent {
-
-    constructor() {
-        super();
-
-        this.handleClick = activeStep => () => {
-            this.props.onChange(activeStep);
-        };
-
-        this.handleNavigation = activeStep => e => {
-            let nextStep = activeStep;
-            const { steps } = this.props;
-
-            if (e.key === 'ArrowLeft') nextStep -= 1;
-            if (e.key === 'ArrowRight') nextStep += 1;
-
-            nextStep = (nextStep + steps.length) % steps.length;
-
-            // Permet la navigation d'un Dot au suivant / précédent
-            document.querySelector(`div[tabIndex="${nextStep}"]`).focus();
-
-            this.props.onChange(nextStep);
-        };
-
-        this.handleClick = this.handleClick.bind(this);
-        this.handleNavigation = this.handleNavigation.bind(this);
-    }
-
-    render() {
-        const { classes, activeStep, steps } = this.props;
-
-        const listDots = steps.map((step, idx) => {
-            const { id, status } = step;
-            return React.createElement(
-                'div',
-                {
-                    key: id,
-                    tabIndex: id,
-                    className: classes.dotContainer,
-                    role: 'navigation',
-                    onKeyDown: this.handleNavigation(idx)
-                },
-                React.createElement(HiDot, {
-                    status: status,
-                    active: idx === activeStep,
-                    onClick: this.handleClick(idx)
-                })
-            );
-        });
-
-        return React.createElement(
-            'div',
-            { className: classes.dotStepper },
-            listDots
-        );
-    }
-}
-
-HiDotsStepper.propTypes = process.env.NODE_ENV !== "production" ? {
-    activeStep: PropTypes.number.isRequired,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    steps: PropTypes.array.isRequired
-} : {};
-export default withStyles(styles, { name: 'MuiHiDotsStepper' })(HiDotsStepper);

package/es/HiDotsStepper/index.js

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