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

package/Stepper/StepLabel.js

@@ -0,0 +1,200 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _Typography = require('../Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _StepIcon = require('./StepIcon');
+
+var _StepIcon2 = _interopRequireDefault(_StepIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    root: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    horizontal: {},
+    vertical: {},
+    alternativeLabel: {
+      flexDirection: 'column'
+    },
+    disabled: {
+      cursor: 'default'
+    },
+    label: {
+      color: theme.palette.text.secondary
+    },
+    labelActive: {
+      color: theme.palette.text.primary,
+      fontWeight: 500
+    },
+    labelCompleted: {
+      color: theme.palette.text.primary,
+      fontWeight: 500
+    },
+    labelAlternativeLabel: {
+      textAlign: 'center',
+      marginTop: theme.spacing.unit * 2
+    },
+    iconContainer: {
+      paddingRight: theme.spacing.unit
+    },
+    iconContainerAlternativeLabel: {
+      paddingRight: 0
+    },
+    labelContainer: {
+      width: '100%'
+    }
+  };
+};
+
+function StepLabel(props) {
+  var _classNames, _classNames3;
+
+  var active = props.active,
+      alternativeLabel = props.alternativeLabel,
+      children = props.children,
+      classes = props.classes,
+      classNameProp = props.className,
+      completed = props.completed,
+      disabled = props.disabled,
+      icon = props.icon,
+      last = props.last,
+      optional = props.optional,
+      orientation = props.orientation,
+      other = (0, _objectWithoutProperties3.default)(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'disabled', 'icon', 'last', 'optional', 'orientation']);
+
+
+  return _react2.default.createElement(
+    'span',
+    (0, _extends3.default)({
+      className: (0, _classnames2.default)(classes.root, classes[orientation], (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames, classes.alternativeLabel, alternativeLabel), _classNames), classNameProp)
+    }, other),
+    icon && _react2.default.createElement(
+      'span',
+      {
+        className: (0, _classnames2.default)(classes.iconContainer, (0, _defineProperty3.default)({}, classes.iconContainerAlternativeLabel, alternativeLabel))
+      },
+      _react2.default.createElement(_StepIcon2.default, {
+        completed: completed,
+        active: active,
+        icon: icon,
+        alternativeLabel: alternativeLabel
+      })
+    ),
+    _react2.default.createElement(
+      'span',
+      { className: classes.labelContainer },
+      _react2.default.createElement(
+        _Typography2.default,
+        {
+          variant: 'body1',
+          component: 'span',
+          className: (0, _classnames2.default)(classes.label, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.labelAlternativeLabel, alternativeLabel), (0, _defineProperty3.default)(_classNames3, classes.labelCompleted, completed), (0, _defineProperty3.default)(_classNames3, classes.labelActive, active), _classNames3))
+        },
+        children
+      ),
+      optional
+    )
+  );
+}
+
+StepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * @ignore
+   * Sets the step as active. Is passed to child components.
+   */
+  active: _propTypes2.default.bool,
+  /**
+   * @ignore
+   * Set internally by Stepper when it's supplied with the alternativeLabel property.
+   */
+  alternativeLabel: _propTypes2.default.bool,
+  /**
+   * In most cases will simply be a string containing a title for the label.
+   */
+  children: _propTypes2.default.node,
+  /**
+   * Custom styles for component.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * @ignore
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed: _propTypes2.default.bool,
+  /**
+   * Mark the step as disabled, will also disable the button if
+   * `StepLabelButton` is a child of `StepLabel`. Is passed to child components.
+   */
+  disabled: _propTypes2.default.bool,
+  /**
+   * Override the default icon.
+   */
+  icon: _propTypes2.default.node,
+  /**
+   * @ignore
+   */
+  last: _propTypes2.default.bool,
+  /**
+   * The optional node to display.
+   */
+  optional: _propTypes2.default.node,
+  /**
+   * @ignore
+   */
+  orientation: _propTypes2.default.oneOf(['horizontal', 'vertical'])
+} : {};
+
+StepLabel.defaultProps = {
+  active: false,
+  alternativeLabel: false,
+  completed: false,
+  disabled: false,
+  last: false,
+  orientation: 'horizontal'
+};
+
+StepLabel.muiName = 'StepLabel';
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiStepLabel' })(StepLabel);

