@activecollab/components/dist/esm/components/StepSequence/StepSequence.js

ActiveCollab Components

import React, { Fragment } from "react";
import classnames from "classnames";
import { StyledStepSequence, StyledStepSequenceTrigger } from "./Styles";
import { Tooltip } from "../Tooltip";

/** Token colour role a step and its connector are painted with */

/** Ring style of a step: filled, toned outline or dashed outline */

export const StepSequence = _ref => {
  let steps = _ref.steps,
    onClick = _ref.onClick,
    ariaLabel = _ref.ariaLabel,
    className = _ref.className;
  if (!steps.length) {
    return null;
  }
  const content = steps.map((step, index) => {
    var _step$key, _step$connectorTone, _step$tooltip, _step$icon;
    return /*#__PURE__*/React.createElement(Fragment, {
      key: (_step$key = step.key) != null ? _step$key : "step-" + index
    }, index > 0 && /*#__PURE__*/React.createElement("span", {
      className: classnames("c-step-sequence__connector", "c-step-sequence__connector--" + ((_step$connectorTone = step.connectorTone) != null ? _step$connectorTone : step.tone))
    }), /*#__PURE__*/React.createElement(Tooltip, {
      title: (_step$tooltip = step.tooltip) != null ? _step$tooltip : "",
      disable: !step.tooltip
    }, /*#__PURE__*/React.createElement("span", {
      className: classnames("c-step-sequence__step", "c-step-sequence__step--" + step.tone, "c-step-sequence__step--" + step.fill, {
        "c-step-sequence__step--pulse": step.pulse
      })
    }, (_step$icon = step.icon) != null ? _step$icon : /*#__PURE__*/React.createElement("span", {
      className: "c-step-sequence__dot"
    }))));
  });
  if (onClick) {
    return /*#__PURE__*/React.createElement(StyledStepSequenceTrigger, {
      className: classnames("c-step-sequence", className),
      onClick: onClick,
      "aria-label": ariaLabel
    }, content);
  }
  return /*#__PURE__*/React.createElement(StyledStepSequence, {
    className: classnames("c-step-sequence", className),
    "aria-label": ariaLabel
  }, content);
};
StepSequence.displayName = "StepSequence";
//# sourceMappingURL=StepSequence.js.map