@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/src/styles/transitions.js

@@ -1,98 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-restricted-globals */
-
-import warning from 'warning';
-
-// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
-// to learn the context in which each easing should be used.
-export const easing = {
-    // This is the most common easing curve.
-    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    // Objects enter the screen at full velocity from off-screen and
-    // slowly decelerate to a resting point.
-    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
-    // Objects leave the screen at full velocity. They do not decelerate when off-screen.
-    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
-    // The sharp curve is used by objects that may return to the screen at any time.
-    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
-};
-
-// Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
-// to learn when use what timing
-export const duration = {
-    shortest: 150,
-    shorter: 200,
-    short: 250,
-    // most basic recommended timing
-    standard: 300,
-    // this is to be used in complex animations
-    complex: 375,
-    // recommended when something is entering screen
-    enteringScreen: 225,
-    // recommended when something is leaving screen
-    leavingScreen: 195,
-};
-
-export const formatMs = milliseconds => `${Math.round(milliseconds)}ms`;
-export const isString = value => typeof value === 'string';
-export const isNumber = value => !isNaN(parseFloat(value));
-
-/**
- * @param {string|Array} props
- * @param {object} param
- * @param {string} param.prop
- * @param {number} param.duration
- * @param {string} param.easing
- * @param {number} param.delay
- */
-export default {
-    easing,
-    duration,
-    create: (props = ['all'], options = {}) => {
-        const {
-            duration: durationOption = duration.standard,
-            easing: easingOption = easing.easeInOut,
-            delay = 0,
-            ...other
-        } = options;
-
-        warning(
-            isString(props) || Array.isArray(props),
-            'Material-UI: argument "props" must be a string or Array.',
-        );
-        warning(
-            isNumber(durationOption) || isString(durationOption),
-            `Material-UI: argument "duration" must be a number or a string but found ${durationOption}.`,
-        );
-        warning(isString(easingOption), 'Material-UI: argument "easing" must be a string.');
-        warning(
-            isNumber(delay) || isString(delay),
-            'Material-UI: argument "delay" must be a number or a string.',
-        );
-        warning(
-            Object.keys(other).length === 0,
-            `Material-UI: unrecognized argument(s) [${Object.keys(other).join(',')}]`,
-        );
-
-        return (Array.isArray(props) ? props : [props])
-            .map(
-                animatedProp =>
-                    `${animatedProp} ${
-                        typeof durationOption === 'string'
-                            ? durationOption
-                            : formatMs(durationOption)
-                    } ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`,
-            )
-            .join(',');
-    },
-    getAutoHeightDuration(height) {
-        if (!height) {
-            return 0;
-        }
-
-        const constant = height / 36;
-
-        // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
-        return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
-    },
-};

package/src/styles/transitions.test.js

