@hipay/hipay-material-ui 3.11.2 → 3.12.0

package/src/HiCheckbox/HiCheckbox.test.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { createMount, createShallow } from '../test-utils';
+import Checkbox from '@mui/material/Checkbox';
+import HiCheckbox from './HiCheckbox';
+
+describe('<HiCheckbox/>', () => {
+    let shallow;
+    let mount;
+
+    beforeEach(() => {
+        shallow = createShallow({ dive: true });
+        mount = createMount();
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
+
+    it('Should render a Checkbox', () => {
+        const wrapper = shallow(<HiCheckbox />);
+        assert.strictEqual(wrapper.find(Checkbox).length, 1, 'render checkbox');
+    });
+
+    const event = {
+        target: {
+            checked: false,
+        },
+    };
+
+    it('should call onChange exactly once with event', () => {
+        const onChangeSpy = spy();
+        const wrapper = mount(<HiCheckbox onChange={onChangeSpy} />);
+
+        assert.strictEqual(onChangeSpy.callCount, 0);
+
+        wrapper.find('input').simulate('change', event);
+        assert.strictEqual(onChangeSpy.callCount, 1);
+        assert.strictEqual(onChangeSpy.args[0][0].target, event.target);
+
+        onChangeSpy.resetHistory();
+    });
+
+    it('should call onChange exactly once with event', () => {
+        const onChangeSpy = spy();
+        const wrapper = mount(<HiCheckbox onChange={onChangeSpy} />);
+
+        assert.strictEqual(onChangeSpy.callCount, 0);
+
+        wrapper.find('input').simulate('change', null);
+        assert.strictEqual(onChangeSpy.callCount, 1);
+
+        onChangeSpy.resetHistory();
+    });
+
+    it('should mount', () => {
+        const wrapper = mount(<HiCheckbox onChange={undefined} />);
+
+        assert.strictEqual(wrapper.find(Checkbox).length, 1, 'render checkbox');
+    });
+});

package/src/HiCheckbox/index.js

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

package/src/HiChip/HiChip.js

@@ -0,0 +1,344 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import keycode from 'keycode';
+import HiIcon from '../HiIcon';
+import makeStyles from '@mui/styles/makeStyles';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        ...theme.typography.b3,
+        display: 'inline-flex',
+        marginRight: 4,
+        width: 'fit-content',
+        height: 24,
+        borderRadius: 12,
+        fontSize: 13,
+        backgroundColor: theme.palette.grey[300],
+        color: theme.palette.neutral.dark,
+        padding: 8,
+        alignItems: 'center',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        '&$rightNavigation': {
+            paddingRight: 2,
+        },
+        '&$leftNavigation': {
+            paddingLeft: 2,
+        },
+        '&$deletable': {
+            paddingRight: 2,
+        },
+        '&$leftIcon': {
+            paddingLeft: 2,
+        },
+    },
+    leftNavigation: {},
+    rightNavigation: {},
+    deletable: {},
+    leftIcon: {},
+    icon: props => {
+        const fontSize = props.iconSize || 20;
+        return {
+            marginRight: 4,
+            fontSize: fontSize,
+        };
+    },
+    iconClickable: {
+        cursor: 'pointer',
+        '&:hover, &:focus': {
+            color: theme.palette.primary.main,
+        },
+    },
+    eraseIcon: {
+        // Remove grey highlight
+        WebkitTapHighlightColor: 'transparent',
+        marginLeft: 4,
+        position: 'relative',
+        cursor: 'pointer',
+        color: theme.palette.neutral.main,
+        '&:hover, &:focus': {
+            color: theme.palette.neutral.dark,
+        },
+    },
+    label: {
+        userSelect: 'none',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    prefix: {
+        whiteSpace: 'nowrap',
+        color: theme.palette.neutral.dark,
+        paddingRight: 4,
+    },
+    navigate: {
+        // Remove grey highlight
+        WebkitTapHighlightColor: 'transparent',
+        backgroundColor: theme.palette.grey[300],
+        color: theme.palette.neutral.normal,
+        marginRight: 2,
+        marginLeft: 2,
+        borderRadius: 10,
+        cursor: 'pointer',
+        '&:hover, &:focus': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.grey[300],
+        },
+        position: 'relative',
+    },
+    badge: {
+        height: 16,
+        paddingLeft: '2px',
+        paddingRight: '8px',
+    },
+}));
+
+const handleKeyDown = (e, fn) => {
+    if (keycode(e) === 'space' || keycode(e) === 'enter') {
+        e.preventDefault();
+        fn();
+    }
+};
+
+const HiChip = (props) => {
+    const {
+        className,
+        fallbackImage,
+        icon,
+        iconSize = 20,
+        id,
+        img,
+        label,
+        labelIcon,
+        onClick,
+        onKeyDown,
+        onPrevious,
+        onNext,
+        onDelete,
+        prefix,
+        onIconClick,
+        title,
+        titleDelete,
+        titleIcon,
+        titleImg,
+        titleNext,
+        titlePrevious,
+        style,
+    } = props;
+
+    const classes = useStyles(props);
+
+    let chipIcon;
+    if (icon) {
+        let iconProps = {
+            className: classNames(classes.icon, {
+                [classes.iconClickable]: onIconClick,
+            }),
+            id: `${id}-icon`,
+            onClick: onIconClick,
+            onKeyDown: (event) => handleKeyDown(event, onIconClick),
+            title: titleIcon,
+            tabIndex: onIconClick ? 0 : -1,
+        };
+        if (typeof icon === 'string') {
+            chipIcon = <HiIcon icon={icon} {...iconProps} />;
+        } else if (typeof icon === 'object') {
+            chipIcon = {...icon};
+            chipIcon.props = {...iconProps};
+        }
+    }
+
+    let chipLabelIcon;
+    if (labelIcon) {
+        let iconProps = {
+            className: classes.icon,
+            id: `${id}-labelIcon`,
+            size: iconSize,
+            title: titleIcon,
+            tabIndex: -1
+        };
+        if (typeof labelIcon === 'string') {
+            chipLabelIcon = <HiIcon icon={labelIcon} {...iconProps} />;
+        } else if (typeof labelIcon === 'object') {
+            chipLabelIcon = {...labelIcon};
+            chipLabelIcon.props = {
+                ...iconProps,
+                style: { fontSize: props.iconSize || 20 },
+            };
+        }
+    }
+
+    return (
+        <div
+            id={id}
+            role={'button'}
+            className={classNames(classes.root, className, {
+                [classes.leftNavigation]: onPrevious,
+                [classes.rightNavigation]: onNext,
+                [classes.deletable]: onDelete,
+                [classes.leftIcon]: icon,
+            })}
+            title={title}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+            tabIndex={onKeyDown ? '0' : '-1'}
+            style={style}
+        >
+            {chipIcon}
+            {prefix && <span id={`${id}-prefix`}
+                             className={classes.prefix}>{prefix}</span>}
+            {img && (
+                <img
+                    className={classes.badge}
+                    id={`${id}-badge`}
+                    src={img}
+                    alt={label}
+                    onError={(e) => {
+                        if (fallbackImage) {
+                            e.target.src = `${fallbackImage}`;
+                        } else {
+                            e.target.style.display = 'none';
+                        }
+                    }}
+                    title={titleImg}
+                />
+            )}
+            {labelIcon && chipLabelIcon}
+            {onPrevious && (
+                <HiIcon
+                    className={classNames(classes.navigate)}
+                    id={`${id}-previous`}
+                    icon="arrow_left"
+                    onClick={onPrevious}
+                    onKeyDown={(event) => handleKeyDown(event, onPrevious)}
+                    size={iconSize}
+                    title={titlePrevious}
+                    tabIndex={0}
+                />
+            )}
+            <span id={`${id}-label`} className={classes.label}>{label}</span>
+            {onNext && (
+                <HiIcon
+                    className={classNames(classes.navigate)}
+                    id={`${id}-next`}
+                    icon="arrow_right"
+                    onClick={onNext}
+                    onKeyDown={(event) => handleKeyDown(event, onNext)}
+                    size={iconSize}
+                    title={titleNext}
+                    tabIndex={0}
+                />
+            )}
+            {onDelete && (
+                <HiIcon
+                    classes={{ root: classes.eraseIcon }}
+                    id={`${id}-delete`}
+                    icon="cancel"
+                    onClick={onDelete}
+                    onKeyDown={(event) => handleKeyDown(event, onDelete)}
+                    size={iconSize}
+                    title={titleDelete}
+                    tabIndex={0}
+                />
+            )}
+        </div>
+    );
+}
+
+HiChip.propTypes = {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Surcharge les classes du composant
+     */
+    className: PropTypes.object,
+    /**
+     * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+     */
+    fallbackImage: PropTypes.string,
+    /**
+     * Icone affiché à gauche
+     */
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /**
+     * Font size des icônes (default = 20px)
+     */
+    iconSize: PropTypes.number,
+    /**
+     * Identifiant de l'élément
+     */
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /**
+     * Ajoute une image à gauche du Chip
+     */
+    img: PropTypes.string,
+    /**
+     * Label qu'affiche le Chip
+     */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    /**
+     * Icône affichée au niveau du label
+     */
+    labelIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    /**
+     * Fonction de callback au clic sur la chip
+     */
+    onClick: PropTypes.func,
+    /**
+     * Fonction de callback au clic sur l'icon close si cancelable = true
+     */
+    onDelete: PropTypes.func,
+    /**
+     * Fonction de callback au clic sur l'icon à gauche
+     */
+    onIconClick: PropTypes.func,
+    /**
+     * Fonction de callback à l'appui sur une touche du clavier
+     */
+    onKeyDown: 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,
+    /**
+     * Préfixe dans le HiChip
+     */
+    prefix: PropTypes.string,
+    /**
+     * Style pour surcharger le chip
+     */
+    style: PropTypes.object,
+    /**
+     * Titre du chip
+     */
+    title: PropTypes.string,
+    /**
+     * Titre de l'icône supprimer
+     */
+    titleDelete: PropTypes.string,
+    /**
+     * Titre de l'icône
+     */
+    titleIcon: PropTypes.string,
+    /**
+     * Titre de la balise img
+     */
+    titleImg: PropTypes.string,
+    /**
+     * Titre de la navigation suivante
+     */
+    titleNext: PropTypes.string,
+    /**
+     * Titre de la navigation précédente
+     */
+    titlePrevious: PropTypes.string,
+};
+
+export default HiChip;

package/src/HiChip/HiChip.md

@@ -0,0 +1,246 @@
+HiChip example:
+
+```js
+import React from 'react';
+import HiChip from './HiChip';
+import Icon from "@material-ui/core/Icon";
+import { makeStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import CrosshairsGps from 'mdi-material-ui/CrosshairsGps';
+import CloseCircleOutline from 'mdi-material-ui/CloseCircleOutline';
+import Drag from 'mdi-material-ui/Drag';
+import HiVendor from '../hi-svg-icons/HiVendor';
+
+const RecurringPaymentIcon = (props) => {
+
+    const iconSize = props.style && props.style.height ? props.style.height : 24;
+    const iconStyle = {
+        fontSize: iconSize,
+        borderRadius: "50%",
+        backgroundColor: "#00ade9",
+        ...props.style
+    };
+
+    return (
+        <Icon
+            style={iconStyle}
+            className={ props.className }
+        >
+            <svg style={{ margin: 5 }} viewBox="0 0 216.99 216.99">
+                <path
+                    d="M130.4,0V21.39h-109v109H0v-109A20.88,20.88,0,0,1,21.39,0Zm43.3,43.3V65.2H65.2V173.7H43.3V65.2q0-9.68,6.11-15.79T65.2,43.3Z"
+                    fill={"#fff"}
+                />
+                <path
+                    d="M217.06,200.93a16.22,16.22,0,0,1-4.58,11.66A15.24,15.24,0,0,1,201,217.37H103.13a15.69,15.69,0,0,1-11.85-4.78,16.19,16.19,0,0,1-4.59-11.66V103.06a15.56,15.56,0,0,1,4.59-11.47A16,16,0,0,1,103.13,87H201a15.67,15.67,0,0,1,16.05,16.06Zm-73.4-16.05L201,127.53l-11.47-11.47-45.88,45.49L118.42,136.7,107,148.17Z"
+                    fill={"#fff"}
+                />
+            </svg>
+        </Icon>
+    );
+};
+
+function handleClick() {
+    // eslint-disable-next-line no-alert
+    alert('Click');
+}
+
+function handleDelete() {
+    // eslint-disable-next-line no-alert
+    alert('Delete Chip!');
+}
+
+function handleNext() {
+    // eslint-disable-next-line no-alert
+    alert('Next!');
+}
+function handlePrevious() {
+    // eslint-disable-next-line no-alert
+    alert('Previous!');
+}
+
+const useStyles = makeStyles(theme => ({
+    chipFilter: {
+        margin: '0 0 4px 8px',
+    },
+    excludeChipFilter: {
+        backgroundColor: theme.palette.negative.main,
+        color: theme.palette.negative.contrastText,
+    },
+    lookupChipFilter: {
+        backgroundColor: theme.palette.lookup.light,
+    },
+    lookupChipFilterIcon: {
+        color: theme.palette.neutral.main,
+    },
+    changedColumns: {
+        backgroundColor: '#757575',
+        color: '#FFF',
+    },
+}));
+
+function HiChips(props) {
+    const classes = useStyles(props);
+    return (
+        <div style={{display: 'flex', justifyContent: 'center'}}>
+            <div style={{display: 'flex',
+                         flexWrap: 'wrap',
+                         justifyContent: 'center',
+                         backgroundColor: '#FAFAFA',
+                         padding: 10}}>
+                <HiChip label="Basic chip" style={{margin: 10}} />
+                <HiChip
+                    label="Deletable"
+                    style={{margin: 10}}
+                    onDelete={handleDelete}
+                />
+                <HiChip
+                    label="Antiga and Barbuda"
+                    style={{margin: 10}}
+                    img="/static/hmu/images/countries/ag.svg"
+                    onDelete={handleDelete}
+                />
+                <HiChip
+                    label="Compte: &quot;Transports Maury&quot;"
+                    style={{margin: 10}}
+                    onDelete={handleDelete}
+                    icon="search"
+                />
+                <HiChip
+                    label="tbyrne07@qub.aero"
+                    style={{margin: 10}}
+                    onDelete={handleDelete}
+                    icon="location_searching"
+                />
+                <HiChip
+                    label="02-01-2018 to 16-01-2018"
+                    style={{margin: 10}}
+                    onNext={handleNext}
+                    onPrevious={handlePrevious}
+                    onDelete={handleDelete}
+                />
+                <HiChip
+                    label="02-01-2018 to 16-01-2018"
+                    style={{margin: 10}}
+                    onNext={handleNext}
+                    onPrevious={handlePrevious}
+                />
+                <HiChip
+                    label="02-01-2018 to 16-01-2018"
+                    style={{margin: 10}}
+                    onPrevious={handlePrevious}
+                />
+                <HiChip
+                    label="02-01-2018 to 16-01-2018"
+                    style={{margin: 10}}
+                    onNext={handleNext}
+                />
+                <HiChip
+                    label="France"
+                    prefix="Pays"
+                    style={{margin: 10}}
+                    img="/static/hmu/images/countries/fr.svg"
+                    onDelete={handleDelete}
+                />
+                <HiChip
+                    label="France"
+                    prefix="Pays : "
+                    style={{margin: 10}}
+                    img="/static/hmu/images/countries/fr.svg"
+                    onDelete={handleDelete}
+                    icon={<CrosshairsGps/>}
+                />
+                <HiChip
+                    label="France"
+                    prefix="Pays : NOT "
+                    style={{margin: 10}}
+                    img="/static/hmu/images/countries/fr.svg"
+                    onDelete={handleDelete}
+                    icon={<CloseCircleOutline/>}
+                />
+                <HiChip
+                    label="Custom css"
+                    style={{margin: 10, color: 'pink !important'}}
+                    onDelete={handleDelete}
+                    icon={<CloseCircleOutline/>}
+                />
+                <HiChip
+                    label="02-01-2018 to 16-01-2018"
+                    style={{margin: 10}}
+                    onNext={handleNext}
+                    onPrevious={handlePrevious}
+                    onDelete={handleDelete}
+                    icon="location_searching"
+                    onIconClick={handleClick}
+                    titleIcon="Back to filter"
+                    titlePrevious="Show previous period"
+                    titleNext="Show next period"
+                    titleDelete="Remove filter"
+                />
+                <HiChip
+                    label="Colonnes modifiées"
+                    icon={<Drag/>}
+                    style={{margin: 10}}
+                    onDelete={() => alert('Delete')}
+                    classes={{
+                        root: classNames(classes.chipFilter, classes.changedColumns),
+                        label: classes.changedColumns,
+                        eraseIcon: classes.changedColumns,
+                    }}
+                />
+                <HiChip
+                    label="Exclude"
+                    icon={<CloseCircleOutline/>}
+                    style={{margin: 10}}
+                    onDelete={() => alert('Delete')}
+                    classes={{
+                        root: classNames(classes.chipFilter, classes.excludeChipFilter),
+                        prefix: classNames(classes.excludeChipFilter),
+                        label: classNames(classes.excludeChipFilter),
+                        eraseIcon: classNames(classes.excludeChipFilter)
+                    }}
+                />
+                <HiChip
+                    label="Lookup"
+                    icon={<CrosshairsGps/>}
+                    style={{margin: 10}}
+                    onDelete={() => alert('Delete')}
+                    classes={{
+                        root: classNames(classes.chipFilter, classes.lookupChipFilter),
+                        icon: classNames(classes.lookupChipFilterIcon),
+                        prefix: classNames(classes.lookupChipFilter),
+                        label: classNames(classes.lookupChipFilter),
+                        eraseIcon: classNames(classes.lookupChipFilter)
+                    }}
+                />
+                <HiChip
+                    label="Filter"
+                    icon={'menu'}
+                    style={{margin: 10}}
+                    onDelete={() => alert('Delete')}
+                    classes={{
+                        root: classNames(classes.chipFilter),
+                    }}
+                />
+                <HiChip
+                    label="Authenticable"
+                    img="https://slot01-preprod-console.hipay.com/assets/core/img/references/auth_status/lock-open-outline.svg"
+                    prefix="Auth status: "
+                    icon={'menu'}
+                    style={{margin: 10}}
+                    onDelete={() => alert('Delete')}
+                    classes={{
+                        root: classNames(classes.chipFilter),
+                    }}
+                />
+                <HiChip
+                    prefix="Recurring payment : "
+                    label="Yes"
+                    labelIcon={<RecurringPaymentIcon />}
+                />
+            </div>
+        </div>
+    );
+}
+;<HiChips/>
+```