From 7660a8c9e2700d30d9652c9a0680bd77ba6e2910 Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Thu, 26 Dec 2024 17:33:00 +0530 Subject: [PATCH 1/4] Storybook: Add stories for URLInputButton component --- .../url-input/stories/button.story.js | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 packages/block-editor/src/components/url-input/stories/button.story.js diff --git a/packages/block-editor/src/components/url-input/stories/button.story.js b/packages/block-editor/src/components/url-input/stories/button.story.js new file mode 100644 index 00000000000000..b4cf2682e85aa3 --- /dev/null +++ b/packages/block-editor/src/components/url-input/stories/button.story.js @@ -0,0 +1,60 @@ +/** + * Internal dependencies + */ +import URLInputButton from '../button'; + +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +const meta = { + title: 'BlockEditor/URLInputButton', + component: URLInputButton, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Renders the URL input field used by the `URLInputButton` component. It can be used directly to display the input field in different ways such as in a `Popover` or inline.', + }, + }, + }, + argTypes: { + url: { + control: 'text', + description: + 'The current URL value. Should be tied to the component state or an attribute.', + type: { name: 'string', required: true }, + }, + onChange: { + action: 'onChange', + description: `Callback function triggered when the URL value changes. + The first parameter is the new URL (String). + The second parameter is the selected post object (Object) if a post is selected, or \`null\` if the input is arbitrary.`, + table: { + type: { + summary: '(url: string, post?: object) => void', + }, + }, + }, + }, +}; + +export default meta; + +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); + }, +}; From d51967f89b48c6fc8287800445702dc79b0e4596 Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Tue, 31 Dec 2024 17:44:22 +0530 Subject: [PATCH 2/4] Storybook: Improve URLInputButton descriptions --- .../url-input/stories/button.story.js | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/url-input/stories/button.story.js b/packages/block-editor/src/components/url-input/stories/button.story.js index b4cf2682e85aa3..77c84b16981167 100644 --- a/packages/block-editor/src/components/url-input/stories/button.story.js +++ b/packages/block-editor/src/components/url-input/stories/button.story.js @@ -16,7 +16,7 @@ const meta = { canvas: { sourceState: 'shown' }, description: { component: - 'Renders the URL input field used by the `URLInputButton` component. It can be used directly to display the input field in different ways such as in a `Popover` or inline.', + 'Render a URL input button that pops up an input to search for and select a post or enter any arbitrary URL.', }, }, }, @@ -24,19 +24,22 @@ const meta = { url: { control: 'text', description: - 'The current URL value. Should be tied to the component state or an attribute.', - type: { name: 'string', required: true }, + 'This should be set to the attribute (or component state) property used to store the URL.', + type: { + required: true, + name: 'string', + }, }, onChange: { - action: 'onChange', - description: `Callback function triggered when the URL value changes. - The first parameter is the new URL (String). - The second parameter is the selected post object (Object) if a post is selected, or \`null\` if the input is arbitrary.`, - table: { - type: { - summary: '(url: string, post?: object) => void', - }, + control: { + type: null, }, + description: `Called when the value changes. The second parameter is null unless the user selects a post from the suggestions dropdown.`, + type: { + required: true, + name: 'function', + }, + action: 'onChange', }, }, }; From c2f782430fc2fdfcd75025b4230325f11dce2634 Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Tue, 31 Dec 2024 18:04:27 +0530 Subject: [PATCH 3/4] Storybook: Remove unused useState logic from URLInputButton story --- .../src/components/url-input/stories/button.story.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-editor/src/components/url-input/stories/button.story.js b/packages/block-editor/src/components/url-input/stories/button.story.js index 77c84b16981167..7f89dda87084a8 100644 --- a/packages/block-editor/src/components/url-input/stories/button.story.js +++ b/packages/block-editor/src/components/url-input/stories/button.story.js @@ -3,11 +3,6 @@ */ import URLInputButton from '../button'; -/** - * WordPress dependencies - */ -import { useState } from '@wordpress/element'; - const meta = { title: 'BlockEditor/URLInputButton', component: URLInputButton, @@ -48,15 +43,12 @@ export default meta; export const Default = { render: function Template( { onChange, ...args } ) { - const [ value, setValue ] = useState(); return ( { onChange( ...changeArgs ); - setValue( ...changeArgs ); } } - value={ value } /> ); }, From 182e32653963372abc15d2713cbdfed4e9dbb0aa Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Tue, 31 Dec 2024 18:07:01 +0530 Subject: [PATCH 4/4] Storybook: Simplify Default export in URLInputButton story --- .../components/url-input/stories/button.story.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/url-input/stories/button.story.js b/packages/block-editor/src/components/url-input/stories/button.story.js index 7f89dda87084a8..cffb38d96c25de 100644 --- a/packages/block-editor/src/components/url-input/stories/button.story.js +++ b/packages/block-editor/src/components/url-input/stories/button.story.js @@ -41,15 +41,4 @@ const meta = { export default meta; -export const Default = { - render: function Template( { onChange, ...args } ) { - return ( - { - onChange( ...changeArgs ); - } } - /> - ); - }, -}; +export const Default = {};