@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiDatePicker/hiLocaleUtils.test.js

@@ -0,0 +1,122 @@
+import { assert } from 'chai';
+import localeUtils from './hiLocaleUtils';
+
+describe('HiDatePicker/HiLocaleUtils.js', () => {
+    describe('formatLocale', () => {
+        it('should work', () => {
+            assert.strictEqual(localeUtils.formatLocale('fr_FR'), 'fr_FR');
+        });
+    });
+    describe('formatDay', () => {
+        it('should work', () => {
+            const d = new Date('2018-11-23');
+            assert.strictEqual(
+                localeUtils.formatDay(d),
+                'Friday, 23 November 2018',
+            );
+            assert.strictEqual(
+                localeUtils.formatDay(d, 'fr_FR'),
+                'Vendredi, 23 Novembre 2018',
+            );
+        });
+    });
+    describe('formatMonthTitle', () => {
+        it('should work', () => {
+            const d = new Date('2018-11-23');
+            assert.strictEqual(
+                localeUtils.formatMonthTitle(d),
+                'November 2018',
+            );
+            assert.strictEqual(
+                localeUtils.formatMonthTitle(d, 'fr_FR'),
+                'Novembre 2018',
+            );
+        });
+    });
+    describe('formatWeekdayShort', () => {
+        it('should work', () => {
+            assert.strictEqual(
+                localeUtils.formatWeekdayShort(0),
+                'Su',
+            );
+            assert.strictEqual(
+                localeUtils.formatWeekdayShort(0, 'fr_FR'),
+                'Di',
+            );
+        });
+    });
+    describe('formatWeekdayLong', () => {
+        it('should work', () => {
+            assert.strictEqual(
+                localeUtils.formatWeekdayLong(0),
+                'Sunday',
+            );
+            assert.strictEqual(
+                localeUtils.formatWeekdayLong(0, 'fr_FR'),
+                'Dimanche',
+            );
+        });
+    });
+    describe('getFirstDayOfWeek', () => {
+        it('should work', () => {
+            assert.strictEqual(
+                localeUtils.getFirstDayOfWeek(),
+                0,
+            );
+            assert.strictEqual(
+                localeUtils.getFirstDayOfWeek('fr_FR'),
+                1,
+            );
+        });
+    });
+    describe('getMonths', () => {
+        it('should work', () => {
+            const actualJSONUS = JSON.stringify(
+                localeUtils.getMonths(),
+            );
+            const expectedJSONUS = JSON.stringify(
+                [
+                    'January',
+                    'February',
+                    'March',
+                    'April',
+                    'May',
+                    'June',
+                    'July',
+                    'August',
+                    'September',
+                    'October',
+                    'November',
+                    'December',
+                ],
+            );
+            assert.strictEqual(
+                actualJSONUS,
+                expectedJSONUS,
+            );
+            const actualJSONFR = JSON.stringify(
+                localeUtils.getMonths('fr_FR'),
+            );
+            const expectedJSONFR = JSON.stringify(
+                [
+                    'Janvier',
+                    'Février',
+                    'Mars',
+                    'Avril',
+                    'Mai',
+                    'Juin',
+                    'Juillet',
+                    'Août',
+                    'Septembre',
+                    'Octobre',
+                    'Novembre',
+                    'Décembre',
+                ],
+            );
+            assert.strictEqual(
+                actualJSONFR,
+                expectedJSONFR,
+            );
+        });
+    });
+});

package/src/HiDatePicker/index.js

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

package/src/HiDatePicker/stylesheet.js

