@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/src/HiCell/CellDate.test.js

@@ -1,267 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import CellDate from './CellDate';
-
-describe('<CellDate />', () => {
-    let shallow;
-
-    before(() => {
-        shallow = createShallow({
-            dive: true,
-            untilSelector: CellDate,
-            context: { table: { footer: true } },
-        });
-    });
-
-    it('should render a date for all views', () => {
-        // L - en - with time
-        const wrapper = shallow(
-            <CellDate
-                type={'date'}
-                date={'2017-01-27 10:35:59'}
-                locale={'en-EN'}
-                view={'l'}
-                displayTime
-            />,
-        );
-
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            'Friday 27 January 2017 10:35:59',
-            'Should display large date with time in english',
-        );
-
-        // L - en - without time
-        wrapper.setProps({ displayTime: false });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            'Friday 27 January 2017',
-            'Should display large date without time in english',
-        );
-
-        // L - fr - with time
-        wrapper.setProps({ locale: 'fr', displayTime: true });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            'vendredi 27 janvier 2017 10:35:59',
-            'Should display large date with time in french',
-        );
-
-        // L - fr - without time
-        wrapper.setProps({ locale: 'fr', displayTime: false });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            'vendredi 27 janvier 2017',
-            'Should display large date without time in english',
-        );
-
-        // M - en - with time
-        wrapper.setProps({ view: 'm', locale: 'en', displayTime: true });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '27/01/2017 10:35:59',
-            'Should display medium date with time and default format',
-        );
-
-        // M - en - with time - custom format
-        wrapper.setProps({ view: 'm', locale: 'en', displayTime: true, formatShort: 'MM-DD-YYYY' });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '01-27-2017 10:35:59',
-            'Should display medium date with time and custom format',
-        );
-
-        // M - en - without time
-        wrapper.setProps({ view: 'm', locale: 'en', displayTime: false, formatShort: undefined });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '27/01/2017',
-            'Should display medium date without time and default format',
-        );
-
-        // M - en - without time - custom format
-        wrapper.setProps({
-            view: 'm',
-            locale: 'en',
-            displayTime: false,
-            formatShort: 'MM-DD-YYYY',
-        });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '01-27-2017',
-            'Should display medium date without time and custom format',
-        );
-
-        // M - fr - with time
-        wrapper.setProps({ view: 'm', locale: 'fr', displayTime: true, formatShort: undefined });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '27/01/2017 10:35:59',
-            'Should display medium date with time and default format',
-        );
-
-        // M - fr - with time - custom format
-        wrapper.setProps({ view: 'm', locale: 'fr', displayTime: true, formatShort: 'MM-DD-YYYY' });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '01-27-2017 10:35:59',
-            'Should display medium date with time and custom format',
-        );
-
-        // M - fr - without time
-        wrapper.setProps({ view: 'm', locale: 'fr', displayTime: false, formatShort: undefined });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '27/01/2017',
-            'Should display medium date without time and default format',
-        );
-
-        // M - fr - with time - custom format
-        wrapper.setProps({
-            view: 'm',
-            locale: 'fr',
-            displayTime: false,
-            formatShort: 'MM-DD-YYYY',
-        });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '01-27-2017',
-            'Should display medium date without time and custom format',
-        );
-
-        // S - en - with time
-        wrapper.setProps({ view: 's', locale: 'en', displayTime: true, formatShort: undefined });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '27/01/17 10:35:59',
-            'Should display medium date with time and default format',
-        );
-
-        // S - en - with time - custom format
-        wrapper.setProps({ view: 's', locale: 'en', displayTime: true, formatShort: 'MM-DD-YYYY' });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '01-27-17 10:35:59',
-            'Should display medium date with time and custom format',
-        );
-
-        // S - en - without time
-        wrapper.setProps({ view: 's', locale: 'en', displayTime: false, formatShort: undefined });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '27/01/17',
-            'Should display medium date without time and default format',
-        );
-
-        // S - en - without time - custom format
-        wrapper.setProps({
-            view: 's',
-            locale: 'en',
-            displayTime: false,
-            formatShort: 'MM-DD-YYYY',
-        });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '01-27-17',
-            'Should display medium date without time and custom format',
-        );
-
-        // S - fr - with time
-        wrapper.setProps({ view: 's', locale: 'fr', displayTime: true, formatShort: undefined });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '27/01/17 10:35:59',
-            'Should display medium date with time and default format',
-        );
-
-        // S - fr - with time - custom format
-        wrapper.setProps({ view: 's', locale: 'fr', displayTime: true, formatShort: 'MM-DD-YYYY' });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '01-27-17 10:35:59',
-            'Should display medium date with time and custom format',
-        );
-
-        // S - fr - without time
-        wrapper.setProps({ view: 's', locale: 'fr', displayTime: false, formatShort: undefined });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '27/01/17',
-            'Should display medium date without time and default format',
-        );
-
-        // S - fr - with time - custom format
-        wrapper.setProps({
-            view: 's',
-            locale: 'fr',
-            displayTime: false,
-            formatShort: 'MM-DD-YYYY',
-        });
-        assert.strictEqual(
-            wrapper
-                .find('div')
-                .at(0)
-                .text(),
-            '01-27-17',
-            'Should display medium date without time and custom format',
-        );
-    });
-});

