@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/src/HiColoredLabel/HiColoredLabel.js

@@ -1,206 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import { capitalize } from '../utils/helpers';
-import { fade } from '@material-ui/core/styles/colorManipulator';
-
-export const styles = theme => ({
-    root: {
-        display: 'inline-block',
-        alignItems: 'baseline',
-        maxWidth: '100%',
-        padding: '2px 8px',
-        borderRadius: 2,
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        lineHeight: 1,
-    },
-    body1: {
-        ...theme.typography.b1,
-    },
-    body2: {
-        ...theme.typography.b2,
-    },
-    body3: {
-        ...theme.typography.b3,
-    },
-    body4: {
-        ...theme.typography.b4,
-    },
-    body5: {
-        ...theme.typography.b5,
-    },
-    color: {
-        fontWeight: 400,
-    },
-    /* Styles applied to the root element if `color="primary"`. */
-    colorPrimary: {
-        color: theme.palette.primary.main,
-        backgroundColor: fade(theme.palette.primary.main, 0.08),
-    },
-    /* Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: {
-        color: theme.palette.secondary.main,
-        backgroundColor: fade(theme.palette.secondary.main, 0.08),
-    },
-    /* Styles applied to the root element if `color="positive"`. */
-    colorPositive: {
-        color: theme.palette.positive.main,
-        backgroundColor: fade(theme.palette.positive.main, 0.08),
-    },
-    /* Styles applied to the root element if `color="negative"`. */
-    colorNegative: {
-        color: theme.palette.negative.main,
-        backgroundColor: fade(theme.palette.negative.main, 0.08),
-    },
-    /* Styles applied to the root element if `color="middle"`. */
-    colorMiddle: {
-        color: theme.palette.middle.main,
-        backgroundColor: fade(theme.palette.middle.main, 0.08),
-    },
-    /* Styles applied to the root element if `color="neutral"`. */
-    colorNeutral: {
-        color: theme.palette.neutral.main,
-        backgroundColor: fade(theme.palette.neutral.main, 0.08),
-    },
-    activeColor: {
-        fontWeight: 500,
-    },
-    /* Styles applied to the root element if `color="primary"`. */
-    activeColorPrimary: {
-        color: theme.palette.primary.contrastText,
-        backgroundColor: theme.palette.primary.main,
-    },
-    /* Styles applied to the root element if `color="secondary"`. */
-    activeColorSecondary: {
-        color: theme.palette.secondary.contrastText,
-        backgroundColor: theme.palette.secondary.main,
-    },
-    /* Styles applied to the root element if `color="positive"`. */
-    activeColorPositive: {
-        color: theme.palette.positive.contrastText,
-        backgroundColor: theme.palette.positive.main,
-    },
-    /* Styles applied to the root element if `color="negative"`. */
-    activeColorNegative: {
-        color: theme.palette.negative.contrastText,
-        backgroundColor: theme.palette.negative.main,
-    },
-    /* Styles applied to the root element if `color="middle"`. */
-    activeColorMiddle: {
-        color: theme.palette.middle.contrastText,
-        backgroundColor: theme.palette.middle.main,
-    },
-    /* Styles applied to the root element if `color="neutral"`. */
-    activeColorNeutral: {
-        color: theme.palette.neutral.contrastText,
-        backgroundColor: theme.palette.neutral.main,
-    },
-    outlined: {
-        border: '1px solid',
-    },
-});
-
-/**
- * HiColoredLabel
- *
- * Label with background color & text color
- */
-function HiColoredLabel(props) {
-    const { classes, className, fontSize, label, color: propsColor, active, outlined, fontWeight, style, theme, ...other } = props;
-
-    const color = propsColor || 'primary';
-
-    const isHiColor = [
-        'primary',
-        'secondary',
-        'positive',
-        'negative',
-        'middle',
-        'neutral',
-    ].includes(color);
-    const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
-
-    return (
-        <div
-            className={classNames(
-                classes.root,
-                {
-                    [classes.color]: !active,
-                    [classes.activeColor]: active,
-                    [classes.outlined]: outlined,
-                    [classes[`activeColor${capitalize(color)}`]]: active && isHiColor,
-                    [classes[`color${capitalize(color)}`]]: !active && isHiColor,
-                    [classes.body1]: fontSize>=15,
-                    [classes.body2]: fontSize===14,
-                    [classes.body3]: fontSize===13,
-                    [classes.body4]: fontSize===12,
-                    [classes.body5]: fontSize<=11,
-                },
-                className,
-            )}
-            style={{
-                ...style,
-                ...(isHexColor && {
-                    backgroundColor: active ? color : fade(color, 0.08),
-                    color: active ? theme.palette.getContrastText(color) : color,
-                }),
-                ...(fontWeight && { fontWeight }),
-            }}
-            {...other}
-        >
-            {label}
-        </div>
-    );
-}
-
-HiColoredLabel.propTypes = {
-    /**
-     * Applique le style du label actif
-     * Background de la couleur pur et label blanc
-     */
-    active: PropTypes.bool,
-    /**
-     * Surcharge les classes du composant
-     */
-    classes: PropTypes.object,
-    /**
-     * Surcharge les classes du composant
-     */
-    className: PropTypes.string,
-    /**
-     * Couleur du text & du background
-     */
-    color: PropTypes.string,
-    /**
-     * Taille du text
-     */
-    fontSize: PropTypes.number,
-    /**
-     * Graisse du text
-     */
-    fontWeight: PropTypes.number,
-    /**
-     * Label à afficher
-     */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired,
-    /**
-     * Ajoute une bordure
-     */
-    outlined: PropTypes.bool,
-};
-
-HiColoredLabel.defaultProps = {
-    active: false,
-    color: 'primary',
-    fontSize: 15,
-    outlined: false,
-};
-
-export default withStyles(styles, {
-    hiComponent: true,
-    withTheme: true,
-    name: 'HmuiHiColoredLabel',
-})(HiColoredLabel);

