@hipay/hipay-material-ui 3.11.2 → 3.12.0

package/src/HiListItemLink/HiListItemLink.js

@@ -0,0 +1,102 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import makeStyles from '@mui/styles/makeStyles';
+import ListItem from "@mui/material/ListItem";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+
+const useStyles = makeStyles(theme => ({
+    root: props => ({
+        color: props.disabled ? theme.palette.neutral.light : "initial",
+        display: "flex",
+        height: 48,
+        padding: 12,
+        "&:hover": {
+            backgroundColor: props.disabled ? "none" : "#E6F9FD",
+            cursor: props.disabled ? "cursor" : "pointer"
+        },
+        "&:not(:last-child)":{
+            borderBottom: "1px solid #E0E0E0"
+        },
+        // margin between children (unless last span for ripple effect)
+        "& > :not(span)": {
+            marginLeft: 12
+        },
+        "& > div": {
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            alignSelf: "center",
+            minWidth: "5%"
+        }
+    }),
+    primary: props => ({
+        fontSize: "14px",
+        textTransform: "uppercase",
+        flex: props.secondary ? "initial" : 1 // expand primary text unless there is secondary
+    }),
+    secondary: {
+        alignSelf: "center",
+        color: theme.palette.neutral.light,
+        fontFamily: theme.typography.fontFamily,
+        fontSize: 11,
+        flex: 1
+    },
+    info: {
+        color: theme.palette.neutral.light,
+        fontFamily: theme.typography.fontFamily,
+    }
+}));
+
+const HiListItemLink = React.forwardRef(
+    (props, ref) => {
+        const {
+            disabled,
+            info,
+            primary,
+            secondary,
+            icon,
+            ...others
+        } = props;
+
+        const classes = useStyles(props);
+
+        return (
+            <ListItem
+                ref={ref}
+                className={classes.root}
+                button
+                disableGutters
+                disabled={disabled}
+                {...others}
+            >
+                    <div className={classes.primary}>{primary}</div>
+                    {secondary && <div className={classes.secondary}>{secondary}</div>}
+                    {info && <div className={classes.info}>{info}</div>}
+                    {icon}
+                    <ArrowRightIcon/>
+            </ListItem>
+        );
+    }
+);
+
+HiListItemLink.propTypes = {
+    ...ListItem.propTypes,
+    disabled: PropTypes.bool,
+    info: PropTypes.string,
+    onClick: PropTypes.func,
+    primary: PropTypes.string.isRequired,
+    secondary: PropTypes.string,
+    icon: PropTypes.node
+};
+
+HiListItemLink.defaultProps = {
+    disabled: false,
+    info: null,
+    onClick: null,
+    secondary: null,
+    icon: null
+};
+
+export default HiListItemLink;

package/src/HiListItemLink/HiListItemLink.md

@@ -0,0 +1,57 @@
+HiListItemLink example:
+
+Exemple d'utilisation du composant :
+```js
+import React from "react";
+
+import { useTheme } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import Paper from "@material-ui/core/Paper";
+
+import CancelIcon from "@material-ui/icons/Cancel";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import ErrorIcon from "@material-ui/icons/Error";
+import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
+
+import HiListItemLink from "../HiListItemLink";
+
+const theme = useTheme();
+
+const links = [
+    { primary: "1 - Primary text", secondary: "Secondary text", info: "Info text", icon: <CheckCircleIcon htmlColor={theme.palette.primary.main} /> },
+    { primary: "2 - Primary text (disabled)", secondary: "Secondary text", icon: <CancelIcon htmlColor={theme.palette.negative.main} />, disabled: true },
+    { primary: "3 - Primary text", icon: <ErrorIcon htmlColor={theme.palette.middle.main} /> },
+    { primary: "4 - Primary text", icon: <RemoveCircleIcon htmlColor={theme.palette.positive.main} /> },
+    { primary: "5 - Primary text", secondary: "Secondary text", info: "Info text", icon: <RemoveCircleIcon htmlColor={theme.palette.primary.main} /> },
+    { primary: "6 - Primary Ellipsis sample 5% min width xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", secondary: "Secondary text", info: "Info text" },
+    { primary: "7 - Secondary Ellipsis sample 5% min width", secondary: "Secondary text xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", info: "Info text"  },
+];
+
+function HiListItemLinks() {
+    
+    const handleClick = index => e => {
+        alert(`Clicked ${index} !`);
+    };
+    
+    return (
+        <Paper>
+            <List disablePadding>
+                {
+                    links.map((link, index) => (
+                        <HiListItemLink
+                            disabled={link.disabled}
+                            icon={link.icon}
+                            info={link.info}
+                            key={index}
+                            onClick={handleClick(index)}
+                            primary={link.primary}
+                            secondary={link.secondary}
+                        />
+                    ))
+                }
+            </List>
+        </Paper>
+    );
+}
+;<HiListItemLinks/>
+```

