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

package/HiTable/BodyCells/CellIcon.js

@@ -53,20 +53,21 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        icon: {
-            float: 'left'
-        },
-        label: {
-            margin: 5
-        },
-        wrapper: {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        }
-    };
+var styles = exports.styles = {
+    icon: {
+        float: 'left'
+    },
+    label: {
+        margin: 5
+    },
+    wrapper: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
+    }
 };
 
 /**
@@ -89,14 +90,15 @@ var CellIcon = function (_React$PureComponent) {
                 classes = _props.classes,
                 icon = _props.icon,
                 value = _props.value,
-                view = _props.view;
+                view = _props.view,
+                color = _props.color;
 
 
-            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 18 }) : '';
+            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
 
             var tooltipContent = _react2.default.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 iconElement,
                 _react2.default.createElement(
                     'span',
@@ -126,7 +128,8 @@ var CellIcon = function (_React$PureComponent) {
 
 CellIcon.defaultProps = {
     icon: '',
-    view: 'l'
+    view: 'l',
+    color: '#000'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -134,7 +137,11 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: _propTypes2.default.object,
     /**
-     * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     * Couleur de l'icône
+     */
+    color: _propTypes2.default.string.isRequired,
+    /**
+     * Icon name [from material-design-icons](https://materialdesignicons.com/)
      * used by HiIconBuilder
      */
     icon: _propTypes2.default.string,

package/HiTable/BodyCells/CellImage.js

