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

package/es/HiBreadcrumb/HiStep.js

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,197 @@
+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

@@ -0,0 +1,46 @@
+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

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

package/es/HiCheckbox/HiCheckbox.js

@@ -12,7 +12,10 @@ import MinusBox from 'mdi-material-ui/MinusBox';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
-    root: {},
+    root: {
+        marginRight: 12,
+        marginLeft: 12
+    },
     checked: {
         color: theme.palette.business.primary.normal
     },