import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftScreenReaderOnly, } from '../Accessibility';
import { SoftTitle, } from '../Title';
import { STATUS, SoftStepNumber, } from './SoftStepNumber';
import { SoftI18n, } from '../I18n';
export const SoftStep = ({ className, children, headingElement, step, title, status, ...rest }) => {
    const classes = classNames('softStep', className);
    let screenReaderStep;
    if (status === 'incomplete') {
        screenReaderStep = React.createElement(SoftI18n, { token: "softStep.incompleteStep", default: "Incomplete Step" });
    }
    else {
        screenReaderStep = React.createElement(SoftI18n, { token: "softStep.completeStep", default: "Step" });
    }
    return (React.createElement("div", Object.assign({ className: classes }, rest),
        React.createElement(SoftScreenReaderOnly, null,
            React.createElement("span", null,
                screenReaderStep,
                "\u00A0")),
        React.createElement(SoftStepNumber, { className: "softStep__circle", number: step, status: status, isHollow: status === 'incomplete' }),
        React.createElement(SoftTitle, { size: "s", className: "softStep__title" }, React.createElement(headingElement, null, title)),
        React.createElement("div", { className: "softStep__content" }, children)));
};
// @ts-ignore
SoftStep.propTypes = {
    children: PropTypes.node.isRequired,
    /**
     * Will replace the number provided in props.step with alternate styling.
     * Options: `complete`, `incomplete`, `warning`, `danger`, `disabled`
     */
    status: PropTypes.oneOf(STATUS),
    /**
     * The number of the step in the list of steps
     */
    step: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    /**
     * The HTML tag used for the title
     */
    headingElement: PropTypes.string.isRequired,
};
// @ts-ignore
SoftStep.defaultProps = {
    headingElement: 'p'
};
//# sourceMappingURL=SoftStep.js.map