From 910c38fc6b8c33ef45251bac2fba5170af43c9b9 Mon Sep 17 00:00:00 2001
From: Himanshu Pathak <himanshu.pathak@rtcamp.com>
Date: Fri, 20 Dec 2024 11:10:11 +0530
Subject: [PATCH] Storybook: Add stories for the TextDecorationControl
 component (#67337)

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

* Storybook: Improve TextDecorationControl props table heading

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

* Storybook: Simplify TextDecorationControl story

* Storybook: Improve the structure of TextDecorationControl story

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../text-decoration-control/README.md         |  1 -
 .../stories/index.story.js                    | 67 ++++++++++++++-----
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/components/text-decoration-control/README.md b/packages/block-editor/src/components/text-decoration-control/README.md
index a606140baa330e..87fb6e89bd5712 100644
--- a/packages/block-editor/src/components/text-decoration-control/README.md
+++ b/packages/block-editor/src/components/text-decoration-control/README.md
@@ -28,7 +28,6 @@ Then, you can use the component in your block editor UI:
 ### `value`
 
 -   **Type:** `String`
--   **Default:** `none`
 -   **Options:** `none`, `underline`, `line-through`
 
 The current value of the Text Decoration setting. You may only choose from the `Options` listed above.
diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
index 2212b484185cde..d139b30a2bb4b5 100644
--- a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
@@ -8,26 +8,61 @@ import { useState } from '@wordpress/element';
  */
 import TextDecorationControl from '../';
 
-export default {
+const meta = {
 	title: 'BlockEditor/TextDecorationControl',
 	component: TextDecorationControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to facilitate text decoration selections.',
+			},
+		},
+	},
 	argTypes: {
-		onChange: { action: 'onChange' },
+		value: {
+			control: { type: null },
+			description: 'Currently selected text decoration.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in text decoration selection.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Additional class name to apply.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 	},
 };
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextDecorationControl
-			{ ...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 (
+			<TextDecorationControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};