@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/styles/createTypography.js

@@ -0,0 +1,185 @@
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+
+function round(value) {
+    return Math.round(value * 1e5) / 1e5;
+}
+
+export default function createTypography(palette, typography) {
+    const {
+        fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif',
+        // The default font size of the Material Specification.
+        fontSize = 14, // px
+        fontWeightLight = 300,
+        fontWeightRegular = 400,
+        fontWeightMedium = 500,
+        // Tell Material-UI what's the font-size on the html element.
+        // 16px is the default font-size used by browsers.
+        htmlFontSize = 16,
+        // Apply the CSS properties to all the variants.
+        allVariants,
+        ...other
+    } =
+        typeof typography === 'function' ? typography(palette) : typography;
+
+    const coef = fontSize / 14;
+    function pxToRem(value) {
+        return `${value / htmlFontSize * coef}rem`;
+    }
+
+    return deepmerge(
+        {
+            pxToRem,
+            round,
+            fontFamily,
+            fontSize,
+            fontWeightLight,
+            fontWeightRegular,
+            fontWeightMedium,
+            display4: {
+                fontSize: pxToRem(112),
+                fontWeight: fontWeightLight,
+                fontFamily,
+                letterSpacing: '-.04em',
+                lineHeight: `${round(128 / 112)}em`,
+                marginLeft: '-.04em',
+                color: palette.text.secondary,
+                ...allVariants,
+            },
+            display3: {
+                fontSize: pxToRem(56),
+                fontWeight: fontWeightRegular,
+                fontFamily,
+                letterSpacing: '-.02em',
+                lineHeight: `${round(73 / 56)}em`,
+                marginLeft: '-.02em',
+                color: palette.text.secondary,
+                ...allVariants,
+            },
+            display2: {
+                fontSize: pxToRem(45),
+                fontWeight: fontWeightRegular,
+                fontFamily,
+                lineHeight: `${round(51 / 45)}em`,
+                marginLeft: '-.02em',
+                color: palette.text.secondary,
+                ...allVariants,
+            },
+            display1: {
+                fontSize: pxToRem(34),
+                fontWeight: fontWeightRegular,
+                fontFamily,
+                lineHeight: `${round(41 / 34)}em`,
+                color: palette.text.secondary,
+                ...allVariants,
+            },
+            headline: {
+                fontSize: pxToRem(24),
+                fontWeight: fontWeightRegular,
+                fontFamily,
+                lineHeight: `${round(32.5 / 24)}em`,
+                color: palette.text.primary,
+                ...allVariants,
+            },
+            title: {
+                fontSize: pxToRem(21),
+                fontWeight: fontWeightMedium,
+                fontFamily,
+                lineHeight: `${round(24.5 / 21)}em`,
+                color: palette.text.primary,
+                ...allVariants,
+            },
+            subheading: {
+                fontSize: pxToRem(16),
+                fontWeight: fontWeightRegular,
+                fontFamily,
+                lineHeight: `${round(24 / 16)}em`,
+                color: palette.text.primary,
+                ...allVariants,
+            },
+            body3: {
+                fontSize: pxToRem(14),
+                fontWeight: fontWeightRegular,
+                fontFamily,
+                lineHeight: `${round(26 / 14)}em`,
+                color: palette.text.primary,
+                ...allVariants,
+            },
+            body2: {
+                fontSize: pxToRem(14),
+                fontWeight: fontWeightMedium,
+                fontFamily,
+                lineHeight: `${round(24 / 14)}em`,
+                color: palette.text.primary,
+                ...allVariants,
+            },
+            body1: {
+                fontSize: pxToRem(14),
+                fontWeight: fontWeightRegular,
+                fontFamily,
+                lineHeight: `${round(20.5 / 14)}em`,
+                color: palette.text.primary,
+                ...allVariants,
+            },
+            h1: {
+                fontSize: 24,
+                fontFamily,
+            },
+            h2: {
+                fontSize: 20,
+                fontFamily,
+            },
+            h3: {
+                fontSize: 18,
+                fontFamily,
+            },
+            h4: {
+                fontSize: 16,
+                fontFamily,
+            },
+            h5: {
+                fontSize: 14,
+                fontFamily,
+            },
+            b1: {
+                fontSize: 15,
+                fontFamily,
+            },
+            b2: {
+                fontSize: 14,
+                fontFamily,
+            },
+            b3: {
+                fontSize: 13,
+                fontFamily,
+            },
+            b4: {
+                fontSize: 12,
+                fontFamily,
+            },
+            b5: {
+                fontSize: 11,
+                fontFamily,
+            },
+            caption: {
+                fontSize: pxToRem(12),
+                fontWeight: fontWeightRegular,
+                fontFamily,
+                lineHeight: `${round(16.5 / 12)}em`,
+                color: palette.text.secondary,
+                ...allVariants,
+            },
+            button: {
+                fontSize: pxToRem(14),
+                textTransform: 'uppercase',
+                fontWeight: fontWeightMedium,
+                fontFamily,
+                color: palette.text.primary,
+                ...allVariants,
+            },
+        },
+        other,
+        {
+            clone: false, // No need to clone deep
+        },
+    );
+}

