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

package/es/HiBreadcrumb/HiStepIcon.js

@@ -2,80 +2,150 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '../styles';
-
 export const styles = theme => ({
-    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
+  circle: {
+    borderRadius: '50%',
+    width: 16,
+    height: 16,
+    border: `solid 2px ${theme.palette.neutral.main}`,
+    marginLeft: 6,
+    display: 'inline-block'
+  },
+  dotAround: {
+    border: `2px solid ${theme.palette.neutral.main}`,
+    backgroundColor: 'transparent',
+    borderRadius: '100%',
+    width: 16,
+    height: 16,
+    marginLeft: 6,
+    '&:hover': {
+      transform: 'scale(1.2)'
+    }
+  },
+  dot: {
+    backgroundColor: theme.palette.neutral.main,
+    borderRadius: '100%',
+    width: 6,
+    height: 6,
+    '&:hover': {
+      transform: 'scale(1.2)'
     },
-    activeWarning: {
-        boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
-        backgroundColor: theme.palette.middle.normal
+    marginLeft: 8
+  },
+  activeStep: {
+    marginTop: 3,
+    marginLeft: 3,
+    width: 6,
+    height: 6,
+    '&:hover': {
+      transform: 'scale(1)'
     }
+  },
+  dotValidated: {
+    backgroundColor: theme.palette.positive.main,
+    border: `2px solid ${theme.palette.positive.main}`
+  },
+  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.main}`
+  },
+  dotActive: {
+    backgroundColor: '#00ADE9',
+    border: '2px solid #00ADE9'
+  },
+  dotLight: {
+    backgroundColor: '#FFFFFF',
+    border: '2px solid #FFFFFF'
+  },
+  validated: {
+    border: `2px solid ${theme.palette.positive.main}`
+  },
+  refused: {
+    border: `2px solid ${theme.palette.negative.main}`
+  },
+  warning: {
+    border: `2px solid ${theme.palette.middle.main}`
+  },
+  active: {
+    border: 'solid 2px #00ADE9'
+  },
+  light: {
+    border: 'solid 2px #FFFFFF'
+  }
 });
 
 class HiStepIcon extends React.PureComponent {
-    render() {
-        const { active, classes, status } = this.props;
+  render() {
+    const {
+      active,
+      classes,
+      status,
+      type
+    } = this.props;
+    const dotAroundClass = classNames(classes.dotAround, {
+      [classes.validated]: status === 'validated',
+      [classes.refused]: status === 'refused',
+      [classes.warning]: status === 'warning',
+      [classes.active]: status === 'active',
+      [classes.light]: type === 'front-light'
+    });
+    const innerDotClass = classNames(classes.dot, {
+      [classes.activeStep]: active,
+      [classes.dotValidated]: status === 'validated',
+      [classes.dotRefused]: status === 'refused',
+      [classes.dotWarning]: status === 'warning',
+      [classes.dotActive]: status === 'active',
+      [classes.dotLight]: type === 'front-light'
+    });
+    const dotClassName = classNames(classes.circle, {
+      [classes.refused]: status === 'refused',
+      [classes.validated]: status === 'validated',
+      [classes.warning]: status === 'warning',
+      [classes.active]: status === 'active',
+      [classes.light]: type === 'front-light'
+    });
+    return React.createElement("div", null, active && React.createElement("div", {
+      className: dotAroundClass
+    }, React.createElement("div", {
+      className: innerDotClass
+    })), !active && React.createElement("div", {
+      className: dotClassName
+    }));
+  }
 
-        return React.createElement('div', {
-            className: classNames(classes.circle, {
-                [classes.activeRefused]: status === 'refused' && active,
-                [classes.activeValidated]: status === 'validated' && active,
-                [classes.activeWarning]: status === 'warning' && active,
-                [classes.active]: active,
-                [classes.refused]: status === 'refused',
-                [classes.validated]: status === 'validated',
-                [classes.warning]: status === 'warning'
-            })
-        });
-    }
 }
 
+HiStepIcon.defaultProps = {
+  active: false,
+  status: 'unreviewed',
+  type: 'back'
+};
 HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Whether this step is active.
-     */
-    active: PropTypes.bool,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object.isRequired,
+  /**
+   * Whether this step is active.
+   */
+  active: PropTypes.bool,
 
-    status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
-} : {};
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
 
-HiStepIcon.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    classes: {}
-};
+  /**
+   * The status of the step in case of back or front-dark type Breadcrumb
+   */
+  status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed', 'active']),
 
-export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);
+  /**
+   * The type of Breadcrumb used
+   */
+  type: PropTypes.oneOf(['back', 'front-light', 'front-dark'])
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'MuiHiStepIcon'
+})(HiStepIcon);

package/es/HiBreadcrumb/HiStepLabel.js

@@ -1,154 +1,189 @@
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-import _extends from 'babel-runtime/helpers/extends';
+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 HiStepIcon from './HiStepIcon';
-import HiPin from '../HiPins';
-
+import HiPin from '../HiPin';
 export const styles = theme => ({
-    root: {
-        display: 'flex',
-        alignItems: 'center'
-    },
-    test: {
-        marginLeft: '0 '
-    },
-    vertical: {
-        marginTop: -10,
-        marginBottom: -6
-    },
-    label: _extends({
-        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
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: -11,
+    marginBottom: -5
+  },
+  frontRoot: {
+    marginTop: -12,
+    marginBottom: -7
+  },
+  frontDarkRoot: {
+    marginTop: -13,
+    marginBottom: -6
+  },
+  hipin: {
+    marginLeft: 0
+  },
+  label: _objectSpread({
+    display: 'inline-block',
+    marginLeft: 4,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: theme.palette.neutral.main,
+    marginBottom: -4,
+    '&:hover': {
+      cursor: 'pointer'
     }
+  }, theme.typography.b2),
+  labelContainer: {
+    marginBottom: 4
+  },
+  largeLabelContainer: {
+    maxWidth: 300
+  },
+  shortLabelContainer: {
+    maxWidth: 160
+  },
+  frontLabel: {
+    fontSize: 18,
+    fontWeight: theme.typography.fontWeightLight,
+    marginLeft: 11
+  },
+  validated: {
+    color: theme.palette.positive.main
+  },
+  refused: {
+    color: theme.palette.negative.main
+  },
+  active: {
+    color: '#00ADE9'
+  },
+  activeStep: {
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  warning: {
+    color: theme.palette.middle.main
+  },
+  light: {
+    color: '#FFFFFF'
+  },
+  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) {
-    const {
-        active,
-        children,
-        classes,
-        className: classNameProp,
-        icon,
-        notificationNumber,
-        orientation,
-        status
-    } = props,
-          other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'icon', 'notificationNumber', 'orientation', 'status']);
+class HiStepLabel extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      active,
+      children,
+      classes,
+      className: classNameProp,
+      notificationNumber,
+      status,
+      type
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["active", "children", "classes", "className", "notificationNumber", "status", "type"]);
+
+    return React.createElement("span", _extends({
+      className: classNames(classes.root, classNameProp, {
+        [classes.frontRoot]: type === 'front-light',
+        [classes.frontDarkRoot]: type === 'front-dark'
+      })
+    }, other), React.createElement("span", {
+      className: classes.iconContainer
+    }, React.createElement(HiStepIcon, {
+      active: active,
+      status: status,
+      type: type
+    })), React.createElement("span", {
+      className: classNames(classes.labelContainer, {
+        [classes.largeLabelContainer]: type !== 'back',
+        [classes.shortLabelContainer]: type === 'back'
+      })
+    }, React.createElement("div", {
+      className: classNames(classes.label, {
+        [classes.validated]: status === 'validated',
+        [classes.refused]: status === 'refused',
+        [classes.warning]: status === 'warning',
+        [classes.active]: status === 'active',
+        [classes.light]: type === 'front-light',
+        [classes.activeStep]: active,
+        [classes.frontLabel]: type !== 'back',
+        [classes.shortEllipsis]: notificationNumber > 0,
+        [classes.longEllipsis]: notificationNumber === 0 && type === 'back'
+      })
+    }, children), notificationNumber > 0 && React.createElement("span", {
+      className: classes.pin
+    }, React.createElement(HiPin, {
+      className: classes.hipin,
+      color: "primary"
+    }, notificationNumber))));
+  }
 
-    return React.createElement(
-        'span',
-        _extends({
-            className: classNames(classes.root, {
-                [classes.vertical]: orientation === 'vertical'
-            }, classNameProp)
-        }, other),
-        icon && React.createElement(
-            'span',
-            { className: classes.iconContainer },
-            React.createElement(HiStepIcon, { active: active, status: status })
-        ),
-        React.createElement(
-            'span',
-            { className: classes.labelContainer },
-            React.createElement(
-                'div',
-                {
-                    className: classNames(classes.label, {
-                        [classes.validated]: status === 'validated',
-                        [classes.refused]: status === 'refused',
-                        [classes.warning]: status === 'warning',
-                        [classes.active]: active,
-                        [classes.shortEllipsis]: notificationNumber > 0,
-                        [classes.longEllipsis]: notificationNumber === 0
-                    })
-                },
-                children
-            ),
-            notificationNumber > 0 && React.createElement(
-                'span',
-                { className: classes.pin },
-                React.createElement(
-                    HiPin,
-                    {
-                        color: props.theme.palette.business.primary.normal,
-                        className: classes.test
-                    },
-                    notificationNumber
-                )
-            )
-        )
-    );
 }
 
+HiStepLabel.defaultProps = {
+  active: false,
+  children: '',
+  notificationNumber: 0,
+  status: 'unreviewed',
+  type: 'back'
+};
 HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * @ignore
-     * Sets the step as active. Is passed to child components.
-     */
-    active: PropTypes.bool,
-    /**
-     * In most cases will simply be a string containing a title for the label.
-     */
-    children: PropTypes.node,
-    /**
-     * Custom styles for component.
-     */
-    classes: PropTypes.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-    /**
-     * @ignore
-     */
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * @ignore
+   * Sets the step as active. Is passed to child components.
+   */
+  active: PropTypes.bool,
 
-    status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
-} : {};
+  /**
+   * In most cases will simply be a string containing a title for the label.
+   */
+  children: PropTypes.node,
 
-HiStepLabel.defaultProps = {
-    active: false,
-    status: 'unreviewed',
-    orientation: 'vertical'
-};
+  /**
+   * Custom styles for component.
+   */
+  classes: PropTypes.object.isRequired,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The value to be displayed in the HiPin on the right of the label
+   */
+  notificationNumber: PropTypes.number,
 
-export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);
+  /**
+   * 'Unreviewed', 'refused', 'validated' et 'warning' sont les statuts pour tous les types de breadcrumb. 'active' est spécifique au Front dark
+   */
+  status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning', 'active']),
+
+  /**
+   * The Breadcrumb type
+   */
+  type: PropTypes.oneOf(['back', 'front-light', 'front-dark'])
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'MuiHiStepLabel',
+  withTheme: true
+})(HiStepLabel);

package/es/HiBreadcrumb/HiStepper.js

@@ -1,62 +1,54 @@
-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 Paper from '../Paper';
-
-export const styles = theme => ({
-    root: {
-        display: 'flex',
-        padding: theme.spacing.unit * 3,
-        maxWidth: 160,
-        flexDirection: 'column'
-    }
+export const styles = () => ({
+  root: {
+    width: 340
+  }
 });
 
 class HiStepper extends React.PureComponent {
+  render() {
+    const {
+      classes,
+      activeStep,
+      children
+    } = this.props;
+    const childrenArray = React.Children.toArray(children.props.children);
+    const steps = childrenArray.map((step, index) => {
+      return React.cloneElement(step, _objectSpread({
+        index,
+        active: activeStep === index
+      }, step.props));
+    });
+    return React.createElement("div", {
+      className: classes.root
+    }, steps);
+  }
 
-    render() {
-        const _props = this.props,
-              { activeStep, children, classes, className: classNameProp } = _props,
-              other = _objectWithoutProperties(_props, ['activeStep', 'children', 'classes', 'className']);
-
-        const className = classNames(classes.root, classNameProp);
-
-        const childrenArray = React.Children.toArray(children.props.children);
-
-        const steps = childrenArray.map((step, index) => {
-            return React.cloneElement(step, _extends({ index, active: activeStep === index }, step.props));
-        });
-
-        return React.createElement(
-            Paper,
-            _extends({ square: true, elevation: 0, className: className }, other),
-            steps
-        );
-    }
 }
 
 HiStepper.defaultProps = {
-    activeStep: 0
+  activeStep: 0
 };
 HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Set the active step (zero based index).
-     */
-    activeStep: PropTypes.number,
-    /**
-     * Two or more `<Step />` components.
-     */
-    children: PropTypes.node.isRequired,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: PropTypes.string
+  /**
+   * Set the active step (zero based index).
+   */
+  activeStep: PropTypes.number,
+
+  /**
+   * Two or more `<Step />` components.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Custom styles for component.
+   */
+  classes: PropTypes.object.isRequired
 } : {};
-export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'MuiHiStepper'
+})(HiStepper);