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

package/HiBreadcrumb/HiStepIcon.js

@@ -55,6 +55,56 @@ var styles = exports.styles = function 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]
         },
@@ -65,22 +115,10 @@ var styles = exports.styles = function 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]
-        },
-        activeRefused: {
-            boxShadow: '0 0 0 1px ' + theme.palette.negative.normal,
-            backgroundColor: theme.palette.negative.normal
+            border: 'solid 2px #00ADE9'
         },
-        activeWarning: {
-            boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
-            backgroundColor: theme.palette.middle.normal
+        light: {
+            border: 'solid 2px ' + '#FFFFFF'
         }
     };
 };
@@ -96,22 +134,42 @@ var HiStepIcon = function (_React$PureComponent) {
     (0, _createClass3.default)(HiStepIcon, [{
         key: 'render',
         value: function render() {
-            var _classNames;
+            var _classNames, _classNames2, _classNames3;
 
             var _props = this.props,
                 active = _props.active,
                 classes = _props.classes,
-                status = _props.status;
+                status = _props.status,
+                type = _props.type;
 
 
-            return _react2.default.createElement('div', {
-                className: (0, _classnames2.default)(classes.circle, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.activeRefused, status === 'refused' && active), (0, _defineProperty3.default)(_classNames, classes.activeValidated, status === 'validated' && active), (0, _defineProperty3.default)(_classNames, classes.activeWarning, status === 'warning' && active), (0, _defineProperty3.default)(_classNames, classes.active, active), (0, _defineProperty3.default)(_classNames, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames, classes.warning, status === 'warning'), _classNames))
-            });
+            var dotAroundClass = (0, _classnames2.default)(classes.dotAround, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames, classes.active, status === 'active'), (0, _defineProperty3.default)(_classNames, classes.light, type === 'front-light'), _classNames));
+
+            var innerDotClass = (0, _classnames2.default)(classes.dot, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.activeStep, active), (0, _defineProperty3.default)(_classNames2, classes.dotValidated, status === 'validated'), (0, _defineProperty3.default)(_classNames2, classes.dotRefused, status === 'refused'), (0, _defineProperty3.default)(_classNames2, classes.dotWarning, status === 'warning'), (0, _defineProperty3.default)(_classNames2, classes.dotActive, status === 'active'), (0, _defineProperty3.default)(_classNames2, classes.dotLight, type === 'front-light'), _classNames2));
+
+            var dotClassName = (0, _classnames2.default)(classes.circle, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty3.default)(_classNames3, classes.light, type === 'front-light'), _classNames3));
+
+            return _react2.default.createElement(
+                'div',
+                null,
+                active && _react2.default.createElement(
+                    'div',
+                    { className: dotAroundClass },
+                    _react2.default.createElement('div', { className: innerDotClass })
+                ),
+                !active && _react2.default.createElement('div', { className: dotClassName })
+            );
         }
     }]);
     return HiStepIcon;
 }(_react2.default.PureComponent);
 
+HiStepIcon.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    type: 'back',
+    classes: {}
+};
 HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Whether this step is active.
@@ -121,14 +179,13 @@ HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object.isRequired,
-
-    status: _propTypes2.default.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
+    /**
+     * The type of Breadcrumb used
+     */
+    type: _propTypes2.default.oneOf(['back', 'front-light', 'front-dark']),
+    /**
+     * The status of the step in case of back or front-dark type Breadcrumb
+     */
+    status: _propTypes2.default.oneOf(['refused', 'validated', 'warning', 'unreviewed', 'active'])
 } : {};
-
-HiStepIcon.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    classes: {}
-};
-
 exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);

package/HiBreadcrumb/HiStepLabel.js

@@ -13,6 +13,26 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -45,26 +65,45 @@ var styles = exports.styles = function styles(theme) {
     return {
         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: (0, _extends3.default)({
             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]
         },
@@ -72,11 +111,17 @@ var styles = exports.styles = function 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
         },
@@ -97,56 +142,78 @@ var styles = exports.styles = function styles(theme) {
     };
 };
 
