@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/src/styles/createTypography.js

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-import makeStyles from '@mui/styles/makeStyles';
-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

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

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

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

package/src/styles/spacing.js

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

package/src/styles/themeListener.js

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

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