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

package/es/Progress/CircularProgress.js

@@ -0,0 +1,201 @@
+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 SIZE = 50;
+
+function getRelativeValue(value, min, max) {
+  const clampedValue = Math.min(Math.max(min, value), max);
+  return (clampedValue - min) / (max - min);
+}
+
+function easeOut(t) {
+  t = getRelativeValue(t, 0, 1);
+  // https://gist.github.com/gre/1650294
+  t = (t -= 1) * t * t + 1;
+  return t;
+}
+
+function easeIn(t) {
+  return t * t;
+}
+
+export const styles = theme => ({
+  root: {
+    display: 'inline-block'
+  },
+  colorPrimary: {
+    color: theme.palette.primary.main
+  },
+  colorSecondary: {
+    color: theme.palette.secondary.main
+  },
+  svg: {},
+  svgIndeterminate: {
+    animation: 'mui-progress-circular-rotate 1.4s linear infinite'
+  },
+  circle: {
+    stroke: 'currentColor',
+    strokeLinecap: 'round'
+  },
+  circleIndeterminate: {
+    animation: 'mui-progress-circular-dash 1.4s ease-in-out infinite',
+    // Some default value that looks fine waiting for the animation to kicks in.
+    strokeDasharray: '80px, 200px',
+    strokeDashoffset: '0px' // Add the unit to fix a Edge 16 and below bug.
+  },
+  '@keyframes mui-progress-circular-rotate': {
+    '100%': {
+      transform: 'rotate(360deg)'
+    }
+  },
+  '@keyframes mui-progress-circular-dash': {
+    '0%': {
+      strokeDasharray: '1px, 200px',
+      strokeDashoffset: '0px'
+    },
+    '50%': {
+      strokeDasharray: '100px, 200px',
+      strokeDashoffset: '-15px'
+    },
+    '100%': {
+      strokeDasharray: '100px, 200px',
+      strokeDashoffset: '-120px'
+    }
+  }
+});
+
+/**
+ * ## ARIA
+ *
+ * If the progress bar is describing the loading progress of a particular region of a page,
+ * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
+ * attribute to `true` on that region until it has finished loading.
+ */
+function CircularProgress(props) {
+  const {
+    classes,
+    className,
+    color,
+    max,
+    min,
+    size,
+    style,
+    thickness,
+    value,
+    variant
+  } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'color', 'max', 'min', 'size', 'style', 'thickness', 'value', 'variant']);
+
+  const circleStyle = {};
+  const rootStyle = {};
+  const rootProps = {};
+
+  if (variant === 'determinate' || variant === 'static') {
+    const relVal = getRelativeValue(value, min, max) * 100;
+    const circumference = 2 * Math.PI * (SIZE / 2 - 5);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps['aria-valuenow'] = Math.round(relVal);
+
+    if (variant === 'static') {
+      circleStyle.strokeDashoffset = `${((100 - relVal) / 100 * circumference).toFixed(3)}px`;
+      rootStyle.transform = 'rotate(-90deg)';
+    } else {
+      circleStyle.strokeDashoffset = `${(easeIn((100 - relVal) / 100) * circumference).toFixed(3)}px`;
+      rootStyle.transform = `rotate(${(easeOut(relVal / 70) * 270).toFixed(3)}deg)`;
+    }
+  }
+
+  return React.createElement(
+    'div',
+    _extends({
+      className: classNames(classes.root, {
+        [classes[`color${capitalize(color)}`]]: color !== 'inherit'
+      }, className),
+      style: _extends({ width: size, height: size }, rootStyle, style),
+      role: 'progressbar'
+    }, rootProps, other),
+    React.createElement(
+      'svg',
+      {
+        className: classNames(classes.svg, {
+          [classes.svgIndeterminate]: variant === 'indeterminate',
+          [classes.svgStatic]: variant === 'static'
+        }),
+        viewBox: `0 0 ${SIZE} ${SIZE}`
+      },
+      React.createElement('circle', {
+        className: classNames(classes.circle, {
+          [classes.circleIndeterminate]: variant === 'indeterminate'
+        }),
+        style: circleStyle,
+        cx: SIZE / 2,
+        cy: SIZE / 2,
+        r: SIZE / 2 - 5,
+        fill: 'none',
+        strokeWidth: thickness
+      })
+    )
+  );
+}
+
+CircularProgress.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * 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(['primary', 'secondary', 'inherit']),
+  /**
+   * The max value of progress in determinate variant.
+   */
+  max: PropTypes.number,
+  /**
+   * The min value of progress in determinate variant.
+   */
+  min: PropTypes.number,
+  /**
+   * The size of the circle.
+   */
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The thickness of the circle.
+   */
+  thickness: PropTypes.number,
+  /**
+   * The value of the progress indicator for the determinate and static variants.
+   * Value between 0 and 100.
+   */
+  value: PropTypes.number,
+  /**
+   * The variant of progress indicator. Use indeterminate
+   * when there is no progress value.
+   */
+  variant: PropTypes.oneOf(['determinate', 'indeterminate', 'static'])
+} : {};
+
+CircularProgress.defaultProps = {
+  color: 'primary',
+  max: 100,
+  min: 0,
+  size: 40,
+  thickness: 3.6,
+  value: 0,
+  variant: 'indeterminate'
+};
+
+export default withStyles(styles, { name: 'MuiCircularProgress', flip: false })(CircularProgress);