-function HiStepLabel(props) {
-    var _classNames2;
-
-    var active = props.active,
-        children = props.children,
-        classes = props.classes,
-        classNameProp = props.className,
-        icon = props.icon,
-        notificationNumber = props.notificationNumber,
-        orientation = props.orientation,
-        status = props.status,
-        other = (0, _objectWithoutProperties3.default)(props, ['active', 'children', 'classes', 'className', 'icon', 'notificationNumber', 'orientation', 'status']);
-
-
-    return _react2.default.createElement(
-        'span',
-        (0, _extends3.default)({
-            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.vertical, orientation === 'vertical'), classNameProp)
-        }, other),
-        icon && _react2.default.createElement(
-            'span',
-            { className: classes.iconContainer },
-            _react2.default.createElement(_HiStepIcon2.default, { active: active, status: status })
-        ),
-        _react2.default.createElement(
-            'span',
-            { className: classes.labelContainer },
-            _react2.default.createElement(
-                'div',
-                {
-                    className: (0, _classnames2.default)(classes.label, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames2, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames2, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames2, classes.active, active), (0, _defineProperty3.default)(_classNames2, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty3.default)(_classNames2, classes.longEllipsis, notificationNumber === 0), _classNames2))
-                },
-                children
-            ),
-            notificationNumber > 0 && _react2.default.createElement(
+var HiStepLabel = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepLabel, _React$PureComponent);
+
+    function HiStepLabel() {
+        (0, _classCallCheck3.default)(this, HiStepLabel);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStepLabel.__proto__ || (0, _getPrototypeOf2.default)(HiStepLabel)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStepLabel, [{
+        key: 'render',
+        value: function render() {
+            var _classNames, _classNames2, _classNames3;
+
+            var _props = this.props,
+                active = _props.active,
+                children = _props.children,
+                classes = _props.classes,
+                classNameProp = _props.className,
+                notificationNumber = _props.notificationNumber,
+                status = _props.status,
+                type = _props.type,
+                other = (0, _objectWithoutProperties3.default)(_props, ['active', 'children', 'classes', 'className', 'notificationNumber', 'status', 'type']);
+
+
+            return _react2.default.createElement(
                 'span',
-                { className: classes.pin },
+                (0, _extends3.default)({
+                    className: (0, _classnames2.default)(classes.root, classNameProp, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.frontRoot, type === 'front-light'), (0, _defineProperty3.default)(_classNames, classes.frontDarkRoot, type === 'front-dark'), _classNames))
+                }, other),
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.iconContainer },
+                    _react2.default.createElement(_HiStepIcon2.default, { active: active, status: status, type: type })
+                ),
                 _react2.default.createElement(
-                    _HiPins2.default,
+                    'span',
                     {
-                        color: props.theme.palette.business.primary.normal,
-                        className: classes.test
+                        className: (0, _classnames2.default)(classes.labelContainer, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.largeLabelContainer, type !== 'back'), (0, _defineProperty3.default)(_classNames2, classes.shortLabelContainer, type === 'back'), _classNames2))
                     },
-                    notificationNumber
+                    _react2.default.createElement(
+                        'div',
+                        {
+                            className: (0, _classnames2.default)(classes.label, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty3.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty3.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty3.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty3.default)(_classNames3, classes.light, type === 'front-light'), (0, _defineProperty3.default)(_classNames3, classes.activeStep, active), (0, _defineProperty3.default)(_classNames3, classes.frontLabel, type !== 'back'), (0, _defineProperty3.default)(_classNames3, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty3.default)(_classNames3, classes.longEllipsis, notificationNumber === 0 && type === 'back'), _classNames3))
+                        },
+                        children
+                    ),
+                    notificationNumber > 0 && _react2.default.createElement(
+                        'span',
+                        { className: classes.pin },
+                        _react2.default.createElement(
+                            _HiPins2.default,
+                            {
+                                color: this.props.theme.palette.business.primary.normal,
+                                className: classes.hipin
+                            },
+                            notificationNumber
+                        )
+                    )
                 )
-            )
-        )
-    );
-}
+            );
+        }
+    }]);
+    return HiStepLabel;
+}(_react2.default.PureComponent);
 
+HiStepLabel.defaultProps = {
+    active: false,
+    children: '',
+    notificationNumber: 0,
+    status: 'unreviewed',
+    type: 'back'
+};
 HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * @ignore
@@ -166,17 +233,16 @@ HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     className: _propTypes2.default.string,
     /**
-     * @ignore
+     * The value to be displayed in the HiPin on the right of the label
      */
