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

package/colors/lime.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var lime = {
+  50: '#f9fbe7',
+  100: '#f0f4c3',
+  200: '#e6ee9c',
+  300: '#dce775',
+  400: '#d4e157',
+  500: '#cddc39',
+  600: '#c0ca33',
+  700: '#afb42b',
+  800: '#9e9d24',
+  900: '#827717',
+  A100: '#f4ff81',
+  A200: '#eeff41',
+  A400: '#c6ff00',
+  A700: '#aeea00'
+};
+
+exports.default = lime;

package/colors/orange.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var orange = {
+  50: '#fff3e0',
+  100: '#ffe0b2',
+  200: '#ffcc80',
+  300: '#ffb74d',
+  400: '#ffa726',
+  500: '#ff9800',
+  600: '#fb8c00',
+  700: '#f57c00',
+  800: '#ef6c00',
+  900: '#e65100',
+  A100: '#ffd180',
+  A200: '#ffab40',
+  A400: '#ff9100',
+  A700: '#ff6d00'
+};
+
+exports.default = orange;

package/colors/pink.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var pink = {
+  50: '#fce4ec',
+  100: '#f8bbd0',
+  200: '#f48fb1',
+  300: '#f06292',
+  400: '#ec407a',
+  500: '#e91e63',
+  600: '#d81b60',
+  700: '#c2185b',
+  800: '#ad1457',
+  900: '#880e4f',
+  A100: '#ff80ab',
+  A200: '#ff4081',
+  A400: '#f50057',
+  A700: '#c51162'
+};
+
+exports.default = pink;

package/colors/purple.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var purple = {
+  50: '#f3e5f5',
+  100: '#e1bee7',
+  200: '#ce93d8',
+  300: '#ba68c8',
+  400: '#ab47bc',
+  500: '#9c27b0',
+  600: '#8e24aa',
+  700: '#7b1fa2',
+  800: '#6a1b9a',
+  900: '#4a148c',
+  A100: '#ea80fc',
+  A200: '#e040fb',
+  A400: '#d500f9',
+  A700: '#aa00ff'
+};
+
+exports.default = purple;

package/colors/red.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var red = {
+  50: '#ffebee',
+  100: '#ffcdd2',
+  200: '#ef9a9a',
+  300: '#e57373',
+  400: '#ef5350',
+  500: '#f44336',
+  600: '#e53935',
+  700: '#d32f2f',
+  800: '#c62828',
+  900: '#b71c1c',
+  A100: '#ff8a80',
+  A200: '#ff5252',
+  A400: '#ff1744',
+  A700: '#d50000'
+};
+
+exports.default = red;

package/colors/teal.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var teal = {
+  50: '#e0f2f1',
+  100: '#b2dfdb',
+  200: '#80cbc4',
+  300: '#4db6ac',
+  400: '#26a69a',
+  500: '#009688',
+  600: '#00897b',
+  700: '#00796b',
+  800: '#00695c',
+  900: '#004d40',
+  A100: '#a7ffeb',
+  A200: '#64ffda',
+  A400: '#1de9b6',
+  A700: '#00bfa5'
+};
+
+exports.default = teal;

package/colors/yellow.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var yellow = {
+  50: '#fffde7',
+  100: '#fff9c4',
+  200: '#fff59d',
+  300: '#fff176',
+  400: '#ffee58',
+  500: '#ffeb3b',
+  600: '#fdd835',
+  700: '#fbc02d',
+  800: '#f9a825',
+  900: '#f57f17',
+  A100: '#ffff8d',
+  A200: '#ffff00',
+  A400: '#ffea00',
+  A700: '#ffd600'
+};
+
+exports.default = yellow;

package/es/AppBar/AppBar.js

