From 67557edac8a22538ca3ff9cd9594cf821c5153e9 Mon Sep 17 00:00:00 2001
From: Himanshu Pathak <himanshu.pathak@rtcamp.com>
Date: Fri, 13 Dec 2024 19:34:52 +0530
Subject: [PATCH] Storybook: Add stories for the TextAlignmentControl component
 (#67371)

* Storybook: Add stories for the text-alignment-control component

* Storybook: Update TextAlignmentControl story to follow best practices and simplify the structure

* Storybook: Simplify TextAlignmentControl story

* Storybook: Simplify the documentation for TextAlignmentControl story

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../stories/index.story.js                    | 73 ++++++++++++++-----
 1 file changed, 55 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
index 3744f3fa012a7..fd97f9b60e6a9 100644
--- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
@@ -8,32 +8,69 @@ import { useState } from '@wordpress/element';
  */
 import TextAlignmentControl from '../';
 
-export default {
+const meta = {
 	title: 'BlockEditor/TextAlignmentControl',
 	component: TextAlignmentControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to facilitate text alignment selections.',
+			},
+		},
+	},
 	argTypes: {
-		onChange: { action: 'onChange' },
-		className: { control: 'text' },
+		value: {
+			control: { type: null },
+			description: 'Currently selected text alignment value.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in text alignment selection.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
 		options: {
 			control: 'check',
+			description: 'Array of text alignment options to display.',
 			options: [ 'left', 'center', 'right', 'justify' ],
+			table: {
+				type: { summary: 'array' },
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Class name to add to the control.',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
-		value: { control: false },
 	},
 };
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextAlignmentControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setValue( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
+export default meta;
 
-export const Default = Template.bind( {} );
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<TextAlignmentControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};