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

package/src/HiBreadcrumb/HiStep.js

@@ -1,122 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import HiStepConnector from './HiStepConnector';
-import HiStepContent from './HiStepContent';
-
-export const styles = () => ({
-    lastStep: {
-        marginBottom: 40,
-    },
-    step: {
-        outline: 'none',
-    },
-});
-
-class HiStep extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Sets the step as active. Is passed to child components.
-         */
-        active: PropTypes.bool,
-        /**
-         * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
-         */
-        children: PropTypes.node,
-        /**
-         * Surcharge des classes
-         */
-        classes: PropTypes.object,
-        /**
-         * The content to be displayed in the case of front-light breadcrumb
-         */
-        content: PropTypes.node,
-        /**
-         * Index de l'étape
-         */
-        index: PropTypes.number.isRequired,
-        /**
-         * @ignore
-         * Used to know which step is the last, to not put a HiStepConnector
-         */
-        isLast: PropTypes.bool,
-        /**
-         * Callback on step container click
-         */
-        onClick: PropTypes.func,
-        /**
-         * The collection of steps of the breadcrumb.
-         */
-        steps: PropTypes.array,
-        /**
-         * @ignore
-         */
-        type: PropTypes.oneOf(['back', 'front-light', 'front-dark']),
-        /**
-         * @ignore
-         */
-        validConnector: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        active: false,
-        content: <span />,
-        isLast: false,
-        steps: [],
-        type: 'back',
-        validConnector: false,
-    };
-
-    focus = () => this.ref.focus;
-
-    handleRef = component => {
-        this.ref = component;
-    };
-
-    render() {
-        const {
-            active,
-            children,
-            classes,
-            content,
-            index,
-            isLast,
-            onClick,
-            steps,
-            type,
-            validConnector,
-        } = this.props;
-        return (
-            <div
-                role="button"
-                tabIndex={index}
-                className={classNames(classes.step, { [classes.lastStep]: isLast && type !== 'back' })}
-                onClick={onClick}
-                onKeyDown={onClick}
-            >
-                {React.Children.map(children, child =>
-                    React.cloneElement(child, {
-                        active,
-                        ...child.props,
-                    }),
-                )}
-                {!isLast && (
-                    <HiStepConnector
-                        validConnector={validConnector}
-                        type={type}
-                        steps={steps}
-                        active={active}
-                        content={content}
-                    />
-                )}
-                {content &&
-                active &&
-                isLast &&
-                type === 'front-light' && <HiStepContent content={content} isLast />}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'MuiHiStep' })(HiStep);

package/src/HiBreadcrumb/HiStep.test.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import HiStep from './HiStep';
-
-describe('<HiStep />', () => {
-    let shallow;
-
-    before(() => {
-        shallow = createShallow();
-    });
-
-    it('should render a HiStep component', () => {
-        const wrapper = shallow(<HiStep index={0} />);
-        assert.strictEqual(wrapper.name(), 'HiStep');
-    });
-
-    it('should render a connector', () => {
-        const wrapper = shallow(<HiStep index={0} />);
-        assert.strictEqual(
-            wrapper
-                .dive()
-                .find('WithStyles(HiStepConnector)')
-                .dive()
-                .name(),
-            'HiStepConnector',
-        );
-    });
-
-    it("should not render a connector if it's the last step", () => {
-        const wrapper = shallow(<HiStep isLast index={0} />);
-        assert.strictEqual(wrapper.dive().find('WithStyles(HiStepConnector)').length, 0);
-    });
-
-    it("should render some content if it's the last step and it's a front-light breadcrumb", () => {
-        const wrapper = shallow(
-            <HiStep isLast index={0} type="front-light" content={<div>Some content</div>} active />,
-        );
-        assert.strictEqual(
-            wrapper
-                .dive()
-                .childAt(0)
-                .dive()
-                .name(),
-            'HiStepContent',
-        );
-    });
-
-    it('should render its children', () => {
-        const wrapper = shallow(
-            <HiStep index={0}>
-                <div id="test">label test</div>
-            </HiStep>,
-        );
-        assert.strictEqual(
-            wrapper
-                .dive()
-                .find('div#test')
-                .props().active,
-            false,
-        );
-    });
-});

package/src/HiBreadcrumb/HiStepConnector.js