package/es/Progress/LinearProgress.js

@@ -0,0 +1,235 @@
+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 warning from 'warning';
+import withStyles from '../styles/withStyles';
+import { lighten } from '../styles/colorManipulator';
+
+const TRANSITION_DURATION = 4; // 400ms
+
+export const styles = theme => ({
+  root: {
+    position: 'relative',
+    overflow: 'hidden',
+    height: 5
+  },
+  colorPrimary: {
+    backgroundColor: lighten(theme.palette.primary.light, 0.6)
+  },
+  colorSecondary: {
+    backgroundColor: lighten(theme.palette.secondary.light, 0.4)
+  },
+  buffer: {
+    backgroundColor: 'transparent'
+  },
+  query: {
+    transform: 'rotate(180deg)'
+  },
+  dashed: {
+    position: 'absolute',
+    marginTop: 0,
+    height: '100%',
+    width: '100%',
+    animation: 'buffer 3s infinite linear'
+  },
+  dashedColorPrimary: {
+    backgroundImage: `radial-gradient(${lighten(theme.palette.primary.light, 0.6)} 0%, ${lighten(theme.palette.primary.light, 0.6)} 16%, transparent 42%)`,
+    backgroundSize: '10px 10px',
+    backgroundPosition: '0px -23px'
+  },
+  dashedColorSecondary: {
+    backgroundImage: `radial-gradient(${lighten(theme.palette.secondary.light, 0.4)} 0%, ${lighten(theme.palette.secondary.light, 0.6)} 16%, transparent 42%)`,
+    backgroundSize: '10px 10px',
+    backgroundPosition: '0px -23px'
+  },
+  bar: {
+    width: '100%',
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    top: 0,
+    transition: 'transform 0.2s linear',
+    transformOrigin: 'left'
+  },
+  barColorPrimary: {
+    backgroundColor: theme.palette.primary.main
+  },
+  barColorSecondary: {
+    backgroundColor: theme.palette.secondary.main
+  },
+  bar1Indeterminate: {
+    width: 'auto',
+    willChange: 'left, right',
+    animation: 'mui-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
+  },
+  bar2Indeterminate: {
+    width: 'auto',
+    willChange: 'left, right',
+    animation: 'mui-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite',
+    animationDelay: '1.15s'
+  },
+  bar1Determinate: {
+    willChange: 'transform',
+    transition: `transform .${TRANSITION_DURATION}s linear`
+  },
+  bar1Buffer: {
+    zIndex: 1,
+    transition: `transform .${TRANSITION_DURATION}s linear`
+  },
+  bar2Buffer: {
+    transition: `transform .${TRANSITION_DURATION}s linear`
+  },
+  // Legends:
+  // || represents the viewport
+  // -  represents a light background
+  // x  represents a dark background
+  '@keyframes mui-indeterminate1': {
+    //  |-----|---x-||-----||-----|
+    '0%': {
+      left: '-35%',
+      right: '100%'
+    },
+    //  |-----|-----||-----||xxxx-|
+    '60%': {
+      left: '100%',
+      right: '-90%'
+    },
+    '100%': {
+      left: '100%',
+      right: '-90%'
+    }
+  },
+  '@keyframes mui-indeterminate2': {
+    //  |xxxxx|xxxxx||-----||-----|
+    '0%': {
+      left: '-200%',
+      right: '100%'
+    },
+    //  |-----|-----||-----||-x----|
+    '60%': {
+      left: '107%',
+      right: '-8%'
+    },
+    '100%': {
+      left: '107%',
+      right: '-8%'
+    }
+  },
+  '@keyframes buffer': {
+    '0%': {
+      opacity: 1,
+      backgroundPosition: '0px -23px'
+    },
+    '50%': {
+      opacity: 0,
+      backgroundPosition: '0px -23px'
+    },
+    '100%': {
+      opacity: 1,
+      backgroundPosition: '-200px -23px'
+    }
+  }
+});
+
+/**
+ * ## ARIA
+ *
+ * If the progress bar is describing the loading progress of a particular region of a page,
+ * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
+ * attribute to `true` on that region until it has finished loading.
+ */
+function LinearProgress(props) {
+  const { classes, className: classNameProp, color, value, valueBuffer, variant } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'color', 'value', 'valueBuffer', 'variant']);
+
+  const className = classNames(classes.root, {
+    [classes.colorPrimary]: color === 'primary',
+    [classes.colorSecondary]: color === 'secondary',
+    [classes.buffer]: variant === 'buffer',
+    [classes.query]: variant === 'query'
+  }, classNameProp);
+  const dashedClass = classNames(classes.dashed, {
+    [classes.dashedColorPrimary]: color === 'primary',
+    [classes.dashedColorSecondary]: color === 'secondary'
+  });
+  const bar1ClassName = classNames(classes.bar, {
+    [classes.barColorPrimary]: color === 'primary',
+    [classes.barColorSecondary]: color === 'secondary',
+    [classes.bar1Indeterminate]: variant === 'indeterminate' || variant === 'query',
+    [classes.bar1Determinate]: variant === 'determinate',
+    [classes.bar1Buffer]: variant === 'buffer'
+  });
+  const bar2ClassName = classNames(classes.bar, {
+    [classes.barColorPrimary]: color === 'primary' && variant !== 'buffer',
+    [classes.colorPrimary]: color === 'primary' && variant === 'buffer',
+    [classes.barColorSecondary]: color === 'secondary' && variant !== 'buffer',
+    [classes.colorSecondary]: color === 'secondary' && variant === 'buffer',
+    [classes.bar2Indeterminate]: variant === 'indeterminate' || variant === 'query',
+    [classes.bar2Buffer]: variant === 'buffer'
+  });
+  const rootProps = {};
+  const inlineStyles = { bar1: {}, bar2: {} };
+
+  if (variant === 'determinate' || variant === 'buffer') {
+    if (value !== undefined) {
+      rootProps['aria-valuenow'] = Math.round(value);
+      inlineStyles.bar1.transform = `scaleX(${value / 100})`;
+    } else {
+      process.env.NODE_ENV !== "production" ? warning(false, 'Material-UI: you need to provide a value property ' + 'when using the determinate or buffer variant of LinearProgress .') : void 0;
+    }
+  }
+  if (variant === 'buffer') {
+    if (valueBuffer !== undefined) {
+      inlineStyles.bar2.transform = `scaleX(${(valueBuffer || 0) / 100})`;
+    } else {
+      process.env.NODE_ENV !== "production" ? warning(false, 'Material-UI: you need to provide a valueBuffer property ' + 'when using the buffer variant of LinearProgress.') : void 0;
+    }
+  }
+
+  return React.createElement(
+    'div',
+    _extends({ className: className, role: 'progressbar' }, rootProps, other),
+    variant === 'buffer' ? React.createElement('div', { className: dashedClass }) : null,
+    React.createElement('div', { className: bar1ClassName, style: inlineStyles.bar1 }),
+    variant === 'determinate' ? null : React.createElement('div', { className: bar2ClassName, style: inlineStyles.bar2 })
+  );
+}
+
+LinearProgress.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * 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(['primary', 'secondary']),
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
+   */
+  value: PropTypes.number,
+  /**
+   * The value for the buffer variant.
+   * Value between 0 and 100.
+   */
+  valueBuffer: PropTypes.number,
+  /**
+   * The variant of progress indicator. Use indeterminate or query
+   * when there is no progress value.
+   */
+  variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query'])
+} : {};
+
+LinearProgress.defaultProps = {
+  color: 'primary',
+  variant: 'indeterminate'
+};
+
+export default withStyles(styles, { name: 'MuiLinearProgress' })(LinearProgress);