@@ -52,12 +52,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles(theme) {
     return {
         img: {
-            width: 24,
             height: 'auto',
             float: 'left'
         },
         smallImg: {
-            width: 24,
             height: 'auto'
         },
         label: {
@@ -66,20 +64,18 @@ var styles = exports.styles = function styles(theme) {
         tooltipImg: {
             width: 24,
             height: 'auto',
-            float: 'left',
-            marginTop: 2
+            float: 'left'
         },
         tooltipLabel: {
             marginLeft: 5,
-            position: 'relative',
-            bottom: 2,
             verticalAlign: 'middle'
-
         },
         wrapper: {
+            display: 'flex',
+            alignItems: 'center',
             whiteSpace: 'nowrap',
-            overflow: "hidden",
-            textOverflow: "ellipsis"
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
         },
         center: {
             textAlign: 'center'
@@ -112,13 +108,14 @@ var CellImage = function (_React$PureComponent) {
                 classes = _props.classes,
                 path = _props.path,
                 value = _props.value,
-                view = _props.view;
+                view = _props.view,
+                size = _props.size;
 
 
             var tooltipContent = _react2.default.createElement(
                 'div',
                 { className: classes.tooltipContainer },
-                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
+                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
                 _react2.default.createElement(
                     'span',
                     { className: classes.tooltipLabel },
@@ -132,13 +129,13 @@ var CellImage = function (_React$PureComponent) {
                     innerCellElement = _react2.default.createElement(
                         'div',
                         { className: classes.center },
-                        _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg })
+                        _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg, width: size })
                     );
                 } else {
                     innerCellElement = _react2.default.createElement(
                         'div',
                         { className: classes.wrapper },
-                        _react2.default.createElement('img', { src: path, alt: value, className: classes.img }),
+                        _react2.default.createElement('img', { src: path, alt: value, className: classes.img, width: size }),
                         !!value && _react2.default.createElement(
                             'span',
                             { className: classes.label },
@@ -173,6 +170,9 @@ var CellImage = function (_React$PureComponent) {
     return CellImage;
 }(_react2.default.PureComponent);
 
+CellImage.defaultProps = {
+    size: 24
+};
 CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
@@ -182,6 +182,10 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
      * Image path
      */
     path: _propTypes2.default.string,
+    /**
+     * Image path
+     */
+    size: _propTypes2.default.number.isRequired,
     /**
      * Value
      */

package/HiTable/BodyCells/CellNumeric.js

@@ -79,7 +79,8 @@ var CellNumeric = function (_React$PureComponent) {
                 value = _props.value,
                 locale = _props.locale,
                 currency = _props.currency,
-                view = _props.view;
+                view = _props.view,
+                precision = _props.precision;
 
 
             var displayedValue = '';
@@ -93,7 +94,7 @@ var CellNumeric = function (_React$PureComponent) {
                     titleValue = (0, _hiHelpers.formatCurrencyAmount)(value, cst.VIEWS.LARGE, locale, currency);
                 }
             } else {
-                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale);
+                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale, precision);
             }
 
             return _react2.default.createElement(
@@ -127,6 +128,10 @@ CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
      * Code de la devise (ISO 4217)
      */
     currency: _propTypes2.default.string,
+    /**
+     * Nombre de chiffres après la virgule
+     */
+    precision: _propTypes2.default.number,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellSentinel.js

@@ -51,16 +51,17 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        smartDecision: {
-            display: 'inline-block',
-            minWidth: 18
-        },
-        label: {
-            marginLeft: 2
-        }
-    };
+var styles = exports.styles = {
+    smartDecision: {
+        display: 'inline-block',
+        minWidth: 18
+    },
+    label: {
+        marginLeft: 2
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
+    }
 };
 
 /**
@@ -135,17 +136,17 @@ var CellSentinel = function (_React$PureComponent) {
                 null,
                 _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     scoreLabel
                 ),
                 _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     fraudResult
                 ),
                 !!smartDecision && automaticFraudReviewResult && _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     'SD: ',
                     automaticFraudReviewResult
                 )

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -33,23 +33,24 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _mdiMaterialUi = require('mdi-material-ui');
+
 var _Tooltip = require('../../Tooltip');
 
 var _Tooltip2 = _interopRequireDefault(_Tooltip);
 
 var _styles = require('../../styles');
 
-var _mdiMaterialUi = require('mdi-material-ui');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        icon: {
-            width: 18,
-            height: 18
-        }
-    };
+var styles = exports.styles = {
+    icon: {
+        width: 18,
+        height: 18
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
+    }
 };
 
 /**
@@ -84,26 +85,45 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var icon = null;
             switch (value) {
                 case ECI_5:
-                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
+                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, {
+                        className: classes.icon,
+                        style: { color: theme.palette.positive.normal }
+                    });
                     break;
                 case ECI_6:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.middle.normal } });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, {
+                        className: classes.icon,
+                        style: { color: theme.palette.middle.normal }
+                    });
                     break;
                 case AUTH_1:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, {
+                        className: classes.icon,
+                        style: { color: theme.palette.neutral.light }
+                    });
                     break;
                 case AUTH_2:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, {
+                        className: classes.icon,
+                        style: { color: theme.palette.neutral.light }
+                    });
                     break;
                 case ECI_7:
                 case AUTH_0:
+                default:
                     icon = null;
                     break;
             }
 
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                { className: classes.nowrap },
+                label
+            );
+
             return _react2.default.createElement(
                 _Tooltip2.default,
-                { title: label, placement: this.props.sticky ? 'right' : 'bottom' },
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
                 _react2.default.createElement(
                     'div',
                     null,
@@ -120,6 +140,14 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
+    /**
+     * Label
+     */
+    label: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+    /**
+     * True si la colonne est sticky
+     */
+    sticky: _propTypes2.default.bool,
     /**
      * Useful to extend the theme applied to components.
      * Used theme props positive.normal, middle.normal, neutral.light
@@ -134,10 +162,6 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-    /**
-     * Label
-     */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);

package/HiTable/HeaderCell.js

@@ -215,6 +215,7 @@ var HeaderCell = function (_React$PureComponent) {
                 classes = _props.classes,
                 type = _props.type,
                 title = _props.title,
+                smallTitle = _props.smallTitle,
                 selectable = _props.selectable,
                 selected = _props.selected,
                 onSelect = _props.onSelect,
@@ -321,7 +322,7 @@ var HeaderCell = function (_React$PureComponent) {
                                 {
                                     className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                                 },
-                                title
+                                view !== 's' ? title : smallTitle ? smallTitle : title
                             ),
                             align !== 'right' && _icons
                         ) : _react2.default.createElement(
@@ -338,7 +339,7 @@ var HeaderCell = function (_React$PureComponent) {
                             _react2.default.createElement(
                                 'span',
                                 { className: classes.labelContainer, style: { width: '100%' } },
-                                title
+                                view !== 's' ? title : smallTitle ? smallTitle : title
                             )
                         )
                     ),

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -1,4 +1,3 @@
-import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '../styles';
@@ -6,17 +5,7 @@ import HiStepper from './HiStepper';
 import HiStepLabel from './HiStepLabel';
 import HiStep from './HiStep';
 
-export const styles = theme => ({
-    label: _extends({
-        display: 'inline-block',
-        marginLeft: 12,
-        fontWeight: theme.typography.fontWeightRegular,
-        color: theme.palette.neutral.normal
-    }, theme.typography.body3),
-    active: {
-        fontWeight: theme.typography.fontWeightMedium
-    }
-});
+export const styles = theme => ({});
 
 class HiBreadcrumb extends React.PureComponent {
     constructor(...args) {
@@ -28,30 +17,35 @@ class HiBreadcrumb extends React.PureComponent {
     }
 
     render() {
-        const { activeStep, steps } = this.props;
+        const { activeStep, steps, type } = this.props;
 
         return React.createElement(
             HiStepper,
-            { activeStep: activeStep },
+            { activeStep: activeStep, type: type },
             React.createElement(
                 'div',
                 null,
                 steps.map((step, index) => {
-                    const validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
+                    const validConnector = step.status === 'validated' && index < steps.length - 1 && (steps[index + 1].status === 'validated' || steps[index + 1].status === 'active');
+
                     return React.createElement(
                         HiStep,
                         {
+                            content: step.content,
                             key: step.id,
                             onClick: this.handleStep(index),
                             isLast: index === steps.length - 1,
-                            validConnector: validConnector
+                            validConnector: validConnector,
+                            type: type,
+                            steps: steps
                         },
                         React.createElement(
                             HiStepLabel,
                             {
                                 active: activeStep === index,
                                 status: step.status,
-                                notificationNumber: step.notificationNumber
+                                notificationNumber: step.notificationNumber,
+                                type: type
                             },
                             step.label
                         )
@@ -63,11 +57,25 @@ class HiBreadcrumb extends React.PureComponent {
 }
 
 HiBreadcrumb.defaultProps = {
-    activeStep: 0
+    activeStep: 0,
+    type: 'back'
 };
 HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Which step is the active one
+     */
     activeStep: PropTypes.number,
+    /**
+     * The collection of steps of the breadcrumb.
+     */
     steps: PropTypes.array.isRequired,
-    handleStep: PropTypes.func
+    /**
+     * The callback function handling the flow from one step to another
+     */
+    handleStep: PropTypes.func,
+    /**
+     * The Breadcrumb type
+     */
+    type: PropTypes.oneOf(['back', 'front-dark', 'front-light'])
 } : {};
 export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);

package/es/HiBreadcrumb/HiStep.js

@@ -1,53 +1,61 @@
 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';
 import { withStyles } from '../styles';
+import classNames from 'classnames';
 import HiStepConnector from './HiStepConnector';
+import HiStepContent from './HiStepContent';
 
 export const styles = theme => ({
-    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) {
-    const {
-        active,
-        children,
-        classes,
-        className: classNameProp,
-        index,
-        isLast,
-        orientation,
-        validConnector
-    } = props,
-          other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'index', 'isLast', 'orientation', 'validConnector']);
-
-    const className = classNames(classes.root, classes[orientation], classNameProp);
+class HiStep extends React.PureComponent {
 
-    return React.createElement(
-        'div',
-        _extends({ className: className }, other),
-        React.Children.map(children, child => React.cloneElement(child, _extends({
+    render() {
+        const {
             active,
-            icon: index + 1,
-            orientation
-        }, child.props))),
-        !isLast && React.createElement(HiStepConnector, { orientation: 'vertical', validConnector: validConnector })
-    );
+            children,
+            classes,
+            content,
+            isLast,
+            onClick,
+            steps,
+            type,
+            validConnector
+        } = this.props;
+
+        return React.createElement(
+            'div',
+            {
+                className: classNames({ [classes.lastStep]: isLast && type !== 'back' }),
+                onClick: onClick
+            },
+            React.Children.map(children, child => React.cloneElement(child, _extends({
+                active
+            }, child.props))),
+            !isLast && React.createElement(HiStepConnector, {
+                validConnector: validConnector,
+                type: type,
+                steps: steps,
+                active: active,
+                content: content
+            }),
+            content && active && isLast && type === 'front-light' && React.createElement(HiStepContent, { content: content, isLast: true })
+        );
+    }
 }
 
+HiStep.defaultProps = {
+    active: false,
+    content: React.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.
@@ -58,36 +66,29 @@ HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     children: PropTypes.node,
     /**
-     * @ignore
+     * The content to be displayed in the case of front-light breadcrumb
      */
-    classes: PropTypes.object.isRequired,
+    content: PropTypes.node,
     /**
      * @ignore
+     * Used to know which step is the last, to not put a HiStepConnector
      */
-    className: PropTypes.string,
+    isLast: PropTypes.bool,
     /**
-     * @ignore
-     * Used internally for numbering.
+     * Callback on step container click
      */
-    index: PropTypes.number,
+    onClick: PropTypes.func,
     /**
-     * @ignore
-     * Used to know which step is the last, to not put a HiStepConnector
+     * The collection of steps of the breadcrumb.
      */
-    isLast: PropTypes.bool,
+    steps: PropTypes.array,
     /**
      * @ignore
      */
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    type: PropTypes.oneOf(['back', 'front-light', 'front-dark']),
     /**
      * @ignore
      */
     validConnector: PropTypes.bool
 } : {};
-
-HiStep.defaultProps = {
-    active: false,
-    validConnector: false
-};
-
-export default withStyles(styles, { name: 'MuiStep' })(HiStep);
+export default withStyles(styles, { name: 'MuiHiStep' })(HiStep);