@cimpress/react-components
Version:
React components to support the MCP styleguide
47 lines • 2.19 kB
JavaScript
import React, { useState } from 'react';
import { Stepper } from '../Stepper';
import { Step } from '../Step';
import { StepGroup } from '../StepGroup';
const meta = {
title: 'Components/Stepper',
component: Stepper,
};
export default meta;
function StepperStory(props) {
const [currentIndex, setIndex] = useState(0);
const handleStepClick = (index) => {
setIndex(index !== null && index !== void 0 ? index : 0);
};
return (React.createElement(Stepper, Object.assign({ status: "success", activeStep: currentIndex }, props),
React.createElement(Step, { name: "one", onClick: handleStepClick }, "One"),
React.createElement(Step, { name: "two", onClick: handleStepClick }, "Two"),
React.createElement(Step, { name: "three", onClick: handleStepClick }, "Three")));
}
export const Default = {
render: StepperStory,
};
export const Vertical = {
render: StepperStory,
args: {
vertical: true,
},
};
export const StepGroups = {
render() {
const [currentIndex, setIndex] = useState(0);
const handleStepClick = (index) => {
setIndex(index !== null && index !== void 0 ? index : 0);
};
return (React.createElement(Stepper, { status: "success", activeStep: currentIndex, vertical: true },
React.createElement(Step, { name: "one", onClick: handleStepClick }, "One"),
React.createElement(Step, { name: "two", onClick: handleStepClick }, "Two"),
React.createElement(StepGroup, { tip: "Lorem ipsum tipsum", contents: React.createElement("div", null, "Step Three") },
React.createElement(Step, { tip: "This step causes Step Three to inherit the danger color", onClick: handleStepClick },
React.createElement("div", null, "Sub-step one")),
React.createElement(Step, { overrideStatus: "warning", onClick: handleStepClick },
React.createElement("div", null, "Sub-step two")),
React.createElement(Step, { onClick: handleStepClick },
React.createElement("div", null, "Sub-step three")))));
},
};
//# sourceMappingURL=Stepper.stories.js.map