@hipay/hipay-material-ui 1.0.0-beta.6 → 1.0.0-beta.8

package/es/HiAlertModal/HiAlertModal.js

@@ -0,0 +1,189 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Dialog
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Dialog, { DialogActions, DialogContent, DialogContentText, DialogTitle } from 'material-ui/Dialog';
+import { withStyles } from '../styles';
+import HiButton from '../HiButton';
+
+export const styles = theme => ({
+    classContent: {
+        fontSize: 14,
+        lineHeight: '24px',
+        color: '#484848'
+    },
+    classPaper: {
+        maxWidth: 300
+    },
+    classCancelButton: {
+        float: 'right'
+    },
+    classTitle: {
+        fontSize: 20,
+        fontFamily: theme.typography.fontFamily,
+        fontWeight: theme.typography.fontWeightLight,
+        lineHeight: '24px'
+    },
+    classAction: {
+        display: 'inline-block'
+    },
+    classDialogRoot: {
+        backgroundColor: 'rgba(0, 0, 0, 0.28)'
+    }
+});
+
+/**
+ * Pop up d'alert
+ */
+class HiAlertModal extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.handleClickCancel = () => {
+            if (this.props.onCancelClick) {
+                this.props.onCancelClick();
+            }
+        };
+
+        this.handleClickSubmit = () => {
+            if (this.props.onSubmitClick) {
+                this.props.onSubmitClick();
+            }
+        };
+
+        this.handleOnClose = () => {
+            if (this.props.onClose) {
+                this.props.onClose();
+            }
+        };
+
+        this.handleOnClose = this.handleOnClose.bind(this);
+        this.handleClickCancel = this.handleClickCancel.bind(this);
+        this.handleClickSubmit = this.handleClickSubmit.bind(this);
+    }
+
+    // Appelé au clic du bouton d'annulation
+
+
+    // Appelé au clic du bouton de soumission
+
+
+    // Appelé si clic en dehors de la pop up
+
+
+    // Render
+    render() {
+        const _props = this.props,
+              {
+            labelSubmitButton,
+            labelCancelButton,
+            content,
+            title,
+            positive,
+            negative,
+            open,
+            onCancelClick,
+            onSubmitClick,
+            classes
+        } = _props,
+              props = _objectWithoutProperties(_props, ['labelSubmitButton', 'labelCancelButton', 'content', 'title', 'positive', 'negative', 'open', 'onCancelClick', 'onSubmitClick', 'classes']);
+        return React.createElement(
+            Dialog,
+            _extends({
+                open: open,
+                onClose: this.handleOnClose,
+                classes: { paper: classes.classPaper, root: classes.classDialogRoot }
+            }, props),
+            React.createElement(
+                DialogTitle,
+                { disableTypography: true, classes: { root: classes.classTitle } },
+                title
+            ),
+            React.createElement(
+                DialogContent,
+                null,
+                React.createElement(
+                    DialogContentText,
+                    { classes: { root: classes.classContent } },
+                    content
+                )
+            ),
+            React.createElement(
+                DialogActions,
+                { classes: { root: classes.classAction } },
+                React.createElement(
+                    HiButton,
+                    {
+                        onClick: this.handleClickSubmit,
+                        positive: positive,
+                        negative: negative
+                    },
+                    labelSubmitButton
+                ),
+                React.createElement(
+                    HiButton,
+                    {
+                        classes: { root: classes.classCancelButton },
+                        onClick: this.handleClickCancel
+                    },
+                    labelCancelButton
+                )
+            )
+        );
+    }
+}
+
+HiAlertModal.defaultProps = {
+    negative: false,
+    positive: false
+};
+HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Texte contenu dans la modal
+     */
+    content: PropTypes.string,
+    /**
+     * Texte sur le bouton d'annulation
+     */
+    labelCancelButton: PropTypes.string,
+    /**
+     * Texte sur le bouton de soumission
+     */
+    labelSubmitButton: PropTypes.string,
+    /**
+     * Colore le bouton de soumission en rouge
+     */
+    negative: PropTypes.bool,
+    /**
+     * Fonction de callback appelée au clic sur le bouton d'annulation
+     */
+    onCancelClick: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic en dehors de la pop up
+     */
+    onClose: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic sur le bouton de soumission
+     */
+    onSubmitClick: PropTypes.func,
+    /**
+     * pop up ouverte ou pas
+     */
+    open: PropTypes.bool.isRequired,
+    /**
+     * Colore le bouton de soumission en vert
+     */
+    positive: PropTypes.bool,
+    /**
+     * Titre de la modal
+     */
+    title: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);

