From 67557edac8a22538ca3ff9cd9594cf821c5153e9 Mon Sep 17 00:00:00 2001
From: Himanshu Pathak
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
Co-authored-by: t-hamano
---
.../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 3744f3fa012a71..fd97f9b60e6a90 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 (
- {
- 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 (
+ {
+ onChange( ...changeArgs );
+ setValue( ...changeArgs );
+ } }
+ value={ value }
+ />
+ );
+ },
+};