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

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);

package/es/HiBreadcrumb/HiStepConnector.js

@@ -4,31 +4,28 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '../styles';
+import HiStepContent from './HiStepContent';
 
 export const styles = theme => ({
     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'
     }
 });
 
@@ -36,32 +33,88 @@ export const styles = theme => ({
  * @ignore - internal component.
  */
 class HiStepConnector extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            width: 1280,
+            height: 800
+        };
+
+        this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+    }
+
+    componentDidMount() {
+        this.updateWindowDimensions();
+        window.addEventListener('resize', this.updateWindowDimensions);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.updateWindowDimensions);
+    }
+
+    updateWindowDimensions() {
+        this.setState({ width: window.innerWidth, height: window.innerHeight });
+    }
+
     render() {
         const _props = this.props,
               {
+            active,
             className: classNameProp,
             classes,
-            orientation,
+            content,
+            steps,
+            type,
             validConnector
         } = _props,
-              other = _objectWithoutProperties(_props, ['className', 'classes', 'orientation', 'validConnector']);
+              other = _objectWithoutProperties(_props, ['active', 'className', 'classes', 'content', 'steps', 'type', 'validConnector']);
 
-        const className = classNames(classes.root, classes[orientation], classNameProp);
+        const { width, height } = this.state;
+
+        const className = classNames(classes.root, classNameProp);
         const lineClassName = classNames(classes.line, {
-            [classes.lineHorizontal]: orientation === 'horizontal',
-            [classes.lineVertical]: orientation === 'vertical',
-            [classes.lineVerticalGreen]: orientation === 'vertical' && validConnector
+            [classes.greenLine]: validConnector,
+            [classes.lightLine]: type === 'front-light'
         });
 
+        let 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;
+            }
+        }
+
+        let heightStyle = {};
+        if (active) {
+            heightStyle = { height: lineHeight };
+        }
+
         return React.createElement(
             'div',
             _extends({ className: className }, other),
-            React.createElement('span', { className: lineClassName })
+            React.createElement('span', { className: lineClassName, style: heightStyle }),
+            type === 'front-light' && active && content && React.createElement(HiStepContent, { content: content })
         );
     }
 }
 
+HiStepConnector.defaultProps = {
+    active: false,
+    content: React.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: PropTypes.bool,
     /**
      * Useful to extend the style applied to the component.
      */
@@ -71,13 +124,20 @@ HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     className: PropTypes.string,
     /**
-     * @ignore
+     * The content to be displayed in the case of front-light breadcrumb
+     */
+    content: PropTypes.node,
+    /**
+     * The collection of steps of the breadcrumb.
      */
-    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+    steps: PropTypes.array,
+    /**
+     * specifies which type of breadcrumb is used
+     */
+    type: PropTypes.oneOf(['back', 'front-dark', 'front-light']),
+    /**
+     * Specifies if the connector should be displayed in green or its default color
+     */
+    validConnector: PropTypes.bool
 } : {};
-
-HiStepConnector.defaultProps = {
-    orientation: 'vertical'
-};
-
 export default withStyles(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);

package/es/HiBreadcrumb/HiStepContent.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+import Paper from '../Paper';
+
+export const styles = theme => ({
+    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
+    }
+});
+
+class HiStepContent extends React.PureComponent {
+
+    render() {
+        const { content, classes, isLast } = this.props;
+
+        return React.createElement(
+            Paper,
+            {
+                square: true,
+                className: classNames(classes.contentContainer, {
+                    [classes.lastStep]: isLast
+                })
+            },
+            React.createElement(
+                'div',
+                { className: classes.root },
+                content
+            )
+        );
+    }
+}
+
+HiStepContent.defaultProps = {
+    content: React.createElement('span', null),
+    isLast: false
+};
+HiStepContent.propTypes = process.env.NODE_ENV !== "production" ? {
+    content: PropTypes.node,
+    isLast: PropTypes.bool
+} : {};
+export default withStyles(styles, { name: 'MuiHiStepContent' })(HiStepContent);