97 lines
2.1 KiB
TypeScript
97 lines
2.1 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import clsx from 'clsx';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
import Title from '../title';
|
|
|
|
interface StepHeadingProps {
|
|
title: string;
|
|
stepHeadingContent?: JSX.Element;
|
|
}
|
|
|
|
const StepHeading = ( { title, stepHeadingContent }: StepHeadingProps ) => (
|
|
<div className="wc-block-components-checkout-step__heading">
|
|
<Title
|
|
aria-hidden="true"
|
|
className="wc-block-components-checkout-step__title"
|
|
headingLevel="2"
|
|
>
|
|
{ title }
|
|
</Title>
|
|
{ !! stepHeadingContent && (
|
|
<span className="wc-block-components-checkout-step__heading-content">
|
|
{ stepHeadingContent }
|
|
</span>
|
|
) }
|
|
</div>
|
|
);
|
|
|
|
export interface FormStepProps {
|
|
id?: string;
|
|
className?: string;
|
|
title?: string;
|
|
legend?: string;
|
|
description?: string;
|
|
children?: React.ReactNode;
|
|
disabled?: boolean;
|
|
showStepNumber?: boolean;
|
|
stepHeadingContent?: () => JSX.Element | undefined;
|
|
}
|
|
|
|
const FormStep = ( {
|
|
id,
|
|
className,
|
|
title,
|
|
legend,
|
|
description,
|
|
children,
|
|
disabled = false,
|
|
showStepNumber = true,
|
|
stepHeadingContent = () => undefined,
|
|
}: FormStepProps ): JSX.Element => {
|
|
// If the form step doesn't have a legend or title, render a <div> instead
|
|
// of a <fieldset>.
|
|
const Element = legend || title ? 'fieldset' : 'div';
|
|
|
|
return (
|
|
<Element
|
|
className={ clsx( className, 'wc-block-components-checkout-step', {
|
|
'wc-block-components-checkout-step--with-step-number':
|
|
showStepNumber,
|
|
'wc-block-components-checkout-step--disabled': disabled,
|
|
} ) }
|
|
id={ id }
|
|
disabled={ disabled }
|
|
>
|
|
{ !! ( legend || title ) && (
|
|
<legend className="screen-reader-text">
|
|
{ legend || title }
|
|
</legend>
|
|
) }
|
|
{ !! title && (
|
|
<StepHeading
|
|
title={ title }
|
|
stepHeadingContent={ stepHeadingContent() }
|
|
/>
|
|
) }
|
|
<div className="wc-block-components-checkout-step__container">
|
|
{ !! description && (
|
|
<p className="wc-block-components-checkout-step__description">
|
|
{ description }
|
|
</p>
|
|
) }
|
|
<div className="wc-block-components-checkout-step__content">
|
|
{ children }
|
|
</div>
|
|
</div>
|
|
</Element>
|
|
);
|
|
};
|
|
|
|
export default FormStep;
|