@hipay/hipay-material-ui 1.0.0-beta.1

package/styles/createGenerateClassName.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createGenerateClassName;
+
+var _warning = require('warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var generatorCounter = 0;
+
+// Returns a function which generates unique class names based on counters.
+// When new generator function is created, rule counter is reset.
+// We need to reset the rule counter for SSR for each request.
+//
+// It's inspired by
+// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
+function createGenerateClassName() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$dangerouslyU = options.dangerouslyUseGlobalCSS,
+      dangerouslyUseGlobalCSS = _options$dangerouslyU === undefined ? false : _options$dangerouslyU,
+      _options$productionPr = options.productionPrefix,
+      productionPrefix = _options$productionPr === undefined ? 'jss' : _options$productionPr;
+
+  var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
+  var ruleCounter = 0;
+
+  // - HMR can lead to many class name generators being instantiated,
+  // so the warning is only triggered in production.
+  // - We expect a class name generator to be instantiated per new request on the server,
+  // so the warning is only triggered client side.
+  // - You can get away with having multiple class name generators
+  // by modifying the `productionPrefix`.
+  if (process.env.NODE_ENV === 'production' && typeof window !== 'undefined' && productionPrefix === 'jss') {
+    generatorCounter += 1;
+
+    if (generatorCounter > 2) {
+      // eslint-disable-next-line no-console
+      console.error(['Material-UI: we have detected more than needed creation of the class name generator.', 'You should only use one class name generator on the client side.', 'If you do otherwise, you take the risk to have conflicting class names in production.'].join('\n'));
+    }
+  }
+
+  return function (rule, styleSheet) {
+    ruleCounter += 1;
+    process.env.NODE_ENV !== "production" ? (0, _warning2.default)(ruleCounter < 1e10, ['Material-UI: you might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join('')) : void 0;
+
+    // Code branch the whole block at the expense of more code.
+    if (dangerouslyUseGlobalCSS) {
+      if (styleSheet && styleSheet.options.classNamePrefix) {
+        var prefix = styleSheet.options.classNamePrefix;
+        // Sanitize the string as will be used to prefix the generated class name.
+        prefix = prefix.replace(escapeRegex, '-');
+
+        if (prefix.match(/^Mui/)) {
+          return prefix + '-' + rule.key;
+        }
+
+        if (process.env.NODE_ENV !== 'production') {
+          return prefix + '-' + rule.key + '-' + ruleCounter;
+        }
+      }
+
+      if (process.env.NODE_ENV === 'production') {
+        return '' + productionPrefix + ruleCounter;
+      }
+
+      return rule.key + '-' + ruleCounter;
+    }
+
+    if (process.env.NODE_ENV === 'production') {
+      return '' + productionPrefix + ruleCounter;
+    }
+
+    if (styleSheet && styleSheet.options.classNamePrefix) {
+      var _prefix = styleSheet.options.classNamePrefix;
+      // Sanitize the string as will be used to prefix the generated class name.
+      _prefix = _prefix.replace(escapeRegex, '-');
+
+      return _prefix + '-' + rule.key + '-' + ruleCounter;
+    }
+
+    return rule.key + '-' + ruleCounter;
+  };
+}

package/styles/createHiMuiTheme.js

@@ -0,0 +1,328 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _deepmerge = require('deepmerge');
+
+var _deepmerge2 = _interopRequireDefault(_deepmerge);
+
+var _styles = require('material-ui/styles');
+
+var _createBreakpoints = require('./createBreakpoints');
+
+var _createBreakpoints2 = _interopRequireDefault(_createBreakpoints);
+
+var _createMixins = require('./createMixins');
+
+var _createMixins2 = _interopRequireDefault(_createMixins);
+
+var _spacing = require('./spacing');
+
+var _spacing2 = _interopRequireDefault(_spacing);
+
+var _colors = require('../colors');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Specify Hipay business colors (to be overriden by white labels)
+ */
+var defaultHipayPalette = {
+    primary: {
+        light: '#5bc8ef',
+        normal: '#00ade9',
+        dark: '#007ca9',
+        contrast: '#ffffff'
+    },
+    secondary: {
+        light: 'rgba(255, 207, 33, 0.08)',
+        normal: '#ffcf21',
+        dark: '#E9BE30',
+        contrast: '#ffffff'
+    }
+}; // < 1kb payload overhead when lodash/merge is > 3kb.
+
+
+var light = {
+    global: {
+        background1: '#FFFFFF',
+        background2: '#F8F9FB',
+        background3: '#FFFFFF'
+    },
+    local: {
+        background1: '#F8F9FB',
+        background2: '#F5F5F5',
+        background3: '#FFFFFF'
+    },
+    chipBackground: '#ECEFF0',
+    hover: '#F5F5F5',
+    selected: '#F8F9FB',
+    placeholder: '#999999',
+    disable: '#E0E0E0',
+    positive: {
+        light: '#66CF66',
+        normal: '#00AF00',
+        dark: '#008300',
+        contrast: '#FFFFFF'
+    },
+    negative: {
+        light: '#E66666',
+        normal: '#D50000',
+        dark: '#A00000',
+        contrast: '#FFFFFF'
+    },
+    middle: {
+        light: '#F4A647',
+        normal: '#F99408',
+        dark: '#F78700',
+        contrast: '#FFFFFF'
+    },
+    neutral: {
+        light: '#838383',
+        normal: '#737373',
+        dark: '#20272B',
+        contrast: '#FFFFFF'
+    },
+    text: {
+        primary: 'rgba(0, 0, 0, 0.87)',
+        secondary: 'rgba(0, 0, 0, 0.54)',
+        disabled: 'rgba(0, 0, 0, 0.26)',
+        hint: 'rgba(0, 0, 0, 0.38)',
+        icon: '#737373',
+        divider: 'rgba(0, 0, 0, 0.12)',
+        lightDivider: 'rgba(0, 0, 0, 0.075)'
+    },
+    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'
+    },
+    line: {
+        stepper: '#E4E7E8'
+    },
+    // from material-ui theme
+    background: {
+        appBar: '#fff',
+        paper: '#fff',
+        default: _colors.grey[50]
+    }
+};
+
+var dark = {
+    global: {
+        background1: '#303030',
+        background2: '#212121',
+        background3: '#303030'
+    },
+    local: {
+        background1: '#3E3E3E',
+        background2: '#303030',
+        background3: '#303030'
+    },
+    chipBackground: '#ECEFF0',
+    hover: '#4A4A4A',
+    selected: '#303030',
+    placeholder: '#999999',
+    disable: '#E0E0E0',
+    positive: {
+        light: '#66CF66',
+        normal: '#00AF00',
+        dark: '#008300',
+        contrast: '#FFFFFF'
+    },
+    negative: {
+        light: '#E66666',
+        normal: '#D50000',
+        dark: '#A00000',
+        contrast: '#FFFFFF'
+    },
+    middle: {
+        light: '#F4A647',
+        normal: '#F99408',
+        dark: '#F78700',
+        contrast: '#FFFFFF'
+    },
+    neutral: {
+        light: '#CBCBCB',
+        normal: '#8B8B8B',
+        dark: '#3E3E3E',
+        contrast: '#FFFFFF'
+    },
+    text: {
+        primary: 'rgba(255, 255, 255, 1)',
+        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)',
+        lightDivider: 'rgba(255, 255, 255, 0.075)'
+    },
+    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)'
+    },
+    line: {
+        stepper: '#E4E7E8'
+    },
+    // from material-ui theme
+    background: {
+        appBar: '#fff',
+        paper: '#fff',
+        default: _colors.grey[50]
+    }
+};
+
+var statusPalette = {
+    101: '#00ADE1',
+    103: '#FFBA01',
+    104: '#FFBA01',
+    105: '#FFBA01',
+    106: '#FFBA01',
+    107: '#FFBA01',
+    108: '#FFBA01',
+    109: '#EF6C01',
+    110: '#D50001',
+    111: '#D50001',
+    112: '#FF8F01',
+    '112b': '#EF6C01',
+    113: '#A20001',
+    114: '#A20001',
+    115: '#A20001',
+    116: '#00AF01',
+    118: '#008301',
+    120: '#008301',
+    125: '#737373',
+    129: '#550000',
+    140: '#FFBA01',
+    141: '#FFBA01',
+    143: '#00AF01',
+    150: '#8BC34A',
+    151: '#A20001',
+    161: '#00AF01',
+    166: '#551A1A',
+    172: '#8BC34A',
+    174: '#8BC34A',
+    175: '#00AF01'
+};
+
+var fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
+
+var typography = {
+    fontFamily: fontFamily,
+    fontSize: 14, // px
+    fontWeightThin: 100,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    fontWeightBlack: 900,
+    h1: {
+        fontSize: 24,
+        fontFamily: fontFamily
+    },
+    h2: {
+        fontSize: 20,
+        fontFamily: fontFamily
+    },
+    h3: {
+        fontSize: 18,
+        fontFamily: fontFamily
+    },
+    h4: {
+        fontSize: 16,
+        fontFamily: fontFamily
+    },
+    h5: {
+        fontSize: 14,
+        fontFamily: fontFamily
+    },
+    body1: {
+        fontSize: 15,
+        fontFamily: fontFamily
+    },
+    body2: {
+        fontSize: 14,
+        fontFamily: fontFamily
+    },
+    body3: {
+        fontSize: 13,
+        fontFamily: fontFamily
+    },
+    body4: {
+        fontSize: 12,
+        fontFamily: fontFamily
+    }
+};
+
+function createHiMuiTheme() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    var shades = { dark: dark, light: light };
+
+    var _options$palette = options.palette,
+        paletteInput = _options$palette === undefined ? {} : _options$palette,
+        other = (0, _objectWithoutProperties3.default)(options, ['palette']);
+    var _paletteInput$type = paletteInput.type,
+        type = _paletteInput$type === undefined ? 'light' : _paletteInput$type,
+        _paletteInput$context = paletteInput.context,
+        context = _paletteInput$context === undefined ? 'local' : _paletteInput$context,
+        other2 = (0, _objectWithoutProperties3.default)(paletteInput, ['type', 'context']);
+
+
+    var overridenPaletteInput = (0, _deepmerge2.default)((0, _extends3.default)({
+        business: defaultHipayPalette,
+        local: shades[type].local,
+        global: shades[type].global,
+        chipBackground: shades[type].chipBackground
+    }, shades[type][context], {
+        hover: shades[type].hover,
+        selected: shades[type].selected,
+        positive: shades[type].positive,
+        negative: shades[type].negative,
+        middle: shades[type].middle,
+        neutral: shades[type].neutral,
+        text: shades[type].text,
+        input: shades[type].input,
+        line: shades[type].line,
+        inputLine: shades[type].inputLine,
+        inputDisabled: shades[type].inputDisabled,
+        tableLine: shades[type].tableLine,
+        background: shades[type].background,
+        status: statusPalette,
+        primary: _colors.blue,
+        secondary: _colors.yellow
+    }), paletteInput);
+
+    var breakpoints = (0, _createBreakpoints2.default)({});
+
+    return (0, _styles.createMuiTheme)((0, _extends3.default)({
+        palette: overridenPaletteInput,
+        typography: typography,
+        mixins: (0, _createMixins2.default)(breakpoints, _spacing2.default, {}),
+        overrides: {
+            MuiMenuItem: {
+                root: (0, _extends3.default)({}, typography.body1, {
+                    height: 20,
+                    padding: 10
+                })
+            }
+        }
+    }, other));
+}
+
+exports.default = createHiMuiTheme;