package/src/HiCell/CellIcon.js

@@ -1,111 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import HiIcon from '../HiIcon';
-import HiIconButton from '../HiIconButton';
-
-export const styles = {
-    icon: {
-        float: 'left',
-    },
-    label: {
-        margin: '4px 0 4px 5px',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    wrapper: {
-        maxWidth: '100%',
-        display: 'inline-flex',
-    },
-    flexContent: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-    },
-};
-
-/**
- * Cette cellule permet d'afficher une icône et un label (optionnel).
- * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
- */
-class CellIcon extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Alignement de l'icône dans sa cellule
-         */
-        align: PropTypes.oneOf(['right']),
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Couleur de l'icône
-         */
-        color: PropTypes.string,
-        /**
-         * Icon name [from material-design-icons](https://materialdesignicons.com/)
-         * used by HiIconBuilder
-         */
-        icon: PropTypes.string,
-        /**
-         * Label
-         */
-        label: PropTypes.string,
-        /**
-         * Fonction déclenchée lors du clic
-         */
-        onClick: PropTypes.func,
-        /**
-         * View (L/M/S)
-         */
-        size: PropTypes.number,
-        /**
-         * Icon size
-         */
-        view: PropTypes.oneOf(['l', 'm', 's']),
-    };
-
-    static defaultProps = {
-        view: 'm',
-        color: 'neutral',
-    };
-
-    render() {
-        const { align, classes, color, icon, label, onClick, size, view } = this.props;
-        if (onClick) {
-            return (
-                <div className={align === 'right' ? classes.flexContent : classes.wrapper} title={label}>
-                    <HiIconButton
-                        color={'inherit'}
-                        style={{
-                            color,
-                            fontSize: size || 24,
-                            maxHeight: 31,
-                            maxWidth: 31,
-                        }}
-                        onClick={onClick}
-                    >
-                        <HiIcon className={classes.icon} icon={icon} color={color} />
-                        {view !== 's' && label && <span className={classes.label}>{label}</span>}
-                    </HiIconButton>
-                </div>
-            );
-        }
-        return (
-            <div className={align === 'right' ? classes.flexContent : classes.wrapper} title={label}>
-                <HiIcon
-                    color={'inherit'}
-                    style={{
-                        color,
-                        fontSize: size || 24,
-                    }}
-                    className={classes.icon}
-                    icon={icon}
-                />
-                {view !== 's' && label && <span className={classes.label}>{label}</span>}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellIcon' })(CellIcon);

package/src/HiCell/CellIcon.test.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import ArrowUp from 'mdi-material-ui/ArrowUp';
-import { createShallow, createMount, getClasses } from '../test-utils';
-import CellIcon from './CellIcon';
-import HiIcon from '../HiIcon';
-
-describe('<CellIcon/>', () => {
-    let shallow;
-    let mount;
-    let classes;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-        mount = createMount();
-        classes = getClasses(<CellIcon type={'icon'} icon={'arrow_up'} label={'Test'} />);
-    });
-
-    after(() => {
-        mount.cleanUp();
-    });
-
-    it('should render a td with an icon inside and label (view L)', () => {
-        const wrapper = shallow(
-            <CellIcon type={'icon'} icon={'arrow_up'} label={'Test'} view={'l'} />,
-        );
-
-        assert.strictEqual(wrapper.find(HiIcon).length, 1, 'Should render HiIcon');
-        assert.strictEqual(wrapper.find(HiIcon).props().icon, 'arrow_up', 'Should pass icon name');
-        assert.strictEqual(
-            wrapper.find(HiIcon).props().className,
-            classes.icon,
-            'Should pass icon class',
-        );
-    });
-
-    it('should render a td with an icon inside only (view S)', () => {
-        const wrapper = shallow(
-            <CellIcon type={'icon'} icon={'arrow_up'} label={'Test'} view={'s'} />,
-        );
-
-        assert.strictEqual(wrapper.find(HiIcon).length, 1, 'Should render HiIcon');
-        assert.strictEqual(wrapper.find(HiIcon).props().icon, 'arrow_up', 'Should pass icon name');
-        assert.strictEqual(
-            wrapper.find(HiIcon).props().className,
-            classes.icon,
-            'Should pass icon class',
-        );
-    });
-
-    it('should render a CellIcon with an icon inside only (view S)', () => {
-        const wrapper = mount(
-            <CellIcon sticky type={'icon'} icon={<ArrowUp/>} label={undefined} view={'s'} />,
-        );
-
-        assert.strictEqual(
-            wrapper.find(ArrowUp).length,
-            1,
-            'Should render the right icon component',
-        );
-    });
-});

