@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/src/styles/createPalette.js

@@ -1,273 +0,0 @@
-import warning from 'warning';
-import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
-import grey from '@material-ui/core/colors/grey';
-import red from '@material-ui/core/colors/red';
-import common from '@material-ui/core/colors/common';
-import { getContrastRatio, darken, lighten } from './colorManipulator';
-
-export const light = {
-    global: {
-        background1: '#FFFFFF',
-        background2: '#F8F9FB',
-        background3: '#FFFFFF',
-    },
-    local: {
-        background1: '#F8F9FB',
-        background2: '#F5F5F5',
-        background3: '#FFFFFF',
-    },
-    // The colors used to style the text.
-    text: {
-        // The most important text.
-        primary: '#20272B',
-        // Secondary text.
-        secondary: 'rgba(0, 0, 0, 0.54)',
-        // Disabled text have even lower visual prominence.
-        disabled: '#999999',
-        // Text hints.
-        hint: 'rgba(0, 0, 0, 0.38)',
-    },
-    // The color used to divide different elements.
-    divider: '#D9D9DB',
-    // The background colors used to style the surfaces.
-    // Consistency between these values is important.
-    background: {
-        paper: common.white,
-        default: grey[50],
-    },
-    // The colors used to style the action elements.
-    action: {
-        // The color of an active action like an icon button.
-        active: 'rgba(0, 0, 0, 0.54)',
-        // The color of an hovered action.
-        hover: 'rgba(0, 0, 0, 0.08)',
-        hoverOpacity: 0.08,
-        // The color of a selected action.
-        selected: '#F8F9FB',
-        // The color of a disabled action.
-        disabled: 'rgba(0, 0, 0, 0.24)',
-        // The background color of a disabled action.
-        disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    },
-    input: {
-        bottomLine: '#E0E0E0',
-        helperText: 'rgba(0, 0, 0, 0.54)',
-        labelText: 'rgba(0, 0, 0, 0.54)',
-        inputText: 'rgba(0, 0, 0, 0.87)',
-        disabled: '#FAFAFA',
-    },
-};
-
-export const dark = {
-    global: {
-        background1: '#303030',
-        background2: '#212121',
-        background3: '#303030',
-    },
-    local: {
-        background1: '#3E3E3E',
-        background2: '#303030',
-        background3: '#303030',
-    },
-    text: {
-        primary: common.white,
-        secondary: 'rgba(255, 255, 255, 0.7)',
-        disabled: 'rgba(255, 255, 255, 0.5)',
-        hint: 'rgba(255, 255, 255, 0.5)',
-        icon: 'rgba(255, 255, 255, 0.5)',
-    },
-    divider: 'rgba(255, 255, 255, 0.12)',
-    background: {
-        paper: grey[800],
-        default: '#303030',
-    },
-    action: {
-        active: common.white,
-        hover: 'rgba(255, 255, 255, 0.1)',
-        hoverOpacity: 0.1,
-        selected: 'rgba(255, 255, 255, 0.2)',
-        disabled: '#999999',
-        disabledBackground: 'rgba(255, 255, 255, 0.12)',
-    },
-    input: {
-        bottomLine: 'rgba(255, 255, 255, 0.7)',
-        helperText: 'rgba(255, 255, 255, 0.7)',
-        labelText: 'rgba(255, 255, 255, 0.7)',
-        inputText: 'rgba(255, 255, 255, 1)',
-        disabled: 'rgba(255, 255, 255, 0.5)',
-    },
-};
-
-function addLightOrDark(intent, direction, shade, tonalOffset) {
-    if (!intent[direction]) {
-        if (intent.hasOwnProperty(shade)) {
-            intent[direction] = intent[shade];
-        } else if (direction === 'light') {
-            intent.light = lighten(intent.main, tonalOffset);
-        } else if (direction === 'dark') {
-            intent.dark = darken(intent.main, tonalOffset * 1.5);
-        }
-    }
-}
-
-export default function createPalette(palette) {
-    const {
-        primary = {
-            light: '#5bc8ef',
-            main: '#00ade9',
-            dark: '#007ca9',
-            contrastText: '#FFFFFF',
-        },
-        secondary = {
-            light: '#ffd94f',
-            main: '#ffcf21',
-            dark: '#E9BE30',
-            contrastText: '#FFFFFF',
-        },
-        positive = {
-            light: '#66CF66',
-            main: '#00AF00',
-            dark: '#008300',
-            contrastText: '#FFFFFF',
-        },
-        negative = {
-            ultraLight: '#EA9494',
-            light: '#E66666',
-            main: '#D50000',
-            dark: '#A00000',
-            contrastText: '#FFFFFF',
-        },
-        middle = {
-            light: '#F4A647',
-            main: '#F99408',
-            dark: '#F78700',
-            contrastText: '#FFFFFF',
-        },
-        neutral = {
-            ultraLight: '#8B8B8B',
-            light: '#838383',
-            main: '#737373',
-            dark: '#20272B',
-            contrastText: '#FFFFFF',
-        },
-        error = {
-            light: red[300],
-            main: red[500],
-            dark: red[700],
-        },
-        lookup = {
-            light: '#FFFF8D',
-            main: '#EDED14',
-        },
-        type = 'light',
-        contrastThreshold = 3, // max light contrast
-        tonalOffset = 0.2,
-        context = 'local',
-        ...other
-    } = palette;
-
-    function getContrastText(background) {
-        // Use the same logic as
-        // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
-        // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
-        const contrastText =
-            getContrastRatio(background, dark.text.primary) >= contrastThreshold
-                ? dark.text.primary
-                : light.text.primary;
-
-        if (process.env.NODE_ENV !== 'production') {
-            const contrast = getContrastRatio(background, contrastText);
-            warning(
-                contrast >= 3,
-                [
-                    `Material-UI: the contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`,
-                    'falls below the WACG recommended absolute minimum contrast ratio of 3:1.',
-                    'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast',
-                ].join('\n'),
-            );
-        }
-
-        return contrastText;
-    }
-
-    function augmentColor(color, mainShade = 500, lightShade = 300, darkShade = 700) {
-        if (!color.main && color[mainShade]) {
-            color.main = color[mainShade];
-        }
-
-        if (process.env.NODE_ENV !== 'production' && !color.main) {
-            throw new Error(
-                [
-                    'Material-UI: the color provided to augmentColor(color) is invalid.',
-                    `The color object needs to have a \`main\` property or a \`${mainShade}\` property.`,
-                ].join('\n'),
-            );
-        }
-
-        addLightOrDark(color, 'light', lightShade, tonalOffset);
-        addLightOrDark(color, 'dark', darkShade, tonalOffset);
-        if (!color.contrastText) {
-            color.contrastText = getContrastText(color.main);
-        }
-    }
-
-    augmentColor(primary);
-    augmentColor(secondary, 'A400', 'A200', 'A700');
-    augmentColor(error);
-
-    const types = { dark, light };
-    warning(types[type], `Material-UI: the palette type \`${type}\` is not supported.`);
-
-    const contexts = {
-        local: types[type] ? types[type].local : {},
-        global: types[type] ? types[type].global : {},
-    };
-    warning(contexts[context], `Material-UI: the context \`${context}\` is not supported.`);
-
-    const paletteOutput = deepmerge(
-        {
-            // A collection of common colors.
-            common,
-            // The palette type, can be light or dark.
-            type,
-            // The colors used to represent primary interface elements for a user.
-            primary,
-            // The colors used to represent secondary interface elements for a user.
-            secondary,
-            // The colors used to represent positive interface elements for a user.
-            positive,
-            // The colors used to represent negative interface elements for a user.
-            negative,
-            // The colors used to represent middle interface elements for a user.
-            middle,
-            // The colors used to represent neutral interface elements for a user.
-            neutral,
-            // The colors used to represent interface elements that the user should be made aware of.
-            error,
-            // The colors used to represent form elements that have lookup state.
-            lookup,
-            // The grey colors.
-            grey,
-            // Used by `getContrastText()` to maximize the contrast between the background and
-            // the text.
-            contrastThreshold,
-            // Take a background color and return the color of the text to maximize the contrast.
-            getContrastText,
-            // Generate a rich color object.
-            augmentColor,
-            // Used by the functions below to shift a color's luminance by approximately
-            // two indexes within its tonal palette.
-            // E.g., shift from Red 500 to Red 300 or Red 700.
-            tonalOffset,
-            // The light and dark type object.
-            ...types[type],
-            ...contexts[context],
-        },
-        other,
-        {
-            clone: false, // No need to clone deep
-        },
-    );
-
-    return paletteOutput;
-}

