@cimpress/react-components
Version:
React components to support the MCP styleguide
86 lines • 5.99 kB
JavaScript
import React, { Component } from 'react';
import { Step, StepGroup, Stepper } from '@cimpress/react-components';
export default class StepperDemo extends Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
activeStep: '1',
verticalActiveStep: '1',
}
});
Object.defineProperty(this, "setStep", {
enumerable: true,
configurable: true,
writable: true,
value: index => {
this.setState({ activeStep: index });
}
});
Object.defineProperty(this, "setVerticalStep", {
enumerable: true,
configurable: true,
writable: true,
value: index => {
this.setState({ verticalActiveStep: index });
}
});
}
render() {
const checkmarkIcon = '✓';
return (React.createElement("div", null,
React.createElement(Stepper, { activeStep: this.state.activeStep },
React.createElement(Step, { onClick: this.setStep },
React.createElement("div", null, "Step One"),
React.createElement("small", null, "A step")),
React.createElement(Step, { onClick: this.setStep },
React.createElement("div", null, "Step Two"),
React.createElement("small", null, "It's another step!")),
React.createElement(Step, { onClick: this.setStep, tip: "Lorem ipsum tipsum" },
React.createElement("div", null, "Step Three"),
React.createElement("small", null, "A third step"))),
React.createElement("h5", null, "Another stepper..."),
React.createElement("div", { style: { width: '200px' } },
React.createElement(Stepper, { small: true, activeStep: "3", status: "warning" },
React.createElement(Step, { name: "order accepted", tip: "Order accepted by the platform" }),
React.createElement(Step, { name: "doc review", tip: "Document successfully rendered" }),
React.createElement(Step, { name: "inventory", tip: "Inventory check passed" }),
React.createElement(Step, { name: "processing", tip: "Order processed" }),
React.createElement(Step, { name: "production", tip: "In production", tipDirection: "bottom" }),
React.createElement(Step, { name: "shipped", tip: "Shipped" }))),
React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-around', marginTop: '10px' } },
React.createElement("div", null,
React.createElement("h5", null, "Vertical Stepper with SubSteps"),
React.createElement("p", null, "Nested steps with a StepGroup are only supported for full-sized vertical steppers."),
React.createElement("div", { style: { height: '330px' } },
React.createElement(Stepper, { activeStep: this.state.verticalActiveStep, vertical: true },
React.createElement(Step, { onClick: this.setVerticalStep },
React.createElement("div", null, "Step One"),
React.createElement("small", null, "A step")),
React.createElement(Step, { overrideStatus: "warning", onClick: this.setVerticalStep },
React.createElement("div", null, "Step Two")),
React.createElement(StepGroup, { onClick: this.setVerticalStep, tip: "Lorem ipsum tipsum", contents: React.createElement("div", null, "Step Three") },
React.createElement(Step, { overrideStatus: "danger", tip: "This step causes Step Three to inherit the danger color", onClick: this.setVerticalStep },
React.createElement("div", null, "Sub-step one")),
React.createElement(Step, { overrideStatus: "warning", onClick: this.setVerticalStep },
React.createElement("div", null, "Sub-step two")),
React.createElement(Step, { onClick: this.setVerticalStep },
React.createElement("div", null, "Sub-step three"))),
React.createElement(Step, { onClick: this.setVerticalStep, icon: checkmarkIcon },
React.createElement("div", null, "Step With Custom Icon"))))),
React.createElement("div", { style: { height: '550px' } },
React.createElement("h5", null, "Small Vertical Stepper"),
React.createElement("div", { style: { height: '250px' } },
React.createElement(Stepper, { small: true, vertical: true, activeStep: "3", partial: true, status: "warning" },
React.createElement(Step, { name: "order accepted", tip: "Order accepted by the platform", tipDirection: "right" }),
React.createElement(Step, { name: "doc review", tip: "Document successfully rendered", tipDirection: "right" }),
React.createElement(Step, { name: "inventory", tip: "Inventory check passed", tipDirection: "right" }),
React.createElement(Step, { name: "processing", tip: "Order processed", tipDirection: "right" }),
React.createElement(Step, { name: "production", tip: "In production", tipDirection: "right" }),
React.createElement(Step, { name: "shipped", tip: "Shipped", tipDirection: "right" })))))));
}
}
//# sourceMappingURL=stepper.js.map