@crave/farmblocks-stepper/lib/components/Step.js

A React Component for displaying step to step actions

import * as React from "react";
import PropTypes from "prop-types";
import { SmCheck, SmPlaceholder, SmChevronRight } from "@crave/farmblocks-icon";
import Container from "../styledComponents/Step";
import statusTypes from "../constants/statusTypes";

const Step = ({
  status,
  ...props
}) => {
  const isCompleted = status === statusTypes.COMPLETED;
  return /*#__PURE__*/React.createElement(Container, {
    className: props.className,
    status: status,
    onClick: props.onClick
  }, isCompleted ? /*#__PURE__*/React.createElement(SmCheck, {
    size: 20,
    className: "icon"
  }) : /*#__PURE__*/React.createElement(SmPlaceholder, {
    size: 20,
    className: "icon"
  }), /*#__PURE__*/React.createElement("div", {
    className: "description"
  }, props.children), !isCompleted && /*#__PURE__*/React.createElement(SmChevronRight, {
    size: 20,
    className: "icon"
  }));
};

Step.propTypes = {
  children: PropTypes.node.isRequired,
  status: PropTypes.oneOf(Object.keys(statusTypes)).isRequired,
  onClick: PropTypes.func.isRequired,
  className: PropTypes.string
};
Step.propTypes = {
  children: PropTypes.node.isRequired,
  status: PropTypes.oneOf(Object.keys(statusTypes)).isRequired,
  onClick: PropTypes.func.isRequired,
  className: PropTypes.string
};
export default Step;