@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiNotice/HiKPI.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import Collapse from '@material-ui/core/Collapse';
+
+export const styles = theme => ({
+    root: {
+        background: theme.palette.background3,
+        height: 104,
+        width: 136,
+        padding: '0px 8px',
+        margin: 8,
+        display: 'flex',
+        textAlign: 'center',
+        flexDirection: 'column',
+        alignItems: 'center',
+        fontFamily: theme.typography.fontFamily,
+        transition: 'height .5s ease-out',
+    },
+    rootDisable: {
+        cursor: 'default',
+    },
+    error: {
+        boxShadow: '0px 2px 4px 0px rgba(213, 0, 0, 0.24)',
+        '&:hover, &:focus': {
+            boxShadow: '0px 3px 5px 0px rgba(213, 0, 0, 0.32)',
+        },
+    },
+    warning: {
+        boxShadow: '0px 2px 4px 0px rgba(249, 148, 8, 0.32)',
+        '&:hover, &:focus': {
+            boxShadow: '0px 3px 5px 0px rgba(249, 148, 8, 0.40)',
+        },
+    },
+    inherit: {
+        boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.16)',
+        '&:hover, &:focus': {
+            boxShadow: '0px 3px 5px 0px rgba(0, 0, 0, 0.24)',
+        },
+    },
+    positive: {
+        boxShadow: '0px 1px 3px 0px rgba(0, 175, 1, 0.36)',
+        '&:hover, &:focus': {
+            boxShadow: '0px 3px 5px 0px rgba(0, 175, 1, 0.44)',
+        },
+    },
+    active: {
+        background: theme.palette.background2,
+        boxShadow: 'none',
+    },
+    body: {
+        margin: 0,
+        display: 'inline-grid',
+        alignItems: 'center',
+        fontSize: 20,
+        fontWeight: theme.typography.fontWeightLight,
+        flex: '1 1 auto',
+    },
+    title: {
+        maxHeight: 16,
+        maxWidth: '100%',
+        margin: '7px 0px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        fontSize: 14,
+        fontWeight: theme.typography.fontWeightLight,
+        flex: '0 1 16px',
+    },
+    subtitle: {
+        maxHeight: 28,
+        margin: '2px 0px',
+        maxWidth: '100%',
+        color: theme.palette.neutral.main,
+        fontSize: 11,
+        lineHeight: '13px',
+        fontWeight: theme.typography.fontWeightMedium,
+        flex: '0 1 28px',
+    },
+    minify: {
+        height: 72,
+    },
+});
+
+class HiKPI extends React.Component {
+    static propTypes = {
+        /**
+         * Extension du style appliqué au composant
+         */
+        active: PropTypes.bool,
+        /**
+         * Corps du KPI
+         */
+        body: PropTypes.any.isRequired,
+        /**
+         * Version minifiée du composant
+         */
+        bodyMinify: PropTypes.any,
+        /**
+         * Id of the button
+         */
+        buttonId: PropTypes.string,
+        /**
+         * Fonction appelée au clic sur le KPI
+         */
+        classes: PropTypes.object,
+        /**
+         * KPI est-il actif ?
+         */
+        color: PropTypes.oneOf(['inherit', 'warning', 'error', 'positive']),
+        /**
+         * Titre du KPI
+         */
+        disable: PropTypes.bool,
+        /**
+         * KPI id
+         */
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        /**
+         * Corps minifié du KPI si nécessaire
+         */
+        minify: PropTypes.bool,
+        /**
+         * Sous-titre du KPI
+         */
+        onClick: PropTypes.func,
+        /**
+         * Type du KPI (ancré ou normal : ancré permet action de clic)
+         */
+        subtitle: PropTypes.any,
+        /**
+         * Couleur de l'ombre du KPI
+         */
+        title: PropTypes.string,
+        /**
+         * Contenu du tooltip (facultatif)
+         */
+        tooltip: PropTypes.any,
+    };
+
+    static defaultProps = {
+        active: false,
+        minify: false,
+        color: 'inherit',
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick = id => () => {
+        this.props.onClick(id);
+    };
+
+    render() {
+        const { classes, minify, bodyMinify, active, title, body, subtitle, color, id, tooltip, disable, buttonId } = this.props;
+
+        const rootclass = classNames(classes.root, {
+            [classes.inherit]: color === 'inherit',
+            [classes.warning]: (color === 'warning' && !disable),
+            [classes.error]: (color === 'error' && !disable),
+            [classes.positive]: (color === 'positive' && !disable),
+            [classes.active]: active,
+            [classes.minify]: minify,
+            [classes.rootDisable]: disable,
+        });
+
+        return (
+                <ButtonBase
+                    id={buttonId}
+                    className={rootclass}
+                    onClick={!disable ? this.handleClick(id) : undefined}
+                    title={tooltip}
+                    disableRipple={disable}
+                    disabled={disable}
+                >
+                    {title &&
+                    <h3 className={classes.title}>
+                        {title}
+                    </h3>
+                    }
+                    <div className={classes.body}>
+                        {minify && bodyMinify ? bodyMinify : body}
+                    </div>
+                    <Collapse in={!minify} timeout={'auto'}>
+                        <div className={classes.subtitle}>
+                            {subtitle}
+                        </div>
+                    </Collapse>
+                </ButtonBase>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiKPI' })(HiKPI);

package/src/HiNotice/HiKPI.test.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiKPI from './HiKPI';
+import { spy } from 'sinon';
+
+describe('<HiKPI />', () => {
+    let shallow;
+    let classes;
+    let mount;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+        classes = getClasses(<HiKPI id={1} type={'normal'} body={'Test'} />);
+        mount = createMount();
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    describe('Should have root classes => all kpi', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI id={1} type={'normal'} body={'Test'} color={'inherit'} />,
+            );
+        });
+
+        it('should render a div with classes root', () => {
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+    });
+
+    describe('Should have root and inherit classes => inherit color', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI id={1} type={'normal'} body={'Test'} color={'inherit'} />,
+            );
+        });
+
+        it('should render a div with classes inherit and root', () => {
+            assert.strictEqual(wrapper.hasClass(classes.inherit), true);
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+    });
+
+    describe('Should have root and warning classes => warning color', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI id={1} type={'normal'} body={'Test'} color={'warning'} />,
+            );
+        });
+
+        it('should render a div with classes warning and root', () => {
+            assert.strictEqual(wrapper.hasClass(classes.warning), true);
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+    });
+
+    describe('Should have root and error classes => error color', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI id={1} type={'normal'} body={'Test'} color={'error'} />,
+            );
+        });
+
+        it('should render a div with classes error and root', () => {
+            assert.strictEqual(wrapper.hasClass(classes.error), true);
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+    });
+
+    describe('Should have on click callback', () => {
+        let wrapper;
+        const handler = spy();
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={'Test'}
+                    color={'inherit'}
+                    onClick={handler}
+                />,
+            );
+        });
+
+        it('should render a div with classes active and minify', () => {
+            wrapper.simulate('click');
+            assert.strictEqual(handler.calledOnce, true, 'should onclick be called once');
+        });
+    });
+
+    describe('Hidden subtitle on click on KPI', () => {
+        let wrapper;
+        const handler = spy();
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={'Test'}
+                    subtitle={'Test subtitle'}
+                    color={'inherit'}
+                    onClick={handler}
+                />,
+            );
+        });
+
+        it('Should render KPI with subtitle, on click subtitle is hidden', () => {
+            assert.strictEqual(wrapper.find({ className: classes.subtitle }).exists(), true, 'should have subtitle');
+            wrapper.simulate('click');
+        });
+    });
+
+    describe('Show title or not', () => {
+        let wrapper;
+        let wrapper2;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={'Test'}
+                    color={'inherit'}
+                />,
+            );
+
+            wrapper2 = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={'Test'}
+                    color={'inherit'}
+                    title={'Test title'}
+                />,
+            );
+        });
+
+        it('Should not have title', () => {
+            assert.strictEqual(wrapper.find({ className: classes.title }).exists(), false, 'should not have title');
+        });
+
+        it('Should render KPI with title', () => {
+            assert.strictEqual(wrapper2.find({ className: classes.title }).exists(), true, 'should have title');
+        });
+    });
+
+    describe('Should show minify body when KPI is minify', () => {
+        let wrapper;
+        const handler = spy();
+
+        const body = 'Test body';
+        const bodyMinify = 'Test';
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={body}
+                    bodyMinify={bodyMinify}
+                    color={'inherit'}
+                    onClick={handler}
+                />,
+            );
+        });
+
+
+        it('Should show minify body when KPI is minify', () => {
+            assert.strictEqual(wrapper.find({ className: classes.body }).text(), body, 'should have body not minify');
+            wrapper.simulate('click');
+        });
+    });
+});

