@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/HiForm/index.js

@@ -0,0 +1,11 @@
+export { default as HiAddressField } from './HiAddressField';
+export { default as HiEmailField } from './HiEmailField';
+export { default as HiFormControl } from './HiFormControl';
+export { default as HiFormLabel } from './HiFormLabel';
+export { default as HiInput } from './HiInput';
+export { default as HiPasswordField } from './HiPasswordField';
+export { default as HiSearchField } from './HiSearchField';
+export { default as HiSlider } from './HiSlider';
+export { default as HiTextField } from './HiTextField';
+export { default as HiUpload } from './HiUpload';
+export { default as HiUploadField } from './HiUploadField';

package/src/HiIcon/HiIcon.js

@@ -0,0 +1,144 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Icon from '@material-ui/core/Icon';
+import { makeStyles } from '@material-ui/core/styles';
+
+import { camelize, capitalize } from '../utils/helpers';
+import * as hiSvgIcons from '../hi-svg-icons';
+
+export const useStyles = makeStyles(theme => ({
+    /* Styles applied to the root element. */
+    root: {
+        color: props => {
+            if (theme.palette[props.color]) {
+                return theme.palette[props.color].main;
+            }
+            return theme.palette.primary.main;
+        }
+    },
+    faIcon: {
+        fontSize: 20,
+    },
+}));
+
+const HiIcon = React.forwardRef((props, ref) => {
+    const { children, className, icon, size, color, ...other } = props;
+
+    const classes = useStyles(props);
+
+    const iconName = icon !== null ? icon : children;
+
+    const iconType = useMemo(() => {
+        if(iconName && iconName.indexOf('fa-') === 0) {
+            return "line_awesome";
+        } else if(iconName && iconName.indexOf('hi_') === 0) {
+            return "hipay";
+        } else {
+            return "mui";
+        }
+    }, [iconName]);
+
+    switch(iconType) {
+        case "line_awesome":
+            return (
+                <i
+                    ref={ref}
+                    className={classNames(
+                        'fa',
+                        iconName,
+                        className,
+                        {
+                            [classes.root]: color !== "inherit",
+                        }
+                    )}
+                    style={{ fontSize: size }}
+                    {...other}
+                />
+            );
+        case "hipay":
+            const HipayIconName = hiSvgIcons[capitalize(camelize(iconName))];
+            return (
+                <HipayIconName
+                    ref={ref}
+                    className={classNames(
+                        className,
+                        {
+                            [classes.root]: color !== "inherit",
+                        }
+                    )}
+                    color={"currentColor"}
+                    size={size}
+                    {...other}
+                />
+            );
+        case "mui":
+        default:
+            // console.log({ ...props });
+            return (
+                <Icon
+                    ref={ref}
+                    className={classNames(
+                        className,
+                        {
+                            [classes.root]: color !== "inherit",
+                        }
+                    )}
+                    color={"inherit"}
+                    style={{ fontSize: size }}
+                    {...other}
+                >
+                    {iconName}
+                </Icon>
+            );
+    }
+
+});
+
+HiIcon.propTypes = {
+    /**
+     * The name of the icon font ligature.
+     */
+    children: PropTypes.node,
+    /**
+     * Override or extend the styles applied to the component.
+     * See [CSS API](#css-api) below for more details.
+     */
+    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',
+    ]),
+    /**
+     * Deprecated use (same as children)
+     * The name of the icon font ligature.
+     */
+    icon: PropTypes.string,
+    /**
+     * Size of the icon, define width & height
+     */
+    size: PropTypes.number,
+};
+
+HiIcon.defaultProps = {
+    color: 'inherit',
+    icon: null,
+    size: 20,
+};
+
+export default HiIcon;

package/src/HiIcon/HiIcon.md

