@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/HiAlertModal/HiAlertModal.md

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,274 @@
+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

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

package/src/HiAppBar/HiAppBar.js

@@ -0,0 +1,136 @@
+// @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

@@ -0,0 +1,79 @@
+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

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