package/src/styles/createTypography.test.js

@@ -0,0 +1,67 @@
+import { assert } from 'chai';
+import createPalette from './createPalette';
+import createTypography from './createTypography';
+
+describe('createTypography', () => {
+    let palette;
+
+    before(() => {
+        palette = createPalette({});
+    });
+
+    it('should create a material design typography according to spec', () => {
+        const typography = createTypography(palette, {});
+        assert.strictEqual(typography.fontSize, 14);
+    });
+
+    it('should create a typography with custom fontSize', () => {
+        const typography = createTypography(palette, { fontSize: 15 });
+        assert.strictEqual(typography.fontSize, 15);
+    });
+
+    it('should accept a function', () => {
+        const typography = createTypography(palette, paletteCurrent => {
+            assert.strictEqual(palette, paletteCurrent);
+
+            return { fontSize: 15 };
+        });
+        assert.strictEqual(typography.fontSize, 15);
+    });
+
+    it('should accept a custom font size', () => {
+        const typography = createTypography(palette, { fontSize: 16 });
+        assert.strictEqual(typography.body1.fontSize, '1rem', 'should be 16px');
+    });
+
+    it('should create a typography with a custom baseFontSize', () => {
+        const typography = createTypography(palette, { htmlFontSize: 10 });
+        assert.strictEqual(typography.display4.fontSize, '11.2rem');
+    });
+
+    it('should create a typography with custom display4', () => {
+        const customFontSize = '18px';
+        const typography = createTypography(palette, { display4: { fontSize: customFontSize } });
+        assert.strictEqual(typography.display4.fontSize, customFontSize);
+    });
+
+    it('should apply a CSS property to all the variants', () => {
+        const typography = createTypography(palette, { allVariants: { marginLeft: 0 } });
+        const allVariants = [
+            'display4',
+            'display3',
+            'display2',
+            'display1',
+            'headline',
+            'title',
+            'subheading',
+            'body2',
+            'body1',
+            'caption',
+            'button',
+        ];
+
+        allVariants.forEach(variant => {
+            assert.strictEqual(typography[variant].marginLeft, 0);
+        });
+    });
+});

package/src/styles/getStylesCreator.js

@@ -0,0 +1,53 @@
+import warning from 'warning';
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+
+// Support for the jss-expand plugin.
+function arrayMerge(destination, source) {
+    return source;
+}
+
+function getStylesCreator(stylesOrCreator) {
+    const themingEnabled = typeof stylesOrCreator === 'function';
+
+    warning(
+        typeof stylesOrCreator === 'object' || themingEnabled,
+        [
+            'Material-UI: the first argument provided to withStyles() is invalid.',
+            'You need to provide a function generating the styles or a styles object.',
+        ].join('\n'),
+    );
+
+    function create(theme, name) {
+        const styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
+
+        if (!name || !theme.overrides || !theme.overrides[name]) {
+            return styles;
+        }
+
+        const overrides = theme.overrides[name];
+        const stylesWithOverrides = { ...styles };
+
+        Object.keys(overrides).forEach(key => {
+            warning(
+                stylesWithOverrides[key],
+                [
+                    'Material-UI: you are trying to override a style that does not exist.',
+                    `Fix the \`${key}\` key of \`theme.overrides.${name}\`.`,
+                ].join('\n'),
+            );
+            stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key], {
+                arrayMerge,
+            });
+        });
+
+        return stylesWithOverrides;
+    }
+
+    return {
+        create,
+        options: {},
+        themingEnabled,
+    };
+}
+
+export default getStylesCreator;

package/src/styles/getStylesCreator.test.js