@@ -0,0 +1,73 @@
+HiIcon example:
+
+```js
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Typography from "@material-ui/core/Typography";
+
+
+const useStyles = makeStyles({
+    root: {
+        color: "pink",
+    },
+    box: {
+        "&>span": {
+            margin: 2
+        },
+    },
+});
+
+const classes = useStyles();
+
+<div className={classes.root}>
+    <Box className={classes.box} display="block" m={1}>
+        <Typography variant="h3" gutterBottom color="textPrimary">MUI Icons</Typography>
+        <HiIcon >add_circle</HiIcon>
+        <HiIcon color="inherit">add_circle</HiIcon>
+        <HiIcon color="primary">add_circle</HiIcon>
+        <HiIcon color="secondary">add_circle</HiIcon>
+        <HiIcon color="positive">add_circle</HiIcon>
+        <HiIcon color="negative">add_circle</HiIcon>
+        <HiIcon color="middle" size={32}>add_circle</HiIcon>
+        <HiIcon color="neutral" size={40}>add_circle</HiIcon>
+    </Box>
+    <Box className={classes.box} display="block" m={1}>
+        <Typography variant="h3" gutterBottom color="textPrimary">Hipay icons</Typography>
+        <HiIcon>hi_account</HiIcon>
+        <HiIcon>hi_activity</HiIcon>
+        <HiIcon color="inherit">hi_permission</HiIcon>
+        <HiIcon color="primary">hi_all</HiIcon>
+        <HiIcon color="secondary">hi_billing</HiIcon>
+        <HiIcon color="negative">hi_catalog</HiIcon>
+        <HiIcon color="middle">hi_customer</HiIcon>
+        <HiIcon color="neutral">hi_finance</HiIcon>
+        <HiIcon color="positive">hi_route</HiIcon>
+        <HiIcon color="secondary">hi_settlement</HiIcon>
+        <HiIcon color="negative">hi_transaction</HiIcon>
+        <HiIcon color="middle" size={32}>hi_user</HiIcon>
+        <HiIcon color="neutral" size={40}>hi_widget</HiIcon>
+        <HiIcon
+            color="primary"
+            icon={'hi_transaction'}
+            size={40}
+            style={{cursor: 'pointer'}}
+        />
+        <HiIcon color="neutral">hi_briefcase_rescue</HiIcon>
+        <HiIcon color="neutral">hi_download</HiIcon>
+        <HiIcon color="neutral">hi_size_large</HiIcon>
+        <HiIcon color="neutral">hi_size_medium</HiIcon>
+        <HiIcon color="neutral">hi_size_small</HiIcon>
+    </Box>
+    <Box className={classes.box} display="block" m={1}>
+        <Typography variant="h3" gutterBottom color="textPrimary">Font Awesome</Typography>
+        <HiIcon>fa-tag</HiIcon>
+        <HiIcon color="inherit">fa-tag</HiIcon>
+        <HiIcon color="primary">fa-tag</HiIcon>
+        <HiIcon color="secondary">fa-tag</HiIcon>
+        <HiIcon color="positive">fa-tag</HiIcon>
+        <HiIcon color="negative">fa-tag</HiIcon>
+        <HiIcon color="middle" size={32}>fa-tag</HiIcon>
+        <HiIcon color="neutral" size={40}>fa-tag</HiIcon>
+    </Box>
+</div>
+```

package/src/HiIcon/index.js

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

package/src/HiIconButton/HiIconButton.js

@@ -0,0 +1,79 @@
+// @inheritedComponent IconButton
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { makeStyles } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import IconButton from '@material-ui/core/IconButton';
+
+export const useStyles = makeStyles(theme => ({
+    label: {},
+    rootCustomColor: (props) => {
+        let color;
+
+        if (theme.palette[props.color]) {
+            color = theme.palette[props.color].main;
+        } else if (props.color.charAt(0) === "#") {
+            color = props.color;
+        }
+
+        if (!color) return {};
+
+        return {
+            color,
+            '&:hover': {
+                backgroundColor: fade(color, theme.palette.action.hoverOpacity),
+                // Reset on touch devices, it doesn't add specificity
+                '@media (hover: none)': {
+                    backgroundColor: 'transparent',
+                },
+            },
+        }
+    },
+}));
+
+function HiIconButton(props) {
+    const { children, className, color, ...other } = props;
+
+    const classes = useStyles(props);
+
+    const isHexColor = color.charAt(0) === "#";
+    const isExtendedColor = ['positive', 'negative', 'middle', 'neutral'].includes(color)
+    const isCustomColor = isHexColor || isExtendedColor;
+
+    const rootClassNames = classNames({
+        [classes.rootCustomColor]: isCustomColor,
+    });
+
+    return (
+        <IconButton
+            className={className}
+            classes={{ root: rootClassNames, label: classes.label }}
+            color={isCustomColor ? 'inherit' : color}
+            {...other}
+        >
+            {children}
+        </IconButton>
+    );
+}
+HiIconButton.propTypes = {
+    /**
+     * Surcharge des classes
+     */
+    classes: PropTypes.object,
+    /**
+     * Surcharge des classes
+     */
+    className: PropTypes.string,
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
+    color: PropTypes.string,
+};
+
+HiIconButton.defaultProps = {
+    color: 'default',
+};
+
+export default HiIconButton;

package/src/HiIconButton/HiIconButton.md

