From 4cc9f40c4b701c1d064dad02aa5463d44022c65c Mon Sep 17 00:00:00 2001 From: SohamPatel46 Date: Wed, 25 Dec 2024 16:18:19 +0530 Subject: [PATCH 1/3] Add editable-text-story story --- .../editable-text/stories/index.story.js | 92 +++++++++++++++++++ .../media-replace-flow/stories/index.story.js | 36 ++++++++ 2 files changed, 128 insertions(+) create mode 100644 packages/block-editor/src/components/editable-text/stories/index.story.js create mode 100644 packages/block-editor/src/components/media-replace-flow/stories/index.story.js diff --git a/packages/block-editor/src/components/editable-text/stories/index.story.js b/packages/block-editor/src/components/editable-text/stories/index.story.js new file mode 100644 index 0000000000000..d0507f8adc03e --- /dev/null +++ b/packages/block-editor/src/components/editable-text/stories/index.story.js @@ -0,0 +1,92 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import EditableText from '../'; + +const meta = { + title: 'BlockEditor/EditableText', + component: EditableText, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Renders a user interface that allows the user to select predefined (common) font sizes.', + }, + }, + }, + argTypes: { + tagName: { + control: { type: null }, + description: 'The tag name of the editable element.', + table: { + type: { + summary: 'string', + }, + }, + }, + onChange: { + action: 'onChange', + control: { type: null }, + table: { + type: { summary: 'function' }, + }, + description: 'Function executed when the text value changes.', + }, + value: { + control: { type: 'string' }, + description: 'String to make editable.', + table: { + type: { + summary: 'string', + }, + }, + }, + placeholder: { + control: { type: 'string' }, + description: 'Placeholder text to show when the field is empty.', + table: { + type: { + summary: 'string', + }, + }, + }, + disableLineBreaks: { + control: { type: null }, + description: + 'Text wont insert line breaks on Enter if set to true.', + table: { + type: { + summary: 'boolean', + }, + }, + }, + }, +}; + +export default meta; + +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); + + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + tagName="div" + disableLineBreaks="true" + placeholder="Placeholder text" + /> + ); + }, +}; diff --git a/packages/block-editor/src/components/media-replace-flow/stories/index.story.js b/packages/block-editor/src/components/media-replace-flow/stories/index.story.js new file mode 100644 index 0000000000000..f416bff0ffc37 --- /dev/null +++ b/packages/block-editor/src/components/media-replace-flow/stories/index.story.js @@ -0,0 +1,36 @@ +/** + * Internal dependencies + */ +import MediaReplaceFlow from '../'; +/** + * WordPress dependencies + */ + +const meta = { + title: 'BlockEditor/MediaReplaceFlow', + component: MediaReplaceFlow, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'It provides a way for keyboard and assistive technologies users to jump back to the currently selected block.', + }, + }, + }, + argTypes: {}, +}; + +export default meta; + +export const Default = { + render: function Template( { ...args } ) { + return ( + + ); + }, +}; From 6938140a3fd7954e742f99d6b46cf6a4b21b45f7 Mon Sep 17 00:00:00 2001 From: SohamPatel46 Date: Wed, 25 Dec 2024 16:21:43 +0530 Subject: [PATCH 2/3] Removes unrelated changes from the PR --- .../media-replace-flow/stories/index.story.js | 36 ------------------- 1 file changed, 36 deletions(-) delete mode 100644 packages/block-editor/src/components/media-replace-flow/stories/index.story.js diff --git a/packages/block-editor/src/components/media-replace-flow/stories/index.story.js b/packages/block-editor/src/components/media-replace-flow/stories/index.story.js deleted file mode 100644 index f416bff0ffc37..0000000000000 --- a/packages/block-editor/src/components/media-replace-flow/stories/index.story.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Internal dependencies - */ -import MediaReplaceFlow from '../'; -/** - * WordPress dependencies - */ - -const meta = { - title: 'BlockEditor/MediaReplaceFlow', - component: MediaReplaceFlow, - parameters: { - docs: { - canvas: { sourceState: 'shown' }, - description: { - component: - 'It provides a way for keyboard and assistive technologies users to jump back to the currently selected block.', - }, - }, - }, - argTypes: {}, -}; - -export default meta; - -export const Default = { - render: function Template( { ...args } ) { - return ( - - ); - }, -}; From bbfffc53a1106dd86ba1b505cb0f8205b93e236c Mon Sep 17 00:00:00 2001 From: SohamPatel46 Date: Thu, 26 Dec 2024 16:55:24 +0530 Subject: [PATCH 3/3] Add all args to story --- .../editable-text/stories/index.story.js | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/editable-text/stories/index.story.js b/packages/block-editor/src/components/editable-text/stories/index.story.js index d0507f8adc03e..d1a5e4307476a 100644 --- a/packages/block-editor/src/components/editable-text/stories/index.story.js +++ b/packages/block-editor/src/components/editable-text/stories/index.story.js @@ -22,7 +22,7 @@ const meta = { }, argTypes: { tagName: { - control: { type: null }, + control: { type: 'text' }, description: 'The tag name of the editable element.', table: { type: { @@ -38,8 +38,30 @@ const meta = { }, description: 'Function executed when the text value changes.', }, + onReplace: { + control: { type: null }, + table: { + type: { summary: 'function' }, + }, + description: + 'Function executed when the `Text` instance can be replaced with the given blocks.', + }, + onMerge: { + control: { type: null }, + table: { + type: { summary: 'function' }, + }, + description: 'Function executed when blocks can be merged.', + }, + onRemove: { + control: { type: null }, + table: { + type: { summary: 'function' }, + }, + description: 'Function executed when the block can be removed.', + }, value: { - control: { type: 'string' }, + control: { type: 'text' }, description: 'String to make editable.', table: { type: { @@ -48,7 +70,7 @@ const meta = { }, }, placeholder: { - control: { type: 'string' }, + control: { type: 'text' }, description: 'Placeholder text to show when the field is empty.', table: { type: { @@ -83,10 +105,10 @@ export const Default = { onChange( ...changeArgs ); setValue( ...changeArgs ); } } - tagName="div" - disableLineBreaks="true" - placeholder="Placeholder text" /> ); }, + args: { + tagName: 'h2', + }, };