@telia/styleguide/es/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.

import _objectSpread from "@babel/runtime/helpers/objectSpread";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import SvgIcon from '../../atoms/SvgIcon/SvgIcon';
/**
 * Status: *finished*
 */

class StepByStep extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      selectedIndex: 0
    };

    this.onSelect = index => {
      this.setState({
        selectedIndex: index
      });
    };
  }

  render() {
    const _this$props = this.props,
          {
      children,
      className,
      interactive,
      selectedIndex,
      onSelect
    } = _this$props,
          rest = _objectWithoutProperties(_this$props, ["children", "className", "interactive", "selectedIndex", "onSelect"]);

    return React.createElement("ul", _extends({
      className: classnames('step-by-step', {
        [className]: className
      })
    }, rest), interactive ? React.Children.map(children, (step, i) => React.cloneElement(step, {
      key: i,
      index: i,
      opened: selectedIndex ? selectedIndex === i : this.state.selectedIndex === i,
      onSelect: onSelect || this.onSelect,
      interactive
    })) : children);
  }

}

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

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

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

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

StepByStep.Step = (_ref) => {
  let {
    children,
    className,
    index,
    opened,
    onSelect,
    interactive
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["children", "className", "index", "opened", "onSelect", "interactive"]);

  return React.createElement("li", _extends({
    className: classnames('step-by-step__step-wrapper', {
      [className]: className,
      'step-by-step__step--opened': opened,
      'step-by-step__step--closed': !opened,
      'step-by-step__step--touched': true
    })
  }, rest), React.Children.map(children, (it, i) => React.cloneElement(it, {
    key: i,
    index,
    opened,
    onSelect,
    interactive
  })));
};

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

StepByStep.Description = (_ref2) => {
  let {
    children,
    className,
    heading,
    iconName,
    imageSrc,
    number,
    pebbles,
    onSelect,
    index,
    interactive,
    opened
  } = _ref2,
      rest = _objectWithoutProperties(_ref2, ["children", "className", "heading", "iconName", "imageSrc", "number", "pebbles", "onSelect", "index", "interactive", "opened"]);

  return React.createElement(React.Fragment, null, React.createElement(Icon, {
    pebbles: pebbles,
    onSelect: onSelect,
    index: index,
    interactive: interactive,
    opened: opened
  }, pebbles && _ref3, imageSrc && React.createElement("img", {
    className: "step-by-step__icon",
    src: imageSrc
  }), iconName && React.createElement(SvgIcon, {
    className: "step-by-step__icon",
    iconName: iconName,
    color: "purple"
  }), number !== null && React.createElement("span", {
    className: "step-by-step__number"
  }, number)), React.createElement("div", _extends({
    className: classnames('step-by-step__text', {
      [className]: className
    })
  }, rest), React.createElement("h2", {
    className: "step-by-step__heading heading heading--level-2"
  }, heading), children && React.createElement("div", {
    className: "step-by-step__description"
  }, children)));
};

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

  /** Name of svg icon. */
  iconName: PropTypes.string,

  /** Source for an image. */
  imageSrc: PropTypes.string,

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

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

  /** Step heading. */
  heading: PropTypes.string.isRequired,

  /** Passed down from parent */
  interactive: PropTypes.bool,

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

StepByStep.Content = (_ref4) => {
  let {
    children,
    className,
    opened,
    interactive
  } = _ref4,
      rest = _objectWithoutProperties(_ref4, ["children", "className", "opened", "interactive"]);

  return React.createElement("div", _extends({
    className: classnames('step-by-step__content', {
      [className]: className
    })
  }, rest), children);
};

const Icon = (_ref5) => {
  let {
    children,
    className,
    onSelect,
    index,
    interactive,
    opened,
    pebbles
  } = _ref5,
      rest = _objectWithoutProperties(_ref5, ["children", "className", "onSelect", "index", "interactive", "opened", "pebbles"]);

  const elementType = interactive ? 'a' : 'div';
  return React.createElement(elementType, _objectSpread({
    className: classnames('step-by-step__step', {
      [className]: className,
      'step-by-step__step--interactive': interactive,
      'step-by-step__step--highlighted': opened,
      'step-by-step__pebbles': pebbles,
      'step-by-step__circle step-by-step__circle--no-border': !pebbles
    }),
    onClick: () => {
      if (!interactive) return;
      onSelect(index);
    },
    tabIndex: index
  }, rest), children);
};

export default StepByStep;