package/Stepper/StepPositionIcon.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _SvgIcon = require('../SvgIcon');
+
+var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    root: {
+      color: theme.palette.text.disabled
+    },
+    active: {
+      color: theme.palette.primary.main
+    },
+    text: {
+      fill: theme.palette.primary.contrastText,
+      fontSize: theme.typography.caption.fontSize,
+      fontFamily: theme.typography.fontFamily
+    }
+  };
+};
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = _react2.default.createElement('circle', { cx: '12', cy: '12', r: '12' });
+
+function StepPositionIcon(props) {
+  var position = props.position,
+      classes = props.classes,
+      classNameProp = props.className,
+      active = props.active;
+
+  var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.active, active), classNameProp);
+
+  return _react2.default.createElement(
+    _SvgIcon2.default,
+    { className: className },
+    _ref,
+    _react2.default.createElement(
+      'text',
+      { className: classes.text, x: '12', y: '16', textAnchor: 'middle' },
+      position
+    )
+  );
+}
+
+StepPositionIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Whether this step is active.
+   */
+  active: _propTypes2.default.bool,
+  /**
+   * Classses for component style customizations.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The step position as a number.
+   */
+  position: _propTypes2.default.node
+} : {};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiStepPosition' })(StepPositionIcon);

package/Stepper/Stepper.js

@@ -0,0 +1,161 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _Paper = require('../Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+var _StepConnector = require('./StepConnector');
+
+var _StepConnector2 = _interopRequireDefault(_StepConnector);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @inheritedComponent Paper
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    root: {
+      display: 'flex',
+      padding: theme.spacing.unit * 3
+    },
+    horizontal: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    vertical: {
+      flexDirection: 'column'
+    },
+    alternativeLabel: {
+      alignItems: 'flex-start'
+    }
+  };
+};
+
+function Stepper(props) {
+  var activeStep = props.activeStep,
+      alternativeLabel = props.alternativeLabel,
+      children = props.children,
+      classes = props.classes,
+      classNameProp = props.className,
+      connectorProp = props.connector,
+      nonLinear = props.nonLinear,
+      orientation = props.orientation,
+      other = (0, _objectWithoutProperties3.default)(props, ['activeStep', 'alternativeLabel', 'children', 'classes', 'className', 'connector', 'nonLinear', 'orientation']);
+
+
+  var className = (0, _classnames2.default)(classes.root, classes[orientation], (0, _defineProperty3.default)({}, classes.alternativeLabel, alternativeLabel), classNameProp);
+
+  var connector = _react2.default.isValidElement(connectorProp) ? _react2.default.cloneElement(connectorProp, { orientation: orientation }) : null;
+  var childrenArray = _react2.default.Children.toArray(children);
+  var steps = childrenArray.map(function (step, index) {
+    var controlProps = {
+      index: index,
+      orientation: orientation,
+      active: false,
+      completed: false,
+      disabled: false,
+      last: index + 1 === childrenArray.length,
+      alternativeLabel: alternativeLabel,
+      connector: connectorProp
+    };
+
+    if (activeStep === index) {
+      controlProps.active = true;
+    } else if (!nonLinear && activeStep > index) {
+      controlProps.completed = true;
+    } else if (!nonLinear && activeStep < index) {
+      controlProps.disabled = true;
+    }
+
+    return [!alternativeLabel && connector && index > 0 && _react2.default.cloneElement(connector, {
+      key: index // eslint-disable-line react/no-array-index-key
+    }), _react2.default.cloneElement(step, (0, _extends3.default)({}, controlProps, step.props))];
+  });
+
+  return _react2.default.createElement(
+    _Paper2.default,
+    (0, _extends3.default)({ square: true, elevation: 0, className: className }, other),
+    steps
+  );
+}
+
+Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Set the active step (zero based index).
+   */
+  activeStep: _propTypes2.default.number,
+  /**
+   * If set to 'true' and orientation is horizontal,
+   * then the step label will be positioned under the icon.
+   */
+  alternativeLabel: _propTypes2.default.bool,
+  /**
+   * Two or more `<Step />` components.
+   */
+  children: _propTypes2.default.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * A component to be placed between each step.
+   */
+  connector: _propTypes2.default.element,
+  /**
+   * If set the `Stepper` will not assist in controlling steps for linear flow.
+   */
+  nonLinear: _propTypes2.default.bool,
+  /**
+   * The stepper orientation (layout flow direction).
+   */
+  orientation: _propTypes2.default.oneOf(['horizontal', 'vertical'])
+} : {};
+
+Stepper.defaultProps = {
+  activeStep: 0,
+  alternativeLabel: false,
+  connector: _react2.default.createElement(_StepConnector2.default, null),
+  nonLinear: false,
+  orientation: 'horizontal'
+};
+
+Stepper.muiName = 'Stepper';
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiStepper' })(Stepper);

