@hipay/hipay-material-ui 3.12.1 → 3.12.3-beta.0

package/src/HiAccordionSummary/HiAccordionSummary.js

@@ -1,112 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import styled from 'styled-components/macro';
-
-import AccordionSummary from '@mui/material/AccordionSummary';
-import Typography from '@mui/material/Typography';
-import MenuDown from 'mdi-material-ui/MenuDown';
-import EditIcon from '@mui/icons-material/Edit';
-import HiButton from '../HiButton';
-
-const HiAccordionSummary = (props) => {
-    return (
-        <AccordionSummary
-            classes={{
-                root: 'summary',
-                content: 'summaryContent',
-            }}
-            className={classnames(props.className, { editMode: props.editMode })}
-            expandIcon={props.editMode ? null : <MenuDown />}
-        >
-            <Typography variant="h2" className="heading">
-                {props.heading}
-            </Typography>
-
-            {!props.editMode && (
-                <div className="secondary">
-                    {!!props.secondaryHeading && (
-                        <Typography className="secondaryHeading" variant="h5">
-                            {props.secondaryHeading}
-                        </Typography>
-                    )}
-
-                    {props.editable && (
-                        <HiButton
-                            className="editButton"
-                            color="primary"
-                            disabled={props.editDisabled}
-                            onClick={props.onEdit}
-                        >
-                            <EditIcon fontSize="small" />
-                            <span className="saveLabel">{props.editLabel}</span>
-                        </HiButton>
-                    )}
-                </div>
-            )}
-        </AccordionSummary>
-    );
-};
-
-HiAccordionSummary.propTypes = {
-    /* Name of panel */
-    heading: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    /* Secondary text on heading */
-    secondaryHeading: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    /* Enable edit mode */
-    editable: PropTypes.bool,
-    /* Display edit content if edit mode is true, else display content */
-    editMode: PropTypes.bool,
-    /* Enable/Disable edit button */
-    editDisabled: PropTypes.bool,
-    /* Label in edit button */
-    editLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    /* Edit action callback */
-    onEdit: PropTypes.func,
-};
-
-HiAccordionSummary.defaultProps = {
-    editable: false,
-    editMode: false,
-    editDisabled: false,
-};
-
-const StyledHiAccordionSummary = styled(HiAccordionSummary)`
-    &.summary {
-        border-bottom: 1px solid #e3e6e7;
-        height: 48px;
-        min-height: 48px;
-        padding: 0;
-
-        &.editMode {
-            border-bottom: none;
-            cursor: default;
-
-            .heading {
-                font-weight: bold;
-            }
-        }
-
-        .summaryContent {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .secondary {
-                display: flex;
-                align-items: center;
-
-                .secondaryHeading {
-                    color: ${({ theme }) => theme.palette.neutral.light};
-                    font-size: 11px;
-                }
-            }
-        }
-
-        .saveLabel {
-            margin-left: 6px;
-        }
-    }
-`;
-
-export default StyledHiAccordionSummary;

package/src/HiAccordionSummary/index.js

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

package/src/HiAlertModal/HiAlertModal.js