package/src/HiColoredLabel/HiColoredLabel.md

@@ -1,68 +0,0 @@
-HiColoredLabel example:
-
-```js
-import React from 'react';
-import HiColoredLabel from './HiColoredLabel';
-
-function HiColoredLabels(props) {
-    const { classes } = props;
-    return (
-        <div>
-            <div>
-                <h3>HiColoredLabel</h3>
-                <HiColoredLabel style={{margin: 4}} label="Default" />
-                <HiColoredLabel style={{margin: 4}} color="primary" label="Primary" />
-                <HiColoredLabel style={{margin: 4}} color="secondary" label="Secondary" />
-                <HiColoredLabel style={{margin: 4}} color="positive" label="Positive" />
-                <HiColoredLabel style={{margin: 4}} color="negative" label="Negative" />
-                <HiColoredLabel style={{margin: 4}} color="middle" label="Middle" />
-                <HiColoredLabel style={{margin: 4}} color="neutral" label="Neutral" />
-                <HiColoredLabel style={{margin: 4}} color="#00AF01" label="Neutral" active />
-            </div>
-            <div>
-                <h3>HiColoredLabel - active</h3>
-                <HiColoredLabel style={{margin: 4}} active label="Default" />
-                <HiColoredLabel style={{margin: 4}} active color="primary" label="Primary" />
-                <HiColoredLabel
-                    style={{margin: 4}}
-                    active
-                    color="secondary"
-                    label="Secondary"
-                />
-                <HiColoredLabel
-                    style={{margin: 4}}
-                    active
-                    color="positive"
-                    label="Positive"
-                />
-                <HiColoredLabel
-                    style={{margin: 4}}
-                    active
-                    color="negative"
-                    label="Negative"
-                />
-                <HiColoredLabel style={{margin: 4}} active color="middle" label="Middle" />
-                <HiColoredLabel style={{margin: 4}} active color="neutral" label="Neutral" />
-            </div>
-            <div>
-                <h3>HiColoredLabel - custom</h3>
-                <HiColoredLabel style={{margin: 4}} color="#cc33ff" label="Pink" />
-                <HiColoredLabel
-                    style={{margin: 4}}
-                    active
-                    color="#cc33ff"
-                    label="Pink active"
-                />
-                <HiColoredLabel style={{margin: 4}} fontWeight={600} label="Weight 600" />
-                <HiColoredLabel
-                    style={{margin: 4}}
-                    active
-                    fontWeight={600}
-                    label="Weight 600 active"
-                />
-            </div>
-        </div>
-    );
-}
-;<HiColoredLabels/>
-```

package/src/HiColoredLabel/HiColoredLabel.test.js

@@ -1,99 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow, createMount, getClasses } from '../test-utils';
-import HiColoredLabel from './HiColoredLabel';
-
-describe('<HiColoredLabel />', () => {
-    let shallow;
-    let classes;
-    let mount;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-        classes = getClasses(<HiColoredLabel label="" color="" />);
-        mount = createMount();
-    });
-
-    after(() => {
-        mount.cleanUp();
-    });
-
-    describe('color text only', () => {
-        let wrapper;
-
-        before(() => {
-            wrapper = shallow(
-                <HiColoredLabel label={'Test Label'} color={'#e4e4e4'} fontWeight={600} />,
-            );
-        });
-
-        it('should render a div with classes root', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-
-        it('should have color and background opacity 0.08', () => {
-            assert.strictEqual(wrapper.props().style.backgroundColor, 'rgba(228, 228, 228, 0.08)');
-            assert.strictEqual(wrapper.props().style.color, '#e4e4e4');
-            assert.strictEqual(wrapper.props().style.fontWeight, 600);
-        });
-    });
-
-    describe('active color text', () => {
-        let wrapper;
-
-        before(() => {
-            wrapper = shallow(<HiColoredLabel label={'Test Label'} color={'#e4e4e4'} active />);
-        });
-
-        it('should render a div with classes root', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-
-        it('should have color and background opacity 0.08', () => {
-            assert.strictEqual(wrapper.props().style.backgroundColor, '#e4e4e4');
-            assert.strictEqual(wrapper.props().style.color, '#20272B');
-        });
-    });
-
-    describe('beta active color text', () => {
-        let wrapper;
-
-        before(() => {
-            wrapper = shallow(
-                <HiColoredLabel label={'Test Label'} color={'#e4e4e4'} active beta />,
-            );
-        });
-
-        it('should render a div with classes root', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-
-        it('should have color and background opacity 0.08', () => {
-            assert.strictEqual(wrapper.props().style.backgroundColor, '#e4e4e4');
-            assert.strictEqual(wrapper.props().style.color, '#20272B');
-        });
-    });
-
-    describe('null color', () => {
-        let wrapper;
-
-        before(() => {
-            wrapper = shallow(
-                <HiColoredLabel label={'Test Label'} color={null} active />,
-            );
-        });
-
-        it('should render a div with classes root', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.hasClass(classes.root), true);
-        });
-
-        it('should have color and background opacity 0.08', () => {
-            assert.strictEqual(wrapper.props().style.backgroundColor, undefined);
-            assert.strictEqual(wrapper.props().style.color, undefined);
-        });
-    });
-});

