@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiSwitch/HiSwitch.md

@@ -0,0 +1,255 @@
+HiSwitch example:
+
+```js
+import React from 'react';
+import HiSwitch from './HiSwitch';
+
+class HiSwitches extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            checkedA: true,
+            checkedB: true,
+            checkedC: true,
+            checkedD: true,
+            checkedE: true,
+            checkedF: true,
+        };
+        
+        this.handleChangeA = this.handleChangeA.bind(this);
+        this.handleChangeB = this.handleChangeB.bind(this);
+        this.handleChangeC = this.handleChangeC.bind(this);
+        this.handleChangeD = this.handleChangeD.bind(this);
+        this.handleChangeE = this.handleChangeE.bind(this);
+        this.handleChangeF = this.handleChangeF.bind(this);
+    }
+    
+
+    handleChangeA(event) {
+        this.setState({ checkedA: event.target.checked });
+    };
+
+    handleChangeB(event) {
+        this.setState({ checkedB: event.target.checked });
+    };
+
+    handleChangeC(event) {
+        this.setState({ checkedC: event.target.checked });
+    };
+
+    handleChangeD(event) {
+        this.setState({ checkedD: event.target.checked });
+    };
+
+    handleChangeE(event) {
+        this.setState({ checkedE: event.target.checked });
+    };
+
+    handleChangeF(event) {
+        this.setState({ checkedF: event.target.checked });
+    };
+
+    render() {
+        return (
+            <div>
+                <div>
+                    <HiSwitch
+                        checked={this.state.checkedA}
+                        onChange={this.handleChangeA}
+                        value="checkedA"
+                        color="primary"
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedB}
+                        onChange={this.handleChangeB}
+                        value="checkedB"
+                        color="secondary"
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedC}
+                        onChange={this.handleChangeC}
+                        value="checkedC"
+                        color="positive"
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedD}
+                        onChange={this.handleChangeD}
+                        value="checkedD"
+                        color="negative"
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedE}
+                        onChange={this.handleChangeE}
+                        value="checkedE"
+                        color="middle"
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedF}
+                        onChange={this.handleChangeF}
+                        value="checkedF"
+                        color="neutral"
+                    />
+                </div>
+                <div>
+                    <HiSwitch
+                        checked={this.state.checkedA}
+                        onChange={this.handleChangeA}
+                        value="checkedA"
+                        color="primary"
+                        disabled
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedB}
+                        onChange={this.handleChangeB}
+                        value="checkedB"
+                        color="secondary"
+                        disabled
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedC}
+                        onChange={this.handleChangeC}
+                        value="checkedC"
+                        color="positive"
+                        disabled
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedD}
+                        onChange={this.handleChangeD}
+                        value="checkedD"
+                        color="negative"
+                        disabled
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedE}
+                        onChange={this.handleChangeE}
+                        value="checkedE"
+                        color="middle"
+                        disabled
+                    />
+                    <HiSwitch
+                        checked={this.state.checkedF}
+                        onChange={this.handleChangeF}
+                        value="checkedF"
+                        color="neutral"
+                        disabled
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+;<HiSwitches/>
+```
+
+
+HiSwitchState example:
+
+```js
+import React from 'react';
+import HiSwitchState from './HiSwitchState';
+
+class HiSwitchStates extends React.Component {
+    
+    constructor() {
+        super();
+        this.state = {
+            checkedA: 'year-1',
+            checkedB: 'on',
+            checkedC: 'on',
+            checkedD: 'on',
+            checkedE: 'on',
+            checkedF: 'on'
+        }
+        this.handleChangeA = this.handleChangeA.bind(this);
+        this.handleChangeB = this.handleChangeB.bind(this);
+        this.handleChangeC = this.handleChangeC.bind(this);
+        this.handleChangeD = this.handleChangeD.bind(this);
+        this.handleChangeE = this.handleChangeE.bind(this);
+        this.handleChangeF = this.handleChangeF.bind(this);
+    }
+    
+
+    handleChangeA(event, value) {
+        this.setState({ checkedA: value });
+    };
+
+    handleChangeB(event, value) {
+        this.setState({ checkedB: value });
+    };
+
+    handleChangeC(event, value) {
+        this.setState({ checkedC: value });
+    };
+
+    handleChangeD(event, value) {
+        this.setState({ checkedD: value });
+    };
+
+    handleChangeE(event, value) {
+        this.setState({ checkedE: value });
+    };
+
+    handleChangeF(event, value) {
+        this.setState({ checkedF: value });
+    };
+
+    render() {
+        return (
+            <div style={{ width: '100%', textAlign: 'center' }}>
+                <div>
+                    <HiSwitchState
+                        leftLabel="Period -1"
+                        rightLabel="Year -1"
+                        leftValue="period-1"
+                        rightValue="year-1"
+                        checked={this.state.checkedA}
+                        onChange={this.handleChangeA}
+                        color="primary"
+                    />
+                    <HiSwitchState
+                        checked={this.state.checkedB}
+                        onChange={this.handleChangeB}
+                        color="secondary"
+                    />
+                </div>
+                <div>
+                    <HiSwitchState
+                        checked={this.state.checkedC}
+                        onChange={this.handleChangeC}
+                        color="positive"
+                    />
+                    <HiSwitchState
+                        checked={this.state.checkedD}
+                        onChange={this.handleChangeD}
+                        color="negative"
+                    />
+                </div>
+                <div>
+                    <HiSwitchState
+                        checked={this.state.checkedE}
+                        onChange={this.handleChangeE}
+                        color="middle"
+                    />
+                    <HiSwitchState
+                        checked={this.state.checkedF}
+                        onChange={this.handleChangeF}
+                        color="neutral"
+                    />
+                </div>
+                <div>
+                    <HiSwitchState
+                        leftLabel="In Past"
+                        rightLabel="Current"
+                        leftValue="past"
+                        checked="past"
+                        rightValue="current"
+                        disabled
+                    />
+                    <HiSwitchState disabled />
+                </div>
+            </div>
+        );
+    }
+}
+;<HiSwitchStates/>
+```