package/src/HiNotice/HiKPINotice.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import HiKPI from './HiKPI';
+
+const styles = () => ({
+    container: {
+        minWidth: 230,
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'left',
+    },
+});
+
+const HiKPINotice = ({ classes, kpis, activeKpi, minify, onClickOnKPI }) => {
+    return (
+        <div className={classes.container}>
+            {
+                Object.keys(kpis).map((key) => {
+                    const kpi = kpis[key];
+                    return (
+                        <HiKPI
+                            key={key}
+                            id={key}
+                            type={kpi.type}
+                            color={kpi.color}
+                            title={kpi.title}
+                            body={kpi.body}
+                            bodyMinify={kpi.bodyMinify}
+                            subtitle={kpi.subtitle}
+                            tooltip={kpi.tooltip}
+                            onClick={() => onClickOnKPI(key)}
+                            active={activeKpi === key}
+                            minify={minify}
+                            disable={kpi.disable}
+                            buttonId={kpi.buttonId}
+                        />
+                    );
+                })
+            }
+        </div>
+    );
+};
+
+HiKPINotice.propTypes = {
+    /**
+     * Extension du style appliqué au composant
+     */
+    activeKpi: PropTypes.string,
+    /**
+     * Liste des KPIs
+     */
+    classes: PropTypes.object,
+    /**
+     * Fonction appelée au clic sur un KPI
+     */
+    kpis: PropTypes.object.isRequired,
+    /**
+     * Liste des KPIS actifs
+     */
+    minify: PropTypes.bool,
+    /**
+     * Minifie les KPIs si vrai
+     */
+    onClickOnKPI: PropTypes.func,
+};
+
+HiKPINotice.defaultProps = {
+    activeKpi: null,
+    minify: false,
+};
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiKPINotice' })(HiKPINotice);

