@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/src/HiButton/HiButton.js

@@ -1,210 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
-import { fade, darken } from '@material-ui/core/styles/colorManipulator';
-
-export const useStyles = makeStyles(theme => ({
-    root: {}, // a style rule
-    label: {}, // a nested style rule
-    text: props => {
-        if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
-            return {
-                color: props.disabled ? theme.palette.action.disabled : theme.palette[props.color].main,
-                '&:hover': {
-                    backgroundColor: fade(theme.palette[props.color].main, theme.palette.action.hoverOpacity),
-                    // Reset on touch devices, it doesn't add specificity
-                    '@media (hover: none)': {
-                        backgroundColor: 'transparent',
-                    },
-                }
-            };
-        } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
-            return {
-                color: props.disabled ? theme.palette.action.disabled : props.color,
-                "&:hover": {
-                    backgroundColor: fade(props.color, theme.palette.action.hoverOpacity),
-                    "@media (hover: none)": {
-                        backgroundColor: "transparent",
-                    },
-                },
-            };
-        }
-        return null;
-    },
-    contained: props => {
-        if (
-            props.variant === "contained"
-            && ['neutral', 'positive', 'middle', 'negative'].includes(props.color)
-        ) {
-            return {
-                color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].contrastText,
-                backgroundColor: props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main,
-                '&:hover': {
-                    backgroundColor: theme.palette[props.color].dark,
-                    // Reset on touch devices, it doesn't add specificity
-                    '@media (hover: none)': {
-                        backgroundColor: theme.palette[props.color].main,
-                    },
-                },
-            };
-        } else if (
-            props.variant === "contained"
-            && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)
-        ) {
-            return {
-                color: props.disabled ? theme.palette.neutral.contrastText : theme.palette.getContrastText(props.color),
-                backgroundColor: props.disabled ? theme.palette.neutral.main : props.color,
-                "&:hover": {
-                    backgroundColor: darken(props.color, theme.palette.tonalOffset * 1.5),
-                    "@media (hover: none)": {
-                        backgroundColor: props.color
-                    },
-                },
-            };
-        } else if (
-            props.variant === "containedLight"
-            && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)
-        ) {
-            return {
-                color: props.disabled ? theme.palette.neutral.contrastText : props.color,
-                backgroundColor: fade(
-                    props.disabled ? theme.palette.neutral.main : props.color,
-                    theme.palette.action.hoverOpacity
-                ),
-                "&:hover": {
-                    backgroundColor: fade(props.color, theme.palette.action.hoverOpacity + 0.1),
-                    "@media (hover: none)": {
-                        backgroundColor: fade(
-                            props.disabled ? theme.palette.neutral.main : props.color,
-                            theme.palette.action.hoverOpacity
-                        ),
-                    },
-                },
-            };
-        } else if (
-            props.variant === "containedLight" // && is a palette color
-        ) {
-            return {
-                color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].main,
-                backgroundColor: fade(
-                    props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main,
-                    theme.palette.action.hoverOpacity
-                ),
-                '&:hover': {
-                    backgroundColor: fade(theme.palette[props.color].main, theme.palette.action.hoverOpacity + 0.1),
-                    // Reset on touch devices, it doesn't add specificity
-                    '@media (hover: none)': {
-                        backgroundColor: fade(
-                            props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main,
-                            theme.palette.action.hoverOpacity
-                        ),
-                    },
-                },
-            };
-        }
-        return null;
-    },
-    outlined: props => {
-        if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
-            return {
-                color: theme.palette[props.color].main,
-                border: `1px solid ${fade(theme.palette[props.color].main, 0.5)}`,
-                '&:hover': {
-                    border: `1px solid ${theme.palette[props.color].main}`,
-                    backgroundColor: fade(theme.palette[props.color].main, theme.palette.action.hoverOpacity),
-                },
-            }
-        } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
-            return {
-                color: props.color,
-                border: `1px solid ${fade(props.color, 0.5)}`,
-                "&:hover": {
-                    border: `1px solid ${props.color}`,
-                    backgroundColor: fade(props.color, theme.palette.action.hoverOpacity),
-                },
-            }
-        }
-        return null;
-    },
-}));
-
-/**
- * HiButton
- * Inherited from Button
- */
-function HiButton(props) {
-    const {
-        disableElevation,
-        variant,
-        color,
-        ...otherProps
-    } = props;
-
-    const classes = useStyles(props);
-
-    const style = useMemo(() => {
-        const style = {};
-
-        if(disableElevation) {
-            style.boxShadow = "none";
-        }
-
-        return style;
-    }, [disableElevation]);
-
-    const _color = useMemo(() => {
-        if (
-            ['neutral', 'positive', 'middle', 'negative'].includes(color)
-            || /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color) // isHexColor
-        ) {
-            return "inherit";
-        }
-
-        return color;
-    }, [color]);
-
-    const _variant = useMemo(() => {
-        if (variant === "containedLight") {
-            return "contained";
-        }
-        return variant;
-    }, [variant]);
-
-    return <Button
-        style={style}
-        classes={classes}
-        color={_color}
-        variant={_variant}
-        {...otherProps}
-    />;
-}
-
-HiButton.propTypes = {
-    /** Activer/désactiver la box-shadow */
-    disableElevation: PropTypes.bool,
-    /** Style du bouton (plein, entouré, ...) */
-    variant: PropTypes.oneOf(['text', 'contained', 'containedLight', 'outlined']),
-    /** Couleur du bouton */
-    color: function(props, propName, componentName) {
-        const prop = props[propName];
-
-        if (
-            !['inherit', 'primary', 'secondary', 'neutral', 'positive', 'middle', 'negative' ].includes(prop)
-            && !/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(prop)
-        ) {
-            return new Error(
-                'Invalid prop `' + propName + '` supplied to' +
-                ' `' + componentName + '`. Validation failed.'
-            );
-        }
-    },
-};
-
-HiButton.defaultProps = {
-    disableElevation: false,
-    variant: 'text',
-    color: 'neutral',
-};
-
-export default HiButton;

