@hipay/hipay-material-ui 3.12.0 → 3.12.2

package/src/HiCell/CellNumeric.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import withStyles from '@mui/styles/withStyles';
-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);

package/src/HiCell/CellNumeric.test.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
-import CellNumeric from './CellNumeric';
-
-describe('<CellNumeric />', () => {
-    let shallow;
-    let classes;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-        classes = getClasses(<CellNumeric type={'numeric'} value={2345} />);
-    });
-
-    it('should render a td with 1 span (for value)', () => {
-        const wrapper = shallow(<CellNumeric type={'numeric'} value={2345} />);
-        assert.strictEqual(wrapper.find('div').length, 1, 'Should have 1 span.');
-        assert.strictEqual(wrapper.find('div').hasClass(classes.wrapper), true);
-    });
-
-    it('should render a cell with 1 span (for value)', () => {
-        const wrapper = shallow(
-            <CellNumeric type={'numeric'} value={2345} view={'l'} currency={'EUR'} />,
-        );
-        assert.strictEqual(wrapper.find('div').length, 1, 'Should have 1 span.');
-        assert.strictEqual(wrapper.find('div').hasClass(classes.wrapper), true);
-    });
-
-    it('should render a cell with 1 span (for value)', () => {
-        const wrapper = shallow(
-            <CellNumeric type={'numeric'} sticky value={2345} view={'s'} currency={'EUR'} />,
-        );
-        assert.strictEqual(wrapper.find('div').length, 1, 'Should have 1 span.');
-        assert.strictEqual(wrapper.find('div').hasClass(classes.wrapper), true);
-    });
-});