@@ -0,0 +1,250 @@
+import { fade } from '@material-ui/core/styles/colorManipulator';
+
+export default theme => ({
+    root: {
+        position: 'relative',
+        display: 'inline-block',
+        width: '100%',
+        maxWidth: 500,
+    },
+    rootMobile: {
+        ...theme.typography.b1,
+        backgroundColor: theme.palette.background2,
+        borderBottom: '1px solid #E0E0E0',
+        borderLeft: 'none',
+        borderRight: 'none',
+        borderTop: 'none',
+        height: 40,
+        paddingLeft: 8,
+        paddingTop: 10,
+        position: 'absolute',
+        marginTop: -40,
+        opacity: 0,
+    },
+    mobileRangeRoot: {
+        minWidth: '100%',
+    },
+    fromInput: {
+        position: 'relative',
+        display: 'inline-block',
+        width: 'calc(50% - 4px)',
+        marginRight: theme.spacing(1),
+    },
+    toInput: {
+        position: 'relative',
+        display: 'inline-block',
+        width: 'calc(50% - 4px)',
+        marginLeft: 4,
+    },
+    absolute: {
+        position: 'absolute',
+    },
+    right4: {
+        right: 4,
+    },
+    dayPickerMargin: {
+        top: -337,
+        width: 'calc(100% - 4px)',
+    },
+    rangePickerContainer: {
+        display: 'flex',
+        alignItems: 'flex-start',
+    },
+    // The container element
+    container: {
+        width: '100%',
+        display: 'inline-block',
+        fontFamily: theme.typography.fontFamily,
+    },
+    // The wrapper element, used for keyboard interaction
+    wrapper: {
+        width: '100%',
+        position: 'relative',
+        userSelect: 'none',
+        flexDirection: 'row',
+        backgroundColor: theme.palette.background3,
+    },
+    // TODO : Added to the container when there's no interaction with the calendar
+    interactionDisabled: {},
+    // The navigation bar with the arrows to switch between months
+    navBar: {},
+    // Button to switch to the previous month
+    navButtonPrev: {},
+    // Button to switch to the next month
+    navButtonNext: {},
+    // Added to the navbuttons when disabled with fromMonth/toMonth props
+    navButtonInteractionDisabled: {
+        display: 'none',
+    },
+    // Container of the months table
+    months: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        padding: '0 14px',
+    },
+    // The month's main table
+    month: {
+        display: 'table',
+        borderSpacing: 0,
+        userSelect: 'none',
+        // margin: '0 1rem',
+        // marginTop: '1rem',
+    },
+    // The caption element, containing the current month's name and year
+    caption: {
+        padding: '0 0.5rem',
+        display: 'table-caption',
+        textAlign: 'left',
+        marginBottom: '0.5rem',
+        '&div': {
+            fontSize: '1.15rem',
+            fontWeight: 500,
+        },
+    },
+    // Table header displaying the weekdays names
+    weekdays: {
+        marginTop: '1rem',
+        display: 'table-header-group',
+    },
+    // Table row displaying the weekdays names
+    weekdaysRow: {
+        display: 'table-row',
+        height: 40,
+    },
+    // Cell displaying the weekday name
+    weekday: {
+        display: 'table-cell',
+        ...theme.typography.body2,
+        color: theme.palette.neutral.main,
+        fontWeight: theme.typography.fontWeightRegular,
+        textAlign: 'center',
+        verticalAlign: 'middle',
+    },
+    // Table's body with the weeks
+    body: {
+        display: 'table-row-group',
+        padding: '12px 0',
+    },
+    week: {
+        display: 'table-row',
+    },
+    // Table's row for each week
+    weekNumber: {
+        display: 'table-cell',
+        padding: '0.5rem',
+        textAlign: 'right',
+        verticalAlign: 'middle',
+        minWidth: '1rem',
+        fontSize: '0.75em',
+        cursor: 'pointer',
+        color: '#8b9898',
+        borderRight: '1px solid #eaecec',
+    },
+    // The single day cell
+    day: {
+        display: 'table-cell',
+        padding: '4px 8px',
+        textAlign: 'center',
+        cursor: 'pointer',
+        verticalAlign: 'middle',
+        outline: 'none',
+        ...theme.typography.body2,
+        color: theme.palette.neutral.dark,
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    // The calendar footer (only with todayButton prop)
+    footer: {
+        marginTop: 12,
+        borderTop: '1px solid',
+        borderTopColor: theme.palette.divider,
+        padding: '5px',
+        width: '100%',
+    },
+    // The today button (only with todayButton prop)
+    todayButton: {
+        display: 'table',
+        minWidth: 230,
+        margin: '0 auto',
+        border: 'none',
+        backgroundImage: 'none',
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        cursor: 'pointer',
+        height: 30,
+        ...theme.typography.body2,
+        color: theme.palette.neutral.main,
+        fontWeight: theme.typography.fontWeightMedium,
+        textTransform: 'uppercase',
+        '&:hover': {
+            backgroundColor: fade(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+                backgroundColor: 'transparent',
+            },
+        },
+        borderRadius: 4,
+    },
+    /* default modifiers */
+    // Added to the day's cell for the current day
+    today: {
+        // color: theme.palette.primary.light,
+        // position: 'relative',
+        // borderRadius: '50%',
+        // color: `${theme.palette.neutral.dark} !important`,
+        // fontWeight: theme.typography.fontWeightMedium,
+        // '&:before': {
+        //     content: '""',
+        //     position: 'absolute',
+        //     top: 0,
+        //     left: 0,
+        //     display: 'inline-block',
+        //     width: '100%',
+        //     height: '100%',
+        //     borderRadius: '50%',
+        //     boxShadow: `inset 0 0 0 2px ${theme.palette.neutral.main}`,
+        // },
+    },
+    // Added to the day's cell outside the current month
+    outside: {
+        backgroundColor: '#F8F9FB',
+        color: theme.palette.neutral.main,
+        cursor: 'default',
+    },
+    // Added to the day's cell specified in the "disabledDays" prop
+    disabled: {
+        color: '#dce0e0',
+        cursor: 'default',
+    },
+    // Added to the day's cell specified in the "selectedDays" prop
+    /*
+    selected: {
+        borderRadius: '50%',
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.business.primary.contrastText,
+    },
+    */
+    selected: {
+        // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        borderRadius: '0%',
+        border: 'none',
+    },
+    currentDay: {
+        position: 'relative',
+        color: `${theme.palette.neutral.dark} !important`,
+        fontWeight: theme.typography.fontWeightMedium,
+        '&:before': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            display: 'inline-block',
+            width: '100%',
+            height: '100%',
+            borderRadius: '50%',
+            boxShadow: `inset 0 0 0 2px ${theme.palette.neutral.main}`,
+        },
+    },
+});