package/src/HiButton/HiButton.md

@@ -1,56 +0,0 @@
-HiButton example:
-
-```jsx
-import Box from '@material-ui/core/Box';
-
-<div>
-<Box display="block" m={1}>
-    <Box display="inline-block" m={1}><HiButton variant="text">Text</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="text" color="primary">Text</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="text" color="secondary">Text</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="text" color="neutral">Text</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="text" color="positive">Text</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="text" color="middle">Text</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="text" color="negative">Text</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="text" color="#0000B2">Text</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="text" disabled>Text</HiButton></Box>
-</Box>
-<Box display="block" m={1}>
-    <Box display="inline-block" m={1}><HiButton variant="contained">Contained</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="contained" color="primary">Contained</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="contained" color="secondary">Contained</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="contained" color="neutral">Contained</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="contained" color="positive">Contained</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="contained" color="middle">Contained</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="contained" color="negative">Contained</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="contained" color="#0000B2">Contained</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="contained" disabled>Contained</HiButton></Box>
-</Box>
-<Box display="block" m={1}>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight">Contained Light</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="primary">Contained Light</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="secondary">Contained Light</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="neutral">Contained Light</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="positive">Contained Light</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="middle">Contained Light</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="negative">Contained Light</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight" color="#0000B2">Contained Light</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="containedLight" disabled>Contained Light</HiButton></Box>
-</Box>
-<Box display="block" m={1}>
-    <Box display="inline-block" m={1}><HiButton variant="outlined">Outlined</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="outlined" color="primary">Outlined</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="outlined" color="secondary">Outlined</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="outlined" color="neutral">Outlined</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="outlined" color="positive">Outlined</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="outlined" color="middle">Outlined</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="outlined" color="negative">Outlined</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="outlined" color="#0000B2">Outlined</HiButton></Box>
-    <Box display="inline-block" m={1}><HiButton variant="outlined" disabled>Outlined</HiButton></Box>
-</Box>
-<Box display="block" m={1}>
-    <Box display="inline-block" m={1}><HiButton variant="contained" color="primary" disableElevation>Disable Elevation</HiButton></Box>
-</Box>
-</div>
-
-```

package/src/HiButton/index.js

@@ -1,3 +0,0 @@
-import HiButton from './HiButton';
-
-export default HiButton;

