@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -1,73 +1,72 @@
-import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '../styles';
-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
-    }
-});
+import HiStepLabel from './HiStepLabel';
+import HiStepper from './HiStepper';
 
 class HiBreadcrumb extends React.PureComponent {
-    constructor(...args) {
-        var _temp;
+  constructor(...args) {
+    super(...args);
 
-        return _temp = super(...args), this.handleStep = idx => () => {
-            this.props.handleStep(idx);
-        }, _temp;
-    }
+    this.handleStep = idx => () => {
+      this.props.handleStep(idx);
+    };
+  }
 
-    render() {
-        const { activeStep, steps } = this.props;
+  render() {
+    const {
+      activeStep,
+      steps,
+      type
+    } = this.props;
+    return React.createElement(HiStepper, {
+      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' || steps[index + 1].status === 'active');
+      return React.createElement(HiStep, {
+        index: index,
+        content: step.content,
+        key: step.id,
+        onClick: this.handleStep(index),
+        isLast: index === steps.length - 1,
+        validConnector: validConnector,
+        type: type,
+        steps: steps
+      }, React.createElement(HiStepLabel, {
+        active: activeStep === index,
+        status: step.status,
+        notificationNumber: step.notificationNumber,
+        type: type
+      }, step.label));
+    })));
+  }
 
-        return React.createElement(
-            HiStepper,
-            { activeStep: activeStep },
-            React.createElement(
-                'div',
-                null,
-                steps.map((step, index) => {
-                    const validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
-                    return React.createElement(
-                        HiStep,
-                        {
-                            key: step.id,
-                            onClick: this.handleStep(index),
-                            isLast: index === steps.length - 1,
-                            validConnector: validConnector
-                        },
-                        React.createElement(
-                            HiStepLabel,
-                            {
-                                active: activeStep === index,
-                                status: step.status,
-                                notificationNumber: step.notificationNumber
-                            },
-                            step.label
-                        )
-                    );
-                })
-            )
-        );
-    }
 }
 
 HiBreadcrumb.defaultProps = {
-    activeStep: 0
+  activeStep: 0,
+  type: 'back'
 };
 HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
-    activeStep: PropTypes.number,
-    steps: PropTypes.array.isRequired,
-    handleStep: PropTypes.func
+  /**
+   * Which step is the active one
+   */
+  activeStep: PropTypes.number,
+
+  /**
+   * The callback function handling the flow from one step to another
+   */
+  handleStep: PropTypes.func,
+
+  /**
+   * The collection of steps of the breadcrumb.
+   */
+  steps: PropTypes.array.isRequired,
+
+  /**
+   * The Breadcrumb type
+   */
+  type: PropTypes.oneOf(['back', 'front-dark', 'front-light'])
 } : {};
-export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);
+export default HiBreadcrumb;

package/es/HiBreadcrumb/HiStep.js