package/src/HiCell/CellPinToAction.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import withStyles from '@mui/styles/withStyles';
-import HiPin from '../HiPin';
-
-export const styles = {
-    wrapperLeft: {
-        maxWidth: '100%',
-        display: 'inline-flex',
-    },
-    wrapperRigth: {
-        textAlign: 'right',
-    },
-    wrapperCenter: {
-        textAlign: 'center',
-    },
-};
-
-/**
- * Cette cellule permet d'afficher un pin avec callback (optionnel).
- */
-class CellPinToAction extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        algin: PropTypes.oneOf(['left', 'center', 'right']),
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Color the pin.
-         */
-        color: PropTypes.string,
-        /**
-         * Pin number to display
-         */
-        number: PropTypes.number,
-        /**
-         * Fonction de callback onClick sur le pin
-         */
-        onClick: PropTypes.func,
-    };
-
-    static defaultProps = {
-        color: "primary",
-        align: "left",
-    };
-
-    render() {
-        const { classes, onClick, number, color, align } = this.props;
-
-        if (number === undefined) return '';
-
-        let wrapperClass = classes.wrapperLeft;
-        if (align === "right") {
-            wrapperClass = classes.wrapperRigth;
-        } else if (align === "center") {
-            wrapperClass = classes.wrapperCenter;
-        }
-        return (
-            <div className={wrapperClass}>
-                {number === 0 ? (
-                    <HiPin>0</HiPin>
-                ) : (
-                    <HiPin color={color} onClick={onClick}>
-                        {number}
-                    </HiPin>
-                )}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellPin' })(CellPinToAction);

package/src/HiCell/CellRate.js

@@ -1,137 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ArrowBottomRight from 'mdi-material-ui/ArrowBottomRight';
-import ArrowTopRight from 'mdi-material-ui/ArrowTopRight';
-import Equal from 'mdi-material-ui/Equal';
-import { formatRate } from '../utils/helpers';
-import withStyles from '@mui/styles/withStyles';
-
-export const styles = theme => ({
-    flexContent: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        overflow: 'hidden',
-        position: 'relative',
-        textAlign: 'right',
-        maxHeight: '32px',
-    },
-    trendChipIcon: {
-        width: 14,
-        height: 14,
-        position: 'relative',
-        top: 2,
-    },
-    positive: {
-        color: theme.palette.positive.main,
-    },
-    negative: {
-        color: theme.palette.negative.main,
-    },
-    neutral: {
-        color: theme.palette.neutral.main,
-    },
-    spanIndicator: {
-        float: 'right',
-        color: '#737373',
-        position: 'relative',
-        right: 3,
-    },
-    rateDiv: {
-        position: 'relative',
-    },
-});
-
-/**
- * Cette cellule permet d'afficher un pourcentage
- * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
- */
-class CellRate extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Spécifie le type de donnée évalué (ex: 'volume', 'amount', ...)
-         */
-        indicator: PropTypes.string,
-        /**
-         * True si une augmentation est considérée comme positive, détermine la couleur de l'icône
-         */
-        isPositive: PropTypes.bool,
-        /**
-         * Locale BCP 47
-         */
-        locale: PropTypes.string,
-        /**
-         * Évolution par rapport à la période précédente, détermine l'icône associée
-         */
-        trendchip: PropTypes.oneOf(['up', 'down', 'equal']).isRequired,
-        /**
-         * Rate
-         */
-        value: PropTypes.number.isRequired,
-        /**
-         * View (L/M/S)
-         */
-        view: PropTypes.oneOf(['l', 'm', 's']),
-    };
-
-    static defaultProps = {
-        isPositive: true,
-        locale: 'en',
-    };
-
-    render() {
-        const { classes, value, trendchip, isPositive, indicator, locale, view } = this.props;
-
-        let trendIcon;
-        const displayedRate = formatRate(value, view, locale);
-
-        switch (trendchip) {
-            case 'equal':
-                trendIcon = (
-                    <Equal className={classNames(classes.trendChipIcon, classes.neutral)} />
-                );
-                break;
-            case 'up':
-                trendIcon = (
-                    <ArrowTopRight
-                        className={classNames(classes.trendChipIcon, {
-                            [classes.positive]: isPositive,
-                            [classes.negative]: !isPositive,
-                        })}
-                    />
-                );
-                break;
-            case 'down':
-                trendIcon = (
-                    <ArrowBottomRight
-                        className={classNames(classes.trendChipIcon, {
-                            [classes.positive]: !isPositive,
-                            [classes.negative]: isPositive,
-                        })}
-                    />
-                );
-                break;
-            default:
-                break;
-        }
-
-        return (
-            <div className={classes.flexContent}>
-                <div className={(typeof indicator === 'undefined' && classes.rateDiv) || ''}>
-                    {displayedRate}
-                    {trendIcon}
-                </div>
-                {typeof indicator !== 'undefined' && (
-                    <span className={classes.spanIndicator} style={{ fontSize: (view !== 'l') ? 10 : 11 }}>{indicator}</span>
-                )}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellRate' })(CellRate);

package/src/HiCell/CellRate.test.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import ArrowBottomRight from 'mdi-material-ui/ArrowBottomRight';
-import ArrowTopRight from 'mdi-material-ui/ArrowTopRight';
-import Equal from 'mdi-material-ui/Equal';
-import { createShallow, getClasses } from '../test-utils';
-import CellRate from './CellRate';
-
-describe('<CellRate/>', () => {
-    let shallow;
-    let classes;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-        classes = getClasses(<CellRate type={'rate'} value={13.3} trendchip={'up'} />);
-    });
-
-    it('should render a simple div with class and arrow icon', () => {
-        const wrapper = shallow(<CellRate type={'rate'} value={13.3} trendchip={'up'} />);
-
-        assert.strictEqual(
-            wrapper.find('span').length,
-            0,
-            'Should not render span containing indicator',
-        );
-        assert.strictEqual(
-            wrapper.childAt(0).hasClass(classes.rateDiv),
-            true,
-            'Should have the rateDiv class',
-        );
-        assert.strictEqual(
-            wrapper.find(ArrowTopRight).length,
-            1,
-            'Should render a div containing rate & Arrow oriented to top',
-        );
-    });
-
-    it('should render a simple div with class and arrow icon', () => {
-        const wrapper = shallow(
-            <CellRate type={'rate'} value={13.3} trendchip={'up'} isPositive={false} />,
-        );
-
-        assert.strictEqual(
-            wrapper.find('span').length,
-            0,
-            'Should not render span containing indicator',
-        );
-        assert.strictEqual(
-            wrapper.childAt(0).hasClass(classes.rateDiv),
-            true,
-            'Should have the rateDiv class',
-        );
-        assert.strictEqual(
-            wrapper.find(ArrowTopRight).length,
-            1,
-            'Should render a div containing rate & Arrow oriented to top',
-        );
-    });
-
-    it('should render a div with equal icon', () => {
-        const wrapper = shallow(<CellRate type={'rate'} value={13.3} trendchip={'equal'} />);
-        assert.strictEqual(
-            wrapper.find(Equal).length,
-            1,
-            'Should render a div containing rate & Equal icon',
-        );
-    });
-
-    it('should render a div with an indicator span & div inside & arrow bottom icon inside', () => {
-        const wrapper = shallow(
-            <CellRate
-                type={'rate'}
-                value={13.3}
-                trendchip={'down'}
-                isPositive={false}
-                indicator={'volume'}
-            />,
-        );
-        assert.strictEqual(
-            wrapper.find(ArrowBottomRight).length,
-            1,
-            'Should render a div containing rate & ArrowBottomRight icon',
-        );
-        assert.strictEqual(
-            wrapper.find('span').length,
-            1,
-            'Should render a span containing an indication on the data that the rate is applying',
-        );
-        assert.strictEqual(
-            wrapper.childAt(0).hasClass(classes.rateDiv),
-            false,
-            'Should have the rateDiv class',
-        );
-        assert.strictEqual(
-            wrapper.childAt(1).hasClass(classes.spanIndicator),
-            true,
-            'Should have the spanIndicator class',
-        );
-    });
-
-    it('should render a div with an indicator span & div inside & arrow bottom icon inside', () => {
-        const wrapper = shallow(
-            <CellRate type={'rate'} value={13.3} trendchip={'down'} indicator={'volume'} />,
-        );
-        assert.strictEqual(
-            wrapper.find(ArrowBottomRight).length,
-            1,
-            'Should render a div containing rate & ArrowBottomRight icon',
-        );
-        assert.strictEqual(
-            wrapper.find('span').length,
-            1,
-            'Should render a span containing an indication on the data that the rate is applying',
-        );
-        assert.strictEqual(
-            wrapper.childAt(0).hasClass(classes.rateDiv),
-            false,
-            'Should have the rateDiv class',
-        );
-        assert.strictEqual(
-            wrapper.childAt(1).hasClass(classes.spanIndicator),
-            true,
-            'Should have the spanIndicator class',
-        );
-    });
-});

