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

package/es/Stepper/StepConnector.js

@@ -0,0 +1,85 @@
+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: {
+    flex: '1 1 auto'
+  },
+  horizontal: {},
+  vertical: {
+    marginLeft: 12, // half icon
+    padding: `0 0 ${theme.spacing.unit}px`
+  },
+  alternativeLabel: {
+    position: 'absolute',
+    top: theme.spacing.unit + 4,
+    left: 'calc(50% + 20px)',
+    right: 'calc(-50% + 20px)'
+  },
+  line: {
+    display: 'block',
+    borderColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
+  },
+  lineHorizontal: {
+    borderTopStyle: 'solid',
+    borderTopWidth: 1
+  },
+  lineVertical: {
+    borderLeftStyle: 'solid',
+    borderLeftWidth: 1,
+    minHeight: theme.spacing.unit * 3
+  }
+});
+
+/**
+ * @ignore - internal component.
+ */
+function StepConnector(props) {
+  const { alternativeLabel, className: classNameProp, classes, orientation } = props,
+        other = _objectWithoutProperties(props, ['alternativeLabel', 'className', 'classes', 'orientation']);
+
+  const className = classNames(classes.root, classes[orientation], {
+    [classes.alternativeLabel]: alternativeLabel
+  }, classNameProp);
+  const lineClassName = classNames(classes.line, {
+    [classes.lineHorizontal]: orientation === 'horizontal',
+    [classes.lineVertical]: orientation === 'vertical'
+  });
+
+  return React.createElement(
+    'div',
+    _extends({ className: className }, other),
+    React.createElement('span', { className: lineClassName })
+  );
+}
+
+StepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * @ignore
+   * Set internally by Step when it's supplied with the alternativeLabel property.
+   */
+  alternativeLabel: PropTypes.bool,
+  /**
+   * Useful to extend the style applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+} : {};
+
+StepConnector.defaultProps = {
+  alternativeLabel: false,
+  orientation: 'horizontal'
+};
+
+export default withStyles(styles, { name: 'MuiStepConnector' })(StepConnector);

package/es/Stepper/StepContent.js

@@ -0,0 +1,116 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import warning from 'warning';
+import classNames from 'classnames';
+import Collapse from '../transitions/Collapse';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+  root: {
+    marginTop: theme.spacing.unit,
+    marginLeft: 12, // half icon
+    paddingLeft: theme.spacing.unit + 12, // margin + half icon
+    paddingRight: theme.spacing.unit,
+    borderLeft: `1px solid ${theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
+  },
+  last: {
+    borderLeft: 'none'
+  },
+  transition: {}
+});
+
+function StepContent(props) {
+  const {
+    active,
+    alternativeLabel,
+    children,
+    classes,
+    className,
+    completed,
+    last,
+    optional,
+    orientation,
+    transition: Transition,
+    transitionDuration
+  } = props,
+        other = _objectWithoutProperties(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'last', 'optional', 'orientation', 'transition', 'transitionDuration']);
+
+  process.env.NODE_ENV !== "production" ? warning(orientation === 'vertical', 'Material-UI: <StepContent /> is only designed for use with the vertical stepper.') : void 0;
+
+  return React.createElement(
+    'div',
+    _extends({ className: classNames(classes.root, { [classes.last]: last }, className) }, other),
+    React.createElement(
+      Transition,
+      {
+        'in': active,
+        className: classes.transition,
+        timeout: transitionDuration,
+        unmountOnExit: true
+      },
+      children
+    )
+  );
+}
+
+StepContent.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * @ignore
+   * Expands the content.
+   */
+  active: PropTypes.bool,
+  /**
+   * @ignore
+   * Set internally by Step when it's supplied with the alternativeLabel property.
+   */
+  alternativeLabel: PropTypes.bool,
+  /**
+   * Step content.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  completed: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  last: PropTypes.bool,
+  /**
+   * @ignore
+   * Set internally by Step when it's supplied with the optional property.
+   */
+  optional: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * Collapse component.
+   */
+  transition: PropTypes.func,
+  /**
+   * Adjust the duration of the content expand transition.
+   * Passed as a property to the transition component.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   */
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto'])])
+} : {};
+
+StepContent.defaultProps = {
+  transition: Collapse,
+  transitionDuration: 'auto'
+};
+
+export default withStyles(styles, { name: 'MuiStepContent' })(StepContent);