package/Stepper/index.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Stepper = require('./Stepper');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Stepper).default;
+  }
+});
+
+var _Step = require('./Step');
+
+Object.defineProperty(exports, 'Step', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Step).default;
+  }
+});
+
+var _StepButton = require('./StepButton');
+
+Object.defineProperty(exports, 'StepButton', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_StepButton).default;
+  }
+});
+
+var _StepContent = require('./StepContent');
+
+Object.defineProperty(exports, 'StepContent', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_StepContent).default;
+  }
+});
+
+var _StepIcon = require('./StepIcon');
+
+Object.defineProperty(exports, 'StepIcon', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_StepIcon).default;
+  }
+});
+
+var _StepLabel = require('./StepLabel');
+
+Object.defineProperty(exports, 'StepLabel', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_StepLabel).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/SvgIcon/SvgIcon.js

@@ -0,0 +1,147 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _helpers = require('../utils/helpers');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    root: {
+      userSelect: 'none',
+      fontSize: 24,
+      width: '1em',
+      height: '1em',
+      display: 'inline-block',
+      fill: 'currentColor',
+      flexShrink: 0,
+      transition: theme.transitions.create('fill', {
+        duration: theme.transitions.duration.shorter
+      })
+    },
+    colorPrimary: {
+      color: theme.palette.primary.main
+    },
+    colorSecondary: {
+      color: theme.palette.secondary.main
+    },
+    colorAction: {
+      color: theme.palette.action.active
+    },
+    colorDisabled: {
+      color: theme.palette.action.disabled
+    },
+    colorError: {
+      color: theme.palette.error.main
+    }
+  };
+};
+
+function SvgIcon(props) {
+  var children = props.children,
+      classes = props.classes,
+      classNameProp = props.className,
+      color = props.color,
+      nativeColor = props.nativeColor,
+      titleAccess = props.titleAccess,
+      viewBox = props.viewBox,
+      other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'color', 'nativeColor', 'titleAccess', 'viewBox']);
+
+
+  var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes['color' + (0, _helpers.capitalize)(color)], color !== 'inherit'), classNameProp);
+
+  return _react2.default.createElement(
+    'svg',
+    (0, _extends3.default)({
+      className: className,
+      focusable: 'false',
+      viewBox: viewBox,
+      color: nativeColor,
+      'aria-hidden': titleAccess ? 'false' : 'true'
+    }, other),
+    titleAccess ? _react2.default.createElement(
+      'title',
+      null,
+      titleAccess
+    ) : null,
+    children
+  );
+}
+
+SvgIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Node passed into the SVG element.
+   */
+  children: _propTypes2.default.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * You can use the `nativeColor` property to apply a color attribute to the SVG element.
+   */
+  color: _propTypes2.default.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  nativeColor: _propTypes2.default.string,
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: _propTypes2.default.string,
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   */
+  viewBox: _propTypes2.default.string
+} : {};
+
+SvgIcon.defaultProps = {
+  color: 'inherit',
+  viewBox: '0 0 24 24'
+};
+
+SvgIcon.muiName = 'SvgIcon';
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiSvgIcon' })(SvgIcon);

package/SvgIcon/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SvgIcon = require('./SvgIcon');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_SvgIcon).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }