From 66fc4c5ea0081f71d9140d096386380988a2483b Mon Sep 17 00:00:00 2001
From: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Fri, 10 Nov 2023 17:20:20 +0000
Subject: [PATCH] Add `FormStep` to Storybook
 (https://github.com/woocommerce/woocommerce-blocks/pull/11489)

---
 .../packages/components/form-step/index.tsx   |   2 +-
 .../form-step/stories/index.stories.tsx       | 126 ++++++++++++++++++
 .../woocommerce-blocks/storybook/preview.js   |   2 +-
 3 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/packages/components/form-step/stories/index.stories.tsx

diff --git a/plugins/woocommerce-blocks/packages/components/form-step/index.tsx b/plugins/woocommerce-blocks/packages/components/form-step/index.tsx
index 83c2050680c..18754218c1b 100644
--- a/plugins/woocommerce-blocks/packages/components/form-step/index.tsx
+++ b/plugins/woocommerce-blocks/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;
diff --git a/plugins/woocommerce-blocks/packages/components/form-step/stories/index.stories.tsx b/plugins/woocommerce-blocks/packages/components/form-step/stories/index.stories.tsx
new file mode 100644
index 00000000000..895e6af8bda
--- /dev/null
+++ b/plugins/woocommerce-blocks/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.',
+};
diff --git a/plugins/woocommerce-blocks/storybook/preview.js b/plugins/woocommerce-blocks/storybook/preview.js
index c153d6b355b..95cb24a0318 100644
--- a/plugins/woocommerce-blocks/storybook/preview.js
+++ b/plugins/woocommerce-blocks/storybook/preview.js
@@ -12,7 +12,7 @@ export const parameters = {
 			date: /Date$/,
 		},
 	},
-	layout: 'centered',
+	layout: 'padded',
 	a11y: {
 		element: '#storybook-root',
 		config: {},