package/es/Stepper/StepIcon.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import CheckCircle from '../internal/svg-icons/CheckCircle';
+import withStyles from '../styles/withStyles';
+import StepPositionIcon from './StepPositionIcon';
+
+export const styles = theme => ({
+  root: {
+    display: 'block'
+  },
+  completed: {
+    color: theme.palette.primary.main
+  }
+});
+
+function StepIcon(props) {
+  const { completed, icon, active, classes } = props;
+
+  if (typeof icon === 'number' || typeof icon === 'string') {
+    if (completed) {
+      return React.createElement(CheckCircle, { className: classNames(classes.root, classes.completed) });
+    }
+    return React.createElement(StepPositionIcon, { className: classes.root, position: icon, active: active });
+  }
+
+  return icon;
+}
+
+StepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Whether this step is active.
+   */
+  active: PropTypes.bool,
+  /**
+   * Classses for component style customizations.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed: PropTypes.bool,
+  /**
+   * The icon displayed by the step label.
+   */
+  icon: PropTypes.node.isRequired
+} : {};
+
+StepIcon.defaultProps = {
+  active: false,
+  completed: false
+};
+
+export default withStyles(styles, { name: 'MuiStepIcon' })(StepIcon);

package/es/Stepper/StepLabel.js

@@ -0,0 +1,170 @@
+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 Typography from '../Typography';
+import StepIcon from './StepIcon';
+
+export const styles = theme => ({
+  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) {
+  const {
+    active,
+    alternativeLabel,
+    children,
+    classes,
+    className: classNameProp,
+    completed,
+    disabled,
+    icon,
+    last,
+    optional,
+    orientation
+  } = props,
+        other = _objectWithoutProperties(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'disabled', 'icon', 'last', 'optional', 'orientation']);
+
+  return React.createElement(
+    'span',
+    _extends({
+      className: classNames(classes.root, classes[orientation], {
+        [classes.disabled]: disabled,
+        [classes.alternativeLabel]: alternativeLabel
+      }, classNameProp)
+    }, other),
+    icon && React.createElement(
+      'span',
+      {
+        className: classNames(classes.iconContainer, {
+          [classes.iconContainerAlternativeLabel]: alternativeLabel
+        })
+      },
+      React.createElement(StepIcon, {
+        completed: completed,
+        active: active,
+        icon: icon,
+        alternativeLabel: alternativeLabel
+      })
+    ),
+    React.createElement(
+      'span',
+      { className: classes.labelContainer },
+      React.createElement(
+        Typography,
+        {
+          variant: 'body1',
+          component: 'span',
+          className: classNames(classes.label, {
+            [classes.labelAlternativeLabel]: alternativeLabel,
+            [classes.labelCompleted]: completed,
+            [classes.labelActive]: active
+          })
+        },
+        children
+      ),
+      optional
+    )
+  );
+}
+
+StepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * @ignore
+   * Sets the step as active. Is passed to child components.
+   */
+  active: PropTypes.bool,
+  /**
+   * @ignore
+   * Set internally by Stepper when it's supplied with the alternativeLabel property.
+   */
+  alternativeLabel: PropTypes.bool,
+  /**
+   * In most cases will simply be a string containing a title for the label.
+   */
+  children: PropTypes.node,
+  /**
+   * Custom styles for component.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed: PropTypes.bool,
+  /**
+   * Mark the step as disabled, will also disable the button if
+   * `StepLabelButton` is a child of `StepLabel`. Is passed to child components.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Override the default icon.
+   */
+  icon: PropTypes.node,
+  /**
+   * @ignore
+   */
+  last: PropTypes.bool,
+  /**
+   * The optional node to display.
+   */
+  optional: PropTypes.node,
+  /**
+   * @ignore
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+} : {};
+
+StepLabel.defaultProps = {
+  active: false,
+  alternativeLabel: false,
+  completed: false,
+  disabled: false,
+  last: false,
+  orientation: 'horizontal'
+};
+
+StepLabel.muiName = 'StepLabel';
+
+export default withStyles(styles, { name: 'MuiStepLabel' })(StepLabel);

package/es/Stepper/StepPositionIcon.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import SvgIcon from '../SvgIcon';
+
+export const styles = theme => ({
+  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 = React.createElement('circle', { cx: '12', cy: '12', r: '12' });
+
+function StepPositionIcon(props) {
+  const { position, classes, className: classNameProp, active } = props;
+  const className = classNames(classes.root, {
+    [classes.active]: active
+  }, classNameProp);
+
+  return React.createElement(
+    SvgIcon,
+    { className: className },
+    _ref,
+    React.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: PropTypes.bool,
+  /**
+   * Classses for component style customizations.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The step position as a number.
+   */
+  position: PropTypes.node
+} : {};
+
+export default withStyles(styles, { name: 'MuiStepPosition' })(StepPositionIcon);

