@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/src/HiChip/HiChip.test.js

@@ -1,185 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import { createShallow, createMount, getClasses } from '../test-utils';
-import HiChip from './HiChip';
-import HiIcon from '../HiIcon';
-
-describe('<HiChip />', () => {
-    let shallow;
-    let mount;
-    let classes;
-    let wrapper;
-    const noop = () => {};
-
-    before(() => {
-        shallow = createShallow({ untilSelector: 'Badge' });
-        mount = createMount();
-        classes = getClasses(<HiChip label="test" />);
-    });
-
-    after(() => {
-        mount.cleanUp();
-    });
-
-    describe('Basic chip', () => {
-        before(() => {
-            wrapper = shallow(<HiChip label="test" />);
-        });
-
-        it('should render a div containing a span and an icon', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.childAt(0).is('span'), true, 'should be a span');
-            assert.strictEqual(wrapper.find(HiIcon).length, 0, 'should not have deletable icon');
-        });
-
-        it('should merge user classes & spread custom props to the root node', () => {
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-    });
-
-    describe('Chip with icon', () => {
-        before(() => {
-            wrapper = shallow(<HiChip label="test" icon="magnify" />);
-        });
-
-        it('should render a div containing a span', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.childAt(0).is(HiIcon), true, 'should be a HiIcon');
-            assert.strictEqual(wrapper.childAt(1).is('span'), true, 'should be a span');
-        });
-    });
-
-    describe('Chip with img', () => {
-        before(() => {
-            wrapper = shallow(<HiChip label="test" img="/static/hmus/images/countries/ag.svg" />);
-        });
-
-        it('should render a div containing an img and a span', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.childAt(0).is('img'), true, 'should be a img');
-            assert.strictEqual(wrapper.childAt(1).is('span'), true, 'should be a span');
-        });
-    });
-
-    describe('Chip with icon and navigable', () => {
-        before(() => {
-            wrapper = shallow(
-                <HiChip label="test" icon="magnify" onNext={noop} onPrevious={noop} />,
-            );
-        });
-
-        it('should render a div containing a span', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.childAt(0).is(HiIcon), true, 'should be a HiIcon (icon)');
-            assert.strictEqual(
-                wrapper.childAt(1).is(HiIcon),
-                true,
-                'should be a HiIcon (previous)',
-            );
-            assert.strictEqual(wrapper.childAt(2).is('span'), true, 'should be a span');
-            assert.strictEqual(wrapper.childAt(3).is(HiIcon), true, 'should be a HiIcon (next)');
-        });
-
-        it('should merge user classes & spread custom props to the root node', () => {
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-    });
-
-    describe('Chip with icon and navigable and delete', () => {
-        before(() => {
-            wrapper = shallow(
-                <HiChip
-                    label="test"
-                    icon="magnify"
-                    onNext={noop}
-                    onPrevious={noop}
-                    onDelete={noop}
-                />,
-            );
-        });
-
-        it('should render all components', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.childAt(0).is(HiIcon), true, 'should be a HiIcon (icon)');
-            assert.strictEqual(
-                wrapper.childAt(1).is(HiIcon),
-                true,
-                'should be a HiIcon (previous)',
-            );
-            assert.strictEqual(wrapper.childAt(2).is('span'), true, 'should be a span');
-            assert.strictEqual(wrapper.childAt(3).is(HiIcon), true, 'should be a HiIcon (next)');
-            assert.strictEqual(wrapper.childAt(4).is(HiIcon), true, 'should be a HiIcon (delete)');
-        });
-
-        it('should merge user classes & spread custom props to the root node', () => {
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-    });
-
-    describe('delete icon', () => {
-        it('should call onDelete when clicking', () => {
-            const handleDelete = spy();
-            const handleNext = spy();
-            const handlePrevious = spy();
-
-            wrapper = shallow(
-                <HiChip
-                    label="test"
-                    onDelete={handleDelete}
-                    onPrevious={handlePrevious}
-                    onNext={handleNext}
-                />,
-            );
-
-            wrapper
-                .find(HiIcon)
-                .at(0)
-                .simulate('click');
-            assert.strictEqual(
-                handlePrevious.callCount,
-                1,
-                'should have been called once handlePrevious',
-            );
-            assert.strictEqual(handleNext.callCount, 0, 'should not have been called handleNext');
-            assert.strictEqual(
-                handleDelete.callCount,
-                0,
-                'should not have been called handleDelete',
-            );
-
-            wrapper
-                .find(HiIcon)
-                .at(1)
-                .simulate('click');
-            assert.strictEqual(
-                handlePrevious.callCount,
-                1,
-                'should have been called once handlePrevious',
-            );
-            assert.strictEqual(handleNext.callCount, 1, 'should have been called once handleNext');
-            assert.strictEqual(
-                handleDelete.callCount,
-                0,
-                'should not have been called handleDelete',
-            );
-
-            wrapper
-                .find(HiIcon)
-                .at(2)
-                .simulate('click');
-            assert.strictEqual(
-                handlePrevious.callCount,
-                1,
-                'should have been called once handlePrevious',
-            );
-            assert.strictEqual(handleNext.callCount, 1, 'should have been called once handleNext');
-            assert.strictEqual(
-                handleDelete.callCount,
-                1,
-                'should have been called once handleDelete',
-            );
-            wrapper.unmount();
-        });
-    });
-});

package/src/HiChip/HiChipSwitch.js

@@ -1,258 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import keycode from 'keycode/index';
-import HiIcon from '../HiIcon';
-import { emphasize } from '@mui/material/styles';
-
-import withStyles from '@mui/styles/withStyles';
-
-export const styles = theme => ({
-    root: {
-        ...theme.typography.b3,
-        display: 'inline-flex',
-        alignItems: 'center',
-        marginRight: 4,
-        width: 'fit-content',
-        height: 24,
-        borderRadius: 12,
-        fontSize: 13,
-        cursor: 'pointer',
-        padding: '0 4px',
-        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.grey[300], 0.08),
-        },
-    },
-    active: {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.neutral.contrastText,
-        '&:hover, &:focus': {
-            backgroundColor: theme.palette.primary.dark,
-        },
-    },
-    inactive: {
-        backgroundColor: theme.palette.grey[300],
-        color: theme.palette.neutral.dark,
-    },
-    icon: {
-        color: theme.palette.neutral.main,
-        marginRight: 5,
-    },
-    iconActive: {
-        color: theme.palette.neutral.contrastText,
-    },
-    tags: {
-        fontSize: 16,
-        paddingRight: 4,
-        paddingBottom: 4,
-        paddingTop: 4,
-        marginLeft: 4,
-        float: 'left',
-    },
-    label: {
-        userSelect: 'none',
-        whiteSpace: 'nowrap',
-    },
-    noSelection: {
-        marginRight: 4,
-    },
-    selection: {
-        height: 18,
-        lineHeight: '20px',
-        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.grey[300],
-        },
-    },
-});
-
-class HiChipSwitch extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Actif ou inactif
-         */
-        active: PropTypes.bool,
-        /**
-         * Icn affiché lorsque le filtre est actif
-         */
-        activeIcon: PropTypes.string,
-        /**
-         * Surcharge les classes du composant
-         */
-        classes: PropTypes.object,
-        /**
-         * Identifiant de l'élément
-         */
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        /**
-         * 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,
-        /**
-         * Title de la selection.
-         */
-        selectionTitle: PropTypes.string,
-    };
-
-    static defaultProps = {
-        active: false,
-        activeIcon: 'check',
-        selection: null,
-        selectionTitle: '',
-    };
-
-    chipSwitchRef = null;
-
-    constructor(props) {
-        super(props);
-
-        this.handleClickSelection = this.handleClickSelection.bind(this);
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-        this.handleKeyDownSelection = this.handleKeyDownSelection.bind(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);
-        }
-    };
-
-    handleKeyDownSelection = event => {
-        const { onSelectionClick } = this.props;
-        const key = keycode(event);
-
-        if (onSelectionClick && (key === 'space' || key === 'enter')) {
-            event.preventDefault();
-            onSelectionClick(event);
-        }
-    };
-
-    handleClickSelection(event) {
-        if (this.props.onSelectionClick) {
-            if (event) {
-                event.stopPropagation();
-            }
-            this.props.onSelectionClick();
-        }
-    }
-
-    render() {
-        const {
-            id,
-            label,
-            classes,
-            activeIcon,
-            active,
-            onClick,
-            onSelectionClick,
-            selection,
-            selectionTitle,
-        } = this.props;
-        let selectionProps = {
-            tabIndex: '-1',
-        };
-        if (onSelectionClick && selection !== 0) {
-            selectionProps = {
-                onClick: this.handleClickSelection,
-                role: 'button',
-                tabIndex: '0',
-                onKeyDown: this.handleKeyDownSelection,
-                title: selectionTitle,
-            };
-        }
-
-        return (
-            <div
-                id={id}
-                className={classNames(classes.root, {
-                    [classes.active]: !!active,
-                    [classes.inactive]: !active,
-                })}
-                onClick={onClick}
-                role="button"
-                tabIndex="0"
-                onKeyDown={this.handleKeyDown}
-                ref={node => {
-                    this.chipRef = node;
-                }}
-            >
-                <HiIcon
-                    icon={active ? activeIcon : 'add'}
-                    size={20}
-                    className={classNames(classes.icon, {
-                        [classes.iconActive]: !!active,
-                    })}
-                />
-                <span
-                    className={classNames(classes.label, {
-                        [classes.noSelection]: selection === null,
-                    })}
-                >
-                    {label}
-                </span>
-                {selection !== null && (
-                    <div
-                        className={classNames(classes.selection, {
-                            [classes.selectionClickable]: onSelectionClick && selection !== 0,
-                        })}
-                        {...selectionProps}
-                    >
-                        {selection}
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiHiChipSwitch' })(HiChipSwitch);

package/src/HiChip/HiChipSwitch.test.js

@@ -1,122 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import { createShallow, createMount, getClasses } from '../test-utils';
-import HiChipSwitch from './HiChipSwitch';
-import HiIcon from '../HiIcon';
-
-describe('<HiChipSwitch />', () => {
-    let shallow;
-    let mount;
-    let classes;
-    let wrapper;
-    const noop = () => {};
-
-    before(() => {
-        shallow = createShallow({ untilSelector: 'Badge' });
-        mount = createMount();
-        classes = getClasses(<HiChipSwitch label="test" onClick={noop} />);
-    });
-
-    after(() => {
-        mount.cleanUp();
-    });
-
-    describe('text with leftIcon', () => {
-        before(() => {
-            wrapper = shallow(<HiChipSwitch label="test" onClick={noop} />);
-        });
-
-        it('should render a div containing a span and an icon', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.childAt(0).is(HiIcon), true, 'should be a HiIcon');
-            assert.strictEqual(wrapper.childAt(1).is('span'), true, 'should be a span');
-        });
-
-        it('should merge user classes & spread custom props to the root node', () => {
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-    });
-
-    describe('text with leftIcon and selection', () => {
-        before(() => {
-            wrapper = shallow(<HiChipSwitch label="test" selection={5} onClick={noop} />);
-        });
-
-        it('should render a div containing a span', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(
-                wrapper.childAt(0).is(HiIcon),
-                true,
-                'should be a HiIcon (leftIcon)',
-            );
-            assert.strictEqual(wrapper.childAt(1).is('span'), true, 'should be a span');
-            assert.strictEqual(wrapper.childAt(2).is('div'), true, 'should be a div');
-        });
-
-        it('should merge user classes & spread custom props to the root node', () => {
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-    });
-
-    describe('callbacks', () => {
-        it('should call onDelete when clicking', () => {
-            const handleClick = spy();
-            const handleSelectionClick = spy();
-
-            wrapper = shallow(
-                <HiChipSwitch
-                    label="test"
-                    onClick={handleClick}
-                    onSelectionClick={handleSelectionClick}
-                    selection={5}
-                />,
-            );
-
-            wrapper.simulate('click');
-            assert.strictEqual(
-                handleClick.callCount,
-                1,
-                'should have been called once handleClick',
-            );
-            assert.strictEqual(
-                handleSelectionClick.callCount,
-                0,
-                'should not have been called handleSelectionClick',
-            );
-            assert.strictEqual(wrapper.find(HiIcon).length, 1, 'should have default icon');
-
-            wrapper.setProps({ active: true });
-            wrapper.update();
-
-            assert.strictEqual(wrapper.find(HiIcon).length, 1, 'should have default active icon');
-            wrapper.setProps({ activeIcon: 'search' });
-            wrapper.update();
-            assert.strictEqual(wrapper.find(HiIcon).length, 1, 'should have specific active icon');
-
-            wrapper
-                .find('div')
-                .at(1)
-                .simulate('click');
-            assert.strictEqual(
-                handleSelectionClick.callCount,
-                1,
-                'should have been called once handleSelectionClick',
-            );
-            wrapper.unmount();
-
-            wrapper = mount(<HiChipSwitch label="test" onClick={handleClick} selection={5} />);
-
-            wrapper
-                .find('div')
-                .at(1)
-                .simulate('click');
-            assert.strictEqual(
-                handleSelectionClick.callCount,
-                1,
-                'should not have been called handleSelectionClick',
-            );
-            wrapper.unmount();
-        });
-    });
-});

package/src/HiChip/index.js

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