@@ -0,0 +1,106 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Paper
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import { capitalize } from '../utils/helpers';
+import Paper from '../Paper';
+
+export const styles = theme => {
+    const backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
+
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
+            zIndex: theme.zIndex.appBar,
+            flexShrink: 0
+        },
+        positionFixed: {
+            position: 'fixed',
+            top: 0,
+            left: 'auto',
+            right: 0
+        },
+        positionAbsolute: {
+            position: 'absolute',
+            top: 0,
+            left: 'auto',
+            right: 0
+        },
+        positionSticky: {
+            position: 'sticky',
+            top: 0,
+            left: 'auto',
+            right: 0
+        },
+        positionStatic: {
+            position: 'static'
+        },
+        colorDefault: {
+            backgroundColor: backgroundColorDefault,
+            color: theme.palette.getContrastText(backgroundColorDefault)
+        },
+        colorPrimary: {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText
+        },
+        colorSecondary: {
+            backgroundColor: theme.palette.secondary.main,
+            color: theme.palette.secondary.contrastText
+        }
+    };
+};
+
+function AppBar(props) {
+    const { children, classes, className: classNameProp, color, position } = props,
+          other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'position']);
+
+    const className = classNames(classes.root, classes[`position${capitalize(position)}`], {
+        [classes[`color${capitalize(color)}`]]: color !== 'inherit',
+        'mui-fixed': position === 'fixed' // Useful for the Dialog
+    }, classNameProp);
+
+    return React.createElement(
+        Paper,
+        _extends({ square: true, component: 'header', elevation: 4, className: className }, other),
+        children
+    );
+}
+
+AppBar.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
+    color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'default']),
+    /**
+     * The positioning type. The behavior of the different options is described
+     * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+     * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
+     */
+    position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static'])
+} : {};
+
+AppBar.defaultProps = {
+    color: 'primary',
+    position: 'fixed'
+};
+
+export default withStyles(styles, { name: 'MuiAppBar' })(AppBar);

package/es/AppBar/index.js

@@ -0,0 +1 @@
+export { default } from './AppBar';

package/es/Avatar/Avatar.js

@@ -0,0 +1,136 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+  root: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: theme.spacing.unit * 5,
+    height: theme.spacing.unit * 5,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.pxToRem(20),
+    borderRadius: '50%',
+    overflow: 'hidden',
+    userSelect: 'none'
+  },
+  colorDefault: {
+    color: theme.palette.background.default,
+    backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
+  },
+  img: {
+    width: '100%',
+    height: '100%',
+    textAlign: 'center',
+    // Handle non-square image. The property isn't supported by IE11.
+    objectFit: 'cover'
+  }
+});
+
+function Avatar(props) {
+  const {
+    alt,
+    children: childrenProp,
+    childrenClassName: childrenClassNameProp,
+    classes,
+    className: classNameProp,
+    component: Component,
+    imgProps,
+    sizes,
+    src,
+    srcSet
+  } = props,
+        other = _objectWithoutProperties(props, ['alt', 'children', 'childrenClassName', 'classes', 'className', 'component', 'imgProps', 'sizes', 'src', 'srcSet']);
+
+  const className = classNames(classes.root, {
+    [classes.colorDefault]: childrenProp && !src && !srcSet
+  }, classNameProp);
+  let children = null;
+
+  if (childrenProp) {
+    if (childrenClassNameProp && typeof childrenProp !== 'string' && React.isValidElement(childrenProp)) {
+      const childrenClassName = classNames(childrenClassNameProp, childrenProp.props.className);
+      children = React.cloneElement(childrenProp, { className: childrenClassName });
+    } else {
+      children = childrenProp;
+    }
+  } else if (src || srcSet) {
+    children = React.createElement('img', _extends({
+      alt: alt,
+      src: src,
+      srcSet: srcSet,
+      sizes: sizes,
+      className: classes.img
+    }, imgProps));
+  }
+
+  return React.createElement(
+    Component,
+    _extends({ className: className }, other),
+    children
+  );
+}
+
+Avatar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Used in combination with `src` or `srcSet` to
+   * provide an alt attribute for the rendered `img` element.
+   */
+  alt: PropTypes.string,
+  /**
+   * Used to render icon or text elements inside the Avatar.
+   * `src` and `alt` props will not be used and no `img` will
+   * be rendered by default.
+   *
+   * This can be an element, or just a string.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   * The className of the child element.
+   * Used by Chip and ListItemIcon to style the Avatar icon.
+   */
+  childrenClassName: PropTypes.string,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Properties applied to the `img` element when the component
+   * is used to display an image.
+   */
+  imgProps: PropTypes.object,
+  /**
+   * The `sizes` attribute for the `img` element.
+   */
+  sizes: PropTypes.string,
+  /**
+   * The `src` attribute for the `img` element.
+   */
+  src: PropTypes.string,
+  /**
+   * The `srcSet` attribute for the `img` element.
+   */
+  srcSet: PropTypes.string
+} : {};
+
+Avatar.defaultProps = {
+  component: 'div'
+};
+
+export default withStyles(styles, { name: 'MuiAvatar' })(Avatar);

