@hisptz/react-ui/build/es/components/ConfigurationStepper/configurationStepper.stories.js

A collection of reusable complex DHIS2 react ui components.

import React from "react";
import ConfigurationStepper from ".";

const Template = args => /*#__PURE__*/React.createElement(ConfigurationStepper, args);

export const MultiStepper = Template.bind({});
const steps = [{
  label: "General",
  component: () => /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "column text-center"
  }, /*#__PURE__*/React.createElement("h1", null, "1"))),
  helpSteps: []
}, {
  label: "Data Configuration",
  component: () => /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "column text-center"
  }, /*#__PURE__*/React.createElement("h1", null, "2"))),
  helpSteps: []
}, {
  label: "Highlighted Indicators",
  component: () => /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "column text-center"
  }, /*#__PURE__*/React.createElement("h1", null, "3"))),
  helpSteps: []
}, {
  label: "Access",
  component: () => /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "column text-center"
  }, /*#__PURE__*/React.createElement("h1", null, "4"))),
  helpSteps: []
}, {
  label: "Options",
  component: () => /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "column"
  }, /*#__PURE__*/React.createElement("h1", null, "5"))),
  helpSteps: []
}];
MultiStepper.args = {
  steps,
  onLastAction: () => {
    console.log("Last action");
  },
  onLastActionButtonName: "Save",
  activeStepperBackGroundColor: "#00695c",
  onStepChange: () => true,
  activeStep: steps[0],
  setActiveStep: step => step
};
export const SimpleStepper = Template.bind({});
const simpleSteps = [{
  label: "Determinant",
  component: () => /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "column text-center"
  }, /*#__PURE__*/React.createElement("h3", null, "Determinant "))),
  helpSteps: []
}, {
  label: "Access",
  component: () => /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "column text-center"
  }, /*#__PURE__*/React.createElement("h3", null, "Access "))),
  helpSteps: []
}];
SimpleStepper.args = {
  steps: simpleSteps,
  onLastAction: () => {
    console.log("Last action");
  },
  onLastActionButtonName: "Save",
  activeStepperBackGroundColor: "#00695c",
  onStepChange: undefined,
  activeStep: simpleSteps[0]
};
export default {
  title: "Components/Stepper Configuration",
  component: ConfigurationStepper
};