@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/src/HiAlertModal/HiAlertModal.md

@@ -1,149 +0,0 @@
-HiAlertModal example: 
-
-```js
-import React from 'react';
-import HiButton from '../HiButton';
-import HiAlertModal from '../HiAlertModal';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
-import HiSwitch from '../HiSwitch';
-import HiSelectField from '../HiSelect/HiSelectField';
-import HiPermission from '../hi-svg-icons/HiPermission';
-
-class HiAlertModalDemo extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            open: false,
-            backgroundIcon: null,
-            submitButton: true,
-            submitButtonColor: 'primary',
-            cancelButton: true,
-            cancelButtonColor: 'neutral',
-        };
-        this.handleChangeCancelButton = this.handleChangeCancelButton.bind(this);
-        this.handleChangeSubmitButton = this.handleChangeSubmitButton.bind(this);
-        this.handleClickOpen = this.handleClickOpen.bind(this);
-        this.handleClose = this.handleClose.bind(this);
-        this.handleClickSubmit = this.handleClickSubmit.bind(this);
-        this.handleClickCancel = this.handleClickCancel.bind(this);
-    }
-
-    handleChangeCancelButton(event, value) {
-        this.setState({ cancelButtonColor: value });
-    }
-
-    handleChangeSubmitButton(event, value) {
-        this.setState({ submitButtonColor: value });
-    }
-
-    handleClickOpen() {
-        this.setState({ open: true });
-        // eslint-disable-next-line no-console
-        console.log('Ouverture de la popup');
-    }
-
-    handleClose() {
-        this.setState({ open: false });
-        // eslint-disable-next-line no-console
-        console.log('Fermeture de la pop up (clic en dehord de la popup)');
-    }
-
-    handleClickSubmit() {
-        this.setState({ open: false });
-        // eslint-disable-next-line no-console
-        console.log('Clic bouton submit');
-    }
-
-    handleClickCancel() {
-        this.setState({ open: false });
-        // eslint-disable-next-line no-console
-        console.log('Clic bouton cancel');
-    }
-
-    render() {
-        const { submitButton, submitButtonColor, cancelButton, cancelButtonColor, backgroundIcon } = this.state;
-
-        const colors = [
-            { id: 'default', label: 'default', hideCheckbox: true },
-            { id: 'inherit', label: 'inherit', hideCheckbox: true },
-            { id: 'primary', label: 'primary', hideCheckbox: true },
-            { id: 'secondary', label: 'secondary', hideCheckbox: true },
-            { id: 'positive', label: 'positive', hideCheckbox: true },
-            { id: 'negative', label: 'negative', hideCheckbox: true },
-            { id: 'middle', label: 'middle', hideCheckbox: true },
-            { id: 'neutral', label: 'neutral', hideCheckbox: true },
-        ];
-        return (
-            <div>
-                <HiButton color="primary" onClick={this.handleClickOpen}>Open Alert Modal</HiButton>
-                <HiAlertModal
-                    open={this.state.open}
-                    title="Espace limité"
-                    content="Votre tableau de bord est plein.<br/>Veuillez supprimer un widget avant d'ajouter celui-ci."
-                    labelSubmitButton={submitButton ? 'OK' : ''}
-                    submitColor={submitButtonColor}
-                    onSubmitClick={this.handleClickSubmit}
-                    onCancelClick={this.handleClickCancel}
-                    onClose={this.handleClose}
-                    labelCancelButton={cancelButton ? 'CANCEL' : ''}
-                    cancelColor={cancelButtonColor}
-                    backgroundIcon={backgroundIcon}
-                    iconSize={123}
-                />
-
-                <FormGroup>
-                    <FormControlLabel
-                        control={
-                            <HiSwitch
-                                checked={backgroundIcon}
-                                onChange={(event, checked) => this.setState({ backgroundIcon: checked ? 'hi_download' : null })}
-                                color="primary"
-                            />
-                        }
-                        label="backgroundIcon"
-                    />
-                    <FormControlLabel
-                        control={
-                            <HiSwitch
-                                checked={submitButton}
-                                onChange={(event, checked) => this.setState({ submitButton: checked })}
-                                color="primary"
-                            />
-                        }
-                        label="Submit button"
-                    />
-                    <FormControlLabel
-                        control={
-                            <HiSwitch
-                                checked={cancelButton}
-                                onChange={(event, checked) => this.setState({ cancelButton: checked })}
-                                color="primary"
-                            />
-                        }
-                        label="Cancel button"
-                    />
-                    <HiSelectField
-                        id="submitButtonColor"
-                        name="submitButtonColor"
-                        onChange={this.handleChangeSubmitButton}
-                        options={colors}
-                        value={submitButtonColor}
-                        label="Submit Button Color"
-                    />
-                    <HiSelectField
-                        id="cancelButtonColor"
-                        name="cancelButtonColor"
-                        onChange={this.handleChangeCancelButton}
-                        options={colors}
-                        value={cancelButtonColor}
-                        label="Cancel Button Color"
-                    />
-                </FormGroup>
-            </div>
-        );
-    }
-}
-;<HiAlertModalDemo />
-```

