@carbon/ibm-security/lib/components/Wizard/Wizard-story.js

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _react = require("@storybook/react");
var _carbonComponents = require("carbon-components");
var _react2 = _interopRequireDefault(require("react"));
require("prismjs");
require("prismjs/components/prism-jsx");
var _recompose = require("recompose");
var _storybook = require("../../../.storybook");
var _Button = _interopRequireDefault(require("../Button"));
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _FormGroup = _interopRequireDefault(require("../FormGroup"));
var _RadioButton = _interopRequireDefault(require("../RadioButton"));
var _RadioButtonGroup = _interopRequireDefault(require("../RadioButtonGroup"));
var _TextInput = _interopRequireDefault(require("../TextInput"));
var _Wizard = _interopRequireDefault(require("./Wizard"));
var _WizardStep = _interopRequireDefault(require("./WizardStep"));
var _ = require("../../");
var _carbonComponentsReact = require("carbon-components-react");
var _excluded = ["type"],
  _excluded2 = ["state", "dispatch"],
  _excluded3 = ["initState"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
 * @file Wizard stories.
 * @copyright IBM Security 2019 - 2021
 */
var prefix = _carbonComponents.settings.prefix;
var focusTrap = (0, _addonKnobs.boolean)('focusTrap', false);
var sleep = /*#__PURE__*/function () {
  var _ref = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(ms) {
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          return _context.abrupt("return", new Promise(function (resolve) {
            return setTimeout(resolve, ms);
          }));
        case 1:
        case "end":
          return _context.stop();
      }
    }, _callee);
  }));
  return function sleep(_x) {
    return _ref.apply(this, arguments);
  };
}();
var labels = {
  WIZARD_MODAL_HEADING: 'Unsaved Changes',
  WIZARD_MODAL_BODY: 'Discard unsaved changes?',
  WIZARD_MODAL_PRIMARY_BUTTON: 'Discard',
  WIZARD_MODAL_SECONDARY_BUTTON: 'Cancel',
  WIZARD_FINISH_BUTTON: 'Finish',
  WIZARD_NEXT_BUTTON: 'Next',
  WIZARD_SAVE_BUTTON: 'Save',
  WIZARD_CANCEL_BUTTON: 'Cancel',
  WIZARD_BACK_BUTTON: 'Back',
  WIZARD_REVERT_BUTTON: 'Revert',
  WIZARD_CLOSE_BUTTON: 'Close',
  WIZARD_TEARSHEET_DELETE_BUTTON: 'Delete connection'
};
var steps = [{
  title: 'First Step that is very long will be truncated at 3 lines if the viewport size is small enough.',
  renderMain: function renderMain(state, setState) {
    return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("p", {
      style: {
        fontSize: 'normal'
      }
    }, "Please fill out the form."), /*#__PURE__*/_react2.default.createElement("section", null, /*#__PURE__*/_react2.default.createElement(_TextInput.default, {
      id: "input1",
      labelText: "Name",
      value: state.input1Value,
      onChange: function onChange(_ref2) {
        var target = _ref2.target;
        return setState({
          input1Value: target.value
        });
      }
    })));
  },
  next: function () {
    var _next = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee2(state) {
      return _regenerator.default.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            return _context2.abrupt("return", sleep(1000).then(function () {
              return (0, _addonActions.action)('next')(state);
            }));
          case 1:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
    function next(_x2) {
      return _next.apply(this, arguments);
    }
    return next;
  }(),
  validate: function validate(_ref3) {
    var _ref3$input1Value = _ref3.input1Value,
      input1Value = _ref3$input1Value === void 0 ? '' : _ref3$input1Value;
    return input1Value.trim().length >= 3;
  }
}, {
  title: 'Second Step',
  renderMain: function renderMain(_ref4, setState) {
    var input1Value = _ref4.input1Value,
      _ref4$checkboxValue = _ref4.checkboxValue,
      checkboxValue = _ref4$checkboxValue === void 0 ? false : _ref4$checkboxValue;
    return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("p", {
      style: {
        fontWeight: 200,
        fontSize: 'normal'
      }
    }, "Hi ", input1Value, "."), /*#__PURE__*/_react2.default.createElement("section", null, /*#__PURE__*/_react2.default.createElement("p", {
      style: {
        fontWeight: 200,
        fontSize: 'normal',
        color: 'grey'
      }
    }, "Is your name correct?", ' '), /*#__PURE__*/_react2.default.createElement(_Checkbox.default, {
      id: "name-checkbox",
      labelText: "My name is correct.",
      checked: checkboxValue,
      onChange: function onChange(checked) {
        return setState({
          checkboxValue: checked
        });
      }
    })));
  },
  next: function () {
    var _next2 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee3(state) {
      return _regenerator.default.wrap(function _callee3$(_context3) {
        while (1) switch (_context3.prev = _context3.next) {
          case 0:
            return _context3.abrupt("return", sleep(1000).then(function () {
              return (0, _addonActions.action)('next_done')(state);
            }));
          case 1:
          case "end":
            return _context3.stop();
        }
      }, _callee3);
    }));
    function next(_x3) {
      return _next2.apply(this, arguments);
    }
    return next;
  }(),
  validate: function validate(_ref5) {
    var _ref5$checkboxValue = _ref5.checkboxValue,
      checkboxValue = _ref5$checkboxValue === void 0 ? false : _ref5$checkboxValue;
    return checkboxValue;
  }
}];
var editableSteps = [{
  title: 'Configure connection',
  renderMain: function renderMain(state, setState) {
    return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("p", {
      style: {
        fontSize: 'normal'
      }
    }, "Please fill out the form."), /*#__PURE__*/_react2.default.createElement("section", null, /*#__PURE__*/_react2.default.createElement(_TextInput.default, {
      id: "input1",
      labelText: "Name",
      value: state.input1Value,
      onChange: function onChange(_ref6) {
        var target = _ref6.target;
        return setState({
          input1Value: target.value
        });
      }
    })));
  },
  next: function () {
    var _next3 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee4(state) {
      return _regenerator.default.wrap(function _callee4$(_context4) {
        while (1) switch (_context4.prev = _context4.next) {
          case 0:
            return _context4.abrupt("return", sleep(1000).then(function () {
              return (0, _addonActions.action)('Save')(state);
            }));
          case 1:
          case "end":
            return _context4.stop();
        }
      }, _callee4);
    }));
    function next(_x4) {
      return _next3.apply(this, arguments);
    }
    return next;
  }(),
  validate: function validate(_ref7) {
    var _ref7$input1Value = _ref7.input1Value,
      input1Value = _ref7$input1Value === void 0 ? '' : _ref7$input1Value;
    return input1Value.trim().length >= 3;
  }
}, {
  title: 'Attribute mapping',
  renderMain: function renderMain(_ref8, setState) {
    var input1Value = _ref8.input1Value,
      _ref8$checkboxValue = _ref8.checkboxValue,
      checkboxValue = _ref8$checkboxValue === void 0 ? false : _ref8$checkboxValue;
    return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("p", {
      style: {
        fontWeight: 200,
        fontSize: 'normal'
      }
    }, "Hi ", input1Value, "."), /*#__PURE__*/_react2.default.createElement("section", null, /*#__PURE__*/_react2.default.createElement("p", {
      style: {
        fontWeight: 200,
        fontSize: 'normal',
        color: 'grey'
      }
    }, "Is your name correct?", ' '), /*#__PURE__*/_react2.default.createElement(_Checkbox.default, {
      id: "name-checkbox",
      labelText: "My name is correct.",
      checked: checkboxValue,
      onChange: function onChange(checked) {
        return setState({
          checkboxValue: checked
        });
      }
    })));
  },
  validate: function validate(_ref9) {
    var _ref9$checkboxValue = _ref9.checkboxValue,
      checkboxValue = _ref9$checkboxValue === void 0 ? false : _ref9$checkboxValue;
    return checkboxValue;
  },
  next: function () {
    var _next4 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee5(state) {
      return _regenerator.default.wrap(function _callee5$(_context5) {
        while (1) switch (_context5.prev = _context5.next) {
          case 0:
            return _context5.abrupt("return", sleep(10000).then(function () {
              return (0, _addonActions.action)('Save')(state);
            }));
          case 1:
          case "end":
            return _context5.stop();
        }
      }, _callee5);
    }));
    function next(_x5) {
      return _next4.apply(this, arguments);
    }
    return next;
  }()
}];
var reducers = {
  TOGGLE_OPEN: function TOGGLE_OPEN(state) {
    return _objectSpread(_objectSpread({}, state), {}, {
      isOpen: !state.isOpen
    });
  },
  UPDATE_INIT_STATE: function UPDATE_INIT_STATE(state) {
    var _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
      _ref10$initState = _ref10.initState,
      initState = _ref10$initState === void 0 ? {} : _ref10$initState;
    return _objectSpread(_objectSpread({}, state), {}, {
      initState: initState
    });
  },
  DEFAULT: function DEFAULT() {
    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    return state;
  }
};
var reduceState = function reduceState() {
  var reducers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
    DEFAULT: function DEFAULT() {
      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      return state;
    }
  };
  return function () {
    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var _ref11 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
      type = _ref11.type,
      otherState = (0, _objectWithoutProperties2.default)(_ref11, _excluded);
    return (reducers[type] || reducers.DEFAULT)(state, _objectSpread({
      type: type
    }, otherState));
  };
};
var enhanceWithState = function enhanceWithState() {
  var initState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return (0, _recompose.withReducer)('state', 'dispatch', reduceState(reducers), {
    isOpen: false,
    initState: initState
  });
};
function WizardWrapper(_ref12) {
  var state = _ref12.state,
    dispatch = _ref12.dispatch,
    otherProps = (0, _objectWithoutProperties2.default)(_ref12, _excluded2);
  return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement(_Button.default, {
    onClick: function onClick() {
      return dispatch({
        type: 'TOGGLE_OPEN'
      }, function (_ref13) {
        var isOpen = _ref13.isOpen;
        return (0, _addonActions.action)('isOpen')(isOpen);
      });
    },
    kind: state.isOpen ? 'secondary' : 'primary'
  }, state.isOpen ? 'Close' : 'Open'), /*#__PURE__*/_react2.default.createElement(_Wizard.default, (0, _extends2.default)({}, otherProps, {
    focusTrap: focusTrap,
    initState: state.initState,
    isOpen: state.isOpen,
    onClose: function onClose(componentState) {
      dispatch({
        type: 'UPDATE_INIT_STATE',
        initState: componentState
      }, function (_ref14) {
        var initState = _ref14.initState;
        return (0, _addonActions.action)('onClose')(initState);
      });
      dispatch({
        type: 'TOGGLE_OPEN'
      });
    },
    loadingMessage: "Saving..."
  })));
}
var markdown = function markdown() {
  var useDefault = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  return "\n  ~~~jsx\n  /// ...\n  /// Example use:\n  render() {\n    const {isOpen, wizardState = {}} = this.state;\n    return (\n      <div>\n        <Button\n          onClick={(_)=>this.setState(\n            ({isOpen}) => ({isOpen: !isOpen})\n          )}\n        >\n          {this.state.isOpen ? 'Close' : 'Open'}\n        </Button>\n\n          <Wizard\n            title=\"Example\"\n            subTitle=\"Example Wizard\"\n            isOpen={(wizardState) => this.setState({isOpen: true})}\n            onClose={(wizardState) => this.setState({wizardState, isOpen: false})}\n            initState={wizardState} ".concat(useDefault ? "\n            isOpen={isOpen}" : '', "\n            onDelete={/*passing a onDelete handler will enable edit mode*/}\n          >\n            <WizardStep\n              title=\"First Step\"\n              renderMain={(state, setState) => (<div><p>....</p>...</div>)}\n              next={async state => state}\n              validate={({ input1Value = '' }) => input1Value.trim().length >= 3}\n            />\n            <WizardStep\n              title=\"2nd Step\"\n              renderMain={(state, setState) => (<div><p>....</p>...</div>)}\n              validate={({ checkboxValue = false }) => checkboxValue}\n              next={async state => state}\n            />\n          </Wizard>\n      </div>\n    );\n  }\n  ///...\n  ~~~\n  ");
};
(0, _react.storiesOf)((0, _storybook.patterns)('Wizard#legacy'), module).addDecorator(function (Story) {
  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.InlineNotification, {
    className: "page-layouts__banner",
    actions: /*#__PURE__*/_react2.default.createElement(_.NotificationActionButton, {
      href: "https://v1-ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-tearsheet-tearsheet--tearsheet",
      rel: "noopener noreferrer",
      target: "_blank"
    }, "View replacement"),
    kind: "info",
    subtitle: "Pattern no longer supported. The pattern will remain available, but plan to migrate to the pattern replacement.",
    title: "",
    hideCloseButton: true
  }), /*#__PURE__*/_react2.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react2.default.createElement(Story, null)));
}).add('default', function () {
  _Wizard.default.displayName = 'Wizard';
  _Wizard.default.__docgenInfo = _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo), {}, {
    props: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props), {}, {
      rootNode: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props.rootNode), {}, {
        defaultValue: {
          value: 'document.body',
          computed: true
        }
      }),
      steps: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props.steps), {}, {
        type: {
          name: 'array'
        }
      })
    })
  });
  return /*#__PURE__*/_react2.default.createElement("div", {
    style: {
      zIndex: 'unset',
      position: 'relative'
    }
  }, /*#__PURE__*/_react2.default.createElement("h1", {
    style: {
      fontWeight: 'lighter',
      marginTop: '1rem',
      marginLeft: '1.5rem'
    }
  }, "See Knobs"), /*#__PURE__*/_react2.default.createElement(_Wizard.default, {
    focusTrap: focusTrap,
    title: "Example",
    subTitle: "5 mins setup",
    initState: (0, _addonKnobs.object)('initState', {}),
    isOpen: (0, _addonKnobs.boolean)('isOpen', true),
    onClose: (0, _addonActions.action)('onClose'),
    onDelete: (0, _addonKnobs.boolean)('editMode', false) ? function (componentState) {
      return new Promise(function (resolve) {
        (0, _addonActions.action)('onDelete')(componentState);
        setTimeout(function () {
          resolve();
        }, 3000);
      });
    } : undefined,
    labels: labels
  }, /*#__PURE__*/_react2.default.createElement(_WizardStep.default, steps[0]), /*#__PURE__*/_react2.default.createElement(_WizardStep.default, steps[1])));
}, {
  info: {
    text: "## Default use of the Wizard Component\n        ".concat(markdown(true), "\n        ")
  }
}).add('dynamic', function () {
  _Wizard.default.displayName = 'Wizard';
  _Wizard.default.__docgenInfo = _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo), {}, {
    props: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props), {}, {
      rootNode: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props.rootNode), {}, {
        defaultValue: {
          value: 'document.body',
          computed: true
        }
      }),
      steps: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props.steps), {}, {
        type: {
          name: 'array'
        }
      })
    })
  });
  return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("h1", {
    style: {
      fontWeight: 'lighter',
      marginTop: '1rem',
      marginLeft: '1.5rem'
    }
  }, "See Knobs"), /*#__PURE__*/_react2.default.createElement(_Wizard.default, {
    focusTrap: focusTrap,
    title: "Example",
    subTitle: "5 mins setup",
    initState: (0, _addonKnobs.object)('initState', {
      eggs: false,
      oats: false,
      salad: false,
      soup: false
    }),
    isOpen: (0, _addonKnobs.boolean)('isOpen', true),
    onClose: (0, _addonActions.action)('onClose'),
    labels: labels,
    loadingMessage: "Loading..."
  }, /*#__PURE__*/_react2.default.createElement(_WizardStep.default, {
    title: "First Step",
    renderMain: function renderMain(state, setState) {
      return /*#__PURE__*/_react2.default.createElement(_FormGroup.default, {
        legendText: "Select type of meal"
      }, /*#__PURE__*/_react2.default.createElement(_RadioButtonGroup.default, {
        onChange: function onChange(value) {
          setState({
            mealType: value
          });
        },
        defaultSelected: state.mealType,
        name: "radio-button-group",
        legend: "Group Legend"
      }, /*#__PURE__*/_react2.default.createElement(_RadioButton.default, {
        value: "breakfast",
        labelText: "Breakfast",
        id: "option-breakfast"
      }), /*#__PURE__*/_react2.default.createElement(_RadioButton.default, {
        value: "lunch",
        labelText: "Lunch",
        id: "option-lunch"
      }), /*#__PURE__*/_react2.default.createElement(_RadioButton.default, {
        value: "disabled",
        labelText: "Dinner",
        id: "option-dinner",
        disabled: true
      })));
    },
    next: (/*#__PURE__*/function () {
      var _ref15 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee6(state) {
        return _regenerator.default.wrap(function _callee6$(_context6) {
          while (1) switch (_context6.prev = _context6.next) {
            case 0:
              return _context6.abrupt("return", sleep(1000).then(function () {
                return (0, _addonActions.action)('next')(state);
              }));
            case 1:
            case "end":
              return _context6.stop();
          }
        }, _callee6);
      }));
      return function (_x6) {
        return _ref15.apply(this, arguments);
      };
    }()),
    validate: function validate(_ref16) {
      var mealType = _ref16.mealType;
      return mealType !== undefined;
    }
  }), /*#__PURE__*/_react2.default.createElement(_WizardStep.default, {
    title: "Second Step",
    renderMain: function renderMain(state, setState) {
      var MEAL_MENU = {
        breakfast: /*#__PURE__*/_react2.default.createElement("fieldset", {
          className: "".concat(prefix, "--fieldset")
        }, /*#__PURE__*/_react2.default.createElement("legend", {
          className: "".concat(prefix, "--label")
        }, "Select breakfast options"), /*#__PURE__*/_react2.default.createElement(_Checkbox.default, {
          id: "checkbox-eggs",
          labelText: "Eggs",
          checked: state.eggs,
          onChange: function onChange(eggs) {
            return setState({
              eggs: eggs
            });
          }
        }), /*#__PURE__*/_react2.default.createElement(_Checkbox.default, {
          id: "checkbox-oats",
          labelText: "Oats",
          checked: state.oats,
          onChange: function onChange(oats) {
            return setState({
              oats: oats
            });
          }
        })),
        lunch: /*#__PURE__*/_react2.default.createElement("fieldset", {
          className: "".concat(prefix, "--fieldset")
        }, /*#__PURE__*/_react2.default.createElement("legend", {
          className: "".concat(prefix, "--label")
        }, "Select lunch options"), /*#__PURE__*/_react2.default.createElement(_Checkbox.default, {
          id: "checkbox-soup",
          labelText: "Soup",
          checked: state.soup,
          onChange: function onChange(soup) {
            return setState({
              soup: soup
            });
          }
        }), /*#__PURE__*/_react2.default.createElement(_Checkbox.default, {
          id: "checkbox-salad",
          labelText: "Salad",
          checked: state.salad,
          onChange: function onChange(salad) {
            return setState({
              salad: salad
            });
          }
        }))
      };
      return MEAL_MENU[state.mealType];
    },
    next: (/*#__PURE__*/function () {
      var _ref17 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee7(state) {
        return _regenerator.default.wrap(function _callee7$(_context7) {
          while (1) switch (_context7.prev = _context7.next) {
            case 0:
              return _context7.abrupt("return", sleep(1000).then(function () {
                return (0, _addonActions.action)('next_done')(state);
              }));
            case 1:
            case "end":
              return _context7.stop();
          }
        }, _callee7);
      }));
      return function (_x7) {
        return _ref17.apply(this, arguments);
      };
    }())
  })));
}, {
  info: {
    text: "\n          Dynamic content.\n        "
  }
}).add('With open/close button', function () {
  var Wizard = enhanceWithState((0, _addonKnobs.object)('initState', {}))(WizardWrapper);
  Wizard.displayName = 'Wizard';
  Wizard.__docgenInfo = _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo), {}, {
    props: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props), {}, {
      steps: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props.steps), {}, {
        type: {
          name: 'array'
        }
      })
    })
  });
  Wizard.defaultProps = _Wizard.default.defaultProps;
  return /*#__PURE__*/_react2.default.createElement(Wizard, {
    title: "Title of setup",
    subTitle: "5 mins setup",
    labels: labels
  }, steps.map(function (step) {
    return /*#__PURE__*/_react2.default.createElement(_WizardStep.default, (0, _extends2.default)({
      key: step.title
    }, step));
  }));
}, {
  info: {
    text: "## Wizard with open/close button\n        ".concat(markdown(false), "\n        ")
  }
}).add('With editable wizard', function () {
  var Wizard = function Wizard(_ref18) {
    var initState = _ref18.initState,
      props = (0, _objectWithoutProperties2.default)(_ref18, _excluded3);
    var _React$useState = _react2.default.useState(initState),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
      state = _React$useState2[0];
    return /*#__PURE__*/_react2.default.createElement(_Wizard.default, (0, _extends2.default)({}, props, {
      initState: state
    }));
  };
  Wizard.displayName = 'Wizard';
  Wizard.__docgenInfo = _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo), {}, {
    props: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props), {}, {
      steps: _objectSpread(_objectSpread({}, _Wizard.default.__docgenInfo.props.steps), {}, {
        type: {
          name: 'array'
        }
      })
    })
  });
  Wizard.defaultProps = _Wizard.default.defaultProps;
  var selectFn = function selectFn(value) {
    switch (value) {
      case 'true':
        {
          return true;
        }
      case 'false':
        {
          return false;
        }
      default:
        {
          return undefined;
        }
    }
  };
  return /*#__PURE__*/_react2.default.createElement("div", {
    style: {
      zIndex: 'unset',
      position: 'relative'
    }
  }, /*#__PURE__*/_react2.default.createElement(Wizard, {
    initState: (0, _addonKnobs.object)('initState', {
      input1Value: 'Placeholder text',
      checkboxValue: false
    }),
    title: "Title of setup",
    subTitle: "5 mins setup",
    isSequential: selectFn((0, _addonKnobs.select)('isSequential', ['true', 'false', 'unset'], 'unset')),
    onDelete: (0, _addonKnobs.boolean)('deleteMode', true) ? function (componentState) {
      return new Promise(function (resolve) {
        (0, _addonActions.action)('onDelete')(componentState);
        setTimeout(function () {
          resolve();
        }, 3000);
      });
    } : undefined,
    labels: labels
  }, editableSteps.map(function (step) {
    return /*#__PURE__*/_react2.default.createElement(_WizardStep.default, (0, _extends2.default)({
      key: step.title
    }, step));
  })));
}, {
  info: {
    text: "## Editable Wizard\n        ".concat(markdown(false), "\n        ")
  }
});