package/src/HiCell/CellImage.js

@@ -1,101 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-export const styles = () => ({
-    img: {
-        height: 'auto',
-        float: 'left',
-    },
-    label: {
-        marginLeft: 5,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    wrapper: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-});
-
-const handleError = fallbackImage => e => {
-    if (fallbackImage) {
-        e.target.src = `${fallbackImage}`;
-    } else {
-        e.target.style.display = 'none';
-    }
-};
-
-/**
- * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
- * En vue large, aucun tooltip n'est affiché
- * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
- */
-class CellImage extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Fallback image path
-         */
-        fallbackImage: PropTypes.string,
-        /**
-         * Label
-         */
-        label: PropTypes.string,
-        /**
-         * Image path
-         */
-        path: PropTypes.string,
-        /**
-         * Short label
-         */
-        shortLabel: PropTypes.string,
-        /**
-         * Image size
-         */
-        size: PropTypes.number,
-        /**
-         * Title.
-         */
-        title: PropTypes.string,
-        /**
-         * View (L/M/S)
-         */
-        view: PropTypes.oneOf(['l', 'm', 's']),
-    };
-
-    static defaultProps = {
-        size: 24,
-        view: 's',
-    };
-
-    render() {
-        const { classes, path, label, shortLabel, view, size, fallbackImage, title } = this.props;
-
-        if (!path || path === '') return '';
-
-        return (
-            <div className={classes.wrapper} title={label}>
-                <img
-                    src={path}
-                    alt={label}
-                    title={title}
-                    className={classes.img}
-                    width={size}
-                    onError={handleError(fallbackImage)}
-                />
-                {shortLabel && view === 'm' && <span className={classes.label}>{shortLabel}</span>}
-                {label &&
-                    (view === 'l' || (view === 'm' && !shortLabel)) && (
-                        <span className={classes.label}>{label}</span>
-                    )}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellImage' })(CellImage);

package/src/HiCell/CellImage.test.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
-import CellImage from './CellImage';
-
-describe('<CellImage/>', () => {
-    let shallow;
-    let classes;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-        classes = getClasses(
-            <CellImage
-                type={'image'}
-                label={'visa'}
-                path={'/static/hmus/images/logo_visa_75wx45h.gif'}
-            />,
-        );
-    });
-
-    it('should render a td with an img inside and label if value', () => {
-        const wrapper = shallow(
-            <CellImage
-                type={'image'}
-                label={'test value'}
-                path={'/static/hmus/images/logo_visa_75wx45h.gif'}
-            />,
-        );
-
-        assert.strictEqual(wrapper.find('img').length, 1, 'should have 1 image');
-        assert.strictEqual(
-            wrapper.find('img').hasClass(classes.img),
-            true,
-            'should have the img class',
-        );
-
-        wrapper.setProps({ view: 'l' });
-        wrapper.update();
-
-        assert.strictEqual(wrapper.find('div').length, 1, 'should have 1 div');
-        assert.strictEqual(wrapper.find('div').text(), 'test value', 'should have correct label');
-    });
-
-    it('should render a td with an img inside and label if value', () => {
-        const wrapper = shallow(
-            <CellImage
-                sticky
-                type={'image'}
-                label={'test value'}
-                path={'/static/hmus/images/logo_visa_75wx45h.gif'}
-            />,
-        );
-
-        assert.strictEqual(wrapper.find('img').length, 1, 'should have 1 image');
-        assert.strictEqual(
-            wrapper.find('img').hasClass(classes.img),
-            true,
-            'should have the img class',
-        );
-
-        wrapper.setProps({ view: 'l' });
-        wrapper.update();
-
-        assert.strictEqual(wrapper.find('span').length, 1, 'should have 1 label');
-        assert.strictEqual(wrapper.find('span').text(), 'test value', 'should have correct label');
-    });
-});

