function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
var _excluded = ["steps", "component", "showSubSubSteps", "completedText", "editText", "resumeText", "startText"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from "preact/compat";
import Step from "./Step";
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/step-list/).
 *
 * ## Start, Resume, and Edit links
 *
 * A user interacts with the steps through "Start", "Resume", and "Edit"
 * links.
 *
 * In the React component, the links' `href` properties are determined by the
 * `step` object's `href` property. One can also optionally pass an
 * `onStepLinkClick` function that will cancel the default link behavior and call
 * `onStepLinkClick` with `href` as a parameter for apps that handle routing with
 * JavaScript.
 *
 * When a step has substeps and is incomplete, the `href` property should be set to
 * match the `href` of the current substep—that is, the first incomplete substep.
 * The "Edit" button will only appear on substeps that have been completed.
 *
 * ## Managing list state
 *
 * ### Substeps
 *
 * The `<StepList>` component takes an array of step objects. From there steps can
 * be broken down infinitely into sub-steps. This allows us to have unique URLs for
 * each part of a step; however, by default we only display two levels of this tree
 * —the _step_ and _substep_. This default behavior should remain unchanged except
 * for special circumstances. It is better not to overwhelm the user with showing
 * all the substeps and giving them names.
 *
 * We do, nonetheless, encourage the use of sub-substeps that are not visible where
 * these substeps span multiple pages and have their own unique URLs. If, for
 * example, the user completes the first page of the `household > overall` substep
 * where they list the household members but has not completed the second page
 * where they define those members' relationships to each other, we want the
 * "Resume" button to take them back to the relationships page and not the first
 * page where they entered their names. This, of course, requires an extra
 * steps-building process to update a top-level steps' `href` property by
 * traversing the substep tree to find the first incomplete step. See the
 * [Completed, started, and isNextStep](#completed-started-and-isnextstep) section
 * below for an example JavaScript function that can change the `href` of steps
 * based on their substeps.
 *
 * ### Completed, started, and isNextStep
 *
 * The _state_ of a step object will be defined for these purposes as the values
 * of its `completed`, `started`, and `isNextStep` properties. These correspond to
 * different visual states when rendered by the `<StepList>`, showing "Completed",
 * "Resume", or "Start" respectively. For steps with substeps, the state should be
 * representative of the collective states of its substeps. For example, if a step
 * has substeps that have `completed: false`, that step should not have
 * `completed: true` because not all of its substeps have been completed. Similarly
 * a step can only be `started` if at least one of its substeps has been `started`.
 * This should be true for each of the substep's substeps and so on. Below is an
 * example function that can propagate this state information up from the smallest
 * substep to the largest step before passing the steps array to the `<StepList>`
 * component.
 *
 * ```js
 * function propagateSubstepState(step) {
 *   if (step.steps) {
 *     const steps = step.steps.map(propagateSubstepState);
 *     const newStep = {
 *       ...step,
 *       steps,
 *       started: steps.some((s) => s.started),
 *       completed: steps.every((s) => s.completed),
 *     };
 *     if (!newStep.completed) {
 *       const nextStep = steps.find((s) => !s.completed);
 *       newStep.href = nextStep.href;
 *     }
 *     return newStep;
 *   } else {
 *     return step;
 *   }
 * }
 *
 * // ...
 * //
 * // Render function:
 *
 * const steps = rawSteps.map(propagateSubstepState);
 * return <StepList steps={steps} />;
 * ```
 */
export var StepList = function StepList(_ref) {
  var steps = _ref.steps,
    component = _ref.component,
    _ref$showSubSubSteps = _ref.showSubSubSteps,
    showSubSubSteps = _ref$showSubSubSteps === void 0 ? false : _ref$showSubSubSteps,
    _ref$completedText = _ref.completedText,
    completedText = _ref$completedText === void 0 ? 'Completed' : _ref$completedText,
    _ref$editText = _ref.editText,
    editText = _ref$editText === void 0 ? 'Edit' : _ref$editText,
    _ref$resumeText = _ref.resumeText,
    resumeText = _ref$resumeText === void 0 ? 'Resume' : _ref$resumeText,
    _ref$startText = _ref.startText,
    startText = _ref$startText === void 0 ? 'Start' : _ref$startText,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React.createElement("ol", {
    role: "list",
    className: "ds-c-step-list"
  }, steps.map(function (step, i) {
    return /*#__PURE__*/React.createElement(Step, _extends({
      step: _objectSpread(_objectSpread({}, step), {
        component: component || step.component
      }),
      key: step.id || i
    }, _objectSpread({
      showSubSubSteps: showSubSubSteps,
      completedText: completedText,
      editText: editText,
      resumeText: resumeText,
      startText: startText
    }, otherProps)));
  }));
};
export default StepList;