package/es/Stepper/Stepper.js

@@ -0,0 +1,126 @@
+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 Paper from '../Paper';
+import StepConnector from './StepConnector';
+
+export const styles = theme => ({
+  root: {
+    display: 'flex',
+    padding: theme.spacing.unit * 3
+  },
+  horizontal: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  vertical: {
+    flexDirection: 'column'
+  },
+  alternativeLabel: {
+    alignItems: 'flex-start'
+  }
+});
+
+function Stepper(props) {
+  const {
+    activeStep,
+    alternativeLabel,
+    children,
+    classes,
+    className: classNameProp,
+    connector: connectorProp,
+    nonLinear,
+    orientation
+  } = props,
+        other = _objectWithoutProperties(props, ['activeStep', 'alternativeLabel', 'children', 'classes', 'className', 'connector', 'nonLinear', 'orientation']);
+
+  const className = classNames(classes.root, classes[orientation], {
+    [classes.alternativeLabel]: alternativeLabel
+  }, classNameProp);
+
+  const connector = React.isValidElement(connectorProp) ? React.cloneElement(connectorProp, { orientation }) : null;
+  const childrenArray = React.Children.toArray(children);
+  const steps = childrenArray.map((step, index) => {
+    const controlProps = {
+      index,
+      orientation,
+      active: false,
+      completed: false,
+      disabled: false,
+      last: index + 1 === childrenArray.length,
+      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 && React.cloneElement(connector, {
+      key: index // eslint-disable-line react/no-array-index-key
+    }), React.cloneElement(step, _extends({}, controlProps, step.props))];
+  });
+
+  return React.createElement(
+    Paper,
+    _extends({ square: true, elevation: 0, className: className }, other),
+    steps
+  );
+}
+
+Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Set the active step (zero based index).
+   */
+  activeStep: PropTypes.number,
+  /**
+   * If set to 'true' and orientation is horizontal,
+   * then the step label will be positioned under the icon.
+   */
+  alternativeLabel: PropTypes.bool,
+  /**
+   * Two or more `<Step />` components.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * A component to be placed between each step.
+   */
+  connector: PropTypes.element,
+  /**
+   * If set the `Stepper` will not assist in controlling steps for linear flow.
+   */
+  nonLinear: PropTypes.bool,
+  /**
+   * The stepper orientation (layout flow direction).
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+} : {};
+
+Stepper.defaultProps = {
+  activeStep: 0,
+  alternativeLabel: false,
+  connector: React.createElement(StepConnector, null),
+  nonLinear: false,
+  orientation: 'horizontal'
+};
+
+Stepper.muiName = 'Stepper';
+
+export default withStyles(styles, { name: 'MuiStepper' })(Stepper);

package/es/Stepper/index.js

@@ -0,0 +1,6 @@
+export { default } from './Stepper';
+export { default as Step } from './Step';
+export { default as StepButton } from './StepButton';
+export { default as StepContent } from './StepContent';
+export { default as StepIcon } from './StepIcon';
+export { default as StepLabel } from './StepLabel';