Add Storybook entry for FormStep

packages/components/form-step/stories/index.tsx

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormStep, { type FormStepProps } from '..';
+import '../style.scss';
+
+export default {
+	title: 'WooCommerce Blocks/@woocommerce-blocks-components/FormStep',
+	component: FormStep,
+	argTypes: {
+		className: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		id: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		title: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+			description: 'The title of the form step.',
+		},
+		legend: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+			description:
+				'The legend is hidden but is made available to screen readers.',
+		},
+		description: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+			description:
+				'The description of the form step. Appears under the title.',
+		},
+		children: {
+			table: {
+				type: {
+					summary: 'ReactNode',
+				},
+			},
+			description: 'The content of the form step.',
+		},
+		disabled: {
+			control: 'boolean',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+			description: 'Is the component and all of its children disabled?',
+		},
+		showStepNumber: {
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+			control: 'boolean',
+			description: 'Should the step number be shown?',
+		},
+		stepHeadingContent: {
+			table: {
+				type: {
+					summary: '() => JSX.Element | undefined',
+				},
+			},
+			description: 'Content to render in the step heading.',
+		},
+	},
+} as Meta< FormStepProps >;
+
+const Template: Story< FormStepProps > = ( args ) => (
+	<div className="wc-block-components-form">
+		<FormStep { ...args } />
+	</div>
+);
+
+export const Default = Template.bind( {} );
+const InputWithState = () => {
+	const [ value, setValue ] = useState( 'John Doe' );
+	return (
+		<ValidatedTextInput
+			label={ 'Name' }
+			instanceId={ '1' }
+			value={ value }
+			onChange={ setValue }
+		/>
+	);
+};
+Default.args = {
+	stepHeadingContent: () => <span>Step heading content</span>,
+	title: 'Personal information',
+	description: 'Please enter your personal information.',
+	children: <InputWithState />,
+};