@hipay/hipay-material-ui 1.0.0-beta.7 → 1.0.0-beta.8

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -0,0 +1,73 @@
+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
+    }
+});
+
+class HiBreadcrumb extends React.PureComponent {
+    constructor(...args) {
+        var _temp;
+
+        return _temp = super(...args), this.handleStep = idx => () => {
+            this.props.handleStep(idx);
+        }, _temp;
+    }
+
+    render() {
+        const { activeStep, steps } = this.props;
+
+        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
+};
+HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
+    activeStep: PropTypes.number,
+    steps: PropTypes.array.isRequired,
+    handleStep: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);

package/es/HiBreadcrumb/HiStep.js

@@ -0,0 +1,93 @@
+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 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: {}
+});
+
+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);
+
+    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 })
+    );
+}
+
+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
+} : {};
+
+HiStep.defaultProps = {
+    active: false,
+    validConnector: false
+};
+
+export default withStyles(styles, { name: 'MuiStep' })(HiStep);

package/es/HiBreadcrumb/HiStepConnector.js

@@ -0,0 +1,83 @@
+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';
+
+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]
+    }
+});
+
+/**
+ * @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 })
+        );
+    }
+}
+
+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'])
+} : {};
+
+HiStepConnector.defaultProps = {
+    orientation: 'vertical'
+};
+
+export default withStyles(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);

package/es/HiBreadcrumb/HiStepIcon.js

@@ -0,0 +1,81 @@
+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
+    },
+    activeWarning: {
+        boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
+        backgroundColor: theme.palette.middle.normal
+    }
+});
+
+class HiStepIcon extends React.PureComponent {
+    render() {
+        const { active, classes, status } = this.props;
+
+        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.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,
+
+    status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
+} : {};
+
+HiStepIcon.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    classes: {}
+};
+
+export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);

package/es/HiBreadcrumb/HiStepLabel.js

@@ -0,0 +1,154 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+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';
+
+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
+    }
+});
+
+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']);
+
+    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.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']),
+
+    status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
+} : {};
+
+HiStepLabel.defaultProps = {
+    active: false,
+    status: 'unreviewed',
+    orientation: 'vertical'
+};
+
+export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);

package/es/HiBreadcrumb/HiStepper.js

@@ -0,0 +1,62 @@
+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 Paper from '../Paper';
+
+export const styles = theme => ({
+    root: {
+        display: 'flex',
+        padding: theme.spacing.unit * 3,
+        maxWidth: 160,
+        flexDirection: 'column'
+    }
+});
+
+class HiStepper extends React.PureComponent {
+
+    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
+};
+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
+} : {};
+export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);

package/es/HiBreadcrumb/index.js

@@ -0,0 +1 @@
+export { default } from './HiBreadcrumb';

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -27,7 +27,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
             type = 'primary-highlight';
             break;
         case 'cd':
-            label = t.last_24h;
+            label = t.today;
             from = moment().subtract(1, 'day');
             to = moment();
             info = `${from.calendar()} ${t.to_now}`;

package/es/HiForm/HiFormControl.js

@@ -87,6 +87,17 @@ class HiFormControl extends React.PureComponent {
     constructor(props) {
         super(props);
 
+        this.handleFocus = value => () => {
+            this.setState({ focused: value });
+            if (value === false && this.state.hovered) {
+                this.setState({ hovered: false });
+            }
+        };
+
+        this.handleHover = value => () => {
+            this.setState({ hovered: value });
+        };
+
         this.state = {
             helperOpen: false,
             focused: false,
@@ -105,17 +116,6 @@ class HiFormControl extends React.PureComponent {
         }
     }
 
-    handleFocus(value) {
-        this.setState({ focused: value });
-        if (value === false && this.state.hovered) {
-            this.setState({ hovered: false });
-        }
-    }
-
-    handleHover(value) {
-        this.setState({ hovered: value });
-    }
-
     render() {
         const _props = this.props,
               {
@@ -195,10 +195,10 @@ class HiFormControl extends React.PureComponent {
             React.createElement(
                 'div',
                 {
-                    onMouseEnter: () => this.handleHover(true),
-                    onMouseLeave: () => this.handleHover(false),
-                    onFocus: () => this.handleFocus(true),
-                    onBlur: () => this.handleFocus(false)
+                    onMouseEnter: this.handleHover(true),
+                    onMouseLeave: this.handleHover(false),
+                    onFocus: this.handleFocus(true),
+                    onBlur: this.handleFocus(false)
                 },
                 children
             ),

package/es/HiForm/HiSearchField.js

@@ -85,7 +85,7 @@ class HiSearchField extends React.Component {
         if (typeof this.props.onSearch === 'undefined') {
             this.props.callbackFilteredList(this.props.itemList);
         } else {
-            this.props.onSearch('');
+            this.props.onSearch(undefined, '');
         }
     }
 

package/es/HiPins/HiPins.js

@@ -15,7 +15,6 @@ export const styles = theme => ({
         textAlign: 'center',
         borderRadius: '45px',
         verticalAlign: 'middle',
-        margin: 0.5 * theme.spacing.unit,
         fontSize: 11,
         fontWeight: theme.typography.fontWeightMedium,
         fontFamily: theme.typography.fontFamily

package/es/HiSelectableList/HiSelectableListItem.js

@@ -14,7 +14,8 @@ import HiColoredLabel from '../HiColoredLabel';
 export const styles = theme => ({
     listItem: {
         padding: `${9}px 0px`,
-        fontWeight: theme.typography.fontWeightRegular
+        fontWeight: theme.typography.fontWeightRegular,
+        maxHeight: 40
     },
     listItemTitle: {
         padding: `${9}px 0px`,
@@ -105,6 +106,11 @@ export const styles = theme => ({
             color: '#000000'
         }
     },
+    labelHighlightColored: {
+        '&>strong': {
+            fontWeight: theme.typography.fontWeightMedium
+        }
+    },
     primaryHighlight: {
         fontWeight: theme.typography.fontWeightMedium,
         color: theme.palette.business.primary.normal,
@@ -186,13 +192,7 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemTextClass, 'data-id': item.id },
-                        item.labelHighlight && React.createElement('span', {
-                            className: classes.labelHighlight,
-                            dangerouslySetInnerHTML: {
-                                __html: escapeHTML(item.labelHighlight)
-                            }
-                        }),
-                        !item.labelHighlight && this.getItemLabel(item),
+                        this.getItemLabel(item),
                         React.createElement(
                             'span',
                             { className: classes.listItemSecondaryText },
@@ -216,8 +216,20 @@ class HiSelectableListItem extends React.Component {
     }
 
     getItemLabel(item) {
-        if (item.color) {
+        const { classes } = this.props;
+        if (!item.labelHighlight && item.color && this.props.selected) {
             return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
+        } else if (item.labelHighlight) {
+            const mLabel = React.createElement('span', {
+                className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
+                dangerouslySetInnerHTML: {
+                    __html: escapeHTML(item.labelHighlight)
+                }
+            });
+            if (item.color && this.props.selected) {
+                return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
+            }
+            return mLabel;
         }
         return item.label;
     }