package/src/HiAlertModal/HiAlertModal.test.js

@@ -1,274 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy, useFakeTimers } from 'sinon';
-import { createShallow, createMount, getClasses } from '../test-utils';
-import HiAlertModal from './HiAlertModal';
-import HiButton from '../HiButton';
-import HiIcon from '../HiIcon';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import BulletinBoard from 'mdi-material-ui/BulletinBoard';
-
-describe('<HiAlertModal />', () => {
-    let mount;
-    let wrapper;
-    let shallow;
-
-    let componentClasses;
-
-    before(() => {
-        componentClasses = getClasses(
-            <HiAlertModal
-                open
-                title="Title"
-                content="Content"
-                labelCancelButton="Cancel Button"
-                labelSubmitButton="Submit Button"
-            />
-        );
-    });
-
-    beforeEach(() => {
-        mount = createMount();
-        shallow = createShallow({ dive: true });
-    });
-
-    afterEach(() => {
-        mount.cleanUp();
-    });
-
-    // Tests component
-    it('Test mount component complete', () => {
-        wrapper = mount(
-            <HiAlertModal
-                open
-                title="Title"
-                content="Content"
-                labelSubmitButton="Submit Button"
-                labelCancelButton="Cancel Button"
-                submitColor="negative"
-                backgroundIcon={<BulletinBoard/>}
-            />,
-        );
-
-        assert.strictEqual(wrapper.find(DialogTitle).length, 1, 'should have DialogTitle');
-        assert.strictEqual(wrapper.find(DialogContent).length, 1, 'should have DialogContent');
-        assert.strictEqual(wrapper.find(DialogActions).length, 1, 'should have DialogActions');
-        assert.strictEqual(wrapper.find(HiButton).length, 2, 'should have 2 HiButtons');
-        assert.strictEqual(wrapper.find(HiIcon).length, 1, 'should have 1 HiIcon');
-    });
-
-    it('Test mount component without background', () => {
-        wrapper = mount(
-            <HiAlertModal
-                open
-                title="Title"
-                content="Content"
-                labelSubmitButton="Submit Button"
-                labelCancelButton="Cancel Button"
-                submitColor="negative"
-            />,
-        );
-
-        assert.strictEqual(wrapper.find(DialogTitle).length, 1, 'should have DialogTitle');
-        assert.strictEqual(wrapper.find(DialogContent).length, 1, 'should have DialogContent');
-        assert.strictEqual(wrapper.find(DialogActions).length, 1, 'should have DialogActions');
-        assert.strictEqual(wrapper.find(HiButton).length, 2, 'should have 2 HiButtons');
-        assert.strictEqual(wrapper.find(HiIcon).length, 0, 'should have no HiIcon');
-    });
-
-    it('Test mount component without submit button', () => {
-        wrapper = mount(
-            <HiAlertModal
-                open
-                title="Title"
-                content="Content"
-                labelCancelButton="Cancel Button"
-                submitColor="negative"
-            />,
-        );
-
-        assert.strictEqual(wrapper.find(DialogTitle).length, 1, 'should have DialogTitle');
-        assert.strictEqual(wrapper.find(DialogContent).length, 1, 'should have DialogContent');
-        assert.strictEqual(wrapper.find(DialogActions).length, 1, 'should have DialogActions');
-        assert.strictEqual(wrapper.find(HiButton).length, 1, 'should have 1 HiButton');
-        assert.strictEqual(wrapper.find(HiIcon).length, 0, 'should have no HiIcon');
-    });
-
-    it('Test mount component without cancel button', () => {
-        wrapper = mount(
-            <HiAlertModal
-                open
-                title="Title"
-                content="Content"
-                labelSubmitButton="Submit Button"
-                submitColor="negative"
-            />,
-        );
-
-        assert.strictEqual(wrapper.find(DialogTitle).length, 1, 'should have DialogTitle');
-        assert.strictEqual(wrapper.find(DialogContent).length, 1, 'should have DialogContent');
-        assert.strictEqual(wrapper.find(DialogActions).length, 1, 'should have DialogActions');
-        assert.strictEqual(wrapper.find(HiButton).length, 1, 'should have 1 HiButton');
-        assert.strictEqual(wrapper.find(HiIcon).length, 0, 'should have no HiIcon');
-    });
-
-    describe('Focus', () => {
-        let clock;
-
-        beforeEach(() => {
-            clock = useFakeTimers();
-        });
-        afterEach(() => {
-            clock.restore;
-        });
-
-        it('Should focus on submit button when mounted with submit and cancel buttons', () => {
-            wrapper = mount(
-                <HiAlertModal
-                    open
-                    title="Title"
-                    content="Content"
-                    labelCancelButton="Cancel Button"
-                    labelSubmitButton="Submit Button"
-                />
-            );
-
-            clock.tick(10000);
-
-            let focusedElement = document.activeElement;
-            let cancelButtonWrapper = wrapper.find("." + componentClasses.classCancelButton).first();
-            let submitButtonWrapper = wrapper.find("." + componentClasses.classSubmitButton).first();
-
-            assert.notStrictEqual(focusedElement, cancelButtonWrapper.getDOMNode(), 'Cancel button should not be focused');
-            assert.strictEqual(focusedElement, submitButtonWrapper.getDOMNode(), 'Submit button should be focused');
-        });
-
-        it('Should focus on submit button when mounted with only a submit button', () => {
-            wrapper = mount(
-                <HiAlertModal
-                    open
-                    title="Title"
-                    content="Content"
-                    labelSubmitButton="Submit Button"
-                />
-            );
-
-            clock.tick(10000);
-
-            let focusedElement = document.activeElement;
-            let submitButtonWrapper = wrapper.find("." + componentClasses.classSubmitButton).first();
-
-            assert.strictEqual("Submit Button", submitButtonWrapper.text(), 'submitButtonWrapper variable isn\'t the submit button');
-
-            assert.strictEqual(focusedElement, submitButtonWrapper.getDOMNode(), 'Submit button should be focused');
-        });
-
-        it('Should focus on cancel button when mounted with only a cancel button', () => {
-            wrapper = mount(
-                <HiAlertModal
-                    open
-                    title="Title"
-                    content="Content"
-                    labelCancelButton="Cancel Button"
-                />
-            );
-
-            clock.tick(10000);
-
-            let focusedElement = document.activeElement;
-            let cancelButtonWrapper = wrapper.find("." + componentClasses.classCancelButton).first();
-
-            assert.strictEqual("Cancel Button", cancelButtonWrapper.text(), 'cancelButtonWrapper variable isn\'t the cancel button');
-
-            assert.strictEqual(focusedElement, cancelButtonWrapper.getDOMNode(), 'Cancel button should be focused');
-        });
-    });
-
-    // Tests callbacks
-    describe('callbacks', () => {
-        it('should call handleClickSubmit or handleClickCancel when clicking on buttons.', () => {
-            const handleClickSubmit = spy();
-            const handleClickCancel = spy();
-            const handleClose = spy();
-            wrapper = mount(
-                <HiAlertModal
-                    open
-                    title="Title"
-                    labelSubmitButton="Submit"
-                    labelCancelButton="Cancel"
-                    onSubmitClick={handleClickSubmit}
-                    onCancelClick={handleClickCancel}
-                    onClose={handleClose}
-                />,
-            );
-
-            wrapper
-                .find('button')
-                .first()
-                .simulate('click');
-            assert.strictEqual(
-                handleClickCancel.callCount,
-                1,
-                'should have been called once handleClickSubmit',
-            );
-
-            wrapper
-                .find('button')
-                .last()
-                .simulate('click');
-            assert.strictEqual(
-                handleClickSubmit.callCount,
-                1,
-                'should have been called once handleClickCancel',
-            );
-        });
-
-        it('callbacks onclose', () => {
-            const handleClose = spy();
-            wrapper = shallow(
-                <HiAlertModal
-                    open
-                    title="Title"
-                    labelSubmitButton="Submit"
-                    labelCancelButton="Cancel"
-                    onClose={handleClose}
-                />,
-            );
-
-            wrapper
-                .find(Dialog)
-                .props()
-                .onClose();
-            assert.strictEqual(
-                handleClose.callCount,
-                1,
-                'should have been called once handleClose',
-            );
-        });
-
-        it('not callback onclose', () => {
-            const handleClose = spy();
-            wrapper = shallow(
-                <HiAlertModal
-                    open
-                    title="Title"
-                    labelSubmitButton="Submit"
-                    labelCancelButton="Cancel"
-                />,
-            );
-
-            wrapper
-                .find(Dialog)
-                .props()
-                .onClose();
-            assert.strictEqual(
-                handleClose.callCount,
-                0,
-                'should no have been called once handleClose',
-            );
-        });
-    });
-});