package/es/Progress/index.js

@@ -0,0 +1,2 @@
+export { default as CircularProgress } from './CircularProgress';
+export { default as LinearProgress } from './LinearProgress';

package/es/Radio/Radio.js

@@ -0,0 +1,113 @@
+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 SwitchBase from '../internal/SwitchBase';
+import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
+import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+  default: {
+    color: theme.palette.text.secondary
+  },
+  checked: {},
+  checkedPrimary: {
+    color: theme.palette.primary.main
+  },
+  checkedSecondary: {
+    color: theme.palette.secondary.main
+  },
+  disabled: {
+    color: theme.palette.action.disabled
+  }
+});
+
+var _ref = React.createElement(RadioButtonUncheckedIcon, null);
+
+var _ref2 = React.createElement(RadioButtonCheckedIcon, null);
+
+function Radio(props) {
+  const { classes, color } = props,
+        other = _objectWithoutProperties(props, ['classes', 'color']);
+  const checkedClass = classNames(classes.checked, {
+    [classes.checkedPrimary]: color === 'primary',
+    [classes.checkedSecondary]: color === 'secondary'
+  });
+
+  return React.createElement(SwitchBase, _extends({
+    type: 'radio',
+    icon: _ref,
+    checkedIcon: _ref2,
+    classes: {
+      default: classes.default,
+      checked: checkedClass,
+      disabled: classes.disabled
+    }
+  }, other));
+}
+
+Radio.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['primary', 'secondary']),
+  /**
+   * If `true`, the switch will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: PropTypes.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: PropTypes.string,
+  /**
+   * Properties applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Use that property to pass a ref callback to the native input component.
+   */
+  inputRef: PropTypes.func,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {boolean} checked The `checked` value of the switch
+   */
+  onChange: PropTypes.func,
+  /**
+   * The input component property `type`.
+   */
+  type: PropTypes.string,
+  /**
+   * The value of the component.
+   */
+  value: PropTypes.string
+} : {};
+
+Radio.defaultProps = {
+  color: 'secondary'
+};
+
+export default withStyles(styles, { name: 'MuiRadio' })(Radio);

