@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.20

package/HiBreadcrumb/HiStepConnector.js

@@ -0,0 +1,207 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+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 _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 _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: {
+            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],
+            borderLeftStyle: 'solid',
+            borderLeftWidth: 2,
+            minHeight: theme.spacing.unit * 3,
+            height: 40
+        },
+        greenLine: {
+            borderColor: theme.palette.status[116]
+        },
+        lightLine: {
+            borderColor: '#FFFFFF'
+        }
+    };
+};
+
+/**
+ * @ignore - internal component.
+ */
+
+var HiStepConnector = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepConnector, _React$PureComponent);
+
+    function HiStepConnector(props) {
+        (0, _classCallCheck3.default)(this, HiStepConnector);
+
+        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,
+                content = _props.content,
+                steps = _props.steps,
+                type = _props.type,
+                validConnector = _props.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 heightStyle = {};
+            if (active) {
+                heightStyle = { height: lineHeight };
+            }
+
+            return _react2.default.createElement(
+                'div',
+                (0, _extends3.default)({ className: className }, other),
+                _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.
+     */
+    classes: _propTypes2.default.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: _propTypes2.default.string,
+    /**
+     * The content to be displayed in the case of front-light breadcrumb
+     */
+    content: _propTypes2.default.node,
+    /**
+     * The collection of steps of the breadcrumb.
+     */
+    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
+} : {};
+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);

package/HiBreadcrumb/HiStepIcon.js

@@ -0,0 +1,191 @@
+'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');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        circle: {
+            borderRadius: '50%',
+            width: 16,
+            height: 16,
+            border: 'solid 2px ' + theme.palette.neutral.normal,
+            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]
+        },
+        refused: {
+            border: 'solid 2px ' + theme.palette.negative.normal
+        },
+        warning: {
+            border: 'solid 2px ' + theme.palette.middle.normal
+        },
+        active: {
+            border: 'solid 2px #00ADE9'
+        },
+        light: {
+            border: 'solid 2px ' + '#FFFFFF'
+        }
+    };
+};
+
+var HiStepIcon = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepIcon, _React$PureComponent);
+
+    function HiStepIcon() {
+        (0, _classCallCheck3.default)(this, HiStepIcon);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStepIcon.__proto__ || (0, _getPrototypeOf2.default)(HiStepIcon)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStepIcon, [{
+        key: 'render',
+        value: function render() {
+            var _classNames, _classNames2, _classNames3;
+
+            var _props = this.props,
+                active = _props.active,
+                classes = _props.classes,
+                status = _props.status,
+                type = _props.type;
+
+
+            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.
+     */
+    active: _propTypes2.default.bool,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object.isRequired,
+    /**
+     * 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'])
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);