package/es/Avatar/index.js

@@ -0,0 +1 @@
+export { default } from './Avatar';

package/es/Badge/Badge.js

@@ -0,0 +1,112 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import { capitalize } from '../utils/helpers';
+
+const RADIUS = 12;
+
+export const styles = theme => ({
+  root: {
+    position: 'relative',
+    display: 'inline-flex',
+    // For correct alignment with the text.
+    verticalAlign: 'middle'
+  },
+  badge: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    top: -RADIUS,
+    right: -RADIUS,
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: theme.typography.fontWeight,
+    fontSize: theme.typography.pxToRem(RADIUS),
+    width: RADIUS * 2,
+    height: RADIUS * 2,
+    borderRadius: '50%',
+    backgroundColor: theme.palette.color,
+    color: theme.palette.textColor,
+    zIndex: 1 // Render the badge on top of potential ripples.
+  },
+  colorPrimary: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText
+  },
+  colorSecondary: {
+    backgroundColor: theme.palette.secondary.main,
+    color: theme.palette.secondary.contrastText
+  },
+  colorError: {
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText
+  }
+});
+
+function Badge(props) {
+  const {
+    badgeContent,
+    children,
+    classes,
+    className: classNameProp,
+    color,
+    component: ComponentProp
+  } = props,
+        other = _objectWithoutProperties(props, ['badgeContent', 'children', 'classes', 'className', 'color', 'component']);
+
+  const badgeClassName = classNames(classes.badge, {
+    [classes[`color${capitalize(color)}`]]: color !== 'default'
+  });
+
+  return React.createElement(
+    ComponentProp,
+    _extends({ className: classNames(classes.root, classNameProp) }, other),
+    children,
+    React.createElement(
+      'span',
+      { className: badgeClassName },
+      badgeContent
+    )
+  );
+}
+
+Badge.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content rendered within the badge.
+   */
+  badgeContent: PropTypes.node.isRequired,
+  /**
+   * The badge will be added relative to this node.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'error']),
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+} : {};
+
+Badge.defaultProps = {
+  color: 'default',
+  component: 'span'
+};
+
+export default withStyles(styles, { name: 'MuiBadge' })(Badge);

package/es/Badge/index.js

@@ -0,0 +1 @@
+export { default } from './Badge';

package/es/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,86 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    height: 56,
+    backgroundColor: theme.palette.background.paper
+  }
+});
+
+function BottomNavigation(props) {
+  const {
+    children: childrenProp,
+    classes,
+    className: classNameProp,
+    onChange,
+    showLabels,
+    value
+  } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'onChange', 'showLabels', 'value']);
+
+  const className = classNames(classes.root, classNameProp);
+
+  const children = React.Children.map(childrenProp, (child, childIndex) => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+
+    const childValue = child.props.value || childIndex;
+    return React.cloneElement(child, {
+      selected: childValue === value,
+      showLabel: child.props.showLabel !== undefined ? child.props.showLabel : showLabels,
+      value: childValue,
+      onChange
+    });
+  });
+
+  return React.createElement(
+    'div',
+    _extends({ className: className }, other),
+    children
+  );
+}
+
+BottomNavigation.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {object} event The event source of the callback
+   * @param {any} value We default to the index of the child
+   */
+  onChange: PropTypes.func,
+  /**
+   * If `true`, all `BottomNavigationAction`s will show their labels.
+   * By default, only the selected `BottomNavigationAction` will show its label.
+   */
+  showLabels: PropTypes.bool,
+  /**
+   * The value of the currently selected `BottomNavigationAction`.
+   */
+  value: PropTypes.any
+} : {};
+
+BottomNavigation.defaultProps = {
+  showLabels: false
+};
+
+export default withStyles(styles, { name: 'MuiBottomNavigation' })(BottomNavigation);