package/src/HiColoredLabel/index.js

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

package/src/HiDatePicker/Caption.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import HiButton from '../HiButton';
-
-export const styles = theme => ({
-    caption: {
-        display: 'table-caption',
-        height: 40,
-        textAlign: 'center',
-        padding: '4px 0',
-        ...theme.typography.body1,
-        color: theme.palette.neutral.main,
-    },
-});
-
-const Caption = ({ classes, date, locale = 'en_US', localeUtils, onMonthClick, onYearClick }) => {
-    const months = localeUtils.getMonths(locale);
-    return (
-        <div className={classes.caption}>
-            <HiButton size="small" onClick={onMonthClick}>{months[date.getMonth()]}</HiButton>
-            <HiButton size="small" onClick={onYearClick}>{date.getFullYear()}</HiButton>
-        </div>
-    );
-};
-
-Caption.propTypes = {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * ReactDayPicker prop
-     */
-    date: PropTypes.object.isRequired,
-    /**
-     * ReactDayPicker prop
-     */
-    locale: PropTypes.string,
-    /**
-     * ReactDayPicker prop
-     */
-    localeUtils: PropTypes.object.isRequired,
-    /**
-     * Fonction de callback au click
-     * Permet de modifier le mois
-     */
-    onMonthClick: PropTypes.func,
-    /**
-     * Fonction de callback au click
-     * Permet de modifier l'année
-     */
-    onYearClick: PropTypes.func,
-};
-
-export default withStyles(styles, { name: 'HmuiCaption' })(Caption);

package/src/HiDatePicker/Caption.test.js

@@ -1,93 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import MomentLocaleUtils from 'react-day-picker/moment';
-import { createShallow, createMount, getClasses } from '../test-utils';
-import Caption from './Caption';
-import HiButton from '../HiButton/HiButton';
-
-describe('<Caption />', () => {
-    let shallow;
-    let mount;
-    let classes;
-    let wrapper;
-    const date = new Date();
-
-    before(() => {
-        shallow = createShallow({ untilSelector: 'Badge' });
-        classes = getClasses(<Caption date={date} localeUtils={MomentLocaleUtils} />);
-    });
-
-    beforeEach(() => {
-        mount = createMount();
-    });
-
-    afterEach(() => {
-        mount.cleanUp();
-    });
-
-    describe('text with leftIcon', () => {
-        before(() => {
-            wrapper = shallow(<Caption date={date} localeUtils={MomentLocaleUtils} />);
-        });
-
-        it('should render a div containing two spans', () => {
-            assert.strictEqual(wrapper.name(), 'div');
-            assert.strictEqual(wrapper.find('div').length, 1, 'should have 1 div');
-            assert.strictEqual(wrapper.find(HiButton).length, 2, 'should have 2 HiButton');
-        });
-
-        it('should merge user classes & spread custom props to the root node', () => {
-            assert.strictEqual(wrapper.hasClass(classes.caption), true);
-        });
-    });
-
-    describe('mount', () => {
-        it('should call onDelete when clicking', () => {
-            const handleClickMonth = spy();
-            const handleClickYear = spy();
-
-            wrapper = mount(
-                <Caption
-                    date={date}
-                    localeUtils={MomentLocaleUtils}
-                    onMonthClick={handleClickMonth}
-                    onYearClick={handleClickYear}
-                />,
-            );
-
-            assert.strictEqual(wrapper.find(HiButton).length, 2, 'should have 2 HiButton');
-
-            wrapper
-                .find(HiButton)
-                .at(0)
-                .simulate('click');
-            assert.strictEqual(
-                handleClickMonth.callCount,
-                1,
-                'should have been called once handleClickMonth',
-            );
-            assert.strictEqual(
-                handleClickYear.callCount,
-                0,
-                'should not have been called handleClickYear',
-            );
-
-            wrapper
-                .find(HiButton)
-                .at(1)
-                .simulate('click');
-            assert.strictEqual(
-                handleClickMonth.callCount,
-                1,
-                'should not have been called twice handleClickMonth',
-            );
-            assert.strictEqual(
-                handleClickYear.callCount,
-                1,
-                'should have been called once handleClickYear',
-            );
-            wrapper.unmount();
-        });
-    });
-});