@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/HiColoredLabel/HiColoredLabel.js

@@ -0,0 +1,206 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,99 @@
+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

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

package/src/HiDatePicker/Caption.js

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,93 @@
+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();
+        });
+    });
+});