package/src/HiCell/CellAddress.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-export const styles = () => ({
-    rightEllipsisSpan: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        width: '100%',
-    },
-});
-
-/**
- * Cette cellule permet d'afficher une adresse ou le nom d'un lieu
- * - si le nom du lieu est défini, on affiche le lieu et la ville
- * - sinon on affiche la ville et le pays
- * - tous les champs définis sont affichés dans le tooltip
- */
-class CellAddress extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Ville
-         */
-        city: PropTypes.string,
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Pays
-         */
-        country: PropTypes.string,
-        /**
-         * Code ISO du pays
-         */
-        isoCountry: PropTypes.string,
-        /**
-         * Nom du lieu
-         */
-        name: PropTypes.string,
-        /**
-         * Code postal
-         */
-        postalCode: PropTypes.string,
-        /**
-         * Numéro et nom de la rue
-         */
-        streetAddress: PropTypes.string,
-        /**
-         * View (L/M/S)
-         */
-        view: PropTypes.oneOf(['l', 'm', 's']),
-    };
-
-    static defaultProps = {
-        view: 'l',
-    };
-
-    render() {
-        const {
-            classes,
-            streetAddress,
-            name,
-            city,
-            postalCode,
-            view,
-            country,
-            isoCountry,
-        } = this.props;
-
-        const labelItems = (view === 'l' ? [name, city, country] : [name, city, isoCountry]).filter(
-            item => item !== undefined,
-        );
-        const label = labelItems && labelItems.length > 0 ? labelItems.join(', ') : '';
-
-        let title = '';
-        if (name) title += `${name}\n`;
-        if (streetAddress) title += `${streetAddress}\n`;
-        if (city && postalCode) title += `${city}, ${postalCode}\n`;
-        if (city && !postalCode) title += `${city}\n`;
-        if (postalCode && !city) title += `${postalCode}\n`;
-        if (country && isoCountry) title += `${country}, ${isoCountry}`;
-        if (country && !isoCountry) title += country;
-        if (isoCountry && !country) title += isoCountry;
-
-        return (
-            <div className={classes.rightEllipsisSpan} title={title}>
-                {label}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellAddress' })(CellAddress);

package/src/HiCell/CellAddress.test.js

@@ -1,105 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import CellAddress from './CellAddress';
-
-describe('<CellAddress />', () => {
-    let shallow;
-
-    before(() => {
-        before(() => {
-            shallow = createShallow({ dive: true });
-        });
-
-        it('should render a the name and the city', () => {
-            const wrapper = shallow(
-                <CellAddress
-                    type={'address'}
-                    streetAddress={'12 rue Zimzim Zidane'}
-                    city={'Paris'}
-                    country={'France'}
-                />,
-            );
-            assert.strictEqual(
-                wrapper.find('div').text(),
-                'Paris, France',
-                'Should have correct text.',
-            );
-        });
-
-        it('should render a the city and the country', () => {
-            const wrapper = shallow(
-                <CellAddress
-                    type={'address'}
-                    streetAddress={'12 rue Zimzim Zidane'}
-                    city={'Paris'}
-                    country={'France'}
-                    isoCountry={'FR'}
-                    view={'s'}
-                />,
-            );
-            assert.strictEqual(
-                wrapper.find('div').text(),
-                'Paris, FR',
-                'Should have correct text.',
-            );
-        });
-
-        it('should render only the city', () => {
-            const wrapper = shallow(
-                <CellAddress
-                    sticky
-                    type={'address'}
-                    streetAddress={'12 rue Zimzim Zidane'}
-                    city={'Paris'}
-                    country={'France'}
-                    view={'s'}
-                />,
-            );
-            assert.strictEqual(wrapper.find('div').text(), 'Paris', 'Should have correct text.');
-        });
-
-        it('should render only the country', () => {
-            const wrapper = shallow(
-                <CellAddress
-                    type={'address'}
-                    streetAddress={'12 rue Zimzim Zidane'}
-                    country={'France'}
-                    isoCountry={'FR'}
-                />,
-            );
-            assert.strictEqual(wrapper.find('div').text(), 'France', 'Should have correct text.');
-        });
-
-        it('should render only the iso country', () => {
-            const wrapper = shallow(
-                <CellAddress
-                    type={'address'}
-                    streetAddress={'12 rue Zimzim Zidane'}
-                    country={'France'}
-                    isoCountry={'FR'}
-                    view={'s'}
-                />,
-            );
-            assert.strictEqual(wrapper.find('div').text(), 'FR', 'Should have correct text.');
-        });
-
-        it('should render name and the iso country', () => {
-            const wrapper = shallow(
-                <CellAddress
-                    type={'address'}
-                    streetAddress={'12 rue Zimzim Zidane'}
-                    country={'France'}
-                    name={'address'}
-                    isoCountry={'FR'}
-                    view={'l'}
-                />,
-            );
-            assert.strictEqual(
-                wrapper.find('div').text(),
-                'address, ',
-                'Should have correct text.',
-            );
-        });
-    });
-});

package/src/HiCell/CellDate.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment-timezone';
-import { withStyles } from '@material-ui/core/styles';
-
-export const styles = {
-    rightEllipsisSpan: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        width: '100%',
-    },
-};
-
-/**
- * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
- */
-class CellDate extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Date as string
-         */
-        date: PropTypes.string,
-        /**
-         * Affiche l'heure
-         */
-        displayTime: PropTypes.bool,
-        /**
-         * Format de la date en vue small (ex: DD/MM/YYYY)
-         * @see https://momentjs.com/docs/#/parsing/string-format/
-         */
-        formatShort: PropTypes.string,
-        /**
-         * Locale moment
-         */
-        locale: PropTypes.string,
-        /**
-         * View (L/M/S)
-         */
-        view: PropTypes.oneOf(['l', 'm', 's']),
-    };
-
-    static defaultProps = {
-        displayTime: false,
-        formatShort: 'DD/MM/YYYY',
-        locale: 'en',
-        view: 'm',
-    };
-
-    formatLong = 'dddd DD MMMM YYYY HH:mm:ss';
-
-    render() {
-        const { classes, displayTime, date, locale, view, formatShort } = this.props;
-
-        if (!date) return '';
-
-        const mdate = moment(date);
-        mdate.locale(locale);
-
-        let label;
-        if (view === 'l') {
-            label = displayTime
-                ? mdate.format(this.formatLong)
-                : mdate.format(this.formatLong.replace(' HH:mm:ss', ''));
-        } else if (view === 'm') {
-            label = displayTime
-                ? mdate.format(`${formatShort} HH:mm:ss`)
-                : mdate.format(formatShort);
-        } else {
-            label = displayTime
-                ? mdate.format(`${formatShort.replace('YYYY', 'YY')} HH:mm:ss`)
-                : mdate.format(formatShort.replace('YYYY', 'YY'));
-        }
-
-        return <div className={classes.rightEllipsisSpan}>{label}</div>;
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiCellDate' })(CellDate);