package/src/HiSwitch/HiSwitch.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { assert } from 'chai';
+import Check from '@material-ui/icons/Check';
+import SwitchBase from '@material-ui/core/internal/SwitchBase';
+import { createShallow, getClasses } from '../test-utils';
+import HiSwitch from './HiSwitch';
+
+describe('<HiSwitch />', () => {
+    let shallow;
+    let classes;
+
+    before(() => {
+        shallow = createShallow({ untilSelector: 'div' });
+        classes = getClasses(<HiSwitch />);
+    });
+
+    describe('default HiSwitch export', () => {
+        let wrapper;
+
+        beforeEach(() => {
+            wrapper = shallow(<HiSwitch className="foo" />);
+        });
+
+        it('should render a div with the root and user classes', () => {
+            assert.strictEqual(wrapper.name(), 'div');
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+            assert.strictEqual(wrapper.hasClass('foo'), true);
+            assert.strictEqual(wrapper.find(SwitchBase).length, 1);
+        });
+
+        it('should render SwitchBase with a custom div icon with the icon class', () => {
+            const switchBase = wrapper.childAt(0);
+            assert.strictEqual(switchBase.name(), 'WithStyles(SwitchBase)');
+            assert.strictEqual(switchBase.props().icon.type, Check);
+            assert.strictEqual(switchBase.props().icon.props.className, classes.icon);
+        });
+
+        it('should render the bar as the 2nd child', () => {
+            const bar = wrapper.childAt(1);
+            assert.strictEqual(bar.is('div'), true);
+            assert.strictEqual(bar.hasClass(classes.bar), true);
+        });
+    });
+});