@@ -1,141 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import HiStepContent from './HiStepContent';
-
-export const styles = theme => ({
-    root: {
-        display: 'flex',
-        flex: '1 1 auto',
-        marginLeft: 13, // half icon
-    },
-    line: {
-        display: 'block',
-        borderColor: theme.palette.grey[600],
-        borderLeftStyle: 'solid',
-        borderLeftWidth: 2,
-        height: 40,
-        margin: '-2px 0px',
-    },
-    greenLine: {
-        borderColor: theme.palette.positive.main,
-    },
-    lightLine: {
-        borderColor: '#FFFFFF',
-    },
-});
-
-/**
- * @ignore - internal component.
- */
-class HiStepConnector extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Used to know if the step it is connected to is active, and if so possibly adapt its height
-         */
-        active: PropTypes.bool,
-        /**
-         * Useful to extend the style applied to the component.
-         */
-        classes: PropTypes.object.isRequired,
-        /**
-         * @ignore
-         */
-        className: PropTypes.string,
-        /**
-         * The content to be displayed in the case of front-light breadcrumb
-         */
-        content: PropTypes.node,
-        /**
-         * The collection of steps of the breadcrumb.
-         */
-        steps: PropTypes.array,
-        /**
-         * specifies which type of breadcrumb is used
-         */
-        type: PropTypes.oneOf(['back', 'front-dark', 'front-light']),
-        /**
-         * Specifies if the connector should be displayed in green or its default color
-         */
-        validConnector: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        active: false,
-        content: <span />,
-        steps: [],
-        type: 'back',
-        validConnector: false,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            height: 800,
-        };
-
-        this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
-    }
-
-    componentDidMount() {
-        this.updateWindowDimensions();
-        window.addEventListener('resize', this.updateWindowDimensions);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.updateWindowDimensions);
-    }
-
-    updateWindowDimensions() {
-        this.setState({ height: window.innerHeight });
-    }
-
-    render() {
-        const {
-            active,
-            className: classNameProp,
-            classes,
-            content,
-            steps,
-            type,
-            validConnector,
-            ...other
-        } = this.props;
-
-        const { height } = this.state;
-
-        const className = classNames(classes.root, classNameProp);
-        const lineClassName = classNames(classes.line, {
-            [classes.greenLine]: validConnector,
-            [classes.lightLine]: type === 'front-light',
-        });
-
-        let lineHeight = 40;
-
-        if (type !== 'back') {
-            // Pour un breadcrumb Front, la tige du connector de la step active doit s'allonger en fonction de la hauteur de la page et du nombre de steps
-            lineHeight = height - 226 - 58 * (steps.length - 1);
-            if (lineHeight < 202) {
-                lineHeight = 202;
-            }
-        }
-
-        let heightStyle = {};
-        if (active) {
-            heightStyle = { height: lineHeight };
-        }
-
-        return (
-            <div className={className} {...other}>
-                <span className={lineClassName} style={heightStyle} />
-                {type === 'front-light' && active && content && <HiStepContent content={content} />}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'HiMuiHiStepConnector' })(
-    HiStepConnector,
-);

package/src/HiBreadcrumb/HiStepConnector.test.js