package/src/HiAlertModal/index.js

@@ -1 +0,0 @@
-export { default } from './HiAlertModal';

package/src/HiAppBar/HiAppBar.js

@@ -1,136 +0,0 @@
-// @inheritedComponent AppBar
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Collapse from '@material-ui/core/Collapse';
-import Toolbar from '@material-ui/core/Toolbar';
-import HiIcon from '../HiIcon';
-import HiIconButton from '../HiIconButton';
-
-export const styles = theme => ({
-    root: {},
-    bar: {
-        backgroundColor: theme.palette.background3,
-        color: theme.palette.text.secondary,
-    },
-    flexDiv: {
-        flexGrow: 1,
-    },
-    focused: {
-        backgroundColor: theme.palette.background2,
-    },
-    iconButton: {},
-    collapseOverflow: {
-        overflow: 'inherit',
-    },
-    collapseButton: {
-        position: 'absolute',
-        right: 56,
-        marginTop: 8,
-    },
-});
-
-class HiAppBar extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            collapsed: false,
-        };
-
-        this.handleCollapse = this.handleCollapse.bind(this);
-    }
-
-    handleCollapse() {
-        this.props.onCollapse(!this.state.collapsed);
-    }
-
-    render() {
-        const {
-            children,
-            classes,
-            className,
-            collapsed,
-            focused,
-            hideable,
-            position
-        } = this.props;
-
-        return (
-            <AppBar
-                className={classNames(className, classes.bar, {
-                    [classes.focused]: focused,
-                })}
-                classes={{
-                    root: classes.root,
-                }}
-                elevation={2}
-                position={position}
-                color="default"
-            >
-                <Collapse
-                    className={classNames({
-                        [classes.collapseOverflow]: !hideable,
-                    })}
-                    in={!collapsed}
-                >
-                    <div>
-                        <Toolbar>
-                            {children}
-                            {hideable && (
-                                <HiIconButton
-                                    onClick={this.handleCollapse}
-                                    color="inherit"
-                                    className={classes.iconButton}
-                                >
-                                    <HiIcon icon="keyboard_arrow_up" />
-                                </HiIconButton>
-                            )}
-                        </Toolbar>
-                    </div>
-                </Collapse>
-            </AppBar>
-        );
-    }
-}
-
-HiAppBar.propTypes = {
-    /**
-     * Surcharge des classes
-     */
-    classes: PropTypes.object,
-    /**
-     * Surcharge des classes
-     */
-    className: PropTypes.string,
-    /**
-     * Is collapsed
-     */
-    collapsed: PropTypes.bool,
-    /**
-     * If focused, change background color
-     */
-    focused: PropTypes.bool,
-    /**
-     * Could be hidden
-     */
-    hideable: PropTypes.bool,
-    /**
-     * Fonction de callback au click sur le bouton chevron
-     */
-    onCollapse: PropTypes.func,
-    /**
-     * Positionement de la topBar. The behavior of the different options is described
-     * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
-     */
-    position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']),
-};
-
-HiAppBar.defaultProps = {
-    focused: false,
-    hideable: false,
-};
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiHiAppBar' })(HiAppBar);