package/src/HiSwitch/HiSwitchState.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import HiButton from '../HiButton';
+import { withStyles } from '@material-ui/core/styles';
+import { capitalize } from '../utils/helpers';
+
+export const styles = theme => ({
+    root: {
+        display: 'inline-flex',
+        maxHeight: 40,
+        marginRight: 12,
+        padding: 4,
+        backgroundColor: theme.palette.background2,
+        borderRadius: '2px 2px 0 0',
+        width: '100%',
+        maxWidth: 200,
+        minWidth: 120,
+        borderBottom: `solid 1px ${theme.palette.grey[300]}`,
+    },
+    button: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        backgroundColor: theme.palette.background2,
+        color: theme.palette.text.disabled,
+        textTransform: 'inherit',
+        width: '50%',
+        fontSize: 15,
+        fontWeight: 400,
+    },
+    buttonLeft: {
+        borderBottomRightRadius: 0,
+        borderTopRightRadius: 0,
+    },
+    buttonRight: {
+        borderBottomLeftRadius: 0,
+        borderTopLeftRadius: 0,
+    },
+    checked: {
+        boxShadow: theme.shadows[2],
+    },
+    checkedPrimary: {
+        '&:not($disabled)': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+        },
+    },
+    checkedSecondary: {
+        '&:not($disabled)': {
+            backgroundColor: theme.palette.secondary.main,
+            color: theme.palette.secondary.contrastText,
+        },
+    },
+    checkedPositive: {
+        '&:not($disabled)': {
+            backgroundColor: theme.palette.positive.main,
+            color: theme.palette.positive.contrastText,
+        },
+    },
+    checkedNegative: {
+        '&:not($disabled)': {
+            backgroundColor: theme.palette.negative.main,
+            color: theme.palette.negative.contrastText,
+        },
+    },
+    checkedMiddle: {
+        '&:not($disabled)': {
+            backgroundColor: theme.palette.middle.main,
+            color: theme.palette.middle.contrastText,
+        },
+    },
+    checkedNeutral: {
+        '&:not($disabled)': {
+            backgroundColor: theme.palette.neutral.main,
+            color: theme.palette.neutral.contrastText,
+        },
+    },
+    disabled: {
+        '&$checked': {
+            backgroundColor:
+                theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+            color:
+                theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
+        },
+        boxShadow: 'none',
+    },
+});
+
+/**
+ * Ce composant affiche un switch entre 2 valeurs associées à deux labels.
+ * par défaut ON/OFF associé à true/false.
+ */
+function HiSwitchState(props) {
+    const {
+        classes,
+        className,
+        checked,
+        color,
+        leftLabel,
+        rightLabel,
+        leftValue,
+        rightValue,
+        disabled,
+        onChange,
+    } = props;
+
+    const isHiColor = [
+        'primary',
+        'secondary',
+        'positive',
+        'negative',
+        'middle',
+        'neutral',
+    ].includes(color);
+
+    const buttonLeftClass = classNames(classes.button, classes.buttonLeft, {
+        [classes.checked]: checked === leftValue,
+        [classes.checkedNeutral]: !disabled && checked === leftValue && !isHiColor,
+        [classes[`checked${capitalize(color)}`]]: !disabled && checked === leftValue && isHiColor,
+        [classes.disabled]: disabled,
+    });
+
+    const buttonRightClass = classNames(classes.button, classes.buttonRight, {
+        [classes.checked]: checked === rightValue,
+        [classes.checkedNeutral]: !disabled && checked === rightValue && !isHiColor,
+        [classes[`checked${capitalize(color)}`]]: !disabled && checked === rightValue && isHiColor,
+        [classes.disabled]: disabled,
+    });
+
+    return (
+        <div className={classNames(classes.root, className)}>
+            <HiButton
+                size="small"
+                className={buttonLeftClass}
+                value={leftValue}
+                onClick={event => onChange(event, leftValue)}
+                disabled={disabled}
+            >
+                {leftLabel}
+            </HiButton>
+            <HiButton
+                size="small"
+                className={buttonRightClass}
+                value={rightValue}
+                onClick={event => onChange(event, rightValue)}
+                disabled={disabled}
+            >
+                {rightLabel}
+            </HiButton>
+        </div>
+    );
+}
+
+HiSwitchState.propTypes = {
+    /**
+     * Value checked.
+     */
+    checked: PropTypes.string,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
+    color: PropTypes.oneOf([
+        'inherit',
+        'primary',
+        'secondary',
+        'action',
+        'error',
+        'disabled',
+        'positive',
+        'negative',
+        'middle',
+        'neutral',
+    ]),
+    /**
+     * If `true`, the switch will be disabled.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Label du premier bouton (dans l'ordre de lecture)
+     */
+    leftLabel: PropTypes.string,
+    /**
+     * value du premier bouton (dans l'ordre de lecture)
+     */
+    leftValue: PropTypes.string,
+    /**
+     * Callback fired when the state is changed.
+     *
+     * @param {string} nom du champs
+     * @param {boolean} checked The `checked` value of the switch
+     */
+    onChange: PropTypes.func,
+    /**
+     * Label du deuxieme bouton (dans l'ordre de lecture)
+     */
+    rightLabel: PropTypes.string,
+    /**
+     * value du deuxieme bouton (dans l'ordre de lecture)
+     */
+    rightValue: PropTypes.string,
+};
+
+HiSwitchState.defaultProps = {
+    checked: 'on',
+    color: 'inherit',
+    leftLabel: 'Off',
+    rightLabel: 'On',
+    leftValue: 'off',
+    rightValue: 'on',
+    disabled: false,
+};
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiSwitchState' })(HiSwitchState);

