@hipay/hipay-material-ui 1.0.0-beta.13 → 1.0.0-beta.15

package/es/HiBreadcrumb/HiStepConnector.js

@@ -4,31 +4,28 @@ 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: {
-        flex: '1 1 auto'
-    },
-    vertical: {
+        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]
-    },
-    lineHorizontal: {
-        borderTopStyle: 'solid',
-        borderTopWidth: 1
-    },
-    lineVertical: {
+        borderColor: theme.palette.grey[600],
         borderLeftStyle: 'solid',
         borderLeftWidth: 2,
         minHeight: theme.spacing.unit * 3,
-        height: 37
+        height: 40
     },
-    lineVerticalGreen: {
+    greenLine: {
         borderColor: theme.palette.status[116]
+    },
+    lightLine: {
+        borderColor: '#FFFFFF'
     }
 });
 
@@ -36,32 +33,88 @@ export const styles = theme => ({
  * @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,
-            orientation,
+            content,
+            steps,
+            type,
             validConnector
         } = _props,
-              other = _objectWithoutProperties(_props, ['className', 'classes', 'orientation', 'validConnector']);
+              other = _objectWithoutProperties(_props, ['active', 'className', 'classes', 'content', 'steps', 'type', 'validConnector']);
 
-        const className = classNames(classes.root, classes[orientation], classNameProp);
+        const { width, height } = this.state;
+
+        const className = classNames(classes.root, classNameProp);
         const lineClassName = classNames(classes.line, {
-            [classes.lineHorizontal]: orientation === 'horizontal',
-            [classes.lineVertical]: orientation === 'vertical',
-            [classes.lineVerticalGreen]: orientation === 'vertical' && validConnector
+            [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 })
+            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.
      */
@@ -71,13 +124,20 @@ HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     className: PropTypes.string,
     /**
-     * @ignore
+     * The content to be displayed in the case of front-light breadcrumb
+     */
+    content: PropTypes.node,
+    /**
+     * The collection of steps of the breadcrumb.
      */
-    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+    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
 } : {};
-
-HiStepConnector.defaultProps = {
-    orientation: 'vertical'
-};
-
 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

@@ -12,6 +12,56 @@ export const styles = theme => ({
         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]
     },
@@ -22,43 +72,62 @@ export const styles = theme => ({
         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]
+        border: 'solid 2px #00ADE9'
     },
-    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
+    light: {
+        border: 'solid 2px ' + '#FFFFFF'
     }
 });
 
 class HiStepIcon extends React.PureComponent {
+
     render() {
-        const { active, classes, status } = this.props;
+        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'
+        });
 
-        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'
-            })
+        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.
@@ -68,14 +137,13 @@ HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object.isRequired,
-
-    status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
+    /**
+     * 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'])
 } : {};
-
-HiStepIcon.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    classes: {}
-};
-
 export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);

package/es/HiBreadcrumb/HiStepLabel.js

@@ -10,26 +10,45 @@ import HiPin from '../HiPins';
 export const styles = theme => ({
     root: {
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        marginTop: -11,
+        marginBottom: -5
     },
-    test: {
-        marginLeft: '0 '
+    frontRoot: {
+        marginTop: -12,
+        marginBottom: -7
     },
-    vertical: {
-        marginTop: -10,
+    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
+        marginBottom: -4,
+        '&:hover': {
+            cursor: 'pointer'
+        }
     }, theme.typography.body3),
     labelContainer: {
-        marginBottom: 4,
+        marginBottom: 4
+    },
+    largeLabelContainer: {
+        maxWidth: 300
+    },
+    shortLabelContainer: {
         maxWidth: 160
     },
+    frontLabel: {
+        fontSize: 18,
+        fontWeight: theme.typography.fontWeightLight,
+        marginLeft: 11
+    },
     validated: {
         color: theme.palette.status[116]
     },
@@ -37,11 +56,17 @@ export const styles = theme => ({
         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
     },
@@ -61,64 +86,83 @@ export const styles = theme => ({
     }
 });
 
-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']);
+class HiStepLabel extends React.PureComponent {
 
-    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(
+    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',
-            { className: classes.labelContainer },
+            _extends({
+                className: classNames(classes.root, classNameProp, {
+                    [classes.frontRoot]: type === 'front-light',
+                    [classes.frontDarkRoot]: type === 'front-dark'
+                })
+            }, other),
             React.createElement(
-                'div',
+                'span',
+                { className: classes.iconContainer },
+                React.createElement(HiStepIcon, { active: active, status: status, type: type })
+            ),
+            React.createElement(
+                'span',
                 {
-                    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
+                    className: classNames(classes.labelContainer, {
+                        [classes.largeLabelContainer]: type !== 'back',
+                        [classes.shortLabelContainer]: type === 'back'
                     })
                 },
-                children
-            ),
-            notificationNumber > 0 && React.createElement(
-                'span',
-                { className: classes.pin },
                 React.createElement(
-                    HiPin,
+                    'div',
                     {
-                        color: props.theme.palette.business.primary.normal,
-                        className: classes.test
+                        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'
+                        })
                     },
-                    notificationNumber
+                    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
@@ -138,17 +182,16 @@ HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     className: PropTypes.string,
     /**
-     * @ignore
+     * The value to be displayed in the HiPin on the right of the label
      */
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-
-    status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
+    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'])
 } : {};
-
-HiStepLabel.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    orientation: 'vertical'
-};
-
 export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/es/HiBreadcrumb/HiStepper.js

@@ -1,5 +1,4 @@
 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';
@@ -8,21 +7,14 @@ import Paper from '../Paper';
 
 export const styles = theme => ({
     root: {
-        display: 'flex',
-        padding: theme.spacing.unit * 3,
-        maxWidth: 160,
-        flexDirection: 'column'
+        width: 340
     }
 });
 
 class HiStepper extends React.PureComponent {
 
     render() {
-        const _props = this.props,
-              { activeStep, children, classes, className: classNameProp } = _props,
-              other = _objectWithoutProperties(_props, ['activeStep', 'children', 'classes', 'className']);
-
-        const className = classNames(classes.root, classNameProp);
+        const { activeStep, children, classes } = this.props;
 
         const childrenArray = React.Children.toArray(children.props.children);
 
@@ -31,8 +23,8 @@ class HiStepper extends React.PureComponent {
         });
 
         return React.createElement(
-            Paper,
-            _extends({ square: true, elevation: 0, className: className }, other),
+            'div',
+            { className: classes.root },
             steps
         );
     }
@@ -49,14 +41,6 @@ HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Two or more `<Step />` components.
      */
-    children: PropTypes.node.isRequired,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: PropTypes.string
+    children: PropTypes.node.isRequired
 } : {};
 export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);