@hipay/hipay-material-ui 1.0.0-beta.1

package/es/HiChip/HiChip.js

@@ -0,0 +1,148 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import HiIconBuilder from '../utils/HiIconBuilder';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+    root: _extends({}, theme.typography.body3, {
+        display: 'inline-flex',
+        marginRight: 4,
+        width: 'fit-content',
+        height: 24,
+        borderRadius: 12,
+        fontSize: 13,
+        backgroundColor: theme.palette.chipBackground,
+        color: theme.palette.neutral.normal,
+        padding: 8,
+        alignItems: 'center',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        '&$rightNavigation': {
+            paddingRight: 2
+        },
+        '&$leftNavigation': {
+            paddingLeft: 2
+        },
+        '&$deletable': {
+            paddingRight: 4
+        }
+    }),
+    leftNavigation: {},
+    rightNavigation: {},
+    deletable: {},
+    icon: {
+        marginRight: 4
+    },
+    eraseIcon: {
+        // Remove grey highlight
+        WebkitTapHighlightColor: 'transparent',
+        marginLeft: 4,
+        position: 'relative',
+        cursor: 'pointer',
+        '&:hover, &:focus': {
+            color: theme.palette.business.primary.normal
+        }
+    },
+    label: {
+        userSelect: 'none',
+        whiteSpace: 'nowrap',
+        color: theme.palette.neutral.dark,
+        overflow: 'hidden',
+        width: '100%',
+        textOverflow: 'ellipsis'
+    },
+    navigate: {
+        // Remove grey highlight
+        WebkitTapHighlightColor: 'transparent',
+        backgroundColor: theme.palette.chipBackground,
+        color: theme.palette.neutral.normal,
+        marginRight: 2,
+        marginLeft: 2,
+        borderRadius: 10,
+        cursor: 'pointer',
+        '&:hover, &:focus': {
+            backgroundColor: theme.palette.business.primary.normal,
+            color: theme.palette.chipBackground
+        }
+    },
+    badge: {
+        height: 16,
+        paddingLeft: '2px',
+        paddingRight: '8px'
+    }
+});
+
+function HiChip(props) {
+    const { label, classes, icon, img, onPrevious, onNext, onDelete } = props;
+
+    return React.createElement(
+        'div',
+        {
+            className: classNames(classes.root, {
+                [classes.leftNavigation]: onPrevious,
+                [classes.rightNavigation]: onNext,
+                [classes.deletable]: onDelete
+            })
+        },
+        img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
+        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon }),
+        onPrevious && React.createElement(HiIconBuilder, {
+            className: classNames(classes.navigate),
+            icon: 'menuLeft',
+            onClick: onPrevious,
+            size: 20
+        }),
+        React.createElement(
+            'span',
+            { className: classes.label },
+            label
+        ),
+        onNext && React.createElement(HiIconBuilder, {
+            className: classNames(classes.navigate),
+            icon: 'menuRight',
+            onClick: onNext,
+            size: 20
+        }),
+        onDelete && React.createElement(HiIconBuilder, {
+            classes: { root: classes.eraseIcon },
+            icon: 'closeCircle',
+            onClick: onDelete,
+            size: 20
+        })
+    );
+}
+
+HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Icone affiché à gauche
+     */
+    icon: PropTypes.string,
+    /**
+     * Ajoute une image à gauche du Chip
+     */
+    img: PropTypes.string,
+    /**
+     * Label qu'affiche le Chip
+     */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    /**
+     * Fonction de callback au clic sur l'icon close si cancelable = true
+     */
+    onDelete: PropTypes.func,
+    /**
+     * Fonction de callback au clic sur l'icon next
+     */
+    onNext: PropTypes.func,
+    /**
+     * Fonction de callback au clic sur l'icon previous
+     */
+    onPrevious: PropTypes.func
+} : {};
+
+export default withStyles(styles, { name: 'HmuiHiChip' })(HiChip);

package/es/HiChip/HiChipSwitch.js

