@hipay/hipay-material-ui 1.0.0-beta.14 → 1.0.0-beta.16

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

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -70,9 +70,11 @@ const CustomOverlayLayout = (_ref) => {
         [classes.right]: side === 'to'
     });
 
+    let paperProps = _extends({}, props);
+
     return React.createElement(
         Paper,
-        { className: paperClass },
+        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
         React.createElement(
             'div',
             { className: classes.overlay },

package/es/HiDatePicker/Overlays/Overlay.js

@@ -1,3 +1,5 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 //  weak
 
 import React from 'react';
@@ -31,7 +33,10 @@ export const styles = () => ({
     }
 });
 
-const Overlay = ({ classes, children, side, staticPosition }) => {
+const Overlay = (_ref) => {
+    let { classes, children, side, staticPosition } = _ref,
+        props = _objectWithoutProperties(_ref, ['classes', 'children', 'side', 'staticPosition']);
+
     const paperClass = classNames(classes.paper, {
         [classes.left]: side === 'from',
         [classes.right]: side === 'to',
@@ -39,9 +44,11 @@ const Overlay = ({ classes, children, side, staticPosition }) => {
         [classes.relative]: staticPosition === true
     });
 
+    let paperProps = _extends({}, props);
+
     return React.createElement(
         Paper,
-        { className: paperClass },
+        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
         React.createElement(
             'div',
             { className: classes.overlay },

package/es/HiForm/HiInput.js

@@ -170,19 +170,28 @@ class HiInput extends React.PureComponent {
     }
 
     handleFocus(event) {
-        if (!this.state.focused) {
-            this.setState({ focused: true });
-        }
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
+        if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
+            event.stopPropagation();
+        } else {
+            if (!this.state.focused) {
+                this.setState({ focused: true });
+            }
+            if (this.props.onFocus) {
+                this.props.onFocus(event);
+            }
+            this.inputElement.focus();
         }
     }
 
-    handleDivClick() {
-        if (!this.state.focused) {
-            this.setState({ focused: true });
+    handleDivClick(event) {
+        if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
+            event.stopPropagation();
+        } else {
+            if (!this.state.focused) {
+                this.setState({ focused: true });
+            }
+            this.inputElement.focus();
         }
-        this.inputElement.focus();
     }
 
     handleMouseEnter() {
@@ -305,7 +314,7 @@ class HiInput extends React.PureComponent {
                 startAdornment: leftIcon,
                 endAdornment: React.createElement(
                     'div',
-                    { className: classes.endAdornment },
+                    { className: classes.endAdornment, ref: el => this.endAdornmentNode = el },
                     eraseIcon,
                     endAdornment
                 ),