This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 220
/
index.tsx
100 lines (93 loc) · 2.16 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* External dependencies
*/
import classnames from 'classnames';
import Title from '@woocommerce/base-components/title';
/**
* Internal dependencies
*/
import './style.scss';
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>
);
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={ classnames(
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;