@@ -1,136 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import HiStepConnector from './HiStepConnector';
-
-describe('<HiStepConnector />', () => {
-    let shallow;
-    let wrapper;
-
-    const steps = [
-        {
-            id: 0,
-            status: 'validated',
-            label: 'Informations légales',
-        },
-        {
-            id: 1,
-            status: 'validated',
-            label: 'Les bénéficiaires effectifs',
-        },
-        {
-            id: 2,
-            status: 'validated',
-            label: 'Les mandataires',
-        },
-        {
-            id: 3,
-            status: 'active',
-            label: 'Autres documents',
-        },
-        {
-            id: 4,
-            status: 'unreviewed',
-            label: 'Mise en place du compte',
-        },
-    ];
-
-    before(() => {
-        shallow = createShallow();
-    });
-
-    describe('with a steps prop', () => {
-        before(() => {
-            wrapper = shallow(<HiStepConnector steps={steps} />);
-        });
-
-        it('should render a HiStepConnector component', () => {
-            assert.strictEqual(wrapper.name(), 'HiStepConnector');
-        });
-
-        it('should render a div', () => {
-            assert.strictEqual(wrapper.dive().name(), 'div');
-        });
-
-        it('should have its validConnector prop set correctly', () => {
-            assert.strictEqual(wrapper.props().validConnector, false);
-        });
-
-        it('should have its type prop set correctly', () => {
-            assert.strictEqual(wrapper.props().type, 'back');
-        });
-
-        it('should have its active prop set correctly', () => {
-            assert.strictEqual(wrapper.props().active, false);
-        });
-    });
-
-    describe('with a validConnector prop', () => {
-        before(() => {
-            wrapper = shallow(<HiStepConnector validConnector />);
-        });
-
-        it('should have its validConnector prop set correctly', () => {
-            assert.strictEqual(wrapper.props().validConnector, true);
-        });
-    });
-
-    describe('with a type prop', () => {
-        before(() => {
-            wrapper = shallow(<HiStepConnector type="front-dark" />);
-        });
-
-        it('should have its type prop set correctly', () => {
-            assert.strictEqual(wrapper.props().type, 'front-dark');
-        });
-    });
-
-    describe('with an active prop', () => {
-        before(() => {
-            wrapper = shallow(<HiStepConnector active />);
-        });
-
-        it('should have its type prop set correctly', () => {
-            assert.strictEqual(wrapper.props().active, true);
-        });
-    });
-
-    describe('with an active prop and a type prop', () => {
-        before(() => {
-            wrapper = shallow(<HiStepConnector steps={steps} type="front-dark" active />);
-        });
-
-        // Pour ce test, on vérifie que la hauteur du connector est correctement calculée.
-        // Elle est fonction du nombre d'étapes, est le polynome permettant de la calculer est le suivant :
-        // height = screenHeight - 58 * (nbSteps - 1), ce qui pour notre cas de test où nbSteps = 5 et la hauteur de l'écran est initialisée à 768 donne 310
-        it('should have its length calculated correctly', () => {
-            assert.strictEqual(
-                wrapper
-                    .dive()
-                    .find('span')
-                    .props().style.height,
-                310,
-            );
-        });
-    });
-
-    describe('with content attached, in the case of a front-light breadcrumb', () => {
-        before(() => {
-            const content = <span>Test</span>;
-            wrapper = shallow(
-                <HiStepConnector steps={steps} type="front-light" active content={content} />,
-            );
-        });
-
-        it('should render a HiStepContent component with content in it', () => {
-            assert.strictEqual(
-                wrapper
-                    .dive()
-                    .childAt(1)
-                    .dive()
-                    .name(),
-                'HiStepContent',
-            );
-        });
-    });
-});

package/src/HiBreadcrumb/HiStepContent.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
-
-export const styles = () => ({
-    root: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    contentContainer: {
-        height: 'fit-content',
-        maxHeight: 300,
-        marginTop: 35,
-        marginLeft: 24,
-        padding: 24,
-        textAlign: 'center',
-        fontFamily: 'Roboto, Regular, sans-serif',
-        color: '#737373',
-        fontSize: 14,
-        lineHeight: '20px',
-        borderRadius: 3,
-    },
-    lastStep: {
-        marginLeft: 0,
-        marginTop: 20,
-    },
-});
-
-class HiStepContent extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Surcharge des classes
-         */
-        classes: PropTypes.object,
-        content: PropTypes.node,
-        isLast: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        content: <span />,
-        isLast: false,
-    };
-
-    render() {
-        const { classes, content, isLast } = this.props;
-
-        return (
-            <Paper
-                square
-                className={classNames(classes.contentContainer, {
-                    [classes.lastStep]: isLast,
-                })}
-            >
-                <div className={classes.root}>{content}</div>
-            </Paper>
-        );
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'HiMuiHiStepContent' })(HiStepContent);

package/src/HiBreadcrumb/HiStepContent.test.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import HiStepContent from './HiStepContent';
-
-describe('<HiStepContent />', () => {
-    let shallow;
-    let wrapper;
-
-    before(() => {
-        shallow = createShallow();
-    });
-
-    describe('with default values', () => {
-        before(() => {
-            wrapper = shallow(<HiStepContent />);
-        });
-
-        it('should render a HiStepContent component', () => {
-            assert.strictEqual(wrapper.name(), 'HiStepContent');
-        });
-
-        it('should render a Paper component', () => {
-            assert.strictEqual(wrapper.dive().name(), 'WithStyles(Paper)');
-        });
-    });
-
-    describe('with a content prop', () => {
-        before(() => {
-            wrapper = shallow(<HiStepContent content="Test" />);
-        });
-
-        it('should have its content prop set correctly', () => {
-            assert.strictEqual(wrapper.props().content, 'Test');
-        });
-    });
-});