package/src/HiCell/CellNumeric.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { formatNumber, formatCurrencyAmount } from '../utils/helpers';
-import HiButton from '../HiButton';
-
-export const styles = () => ({
-    wrapper: {
-        textAlign: 'right',
-    },
-    button: {
-        padding: '1px 5px',
-    },
-});
-
-/**
- * Cette cellule permet d'afficher un volume ou un montant avec devise
- */
-class CellNumeric extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Code de la devise (ISO 4217)
-         */
-        currency: PropTypes.string,
-        /**
-         * Locale BCP 47
-         */
-        locale: PropTypes.string,
-        /**
-         * Nombre de chiffres après la virgule
-         */
-        precision: PropTypes.number,
-        /**
-         * Volume/Amount
-         */
-        value: PropTypes.number.isRequired,
-        /**
-         * View (L/M/S)
-         */
-        view: PropTypes.oneOf(['l', 'm', 's']),
-    };
-
-    static defaultProps = {
-        view: 'm',
-        locale: 'en',
-    };
-
-    render() {
-        const { classes, value, locale, currency, view, precision, isButton, onClick, rowId } = this.props;
-
-        let displayedValue = '';
-        let title = '';
-        if (currency) {
-            displayedValue = formatCurrencyAmount(value, view, locale, currency, precision);
-            title = formatCurrencyAmount(value, 'l', locale, currency);
-        } else {
-            displayedValue = formatNumber(value, view, locale, precision);
-            title = formatNumber(value, 'l', locale, precision);
-        }
-
-        let content = displayedValue;
-        if (isButton) {
-            content = (
-                <HiButton
-                    onClick={onClick(rowId)}
-                    size="small"
-                    className={classes.button}
-                    variant="text"
-                >
-                    {displayedValue}
-                </HiButton>
-            );
-        }
-
-        return (
-            <div className={classes.wrapper} title={title}>
-                {content}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellNumeric' })(CellNumeric);