package/es/HiAlertModal/index.js

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

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -0,0 +1,73 @@
+import _extends from 'babel-runtime/helpers/extends';
+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 => ({
+    label: _extends({
+        display: 'inline-block',
+        marginLeft: 12,
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.neutral.normal
+    }, theme.typography.body3),
+    active: {
+        fontWeight: theme.typography.fontWeightMedium
+    }
+});
+
+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 } = this.props;
+
+        return React.createElement(
+            HiStepper,
+            { activeStep: activeStep },
+            React.createElement(
+                'div',
+                null,
+                steps.map((step, index) => {
+                    const validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
+                    return React.createElement(
+                        HiStep,
+                        {
+                            key: step.id,
+                            onClick: this.handleStep(index),
+                            isLast: index === steps.length - 1,
+                            validConnector: validConnector
+                        },
+                        React.createElement(
+                            HiStepLabel,
+                            {
+                                active: activeStep === index,
+                                status: step.status,
+                                notificationNumber: step.notificationNumber
+                            },
+                            step.label
+                        )
+                    );
+                })
+            )
+        );
+    }
+}
+
+HiBreadcrumb.defaultProps = {
+    activeStep: 0
+};
+HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
+    activeStep: PropTypes.number,
+    steps: PropTypes.array.isRequired,
+    handleStep: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);

package/es/HiBreadcrumb/HiStep.js

@@ -0,0 +1,93 @@
+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 HiStepConnector from './HiStepConnector';
+
+export const styles = theme => ({
+    root: {},
+    horizontal: {
+        paddingLeft: theme.spacing.unit,
+        paddingRight: theme.spacing.unit,
+        '&:first-child': {
+            paddingLeft: 0
+        },
+        '&:last-child': {
+            paddingRight: 0
+        }
+    },
+    vertical: {}
+});
+
+function HiStep(props) {
+    const {
+        active,
+        children,
+        classes,
+        className: classNameProp,
+        index,
+        isLast,
+        orientation,
+        validConnector
+    } = props,
+          other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'index', 'isLast', 'orientation', 'validConnector']);
+
+    const className = classNames(classes.root, classes[orientation], classNameProp);
+
+    return React.createElement(
+        'div',
+        _extends({ className: className }, other),
+        React.Children.map(children, child => React.cloneElement(child, _extends({
+            active,
+            icon: index + 1,
+            orientation
+        }, child.props))),
+        !isLast && React.createElement(HiStepConnector, { orientation: 'vertical', validConnector: validConnector })
+    );
+}
+
+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,
+    /**
+     * @ignore
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * @ignore
+     * Used internally for numbering.
+     */
+    index: PropTypes.number,
+    /**
+     * @ignore
+     * Used to know which step is the last, to not put a HiStepConnector
+     */
+    isLast: PropTypes.bool,
+    /**
+     * @ignore
+     */
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    /**
+     * @ignore
+     */
+    validConnector: PropTypes.bool
+} : {};
+
+HiStep.defaultProps = {
+    active: false,
+    validConnector: false
+};
+
+export default withStyles(styles, { name: 'MuiStep' })(HiStep);

package/es/HiBreadcrumb/HiStepConnector.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';
+
+export const styles = theme => ({
+    root: {
+        flex: '1 1 auto'
+    },
+    vertical: {
+        marginLeft: 13, // half icon
+        padding: `0 0 ${theme.spacing.unit}px`
+    },
+    line: {
+        display: 'block',
+        borderColor: theme.palette.grey[600]
+    },
+    lineHorizontal: {
+        borderTopStyle: 'solid',
+        borderTopWidth: 1
+    },
+    lineVertical: {
+        borderLeftStyle: 'solid',
+        borderLeftWidth: 2,
+        minHeight: theme.spacing.unit * 3,
+        height: 37
+    },
+    lineVerticalGreen: {
+        borderColor: theme.palette.status[116]
+    }
+});
+
+/**
+ * @ignore - internal component.
+ */
+class HiStepConnector extends React.PureComponent {
+    render() {
+        const _props = this.props,
+              {
+            className: classNameProp,
+            classes,
+            orientation,
+            validConnector
+        } = _props,
+              other = _objectWithoutProperties(_props, ['className', 'classes', 'orientation', 'validConnector']);
+
+        const className = classNames(classes.root, classes[orientation], classNameProp);
+        const lineClassName = classNames(classes.line, {
+            [classes.lineHorizontal]: orientation === 'horizontal',
+            [classes.lineVertical]: orientation === 'vertical',
+            [classes.lineVerticalGreen]: orientation === 'vertical' && validConnector
+        });
+
+        return React.createElement(
+            'div',
+            _extends({ className: className }, other),
+            React.createElement('span', { className: lineClassName })
+        );
+    }
+}
+
+HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to the component.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * @ignore
+     */
+    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+} : {};
+
+HiStepConnector.defaultProps = {
+    orientation: 'vertical'
+};
+
+export default withStyles(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);