package/src/HiListItemLink/index.js

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

package/src/HiLoader/HiLoader.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PropagateLoader from 'react-spinners/PropagateLoader';
+import withStyles from '@mui/styles/withStyles';
+
+function HiLoader(props) {
+    const { className, color, size, theme, style } = props;
+
+    return (
+        <div
+            id="hi-loader"
+            className={className}
+            style={{ ...style, display: 'block', width: 1, height: 12 }}
+        >
+            <PropagateLoader size={size} color={theme.palette[color].main} />
+        </div>
+    );
+}
+
+HiLoader.propTypes = {
+    /**
+     * Surcharge les classes du composant
+     */
+    className: PropTypes.string,
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
+    color: PropTypes.oneOf(['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+    /**
+     * Size of component
+     */
+    size: PropTypes.number,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object.isRequired,
+};
+
+HiLoader.defaultProps = {
+    size: 12,
+    color: 'primary',
+};
+
+export default withStyles({}, { hiComponent: true, withTheme: true, name: 'HmuiHiLoader' })(
+    HiLoader,
+);

package/src/HiLoader/HiLoader.md

@@ -0,0 +1,21 @@
+HiLoader example:
+
+```js
+import React from 'react';
+import HiLoader from './HiLoader';
+
+function HiLoaders(props) {
+    return (
+        <div style={{marginLeft: 70}}>
+            <HiLoader style={{margin: 16}} />
+            <HiLoader style={{margin: 16}} color="secondary" />
+            <HiLoader style={{margin: 16}} color="positive" />
+            <HiLoader style={{margin: 16}} color="negative" />
+            <HiLoader style={{margin: 16}} color="middle" />
+            <HiLoader style={{margin: 16}} color="neutral" />
+            <HiLoader style={{margin: 16}} size={16} />
+        </div>
+    );
+}
+;<HiLoaders/>
+```

package/src/HiLoader/HiLoader.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import HiLoader from './HiLoader';
+
+describe('<HiLoader />', () => {
+    let shallow;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+    });
+
+    it('renders a functional hour & minute ListPicker', () => {
+        const wrapper = shallow(<HiLoader loading />);
+
+        assert.strictEqual(wrapper.name(), 'div', 'should render a div');
+    });
+});

package/src/HiLoader/index.js

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

