@telia/styleguide/atoms/StepIndicator/StepIndicator.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _range = _interopRequireDefault(require("lodash/range"));

var _SvgIcon = _interopRequireDefault(require("../SvgIcon/SvgIcon"));

/**
 * Status: *In progress*.
 */
var renderLine = function renderLine(number, numberOfSteps, index) {
  if (number >= numberOfSteps - 1) {
    return null;
  }

  var isPassed = index > number;
  return _react.default.createElement("span", {
    className: (0, _classnames.default)('step-indicator__line', {
      'step-indicator__line--passed': isPassed
    })
  });
};

var _ref = _react.default.createElement("span", {
  className: "sr-only"
}, "- fullf\xF8rt");

var renderStep = function renderStep(index, number, numberOfSteps, label, link) {
  var isActive = index === number;
  var isPassed = index >= number;

  var onClick = function onClick() {
    if (isPassed) {
      window.location.assign(link);
    }
  };

  return _react.default.createElement("li", {
    className: "step-indicator__wrapper",
    key: "step-indicator-step-".concat(number)
  }, _react.default.createElement("button", {
    className: "step-indicator__clickable",
    onClick: onClick,
    disabled: isPassed ? 0 : -1
  }, _react.default.createElement("div", {
    className: (0, _classnames.default)('step-indicator__step', {
      'step-indicator__step--active': isActive,
      'step-indicator__step--passed': isPassed
    })
  }, index > number ? _react.default.createElement("span", {
    className: "icon-wrapper"
  }, _react.default.createElement(_SvgIcon.default, {
    className: "icon",
    iconName: "ico_check",
    role: "presentation",
    title: "".concat(number + 1)
  })) : number + 1), _react.default.createElement("span", {
    className: (0, _classnames.default)('step-indicator__label', {
      'step-indicator__label--active': isActive
    })
  }, label, index > number && _ref)), renderLine(number, numberOfSteps, index));
};

var StepIndicator = function StepIndicator(_ref2) {
  var index = _ref2.index,
      numberOfSteps = _ref2.numberOfSteps,
      labels = _ref2.labels,
      links = _ref2.links;
  return _react.default.createElement("div", {
    className: "step-indicator"
  }, _react.default.createElement("ul", {
    className: "step-indicator__list"
  }, (0, _range.default)(numberOfSteps).map(function (number) {
    return renderStep(index, number, numberOfSteps, labels[number], links[number]);
  })));
};

StepIndicator.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Current active step (index starts at 0) */
  index: _propTypes.default.number,

  /** Total number of steps */
  numberOfSteps: _propTypes.default.number,

  /** Labels for steps */
  labels: _propTypes.default.arrayOf(_propTypes.default.string),

  /** Links for steps */
  links: _propTypes.default.arrayOf(_propTypes.default.string)
} : {};
var _default = StepIndicator;
exports.default = _default;