package/es/HiBreadcrumb/HiStepIcon.js

@@ -0,0 +1,81 @@
+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'
+    },
+    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: '5px solid rgba(255, 0, 0, 0)',
+        backgroundClip: 'padding-box',
+        boxShadow: '0 0 0 1px ' + theme.palette.neutral.normal,
+        backgroundColor: theme.palette.neutral.normal
+    },
+    activeValidated: {
+        boxShadow: '0 0 0 1px ' + theme.palette.status[116],
+        backgroundColor: theme.palette.status[116]
+    },
+    activeRefused: {
+        boxShadow: '0 0 0 1px ' + theme.palette.negative.normal,
+        backgroundColor: theme.palette.negative.normal
+    },
+    activeWarning: {
+        boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
+        backgroundColor: theme.palette.middle.normal
+    }
+});
+
+class HiStepIcon extends React.PureComponent {
+    render() {
+        const { active, classes, status } = this.props;
+
+        return React.createElement('div', {
+            className: classNames(classes.circle, {
+                [classes.activeRefused]: status === 'refused' && active,
+                [classes.activeValidated]: status === 'validated' && active,
+                [classes.activeWarning]: status === 'warning' && active,
+                [classes.active]: active,
+                [classes.refused]: status === 'refused',
+                [classes.validated]: status === 'validated',
+                [classes.warning]: status === 'warning'
+            })
+        });
+    }
+}
+
+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,
+
+    status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
+} : {};
+
+HiStepIcon.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    classes: {}
+};
+
+export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);

package/es/HiBreadcrumb/HiStepLabel.js

@@ -0,0 +1,154 @@
+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'
+    },
+    test: {
+        marginLeft: '0 '
+    },
+    vertical: {
+        marginTop: -10,
+        marginBottom: -6
+    },
+    label: _extends({
+        display: 'inline-block',
+        marginLeft: 4,
+        fontWeight: theme.typography.fontWeightRegular,
+        color: theme.palette.neutral.normal,
+        marginBottom: -4
+    }, theme.typography.body3),
+    labelContainer: {
+        marginBottom: 4,
+        maxWidth: 160
+    },
+    validated: {
+        color: theme.palette.status[116]
+    },
+    refused: {
+        color: theme.palette.negative.normal
+    },
+    active: {
+        fontWeight: theme.typography.fontWeightMedium
+    },
+    warning: {
+        color: theme.palette.middle.normal
+    },
+    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
+    }
+});
+
+function HiStepLabel(props) {
+    const {
+        active,
+        children,
+        classes,
+        className: classNameProp,
+        icon,
+        notificationNumber,
+        orientation,
+        status
+    } = props,
+          other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'icon', 'notificationNumber', 'orientation', 'status']);
+
+    return React.createElement(
+        'span',
+        _extends({
+            className: classNames(classes.root, {
+                [classes.vertical]: orientation === 'vertical'
+            }, classNameProp)
+        }, other),
+        icon && React.createElement(
+            'span',
+            { className: classes.iconContainer },
+            React.createElement(HiStepIcon, { active: active, status: status })
+        ),
+        React.createElement(
+            'span',
+            { className: classes.labelContainer },
+            React.createElement(
+                'div',
+                {
+                    className: classNames(classes.label, {
+                        [classes.validated]: status === 'validated',
+                        [classes.refused]: status === 'refused',
+                        [classes.warning]: status === 'warning',
+                        [classes.active]: active,
+                        [classes.shortEllipsis]: notificationNumber > 0,
+                        [classes.longEllipsis]: notificationNumber === 0
+                    })
+                },
+                children
+            ),
+            notificationNumber > 0 && React.createElement(
+                'span',
+                { className: classes.pin },
+                React.createElement(
+                    HiPin,
+                    {
+                        color: props.theme.palette.business.primary.normal,
+                        className: classes.test
+                    },
+                    notificationNumber
+                )
+            )
+        )
+    );
+}
+
+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,
+    /**
+     * @ignore
+     */
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
+    status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
+} : {};
+
+HiStepLabel.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    orientation: 'vertical'
+};
+
+export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);