@@ -1,93 +1,125 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 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';
-
-export const styles = theme => ({
-    root: {},
-    horizontal: {
-        paddingLeft: theme.spacing.unit,
-        paddingRight: theme.spacing.unit,
-        '&:first-child': {
-            paddingLeft: 0
-        },
-        '&:last-child': {
-            paddingRight: 0
-        }
-    },
-    vertical: {}
+import HiStepContent from './HiStepContent';
+export const styles = () => ({
+  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']);
+class HiStep extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
 
-    const className = classNames(classes.root, classes[orientation], classNameProp);
+    this.focus = () => this.ref.focus;
 
-    return React.createElement(
-        'div',
-        _extends({ className: className }, other),
-        React.Children.map(children, child => React.cloneElement(child, _extends({
-            active,
-            icon: index + 1,
-            orientation
-        }, child.props))),
-        !isLast && React.createElement(HiStepConnector, { orientation: 'vertical', validConnector: validConnector })
-    );
-}
+    this.handleRef = component => {
+      this.ref = component;
+    };
+  }
 
-HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Sets the step as active. Is passed to child components.
-     */
-    active: PropTypes.bool,
-    /**
-     * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
-     */
-    children: PropTypes.node,
-    /**
-     * @ignore
-     */
-    classes: PropTypes.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-    /**
-     * @ignore
-     * Used internally for numbering.
-     */
-    index: PropTypes.number,
-    /**
-     * @ignore
-     * Used to know which step is the last, to not put a HiStepConnector
-     */
-    isLast: PropTypes.bool,
-    /**
-     * @ignore
-     */
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    /**
-     * @ignore
-     */
-    validConnector: PropTypes.bool
-} : {};
+  render() {
+    const {
+      active,
+      children,
+      classes,
+      content,
+      index,
+      isLast,
+      onClick,
+      steps,
+      type,
+      validConnector
+    } = this.props;
+    return React.createElement("div", {
+      role: "button",
+      tabIndex: index,
+      className: classNames({
+        [classes.lastStep]: isLast && type !== 'back'
+      }),
+      onClick: onClick,
+      onKeyDown: onClick
+    }, React.Children.map(children, child => React.cloneElement(child, _objectSpread({
+      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,
-    validConnector: false
+  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.
+   */
+  active: PropTypes.bool,
+
+  /**
+   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Surcharge des classes
+   */
+  classes: PropTypes.object,
+
+  /**
+   * The content to be displayed in the case of front-light breadcrumb
+   */
+  content: PropTypes.node,
+
+  /**
+   * Index de l'étape
+   */
+  index: PropTypes.number.isRequired,
 
-export default withStyles(styles, { name: 'MuiStep' })(HiStep);
+  /**
+   * @ignore
+   * Used to know which step is the last, to not put a HiStepConnector
+   */
+  isLast: PropTypes.bool,
+
+  /**
+   * Callback on step container click
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The collection of steps of the breadcrumb.
+   */
+  steps: PropTypes.array,
+
+  /**
+   * @ignore
+   */
+  type: PropTypes.oneOf(['back', 'front-light', 'front-dark']),
+
+  /**
+   * @ignore
+   */
+  validConnector: PropTypes.bool
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'MuiHiStep'
+})(HiStep);

package/es/HiBreadcrumb/HiStepConnector.js

@@ -1,83 +1,157 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+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 HiStepContent from './HiStepContent';
 export const styles = theme => ({
-    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]
-    }
+  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.positive.main
+  },
+  lightLine: {
+    borderColor: '#FFFFFF'
+  }
 });
-
 /**
  * @ignore - internal component.
  */
+
 class HiStepConnector extends React.PureComponent {
-    render() {
-        const _props = this.props,
-              {
-            className: classNameProp,
-            classes,
-            orientation,
-            validConnector
-        } = _props,
-              other = _objectWithoutProperties(_props, ['className', 'classes', 'orientation', 'validConnector']);
-
-        const className = classNames(classes.root, classes[orientation], classNameProp);
-        const lineClassName = classNames(classes.line, {
-            [classes.lineHorizontal]: orientation === 'horizontal',
-            [classes.lineVertical]: orientation === 'vertical',
-            [classes.lineVerticalGreen]: orientation === 'vertical' && validConnector
-        });
-
-        return React.createElement(
-            'div',
-            _extends({ className: className }, other),
-            React.createElement('span', { className: lineClassName })
-        );
+  constructor(props) {
+    super(props);
+    this.state = {
+      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({
+      height: window.innerHeight
+    });
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      active,
+      className: classNameProp,
+      classes,
+      content,
+      steps,
+      type,
+      validConnector
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["active", "className", "classes", "content", "steps", "type", "validConnector"]);
+
+    const {
+      height
+    } = this.state;
+    const className = classNames(classes.root, classNameProp);
+    const lineClassName = classNames(classes.line, {
+      [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;
+      }
     }
-}
 
-HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to the component.
-     */
-    classes: PropTypes.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-    /**
-     * @ignore
-     */
-    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
-} : {};
+    let heightStyle = {};
+
+    if (active) {
+      heightStyle = {
+        height: lineHeight
+      };
+    }
+
+    return React.createElement("div", _extends({
+      className: className
+    }, other), React.createElement("span", {
+      className: lineClassName,
+      style: heightStyle
+    }), type === 'front-light' && active && content && React.createElement(HiStepContent, {
+      content: content
+    }));
+  }
+
+}
 
 HiStepConnector.defaultProps = {
-    orientation: 'vertical'
+  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,
 
-export default withStyles(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);
+  /**
+   * Useful to extend the style applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The content to be displayed in the case of front-light breadcrumb
+   */
+  content: PropTypes.node,
+
+  /**
+   * The collection of steps of the breadcrumb.
+   */
+  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
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'MuiHiStepConnector'
+})(HiStepConnector);

package/es/HiBreadcrumb/HiStepContent.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Paper from '@material-ui/core/Paper';
+import { withStyles } from '../styles';
+export const styles = () => ({
+  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 {
+      classes,
+      content,
+      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" ? {
+  /**
+   * Surcharge des classes
+   */
+  classes: PropTypes.object,
+  content: PropTypes.node,
+  isLast: PropTypes.bool
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'MuiHiStepContent'
+})(HiStepContent);