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 <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Dec 20, 2024 · 910c38f · 910c38f · github-actions · Dec 20, 2024
1 parent 8ad85f9
commit 910c38f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 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
@@ -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
@@ -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 }
+			/>
+		);
+	},
+};