@@ -1,208 +0,0 @@
-import { assert } from 'chai';
-import { stub } from 'sinon';
-import transitions, { easing, duration, formatMs, isString, isNumber } from './transitions';
-
-describe('transitions', () => {
-    let consoleErrorStub;
-
-    beforeEach(() => {
-        consoleErrorStub = stub(console, 'error');
-    });
-
-    afterEach(() => {
-        consoleErrorStub.restore();
-    });
-
-    describe('formatMs() function', () => {
-        it('should round decimal digits and return formatted value', () => {
-            const formattedValue = formatMs(12.125);
-            assert.strictEqual(formattedValue, '12ms');
-        });
-    });
-
-    describe('isString() function', () => {
-        it('should return false when passed undefined', () => {
-            const value = isString();
-            assert.strictEqual(value, false);
-        });
-
-        it('should return false when not passed a string', () => {
-            let value = isString(1);
-            assert.strictEqual(value, false);
-            value = isString({});
-            assert.strictEqual(value, false);
-            value = isString([]);
-            assert.strictEqual(value, false);
-        });
-
-        it('should return true when passed a string', () => {
-            let value = isString('');
-            assert.strictEqual(value, true);
-            value = isString('test');
-            assert.strictEqual(value, true);
-        });
-    });
-
-    describe('isNumber() function', () => {
-        it('should return false when passed undefined', () => {
-            const value = isNumber();
-            assert.strictEqual(value, false);
-        });
-
-        it('should return false when not passed a number', () => {
-            let value = isNumber('');
-            assert.strictEqual(value, false);
-            value = isNumber('test');
-            assert.strictEqual(value, false);
-            value = isNumber({});
-            assert.strictEqual(value, false);
-            value = isNumber([]);
-            assert.strictEqual(value, false);
-        });
-
-        it('should return true when passed a number', () => {
-            let value = isNumber(1);
-            assert.strictEqual(value, true);
-            value = isNumber(1.5);
-            assert.strictEqual(value, true);
-        });
-    });
-
-    describe('create() function', () => {
-        it('should create default transition without arguments', () => {
-            const transition = transitions.create();
-            assert.strictEqual(transition, `all ${duration.standard}ms ${easing.easeInOut} 0ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should take string props as a first argument', () => {
-            const transition = transitions.create('color');
-            assert.strictEqual(transition, `color ${duration.standard}ms ${easing.easeInOut} 0ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should also take array of props as first argument', () => {
-            const options = { delay: 20 };
-            const multiple = transitions.create(['color', 'size'], options);
-            const single1 = transitions.create('color', options);
-            const single2 = transitions.create('size', options);
-            const expected = `${single1},${single2}`;
-            assert.strictEqual(multiple, expected);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should warn when first argument is of bad type', () => {
-            // $FlowIgnore
-            transitions.create(5554);
-            // $FlowIgnore
-            transitions.create({});
-            assert.strictEqual(consoleErrorStub.callCount, 2, 'Wrong number of calls of warning()');
-        });
-
-        it('should optionally accept number "duration" option in second argument', () => {
-            const transition = transitions.create('font', { duration: 500 });
-            assert.strictEqual(transition, `font 500ms ${easing.easeInOut} 0ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should optionally accept string "duration" option in second argument', () => {
-            const transition = transitions.create('font', { duration: '500ms' });
-            assert.strictEqual(transition, `font 500ms ${easing.easeInOut} 0ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should round decimal digits of "duration" prop to whole numbers', () => {
-            const transition = transitions.create('font', { duration: 12.125 });
-            assert.strictEqual(transition, `font 12ms ${easing.easeInOut} 0ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should warn when bad "duration" option type', () => {
-            // $FlowIgnore
-            transitions.create('font', { duration: null });
-            // $FlowIgnore
-            transitions.create('font', { duration: {} });
-            assert.strictEqual(consoleErrorStub.callCount, 2, 'Wrong number of calls of warning()');
-        });
-
-        it('should optionally accept string "easing" option in second argument', () => {
-            const transition = transitions.create('transform', { easing: easing.sharp });
-            assert.strictEqual(transition, `transform ${duration.standard}ms ${easing.sharp} 0ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should warn when bad "easing" option type', () => {
-            // $FlowIgnore
-            transitions.create('transform', { easing: 123 });
-            // $FlowIgnore
-            transitions.create('transform', { easing: {} });
-            assert.strictEqual(consoleErrorStub.callCount, 2, 'Wrong number of calls of warning()');
-        });
-
-        it('should optionally accept number "delay" option in second argument', () => {
-            const transition = transitions.create('size', { delay: 150 });
-            assert.strictEqual(transition, `size ${duration.standard}ms ${easing.easeInOut} 150ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should optionally accept string "delay" option in second argument', () => {
-            const transition = transitions.create('size', { delay: '150ms' });
-            assert.strictEqual(transition, `size ${duration.standard}ms ${easing.easeInOut} 150ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should round decimal digits of "delay" prop to whole numbers', () => {
-            const transition = transitions.create('size', { delay: 1.547 });
-            assert.strictEqual(transition, `size ${duration.standard}ms ${easing.easeInOut} 2ms`);
-            assert.strictEqual(consoleErrorStub.callCount, 0, 'Wrong number of calls of warning()');
-        });
-
-        it('should warn when bad "delay" option type', () => {
-            // $FlowIgnore
-            transitions.create('size', { delay: null });
-            // $FlowIgnore
-            transitions.create('size', { delay: {} });
-            assert.strictEqual(consoleErrorStub.callCount, 2, 'Wrong number of calls of warning()');
-        });
-
-        it('should warn when passed unrecognized option', () => {
-            transitions.create('size', { fffds: 'value' });
-            assert.strictEqual(consoleErrorStub.callCount, 1, 'Wrong number of calls of warning()');
-        });
-
-        it('should return zero when not passed arguments', () => {
-            const zeroHeightDuration = transitions.getAutoHeightDuration();
-            assert.strictEqual(zeroHeightDuration, 0);
-        });
-
-        it('should return zero when passed undefined', () => {
-            const zeroHeightDuration = transitions.getAutoHeightDuration(undefined);
-            assert.strictEqual(zeroHeightDuration, 0);
-        });
-
-        it('should return zero when passed null', () => {
-            const zeroHeightDuration = transitions.getAutoHeightDuration(null);
-            assert.strictEqual(zeroHeightDuration, 0);
-        });
-
-        it('should return NaN when passed a negative number', () => {
-            const zeroHeightDurationNegativeOne = transitions.getAutoHeightDuration(-1);
-            assert.strictEqual(Number.isNaN(zeroHeightDurationNegativeOne), true);
-            const zeroHeightDurationSmallNegative = transitions.getAutoHeightDuration(-0.000001);
-            assert.strictEqual(Number.isNaN(zeroHeightDurationSmallNegative), true);
-            const zeroHeightDurationBigNegative = transitions.getAutoHeightDuration(-100000);
-            assert.strictEqual(Number.isNaN(zeroHeightDurationBigNegative), true);
-        });
-
-        it('should return values for pre-calculated positive examples', () => {
-            let zeroHeightDuration = transitions.getAutoHeightDuration(14);
-            assert.strictEqual(zeroHeightDuration, 159);
-            zeroHeightDuration = transitions.getAutoHeightDuration(100);
-            assert.strictEqual(zeroHeightDuration, 239);
-            zeroHeightDuration = transitions.getAutoHeightDuration(0.0001);
-            assert.strictEqual(zeroHeightDuration, 46);
-            zeroHeightDuration = transitions.getAutoHeightDuration(100000);
-            assert.strictEqual(zeroHeightDuration, 6685);
-        });
-    });
-});

package/src/styles/withStyles.js

@@ -1,11 +0,0 @@
-import { withStyles } 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 (styles, options) =>
-    withStyles(styles, { defaultTheme: hmuiTheme, ...options });

package/src/styles/zIndex.js

@@ -1,12 +0,0 @@
-// We need to centralize the zIndex definitions as they work
-// like global values in the browser.
-const zIndex = {
-    mobileStepper: 1000,
-    appBar: 1100,
-    drawer: 1200,
-    modal: 1300,
-    snackbar: 1400,
-    tooltip: 1500,
-};
-
-export default zIndex;

package/src/test-utils/createMount.js

@@ -1,28 +0,0 @@
-import { unmountComponentAtNode } from 'react-dom';
-import { mount as enzymeMount } from 'enzyme';
-
-// Generate an enhanced mount function.
-export default function createMount(options1 = {}) {
-    const { mount = enzymeMount, ...other1 } = options1;
-
-    const attachTo = window.document.createElement('div');
-    attachTo.className = 'app';
-    attachTo.setAttribute('id', 'app');
-    window.document.body.insertBefore(attachTo, window.document.body.firstChild);
-
-    const mountWithContext = function mountWithContext(node, options2 = {}) {
-        return mount(node, {
-            attachTo,
-            ...other1,
-            ...options2,
-        });
-    };
-
-    mountWithContext.attachTo = attachTo;
-    mountWithContext.cleanUp = () => {
-        unmountComponentAtNode(attachTo);
-        attachTo.parentNode.removeChild(attachTo);
-    };
-
-    return mountWithContext;
-}

package/src/test-utils/createRender.js

@@ -1,15 +0,0 @@
-import { render as enzymeRender } from 'enzyme';
-
-// Generate a render to string function.
-export default function createRender(options1 = {}) {
-    const { render = enzymeRender, ...other1 } = options1;
-
-    const renderWithContext = function renderWithContext(node, options2 = {}) {
-        return render(node, {
-            ...other1,
-            ...options2,
-        });
-    };
-
-    return renderWithContext;
-}

package/src/test-utils/createShallow.js

@@ -1,32 +0,0 @@
-import { shallow as enzymeShallow } from 'enzyme';
-import until from './until';
-
-// Generate an enhanced shallow function.
-export default function createShallow(options1 = {}) {
-    const { shallow = enzymeShallow, dive = false, untilSelector = false, ...other1 } = options1;
-
-    const shallowWithContext = function shallowWithContext(node, options2 = {}) {
-        const options = {
-            ...other1,
-            ...options2,
-            context: {
-                ...other1.context,
-                ...options2.context,
-            },
-        };
-
-        const wrapper = shallow(node, options);
-
-        if (dive) {
-            return wrapper.dive();
-        }
-
-        if (untilSelector) {
-            return until.call(wrapper, untilSelector, options);
-        }
-
-        return wrapper;
-    };
-
-    return shallowWithContext;
-}

package/src/test-utils/getClasses.js

@@ -1,4 +0,0 @@
-import { getClasses } from '@material-ui/core/test-utils';
-
-// Helper function to extract the classes from a styleSheet.
-export default getClasses;

package/src/test-utils/index.js

@@ -1,5 +0,0 @@
-export { default as createShallow } from './createShallow';
-export { default as createMount } from './createMount';
-export { default as createRender } from './createRender';
-export { default as getClasses } from './getClasses';
-export { default as unwrap } from './unwrap';

package/src/test-utils/until.js

@@ -1,28 +0,0 @@
-function shallowRecursively(wrapper, selector, { context, ...other }) {
-    if (wrapper.isEmptyRender() || typeof wrapper.getElement().type === 'string') {
-        return wrapper;
-    }
-
-    let newContext = context;
-
-    const instance = wrapper.root().instance();
-    // The instance can be null with a stateless functional component and react >= 16.
-    if (instance && instance.getChildContext) {
-        newContext = {
-            ...context,
-            ...instance.getChildContext(),
-        };
-    }
-
-    const nextWrapper = wrapper.shallow({ context: newContext, ...other });
-
-    if (selector && wrapper.is(selector)) {
-        return nextWrapper;
-    }
-
-    return shallowRecursively(nextWrapper, selector, { context: newContext });
-}
-
-export default function until(selector, options = {}) {
-    return this.single('until', () => shallowRecursively(this, selector, options));
-}

package/src/test-utils/until.test.js

@@ -1,117 +0,0 @@
-import assert from 'assert';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { shallow } from 'enzyme';
-import until from './until';
-
-const Div = () => <div />;
-const hoc = Component => () => <Component />;
-
-describe('until', () => {
-    it('shallow renders the current wrapper one level deep', () => {
-        const EnhancedDiv = hoc(Div);
-        const wrapper = until.call(shallow(<EnhancedDiv />), 'Div');
-        assert.strictEqual(wrapper.contains(<div />), true);
-    });
-
-    it('shallow renders the current wrapper several levels deep', () => {
-        const EnhancedDiv = hoc(hoc(hoc(Div)));
-        const wrapper = until.call(shallow(<EnhancedDiv />), 'Div');
-        assert.strictEqual(wrapper.contains(<div />), true);
-    });
-
-    it('stops shallow rendering when the wrapper is empty', () => {
-        const nullHoc = () => () => null;
-        const EnhancedDiv = nullHoc();
-        const wrapper = until.call(shallow(<EnhancedDiv />), 'Div');
-        assert.strictEqual(wrapper.html(), null);
-    });
-
-    it('shallow renders as much as possible when no selector is provided', () => {
-        const EnhancedDiv = hoc(hoc(Div));
-        const wrapper = until.call(shallow(<EnhancedDiv />));
-        assert.strictEqual(wrapper.contains(<div />), true);
-    });
-
-    it('shallow renders the current wrapper even if the selector never matches', () => {
-        const EnhancedDiv = hoc(Div);
-        const wrapper = until.call(shallow(<EnhancedDiv />), 'NotDiv');
-        assert.strictEqual(wrapper.contains(<div />), true);
-    });
-
-    it('stops shallow rendering when it encounters a DOM element', () => {
-        const wrapper = until.call(
-            shallow(
-                <div>
-                    <Div />
-                </div>,
-            ),
-            'Div',
-        );
-        assert.strictEqual(
-            wrapper.contains(
-                <div>
-                    <Div />
-                </div>,
-            ),
-            true,
-        );
-    });
-
-    it('throws when assert.strictEqual called on an empty wrapper', () => {
-        assert.throws(
-            () => {
-                until.call(shallow(<Div />).find('Foo'), 'div');
-            },
-            Error,
-            'Method “until” is only meant to be run on a single node. 0 found instead.',
-        );
-    });
-
-    it('shallow renders non-root wrappers', () => {
-        const Container = () => (
-            <div>
-                <Div />
-            </div>
-        );
-        const wrapper = until.call(shallow(<Container />).find(Div));
-        assert.strictEqual(wrapper.contains(<div />), true);
-    });
-
-    // eslint-disable-next-line react/prefer-stateless-function
-    class Foo extends React.Component {
-        render() {
-            return <Div />;
-        }
-    }
-
-    Foo.contextTypes = {
-        quux: PropTypes.bool.isRequired,
-    };
-
-    it('context propagation passes down context from the root component', () => {
-        const EnhancedFoo = hoc(Foo);
-        const options = { context: { quux: true } };
-        const wrapper = until.call(shallow(<EnhancedFoo />, options), 'Foo', options);
-        assert.strictEqual(wrapper.context('quux'), true);
-        assert.strictEqual(wrapper.contains(<Div />), true);
-    });
-
-    // eslint-disable-next-line react/no-multi-comp
-    class Bar extends React.Component {
-        static childContextTypes = { quux: PropTypes.bool };
-
-        getChildContext = () => ({ quux: true });
-
-        render() {
-            return <Foo />;
-        }
-    }
-
-    it('context propagation passes down context from an intermediary component', () => {
-        const EnhancedBar = hoc(Bar);
-        const wrapper = until.call(shallow(<EnhancedBar />), 'Foo');
-        assert.strictEqual(wrapper.context('quux'), true);
-        assert.strictEqual(wrapper.contains(<Div />), true);
-    });
-});

package/src/test-utils/unwrap.js

@@ -1,3 +0,0 @@
-export default function unwrap(component) {
-    return component.Naked ? unwrap(component.Naked) : component;
-}

package/src/theme/palette.js

@@ -1,95 +0,0 @@
-const { red, grey } = require('@material-ui/core/colors');
-const common = require('@material-ui/core/colors/common');
-
-export const palette = {
-    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',
-    },
-    // 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',
-    },
-    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],
-    },
-};