@hipay/hipay-material-ui 3.11.2 → 3.12.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 { alpha } from '@mui/material/styles';
+
+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: alpha(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: alpha(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/HiDialog/HiDialog.js

@@ -0,0 +1,67 @@
+import React, { useCallback } from "react";
+import PropTypes from "prop-types";
+import makeStyles from '@mui/styles/makeStyles';
+import Dialog from "@mui/material/Dialog";
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        backgroundColor: theme.palette.background3,
+        minWidth: 400,
+        borderRadius: 2,
+        padding: "50px",
+    },
+    header: {
+        textAlign: "center",
+        marginBottom: 25,
+    },
+    closeDiv: {
+        marginTop: theme.spacing(-2),
+        marginRight: theme.spacing(-6),
+    },
+    title: {
+        ...theme.typography.h1,
+        margin: 0,
+    },
+}));
+
+const HiDialog = (props) => {
+
+    const { content, id, onClose, open, title } = props;
+
+    const classes = useStyles(props);
+
+    const handleClose = useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+
+    return (
+        <Dialog
+            classes={{ paper: classes.paper }}
+            onClose={handleClose}
+            id={id}
+            open={open}>
+            <div className={classes.header}>
+                {typeof title === "string" ? (
+                    <p className={classes.title}>{title}</p>
+                ) :
+                    title
+                }
+            </div>
+            <div>
+                {content}
+            </div>
+        </Dialog>
+    );
+};
+
+HiDialog.propTypes = {
+    content: PropTypes.any,
+    id: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    open: PropTypes.bool.isRequired,
+    title: PropTypes.any.isRequired,
+};
+
+export default HiDialog;

package/src/HiDialog/HiDialog.md

@@ -0,0 +1,57 @@
+HiDialog example:
+
+```js
+import React from "react";
+import HiButton from '../HiButton';
+import HiDialog from '../HiDialog';
+import HiTextField from '../HiForm/HiTextField';
+
+class HiDialogDemo extends React.Component {
+    constructor(props) {
+        super(props);
+        
+        this.state = {
+            open: false,
+            inputValue: "",
+        };
+        
+        this.handleOpenDialog = this.handleOpenDialog.bind(this);
+        this.handleCloseDialog = this.handleCloseDialog.bind(this);
+        this.handleChangeInput = this.handleChangeInput.bind(this);
+    }
+    
+    handleOpenDialog() {
+        this.setState({ open: true });
+    }
+    
+    handleCloseDialog() {
+        this.setState({ open: false });
+    }
+    
+    handleChangeInput(event) {
+        this.setState({ inputValue: event.target.value });
+    }
+    
+    render() {
+        const { open, inputValue } = this.state;
+        
+        return (
+            <div>
+                <HiButton color="primary" onClick={this.handleOpenDialog}>Open Dialog</HiButton>
+                <HiDialog
+                    open={open}
+                    title="HiDialog title"
+                    onClose={this.handleCloseDialog}
+                    content={(
+                        <div>
+                            <HiTextField value={inputValue} onChange={this.handleChangeInput} label="Label" />
+                            <HiButton color="primary" onClick={this.handleCloseDialog}>Valider</HiButton>
+                        </div>
+                    )}
+                />
+            </div>
+        );
+    }
+}
+;<HiDialogDemo />
+```

package/src/HiDialog/index.js

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

package/src/HiDotsStepper/HiDot.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '@mui/styles/withStyles';
+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',
+            );
+        });
+    });
+});