package/src/HiDotsStepper/HiDot.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import HiIcon from '../HiIcon';
+import HiIconButton from '../HiIconButton';
+
+export const styles = () => ({
+    dot: {
+        padding: 4,
+        '&:hover': {
+            backgroundColor: 'transparent !important',
+        },
+    },
+});
+
+class HiDot extends React.PureComponent {
+    static propTypes = {
+        active: PropTypes.bool,
+        classes: PropTypes.object,
+        onClick: PropTypes.func,
+        status: PropTypes.oneOf(['refused', 'validated', 'unreviewed']),
+    };
+
+    static defaultProps = {
+        active: false,
+        status: 'unreviewed',
+    };
+
+    render() {
+        const { active, status, classes, onClick, ...props } = this.props;
+
+        let dotColor;
+        if (!status || status === 'unreviewed') {
+            dotColor = 'default';
+        } else {
+            dotColor = status === 'refused' ? 'negative' : 'positive';
+        }
+
+        return (
+            <HiIconButton
+                className={classes.dot}
+                color={dotColor}
+                onClick={onClick}
+                {...props} // tabIndex...
+            >
+                {active ? (
+                    <HiIcon size={24}>radio_button_checked</HiIcon>
+                ) : (
+                    <HiIcon size={12}>lens</HiIcon>
+                )}
+            </HiIconButton>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiDot' })(HiDot);

package/src/HiDotsStepper/HiDot.test.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import HiDot from './HiDot';
+import HiIcon from '../HiIcon';
+
+describe('<HiDot />', () => {
+    let shallow;
+
+    before(() => {
+        shallow = createShallow();
+    });
+
+    describe('<HiDot />', () => {
+        it('should have its props correctly received', () => {
+            const wrapper = shallow(<HiDot active />);
+            assert.strictEqual(wrapper.prop('active'), true);
+        });
+        it('should have good color applied : validated status', () => {
+            const wrapper = shallow(<HiDot status="validated" />);
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .dive()
+                    .props()
+                    .color,
+                'positive',
+            );
+        });
+        it('should have good color applied : refused status', () => {
+            const wrapper = shallow(<HiDot status="refused" />);
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .dive()
+                    .props()
+                    .color,
+                'negative',
+            );
+        });
+        it('should have good color applied : no status', () => {
+            const wrapper = shallow(<HiDot />);
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .dive()
+                    .props()
+                    .color,
+                'default',
+            );
+        });
+        it('should have good size applied : active dot', () => {
+            const wrapper = shallow(<HiDot active />);
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .find(HiIcon)
+                    .props()
+                    .size,
+                24,
+            );
+        });
+        it('should have good size applied : default dot', () => {
+            const wrapper = shallow(<HiDot />);
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .find(HiIcon)
+                    .props()
+                    .size,
+                12,
+            );
+        });
+        it('should have good icon applied : active dot', () => {
+            const wrapper = shallow(<HiDot active />);
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .find(HiIcon)
+                    .props()
+                    .children,
+                'radio_button_checked',
+            );
+        });
+        it('should have good icon applied : default dot', () => {
+            const wrapper = shallow(<HiDot />);
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .find(HiIcon)
+                    .props()
+                    .children,
+                'lens',
+            );
+        });
+    });
+});

