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

package/HiBreadcrumb/HiBreadcrumb.js

@@ -25,10 +25,6 @@ var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -54,17 +50,7 @@ var _HiStep2 = _interopRequireDefault(_HiStep);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
-    return {
-        label: (0, _extends3.default)({
-            display: 'inline-block',
-            marginLeft: 12,
-            fontWeight: theme.typography.fontWeightRegular,
-            color: theme.palette.neutral.normal
-        }, theme.typography.body3),
-        active: {
-            fontWeight: theme.typography.fontWeightMedium
-        }
-    };
+    return {};
 };
 
 var HiBreadcrumb = function (_React$PureComponent) {
@@ -95,31 +81,37 @@ var HiBreadcrumb = function (_React$PureComponent) {
 
             var _props = this.props,
                 activeStep = _props.activeStep,
-                steps = _props.steps;
+                steps = _props.steps,
+                type = _props.type;
 
 
             return _react2.default.createElement(
                 _HiStepper2.default,
-                { activeStep: activeStep },
+                { activeStep: activeStep, type: type },
                 _react2.default.createElement(
                     'div',
                     null,
                     steps.map(function (step, index) {
-                        var validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
+                        var validConnector = step.status === 'validated' && index < steps.length - 1 && (steps[index + 1].status === 'validated' || steps[index + 1].status === 'active');
+
                         return _react2.default.createElement(
                             _HiStep2.default,
                             {
+                                content: step.content,
                                 key: step.id,
                                 onClick: _this2.handleStep(index),
                                 isLast: index === steps.length - 1,
-                                validConnector: validConnector
+                                validConnector: validConnector,
+                                type: type,
+                                steps: steps
                             },
                             _react2.default.createElement(
                                 _HiStepLabel2.default,
                                 {
                                     active: activeStep === index,
                                     status: step.status,
-                                    notificationNumber: step.notificationNumber
+                                    notificationNumber: step.notificationNumber,
+                                    type: type
                                 },
                                 step.label
                             )
@@ -133,11 +125,25 @@ var HiBreadcrumb = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 HiBreadcrumb.defaultProps = {
-    activeStep: 0
+    activeStep: 0,
+    type: 'back'
 };
 HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Which step is the active one
+     */
     activeStep: _propTypes2.default.number,
+    /**
+     * The collection of steps of the breadcrumb.
+     */
     steps: _propTypes2.default.array.isRequired,
-    handleStep: _propTypes2.default.func
+    /**
+     * The callback function handling the flow from one step to another
+     */
+    handleStep: _propTypes2.default.func,
+    /**
+     * The Breadcrumb type
+     */
+    type: _propTypes2.default.oneOf(['back', 'front-dark', 'front-light'])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);

package/HiBreadcrumb/HiStep.js

@@ -9,9 +9,29 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+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 _react = require('react');
 
@@ -21,63 +41,86 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _styles = require('../styles');
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _styles = require('../styles');
-
 var _HiStepConnector = require('./HiStepConnector');
 
 var _HiStepConnector2 = _interopRequireDefault(_HiStepConnector);
 
+var _HiStepContent = require('./HiStepContent');
+
+var _HiStepContent2 = _interopRequireDefault(_HiStepContent);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
     return {
-        root: {},
-        horizontal: {
-            paddingLeft: theme.spacing.unit,
-            paddingRight: theme.spacing.unit,
-            '&:first-child': {
-                paddingLeft: 0
-            },
-            '&:last-child': {
-                paddingRight: 0
-            }
-        },
-        vertical: {}
+        lastStep: {
+            marginBottom: 40
+        }
     };
 };
 
-function HiStep(props) {
-    var active = props.active,
-        children = props.children,
-        classes = props.classes,
-        classNameProp = props.className,
-        index = props.index,
-        isLast = props.isLast,
-        orientation = props.orientation,
-        validConnector = props.validConnector,
-        other = (0, _objectWithoutProperties3.default)(props, ['active', 'children', 'classes', 'className', 'index', 'isLast', 'orientation', 'validConnector']);
-
-
-    var className = (0, _classnames2.default)(classes.root, classes[orientation], classNameProp);
-
-    return _react2.default.createElement(
-        'div',
-        (0, _extends3.default)({ className: className }, other),
-        _react2.default.Children.map(children, function (child) {
-            return _react2.default.cloneElement(child, (0, _extends3.default)({
-                active: active,
-                icon: index + 1,
-                orientation: orientation
-            }, child.props));
-        }),
-        !isLast && _react2.default.createElement(_HiStepConnector2.default, { orientation: 'vertical', validConnector: validConnector })
-    );
-}
+var HiStep = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStep, _React$PureComponent);
+
+    function HiStep() {
+        (0, _classCallCheck3.default)(this, HiStep);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStep.__proto__ || (0, _getPrototypeOf2.default)(HiStep)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStep, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                active = _props.active,
+                children = _props.children,
+                classes = _props.classes,
+                content = _props.content,
+                isLast = _props.isLast,
+                onClick = _props.onClick,
+                steps = _props.steps,
+                type = _props.type,
+                validConnector = _props.validConnector;
+
+
+            return _react2.default.createElement(
+                'div',
+                {
+                    className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.lastStep, isLast && type !== 'back')),
+                    onClick: onClick
+                },
+                _react2.default.Children.map(children, function (child) {
+                    return _react2.default.cloneElement(child, (0, _extends3.default)({
+                        active: active
+                    }, child.props));
+                }),
+                !isLast && _react2.default.createElement(_HiStepConnector2.default, {
+                    validConnector: validConnector,
+                    type: type,
+                    steps: steps,
+                    active: active,
+                    content: content
+                }),
+                content && active && isLast && type === 'front-light' && _react2.default.createElement(_HiStepContent2.default, { content: content, isLast: true })
+            );
+        }
+    }]);
+    return HiStep;
+}(_react2.default.PureComponent);
 
