From 1f95de5c3be7b924a7e8a29520d985e405f290c3 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Tue, 26 Nov 2024 11:59:34 +0530 Subject: [PATCH 1/4] Storybook: Add HeadingLevelDropdown Stories --- .../stories/index.story.js | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js new file mode 100644 index 0000000000000..5e2bf678379b8 --- /dev/null +++ b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js @@ -0,0 +1,94 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import HeadingLevelDropdown from '../'; + +export default { + title: 'BlockEditor/HeadingLevelDropdown', + component: HeadingLevelDropdown, + argTypes: { + value: { + control: { type: 'number', min: 0, max: 6, step: 1 }, + description: 'The currently selected heading level.', + }, + options: { + control: 'array', + description: + 'An array of supported heading levels, e.g., [1, 2, 3, 4, 5, 6].', + }, + onChange: { + action: 'onChange', + description: + 'Callback triggered when a new heading level is selected.', + }, + }, + decorators: [ + ( Story ) => ( +
+ +
+ ), + ], +}; + +const Template = ( args ) => { + const [ value, setValue ] = useState( args.value ); + + return ( + { + setValue( newLevel ); + args.onChange( newLevel ); + } } + /> + ); +}; + +export const Default = Template.bind( {} ); +Default.args = { + value: 2, + options: [ 1, 2, 3, 4, 5, 6 ], +}; + +export const WithParagraphOption = Template.bind( {} ); +WithParagraphOption.args = { + value: 0, + options: [ 0, 1, 2, 3, 4 ], +}; + +export const LimitedOptions = Template.bind( {} ); +LimitedOptions.args = { + value: 3, + options: [ 2, 3, 4 ], +}; + +export const StartingAsParagraph = Template.bind( {} ); +StartingAsParagraph.args = { + value: 0, + options: [ 0, 1, 2, 3 ], +}; + +export const InteractiveDropdown = () => { + const [ selectedLevel, setSelectedLevel ] = useState( 2 ); + + return ( +
+

+ Selected Level:{ ' ' } + { selectedLevel === 0 ? 'Paragraph' : `H${ selectedLevel }` } +

+ setSelectedLevel( newLevel ) } + /> +
+ ); +}; From f0f8d7f1c119911496b6089d4a0c6bcda1a95a5f Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 2 Dec 2024 16:05:06 +0530 Subject: [PATCH 2/4] Update HeadingLevelDropdown story to CSF 3 --- .../stories/index.story.js | 69 +++++-------------- 1 file changed, 16 insertions(+), 53 deletions(-) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js index 5e2bf678379b8..c74d12274a138 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js @@ -36,59 +36,22 @@ export default { ], }; -const Template = ( args ) => { - const [ value, setValue ] = useState( args.value ); - - return ( - { - setValue( newLevel ); - args.onChange( newLevel ); - } } - /> - ); -}; - -export const Default = Template.bind( {} ); -Default.args = { - value: 2, - options: [ 1, 2, 3, 4, 5, 6 ], -}; - -export const WithParagraphOption = Template.bind( {} ); -WithParagraphOption.args = { - value: 0, - options: [ 0, 1, 2, 3, 4 ], -}; - -export const LimitedOptions = Template.bind( {} ); -LimitedOptions.args = { - value: 3, - options: [ 2, 3, 4 ], -}; - -export const StartingAsParagraph = Template.bind( {} ); -StartingAsParagraph.args = { - value: 0, - options: [ 0, 1, 2, 3 ], -}; - -export const InteractiveDropdown = () => { - const [ selectedLevel, setSelectedLevel ] = useState( 2 ); - - return ( -
-

- Selected Level:{ ' ' } - { selectedLevel === 0 ? 'Paragraph' : `H${ selectedLevel }` } -

+export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState( args.value ); + return ( setSelectedLevel( newLevel ) } + { ...args } + value={ value } + onChange={ ( ...changeArgs ) => { + setValue( ...changeArgs ); + onChange( ...changeArgs ); + } } /> -
- ); + ); + }, + args: { + value: 2, + options: [ 1, 2, 3, 4, 5, 6 ], + }, }; From dd964a19bb4f7b96ed406b8bc92928d7e64a3d72 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Wed, 4 Dec 2024 12:56:20 +0530 Subject: [PATCH 3/4] Update control types --- .../block-heading-level-dropdown/stories/index.story.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js index c74d12274a138..726314e79f843 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js @@ -8,12 +8,12 @@ import { useState } from '@wordpress/element'; */ import HeadingLevelDropdown from '../'; -export default { +const meta = { title: 'BlockEditor/HeadingLevelDropdown', component: HeadingLevelDropdown, argTypes: { value: { - control: { type: 'number', min: 0, max: 6, step: 1 }, + control: { type: null }, description: 'The currently selected heading level.', }, options: { @@ -23,6 +23,7 @@ export default { }, onChange: { action: 'onChange', + control: { type: null }, description: 'Callback triggered when a new heading level is selected.', }, @@ -36,9 +37,12 @@ export default { ], }; +export default meta; + export const Default = { render: function Template( { onChange, ...args } ) { const [ value, setValue ] = useState( args.value ); + return ( Date: Mon, 9 Dec 2024 11:12:18 +0530 Subject: [PATCH 4/4] Update HeadingLevelDropdown story for improved usability --- .../stories/index.story.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js index 726314e79f843..a8293258f7a00 100644 --- a/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js +++ b/packages/block-editor/src/components/block-heading-level-dropdown/stories/index.story.js @@ -11,30 +11,31 @@ import HeadingLevelDropdown from '../'; const meta = { title: 'BlockEditor/HeadingLevelDropdown', component: HeadingLevelDropdown, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Dropdown for selecting a heading level (1 through 6) or paragraph (0).', + }, + }, + }, argTypes: { value: { control: { type: null }, - description: 'The currently selected heading level.', + description: 'The chosen heading level.', }, options: { - control: 'array', - description: - 'An array of supported heading levels, e.g., [1, 2, 3, 4, 5, 6].', + control: 'check', + options: [ 1, 2, 3, 4, 5, 6 ], + description: 'An array of supported heading levels.', }, onChange: { action: 'onChange', control: { type: null }, - description: - 'Callback triggered when a new heading level is selected.', + description: 'Function called with the selected value changes.', }, }, - decorators: [ - ( Story ) => ( -
- -
- ), - ], }; export default meta; @@ -56,6 +57,5 @@ export const Default = { }, args: { value: 2, - options: [ 1, 2, 3, 4, 5, 6 ], }, };