package/es/Radio/RadioGroup.js

@@ -0,0 +1,101 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent FormGroup
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import FormGroup from '../Form/FormGroup';
+import { find } from '../utils/helpers';
+
+class RadioGroup extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.radios = [], this.focus = () => {
+      if (!this.radios || !this.radios.length) {
+        return;
+      }
+
+      const focusRadios = this.radios.filter(n => !n.disabled);
+
+      if (!focusRadios.length) {
+        return;
+      }
+
+      const selectedRadio = find(focusRadios, n => n.checked);
+
+      if (selectedRadio) {
+        selectedRadio.focus();
+        return;
+      }
+
+      focusRadios[0].focus();
+    }, this.handleRadioChange = (event, checked) => {
+      if (checked && this.props.onChange) {
+        this.props.onChange(event, event.target.value);
+      }
+    }, _temp;
+  }
+
+  render() {
+    const _props = this.props,
+          { children, name, value, onChange } = _props,
+          other = _objectWithoutProperties(_props, ['children', 'name', 'value', 'onChange']);
+
+    this.radios = [];
+
+    return React.createElement(
+      FormGroup,
+      _extends({ role: 'radiogroup' }, other),
+      React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        return React.cloneElement(child, {
+          key: index,
+          name,
+          inputRef: node => {
+            if (node) {
+              this.radios.push(node);
+            }
+          },
+          checked: value === child.props.value,
+          onChange: this.handleRadioChange
+        });
+      })
+    );
+  }
+}
+
+RadioGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * The name used to reference the value of the control.
+   */
+  name: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Callback fired when a radio button is selected.
+   *
+   * @param {object} event The event source of the callback
+   * @param {string} value The `value` of the selected radio button
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * Value of the selected radio button.
+   */
+  value: PropTypes.string
+} : {};
+
+export default RadioGroup;

package/es/Radio/index.js

@@ -0,0 +1,2 @@
+export { default } from './Radio';
+export { default as RadioGroup } from './RadioGroup';