@@ -1,196 +0,0 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components/macro';
-
-import HiButton from '../HiButton';
-import HiIcon from '../HiIcon';
-
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import { Typography } from '@mui/material';
-
-const HiAlertModal = (props) => {
-    const cancelButtonRef = useRef(null);
-    const submitButtonRef = useRef(null);
-
-    // Refs to HiButton to display focus state
-    let submitActionsRef;
-    let cancelActionsRef;
-
-    // On Dialog opening, focus an action button
-    const handleOnEntered = () => {
-        if (props.labelSubmitButton) {
-            // Focus submit button
-            submitButtonRef.current.focus();
-            submitActionsRef.focusVisible();
-        } else if (props.labelCancelButton) {
-            // Focus cancel button
-            cancelButtonRef.current.focus();
-            cancelActionsRef.focusVisible();
-        }
-    };
-
-    return (
-        <Dialog
-            className={props.className}
-            classes={{ paper: 'dialog-paper' }}
-            open={props.open}
-            onClose={props.onClose}
-            aria-labelledby="dialog-title"
-            aria-describedby="dialog-content"
-            TransitionProps={{
-                onEntered: handleOnEntered,
-            }}
-        >
-            {props.title && <DialogTitle className="dialog-title">{props.title}</DialogTitle>}
-            <DialogContent className="dialog-content">
-                <Typography component={'div'} variant="body1" color="textSecondary">
-                    {props.content}
-                </Typography>
-            </DialogContent>
-            <DialogActions className="dialog-actions">
-                {props.labelCancelButton && (
-                    <HiButton
-                        className="cancel-button"
-                        onClick={props.onCancelClick}
-                        variant={props.cancelButtonVariant}
-                        color={props.cancelButtonColor}
-                        ref={cancelButtonRef}
-                        action={(actions) => {
-                            cancelActionsRef = actions;
-                        }}
-                    >
-                        {props.labelCancelButton}
-                    </HiButton>
-                )}
-                {props.labelSubmitButton && (
-                    <HiButton
-                        className="submit-button"
-                        onClick={props.onSubmitClick}
-                        color={props.submitButtonColor}
-                        variant={props.submitButtonVariant}
-                        ref={submitButtonRef}
-                        action={(actions) => {
-                            submitActionsRef = actions;
-                        }}
-                    >
-                        <HiIcon>{props.submitIcon}</HiIcon>
-                        <span className="submit-text">{props.labelSubmitButton}</span>
-                    </HiButton>
-                )}
-            </DialogActions>
-        </Dialog>
-    );
-};
-
-const StyledHiAlertModal = styled(HiAlertModal)`
-    .dialog-paper {
-        padding: 32px;
-        ${({ theme }) => theme.breakpoints.up('sm')} {
-            width: 560px;
-            min-width: 560px;
-
-            padding: 55px;
-        }
-    }
-
-    text-align: center;
-
-    .dialog-title {
-        padding: 0;
-        margin-bottom: 25px;
-        h2 {
-            font-weight: 300;
-        }
-    }
-
-    .dialog-content {
-        padding: 0;
-        margin-bottom: 25px;
-        white-space: pre-line;
-    }
-
-    .dialog-actions {
-        padding: 0;
-        display: flex;
-        justify-content: space-around;
-    }
-
-    .cancel-button {
-        width: 122px;
-    }
-
-    .submit-button {
-        width: 288px;
-
-        .submit-text {
-            margin-left: 6px;
-        }
-    }
-
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-        .dialog-actions {
-            flex-direction: column-reverse;
-            justify-content: center;
-            flex-wrap: wrap;
-
-            padding: 0;
-        }
-
-        .submit-button {
-            width: 100%;
-            margin-bottom: 16px;
-            margin-left: 0;
-        }
-
-        .cancel-button {
-            width: 100%;
-        }
-    }
-`;
-
-HiAlertModal.propTypes = {
-    open: PropTypes.bool.isRequired,
-    title: PropTypes.string,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    onClose: PropTypes.func,
-    onCancelClick: PropTypes.func,
-    onSubmitClick: PropTypes.func,
-    labelSubmitButton: PropTypes.string,
-    submitIcon: PropTypes.string,
-    submitButtonColor: PropTypes.oneOf([
-        'default',
-        'inherit',
-        'primary',
-        'secondary',
-        'positive',
-        'negative',
-        'middle',
-        'neutral',
-    ]),
-    submitButtonVariant: PropTypes.oneOf(['contained', 'containedLight', 'outlined', 'text']),
-    labelCancelButton: PropTypes.string,
-    cancelButtonColor: PropTypes.oneOf([
-        'default',
-        'inherit',
-        'primary',
-        'secondary',
-        'positive',
-        'negative',
-        'middle',
-        'neutral',
-    ]),
-    cancelButtonVariant: PropTypes.oneOf(['contained', 'containedLight', 'outlined', 'text']),
-};
-
-HiAlertModal.defaultProps = {
-    cancelButtonColor: 'neutral',
-    cancelButtonVariant: 'containedLight',
-    submitButtonColor: 'primary',
-    submitButtonVariant: 'contained',
-    submitIcon: 'done',
-};
-
-export default StyledHiAlertModal;

package/src/HiAlertModal/HiAlertModal.md