package/src/styles/createPalette.test.js

@@ -1,375 +0,0 @@
-import { assert } from 'chai';
-import consoleErrorMock from 'test/utils/consoleErrorMock';
-import { pink, deepOrange, green, red } from '@material-ui/core/colors';
-import { lighten, darken } from './colorManipulator';
-import createPalette, { dark, light } from './createPalette';
-
-describe('createPalette()', () => {
-    before(() => {
-        consoleErrorMock.spy();
-    });
-
-    after(() => {
-        consoleErrorMock.reset();
-    });
-
-    it('should create a material design palette according to spec', () => {
-        const palette = createPalette({});
-        assert.strictEqual(
-            palette.primary.main,
-            '#00ade9',
-            'should use blue hipay as the default primary main color',
-        );
-        assert.strictEqual(
-            palette.primary.light,
-            '#5bc8ef',
-            'should use light blue hipay as the default primary light color',
-        );
-        assert.strictEqual(
-            palette.primary.dark,
-            '#007ca9',
-            'should use dark blue hipay as the default primary dark color',
-        );
-        assert.strictEqual(
-            palette.primary.contrastText,
-            '#FFFFFF',
-            'should use white as the default primary contrastText color',
-        );
-        assert.strictEqual(
-            palette.secondary.main,
-            '#ffcf21',
-            'should use yellow hipay as the default secondary main color',
-        );
-        assert.strictEqual(
-            palette.secondary.light,
-            '#ffd94f',
-            'should use light yellow hipay as the default secondary light color',
-        );
-        assert.strictEqual(
-            palette.secondary.dark,
-            '#E9BE30',
-            'should use dark yellow hipay as the default secondary dark color',
-        );
-        assert.strictEqual(
-            palette.secondary.contrastText,
-            '#FFFFFF',
-            'should use white as the default secondary contrastText color',
-        );
-        assert.strictEqual(
-            palette.error.main,
-            red[500],
-            'should use red[500] as the default error main color',
-        );
-        assert.strictEqual(
-            palette.error.light,
-            red[300],
-            'should use red[300] as the default error light color',
-        );
-        assert.strictEqual(
-            palette.error.dark,
-            red[700],
-            'should use red[700] as the default error dark color',
-        );
-        assert.strictEqual(
-            palette.text,
-            light.text,
-            'should use light theme text for a light theme by default',
-        );
-    });
-
-    it('should create a palette with Material colors', () => {
-        const palette = createPalette({
-            primary: deepOrange,
-            secondary: green,
-            error: pink,
-        });
-        assert.strictEqual(
-            palette.primary.main,
-            deepOrange[500],
-            'should use deepOrange[500] as the primary main color',
-        );
-        assert.strictEqual(
-            palette.primary.light,
-            deepOrange[300],
-            'should use deepOrange[300] as the primary light color',
-        );
-        assert.strictEqual(
-            palette.primary.dark,
-            deepOrange[700],
-            'should use deepOrange[700] as the primary dark color',
-        );
-        assert.strictEqual(
-            palette.secondary.main,
-            green.A400,
-            'should use green.A400 as the secondary main color',
-        );
-        assert.strictEqual(
-            palette.secondary.light,
-            green.A200,
-            'should use green.A200 as the secondary light color',
-        );
-        assert.strictEqual(
-            palette.secondary.dark,
-            green.A700,
-            'should use green.A700 as the secondary dark color',
-        );
-        assert.strictEqual(
-            palette.error.main,
-            pink[500],
-            'should use pink[500] as the error main color',
-        );
-        assert.strictEqual(
-            palette.error.light,
-            pink[300],
-            'should use pink[300] as the error light color',
-        );
-        assert.strictEqual(
-            palette.error.dark,
-            pink[700],
-            'should use pink[700] as the error dark color',
-        );
-        assert.strictEqual(palette.text, light.text, 'should use light theme text');
-    });
-
-    it('should create a palette with custom colors', () => {
-        const palette = createPalette({
-            primary: {
-                main: deepOrange[500],
-                light: deepOrange[300],
-                dark: deepOrange[700],
-                contrastText: '#ffffff',
-            },
-            secondary: {
-                main: green.A400,
-                light: green.A200,
-                dark: green.A700,
-                contrastText: '#000000',
-            },
-            error: {
-                main: pink[500],
-                light: pink[300],
-                dark: pink[700],
-                contrastText: '#00ff00',
-            },
-        });
-        assert.strictEqual(
-            palette.primary.main,
-            deepOrange[500],
-            'should use deepOrange[500] as the primary main color',
-        );
-        assert.strictEqual(
-            palette.primary.light,
-            deepOrange[300],
-            'should use deepOrange[300] as the primary light color',
-        );
-        assert.strictEqual(
-            palette.primary.dark,
-            deepOrange[700],
-            'should use deepOrange[700] as the primary dark color',
-        );
-        assert.strictEqual(
-            palette.primary.contrastText,
-            '#ffffff',
-            'should use #ffffff as the secondary contrastText color',
-        );
-        assert.strictEqual(
-            palette.secondary.main,
-            green.A400,
-            'should use green.A400 as the secondary main color',
-        );
-        assert.strictEqual(
-            palette.secondary.light,
-            green.A200,
-            'should use green.A200 as the secondary light color',
-        );
-        assert.strictEqual(
-            palette.secondary.dark,
-            green.A700,
-            'should use green.A700 as the secondary dark color',
-        );
-        assert.strictEqual(
-            palette.secondary.contrastText,
-            '#000000',
-            'should use #000000 as the secondary contrastText color',
-        );
-        assert.strictEqual(
-            palette.error.main,
-            pink[500],
-            'should use pink[500] as the error main color',
-        );
-        assert.strictEqual(
-            palette.error.light,
-            pink[300],
-            'should use pink[300] as the error light color',
-        );
-        assert.strictEqual(
-            palette.error.dark,
-            pink[700],
-            'should use pink[700] as the error dark color',
-        );
-        assert.strictEqual(
-            palette.error.contrastText,
-            '#00ff00',
-            'should use #00ff00 as the error contrastText color',
-        );
-        assert.strictEqual(palette.text, light.text, 'should use light theme text');
-    });
-
-    it('should calculate light and dark colors if not provided', () => {
-        const palette = createPalette({
-            primary: { main: deepOrange[500] },
-            secondary: { main: green.A400 },
-            error: { main: pink[500] },
-        });
-        assert.strictEqual(
-            palette.primary.main,
-            deepOrange[500],
-            'should use deepOrange[500] as the primary main color',
-        );
-        assert.strictEqual(
-            palette.primary.light,
-            lighten(deepOrange[500], 0.2),
-            'should use lighten(deepOrange[500], 0.2) as the primary light color',
-        );
-        assert.strictEqual(
-            palette.primary.dark,
-            darken(deepOrange[500], 0.3),
-            'should use darken(deepOrange[500], 0.3) as the primary dark color',
-        );
-        assert.strictEqual(
-            palette.secondary.main,
-            green.A400,
-            'should use green.A400 as the secondary main color',
-        );
-        assert.strictEqual(
-            palette.secondary.light,
-            lighten(green.A400, 0.2),
-            'should use lighten(green.A400, 0.2) as the secondary light color',
-        );
-        assert.strictEqual(
-            palette.secondary.dark,
-            darken(green.A400, 0.3),
-            'should use darken(green.A400, 0.3) as the secondary dark color',
-        );
-        assert.strictEqual(
-            palette.error.main,
-            pink[500],
-            'should use pink[500] as the error main color',
-        );
-        assert.strictEqual(
-            palette.error.light,
-            lighten(pink[500], 0.2),
-            'should use lighten(pink[500], 0.2) as the error light color',
-        );
-        assert.strictEqual(
-            palette.error.dark,
-            darken(pink[500], 0.3),
-            'should use darken(pink[500], 0.3) as the error dark color',
-        );
-    });
-
-    it('should calculate light and dark colors using the provided tonalOffset', () => {
-        const palette = createPalette({
-            primary: { main: deepOrange[500] },
-            secondary: { main: green.A400 },
-            error: { main: red[500] },
-            tonalOffset: 0.1,
-        });
-        // primary
-        assert.strictEqual(
-            palette.primary.main,
-            deepOrange[500],
-            'should use deepOrange[500] as the primary main color',
-        );
-        assert.strictEqual(
-            palette.primary.light,
-            lighten(deepOrange[500], 0.1),
-            'should use lighten(deepOrange[500], 0.1) as the primary light color',
-        );
-        assert.strictEqual(
-            palette.primary.dark,
-            darken(deepOrange[500], 0.15),
-            'should use darken(deepOrange[500], 0.1) as the primary dark color',
-        );
-        // secondary
-        assert.strictEqual(
-            palette.secondary.main,
-            green.A400,
-            'should use green.A400 as the secondary main color',
-        );
-        assert.strictEqual(
-            palette.secondary.light,
-            lighten(green.A400, 0.1),
-            'should use lighten(green.A400, 0.1) as the secondary light color',
-        );
-        assert.strictEqual(
-            palette.secondary.dark,
-            darken(green.A400, 0.15),
-            'should use darken(green.A400, 0.1) as the secondary dark color',
-        );
-        // error
-        assert.strictEqual(
-            palette.error.main,
-            red[500],
-            'should use red[500] as the error main color',
-        );
-        assert.strictEqual(
-            palette.error.light,
-            lighten(red[500], 0.1),
-            'should use lighten(red[500], 0.1) as the error light color',
-        );
-        assert.strictEqual(
-            palette.error.dark,
-            darken(red[500], 0.15),
-            'should use darken(red[500], 0.1) as the error dark color',
-        );
-    });
-
-    it('should calculate contrastText using the provided contrastThreshold', () => {
-        const palette = createPalette({ contrastThreshold: 7 });
-        assert.strictEqual(
-            palette.primary.contrastText,
-            '#FFFFFF',
-            'should use white as the default primary contrastText color',
-        );
-        assert.strictEqual(
-            palette.secondary.contrastText,
-            '#FFFFFF',
-            'should use white as the default secondary contrastText color',
-        );
-    });
-
-    it('should create a dark palette', () => {
-        const palette = createPalette({ type: 'dark' });
-        assert.strictEqual(
-            palette.primary.main,
-            '#00ade9',
-            'should use indigo as the default primary color',
-        );
-        assert.strictEqual(
-            palette.secondary.main,
-            '#ffcf21',
-            'should use pink as the default secondary color',
-        );
-        assert.strictEqual(palette.text, dark.text, 'should use dark theme text');
-        assert.strictEqual(consoleErrorMock.callCount(), 0);
-    });
-
-    it('should throw an exception when an invalid type is specified', () => {
-        createPalette({ type: 'foo' });
-        assert.strictEqual(consoleErrorMock.callCount(), 1);
-        assert.match(
-            consoleErrorMock.args()[0][0],
-            /Material-UI: the palette type `foo` is not supported/,
-        );
-    });
-
-    describe('augmentColor', () => {
-        it('should throw when the input is invalid', () => {
-            const palette = createPalette({});
-            assert.throws(() => {
-                palette.augmentColor({});
-            }, /The color object needs to have a/);
-        });
-    });
-});

package/src/styles/createStyles.js

@@ -1,3 +0,0 @@
-export default function createStyles(styles) {
-    return styles;
-}

package/src/styles/createStyles.test.js

@@ -1,9 +0,0 @@
-import { assert } from 'chai';
-import { createStyles } from '.';
-
-describe('createStyles', () => {
-    it('is the identity function', () => {
-        const styles = {};
-        assert.strictEqual(createStyles(styles), styles);
-    });
-});