+HiStep.defaultProps = {
+    active: false,
+    content: _react2.default.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.
@@ -88,36 +131,29 @@ HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     children: _propTypes2.default.node,
     /**
-     * @ignore
+     * The content to be displayed in the case of front-light breadcrumb
      */
-    classes: _propTypes2.default.object.isRequired,
+    content: _propTypes2.default.node,
     /**
      * @ignore
+     * Used to know which step is the last, to not put a HiStepConnector
      */
-    className: _propTypes2.default.string,
+    isLast: _propTypes2.default.bool,
     /**
-     * @ignore
-     * Used internally for numbering.
+     * Callback on step container click
      */
-    index: _propTypes2.default.number,
+    onClick: _propTypes2.default.func,
     /**
-     * @ignore
-     * Used to know which step is the last, to not put a HiStepConnector
+     * The collection of steps of the breadcrumb.
      */
-    isLast: _propTypes2.default.bool,
+    steps: _propTypes2.default.array,
     /**
      * @ignore
      */
-    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical']),
+    type: _propTypes2.default.oneOf(['back', 'front-light', 'front-dark']),
     /**
      * @ignore
      */
     validConnector: _propTypes2.default.bool
 } : {};
-
-HiStep.defaultProps = {
-    active: false,
-    validConnector: false
-};
-
-exports.default = (0, _styles.withStyles)(styles, { name: 'MuiStep' })(HiStep);
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStep' })(HiStep);

package/HiBreadcrumb/HiStepConnector.js

@@ -51,33 +51,33 @@ var _classnames2 = _interopRequireDefault(_classnames);
 
 var _styles = require('../styles');
 
+var _HiStepContent = require('./HiStepContent');
+
+var _HiStepContent2 = _interopRequireDefault(_HiStepContent);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
     return {
         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'
         }
     };
 };