package/src/HiNotice/HiKPINotice.test.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { assert, expect } from 'chai';
+import { createShallow, createMount } from '../test-utils';
+import HiKPINotice from './HiKPINotice';
+import HiKPI from './HiKPI';
+
+describe('<HiKPINotice />', () => {
+    let shallow;
+    let mount;
+    const kpis = {
+        test1: {
+            title: 'Test',
+            body: 'Test body',
+            type: 'normal',
+            color: 'inherit',
+        },
+        test2: {
+            id: 1,
+            title: 'Test',
+            body: 'Test body',
+            type: 'normal',
+            color: 'inherit',
+        },
+        test3: {
+            id: 2,
+            title: 'Test',
+            body: 'Test body',
+            type: 'normal',
+            color: 'inherit',
+        },
+    };
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+        mount = createMount();
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    describe('Should have HiKPI child', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPINotice
+                    kpis={kpis}
+                />,
+            );
+        });
+
+        it('should have HiKPI child', () => {
+            const childrens = wrapper.children();
+            childrens.forEach(child => {
+                assert.strictEqual(child.find(HiKPI).exists(), true, 'should be a HiKPI child');
+            });
+        });
+    });
+
+    describe('Should have same number of KPI component as kpis list', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPINotice
+                    kpis={kpis}
+                />,
+            );
+        });
+
+        it('should render same number of kpi component as kpis list', () => {
+            expect(wrapper.children()).to.have.lengthOf(Object.keys(kpis).length);
+        });
+    });
+
+    describe('On click on a KPI, this KPI is minify and active and the others KPIs are only minify', () => {
+        let wrapper;
+        const activeKpi = null;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPINotice
+                    kpis={kpis}
+                    activeKpi={activeKpi}
+                    minify
+                />,
+            );
+        });
+
+
+        it('should have KPI0 active and minify and others are only minify', () => {
+            const childrens = wrapper.children();
+            childrens.forEach(child => {
+                child = child.find(HiKPI);
+
+                if (activeKpi === child.props().id) {
+                    assert.strictEqual(child.props().active, true, 'should be an active child KPI');
+                }
+
+                assert.strictEqual(child.props().minify, true, 'should be an minify child KPI');
+            });
+        });
+    });
+});

package/src/HiNotice/index.js

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