@@ -0,0 +1,65 @@
+HiIconButton example:
+
+```js
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Typography from "@material-ui/core/Typography";
+import HiIcon from '../HiIcon/HiIcon';
+
+const useStyles = makeStyles({
+    box: {
+        "&>span": {
+            margin: 2
+        },
+    },
+});
+
+const classes = useStyles();
+const onClick = () => alert("click");
+
+<div>
+    <Box className={classes.box} display="block" m={1}>
+        <Typography variant="h3" gutterBottom color="textPrimary">Basic</Typography>
+        <HiIconButton title="Button title" onClick={onClick}>
+            <HiIcon>add_circle</HiIcon>
+        </HiIconButton>
+    </Box>
+    <Box className={classes.box} display="block" m={1}>
+        <Typography variant="h3" gutterBottom color="textPrimary">Colors</Typography>
+        <HiIconButton
+            color="primary"
+            title="Primary (Theme)"
+            onClick={onClick}
+        >
+            <HiIcon>add_circle</HiIcon>
+        </HiIconButton>
+        <HiIconButton
+            color="positive"
+            title="Positive (Custom theme)"
+            onClick={onClick}
+        >
+            <HiIcon>add_circle</HiIcon>
+        </HiIconButton>
+        <HiIconButton
+            color="#ff00ff"
+            title="Pink (HEX)"
+            onClick={onClick}
+        >
+            <HiIcon>add_circle</HiIcon>
+        </HiIconButton>
+        <HiIconButton
+            color="positive"
+            title="Different colors"
+            onClick={onClick}
+        >
+            <HiIcon color="secondary">add_circle</HiIcon>
+        </HiIconButton>
+    </Box>
+    <Box className={classes.box} display="block" m={1}>
+        <Typography variant="h3" gutterBottom color="textPrimary">Disabled</Typography>
+        <HiIconButton disabled>
+            <HiIcon >add_circle</HiIcon>
+        </HiIconButton>
+    </Box>
+</div>
+```

package/src/HiIconButton/HiIconButton.test.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, createRender, getClasses } from '../test-utils';
+import HiIconButton from './HiIconButton';
+import IconButton from '@material-ui/core/IconButton';
+import classNames from 'classnames';
+
+describe('<HiIconButton />', () => {
+    let shallow;
+    let render;
+    let classes;
+    const buttonClasses = getClasses(<IconButton>Hello World</IconButton>);
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+        render = createRender();
+        classes = getClasses(<HiIconButton>Hello World</HiIconButton>);
+    });
+
+    it('should render a <IconButton> element', () => {
+        const wrapper = shallow(<HiIconButton>Hello World</HiIconButton>);
+        assert.strictEqual(wrapper.find(IconButton).length, 1);
+    });
+
+    it('should render forward primary color prop to <IconButton> component', () => {
+        const wrapper = shallow(<HiIconButton color="primary">Hello World</HiIconButton>);
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().color,
+            'primary',
+            'should render with the button color inherit',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().classes.root,
+            classNames(buttonClasses.root),
+        );
+    });
+
+    it('should render with the positive classes and set color to inherit', () => {
+        const wrapper = shallow(<HiIconButton color="positive">Hello World</HiIconButton>);
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().color,
+            'inherit',
+            'should render with the button color inherit',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().classes.root,
+            classNames(buttonClasses.root, classes.positive),
+        );
+    });
+
+    it('should render with the negative classes and set color to inherit', () => {
+        const wrapper = shallow(<HiIconButton color="negative">Hello World</HiIconButton>);
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().color,
+            'inherit',
+            'should render with the button color inherit',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().classes.root,
+            classNames(buttonClasses.root, classes.negative),
+        );
+    });
+
+    it('should render with the middle classes and set color to inherit', () => {
+        const wrapper = shallow(<HiIconButton color="middle">Hello World</HiIconButton>);
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().color,
+            'inherit',
+            'should render with the button color inherit',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().classes.root,
+            classNames(buttonClasses.root, classes.middle),
+        );
+    });
+
+    it('should render with the neutral classes and set color to inherit', () => {
+        const wrapper = shallow(<HiIconButton color="neutral">Hello World</HiIconButton>);
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().color,
+            'inherit',
+            'should render with the button color inherit',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(IconButton)
+                .dive()
+                .props().classes.root,
+            classNames(buttonClasses.root, classes.neutral),
+        );
+    });
+
+    describe('server side', () => {
+        // Only run the test on node.
+        if (!/jsdom/.test(window.navigator.userAgent)) {
+            return;
+        }
+
+        it('should server side render', () => {
+            const markup = render(<HiIconButton>Hello World</HiIconButton>);
+            assert.strictEqual(markup.text(), 'Hello World');
+        });
+    });
+});

package/src/HiIconButton/index.js

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

package/src/HiListItemLink/HiListItemLink.js

@@ -0,0 +1,102 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { makeStyles } from "@material-ui/core/styles";
+import ListItem from "@material-ui/core/ListItem";
+import ArrowRightIcon from "@material-ui/icons/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';