@financial-times/n-conversion-forms/dist/progress-indicator.jsx

Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ProgressIndicator = ProgressIndicator;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
function ProgressIndicator(_ref) {
  var _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    _ref$disableLinks = _ref.disableLinks,
    disableLinks = _ref$disableLinks === void 0 ? false : _ref$disableLinks;
  function getElementsForComplete(item) {
    return disableLinks ? /*#__PURE__*/_react["default"].createElement("span", {
      className: "o-stepped-progress__step o-stepped-progress__step--complete"
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "o-stepped-progress__label"
    }, item.name, /*#__PURE__*/_react["default"].createElement("span", {
      className: "o-stepped-progress__status"
    }, "(completed)"))) : /*#__PURE__*/_react["default"].createElement("a", {
      href: item.url,
      className: "o-stepped-progress__step o-stepped-progress__step--complete",
      "data-trackable": "change-progress"
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "o-stepped-progress__label"
    }, item.name, /*#__PURE__*/_react["default"].createElement("i", {
      className: "ncf__icon ncf__icon--inline-edit"
    }), ' ', /*#__PURE__*/_react["default"].createElement("span", {
      className: "o-stepped-progress__status"
    }, "(completed)")));
  }
  function getElementsForNonComplete(item) {
    var nonCompleteDivClassName = (0, _classnames["default"])(['o-stepped-progress__step', {
      'o-stepped-progress__step--current': item.isCurrent
    }]);
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: nonCompleteDivClassName
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "o-stepped-progress__label"
    }, item.name, ' ', item.isCurrent && /*#__PURE__*/_react["default"].createElement("span", {
      className: "o-stepped-progress__status"
    }, "(current step)")));
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "ncf__stepped-progress o-stepped-progress",
    "data-o-component": "o-stepped-progress"
  }, /*#__PURE__*/_react["default"].createElement("ol", {
    className: "o-stepped-progress__steps"
  }, items.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement("li", {
      key: index
    }, item.isComplete ? getElementsForComplete(item) : getElementsForNonComplete(item));
  })));
}
ProgressIndicator.propTypes = {
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    isComplete: _propTypes["default"].bool,
    isCurrent: _propTypes["default"].bool,
    name: _propTypes["default"].string,
    url: _propTypes["default"].string
  })),
  disableLinks: _propTypes["default"].bool
};