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

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StepSequence = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Styles = require("./Styles");
var _Tooltip = require("../Tooltip");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/** Token colour role a step and its connector are painted with */

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

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