package/styles/createMixins.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _extends3 = require('babel-runtime/helpers/extends');
+
+var _extends4 = _interopRequireDefault(_extends3);
+
+exports.default = createMixins;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function createMixins(breakpoints, spacing, mixins) {
+  var _toolbar;
+
+  return (0, _extends4.default)({
+    gutters: function gutters() {
+      var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      return (0, _extends4.default)({
+        paddingLeft: spacing.unit * 2,
+        paddingRight: spacing.unit * 2
+      }, styles, (0, _defineProperty3.default)({}, breakpoints.up('sm'), (0, _extends4.default)({
+        paddingLeft: spacing.unit * 3,
+        paddingRight: spacing.unit * 3
+      }, styles[breakpoints.up('sm')])));
+    },
+    toolbar: (_toolbar = {
+      minHeight: 56
+    }, (0, _defineProperty3.default)(_toolbar, breakpoints.up('xs') + ' and (orientation: landscape)', {
+      minHeight: 48
+    }), (0, _defineProperty3.default)(_toolbar, breakpoints.up('sm'), {
+      minHeight: 64
+    }), _toolbar)
+  }, mixins);
+}

package/styles/createMuiTheme.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _deepmerge = require('deepmerge');
+
+var _deepmerge2 = _interopRequireDefault(_deepmerge);
+
+var _warning = require('warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
+var _createTypography = require('./createTypography');
+
+var _createTypography2 = _interopRequireDefault(_createTypography);
+
+var _createBreakpoints = require('./createBreakpoints');
+
+var _createBreakpoints2 = _interopRequireDefault(_createBreakpoints);
+
+var _createPalette = require('./createPalette');
+
+var _createPalette2 = _interopRequireDefault(_createPalette);
+
+var _createMixins = require('./createMixins');
+
+var _createMixins2 = _interopRequireDefault(_createMixins);
+
+var _shadows = require('./shadows');
+
+var _shadows2 = _interopRequireDefault(_shadows);
+
+var _transitions = require('./transitions');
+
+var _transitions2 = _interopRequireDefault(_transitions);
+
+var _zIndex = require('./zIndex');
+
+var _zIndex2 = _interopRequireDefault(_zIndex);
+
+var _spacing = require('./spacing');
+
+var _spacing2 = _interopRequireDefault(_spacing);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function createMuiTheme() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$palette = options.palette,
+      paletteInput = _options$palette === undefined ? {} : _options$palette,
+      _options$breakpoints = options.breakpoints,
+      breakpointsInput = _options$breakpoints === undefined ? {} : _options$breakpoints,
+      _options$mixins = options.mixins,
+      mixinsInput = _options$mixins === undefined ? {} : _options$mixins,
+      _options$typography = options.typography,
+      typographyInput = _options$typography === undefined ? {} : _options$typography,
+      shadowsInput = options.shadows,
+      other = (0, _objectWithoutProperties3.default)(options, ['palette', 'breakpoints', 'mixins', 'typography', 'shadows']);
+
+
+  var palette = (0, _createPalette2.default)(paletteInput);
+  var breakpoints = (0, _createBreakpoints2.default)(breakpointsInput);
+
+  var muiTheme = (0, _extends3.default)({
+    direction: 'ltr',
+    palette: palette,
+    typography: (0, _createTypography2.default)(palette, typographyInput),
+    mixins: (0, _createMixins2.default)(breakpoints, _spacing2.default, mixinsInput),
+    breakpoints: breakpoints,
+    shadows: shadowsInput || _shadows2.default
+  }, (0, _deepmerge2.default)({
+    transitions: _transitions2.default,
+    spacing: _spacing2.default,
+    zIndex: _zIndex2.default
+  }, other));
+
+  process.env.NODE_ENV !== "production" ? (0, _warning2.default)(muiTheme.shadows.length === 25, 'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.') : void 0;
+
+  return muiTheme;
+} // < 1kb payload overhead when lodash/merge is > 3kb.
+exports.default = createMuiTheme;