package/src/HiAppBar/HiAppBar.md

@@ -1,79 +0,0 @@
-HiAppBar example :
-
-```js
-import React from 'react';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
-import HiAppBar from '../HiAppBar';
-import HiSwitch from '../HiSwitch';
-import HiIcon from '../HiIcon';
-import HiButton from '../HiButton';
-
-class HiAppBars extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            focused: false,
-            topMenuCollapsed: false,
-         };
-        
-        this.handleChange = this.handleChange.bind(this);
-        this.handleCollapse = this.handleCollapse.bind(this);
-        this.handleOpenTopMenu = this.handleOpenTopMenu.bind(this);
-    }
-
-    handleChange() {
-        this.setState(prevState => ({ focused: !prevState.focused }));
-    };
-
-    handleOpenTopMenu() {
-        this.setState(prevState => ({ topMenuCollapsed: !prevState.topMenuCollapsed }));
-    };
-
-    handleCollapse(collapsed) {
-        this.setState({ topMenuCollapsed: collapsed });
-    };
-
-    render() {
-        const { focused, topMenuCollapsed } = this.state;
-        return (
-            <div style={{flexGrow: 1}}>
-                <HiAppBar hideable focused={focused} position="static" collapsed={this.state.topMenuCollapsed} onCollapse={this.handleCollapse}>
-                    <HiButton>
-                        <HiIcon icon="menu" />
-                        <span style={{color: 'rgba(0,0,0,0.54)',
-                                      marginLeft: 10,
-                                      fontSize: 14}}>Menu</span>
-                    </HiButton>
-                    <div style={{flex: 1}} />
-                </HiAppBar>
-
-                <div style={{textAlign: 'center', position: 'relative'}}>
-                    <p>Hipay Enterprise</p>
-                    <p><HiIcon icon="mdi_home" />Welcome John SMITH</p>
-                    {topMenuCollapsed && (
-                        <HiButton onClick={this.handleOpenTopMenu} style={{position: 'absolute', top: 0, right: 0}}>
-                            <HiIcon icon="keyboard_arrow_up" />
-                        </HiButton>
-                    )}
-                </div>
-
-                <FormGroup>
-                    <FormControlLabel
-                        control={
-                            <HiSwitch
-                                checked={focused}
-                                color="primary"
-                                onChange={this.handleChange}
-                                aria-label="Focus"
-                            />
-                        }
-                        label="Focus"
-                    />
-                </FormGroup>
-            </div>
-        );
-    }
-}
-;<HiAppBars/>
-```

package/src/HiAppBar/index.js

@@ -1 +0,0 @@
-export { default } from './HiAppBar';