@@ -0,0 +1,105 @@
+import { assert } from 'chai';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+import getStylesCreator from './getStylesCreator';
+
+describe('getStylesCreator', () => {
+    const name = 'name';
+    const stylesCreator = getStylesCreator({
+        root: {
+            color: 'black',
+            '&:hover': {
+                color: 'red',
+                borderRadius: 0,
+            },
+        },
+    });
+
+    it('should be able to get the styles', () => {
+        const styles = stylesCreator.create({});
+        assert.deepEqual(styles, {
+            root: {
+                color: 'black',
+                '&:hover': {
+                    color: 'red',
+                    borderRadius: 0,
+                },
+            },
+        });
+    });
+
+    describe('overrides', () => {
+        before(() => {
+            consoleErrorMock.spy();
+        });
+
+        after(() => {
+            consoleErrorMock.reset();
+        });
+
+        it('should be able to overrides some rules, deep', () => {
+            const theme = {
+                overrides: {
+                    [name]: {
+                        root: {
+                            color: 'white',
+                            '&:hover': { borderRadius: 2, backgroundColor: 'black' },
+                        },
+                    },
+                },
+            };
+            const styles = stylesCreator.create(theme, name);
+            assert.deepEqual(styles, {
+                root: {
+                    color: 'white',
+                    '&:hover': {
+                        color: 'red',
+                        borderRadius: 2,
+                        backgroundColor: 'black',
+                    },
+                },
+            });
+        });
+
+        it('should warn on wrong usage', () => {
+            const theme = {
+                overrides: {
+                    [name]: {
+                        bubu: {
+                            color: 'white',
+                        },
+                    },
+                },
+            };
+            stylesCreator.create(theme, name);
+            assert.strictEqual(consoleErrorMock.callCount(), 1);
+            assert.match(
+                consoleErrorMock.args()[0][0],
+                /Fix the `bubu` key of `theme\.overrides\.name`/,
+            );
+        });
+
+        it('should support jss-expand', () => {
+            const stylesCreator2 = getStylesCreator({
+                root: {
+                    padding: [8, 16],
+                },
+            });
+
+            const theme = {
+                overrides: {
+                    [name]: {
+                        root: {
+                            padding: [20, 10],
+                        },
+                    },
+                },
+            };
+            const styles = stylesCreator2.create(theme, name);
+            assert.deepEqual(styles, {
+                root: {
+                    padding: [20, 10],
+                },
+            });
+        });
+    });
+});

package/src/styles/getThemeProps.js

@@ -0,0 +1,11 @@
+function getThemeProps(params) {
+    const { theme, name } = params;
+
+    if (!name || !theme.props || !theme.props[name]) {
+        return {};
+    }
+
+    return theme.props[name];
+}
+
+export default getThemeProps;

package/src/styles/getThemeProps.test.js

@@ -0,0 +1,42 @@
+import { assert } from 'chai';
+import getThemeProps from './getThemeProps';
+
+describe('getThemeProps', () => {
+    it('should ignore empty theme', () => {
+        const props = getThemeProps({
+            theme: {},
+            name: 'MuiFoo',
+        });
+        assert.deepEqual(props, {});
+    });
+
+    it('should ignore different component', () => {
+        const props = getThemeProps({
+            theme: {
+                props: {
+                    MuiBar: {
+                        disableRipple: true,
+                    },
+                },
+            },
+            name: 'MuiFoo',
+        });
+        assert.deepEqual(props, {});
+    });
+
+    it('should return the properties', () => {
+        const props = getThemeProps({
+            theme: {
+                props: {
+                    MuiFoo: {
+                        disableRipple: true,
+                    },
+                },
+            },
+            name: 'MuiFoo',
+        });
+        assert.deepEqual(props, {
+            disableRipple: true,
+        });
+    });
+});

package/src/styles/index.js

@@ -0,0 +1,5 @@
+export { default as createGenerateClassName } from './createGenerateClassName';
+export { default as createMuiTheme } from './createMuiTheme';
+export { default as jssPreset } from './jssPreset';
+export { default as MuiThemeProvider } from './MuiThemeProvider';
+export { default as createStyles } from './createStyles';

package/src/styles/jssPreset.js

@@ -0,0 +1,23 @@
+import jssGlobal from 'jss-global';
+import jssNested from 'jss-nested';
+import jssCamelCase from 'jss-camel-case';
+import jssDefaultUnit from 'jss-default-unit';
+import jssVendorPrefixer from 'jss-vendor-prefixer';
+import jssPropsSort from 'jss-props-sort';
+
+// Subset of jss-preset-default with only the plugins the Material-UI
+// components are using.
+function jssPreset() {
+    return {
+        plugins: [
+            jssGlobal(),
+            jssNested(),
+            jssCamelCase(),
+            jssDefaultUnit(),
+            jssVendorPrefixer(),
+            jssPropsSort(),
+        ],
+    };
+}
+
+export default jssPreset;

package/src/styles/makeStyles.js

@@ -0,0 +1,11 @@
+import { makeStyles } from '@material-ui/core/styles';
+import hmuiTheme from "../theme";
+
+/**
+ * Override makeStyles hook to use HMUI theme as default
+ * @param createStyles
+ * @param options
+ * @returns {StylesHook<Styles<Theme, {}, string>>}
+ */
+export default (createStyles, options) =>
+    makeStyles(createStyles, { defaultTheme: hmuiTheme, ...options });

package/src/styles/mergeClasses.js