package/src/HiSwitch/HiSwitchState.test.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { createShallow, getClasses } from '../test-utils';
+import HiSwitchState from './HiSwitchState';
+
+describe('<HiSwitchState />', () => {
+    let shallow;
+    let classes;
+
+    before(() => {
+        shallow = createShallow({ untilSelector: 'div' });
+        classes = getClasses(<HiSwitchState />);
+    });
+
+    describe('default HiSwitch export', () => {
+        let wrapper;
+        let handler;
+
+        beforeEach(() => {
+            handler = spy();
+            wrapper = shallow(
+                <HiSwitchState
+                    className="foo"
+                    checked="zou"
+                    onChange={handler}
+                    leftLabel="Zinédine"
+                    leftValue="zi"
+                    rightLabel="Zidane"
+                    rightValue="zou"
+                />,
+            );
+        });
+
+        it('should render a div with the root and user classes', () => {
+            assert.strictEqual(wrapper.name(), 'div');
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+            assert.strictEqual(wrapper.hasClass('foo'), true);
+        });
+
+        it('should render 2 clickable buttons', () => {
+            let leftButton = wrapper.childAt(0).dive();
+            let rightButton = wrapper.childAt(1).dive();
+
+            assert.strictEqual(leftButton.name(), 'ForwardRef(HiButton)');
+            assert.strictEqual(leftButton.props().children, 'Zinédine');
+            assert.strictEqual(leftButton.hasClass(classes.checked), false);
+            assert.strictEqual(rightButton.name(), 'ForwardRef(HiButton)');
+            assert.strictEqual(rightButton.props().children, 'Zidane');
+            assert.strictEqual(rightButton.hasClass(classes.checked), true);
+
+            // Simulate click and update props
+            leftButton.simulate('click');
+            assert.strictEqual(handler.calledOnce, true, 'should onChange callback be called once');
+            assert.strictEqual(
+                handler.calledWith(undefined, 'zi'),
+                true,
+                'should onChange callback be called with params',
+            );
+            rightButton.simulate('click');
+            assert.strictEqual(
+                handler.calledTwice,
+                true,
+                'should onChange callback be called twice',
+            );
+            assert.strictEqual(
+                handler.calledWith(undefined, 'zou'),
+                true,
+                'should onChange callback be called with params',
+            );
+
+            wrapper.setProps({ checked: 'zi' });
+            wrapper.update();
+            leftButton = wrapper.childAt(0).dive();
+            rightButton = wrapper.childAt(1).dive();
+
+            assert.strictEqual(leftButton.hasClass(classes.checked), true);
+            assert.strictEqual(rightButton.hasClass(classes.checked), false);
+        });
+    });
+
+    it('should render disabled buttons', () => {
+        const wrapper = shallow(
+            <HiSwitchState
+                className="foo"
+                checked="zi"
+                leftLabel="Zinédine"
+                leftValue="zi"
+                rightLabel="Zidane"
+                rightValue="zou"
+                disabled
+            />,
+        );
+        const leftButton = wrapper.childAt(0).dive();
+        const rightButton = wrapper.childAt(1).dive();
+
+        assert.strictEqual(leftButton.hasClass(classes.disabled), true);
+        assert.strictEqual(rightButton.hasClass(classes.disabled), true);
+    });
+});

package/src/HiSwitch/index.js

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