-    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical']),
-
-    status: _propTypes2.default.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
+    notificationNumber: _propTypes2.default.number,
+    /**
+     * 'Unreviewed', 'refused', 'validated' et 'warning' sont les statuts pour tous les types de breadcrumb. 'active' est spécifique au Front dark
+     */
+    status: _propTypes2.default.oneOf(['unreviewed', 'refused', 'validated', 'warning', 'active']),
+    /**
+     * The Breadcrumb type
+     */
+    type: _propTypes2.default.oneOf(['back', 'front-light', 'front-dark'])
 } : {};
-
-HiStepLabel.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    orientation: 'vertical'
-};
-
 exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/HiBreadcrumb/HiStepper.js

@@ -9,10 +9,6 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -56,10 +52,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles(theme) {
     return {
         root: {
-            display: 'flex',
-            padding: theme.spacing.unit * 3,
-            maxWidth: 160,
-            flexDirection: 'column'
+            width: 340
         }
     };
 };
@@ -78,13 +71,9 @@ var HiStepper = function (_React$PureComponent) {
             var _props = this.props,
                 activeStep = _props.activeStep,
                 children = _props.children,
-                classes = _props.classes,
-                classNameProp = _props.className,
-                other = (0, _objectWithoutProperties3.default)(_props, ['activeStep', 'children', 'classes', 'className']);
+                classes = _props.classes;
 
 
-            var className = (0, _classnames2.default)(classes.root, classNameProp);
-
             var childrenArray = _react2.default.Children.toArray(children.props.children);
 
             var steps = childrenArray.map(function (step, index) {
@@ -92,8 +81,8 @@ var HiStepper = function (_React$PureComponent) {
             });
 
             return _react2.default.createElement(
-                _Paper2.default,
-                (0, _extends3.default)({ square: true, elevation: 0, className: className }, other),
+                'div',
+                { className: classes.root },
                 steps
             );
         }
@@ -112,14 +101,6 @@ HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Two or more `<Step />` components.
      */
-    children: _propTypes2.default.node.isRequired,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: _propTypes2.default.string
+    children: _propTypes2.default.node.isRequired
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepper' })(HiStepper);

package/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -98,9 +98,11 @@ var CustomOverlayLayout = function CustomOverlayLayout(_ref) {
 
     var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
 
+    var paperProps = (0, _extends3.default)({}, props);
+
     return _react2.default.createElement(
         _Paper2.default,
-        { className: paperClass },
+        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
         _react2.default.createElement(
             'div',
             { className: classes.overlay },

package/HiDatePicker/Overlays/Overlay.js

@@ -5,10 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -63,13 +71,17 @@ var Overlay = function Overlay(_ref) {
     var classes = _ref.classes,
         children = _ref.children,
         side = _ref.side,
-        staticPosition = _ref.staticPosition;
+        staticPosition = _ref.staticPosition,
+        props = (0, _objectWithoutProperties3.default)(_ref, ['classes', 'children', 'side', 'staticPosition']);
+
 
     var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty3.default)(_classNames, classes.relative, staticPosition === true), _classNames));
 
+    var paperProps = (0, _extends3.default)({}, props);
+
     return _react2.default.createElement(
         _Paper2.default,
-        { className: paperClass },
+        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
         _react2.default.createElement(
             'div',
             { className: classes.overlay },

package/HiForm/HiInput.js

@@ -238,20 +238,29 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'handleFocus',
         value: function 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();
             }
         }
     }, {
         key: 'handleDivClick',
-        value: function handleDivClick() {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
+        value: function 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();
         }
     }, {
         key: 'handleMouseEnter',
@@ -278,7 +287,9 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'render',
         value: function render() {
-            var _classNames, _classNames4;
+            var _classNames,
+                _this2 = this,
+                _classNames4;
 
             var _props = this.props,
                 value = _props.value,
@@ -369,7 +380,9 @@ var HiInput = function (_React$PureComponent) {
                     startAdornment: leftIcon,
                     endAdornment: _react2.default.createElement(
                         'div',
-                        { className: classes.endAdornment },
+                        { className: classes.endAdornment, ref: function ref(el) {
+                                return _this2.endAdornmentNode = el;
+                            } },
                         eraseIcon,
                         endAdornment
                     ),