From 3c6c2e15c17a5536854476620e015b910efb67d6 Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Tue, 26 Nov 2024 11:18:44 +0530
Subject: [PATCH] Storybook: Add BlockAlignmentMatrixControl Stories

---
 .../stories/index.story.js                    | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js

diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js
new file mode 100644
index 00000000000000..9b3d30af118842
--- /dev/null
+++ b/packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockAlignmentMatrixControl from '../';
+
+export default {
+	title: 'BlockEditor/BlockAlignmentMatrixControl',
+	component: BlockAlignmentMatrixControl,
+	parameters: {
+		layout: 'centered',
+	},
+	argTypes: {
+		label: {
+			control: 'text',
+			defaultValue: 'Change matrix alignment',
+			description: 'Label for the control.',
+		},
+		onChange: {
+			action: 'onChange',
+			description: 'Function called when the value changes.',
+		},
+		isDisabled: {
+			control: 'boolean',
+			defaultValue: false,
+			description: 'Whether the control is disabled.',
+		},
+		value: {
+			description: 'The current alignment value.',
+		},
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState( 'center center' );
+
+	return (
+		<BlockAlignmentMatrixControl
+			{ ...args }
+			value={ value }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Change matrix alignment',
+};
+
+export const Disabled = Template.bind( {} );
+Disabled.args = {
+	label: 'Disabled Alignment Control',
+	isDisabled: true,
+};