@@ -1,148 +0,0 @@
-HiAlertModal example: 
-
-```js
-import React from 'react';
-import HiButton from '../HiButton';
-import HiAlertModal from '../HiAlertModal';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
-import HiSwitch from '../HiSwitch';
-import HiSelectField from '../HiSelect/HiSelectField';
-
-class HiAlertModalDemo extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            open: false,
-            backgroundIcon: null,
-            submitButton: true,
-            submitButtonColor: 'primary',
-            cancelButton: true,
-            cancelButtonColor: 'neutral',
-        };
-        this.handleChangeCancelButton = this.handleChangeCancelButton.bind(this);
-        this.handleChangeSubmitButton = this.handleChangeSubmitButton.bind(this);
-        this.handleClickOpen = this.handleClickOpen.bind(this);
-        this.handleClose = this.handleClose.bind(this);
-        this.handleClickSubmit = this.handleClickSubmit.bind(this);
-        this.handleClickCancel = this.handleClickCancel.bind(this);
-    }
-
-    handleChangeCancelButton(event, value) {
-        this.setState({ cancelButtonColor: value });
-    }
-
-    handleChangeSubmitButton(event, value) {
-        this.setState({ submitButtonColor: value });
-    }
-
-    handleClickOpen() {
-        this.setState({ open: true });
-        // eslint-disable-next-line no-console
-        console.log('Ouverture de la popup');
-    }
-
-    handleClose() {
-        this.setState({ open: false });
-        // eslint-disable-next-line no-console
-        console.log('Fermeture de la pop up (clic en dehord de la popup)');
-    }
-
-    handleClickSubmit() {
-        this.setState({ open: false });
-        // eslint-disable-next-line no-console
-        console.log('Clic bouton submit');
-    }
-
-    handleClickCancel() {
-        this.setState({ open: false });
-        // eslint-disable-next-line no-console
-        console.log('Clic bouton cancel');
-    }
-
-    render() {
-        const { submitButton, submitButtonColor, cancelButton, cancelButtonColor, backgroundIcon } = this.state;
-
-        const colors = [
-            { id: 'default', label: 'default', hideCheckbox: true },
-            { id: 'inherit', label: 'inherit', hideCheckbox: true },
-            { id: 'primary', label: 'primary', hideCheckbox: true },
-            { id: 'secondary', label: 'secondary', hideCheckbox: true },
-            { id: 'positive', label: 'positive', hideCheckbox: true },
-            { id: 'negative', label: 'negative', hideCheckbox: true },
-            { id: 'middle', label: 'middle', hideCheckbox: true },
-            { id: 'neutral', label: 'neutral', hideCheckbox: true },
-        ];
-        return (
-            <div>
-                <HiButton color="primary" onClick={this.handleClickOpen}>Open Alert Modal</HiButton>
-                <HiAlertModal
-                    open={this.state.open}
-                    title="Espace limité"
-                    content="Votre tableau de bord est plein.<br/>Veuillez supprimer un widget avant d'ajouter celui-ci."
-                    labelSubmitButton={submitButton ? 'OK' : ''}
-                    submitColor={submitButtonColor}
-                    onSubmitClick={this.handleClickSubmit}
-                    onCancelClick={this.handleClickCancel}
-                    onClose={this.handleClose}
-                    labelCancelButton={cancelButton ? 'CANCEL' : ''}
-                    cancelColor={cancelButtonColor}
-                    backgroundIcon={backgroundIcon}
-                    iconSize={123}
-                />
-
-                <FormGroup>
-                    <FormControlLabel
-                        control={
-                            <HiSwitch
-                                checked={backgroundIcon}
-                                onChange={(event, checked) => this.setState({ backgroundIcon: checked ? 'hi_download' : null })}
-                                color="primary"
-                            />
-                        }
-                        label="backgroundIcon"
-                    />
-                    <FormControlLabel
-                        control={
-                            <HiSwitch
-                                checked={submitButton}
-                                onChange={(event, checked) => this.setState({ submitButton: checked })}
-                                color="primary"
-                            />
-                        }
-                        label="Submit button"
-                    />
-                    <FormControlLabel
-                        control={
-                            <HiSwitch
-                                checked={cancelButton}
-                                onChange={(event, checked) => this.setState({ cancelButton: checked })}
-                                color="primary"
-                            />
-                        }
-                        label="Cancel button"
-                    />
-                    <HiSelectField
-                        id="submitButtonColor"
-                        name="submitButtonColor"
-                        onChange={this.handleChangeSubmitButton}
-                        options={colors}
-                        value={submitButtonColor}
-                        label="Submit Button Color"
-                    />
-                    <HiSelectField
-                        id="cancelButtonColor"
-                        name="cancelButtonColor"
-                        onChange={this.handleChangeCancelButton}
-                        options={colors}
-                        value={cancelButtonColor}
-                        label="Cancel Button Color"
-                    />
-                </FormGroup>
-            </div>
-        );
-    }
-}
-;<HiAlertModalDemo />
-```

package/src/HiAlertModal/index.js

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

package/src/HiAppBar/HiAppBar.js