package/src/HiDotsStepper/HiDotsStepper.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import HiDot from './HiDot';
+
+export const styles = () => ({
+    dotStepper: {
+        width: '100%',
+        maxWidth: 200,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+
+class HiDotsStepper extends React.PureComponent {
+    static propTypes = {
+        activeStep: PropTypes.number.isRequired,
+        classes: PropTypes.object,
+        onChange: PropTypes.func,
+        steps: PropTypes.array.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+        this.handleClick = this.handleClick.bind(this);
+        this.handleNavigation = this.handleNavigation.bind(this);
+    }
+
+    handleClick = activeStep => () => {
+        this.props.onChange(activeStep);
+    };
+
+    handleNavigation = e => {
+        const { activeStep, steps } = this.props;
+
+        let nextStep = activeStep;
+
+        if (e.key === 'ArrowLeft') nextStep -= 1;
+        if (e.key === 'ArrowRight') nextStep += 1;
+
+        nextStep = (nextStep + steps.length) % steps.length;
+
+        // Permet la navigation d'un Dot au suivant / précédent
+        document.querySelector(`button[tabIndex="${nextStep}"]`).focus();
+
+        this.props.onChange(nextStep);
+    };
+
+    render() {
+        const { classes, activeStep, steps } = this.props;
+
+        return (
+            <div role="presentation" className={classes.dotStepper} onKeyDown={this.handleNavigation}>
+                {steps.map((step, idx) => (
+                    <HiDot
+                        key={step.id}
+                        tabIndex={step.id}
+                        status={step.status}
+                        active={idx === activeStep}
+                        onClick={this.handleClick(idx)}
+                    />
+                ))}
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiDotsStepper' })(HiDotsStepper);

package/src/HiDotsStepper/HiDotsStepper.md

@@ -0,0 +1,43 @@
+HiDotsStepper example :
+
+```js
+import React from 'react';
+import HiDotsStepper from './HiDotsStepper';
+
+class HiDotsSteppers extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            activeStep: 0,
+            steps: [
+                {
+                    id: 0,
+                    status: 'validated',
+                },
+                {
+                    id: 1,
+                    status: 'validated',
+                },
+                {
+                    id: 2,
+                },
+                {
+                    id: 3,
+                    status: 'refused',
+                },
+            ],
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(step) {
+        this.setState({ activeStep: step });
+    };
+
+    render() {
+        const { steps, activeStep } = this.state;
+        return <HiDotsStepper steps={steps} activeStep={activeStep} onChange={this.handleChange} />;
+    }
+}
+;<HiDotsSteppers/>
+```