@gravityforms/components/react/admin/modules/Steps/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, PropTypes, classnames } from '@gravityforms/libraries';
import { spacerClasses, uniqueId } from '@gravityforms/utils';
import Icon from '../../elements/Icon';

const { forwardRef } = React;

/**
 * @module Steps
 * @description A steps component to display steps and show active step.
 *
 * @since 1.1.15
 *
 * @param {object}                     props                  Component props.
 * @param {number}                     props.activeStep       The active step number.
 * @param {object}                     props.customAttributes Custom attributes for the component.
 * @param {string|Array|object}        props.customClasses    Custom classes for the component.
 * @param {string}                     props.icon             The icon to display for each step.
 * @param {string}                     props.iconPrefix       The icon prefix to use for each step.
 * @param {number}                     props.numSteps         The total number of steps.
 * @param {string|number|Array|object} props.spacing          The spacing for the component, as a string, number, array, or object.
 * @param {object|null}                ref                    Ref to the component.
 *
 * @return {JSX.Element}
 *
 * @example
 * import Steps from '@gravityforms/components/react/admin/modules/Steps';
 *
 * return (
 *     <Steps customClasses={ [ 'example-class' ] } numSteps={ 7 } />
 * );
 *
 */
const Steps = forwardRef( ( {
	activeStep = 1,
	customAttributes = {},
	customClasses = [],
	icon = 'check-mark-alt',
	iconPrefix = 'gravity-component-icon',
	numSteps = 1,
	spacing = '',
}, ref ) => {
	const className = classnames( {
		'gform-steps': true,
		...spacerClasses( spacing ),
	}, customClasses );
	const id = uniqueId( 'step' );

	return (
		<ol className={ className } { ...customAttributes } ref={ ref }>
			{
				[ ...Array( numSteps ).keys() ].map( ( num, i ) => {
					const stepNum = num + 1;
					const itemClassName = classnames( {
						'gform-steps__step': true,
						'gform-steps__step--active': stepNum === activeStep,
						'gform-steps__step--completed': stepNum < activeStep,
					} );

					return (
						<li key={ `${ id }-${ i }` } className={ itemClassName }>
							<span className="gform-steps__step-count">{ stepNum }</span>
							<Icon customClasses={ [ 'gform-steps__step-icon' ] } icon={ icon } iconPrefix={ iconPrefix } />
						</li>
					);
				} )
			}
		</ol>
	);
} );

Steps.propTypes = {
	activeStep: PropTypes.number,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	numSteps: PropTypes.number,
	spacing: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.number,
		PropTypes.array,
		PropTypes.object,
	] ),
};

Steps.displayName = 'Steps';

export default Steps;