@@ -0,0 +1,244 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import keycode from 'keycode/index';
+import HiIconBuilder from '../utils/HiIconBuilder';
+import withStyles from '../styles/withStyles';
+import { emphasize } from '../styles/colorManipulator';
+
+export const styles = theme => ({
+    root: _extends({}, theme.typography.body3, {
+        display: 'inline-flex',
+        alignItems: 'center',
+        marginRight: 4,
+        width: 'fit-content',
+        height: 24,
+        borderRadius: 12,
+        fontSize: 13,
+        cursor: 'pointer',
+        padding: '0 8px',
+        outline: 'none', // No outline on focused element in Chrome (as triggered by tabIndex prop)
+        // Remove grey highlight
+        WebkitTapHighlightColor: 'transparent',
+        '&:hover, &:focus': {
+            backgroundColor: emphasize(theme.palette.chipBackground, 0.08)
+        }
+    }),
+    active: {
+        backgroundColor: theme.palette.business.primary.normal,
+        color: theme.palette.neutral.contrast,
+        '&:hover, &:focus': {
+            backgroundColor: theme.palette.business.primary.dark
+        }
+    },
+    inactive: {
+        backgroundColor: theme.palette.chipBackground,
+        color: theme.palette.neutral.dark
+    },
+    icon: {
+        color: theme.palette.neutral.normal,
+        width: 16,
+        height: 16,
+        marginRight: 5
+    },
+    iconActive: {
+        color: theme.palette.neutral.contrast
+    },
+    tags: {
+        fontSize: 16,
+        paddingRight: 4,
+        paddingBottom: 4,
+        paddingTop: 4,
+        marginLeft: 4,
+        float: 'left'
+    },
+    label: {
+        userSelect: 'none',
+        whiteSpace: 'nowrap'
+    },
+    noSelection: {
+        marginRight: 4
+    },
+    selection: {
+        height: 16,
+        width: 24,
+        borderRadius: 8,
+        backgroundColor: 'white',
+        justifyContent: 'center',
+        color: theme.palette.neutral.dark,
+        textAlign: 'center',
+        marginLeft: 4,
+        outline: 'none', // No outline on focused element in Chrome (as triggered by tabIndex prop)
+        cursor: 'auto'
+    },
+    selectionClickable: {
+        // Remove grey highlight
+        WebkitTapHighlightColor: 'transparent',
+        cursor: 'pointer',
+        '&:hover, &:focus': {
+            backgroundColor: theme.palette.chipBackground
+        }
+    }
+});
+
+class HiChipSwitch extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.chipSwitchRef = null;
+
+        this.handleKeyDown = event => {
+            // Ignore events from children of `Chip`.
+            if (event.currentTarget !== event.target) {
+                return;
+            }
+
+            const { onClick, onKeyDown } = this.props;
+            const key = keycode(event);
+
+            if (onClick && (key === 'space' || key === 'enter')) {
+                event.preventDefault();
+                onClick(event);
+            } else if (key === 'esc') {
+                event.preventDefault();
+                if (this.chipSwitchRef) {
+                    this.chipSwitchRef.blur();
+                }
+            }
+
+            if (onKeyDown) {
+                onKeyDown(event);
+            }
+        };
+
+        this.handleKeyDownSelection = event => {
+            const { onSelectionClick } = this.props;
+            const key = keycode(event);
+
+            if (onSelectionClick && (key === 'space' || key === 'enter')) {
+                event.preventDefault();
+                onSelectionClick(event);
+            }
+        };
+
+        this.handleClickSelection = this.handleClickSelection.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleKeyDownSelection = this.handleKeyDownSelection.bind(this);
+    }
+
+
+    handleClickSelection(event) {
+        event.stopPropagation();
+        if (this.props.onSelectionClick) {
+            this.props.onSelectionClick();
+        }
+    }
+
+    render() {
+        const {
+            label,
+            classes,
+            activeIcon,
+            active,
+            onClick,
+            onSelectionClick,
+            selection
+        } = this.props;
+        let selectionProps = {
+            tabIndex: '-1'
+        };
+        if (onSelectionClick && selection !== 0) {
+            selectionProps = {
+                onClick: this.handleClickSelection,
+                role: 'button',
+                tabIndex: '0',
+                onKeyDown: this.handleKeyDownSelection
+            };
+        }
+
+        return React.createElement(
+            'div',
+            {
+                className: classNames(classes.root, {
+                    [classes.active]: !!active,
+                    [classes.inactive]: !active
+                }),
+                onClick: onClick,
+                role: 'button',
+                tabIndex: '0',
+                onKeyDown: this.handleKeyDown,
+                ref: node => {
+                    this.chipRef = node;
+                }
+            },
+            React.createElement(HiIconBuilder, {
+                icon: active ? activeIcon : 'plus',
+                size: 16,
+                className: classNames(classes.icon, {
+                    [classes.iconActive]: !!active
+                })
+            }),
+            React.createElement(
+                'span',
+                {
+                    className: classNames(classes.label, {
+                        [classes.noSelection]: selection === null
+                    })
+                },
+                label
+            ),
+            selection !== null && React.createElement(
+                'div',
+                _extends({
+                    className: classNames(classes.selection, {
+                        [classes.selectionClickable]: onSelectionClick && selection !== 0
+                    })
+                }, selectionProps),
+                selection
+            )
+        );
+    }
+}
+
+HiChipSwitch.defaultProps = {
+    activeIcon: 'check',
+    active: false,
+    selection: null
+};
+HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Actif ou inactif
+     */
+    active: PropTypes.bool.isRequired,
+    /**
+     * Icn affiché lorsque le filtre est actif
+     */
+    activeIcon: PropTypes.string,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Label qu'affiche le ChipFilter
+     */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    /**
+     * Fonction de callback appelée au clic sur le badge
+     */
+    onClick: PropTypes.func.isRequired,
+    /**
+     * @ignore
+     */
+    onKeyDown: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic sur le badge de la sélection
+     */
+    onSelectionClick: PropTypes.func,
+    /**
+     * nombre de valeurs selectionnées.
+     */
+    selection: PropTypes.number
+} : {};
+export default withStyles(styles, { name: 'HmuiHiChipSwitch' })(HiChipSwitch);

