@hipay/hipay-material-ui 1.0.0-beta.1 → 1.0.0-beta.11

package/HiBreadcrumb/HiStepConnector.js

@@ -0,0 +1,142 @@
+'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');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            flex: '1 1 auto'
+        },
+        vertical: {
+            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: {
+            borderLeftStyle: 'solid',
+            borderLeftWidth: 2,
+            minHeight: theme.spacing.unit * 3,
+            height: 37
+        },
+        lineVerticalGreen: {
+            borderColor: theme.palette.status[116]
+        }
+    };
+};
+
+/**
+ * @ignore - internal component.
+ */
+
+var HiStepConnector = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepConnector, _React$PureComponent);
+
+    function HiStepConnector() {
+        (0, _classCallCheck3.default)(this, HiStepConnector);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStepConnector.__proto__ || (0, _getPrototypeOf2.default)(HiStepConnector)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStepConnector, [{
+        key: 'render',
+        value: function render() {
+            var _classNames;
+
+            var _props = this.props,
+                classNameProp = _props.className,
+                classes = _props.classes,
+                orientation = _props.orientation,
+                validConnector = _props.validConnector,
+                other = (0, _objectWithoutProperties3.default)(_props, ['className', 'classes', 'orientation', 'validConnector']);
+
+
+            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));
+
+            return _react2.default.createElement(
+                'div',
+                (0, _extends3.default)({ className: className }, other),
+                _react2.default.createElement('span', { className: lineClassName })
+            );
+        }
+    }]);
+    return HiStepConnector;
+}(_react2.default.PureComponent);
+
+HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to the component.
+     */
+    classes: _propTypes2.default.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: _propTypes2.default.string,
+    /**
+     * @ignore
+     */
+    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical'])
+} : {};
+
+HiStepConnector.defaultProps = {
+    orientation: 'vertical'
+};
+
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);

package/HiBreadcrumb/HiStepIcon.js

@@ -0,0 +1,134 @@
+'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'
+        },
+        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: '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
+        },
+        activeWarning: {
+            boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
+            backgroundColor: theme.palette.middle.normal
+        }
+    };
+};
+
+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;
+
+            var _props = this.props,
+                active = _props.active,
+                classes = _props.classes,
+                status = _props.status;
+
+
+            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))
+            });
+        }
+    }]);
+    return HiStepIcon;
+}(_react2.default.PureComponent);
+
+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,
+
+    status: _propTypes2.default.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
+} : {};
+
+HiStepIcon.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    classes: {}
+};
+
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);

package/HiBreadcrumb/HiStepLabel.js