@@ -89,38 +89,96 @@ var styles = exports.styles = function styles(theme) {
 var HiStepConnector = function (_React$PureComponent) {
     (0, _inherits3.default)(HiStepConnector, _React$PureComponent);
 
-    function HiStepConnector() {
+    function HiStepConnector(props) {
         (0, _classCallCheck3.default)(this, HiStepConnector);
-        return (0, _possibleConstructorReturn3.default)(this, (HiStepConnector.__proto__ || (0, _getPrototypeOf2.default)(HiStepConnector)).apply(this, arguments));
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiStepConnector.__proto__ || (0, _getPrototypeOf2.default)(HiStepConnector)).call(this, props));
+
+        _this.state = {
+            width: 1280,
+            height: 800
+        };
+
+        _this.updateWindowDimensions = _this.updateWindowDimensions.bind(_this);
+        return _this;
     }
 
     (0, _createClass3.default)(HiStepConnector, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.updateWindowDimensions();
+            window.addEventListener('resize', this.updateWindowDimensions);
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            window.removeEventListener('resize', this.updateWindowDimensions);
+        }
+    }, {
+        key: 'updateWindowDimensions',
+        value: function updateWindowDimensions() {
+            this.setState({ width: window.innerWidth, height: window.innerHeight });
+        }
+    }, {
         key: 'render',
         value: function render() {
             var _classNames;
 
             var _props = this.props,
+                active = _props.active,
                 classNameProp = _props.className,
                 classes = _props.classes,
-                orientation = _props.orientation,
+                content = _props.content,
+                steps = _props.steps,
+                type = _props.type,
                 validConnector = _props.validConnector,
-                other = (0, _objectWithoutProperties3.default)(_props, ['className', 'classes', 'orientation', 'validConnector']);
+                other = (0, _objectWithoutProperties3.default)(_props, ['active', 'className', 'classes', 'content', 'steps', 'type', 'validConnector']);
+            var _state = this.state,
+                width = _state.width,
+                height = _state.height;
+
+
+            var className = (0, _classnames2.default)(classes.root, classNameProp);
+            var lineClassName = (0, _classnames2.default)(classes.line, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.greenLine, validConnector), (0, _defineProperty3.default)(_classNames, classes.lightLine, type === 'front-light'), _classNames));
+
+            var 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;
+                }
+            }
 
-            var className = (0, _classnames2.default)(classes.root, classes[orientation], classNameProp);
-            var lineClassName = (0, _classnames2.default)(classes.line, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.lineHorizontal, orientation === 'horizontal'), (0, _defineProperty3.default)(_classNames, classes.lineVertical, orientation === 'vertical'), (0, _defineProperty3.default)(_classNames, classes.lineVerticalGreen, orientation === 'vertical' && validConnector), _classNames));
+            var heightStyle = {};
+            if (active) {
+                heightStyle = { height: lineHeight };
+            }
 
             return _react2.default.createElement(
                 'div',
                 (0, _extends3.default)({ className: className }, other),
-                _react2.default.createElement('span', { className: lineClassName })
+                _react2.default.createElement('span', { className: lineClassName, style: heightStyle }),
+                type === 'front-light' && active && content && _react2.default.createElement(_HiStepContent2.default, { content: content })
             );
         }
     }]);
     return HiStepConnector;
 }(_react2.default.PureComponent);
 
+HiStepConnector.defaultProps = {
+    active: false,
+    content: _react2.default.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: _propTypes2.default.bool,
     /**
      * Useful to extend the style applied to the component.
      */
@@ -130,13 +188,20 @@ HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     className: _propTypes2.default.string,
     /**
-     * @ignore
+     * The content to be displayed in the case of front-light breadcrumb
+     */
+    content: _propTypes2.default.node,
+    /**
+     * The collection of steps of the breadcrumb.
      */
-    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical'])
+    steps: _propTypes2.default.array,
+    /**
+     * specifies which type of breadcrumb is used
+     */
+    type: _propTypes2.default.oneOf(['back', 'front-dark', 'front-light']),
+    /**
+     * Specifies if the connector should be displayed in green or its default color
+     */
+    validConnector: _propTypes2.default.bool
 } : {};
-
-HiStepConnector.defaultProps = {
-    orientation: 'vertical'
-};
-
 exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);

package/HiBreadcrumb/HiStepContent.js

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+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 _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _styles = require('../styles');
+
+var _Paper = require('../Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        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
+        }
+    };
+};
+
+var HiStepContent = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepContent, _React$PureComponent);
+
+    function HiStepContent() {
+        (0, _classCallCheck3.default)(this, HiStepContent);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStepContent.__proto__ || (0, _getPrototypeOf2.default)(HiStepContent)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStepContent, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                content = _props.content,
+                classes = _props.classes,
+                isLast = _props.isLast;
+
+
+            return _react2.default.createElement(
+                _Paper2.default,
+                {
+                    square: true,
+                    className: (0, _classnames2.default)(classes.contentContainer, (0, _defineProperty3.default)({}, classes.lastStep, isLast))
+                },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.root },
+                    content
+                )
+            );
+        }
+    }]);
+    return HiStepContent;
+}(_react2.default.PureComponent);
+
+HiStepContent.defaultProps = {
+    content: _react2.default.createElement('span', null),
+    isLast: false
+};
+HiStepContent.propTypes = process.env.NODE_ENV !== "production" ? {
+    content: _propTypes2.default.node,
+    isLast: _propTypes2.default.bool
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepContent' })(HiStepContent);