@telia/styleguide/molecules/StepByStep/StepByStep.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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * Status: *finished*
 */
var StepByStep =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(StepByStep, _Component);

  function StepByStep() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, StepByStep);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(StepByStep)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      selectedIndex: 0
    };

    _this.onSelect = function (index) {
      _this.setState({
        selectedIndex: index
      });
    };

    return _this;
  }

  (0, _createClass2.default)(StepByStep, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          interactive = _this$props.interactive,
          selectedIndex = _this$props.selectedIndex,
          onSelect = _this$props.onSelect,
          rest = (0, _objectWithoutProperties2.default)(_this$props, ["children", "className", "interactive", "selectedIndex", "onSelect"]);
      return _react.default.createElement("ul", (0, _extends2.default)({
        className: (0, _classnames6.default)('step-by-step', (0, _defineProperty2.default)({}, className, className))
      }, rest), interactive ? _react.default.Children.map(children, function (step, i) {
        return _react.default.cloneElement(step, {
          key: i,
          index: i,
          opened: selectedIndex ? selectedIndex === i : _this2.state.selectedIndex === i,
          onSelect: onSelect || _this2.onSelect,
          interactive: interactive
        });
      }) : children);
    }
  }]);
  return StepByStep;
}(_react.Component);

StepByStep.propTypes = process.env.NODE_ENV !== "production" ? {
  /** StepByStep.Step */
  children: _propTypes.default.node,

  /** Whether this should be interactive or just static. */
  interactive: _propTypes.default.bool,

  /** Index of the active step. Use when you want to handle the state on your own. Start at 0. */
  selectedIndex: _propTypes.default.number,

  /** Handler func triggered when user clicks the icon. Use when you want to handle the state on your own. */
  onSelect: _propTypes.default.func
} : {};

StepByStep.Step = function (_ref) {
  var _classnames2;

  var children = _ref.children,
      className = _ref.className,
      index = _ref.index,
      opened = _ref.opened,
      onSelect = _ref.onSelect,
      interactive = _ref.interactive,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "className", "index", "opened", "onSelect", "interactive"]);
  return _react.default.createElement("li", (0, _extends2.default)({
    className: (0, _classnames6.default)('step-by-step__step-wrapper', (_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, className, className), (0, _defineProperty2.default)(_classnames2, 'step-by-step__step--opened', opened), (0, _defineProperty2.default)(_classnames2, 'step-by-step__step--closed', !opened), (0, _defineProperty2.default)(_classnames2, 'step-by-step__step--touched', true), _classnames2))
  }, rest), _react.default.Children.map(children, function (it, i) {
    return _react.default.cloneElement(it, {
      key: i,
      index: index,
      opened: opened,
      onSelect: onSelect,
      interactive: interactive
    });
  }));
};

var _ref3 = _react.default.createElement(_SvgIcon.default, {
  iconName: "step-by-step-pebble",
  color: "grey"
});

StepByStep.Description = function (_ref2) {
  var children = _ref2.children,
      className = _ref2.className,
      heading = _ref2.heading,
      iconName = _ref2.iconName,
      imageSrc = _ref2.imageSrc,
      number = _ref2.number,
      pebbles = _ref2.pebbles,
      onSelect = _ref2.onSelect,
      index = _ref2.index,
      interactive = _ref2.interactive,
      opened = _ref2.opened,
      rest = (0, _objectWithoutProperties2.default)(_ref2, ["children", "className", "heading", "iconName", "imageSrc", "number", "pebbles", "onSelect", "index", "interactive", "opened"]);
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(Icon, {
    pebbles: pebbles,
    onSelect: onSelect,
    index: index,
    interactive: interactive,
    opened: opened
  }, pebbles && _ref3, imageSrc && _react.default.createElement("img", {
    className: "step-by-step__icon",
    src: imageSrc
  }), iconName && _react.default.createElement(_SvgIcon.default, {
    className: "step-by-step__icon",
    iconName: iconName,
    color: "purple"
  }), number !== null && _react.default.createElement("span", {
    className: "step-by-step__number"
  }, number)), _react.default.createElement("div", (0, _extends2.default)({
    className: (0, _classnames6.default)('step-by-step__text', (0, _defineProperty2.default)({}, className, className))
  }, rest), _react.default.createElement("h2", {
    className: "step-by-step__heading heading heading--level-2"
  }, heading), children && _react.default.createElement("div", {
    className: "step-by-step__description"
  }, children)));
};

StepByStep.Description.propTypes = {
  /** Short step description. */
  children: _propTypes.default.node,

  /** Name of svg icon. */
  iconName: _propTypes.default.string,

  /** Source for an image. */
  imageSrc: _propTypes.default.string,

  /** Number if you want to show number instead of icon. */
  number: _propTypes.default.number,

  /** Pebbles style shape of the icon. */
  pebbles: _propTypes.default.bool,

  /** Step heading. */
  heading: _propTypes.default.string.isRequired,

  /** Passed down from parent */
  interactive: _propTypes.default.bool,

  /** Passed down from parent */
  opened: _propTypes.default.bool
};

StepByStep.Content = function (_ref4) {
  var children = _ref4.children,
      className = _ref4.className,
      opened = _ref4.opened,
      interactive = _ref4.interactive,
      rest = (0, _objectWithoutProperties2.default)(_ref4, ["children", "className", "opened", "interactive"]);
  return _react.default.createElement("div", (0, _extends2.default)({
    className: (0, _classnames6.default)('step-by-step__content', (0, _defineProperty2.default)({}, className, className))
  }, rest), children);
};

var Icon = function Icon(_ref5) {
  var _classnames5;

  var children = _ref5.children,
      className = _ref5.className,
      onSelect = _ref5.onSelect,
      index = _ref5.index,
      interactive = _ref5.interactive,
      opened = _ref5.opened,
      pebbles = _ref5.pebbles,
      rest = (0, _objectWithoutProperties2.default)(_ref5, ["children", "className", "onSelect", "index", "interactive", "opened", "pebbles"]);
  var elementType = interactive ? 'a' : 'div';
  return _react.default.createElement(elementType, (0, _extends2.default)({
    className: (0, _classnames6.default)('step-by-step__step', (_classnames5 = {}, (0, _defineProperty2.default)(_classnames5, className, className), (0, _defineProperty2.default)(_classnames5, 'step-by-step__step--interactive', interactive), (0, _defineProperty2.default)(_classnames5, 'step-by-step__step--highlighted', opened), (0, _defineProperty2.default)(_classnames5, 'step-by-step__pebbles', pebbles), (0, _defineProperty2.default)(_classnames5, 'step-by-step__circle step-by-step__circle--no-border', !pebbles), _classnames5)),
    onClick: function onClick() {
      if (!interactive) return;
      onSelect(index);
    },
    tabIndex: index
  }, rest), children);
};

var _default = StepByStep;
exports.default = _default;