package/src/HiNotice/HiKPI.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '@mui/styles/withStyles';
+import ButtonBase from '@mui/material/ButtonBase';
+import Collapse from '@mui/material/Collapse';
+
+export const styles = theme => ({
+    root: {
+        background: theme.palette.background3,
+        height: 104,
+        width: 136,
+        padding: '0px 8px',
+        margin: 8,
+        display: 'flex',
+        textAlign: 'center',
+        flexDirection: 'column',
+        alignItems: 'center',
+        fontFamily: theme.typography.fontFamily,
+        transition: 'height .5s ease-out',
+    },
+    rootDisable: {
+        cursor: 'default',
+    },
+    error: {
+        boxShadow: '0px 2px 4px 0px rgba(213, 0, 0, 0.24)',
+        '&:hover, &:focus': {
+            boxShadow: '0px 3px 5px 0px rgba(213, 0, 0, 0.32)',
+        },
+    },
+    warning: {
+        boxShadow: '0px 2px 4px 0px rgba(249, 148, 8, 0.32)',
+        '&:hover, &:focus': {
+            boxShadow: '0px 3px 5px 0px rgba(249, 148, 8, 0.40)',
+        },
+    },
+    inherit: {
+        boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.16)',
+        '&:hover, &:focus': {
+            boxShadow: '0px 3px 5px 0px rgba(0, 0, 0, 0.24)',
+        },
+    },
+    positive: {
+        boxShadow: '0px 1px 3px 0px rgba(0, 175, 1, 0.36)',
+        '&:hover, &:focus': {
+            boxShadow: '0px 3px 5px 0px rgba(0, 175, 1, 0.44)',
+        },
+    },
+    active: {
+        background: theme.palette.background2,
+        boxShadow: 'none',
+    },
+    body: {
+        margin: 0,
+        display: 'inline-grid',
+        alignItems: 'center',
+        fontSize: 20,
+        fontWeight: theme.typography.fontWeightLight,
+        flex: '1 1 auto',
+    },
+    title: {
+        maxHeight: 16,
+        maxWidth: '100%',
+        margin: '7px 0px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        fontSize: 14,
+        fontWeight: theme.typography.fontWeightLight,
+        flex: '0 1 16px',
+    },
+    subtitle: {
+        maxHeight: 28,
+        margin: '2px 0px',
+        maxWidth: '100%',
+        color: theme.palette.neutral.main,
+        fontSize: 11,
+        lineHeight: '13px',
+        fontWeight: theme.typography.fontWeightMedium,
+        flex: '0 1 28px',
+    },
+    minify: {
+        height: 72,
+    },
+});
+
+class HiKPI extends React.Component {
+    static propTypes = {
+        /**
+         * Extension du style appliqué au composant
+         */
+        active: PropTypes.bool,
+        /**
+         * Corps du KPI
+         */
+        body: PropTypes.any.isRequired,
+        /**
+         * Version minifiée du composant
+         */
+        bodyMinify: PropTypes.any,
+        /**
+         * Id of the button
+         */
+        buttonId: PropTypes.string,
+        /**
+         * Fonction appelée au clic sur le KPI
+         */
+        classes: PropTypes.object,
+        /**
+         * KPI est-il actif ?
+         */
+        color: PropTypes.oneOf(['inherit', 'warning', 'error', 'positive']),
+        /**
+         * Titre du KPI
+         */
+        disable: PropTypes.bool,
+        /**
+         * KPI id
+         */
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        /**
+         * Corps minifié du KPI si nécessaire
+         */
+        minify: PropTypes.bool,
+        /**
+         * Sous-titre du KPI
+         */
+        onClick: PropTypes.func,
+        /**
+         * Type du KPI (ancré ou normal : ancré permet action de clic)
+         */
+        subtitle: PropTypes.any,
+        /**
+         * Couleur de l'ombre du KPI
+         */
+        title: PropTypes.string,
+        /**
+         * Contenu du tooltip (facultatif)
+         */
+        tooltip: PropTypes.any,
+    };
+
+    static defaultProps = {
+        active: false,
+        minify: false,
+        color: 'inherit',
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick = id => () => {
+        this.props.onClick(id);
+    };
+
+    render() {
+        const { classes, minify, bodyMinify, active, title, body, subtitle, color, id, tooltip, disable, buttonId } = this.props;
+
+        const rootclass = classNames(classes.root, {
+            [classes.inherit]: color === 'inherit',
+            [classes.warning]: (color === 'warning' && !disable),
+            [classes.error]: (color === 'error' && !disable),
+            [classes.positive]: (color === 'positive' && !disable),
+            [classes.active]: active,
+            [classes.minify]: minify,
+            [classes.rootDisable]: disable,
+        });
+
+        return (
+                <ButtonBase
+                    id={buttonId}
+                    className={rootclass}
+                    onClick={!disable ? this.handleClick(id) : undefined}
+                    title={tooltip}
+                    disableRipple={disable}
+                    disabled={disable}
+                >
+                    {title &&
+                    <h3 className={classes.title}>
+                        {title}
+                    </h3>
+                    }
+                    <div className={classes.body}>
+                        {minify && bodyMinify ? bodyMinify : body}
+                    </div>
+                    <Collapse in={!minify} timeout={'auto'}>
+                        <div className={classes.subtitle}>
+                            {subtitle}
+                        </div>
+                    </Collapse>
+                </ButtonBase>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiKPI' })(HiKPI);

package/src/HiNotice/HiKPI.test.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiKPI from './HiKPI';
+import { spy } from 'sinon';
+
+describe('<HiKPI />', () => {
+    let shallow;
+    let classes;
+    let mount;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+        classes = getClasses(<HiKPI id={1} type={'normal'} body={'Test'} />);
+        mount = createMount();
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    describe('Should have root classes => all kpi', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI id={1} type={'normal'} body={'Test'} color={'inherit'} />,
+            );
+        });
+
+        it('should render a div with classes root', () => {
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+    });
+
+    describe('Should have root and inherit classes => inherit color', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI id={1} type={'normal'} body={'Test'} color={'inherit'} />,
+            );
+        });
+
+        it('should render a div with classes inherit and root', () => {
+            assert.strictEqual(wrapper.hasClass(classes.inherit), true);
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+    });
+
+    describe('Should have root and warning classes => warning color', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI id={1} type={'normal'} body={'Test'} color={'warning'} />,
+            );
+        });
+
+        it('should render a div with classes warning and root', () => {
+            assert.strictEqual(wrapper.hasClass(classes.warning), true);
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+    });
+
+    describe('Should have root and error classes => error color', () => {
+        let wrapper;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI id={1} type={'normal'} body={'Test'} color={'error'} />,
+            );
+        });
+
+        it('should render a div with classes error and root', () => {
+            assert.strictEqual(wrapper.hasClass(classes.error), true);
+            assert.strictEqual(wrapper.hasClass(classes.root), true);
+        });
+    });
+
+    describe('Should have on click callback', () => {
+        let wrapper;
+        const handler = spy();
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={'Test'}
+                    color={'inherit'}
+                    onClick={handler}
+                />,
+            );
+        });
+
+        it('should render a div with classes active and minify', () => {
+            wrapper.simulate('click');
+            assert.strictEqual(handler.calledOnce, true, 'should onclick be called once');
+        });
+    });
+
+    describe('Hidden subtitle on click on KPI', () => {
+        let wrapper;
+        const handler = spy();
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={'Test'}
+                    subtitle={'Test subtitle'}
+                    color={'inherit'}
+                    onClick={handler}
+                />,
+            );
+        });
+
+        it('Should render KPI with subtitle, on click subtitle is hidden', () => {
+            assert.strictEqual(wrapper.find({ className: classes.subtitle }).exists(), true, 'should have subtitle');
+            wrapper.simulate('click');
+        });
+    });
+
+    describe('Show title or not', () => {
+        let wrapper;
+        let wrapper2;
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={'Test'}
+                    color={'inherit'}
+                />,
+            );
+
+            wrapper2 = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={'Test'}
+                    color={'inherit'}
+                    title={'Test title'}
+                />,
+            );
+        });
+
+        it('Should not have title', () => {
+            assert.strictEqual(wrapper.find({ className: classes.title }).exists(), false, 'should not have title');
+        });
+
+        it('Should render KPI with title', () => {
+            assert.strictEqual(wrapper2.find({ className: classes.title }).exists(), true, 'should have title');
+        });
+    });
+
+    describe('Should show minify body when KPI is minify', () => {
+        let wrapper;
+        const handler = spy();
+
+        const body = 'Test body';
+        const bodyMinify = 'Test';
+
+        before(() => {
+            wrapper = shallow(
+                <HiKPI
+                    id={1}
+                    type={'normal'}
+                    body={body}
+                    bodyMinify={bodyMinify}
+                    color={'inherit'}
+                    onClick={handler}
+                />,
+            );
+        });
+
+
+        it('Should show minify body when KPI is minify', () => {
+            assert.strictEqual(wrapper.find({ className: classes.body }).text(), body, 'should have body not minify');
+            wrapper.simulate('click');
+        });
+    });
+});