@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _HiStepIcon = require('./HiStepIcon');
+
+var _HiStepIcon2 = _interopRequireDefault(_HiStepIcon);
+
+var _HiPins = require('../HiPins');
+
+var _HiPins2 = _interopRequireDefault(_HiPins);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            display: 'flex',
+            alignItems: 'center'
+        },
+        test: {
+            marginLeft: '0 '
+        },
+        vertical: {
+            marginTop: -10,
+            marginBottom: -6
+        },
+        label: (0, _extends3.default)({
+            display: 'inline-block',
+            marginLeft: 4,
+            fontWeight: theme.typography.fontWeightRegular,
+            color: theme.palette.neutral.normal,
+            marginBottom: -4
+        }, theme.typography.body3),
+        labelContainer: {
+            marginBottom: 4,
+            maxWidth: 160
+        },
+        validated: {
+            color: theme.palette.status[116]
+        },
+        refused: {
+            color: theme.palette.negative.normal
+        },
+        active: {
+            fontWeight: theme.typography.fontWeightMedium
+        },
+        warning: {
+            color: theme.palette.middle.normal
+        },
+        pin: {
+            marginLeft: 4
+        },
+        shortEllipsis: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            maxWidth: 51
+        },
+        longEllipsis: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            maxWidth: 90
+        }
+    };
+};
+
+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(
+                'span',
+                { className: classes.pin },
+                _react2.default.createElement(
+                    _HiPins2.default,
+                    {
+                        color: props.theme.palette.business.primary.normal,
+                        className: classes.test
+                    },
+                    notificationNumber
+                )
+            )
+        )
+    );
+}
+
+HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * @ignore
+     * Sets the step as active. Is passed to child components.
+     */
+    active: _propTypes2.default.bool,
+    /**
+     * In most cases will simply be a string containing a title for the label.
+     */
+    children: _propTypes2.default.node,
+    /**
+     * Custom styles for component.
+     */
+    classes: _propTypes2.default.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: _propTypes2.default.string,
+    /**
+     * @ignore
+     */
+    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical']),
+
+    status: _propTypes2.default.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
+} : {};
+
+HiStepLabel.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    orientation: 'vertical'
+};
+
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/HiBreadcrumb/HiStepper.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+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);
+
+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',
+            padding: theme.spacing.unit * 3,
+            maxWidth: 160,
+            flexDirection: 'column'
+        }
+    };
+};
+
+var HiStepper = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiStepper, _React$PureComponent);
+
+    function HiStepper() {
+        (0, _classCallCheck3.default)(this, HiStepper);
+        return (0, _possibleConstructorReturn3.default)(this, (HiStepper.__proto__ || (0, _getPrototypeOf2.default)(HiStepper)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiStepper, [{
+        key: 'render',
+        value: function render() {
+            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']);
+
+
+            var className = (0, _classnames2.default)(classes.root, classNameProp);
+
+            var childrenArray = _react2.default.Children.toArray(children.props.children);
+
+            var steps = childrenArray.map(function (step, index) {
+                return _react2.default.cloneElement(step, (0, _extends3.default)({ index: index, active: activeStep === index }, step.props));
+            });
+
+            return _react2.default.createElement(
+                _Paper2.default,
+                (0, _extends3.default)({ square: true, elevation: 0, className: className }, other),
+                steps
+            );
+        }
+    }]);
+    return HiStepper;
+}(_react2.default.PureComponent);
+
+HiStepper.defaultProps = {
+    activeStep: 0
+};
+HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Set the active step (zero based index).
+     */
+    activeStep: _propTypes2.default.number,
+    /**
+     * 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
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepper' })(HiStepper);

package/HiBreadcrumb/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _HiBreadcrumb = require('./HiBreadcrumb');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiBreadcrumb).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/HiCheckbox/HiCheckbox.js

@@ -65,7 +65,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var styles = exports.styles = function styles(theme) {
     return {
-        root: {},
+        root: {
+            marginRight: 12,
+            marginLeft: 12
+        },
         checked: {
             color: theme.palette.business.primary.normal
         },

package/HiChip/HiChip.js

@@ -124,12 +124,12 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
         },
         img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon }),
+        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 20
+            size: 16
         }),
         _react2.default.createElement(
             'span',
@@ -140,13 +140,13 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 20
+            size: 16
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 20
+            size: 16
         })
     );
 }

package/HiChip/HiChipSwitch.js

@@ -213,7 +213,8 @@ var HiChipSwitch = function (_React$PureComponent) {
                 active = _props.active,
                 onClick = _props.onClick,
                 onSelectionClick = _props.onSelectionClick,
-                selection = _props.selection;
+                selection = _props.selection,
+                selectionTitle = _props.selectionTitle;
 
             var selectionProps = {
                 tabIndex: '-1'
@@ -223,7 +224,8 @@ var HiChipSwitch = function (_React$PureComponent) {
                     onClick: this.handleClickSelection,
                     role: 'button',
                     tabIndex: '0',
-                    onKeyDown: this.handleKeyDownSelection
+                    onKeyDown: this.handleKeyDownSelection,
+                    title: selectionTitle
                 };
             }
 
@@ -267,7 +269,8 @@ var HiChipSwitch = function (_React$PureComponent) {
 HiChipSwitch.defaultProps = {
     activeIcon: 'check',
     active: false,
-    selection: null
+    selection: null,
+    selectionTitle: ''
 };
 HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -301,6 +304,10 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * nombre de valeurs selectionnées.
      */
-    selection: _propTypes2.default.number
+    selection: _propTypes2.default.number,
+    /**
+     * Title de la selection.
+     */
+    selectionTitle: _propTypes2.default.string
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiChipSwitch' })(HiChipSwitch);