package/src/HiCell/CellSentinel.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import HiColoredLabel from '../HiColoredLabel';
-import withStyles from '@mui/styles/withStyles';
-
-export const styles = {
-    flexContent: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-    },
-    label: {},
-};
-
-/**
- * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
- */
-class CellSentinel extends React.PureComponent {
-    static propTypes = {
-        active: PropTypes.bool,
-        classes: PropTypes.object,
-        color: PropTypes.string,
-        label: PropTypes.string,
-        letter: PropTypes.string,
-        outlined: PropTypes.bool,
-        reviewer: PropTypes.string,
-        value: PropTypes.string,
-    };
-
-    static defaultProps = {
-        active: false,
-        outlined: false,
-    };
-
-    render() {
-        const {
-            active,
-            classes,
-            color,
-            label,
-            letter,
-            outlined,
-            reviewer,
-            value,
-        } = this.props;
-
-        const effectiveLabel = label || value;
-        const effectiveLetter = letter || effectiveLabel[0];
-
-        return (
-            <div
-                className={classes.flexContent}
-                title={reviewer ? `${effectiveLabel}\n${reviewer}` : effectiveLabel}
-            >
-                <HiColoredLabel
-                    active={active}
-                    classes={{ root: classes.label }}
-                    color={color}
-                    label={effectiveLetter}
-                    outlined={outlined}
-                />
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellSentinel' })(CellSentinel);

package/src/HiCell/CellSentinel.test.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import HiColoredLabel from '../HiColoredLabel';
-import CellSentinel from './CellSentinel';
-
-describe('<CellSentinel/>', () => {
-    let shallow;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-    });
-
-    it('should render a div with 1 HiColoredLabel inside', () => {
-        const wrapper = shallow(
-            <CellSentinel
-                label={'Acceptée'}
-                letter={'A'}
-                color={'#00AF01'}
-            />,
-        );
-        assert.strictEqual(wrapper.find(HiColoredLabel).length, 1);
-    });
-
-    it('should render a div with 1 HiColoredLabel active inside', () => {
-        const wrapper = shallow(
-            <CellSentinel
-                label={'Acceptée'}
-                letter={'A'}
-                color={'#00AF01'}
-                active
-            />,
-        );
-        assert.strictEqual(wrapper.find(HiColoredLabel).length, 1);
-    });
-
-    it('should render a div with 1 HiColoredLabel outlined inside', () => {
-        const wrapper = shallow(
-            <CellSentinel
-                label={'Acceptée'}
-                letter={'A'}
-                color={'#00AF01'}
-                outlined
-            />,
-        );
-        assert.strictEqual(wrapper.find(HiColoredLabel).length, 1);
-    });
-
-    it('should render a div with 1 HiColoredLabel with title inside', () => {
-        const wrapper = shallow(
-            <CellSentinel
-                label={'Autorisée'}
-                letter={'A'}
-                color={'#00AF01'}
-                title={'Autorisée par John Doe'}
-            />,
-        );
-        assert.strictEqual(wrapper.find(HiColoredLabel).length, 1);
-    });
-});

package/src/HiCell/CellSentinelScore.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import HiColoredLabel from '../HiColoredLabel';
-import withStyles from '@mui/styles/withStyles';
-
-export const styles = {
-    flexContent: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-    },
-    label: {},
-};
-
-export const sentinelColorById = {
-    NOT_LAUNCHED: '#737373',
-    ACCEPTED: '#00AF01',
-    AUTHENTICATE: '#484A4B',
-    FORCE_AUTHENTICATE: '#20272B',
-    PENDING: '#3987AD',
-    CHALLENGED: '#FF8F01',
-    BLOCKED: '#D50000',
-    ALLOWED: '#00AF01',
-    DENIED: '#D50000',
-};
-
-/**
- * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
- */
-class CellSentinelScore extends React.PureComponent {
-    static propTypes = {
-        active: PropTypes.bool,
-        classes: PropTypes.object,
-        result: PropTypes.string,
-        value: PropTypes.number,
-    };
-
-    static defaultProps = {
-        active: false,
-    };
-
-    render() {
-        const {
-            active,
-            classes,
-            result,
-            value,
-        } = this.props;
-
-        return (
-            <div className={classes.flexContent}>
-                <HiColoredLabel
-                    active={active}
-                    classes={{ root: classes.label }}
-                    color={sentinelColorById[result]}
-                    label={value > 0 ? `+${value}` : `${value}`}
-                />
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellSentinelScore' })(CellSentinelScore);