Add FormStep to Storybook

packages/components/form-step/index.tsx

@@ -31,7 +31,7 @@ const StepHeading = ( { title, stepHeadingContent }: StepHeadingProps ) => (
 	</div>
 );
 
-interface FormStepProps {
+export interface FormStepProps {
 	id?: string;
 	className?: string;
 	title?: string;

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

@@ -0,0 +1,126 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, 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: 'Checkout 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',
+				},
+			},
+			control: 'disabled',
+			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 InputWithState = () => {
+	const [ value, setValue ] = useState( 'John Doe' );
+	return (
+		<ValidatedTextInput
+			label={ 'Name' }
+			instanceId={ '1' }
+			value={ value }
+			onChange={ setValue }
+		/>
+	);
+};
+const Template: StoryFn< FormStepProps > = ( args ) => (
+	<div className="wc-block-components-form">
+		<FormStep { ...args }>
+			<InputWithState />
+		</FormStep>
+	</div>
+);
+
+export const Default = Template.bind( {} );
+
+Default.args = {
+	stepHeadingContent: () => <span>Step heading content</span>,
+	title: 'Personal information',
+	description: 'Please enter your personal information.',
+};

storybook/preview.js

@@ -12,7 +12,7 @@ export const parameters = {
 			date: /Date$/,
 		},
 	},
-	layout: 'centered',
+	layout: 'padded',
 	a11y: {
 		element: '#storybook-root',
 		config: {},