@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/es/styles/createPalette.js

@@ -1,15 +1,23 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import warning from 'warning';
 import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
-import indigo from '../colors/indigo';
-import pink from '../colors/pink';
-import grey from '../colors/grey';
-import red from '../colors/red';
-import common from '../colors/common';
-import { getContrastRatio, darken, lighten } from './colorManipulator';
 
+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.
@@ -35,16 +43,33 @@ export const light = {
     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: 'rgba(0, 0, 0, 0.14)',
+    selected: '#F8F9FB',
     // The color of a disabled action.
-    disabled: 'rgba(0, 0, 0, 0.26)',
+    disabled: '#E0E0E0',
     // 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)',
@@ -60,9 +85,17 @@ export const dark = {
   action: {
     active: common.white,
     hover: 'rgba(255, 255, 255, 0.1)',
+    hoverOpacity: 0.1,
     selected: 'rgba(255, 255, 255, 0.2)',
-    disabled: 'rgba(255, 255, 255, 0.3)',
+    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)'
   }
 };
 
@@ -81,14 +114,40 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
 export default function createPalette(palette) {
   const {
     primary = {
-      light: indigo[300],
-      main: indigo[500],
-      dark: indigo[700]
+      light: '#5bc8ef',
+      main: '#00ade9',
+      dark: '#007ca9',
+      contrastText: '#FFFFFF'
     },
     secondary = {
-      light: pink.A200,
-      main: pink.A400,
-      dark: pink.A700
+      light: '#ffcf21',
+      main: '#ffcf21',
+      dark: '#E9BE30',
+      contrastText: '#FFFFFF'
+    },
+    positive = {
+      light: '#66CF66',
+      main: '#00AF00',
+      dark: '#008300',
+      contrastText: '#FFFFFF'
+    },
+    negative = {
+      light: '#E66666',
+      main: '#D50000',
+      dark: '#A00000',
+      contrastText: '#FFFFFF'
+    },
+    middle = {
+      light: '#F4A647',
+      main: '#F99408',
+      dark: '#F78700',
+      contrastText: '#FFFFFF'
+    },
+    neutral = {
+      light: '#838383',
+      main: '#737373',
+      dark: '#20272B',
+      contrastText: '#FFFFFF'
     },
     error = {
       light: red[300],
@@ -96,10 +155,11 @@ export default function createPalette(palette) {
       dark: red[700]
     },
     type = 'light',
-    contrastThreshold = 3,
-    tonalOffset = 0.2
+    contrastThreshold = 4,
+    tonalOffset = 0.2,
+    context = 'local'
   } = palette,
-        other = _objectWithoutProperties(palette, ['primary', 'secondary', 'error', 'type', 'contrastThreshold', 'tonalOffset']);
+        other = _objectWithoutProperties(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "type", "contrastThreshold", "tonalOffset", "context"]);
 
   function getContrastText(background) {
     // Use the same logic as
@@ -115,26 +175,37 @@ export default function createPalette(palette) {
     return contrastText;
   }
 
-  function augmentColor(color, mainShade, lightShade, darkShade) {
+  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, 500, 300, 700);
+  augmentColor(primary);
   augmentColor(secondary, 'A400', 'A200', 'A700');
-  augmentColor(error, 500, 300, 700);
-
-  const types = { dark, light };
-
+  augmentColor(error);
+  const types = {
+    dark,
+    light
+  };
   process.env.NODE_ENV !== "production" ? warning(types[type], `Material-UI: the palette type \`${type}\` is not supported.`) : void 0;
-
-  const paletteOutput = deepmerge(_extends({
+  const contexts = {
+    local: types[type] ? types[type].local : {},
+    global: types[type] ? types[type].global : {}
+  };
+  process.env.NODE_ENV !== "production" ? warning(contexts[context], `Material-UI: the context \`${context}\` is not supported.`) : void 0;
+  const paletteOutput = deepmerge(_objectSpread({
     // A collection of common colors.
     common,
     // The palette type, can be light or dark.
@@ -143,6 +214,14 @@ export default function createPalette(palette) {
     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 grey colors.
@@ -152,13 +231,15 @@ export default function createPalette(palette) {
     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
-  }, types[type]), other, {
+  }, types[type], contexts[context]), other, {
     clone: false // No need to clone deep
-  });
 
+  });
   return paletteOutput;
 }

package/es/styles/createStyles.js

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

package/es/styles/createTypography.js

@@ -1,4 +1,5 @@
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
 
 function round(value) {
@@ -9,15 +10,24 @@ export default function createTypography(palette, typography) {
   const _ref = typeof typography === 'function' ? typography(palette) : typography,
         {
     fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif',
-    fontSize = 14, // px
+    // The default font size of the Material Specification.
+    fontSize = 14,
+    // px
     fontWeightLight = 300,
     fontWeightRegular = 400,
     fontWeightMedium = 500,
-    htmlFontSize = 16 } = _ref,
-        other = _objectWithoutProperties(_ref, ['fontFamily', 'fontSize', 'fontWeightLight', 'fontWeightRegular', 'fontWeightMedium', 'htmlFontSize']);
+    // 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
+  } = _ref,
+        other = _objectWithoutProperties(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "htmlFontSize", "allVariants"]);
+
+  const coef = fontSize / 14;
 
   function pxToRem(value) {
-    return `${value / htmlFontSize}rem`;
+    return `${value / htmlFontSize * coef}rem`;
   }
 
   return deepmerge({
@@ -28,89 +38,137 @@ export default function createTypography(palette, typography) {
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,
-    display4: {
+    display4: _objectSpread({
       fontSize: pxToRem(112),
       fontWeight: fontWeightLight,
       fontFamily,
       letterSpacing: '-.04em',
       lineHeight: `${round(128 / 112)}em`,
-      marginLeft: '-.06em',
+      marginLeft: '-.04em',
       color: palette.text.secondary
-    },
-    display3: {
+    }, allVariants),
+    display3: _objectSpread({
       fontSize: pxToRem(56),
       fontWeight: fontWeightRegular,
       fontFamily,
       letterSpacing: '-.02em',
       lineHeight: `${round(73 / 56)}em`,
-      marginLeft: '-.04em',
+      marginLeft: '-.02em',
       color: palette.text.secondary
-    },
-    display2: {
+    }, allVariants),
+    display2: _objectSpread({
       fontSize: pxToRem(45),
       fontWeight: fontWeightRegular,
       fontFamily,
-      lineHeight: `${round(48 / 45)}em`,
-      marginLeft: '-.04em',
+      lineHeight: `${round(51 / 45)}em`,
+      marginLeft: '-.02em',
       color: palette.text.secondary
-    },
-    display1: {
+    }, allVariants),
+    display1: _objectSpread({
       fontSize: pxToRem(34),
       fontWeight: fontWeightRegular,
       fontFamily,
       lineHeight: `${round(41 / 34)}em`,
-      marginLeft: '-.04em',
       color: palette.text.secondary
-    },
-    headline: {
+    }, allVariants),
+    headline: _objectSpread({
       fontSize: pxToRem(24),
       fontWeight: fontWeightRegular,
       fontFamily,
       lineHeight: `${round(32.5 / 24)}em`,
       color: palette.text.primary
-    },
-    title: {
+    }, allVariants),
+    title: _objectSpread({
       fontSize: pxToRem(21),
       fontWeight: fontWeightMedium,
       fontFamily,
       lineHeight: `${round(24.5 / 21)}em`,
       color: palette.text.primary
-    },
-    subheading: {
+    }, allVariants),
+    subheading: _objectSpread({
       fontSize: pxToRem(16),
       fontWeight: fontWeightRegular,
       fontFamily,
       lineHeight: `${round(24 / 16)}em`,
       color: palette.text.primary
-    },
-    body2: {
+    }, allVariants),
+    body3: _objectSpread({
+      fontSize: pxToRem(14),
+      fontWeight: fontWeightRegular,
+      fontFamily,
+      lineHeight: `${round(26 / 14)}em`,
+      color: palette.text.primary
+    }, allVariants),
+    body2: _objectSpread({
       fontSize: pxToRem(14),
       fontWeight: fontWeightMedium,
       fontFamily,
       lineHeight: `${round(24 / 14)}em`,
       color: palette.text.primary
-    },
-    body1: {
+    }, allVariants),
+    body1: _objectSpread({
       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
     },
-    caption: {
+    b4: {
+      fontSize: 12,
+      fontFamily
+    },
+    b5: {
+      fontSize: 11,
+      fontFamily
+    },
+    caption: _objectSpread({
       fontSize: pxToRem(12),
       fontWeight: fontWeightRegular,
       fontFamily,
       lineHeight: `${round(16.5 / 12)}em`,
       color: palette.text.secondary
-    },
-    button: {
-      fontSize: pxToRem(fontSize),
+    }, allVariants),
+    button: _objectSpread({
+      fontSize: pxToRem(14),
       textTransform: 'uppercase',
       fontWeight: fontWeightMedium,
-      fontFamily
-    }
+      fontFamily,
+      color: palette.text.primary
+    }, allVariants)
   }, other, {
     clone: false // No need to clone deep
+
   });
 }

package/es/styles/getStylesCreator.js

@@ -1,26 +1,33 @@
-import _Object$keys from 'babel-runtime/core-js/object/keys';
-import _extends from 'babel-runtime/helpers/extends';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 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';
+  process.env.NODE_ENV !== "production" ? 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')) : void 0;
 
   function create(theme, name) {
     const styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
 
-    if (!theme.overrides || !name || !theme.overrides[name]) {
+    if (!name || !theme.overrides || !theme.overrides[name]) {
       return styles;
     }
 
     const overrides = theme.overrides[name];
-    const stylesWithOverrides = _extends({}, styles);
 
-    _Object$keys(overrides).forEach(key => {
+    const stylesWithOverrides = _objectSpread({}, styles);
+
+    Object.keys(overrides).forEach(key => {
       process.env.NODE_ENV !== "production" ? 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')) : void 0;
-      stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
+      stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key], {
+        arrayMerge
+      });
     });
-
     return stylesWithOverrides;
   }
 

package/es/styles/getThemeProps.js

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

package/es/styles/index.js

@@ -2,6 +2,6 @@ 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';
 export { default as withStyles } from './withStyles';
-export { default as withTheme } from './withTheme';
-export { default as createHiMuiTheme } from './createHiMuiTheme';
+export { default as withTheme } from './withTheme';

package/es/styles/jssPreset.js

@@ -3,10 +3,9 @@ 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
+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()]

package/es/styles/mergeClasses.js

@@ -0,0 +1,29 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import warning from 'warning';
+import getDisplayName from 'recompose/getDisplayName';
+
+function mergeClasses(options = {}) {
+  const {
+    baseClasses,
+    newClasses,
+    Component,
+    noBase = false
+  } = options;
+
+  if (!newClasses) {
+    return baseClasses;
+  }
+
+  return _objectSpread({}, baseClasses, Object.keys(newClasses).reduce((accumulator, key) => {
+    process.env.NODE_ENV !== "production" ? 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')) : void 0;
+    process.env.NODE_ENV !== "production" ? 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')) : void 0;
+
+    if (newClasses[key]) {
+      accumulator[key] = `${baseClasses[key]} ${newClasses[key]}`;
+    }
+
+    return accumulator;
+  }, {}));
+}
+
+export default mergeClasses;

package/es/styles/shadows.js

@@ -7,5 +7,4 @@ function createShadow(...px) {
 }
 
 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/es/styles/shape.js

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

package/es/styles/spacing.js

@@ -1,5 +1,6 @@
-export default {
+const spacing = {
   // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
-  // https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-baseline-grids
+  // https://material.io/design/layout/understanding-layout.html#pixel-density
   unit: 8
-};
+};
+export default spacing;

package/es/styles/themeListener.js

@@ -1,8 +1,6 @@
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'; // Same value used by react-jss
 
-// Same value used by react-jss
 export const CHANNEL = '__THEMING__';
-
 const themeListener = {
   contextTypes: {
     [CHANNEL]: PropTypes.object
@@ -21,11 +19,10 @@ const themeListener = {
 
     return context[CHANNEL].subscribe(cb);
   },
-  unsubscribe(context, subscriptionId) {
+  unsubscribe: (context, subscriptionId) => {
     if (context[CHANNEL]) {
       context[CHANNEL].unsubscribe(subscriptionId);
     }
   }
 };
-
 export default themeListener;