@@ -0,0 +1,47 @@
+import warning from 'warning';
+import getDisplayName from 'recompose/getDisplayName';
+
+function mergeClasses(options = {}) {
+    const { baseClasses, newClasses, Component, noBase = false } = options;
+
+    if (!newClasses) {
+        return baseClasses;
+    }
+
+    return {
+        ...baseClasses,
+        ...Object.keys(newClasses).reduce((accumulator, key) => {
+            warning(
+                baseClasses[key] || noBase,
+                [
+                    `Material-UI: the key \`${key}\` ` +
+                        `provided to the classes property is not implemented in ${getDisplayName(
+                            Component,
+                        )}.`,
+                    `You can only override one of the following: ${Object.keys(baseClasses).join(
+                        ',',
+                    )}`,
+                ].join('\n'),
+            );
+
+            warning(
+                !newClasses[key] || typeof newClasses[key] === 'string',
+                [
+                    `Material-UI: the key \`${key}\` ` +
+                        `provided to the classes property is not valid for ${getDisplayName(
+                            Component,
+                        )}.`,
+                    `You need to provide a non empty string instead of: ${newClasses[key]}.`,
+                ].join('\n'),
+            );
+
+            if (newClasses[key]) {
+                accumulator[key] = `${baseClasses[key]} ${newClasses[key]}`;
+            }
+
+            return accumulator;
+        }, {}),
+    };
+}
+
+export default mergeClasses;

package/src/styles/shadows.js

@@ -0,0 +1,43 @@
+const shadowKeyUmbraOpacity = 0.2;
+const shadowKeyPenumbraOpacity = 0.14;
+const shadowAmbientShadowOpacity = 0.12;
+
+function createShadow(...px) {
+    return [
+        `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0, 0, 0, ${shadowKeyUmbraOpacity})`,
+        `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0, 0, 0, ${shadowKeyPenumbraOpacity})`,
+        `${px[8]}px ${px[9]}px ${px[10]}px ${
+            px[11]
+        }px rgba(0, 0, 0, ${shadowAmbientShadowOpacity})`,
+    ].join(',');
+}
+
+const shadows = [
+    'none',
+    createShadow(0, 1, 3, 0, 0, 1, 1, 0, 0, 2, 1, -1),
+    createShadow(0, 1, 5, 0, 0, 2, 2, 0, 0, 3, 1, -2),
+    createShadow(0, 1, 8, 0, 0, 3, 4, 0, 0, 3, 3, -2),
+    createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0),
+    createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0),
+    createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0),
+    createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1),
+    createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2),
+    createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2),
+    createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3),
+    createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3),
+    createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4),
+    createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4),
+    createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4),
+    createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5),
+    createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5),
+    createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5),
+    createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6),
+    createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6),
+    createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7),
+    createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7),
+    createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7),
+    createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8),
+    createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8),
+];
+
+export default shadows;

package/src/styles/shape.js

@@ -0,0 +1,5 @@
+const shape = {
+    borderRadius: 4,
+};
+
+export default shape;

package/src/styles/spacing.js

@@ -0,0 +1,2 @@
+const spacing = (n = 1) => (n * 4);
+export default spacing;

package/src/styles/themeListener.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+
+// Same value used by react-jss
+export const CHANNEL = '__THEMING__';
+
+const themeListener = {
+    contextTypes: {
+        [CHANNEL]: PropTypes.object,
+    },
+    initial: context => {
+        if (!context[CHANNEL]) {
+            return null;
+        }
+
+        return context[CHANNEL].getState();
+    },
+    subscribe: (context, cb) => {
+        if (!context[CHANNEL]) {
+            return null;
+        }
+
+        return context[CHANNEL].subscribe(cb);
+    },
+    unsubscribe: (context, subscriptionId) => {
+        if (context[CHANNEL]) {
+            context[CHANNEL].unsubscribe(subscriptionId);
+        }
+    },
+};
+
+export default themeListener;

package/src/styles/themeListener.test.js

@@ -0,0 +1,36 @@
+import { assert } from 'chai';
+import createBroadcast from 'brcast';
+import themeListener, { CHANNEL } from './themeListener';
+
+describe('themeListener', () => {
+    it('should be able to get the initial state', () => {
+        const broadcast = createBroadcast();
+        const initialState = {};
+        broadcast.setState(initialState);
+
+        assert.strictEqual(themeListener.initial({ [CHANNEL]: broadcast }), initialState);
+    });
+
+    it('should not complain if the context is not defined', () => {
+        assert.strictEqual(themeListener.initial({}), null);
+    });
+
+    it('should be able to subscribe to the event stream', done => {
+        const broadcast = createBroadcast();
+        const initialState = {};
+        const secondState = {};
+        broadcast.setState(initialState);
+
+        themeListener.subscribe(
+            {
+                [CHANNEL]: broadcast,
+            },
+            state => {
+                assert.strictEqual(state, secondState);
+                done();
+            },
+        );
+
+        broadcast.setState(secondState);
+    });
+});