package/es/HiChip/index.js

@@ -0,0 +1,2 @@
+export { default } from './HiChip';
+export { default as HiChipSwitch } from './HiChipSwitch';

package/es/HiColoredLabel/HiColoredLabel.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import { getContrastedTextColor, fade } from '../styles/colorManipulator';
+
+export const styles = theme => ({
+    root: {
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        maxWidth: '100%',
+        padding: '2px 4px',
+        borderRadius: 2,
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    },
+    beta: {
+        fontWeight: 600,
+        fontSize: 12,
+        fontFamily: theme.typography.fontFamily,
+        paddingLeft: 9,
+        paddingRight: 9,
+        paddingTop: 3,
+        paddingBottom: 2
+    }
+});
+
+/**
+ * HiColoredLabel
+ *
+ * Label with background color & text color
+ */
+function HiColoredLabel(props) {
+    const { classes, label, color, active, beta } = props;
+    let fontWeight = 400;
+    if (beta) {
+        fontWeight = 600;
+    } else if (active) {
+        fontWeight = 500;
+    }
+    return React.createElement(
+        'div',
+        {
+            className: classNames(classes.root, { [classes.beta]: beta }),
+            style: {
+                backgroundColor: active ? color : fade(color, 0.08),
+                color: active ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : color,
+                fontWeight
+            }
+        },
+        label
+    );
+}
+
+HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Applique le style du label actif
+     * Background de la couleur pur et label blanc
+     */
+    active: PropTypes.bool,
+    /**
+     * Applique le style du label "BETA" dans la topBar
+     */
+    beta: PropTypes.bool,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Couleur du text & du background
+     */
+    color: PropTypes.string.isRequired,
+    /**
+     * Label à afficher
+     */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+} : {};
+
+HiColoredLabel.defaultProps = {
+    active: false
+};
+
+export default withStyles(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);

package/es/HiColoredLabel/index.js

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

package/es/HiDatePicker/Caption.js

@@ -0,0 +1,67 @@
+import _extends from 'babel-runtime/helpers/extends';
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+    caption: _extends({
+        display: 'table-caption',
+        height: 40,
+        textAlign: 'center',
+        padding: '10px 0'
+    }, theme.typography.body1, {
+        color: theme.palette.neutral.normal
+    }),
+    clickableSpan: {
+        cursor: 'pointer'
+    }
+});
+
+const Caption = ({ classes, date, localeUtils, onMonthClick, onYearClick }) => {
+    const months = localeUtils.getMonths();
+
+    return React.createElement(
+        'div',
+        { className: classes.caption },
+        React.createElement(
+            'span',
+            { className: classes.clickableSpan, onClick: onMonthClick },
+            months[date.getMonth()]
+        ),
+        '\xA0',
+        React.createElement(
+            'span',
+            { className: classes.clickableSpan, onClick: onYearClick },
+            date.getFullYear()
+        )
+    );
+};
+
+Caption.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * ReactDayPicker prop
+     */
+    date: PropTypes.object.isRequired,
+    /**
+     * ReactDayPicker prop
+     */
+    localeUtils: PropTypes.object.isRequired,
+    /**
+     * Fonction de callback au click
+     * Permet de modifier le mois
+     */
+    onMonthClick: PropTypes.func,
+    /**
+     * Fonction de callback au click
+     * Permet de modifier l'année
+     */
+    onYearClick: PropTypes.func
+} : {};
+
+export default withStyles(styles, { name: 'HmuiCaption' })(Caption);