@@ -1,136 +0,0 @@
-// @inheritedComponent AppBar
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import withStyles from '@mui/styles/withStyles';
-import AppBar from '@mui/material/AppBar';
-import Collapse from '@mui/material/Collapse';
-import Toolbar from '@mui/material/Toolbar';
-import HiIcon from '../HiIcon';
-import HiIconButton from '../HiIconButton';
-
-export const styles = theme => ({
-    root: {},
-    bar: {
-        backgroundColor: theme.palette.background3,
-        color: theme.palette.text.secondary,
-    },
-    flexDiv: {
-        flexGrow: 1,
-    },
-    focused: {
-        backgroundColor: theme.palette.background2,
-    },
-    iconButton: {},
-    collapseOverflow: {
-        overflow: 'inherit',
-    },
-    collapseButton: {
-        position: 'absolute',
-        right: 56,
-        marginTop: 8,
-    },
-});
-
-class HiAppBar extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            collapsed: false,
-        };
-
-        this.handleCollapse = this.handleCollapse.bind(this);
-    }
-
-    handleCollapse() {
-        this.props.onCollapse(!this.state.collapsed);
-    }
-
-    render() {
-        const {
-            children,
-            classes,
-            className,
-            collapsed,
-            focused,
-            hideable,
-            position
-        } = this.props;
-
-        return (
-            <AppBar
-                className={classNames(className, classes.bar, {
-                    [classes.focused]: focused,
-                })}
-                classes={{
-                    root: classes.root,
-                }}
-                elevation={2}
-                position={position}
-                color="default"
-            >
-                <Collapse
-                    className={classNames({
-                        [classes.collapseOverflow]: !hideable,
-                    })}
-                    in={!collapsed}
-                >
-                    <div>
-                        <Toolbar>
-                            {children}
-                            {hideable && (
-                                <HiIconButton
-                                    onClick={this.handleCollapse}
-                                    color="inherit"
-                                    className={classes.iconButton}
-                                >
-                                    <HiIcon icon="keyboard_arrow_up" />
-                                </HiIconButton>
-                            )}
-                        </Toolbar>
-                    </div>
-                </Collapse>
-            </AppBar>
-        );
-    }
-}
-
-HiAppBar.propTypes = {
-    /**
-     * Surcharge des classes
-     */
-    classes: PropTypes.object,
-    /**
-     * Surcharge des classes
-     */
-    className: PropTypes.string,
-    /**
-     * Is collapsed
-     */
-    collapsed: PropTypes.bool,
-    /**
-     * If focused, change background color
-     */
-    focused: PropTypes.bool,
-    /**
-     * Could be hidden
-     */
-    hideable: PropTypes.bool,
-    /**
-     * Fonction de callback au click sur le bouton chevron
-     */
-    onCollapse: PropTypes.func,
-    /**
-     * Positionement de la topBar. The behavior of the different options is described
-     * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
-     */
-    position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']),
-};
-
-HiAppBar.defaultProps = {
-    focused: false,
-    hideable: false,
-};
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiHiAppBar' })(HiAppBar);

package/src/HiAppBar/HiAppBar.md

@@ -1,79 +0,0 @@
-HiAppBar example :
-
-```js
-import React from 'react';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
-import HiAppBar from '../HiAppBar';
-import HiSwitch from '../HiSwitch';
-import HiIcon from '../HiIcon';
-import HiButton from '../HiButton';
-
-class HiAppBars extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            focused: false,
-            topMenuCollapsed: false,
-         };
-        
-        this.handleChange = this.handleChange.bind(this);
-        this.handleCollapse = this.handleCollapse.bind(this);
-        this.handleOpenTopMenu = this.handleOpenTopMenu.bind(this);
-    }
-
-    handleChange() {
-        this.setState(prevState => ({ focused: !prevState.focused }));
-    };
-
-    handleOpenTopMenu() {
-        this.setState(prevState => ({ topMenuCollapsed: !prevState.topMenuCollapsed }));
-    };
-
-    handleCollapse(collapsed) {
-        this.setState({ topMenuCollapsed: collapsed });
-    };
-
-    render() {
-        const { focused, topMenuCollapsed } = this.state;
-        return (
-            <div style={{flexGrow: 1}}>
-                <HiAppBar hideable focused={focused} position="static" collapsed={this.state.topMenuCollapsed} onCollapse={this.handleCollapse}>
-                    <HiButton>
-                        <HiIcon icon="menu" />
-                        <span style={{color: 'rgba(0,0,0,0.54)',
-                                      marginLeft: 10,
-                                      fontSize: 14}}>Menu</span>
-                    </HiButton>
-                    <div style={{flex: 1}} />
-                </HiAppBar>
-
-                <div style={{textAlign: 'center', position: 'relative'}}>
-                    <p>Hipay Enterprise</p>
-                    <p><HiIcon icon="mdi_home" />Welcome John SMITH</p>
-                    {topMenuCollapsed && (
-                        <HiButton onClick={this.handleOpenTopMenu} style={{position: 'absolute', top: 0, right: 0}}>
-                            <HiIcon icon="keyboard_arrow_up" />
-                        </HiButton>
-                    )}
-                </div>
-
-                <FormGroup>
-                    <FormControlLabel
-                        control={
-                            <HiSwitch
-                                checked={focused}
-                                color="primary"
-                                onChange={this.handleChange}
-                                aria-label="Focus"
-                            />
-                        }
-                        label="Focus"
-                    />
-                </FormGroup>
-            </div>
-        );
-    }
-}
-;<HiAppBars/>
-```

package/src/HiAppBar/index.js

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